/* page d'accueil : hero, repères, mot des co-directeurs, partenaires */

/* ---------- ESSAI DU 2026-10-02 : vidéo de fond ----------
   Le bandeau d'accueil montre une vidéo en boucle au lieu du diaporama de deux
   photos. Pour revenir en arrière : supprimer ce bloc, et la balise <video> de
   pages/index.html. Les deux .hero-bg n'ont pas été touchés et reprennent la
   main dès que la vidéo n'est plus là.

   La vidéo est muette et sans commandes : c'est un décor, pas un contenu. D'où
   aussi aria-hidden et tabindex=-1 — un lecteur d'écran et la touche de
   tabulation n'ont rien à y faire. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:0;background:#111}
/* Tant que la vidéo est là, les photos ne servent plus qu'à une chose : rester
   en réserve. On les sort du flux plutôt que de les empiler sous la vidéo —
   un fond qu'on ne voit pas, le navigateur le télécharge quand même. */
.hero:has(.hero-video) .hero-bg{display:none}
/* Vidéo calée faute de réseau : elle s'efface et les deux photos reprennent la
   main. Une image figée sur un bandeau d'accueil ressemble à une panne ; deux
   photos qui se succèdent ressemblent à un choix. La vidéo revient d'elle-même
   dès que les données reviennent (js/hero-video.js). */
.hero.hero-video-en-panne .hero-video{opacity:0}
.hero.hero-video-en-panne .hero-bg{display:block}
.hero-video{transition:opacity .5s ease}
/* Mouvement réduit : la vidéo s'efface et les photos reprennent, puisqu'une
   boucle vidéo est précisément ce que ce réglage demande d'éviter. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero:has(.hero-video) .hero-bg{display:block}
}

/* ---------- hero ---------- */
/* « --large » : ce que l'écran dépasse 1380 px, et zéro en deçà. Tout le bloc
   du bandeau s'en sert pour grandir ensemble — titre, chapeau, surtitre,
   boutons, pastilles. À taille fixe, le titre occupait les trois quarts d'un
   écran de 800 px de haut et à peine quatre dixièmes d'un écran de 1440 : le
   même bandeau, mais un bloc qui s'y perdait.

   Un seul réglage pour les quatre éléments, afin qu'ils grandissent du même pas :
   un titre de 130 px au-dessus de boutons restés à 15 aurait été pire que le
   défaut de départ. En deçà de 1380 px le terme est nul et rien ne bouge. */
.hero{position:relative;min-height:742px;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
  --large:max(0px,(100vw - 1380px))}
.hero-bg{position:absolute;inset:0;background-size:cover;
  /* Sans position explicite, le navigateur cale le fond en haut à gauche : sur
     un écran étroit toute la rognure se fait à droite et la façade, pourtant
     symétrique, paraît de travers. On recentre. */
  background-position:center center;
  background-repeat:no-repeat;transform:scale(1.03);
  /* Dérive très lente : l'image n'est jamais tout à fait immobile, sans que le
     mouvement soit perceptible autrement que comme une impression de relief. */
  animation:derive 34s ease-in-out infinite alternate}
@keyframes derive{from{transform:scale(1.03)}to{transform:scale(1.1)}}
.hero-bg.parlement{background-position:center 26%;background-image:var(--diapo-1, url("../assets/img/hero-parlement.jpg"))}
.hero-bg.promo{background-image:var(--diapo-2, url("../assets/img/hero-promo.jpg"));opacity:0;
  animation:diapo 26s ease-in-out infinite, derive 34s ease-in-out infinite alternate}
@keyframes diapo{0%,55%{opacity:0}61%,92%{opacity:1}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-bg.promo{display:none}}
.hero::after{
  content:"";position:absolute;inset:0;
  /* Deux couches : un dégradé vertical qui assoit le bas de l'image, et un voile
     uniforme très léger qui détache le titre des parties claires de la façade. */
  background:
    linear-gradient(180deg,rgba(14,12,12,.26) 0,rgba(14,12,12,.44) 40%,rgba(14,12,12,.92) 100%),
    rgba(14,12,12,.14);
}
/* Le bandeau d'accueil ne suit pas la colonne de texte. Centrée, elle poussait
   le titre à sept cents pixels du bord sur un écran de 2560, alors qu'il en est
   à cent trente sur un écran ordinaire : le même bandeau n'avait plus la même
   composition d'un écran à l'autre.

   Le retrait est donc calculé plutôt qu'hérité : il suit la colonne tant qu'elle
   reste étroite — 128 px à 1380, exactement ce qu'il était — puis s'arrête à
   160. Pas de rupture : la formule est continue, et aucun seuil ne fait sauter
   le titre.

   Rien ne s'étire pour autant. Le titre et le chapeau sont bornés en caractères,
   quinze et cinquante-six : libérer la largeur du cadre ne les allonge pas. */
