/* boutons, titres de section, cartes, actualités, carrousel de logos */

.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;padding:15px 30px;font-size:15px;font-weight:600;border:1px solid transparent}
.btn-solid{background:var(--crimson);color:#fff}
.btn-solid:hover{background:var(--crimson-dark)}
/* Le bouton au trait : même gabarit que le plein, mais second. Il sert quand
   deux appels se suivent et qu'un seul doit tirer l'œil. */
.btn-ligne{background:transparent;border-color:rgba(194,3,25,.5);color:var(--crimson);
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.btn-ligne:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
/* Le pendant de « btn-ghost » sur fond clair : même bouton, bordure et texte
   sombres. « btn-ghost » est blanc sur blanc dès qu'on le sort d'un fond foncé,
   c'est-à-dire invisible. */
.btn-contour{border-color:var(--ink);color:var(--ink)}
.btn-contour:hover{background:var(--ink);color:#fff}

/* ---------- titres de section ---------- */
.sec{padding:104px 0}
.sec-head{margin-bottom:56px;max-width:none}
.sec-head h2{font-size:clamp(30px,3.6vw,44px);margin:0 0 14px;font-weight:300;line-height:1.15}
/* La légende prend la police des étiquettes — celle des noms de famille des
   promotions — et non celle du texte courant. Montserrat porte plus large
   qu'Archivo à taille égale : on rend le demi-point qu'elle prend. */
.sec-head p{margin:0;color:var(--muted);font-family:Montserrat,sans-serif;
  font-size:16.5px;font-weight:400;line-height:1.62;max-width:none}
/* Sans chapeau, le titre est seul : son retrait du bas s'ajouterait à celui du
   bloc et creuserait de quatorze pixels de plus qu'une section pourvue. */
.sec-head h2:last-child{margin-bottom:0}

/* ---------- le filet rouge au-dessus du titre ----------
   Le titre et son chapeau restent l'un sous l'autre : c'est la composition la
   plus simple, et elle se tient dès qu'on l'annonce. Ce qui lui manquait, c'est
   l'accent : un court filet rouge posé au-dessus, qui rattache la section à la
   marque et dit où commence la lecture. La page Actualités l'employait seule ;
   tout le site le reprend.

   Il est tracé d'emblée. Les enttêtes qui portent « apparait » le laissent se
   tirer au défilement — sans ce dédoublement, les sections qui ne portent pas
   cette classe n'auraient jamais reçu « vu », et leur filet serait resté
   invisible. */
.sec-head{position:relative;padding-top:21px}
.sec-head::before{content:"";position:absolute;top:0;left:0;
  width:46px;height:2px;background:var(--crimson)}
.sec-head.apparait::before{transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.7,.3,1) .18s}
.sec-head.apparait.vu::before{transform:none}
@media (prefers-reduced-motion:reduce){
  .sec-head.apparait::before{transform:none;transition:none}
}

/* ---------- atouts ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);box-shadow:var(--ombre-bloc)}
.card{background:#fff;padding:40px 34px 42px}
.card h3{font-size:21px;margin:0 0 12px;font-weight:600;color:var(--ink)}
.card h3::before{content:"";display:block;width:34px;height:2px;background:var(--crimson);margin-bottom:18px}
/* Photo en tête de carte : elle déborde de la marge pour coiffer l'encart,
   et le filet rouge du titre passe dessous plutôt que de flotter au-dessus. */
.card-vue{width:calc(100% + 68px);max-width:none;margin:-40px -34px 26px;aspect-ratio:4/3;object-fit:cover}
.card-vue + h3::before{margin-bottom:16px}
@media (max-width:680px){.card-vue{width:calc(100% + 48px);margin:-32px -24px 22px}}
.card p{margin:0;font-size:15.3px;color:var(--muted);line-height:1.68;text-align:justify;hyphens:auto}
/* La date d'une distinction, juste sous son titre : petites capitales grises,
   comme toutes les lignes de service du site. Elle vient après « .card p »
   pour en reprendre la main — justification et césures n'ont pas de sens sur
   trois mots. */
.card-date{margin:-2px 0 12px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.6;
  text-align:left;hyphens:none}

/* ---------- actualités ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.news article{border-top:2px solid var(--crimson);padding-top:22px}
.news time{font-size:12.5px;letter-spacing:.09em;color:var(--muted)}
.news h3{font-size:20.5px;margin:12px 0 12px;font-weight:400;line-height:1.35}
.news p{margin:0;font-size:14.8px;color:var(--muted)}
.sec-foot{margin-top:46px}
.sec-foot a{font-size:14.5px;font-weight:600;color:var(--crimson);border-bottom:1px solid currentColor;padding-bottom:2px}


/* ---------- publication en une ---------- */
.pub-cover{display:block;box-shadow:0 12px 34px rgba(28,28,28,.16);transition:transform .3s ease}
.pub-legende{margin:16px 0 0;font-size:14.8px;line-height:1.65;color:var(--muted);
  text-align:justify;hyphens:auto}
.pub h3{margin:20px 0 0;font-size:19px;font-weight:400;line-height:1.35;min-height:2.7em}
.pub h3 + .pub-legende{margin-top:10px}
.pub-cover:hover{transform:translateY(-4px)}
.pub-cover img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pub-cover.gazette img{object-position:center 58%}

.marquee{position:relative;overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.marquee-track{display:flex;width:max-content;animation:slide 70s linear infinite}
/* Hors de l'écran, le bandeau ne défile pas : autant d'images que le
   navigateur n'a pas à recomposer. */
.marquee.en-pause .marquee-track{animation-play-state:paused}
.logo-tile{flex:none;width:212px;height:96px;margin-right:14px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;
  font-size:12.5px;font-weight:600;letter-spacing:.045em;color:#4A4A4A;line-height:1.35}
.logo-tile img{max-height:58px;max-width:168px;width:auto;height:auto;object-fit:contain}
/* Un partenaire dont le logo n'est pas encore arrivé : la tuile porte son
   nom en toutes lettres plutôt que de rester vide. Il paraît donc dès
   qu'on l'ajoute, et son logo peut suivre. */
.logo-nom{padding:0 14px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--muted);text-align:center;line-height:1.35;text-wrap:balance}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}

/* Une carte peut être un lien entier : tout le bloc devient cliquable,
   et le survol reprend le vocabulaire des autres éléments cliquables du site. */
a.card{display:block;transition:background .25s ease}
a.card:hover{background:var(--stone-soft)}
a.card:hover h3{color:var(--crimson)}

/* ---------- le bouton « la suite » d'un rail ----------
   Il faisait défiler les cartes des distinctions sur L'école et fait défiler
   les publications sur l'accueil. La page L'école ayant abandonné son rail
   pour un palmarès, il ne reste qu'un endroit où il sert — mais il sert à
   n'importe quel rail, et sa place est donc ici, avec les autres pièces
   communes, et non dans la feuille d'une page. */
.rail-suite{display:inline-flex;align-items:center;gap:14px;padding:13px 22px 13px 24px;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  font-family:Montserrat,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.rail-suite:hover,.rail-suite:focus-visible{background:var(--crimson);border-color:var(--crimson);color:#fff}
.rail-suite svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.rail-suite:hover svg{transform:translateX(4px)}
.rail-suite.retour svg{transform:scaleX(-1)}
.rail-suite.retour:hover svg{transform:scaleX(-1) translateX(4px)}
.rail-suite[hidden]{display:none}

/* Les deux boutons d'un rail, côte à côte : le retour puis la suite. Le retour
   n'a que sa flèche — son intitulé est dans son « title » et son « aria-label »,
   parce que deux boutons libellés à cet endroit pèseraient plus que la bande
   qu'ils commandent. */
.rail-commandes{display:flex;align-items:center;gap:10px}
.rail-retour{padding:13px 15px}
.rail-retour svg{transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.rail-retour:hover:not(:disabled) svg{transform:translateX(-4px)}
/* Éteint plutôt que caché : un bouton qui disparaît fait sauter la ligne, et
   l'autre se déplace sous le curseur au moment où l'on va cliquer dessus. */
.rail-suite:disabled{opacity:.3;cursor:default}
.rail-suite:disabled:hover{background:transparent;border-color:var(--line);color:var(--ink)}
.rail-suite:disabled:hover svg{transform:none}