.hero .wrap{position:relative;z-index:2;padding-top:190px;padding-bottom:max(78px,9vh);width:100%;
  max-width:none;
  padding-left:clamp(28px,calc((100vw - 1180px) / 2 + 28px),160px);
  padding-right:clamp(28px,calc((100vw - 1180px) / 2 + 28px),160px)}

/* ---------- les deux réseaux, à la suite des boutons du bandeau ----------
   Des disques et non un quatrième bouton : ces deux liens sortent du site, et
   leur donner la forme des trois autres aurait laissé croire à une quatrième
   page. Ils reprennent le dessin du pied de page, agrandis pour tenir le rang
   à côté d'un bouton.

   52 px, légèrement en dessous des 57 px d'un bouton : un disque exactement
   aussi haut pèse plus lourd qu'une pastille, et ces deux liens sont les moins
   importants du rang. « align-self:stretch » aurait été plus souple, mais le
   navigateur ne l'honore pas sur une liste posée dans un rang qui enveloppe :
   mesuré, la liste restait à la hauteur de son contenu. */
.hero-reseaux{display:flex;align-items:center;gap:10px;margin:0 0 0 4px;padding:0;list-style:none}
.hero-reseaux li{margin:0}
.hero-reseaux a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;
  transition:background .24s ease,border-color .24s ease,color .24s ease,transform .24s ease}
.hero-reseaux a:hover,.hero-reseaux a:focus-visible{background:#fff;color:var(--ink);
  border-color:#fff;transform:translateY(-2px)}
.hero-reseaux svg{width:20px;height:20px;fill:currentColor;display:block}
/* Sous 560 px les boutons s'étirent sur toute la largeur et les disques passent
   seuls sur leur ligne : on les resserre pour qu'ils n'y paraissent pas gros. */
@media (max-width:560px){
  .hero-reseaux a{width:46px;height:46px}
  .hero-reseaux svg{width:18px;height:18px}
}
.hero .btn{font-size:calc(15px + min(5px,var(--large) * .0042));
  padding:calc(15px + min(7px,var(--large) * .006)) calc(30px + min(14px,var(--large) * .012))}
.hero .hero-reseaux a{width:calc(52px + min(10px,var(--large) * .0085));
  height:calc(52px + min(10px,var(--large) * .0085))}
.hero .hero-reseaux svg{width:calc(20px + min(4px,var(--large) * .0034));
  height:calc(20px + min(4px,var(--large) * .0034))}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:500;letter-spacing:.13em;
  color:#fff;margin:0 0 26px;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--crimson);flex:none}
/* Le titre grandit avec l'écran, mais seulement au-delà de la taille où il
   était déjà plafonné. À 80 px fixes, il occupait les trois quarts d'un écran de
   800 px de haut et à peine quatre dixièmes d'un écran de 1440 : le même
   bandeau, mais un titre qui s'y perdait.

   La formule part du réglage d'origine — 6,4 % de la largeur, bornés à 80 — et
   lui ajoute quatre centièmes de ce que l'écran dépasse 1380 px. En deçà, le terme
   ajouté est nul et rien ne change : vérifié, 80 px à 1380 comme avant. */
.hero h1{
  font-size:clamp(42px,calc(min(6.4vw,80px) + var(--large) * .042),132px);
  line-height:1.02;margin:0 0 26px;font-weight:300;letter-spacing:-.01em;max-width:15ch;
  text-shadow:0 2px 30px rgba(0,0,0,.45)
}
.hero h1 em{display:block;font-style:normal;color:inherit}
.hero p.lede{font-size:clamp(17px,calc(min(1.7vw,20.5px) + var(--large) * .0045),26px);
  max-width:56ch;color:#fff;margin:0 0 38px;font-family:Spectral,serif;
  line-height:1.6;text-shadow:0 1px 20px rgba(0,0,0,.5)}

/* Repère de défilement : un filet dans lequel un segment rouge descend en
   boucle, posé à l'écart du titre et des boutons. Masqué sur les petits écrans,
   où le geste de défiler n'a pas besoin d'être suggéré. */
.hero-defiler{position:absolute;right:34px;bottom:38px;z-index:2;
  display:block;width:16px;height:74px}
.hero-defiler-trait{position:absolute;left:50%;top:0;width:1px;height:100%;
  background:rgba(255,255,255,.34);overflow:hidden}
.hero-defiler-trait::after{content:"";position:absolute;left:0;width:1px;height:34%;
  background:var(--crimson);animation:descendre 2.6s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes descendre{0%{top:-40%}55%,100%{top:110%}}
.hero-defiler:hover .hero-defiler-trait{background:rgba(255,255,255,.6)}
@media (max-width:680px){.hero-defiler{display:none}}

/* ---------- repères ---------- */
.figures{background:#fff;border-bottom:1px solid var(--line)}
.figures .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fig{padding:40px 32px 42px;border-left:1px solid var(--line)}
.fig:first-child{border-left:0;padding-left:0}
/* Chiffres d'un cran plus petits que dans la version d'origine (52 px), pour
   que la bande se remarque sans occuper le haut de la page. */
.fig b{display:block;font-family:Spectral,serif;font-size:42px;font-weight:300;line-height:1;color:var(--crimson)}
.fig span{display:block;margin-top:14px;font-size:13.5px;color:var(--muted);max-width:20ch}

/* ---------- mot des co-directeurs ---------- */
.word{position:relative;padding:88px 0 64px}
.word .wrap{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:start}
/* La photo occupe la colonne de gauche, à hauteur du texte et non du titre :
   la marge haute reprend la hauteur du h2 (taille × interligne) et sa marge
   basse, pour que le haut de la photo tombe sur la ligne du sous-titre. */
/* height:auto est indispensable : l'attribut height de la balise vaut sinon
   hauteur fixe, et aspect-ratio est ignoré. */
.word-photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  margin-top:calc(clamp(29px,3.4vw,42px) * 1.15 + 10px)}
.word h2{font-size:clamp(29px,3.4vw,42px);font-weight:300;line-height:1.15;margin:0 0 10px}
.word .subtitle{font-family:Spectral,serif;font-size:17px;color:var(--crimson);margin:0 0 32px}
blockquote{margin:0;font-family:Spectral,serif;font-style:italic;font-size:clamp(21px,2.4vw,28px);
  line-height:1.62;font-weight:300;color:var(--ink);
  /* Justifiée. La césure automatique est indispensable ici : sans elle, une
     colonne de cette largeur creuse des rivières de blanc entre les mots.
     (La page est en lang="fr", le navigateur coupe donc selon le français.) */
  text-align:justify;hyphens:auto}
.signature{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:44px}
.signature div{max-width:32ch}
.signature div b{display:block;font-family:Spectral,serif;font-size:18.5px;font-weight:600}
.signature div span{font-size:13.5px;color:var(--muted)}
.readmore{display:inline-block;margin-top:28px;font-size:14.5px;font-weight:600;color:var(--crimson);
  border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- carrousel partenaires ---------- */
/* Le bandeau blanc des partenaires : resserré, et remonté vers le mot des
   co-directeurs. */
.partners{background:#fff;padding:60px 0 58px;border-top:1px solid var(--line)}

/* Rythme vertical de l'accueil, plus resserré que sur les pages intérieures.
   « Ce qui distingue » et « Actualités » partagent le même fond : rien ne marque
   la coupure entre les deux, et l'espace d'une section à l'autre s'y lit comme un
   trou. C'est là qu'on serre le plus. */
#formation{padding:72px 0 40px}
#actualites{padding:40px 0 76px}

.partners .sec-head{margin-bottom:36px}

/* ---------- effets de l'accueil ----------
   Tout reprend le vocabulaire déjà en place ailleurs sur le site : le filet
   rouge des titres de carte, l'agrandissement d'image au survol des pôles,
   l'apparition au défilement de Candidater et de La formation. */

/* Les encarts sont de simples blocs : pas de filet au-dessus du titre, un titre
   en romaine claire plutôt qu'en gras, et aucun effet au survol — ils ne sont
   pas cliquables. */
#vue-index .grid3 .card h3{font-weight:400}
#vue-index .grid3 .card h3::before{display:none}

/* Actualités : pas d'ombre portée au repos, mais la vignette se soulève et
   s'agrandit légèrement au survol, et le titre passe au rouge. */
#vue-index .pub-cover{box-shadow:none;overflow:hidden}
#vue-index .pub-cover img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
#vue-index .pub-cover:hover img{transform:scale(1.05)}
#vue-index .pub h3 a{transition:color .22s ease}
#vue-index .pub:hover h3 a{color:var(--crimson)}

/* Les encarts reprennent la justification du reste du site (composants.css) :
   la règle qui les passait en drapeau est retirée. Chaque encart se referme
   sur un filet rouge, posé après le texte. */
/* L'encart devient une colonne, ce qui permet de pousser le filet tout en bas
   (margin-top:auto) : les encarts d'une rangée ayant la même hauteur, leurs
   filets tombent alors sur une même ligne, quelle que soit la longueur des
   textes. La marge basse du paragraphe garantit l'écart minimal. */
#vue-index .grid3 .card{display:flex;flex-direction:column}
#vue-index .grid3 .card p{margin-bottom:26px}
#vue-index .grid3 .card::after{content:"";display:block;width:50%;height:2px;
  background:var(--crimson);margin-top:auto}

/* Les deux liens de fin de bloc s'assombrissent au survol. */
/* Le lien « toutes les actualités » et le bouton du rail se partagent la
   ligne : l'un mène à la page, l'autre fait avancer la bande. Empilés, ils
   auraient donné deux rangées pour deux mots. */
#vue-index #actualites .sec-foot{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px}
#vue-index .readmore,#vue-index .sec-foot a{transition:color .22s ease,border-bottom-color .22s ease}
#vue-index .readmore:hover,#vue-index .sec-foot a:hover{color:var(--crimson-dark)}

/* ---------- animation d'ouverture ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero .wrap>*{animation:rise .9s cubic-bezier(.22,.7,.3,1) backwards}
.hero .wrap>*:nth-child(1){animation-delay:.05s}
.hero .wrap>*:nth-child(2){animation-delay:.18s}
.hero .wrap>*:nth-child(3){animation-delay:.31s}

/* ---------- actualités de l'accueil ----------
   Deux objets seulement : la dernière parution, et la dernière publication
   LinkedIn. La colonne de gauche est fixe pour que la couverture garde une
   taille de vignette et ne s'étire pas sur la moitié de la page. */
/* Les deux colonnes s'étirent à la même hauteur : c'est la fiche de la Gazette,
   dont la hauteur dépend du texte, qui donne la mesure — le rail des posts s'y
   aligne au lieu d'imposer une hauteur fixe. */
/* Une seule mesure pour toute la rangée : la colonne de la gazette, les cartes
   du rail et les intégrations la lisent toutes. Elles avaient chacune la leur,
   et sur les écrans intermédiaires — ceux où le rail se resserrait à 280 px —
   la gazette restait à 330 : deux cartes voisines de largeurs différentes,
   donc de hauteurs différentes. */
#vue-index .accueil-actus{--carte-actus:330px;
  /* La hauteur de la couverture de la gazette, d'où se déduit la largeur de sa
     carte. Elle vaut celle d'une case du rail : la mesure commune, moins les
     deux bordures et les deux marges intérieures de la fiche. */
  --couverture-haut:calc(var(--carte-actus) - 30px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:38px;
  align-items:stretch}

/* ---------- le rail déborde jusqu'au bord de l'écran ----------
   Il s'arrêtait à la colonne de texte, et la carte suivante y était tranchée net
   — on ne voyait pas qu'il y avait une suite, on voyait une carte abîmée. Elle
   sort maintenant à moitié de la page : c'est le débord qui dit qu'il y en a
   d'autres, et le bouton du pied de section qui les amène.

   Le débord s'arrête à la gouttière de la page, 28 px avant le bord de l'écran :
   collées au bord, les cartes semblaient déborder de la fenêtre plutôt que de
   la colonne, et la page perdait sa marge droite.

   Il vaut donc la distance du bord de la colonne de texte à cette gouttière —
   mais borné à 150 px. Sans ce plafond il grandissait avec l'écran : sur
   2560 px il atteignait 690, le bloc commençait à 718 et finissait à 2532, et
   l'on voyait les actualités collées à droite d'une page vide à gauche. Un
   débord est un geste, pas une proportion : il doit garder la même mesure quel
   que soit l'écran.
   Il est calculé et non deviné : la colonne fait au plus 1124 px (1180 moins
   les deux marges de 28), elle est centrée, et il en reste donc la moitié du
   reste de chaque côté. En deçà de 1180 px d'écran, la colonne touche déjà les
   marges et le débord se réduit à celles-ci.

   La même mesure sert de retrait à l'intérieur du rail : sans elle, la dernière
   carte ne pourrait jamais venir entièrement à l'écran — elle resterait collée
   au bord droit. */
#vue-index .accueil-actus{--debord-actus:clamp(0px,calc(50vw - 590px),150px);
  margin-right:calc(-1 * var(--debord-actus))}
#vue-index .posts-defilants{padding-right:var(--debord-actus)}

/* Rail horizontal : on en voit deux, la barre donne accès aux suivants. Le rail
   est focusable pour pouvoir le parcourir aussi au clavier. */
#vue-index .posts-defilants{display:flex;gap:20px;height:100%;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
/* La barre de défilement cramoisie a cédé la place au bouton du pied de
   section : elle signalait qu'il y avait une suite, elle ne la donnait pas d'un
   clic, et il fallait viser un trait de 8 px. Le rail se fait toujours glisser
   au doigt, à la molette et au clavier — il garde son tabindex. */
#vue-index .posts-defilants{scrollbar-width:none;-ms-overflow-style:none}
#vue-index .posts-defilants::-webkit-scrollbar{display:none;width:0;height:0}
#vue-index .posts-defilants .post{flex:0 0 var(--carte-actus);scroll-snap-align:start;display:flex}
#vue-index .posts-defilants .post iframe{height:100%}
#vue-index .posts-defilants:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

@media (max-width:900px){
  #vue-index .accueil-actus{grid-template-columns:1fr;gap:30px}
  #vue-index .accueil-actus .publication{max-width:var(--carte-actus)}
  /* en colonne unique, la fiche ne donne plus la hauteur : on la fixe */
  #vue-index .posts-defilants{height:auto}
  #vue-index .posts-defilants .post iframe{height:560px}
}

/* Les publications du rail sont nos propres cartes, plus des intégrations :
   elles occupent toute la hauteur du rail, comme le faisaient les cadres. */
#vue-index .posts-defilants .post-li{flex:0 0 330px;scroll-snap-align:start;height:100%}
#vue-index .posts-defilants .post-visuel img{aspect-ratio:auto}
@media (max-width:1040px){
  #vue-index .posts-defilants .post-li{height:auto}
}


/* Crème pour le mot des co-directeurs et les six chiffres, blanc pour le
   bandeau des logos et les actualités : l'alternance marque les coupures. */
.word,#formation{background:var(--stone-soft)}
#actualites{background:#fff}

/* ---------- apparition au défilement ----------
   Les trois blocs qui suivent le mot des co-directeurs se lèvent quand ils
   entrent dans l'écran. Le mouvement est court et ne se joue qu'une fois : il
   casse la monotonie du défilement sans se faire remarquer à chaque visite.
   L'observateur est celui du site (js/animations.js) ; sans JavaScript, ou si
   le système demande moins d'animations, tout reste affiché. */
#vue-index .partners.apparait,
#vue-index .sec.apparait{transition-duration:.62s}


/* ---------- « Le DJCE en quelques chiffres » : liste numérotée ----------
   Les six points étaient six cases de même taille, en petites colonnes
   justifiées : rien n'attirait l'œil, et la justification sur quarante signes
   creusait des blancs entre les mots à chaque ligne.

   Ils s'empilent désormais sur toute la largeur, chacun précédé de son numéro.
   Le texte gagne une colonne confortable, au fer à gauche et sans coupure : on
   lit d'une traite au lieu de picorer six cases. Le numéro en rouge remplace
   les filets, qui ne disaient rien. */
#vue-index .reperes{list-style:none;margin:0;padding:0;counter-reset:repere}
#vue-index .repere{counter-increment:repere;
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 36px;
  padding:34px 0;border-top:1px solid var(--line)}
#vue-index .repere:first-child{border-top:0;padding-top:4px}
#vue-index .repere::before{content:counter(repere,decimal-leading-zero);
  font-family:Spectral,Georgia,serif;font-size:36px;font-weight:300;line-height:.9;
  color:var(--crimson);letter-spacing:.01em}
#vue-index .repere h3{margin:0 0 9px;font-size:21.5px;font-weight:600;line-height:1.2}
#vue-index .repere p{margin:0;font-size:16.5px;line-height:1.72;color:#3F3F3F;
  max-width:72ch;text-align:left;hyphens:none}
@media (max-width:680px){
  #vue-index .repere{grid-template-columns:1fr;gap:10px;padding:26px 0}
  #vue-index .repere::before{font-size:28px}
}

/* ---------- variante : mosaïque asymétrique ----------
   Même contenu, autre composition : les six points reprennent la grille, mais
   de tailles inégales. Le premier occupe quatre cases et porte un texte plus
   grand : l'œil sait par où commencer, ce que six cases identiques ne disaient
   pas. Une classe suffit à passer d'une forme à l'autre. */
#vue-index .reperes.mosaique{display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line)}
#vue-index .mosaique .repere{display:block;background:#fff;border-top:0;
  padding:30px 32px 34px}
#vue-index .mosaique .repere::before{display:block;margin-bottom:14px;font-size:23px}
#vue-index .mosaique .repere h3{font-size:20px;margin-bottom:8px}
#vue-index .mosaique .repere p{font-size:15.8px;line-height:1.68;max-width:46ch}

/* La première entrée tient la place de quatre : c'est elle qu'on lit d'abord. */
#vue-index .mosaique .repere:nth-child(1){grid-column:span 2;grid-row:span 2;
  padding:42px 44px 46px}
#vue-index .mosaique .repere:nth-child(1)::before{font-size:34px;margin-bottom:18px}
#vue-index .mosaique .repere:nth-child(1) h3{font-size:27px;margin-bottom:12px}
#vue-index .mosaique .repere:nth-child(1) p{font-size:17.4px;line-height:1.72;max-width:58ch}
/* La dernière rangée : une case simple, puis une large. */
#vue-index .mosaique .repere:nth-child(5){grid-column:span 2}
#vue-index .mosaique .repere:nth-child(5) p{max-width:62ch}

@media (max-width:1040px){
  #vue-index .reperes.mosaique{grid-template-columns:repeat(2,1fr)}
  #vue-index .mosaique .repere:nth-child(1){grid-column:span 2;grid-row:auto}
  #vue-index .mosaique .repere:nth-child(5){grid-column:span 2}
}
@media (max-width:680px){
  #vue-index .reperes.mosaique{grid-template-columns:1fr}
  #vue-index .mosaique .repere,
  #vue-index .mosaique .repere:nth-child(1),
  #vue-index .mosaique .repere:nth-child(5){grid-column:auto;padding:26px 24px 28px}
}

/* ---------- variante : les chiffres en avant ----------
   Le contenu change autant que la forme : six données plutôt que six
   paragraphes. Le chiffre porte l'information, la phrase l'explique en une
   ligne ou deux. C'est ce qui se retient d'un site qu'on parcourt debout, dans
   un couloir de faculté. */
#vue-index .chiffres{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:54px 64px}
#vue-index .chiffres li{display:block}
#vue-index .chiffre{margin:0 0 12px;display:flex;align-items:baseline;gap:10px;
  padding-bottom:14px;border-bottom:2px solid var(--crimson)}
#vue-index .chiffre b{font-family:Spectral,Georgia,serif;font-size:clamp(42px,5vw,62px);
  font-weight:300;line-height:.86;letter-spacing:-.02em;color:var(--crimson)}
#vue-index .chiffre span{font-family:Montserrat,sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#vue-index .chiffre-texte{margin:0;font-size:15.8px;line-height:1.66;color:#3F3F3F;
  text-align:left;hyphens:none}
@media (max-width:1040px){
  #vue-index .chiffres{grid-template-columns:repeat(2,1fr);gap:44px 48px}
}
@media (max-width:680px){
  #vue-index .chiffres{grid-template-columns:1fr;gap:34px}
}



/* ---------- apparition en deux temps ----------
   « Le DJCE de Rennes en quelques chiffres » et « Actualités » ne se lèvent plus
   d'un bloc : le titre vient d'abord, puis son développement suit, chiffre
   après chiffre. Le décalage est court — six centièmes de seconde entre deux
   éléments — assez pour que l'œil suive, trop peu pour attendre.

   La section elle-même ne bouge plus : c'est la classe « vu », posée par
   l'observateur au moment où elle entre dans l'écran, qui déclenche ses
   enfants. */
#vue-index #formation.apparait,
#vue-index #actualites.apparait{opacity:1;transform:none;transition:none}

#vue-index #formation .sec-head,
#vue-index #actualites .sec-head,
#vue-index .chiffres li,
#vue-index .accueil-actus{opacity:0;transform:translateY(16px);
  transition:opacity .46s ease,transform .46s cubic-bezier(.2,.7,.3,1)}
/* Les sélecteurs de révélation reprennent l'identifiant de la section : une
   règle à deux identifiants l'emporte sur une règle à un seul, et le titre
   serait resté invisible. */
#vue-index #formation.vu .sec-head,
#vue-index #actualites.vu .sec-head,
#vue-index .vu .chiffres li,
#vue-index .vu .accueil-actus{opacity:1;transform:none}

/* Le retard se compte par rangée et non par case : six retards échelonnés
   faisaient durer la cascade plus d'une seconde, et les deux dernières cases
   étaient encore invisibles quand on arrivait dessus. Deux rangées, deux
   retards — la dernière case est en place six dixièmes de seconde après le
   déclenchement au lieu de plus d'une. */
#vue-index .vu .chiffres li{transition-delay:.06s}
#vue-index .vu .chiffres li:nth-child(n+4){transition-delay:.14s}
#vue-index .vu .accueil-actus{transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  #vue-index #formation .sec-head,
  #vue-index #actualites .sec-head,
  #vue-index .chiffres li,
  #vue-index .accueil-actus{opacity:1;transform:none;transition:none}
}

/* ---------- échelle resserrée de la page d'accueil ----------
   Parti minimaliste : tout descend d'un cran. Les grandes tailles donnaient à
   la page un ton de brochure ; en réduisant, le texte redevient du texte et
   c'est le blanc qui structure. La photo des directeurs passe de 360 à 240
   pixels de côté — elle accompagne le propos au lieu de le dominer.

   Rien ne descend sous 15 px : en deçà, la lecture devient pénible pour une
   part non négligeable des visiteurs. */
#vue-index .word .wrap{grid-template-columns:240px 1fr;gap:56px}
#vue-index .word-photo{margin-top:calc(clamp(23px,2.3vw,29px) * 1.15 + 8px)}
#vue-index .word h2{font-size:clamp(23px,2.3vw,29px);margin-bottom:8px}
#vue-index .word .subtitle{font-size:14.5px;margin-bottom:24px}
#vue-index blockquote{font-size:clamp(17px,1.6vw,20px);line-height:1.66}
#vue-index .signature{margin-top:26px;padding-top:20px;gap:36px}
#vue-index .signature div b{font-size:16px}
#vue-index .signature div span{font-size:12.8px}
#vue-index .readmore{margin-top:22px;font-size:13.5px}

/* Les titres de l'accueil retrouvent la graisse et la taille qu'ils avaient
   avant le filet rouge : du 600 serré, et non le 300 du reste du site. Un titre
   en graisse 300 paraît fragile sur une page d'accueil, où les sections se
   suivent sans fond pour les séparer. Le filet rouge, lui, reste : c'est la
   composition à deux colonnes qu'il avait remplacée, pas la typographie. */
#vue-index .sec-head h2{font-size:clamp(25px,2.7vw,34px);font-weight:600;
  line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
#vue-index .sec-head p{font-size:14.8px}

#vue-index .chiffres{gap:46px 56px}
#vue-index .chiffre b{font-size:clamp(34px,3.6vw,46px)}
#vue-index .chiffre span{font-size:11px}
#vue-index .chiffre-texte{font-size:15px;line-height:1.64}

#vue-index .partners .sec-head{margin-bottom:28px}
@media (max-width:1040px){
  #vue-index .word .wrap{grid-template-columns:200px 1fr;gap:38px}
}
@media (max-width:680px){
  #vue-index .word .wrap{grid-template-columns:1fr}
  #vue-index .word-photo{max-width:220px;margin-top:0}
}

/* ---------- la photo des directeurs déborde vers la gauche ----------
   Sa colonne garde exactement sa largeur : le texte ne bouge pas d'un pixel.
   La photo, elle, s'étend dans la marge libre à gauche du contenu — autant que
   l'écran le permet, jamais au-delà, pour ne pas créer de défilement
   horizontal. Sur un écran étroit, le débord vaut zéro et rien ne change. */
#vue-index .word{--debord:clamp(0px, calc((100vw - var(--wrap)) / 2 - 16px), 120px)}
#vue-index .word-photo{width:calc(100% + var(--debord));max-width:none;
  margin-left:calc(var(--debord) * -1)}
@media (max-width:680px){
  #vue-index .word{--debord:0px}
}


/* ---------- encarts courts du rail d'actualités ----------
   Sur l'accueil, une publication ou un post se résume à son image et à son
   titre : le détail est sur la page Actualités, à un clic. Les cartes y
   gagnent en hauteur et le rail se parcourt d'un coup d'œil. */
#vue-index .publication-courte h3{margin:18px 0 0;font-size:17.5px;line-height:1.32}
#vue-index .publication-courte .publication-actions{margin-top:16px}
#vue-index .posts-defilants .post-texte{font-size:15px;line-height:1.55;
  margin-bottom:14px}
#vue-index .posts-defilants .post-corps{padding:18px 20px 18px}
#vue-index .posts-defilants .post-lien{font-size:13px}

/* ---------- les posts du rail deviennent carrés ----------
   La carte occupait toute la hauteur du rail, fixée par celle de la gazette :
   d'où un grand vide entre le texte et le lien, que « margin-top:auto »
   repoussait en bas. Elle prend maintenant une proportion carrée, le lien suit
   immédiatement le texte, et c'est l'image qui absorbe la hauteur restante.
   Le texte est borné à deux lignes pour que toutes les cartes se ressemblent. */
/* Centrées dans la hauteur du rail, que fixe la carte de la gazette : sans
   quoi les carrés se collent en haut et laissent un vide sous eux. */
/* La carte n'est pas carrée : c'est sa zone d'image qui l'est, et la hauteur
   de la carte s'ensuit — l'image, puis le texte en pied. En rendant la carte
   entière carrée, on retranchait la hauteur du texte à celle de l'image : la
   zone d'image devenait un bandeau large, et une affiche presque carrée y
   flottait entre deux bandes floutées. Toutes les cartes font donc la même
   taille, et une affiche carrée remplit la sienne exactement. */
#vue-index .posts-defilants .post-li{flex:0 0 var(--carte-actus);height:auto;align-self:start;
  overflow:hidden;display:flex;flex-direction:column}
/* Toutes les cartes du rail ont la même taille, et leur affiche est carrée.

   On a essayé l'inverse — la carte épousant la forme de son affiche, pour que
   chacune remplisse la sienne entièrement. Chaque image y était complète, mais
   les hauteurs allaient de trois cents à cinq cent soixante pixels et le bas
   du rail devenait irrégulier. Une bande qui défile se lit mieux d'un seul
   trait.

   Le carré revient donc, et avec lui le choix qu'il impose : une affiche qui
   n'est pas carrée ne peut pas le remplir sans perdre ses bords. On ne la
   rogne pas — c'est ce qui avait été demandé, et une affiche de réseau porte
   son texte jusqu'aux bords. Ce qui reste de la case autour d'elle est comblé
   par l'affiche elle-même, floutée et agrandie. La case est donc pleine,
   l'image entière, et les cartes alignées. */
#vue-index .posts-defilants .post-visuel{flex:none;aspect-ratio:1;overflow:hidden;
  position:relative;isolation:isolate}
#vue-index .posts-defilants .post-visuel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--vignette) center/cover no-repeat;
  filter:blur(22px) saturate(1.12);transform:scale(1.35)}
#vue-index .posts-defilants .post-visuel img,
#vue-index .posts-defilants .post-visuel .breve-vue{display:block;width:100%;height:100%;
  aspect-ratio:auto;object-fit:contain;position:relative}
/* L'affiche déjà presque carrée remplit sa case au lieu d'y flotter. Le rendu
   la marque au moment de la construction, quand ses côtés ne diffèrent que de
   quelques pour cent : elle perd alors trois pixels sur un bord, là où le fond
   flouté se voyait comme un liseré de couleur en haut de la carte. Les autres
   affiches, qui s'écartent du carré de vingt à cinquante pour cent, gardent le
   fond flouté — chez elles il comble une vraie surface. */
#vue-index .posts-defilants .post-visuel-plein img{object-fit:cover}
#vue-index .posts-defilants .post-visuel-plein::before{display:none}
#vue-index .posts-defilants .post-corps{flex:none;padding:14px 18px 16px}
/* Deux lignes réservées, même quand le texte n'en remplit qu'une : sans cela
   une carte au message court se retrouve plus basse que ses voisines, et le
   bas du rail perd son aplomb. C'est la même raison qui fait réserver deux
   lignes au titre de la gazette. */
#vue-index .posts-defilants .post-texte{margin:0 0 9px;min-height:calc(2 * 1.55em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#vue-index .posts-defilants .post-lien{margin-top:0}
/* Sur un écran intermédiaire, la rangée se resserre d'un seul tenant : il
   suffit de changer la mesure commune. */
@media (max-width:1040px){
  #vue-index .accueil-actus{--carte-actus:280px}
}

/* ---------- la gazette, au régime des autres cartes du rail ----------
   Elle était carrée et sa couverture recadrée sur son centre, du temps où les
   quatre encarts du rail avaient la même silhouette. Depuis que chaque carte
   épouse la forme de son affiche, ce carré faisait d'elle la seule dont on
   coupait l'image — et une couverture de revue coupée, c'est son titre qu'on
   perd.

   Elle suit donc la même règle : la couverture garde ses proportions, la carte
   prend la hauteur qui s'ensuit. À deux cent quatre-vingts pixels de large, la
   couverture en fait trois cent quatre-vingt-seize, ce qui place la carte au
   milieu des autres. */
/* Calée en haut de la rangée, comme les posts : le rail réserve sa barre de
   défilement en bas, et sans cela les deux cartes ne partaient pas de la
   même ligne. */
/* La carte prend la largeur qu'il faut à sa couverture, et pas davantage.

   Sa case était carrée, comme celles du rail. Mais une case du rail reçoit une
   affiche de réseau social, carrée elle aussi, tandis que la gazette est une
   revue : 760 sur 1075: dans trois cents pixels de haut, elle n'en occupait que
   deux cent douze de large, et les quatre-vingt-huit qui restaient étaient
   comblés de flou. On tenait la case et l'on floutait l'écart ; on tient
   maintenant la hauteur — celle des cartes du rail, pour que la rangée reste
   d'aplomb — et la largeur suit la couverture au pixel près.

   Les deux nombres viennent de l'image elle-même, posés sur la carte au moment
   du rendu : une autre gazette donnera d'autres proportions sans qu'on touche
   à cette règle. Les valeurs ici ne servent que si l'image n'a pas pu être
   mesurée.

   Le « max » garde la place des deux boutons, qui ne se laissent pas réduire :
   sur les écrans où la rangée se resserre, la couverture est plus étroite
   qu'eux, et c'est eux alors qui donnent la mesure. Sans cette garde ils
   passeraient à la ligne et la carte serait plus haute que ses voisines. */
#vue-index .publication-courte{--large:3;--haute:4;
  width:max(calc(var(--couverture-haut) * var(--large) / var(--haute) + 30px), 236px);
  align-self:start;overflow:hidden}
/* La case épouse la couverture, hauteur imposée et largeur déduite. Elle n'a
   donc plus de vide à combler : le fond flouté qui le comblait a disparu avec
   lui, et la couverture se pose simplement sur le blanc de la fiche.

   Elle est centrée pour le seul cas où la carte est plus large qu'elle : sur
   les écrans resserrés, ce sont les boutons qui donnent la mesure, et la
   couverture garde alors une quinzaine de pixels de blanc de chaque côté —
   une marge, non une bande. */
#vue-index .publication-courte .publication-couverture{flex:none;
  height:var(--couverture-haut);width:auto;
  aspect-ratio:calc(var(--large) / var(--haute));margin-inline:auto;
  position:relative}
#vue-index .publication-courte .publication-couverture img{display:block;width:100%;height:100%;
  aspect-ratio:auto;object-fit:contain}
/* Le pied de carte se resserre : à hauteur constante, tout ce que le texte
   cède en marges, la couverture le gagne. */
/* Huit pixels sous les boutons et non douze : la carte de la gazette tombe
   ainsi exactement à la hauteur des cartes du rail, dont le pied est fait
   d'un lien et non de deux boutons. */
#vue-index .publication-courte{padding:14px 14px 8px}
/* Le titre réserve la place de deux lignes, comme le texte des posts voisins
   en réserve deux lui aussi. Sans cela la carte de la gazette, dont le titre
   tient sur une ligne, était plus courte de vingt pixels que les autres — et
   l'on cherchait pourquoi une seule carte du rail ne tombait pas d'aplomb. */
#vue-index .publication-courte h3{margin:11px 0 0;font-size:15.5px;line-height:1.28;
  min-height:calc(2 * 1.28em)}
#vue-index .publication-courte .publication-actions{margin-top:9px}
#vue-index .publication-courte .pub-btn{padding:7px 13px;font-size:12.5px}


/* Les noms des co-directeurs en rouge : ce sont eux qui signent le propos. */
#vue-index .signature div b{color:var(--crimson)}