/* SALMA TAZI, mise en page et composants
   Toutes les valeurs viennent de tokens.css. Aucun hexadécimal ici. */

/* ---- Structure de page ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }
.section--mist { background: var(--mist); }
/* Section courte : un point, pas une démonstration, même repère que
   .offer-row--tight sur les pages d'offre. */
.section--tight { padding-block: var(--space-4); }

/* Le texte hérite de --ink (voir body) : sur navy, le titre a besoin de
   --paper pour rester lisible. */
.section--navy { background: var(--navy); }
.section--navy .section__head h2 { color: var(--paper); }

.section__head { margin-bottom: var(--space-4); }
.section__head p { color: var(--slate); }

/* ---- En-tête ------------------------------------------------------ */
.masthead {
  position: relative;
  /* .lead (position:relative, z-index:auto) est plus loin dans le DOM :
     sans ce contexte d'empilement propre, elle peint par-dessus le menu
     "Les offres" au lieu de rester dessous. */
  z-index: 10;
  background: var(--navy);
  border-bottom: 2px solid var(--gold);
}

.masthead .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 76px;
  flex-wrap: wrap;
  padding-block: var(--space-2);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 24px;                 /* espace libre = ~1/2 largeur de la marque */
  text-decoration: none;
  white-space: nowrap;
}

/* La marque est peinte par un masque : la forme vient du SVG, la couleur
   du token. Évite un SVG inline dupliqué sur les quatre pages, et permet
   de changer la couleur sans toucher au fichier. */
.wordmark__mark {
  flex: none;
  width: 48px;
  height: 47px;              /* ratio du viewBox 401 × 391 */
  background-color: var(--gold);
  -webkit-mask: url(../assets/logo-mark.svg) no-repeat center / contain;
  mask: url(../assets/logo-mark.svg) no-repeat center / contain;
}

.wordmark__text {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: var(--wordmark-track);   /* 14%, imposé par la charte */
  color: var(--paper);
  /* Chasse tabulaire et crénage optique : le gain « premium » vient de là,
     pas d'un interlettrage plus large, que la charte fixe déjà. */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  padding-right: var(--wordmark-track);    /* compense l'espace final ajouté
                                              par le letter-spacing */
}

@media (max-width: 560px) {
  .wordmark { gap: 14px; }
  .wordmark__mark { width: 36px; height: 35px; }
  .wordmark__text { font-size: 1.125rem; }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nav a {
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: 0.875rem;
  color: var(--paper);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
}

.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); }

.nav .btn--nav {
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--paper);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;   /* sinon hérite des 14px de .nav a, Outfit ne
                             descend jamais sous 15px */
}

.nav .btn--nav:hover { background: var(--gold); border-color: var(--gold); }

/* ---- Burger mobile (<900px uniquement) -------------------------------
   Masqué par défaut : au-dessus de 900px le masthead ne change en rien,
   ce bouton n'existe visuellement jamais à cette largeur. */
.nav-toggle { display: none; }

/* Bouton "Les offres" mobile : même principe, masqué par défaut. Le
   lien .nav__trigger desktop reste seul visible au-dessus de 900px. */
.nav__trigger-mobile { display: none; }

/* ---- Menu "Les offres" ----------------------------------------------
   Fermé = display:none, pas juste caché visuellement : un clavier ne
   doit pas pouvoir tabuler dedans. .is-open est posé par le JS
   (js/nav-dropdown.js) ; sans JS le lien lui-même reste un vrai lien
   vers index.html#offres. */
.nav__item--dropdown { position: relative; }

.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: var(--space-2) 0 0;
  padding: 0;
  min-width: 200px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Coupe le remplissage or au rayon du panneau, plutôt que de faire
     correspondre les coins exactement. */
  overflow: hidden;
}

.nav__item--dropdown.is-open .nav__dropdown { display: block; }

/* Rangées pleine largeur, sans gouttière : le padding horizontal est
   sur le lien, pas sur la liste ni le panneau, pour que le
   remplissage or touche les bords gauche et droit au survol. */
.nav__dropdown a {
  display: block;
  padding: 14px 20px;
  color: var(--ink);
  border-bottom: none;
}

/* Budget or : le diamant + le CTA sont déjà les deux accents de
   l'en-tête. Cette rangée en fait un troisième, au-delà du 1-accent-
   par-vue de la charte, mais seulement pendant le survol, jamais à
   l'état stable. Aucun autre or n'est ajouté dans l'en-tête. */
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
  background: var(--gold);
  color: var(--navy);
  outline: none;
}

/* Le focus global (outline var(--navy)) est invisible sur fond navy. */
.nav__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  /* En-tête resserré à ~64px : le burger est le seul contrôle visible,
     rien d'autre ne doit peser sur cette bande. */
  .masthead .container { min-height: 64px; padding-block: 10px; }

  /* La marque reste visible au-dessus du panneau plein écran quand il
     s'ouvre (voir .nav plus bas) : même traitement que .nav-toggle,
     pour que la ligne du haut garde l'identité de l'en-tête fermé. */
  .wordmark { position: relative; z-index: 1; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 1;   /* reste visible au-dessus du panneau plein écran, qui
                     n'a pas de z-index propre (voir .nav ci-dessous) */
    background: none;
    border: 0;
    padding: 0;
    color: var(--paper);
    cursor: pointer;
  }

  .nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* Un seul bouton, deux icônes : celle qui ne correspond pas à l'état
     courant est masquée, pilotée uniquement par aria-expanded (pas de
     classe JS dédiée à l'icône). */
  .nav-toggle__icon--close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon--burger { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: block; }

  /* Panneau plein écran : display:none par défaut, même logique que
     .nav__dropdown ci-dessus, pour qu'un clavier ne puisse pas y
     tabuler tant qu'il n'est pas ouvert. Ouvert par js/nav-toggle.js
     via .is-open. Pas de transition : ouverture instantanée, aucune
     réduction de mouvement à respecter puisqu'il n'y a aucun mouvement. */
  .nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    gap: 0;   /* le rythme vient du padding de chaque rangée, pas d'un
                 espacement flex uniforme (voir .nav__item--dropdown et
                 .nav > a ci-dessous) */
    padding: 96px var(--space-3) var(--space-4);
    overflow-y: auto;
  }

  .nav.is-open { display: flex; }

  /* Type display, pas le corps de texte : les liens de premier niveau
     sortent du gabarit compact du masthead desktop. */
  .nav a { font-size: var(--h3-size); }

  /* Rythme vertical régulier : chaque rangée de premier niveau (liens
     directs + le bloc "Les offres" dans son ensemble, replié ou non)
     porte le même padding et le même filet, plutôt que le gap flex
     précédent qui créait de grands écarts entre rangées et un tassement
     à l'intérieur du bloc déroulant. Le CTA en est exclu : sa propre
     pilule ne suit pas ce gabarit de rangée. Un repère de gauche
     transparent est réservé sur toutes les rangées pour que l'indicateur
     de page active (ci-dessous) ne décale jamais le texte quand il
     apparaît. */
  .nav > a:not(.btn--nav),
  .nav__item--dropdown {
    padding-block: var(--space-3);
    padding-left: var(--space-2);
    border-bottom: 1px solid var(--line-on-navy);
    border-left: 3px solid transparent;
  }

  /* Page active : un repère à gauche plutôt que le soulignement or
     hérité de la règle desktop (.nav a[aria-current="page"] plus haut),
     qui lirait ici comme un second filet et se confondrait avec le
     séparateur. Le soulignement or est donc neutralisé à cette largeur. */
  .nav a[aria-current="page"] { border-bottom-color: var(--line-on-navy); }
  .nav > a[aria-current="page"] { border-left-color: var(--gold); }
  .nav__item--dropdown:has(.nav__trigger-mobile[aria-current="page"]) { border-left-color: var(--gold); }

  /* Bouton "Les offres" : remplace le lien desktop à cette largeur.
     Pas de padding propre, la rangée porte déjà le rythme ci-dessus ;
     juste une ligne flex pour aligner le libellé et le chevron. */
  .nav__trigger { display: none; }

  .nav__trigger-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-text);
    font-weight: var(--w-medium);
    font-size: var(--h3-size);
    color: var(--paper);
    cursor: pointer;
  }

  .nav__trigger-mobile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* Chevron : tourne à l'ouverture, piloté par aria-expanded comme les
     icônes du burger. Pas de transition sous réduction de mouvement
     (règle globale plus bas, avec celle du panneau déroulant). */
  .nav__chevron { flex: none; transition: transform 0.2s ease; }
  .nav__trigger-mobile[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

  /* Sous-menu déroulant : hauteur animée par JS (js/nav-toggle.js),
     piloté par l'attribut hidden natif, pas par la classe .is-open
     desktop, pour ne jamais interférer avec le survol au-dessus de
     900px. display n'est jamais fixé ici : [hidden] fournit
     display:none nativement dès que l'attribut est présent, et
     :not([hidden]) ci-dessous ne le contredit que lorsqu'il est
     absent. */
  .nav__dropdown {
    position: static;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    background: none;
    overflow: hidden;
    height: 0;
    transition: height 0.25s ease;
  }

  .nav__dropdown:not([hidden]) { display: block; }

  /* Le panneau blanc est une affaire de survol desktop : en pile
     mobile les items restent en ligne sur le fond navy du menu.
     Padding porté par chaque lien plutôt que par la liste, pour que
     scrollHeight (mesuré par JS pour l'animation) inclue tout le
     contenu cliquable. */
  .nav__dropdown a { font-size: 0.875rem; padding-block: var(--space-2); color: var(--paper); border-bottom: 1px solid transparent; }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible { background: none; color: var(--paper); border-bottom-color: var(--gold); }

  /* Le CTA ancre le bas du panneau : les liens restent groupés en haut,
     margin-top:auto absorbe l'espace libre plutôt que de le laisser
     vide sous le bouton. */
  .nav .btn--nav { width: 100%; text-align: center; margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__dropdown,
  .nav__chevron { transition: none; }
}

/* Verrou de défilement pendant que le panneau mobile est ouvert. Classe
   posée par js/nav-toggle.js ; sans garde de largeur ici puisqu'elle
   n'est jamais ajoutée au-dessus de 900px (le burger n'y existe pas). */
body.nav-lock { overflow: hidden; }

/* ---- Hero (contact.html), navy, comme les pages d'offre -----------
   Seule page à utiliser cette bande : .hero est désormais propre à
   contact.html plutôt qu'un générique partagé. */
.contact-hero { background: var(--navy); padding-block: var(--space-6); }

.contact-hero h1 {
  color: var(--paper);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  max-width: 22ch;
  text-wrap: balance;
  margin: 0;
}

.hero__sub {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--slate);
  max-width: 54ch;
  margin-bottom: var(--space-4);
}

/* ---- Grille des offres -------------------------------------------- */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  justify-content: center;
  max-width: 1120px;
  margin-inline: auto;
}

.offer {
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

.offer__num {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: var(--h1-track);
  color: var(--navy);
}

.offer__rule {
  width: 32px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 0;
}

.offer h3 { margin: 0; }
.offer p { margin: 0; color: var(--slate); flex-grow: 1; }

.offer__link {
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  align-self: flex-start;
}

.offer__link:hover { border-bottom-color: var(--gold); }

/* Lien texte simple : même mécanique que .offer__link (navy, filet
   var(--line), or au survol) mais en corps de texte normal, pas de
   majuscules ni de taille de label pour une adresse e-mail en ligne. */
.text-link { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.text-link:hover { border-bottom-color: var(--gold); }

/* ---- Témoignages --------------------------------------------------
   L'or marque la citation par un filet unique, jamais un bloc entier. */
.quotes {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.quote { margin: 0; border-left: var(--rule-accent); padding-left: var(--space-3); }

.quote blockquote {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.quote blockquote p { max-width: none; margin: 0 0 var(--space-1); }
.quote blockquote p:last-child { margin-bottom: 0; }

.quote figcaption {
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--slate);
}

.quote--lead blockquote { font-size: 1.75rem; }

/* ---- Carrousel de témoignages ---------------------------------------
   Une diapositive .quote visible à la fois, cachée via [hidden] natif
   (pas opacity) pour que lecteurs d'écran et clavier ignorent le reste.
   La hauteur du viewport est fixée en JS sur la plus longue diapositive
   pour que la section ne saute pas d'une hauteur à l'autre. */

/* Écart assumé à la charte (H2 = 28px) : ce titre passe à --h1-size,
   en 400 comme tout ce qui rend à cette taille (voir h1 dans
   tokens.css), pour peser autant que le titre du hero. */
#temoignages { font-size: var(--h1-size); font-weight: var(--w-regular); }

/* Même écart, réutilisable : titres « Témoignages »/« Témoignage » des
   pages d'offre, sans dépendre d'un id propre à index.html. */
.section__head-title--hero-size { font-size: var(--h1-size); font-weight: var(--w-regular); }

.section__head--center { text-align: center; }

/* Même traitement que .lead__sub, mais centré : texte à fournir par
   Salma, ne pas rédiger de contenu ici. 1.0625rem : même exception
   documentée que .offer-row__body p, pas une taille libre. */
.section__sub {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate);
  max-width: 48ch;
  margin: var(--space-2) auto 0;
  text-align: center;
}

.carousel { margin-top: var(--space-4); text-align: center; }

.carousel__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Écart assumé à la charte (rayon max 3px) : cercle, comme les flèches
   des cartes d'offres. */
.carousel__ctrl {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--navy);
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Pas de remplissage : la citation reste le point d'attention de la
   section, pas le bouton. */
.carousel__ctrl:hover,
.carousel__ctrl:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.carousel__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: pan-y;
}

.carousel__slide { flex: 0 0 100%; min-width: 0; }

/* La citation est centrée : le filet or à gauche ne fonctionne plus
   avec du texte centré, donc il saute pour les diapositives du
   carrousel uniquement, .quote (bordure comprise) reste inchangée
   partout ailleurs sur le site. Le maximum de 60ch et le centrage
   vont sur le contenu (figcaption/blockquote), pas sur .quote
   lui-même : .quote EST la diapositive du rail (flex: 0 0 100%) et
   doit rester pleine largeur, sans quoi le glissement se désaligne. */
.carousel .quote {
  border-left: 0;
  padding-left: 0;
}

.carousel .quote figcaption {
  margin: 0 auto;
  max-width: 60ch;
}

.carousel .quote blockquote {
  font-size: 1.75rem;
  line-height: 1.4;
  margin: var(--space-4) auto 0;
  max-width: 60ch;
}

/* Titre propre au témoignage (celui que la personne a donné à son texte) :
   distinct de l'attribution (figcaption, Inter, label) et de la citation
   (blockquote, Outfit Light, grande taille), voir revisions-v1.md §6,
   témoignage 6. */
.carousel .quote__title {
  margin: var(--space-3) auto 0;
  max-width: 60ch;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- Témoignages : version intégrale dépliable (index.html) ---------
   Corps de lecture, pas une citation : taille courante, aligné à gauche
   même si l'extrait est centré, plafonné à var(--measure). Le bouton
   reprend le style label + filet or déjà utilisé pour les liens texte. */
.quote__toggle {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--navy);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 3px;
  cursor: pointer;
}

.quote__toggle:hover,
.quote__toggle:focus-visible { border-bottom-color: var(--gold); }

/* height (pas max-height) : on a besoin d'une valeur en px exacte, prise
   sur scrollHeight en JS, pour que la transition démarre et se termine
   sur des valeurs réelles plutôt que sur un plafond arbitraire. */
.quote__full {
  height: 0;
  overflow: hidden;
  text-align: left;
  transition: height 0.3s ease;
}

.quote__full-inner { padding-top: var(--space-3); }

.quote__full p {
  max-width: var(--measure);
  margin: 0 auto var(--space-2);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
}

.quote__full p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .quote__full { transition: none; }
}

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
}

/* Puces de position : rondes par convention (un indicateur "point" au
   rayon var(--radius) n'en serait plus un), seule exception de forme
   dans cette section ; le viewport et les diapositives eux-mêmes
   n'utilisent aucun rayon hors charte. */
.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  /* --muted tombe à 2,42:1 sur paper / 2,24:1 sur mist, sous le minimum
     3:1 pour un indicateur non textuel. --slate passe largement. */
  border: 1px solid var(--slate);
  background: transparent;
  cursor: pointer;
}

.carousel__dot[aria-current="true"] { background: var(--gold); border-color: var(--gold); }

@media (max-width: 720px) {
  .carousel__row { flex-wrap: wrap; }
  .carousel__viewport { order: 1; flex-basis: 100%; }
  .carousel__ctrl--prev { order: 2; }
  .carousel__ctrl--next { order: 3; margin-left: auto; }
}

/* ---- Partenaire : miroir du hero, portrait à gauche -----------------
   Même principe de calage que .lead__portrait : positionné en absolu
   dans une section position:relative, sous le texte mais au-dessus du
   fond de la section, et de celui de la section précédente, sur
   laquelle il déborde délibérément. */
.partner {
  --partner-h: clamp(380px, 36vw, 520px);   /* hauteur du portrait, inchangée */
  --partner-overlap: 70px;                  /* débordement voulu en haut */
  position: relative;
  background: var(--mist);
  padding-top: var(--space-6);
  padding-bottom: 0;                        /* plus de bas : la section
                                                s'arrête où elle la touche */
}

.partner__grid {
  display: grid;
  grid-template-columns: minmax(300px, 40%) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  /* Hauteur dérivée du portrait : H - débordement - padding-top, pour
     que la hauteur totale de la section (padding-top + cette grille)
     égale H - débordement, et que bottom:0 sur le portrait tombe
     exactement sur le bord de la section, pas d'espace mort. */
  min-height: calc(var(--partner-h) - var(--partner-overlap) - var(--space-6));
}

/* Le centrage naïf (align-items: center) cale le texte sur le milieu de
   LA SECTION, pas sur celui du portrait, et comme elle déborde de
   --partner-overlap en haut, son centre optique est plus haut que celui
   de la section de (padding-top + débordement) / 2. On remonte le texte
   d'autant pour les faire coïncider. */
.partner__text {
  transform: translateY(calc(-1 * (var(--space-6) + var(--partner-overlap)) / 2));
}

/* Ancrée en bas, comme le portrait du hero sur la limite navy, sauf
   qu'ici la section n'a pas de padding-bottom à traverser : bottom:0
   tombe directement sur la limite mist/navy. */
.partner__portrait {
  position: absolute;
  bottom: 0;
  left: max(var(--space-3), calc((100vw - var(--container)) / 2));
  pointer-events: none;
}

.partner__portrait img {
  display: block;
  height: var(--partner-h);
  width: auto;
}

/* Écart assumé à la charte (H2 = 28px) : même hauteur que le hero et
   Témoignages, même poids 400 qu'eux aussi. */
#profil { font-size: var(--h1-size); font-weight: var(--w-regular); }

/* Rayons : pilule pour les actions, var(--radius) pour les surfaces.
   Écart assumé à la charte V1.0 (max 3px), à faire valider.
   .btn--secondary est partagé avec les callouts « Prendre rendez-vous »
   des trois pages d'offre : plutôt que d'y toucher, ce bouton précis a
   son propre modificateur, plein et sans rapport avec le contour de
   .btn--secondary. */
.btn--partner {
  background: var(--navy);
  color: var(--paper);
  border: 1px solid var(--navy);
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--partner:hover,
.btn--partner:focus-visible {
  background: var(--navy-light);
  border-color: var(--navy-light);
}

@media (max-width: 900px) {
  .partner { padding-block: var(--space-4); }
  .partner__grid { grid-template-columns: 1fr; min-height: 0; }
  /* Le décalage de centrage n'a de sens qu'en deux colonnes avec le
     portrait en absolu : en pile mobile, il reste en flux normal. */
  .partner__text { transform: none; }
  .partner__spacer { display: none; }

  .partner__portrait {
    position: static;
    display: block;
    margin: 0 auto var(--space-4);
    width: fit-content;
  }

  .partner__portrait img { height: clamp(280px, 60vw, 380px); }
}

.figures {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-block: var(--space-3);
  padding: 0;
  list-style: none;
}

.figures li { border-top: var(--border); padding-top: var(--space-2); }

.figures b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: var(--h1-track);
  color: var(--navy);
}

.figures span {
  display: block;
  color: var(--slate);
  line-height: var(--caption-lh);
  margin-top: var(--space-1);
}

/* ---- Bande de conversion ------------------------------------------ */
.band { background: var(--navy); color: var(--paper); padding-block: var(--space-5); }
.band h2 { color: var(--paper); max-width: 26ch; }
/* --muted échoue le contraste sur navy (4,48:1, sous les 4,5:1 requis),
   voir --text-on-navy dans tokens.css, prévu pour ce cas. */
.band p { color: var(--text-on-navy); }

.band .btn--primary {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--paper);
}

.band .btn--primary:hover { background: var(--gold); border-color: var(--gold); }

/* ---- Formulaire de contact (bande CTA sur navy : index.html et
   contact.html) -------------------------------------------------------
   Netlify Forms : name="contact" + data-netlify="true" sont détectés au
   build par Netlify, ça ne marche qu'une fois déployé là-bas. Ouvert
   en local ou servi ailleurs, la soumission ne fait rien, sans JS pour
   compenser. Le honeypot (bot-field) est caché visuellement et des
   lecteurs d'écran ; un bot qui le remplit fait rejeter l'envoi. */
.contact-form { margin-top: var(--space-3); }

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.contact-form__field--full { grid-column: 1 / -1; }

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-form__label {
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--paper);
}

.contact-form__input {
  background: transparent;
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--body-size);
  padding: var(--space-2);
}

textarea.contact-form__input { resize: vertical; }

.contact-form__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.contact-form__consent label {
  color: var(--paper);
  font-size: var(--body-size);
  line-height: 1.5;
}

.contact-form__consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
}

/* Le focus global (outline var(--navy)) est invisible sur fond navy :
   remplacé par de l'or pour tout le formulaire, contraste 5,67:1. */
.contact-form *:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Même traitement que le CTA de l'en-tête (or plein, texte navy, pilule),
   les champs eux gardent var(--radius), la pilule est réservée à l'action. */
.contact-form__submit {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 0.9375rem;   /* Outfit ne descend jamais sous 15px */
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background-color: var(--gold-light);
  border-color: var(--gold-light);
}

@media (max-width: 700px) {
  .contact-form__grid { grid-template-columns: 1fr; }
}

/* ---- Page d'offre : bandes alternées plein écran --------------------
   Gabarit commun aux trois pages d'offre. */
/* Bas réduit : le haut cale le titre/l'image (inchangés), le bas ne
   fait plus que refermer la bande, avant : 64/64px, après : 64/40px. */
.offer-hero { background: var(--navy); padding-block: var(--space-5) var(--space-4); }

/* En-tête propre à cette page : filet clair discret plutôt que le or
   2px du gabarit partagé. Scopé pour ne pas toucher .masthead, utilisé
   tel quel sur index.html, a-propos.html et contact.html. */
.offer-masthead { border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }

/* 340px sur les trois pages (au lieu de 400px sur deux d'entre elles et
   340px sur offre-scale seule) : c'est la largeur d'image la plus
   étroite qui existait, retenue pour les trois plutôt que d'élargir
   offre-scale, dont le H1 plus long a besoin de la colonne de texte
   large que cette largeur d'image dégage. */
.offer-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-4);
  align-items: center;
}

/* Pas de max-width propre : la colonne de grille (ci-dessus) borne déjà
   la largeur sur les trois pages, avec assez de marge pour un H1 sur 2
   lignes équilibrées quelle que soit sa longueur. */
.offer-hero__text h1 { color: var(--paper); text-wrap: balance; }

.offer-row { padding-block: var(--space-6); }
.offer-row--mist { background: var(--mist); }

/* Bandes courtes (un point, pas une démonstration) : padding réduit pour
   ne pas lire comme un blanc oublié. Voir le rapport pour la répartition. */
.offer-row--tight { padding-block: var(--space-4); }

.offer-row__grid {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: var(--space-4);
}

.offer-row__label.subhead { margin: 0; }

/* Ces titres sont des repères de section, pas des titres de page : ils ne
   doivent jamais rivaliser avec le H1 du bandeau d'en-tête, la taille
   (--h3-size) et le poids (500) suffisent à les subordonner, sans les
   rendre aussi plus clairs que le texte de 17px qu'ils annoncent. */
.offer-row__grid h2 {
  margin: 0;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  color: var(--ink);
}

/* Exception à la charte (corps fixé à 15px) : sur ces bandes de lecture
   longue, 1.0625rem améliore le confort de lecture sans concurrencer le
   H1 (44px) ni les repères de section (19px, ci-dessus). */
.offer-row__body p { font-size: 1.0625rem; line-height: 1.6; }

/* Robustesse : force le corps en colonne 2 même si une bande venait à
   n'avoir aucun élément en colonne 1 (auto-placement le mettrait sinon
   dans la colonne étroite). */
.offer-row__body { grid-column: 2; }

.offer-row__body > * + * { margin-top: var(--space-2); }

/* Bande de clôture centrée, à l'image du carrousel juste au-dessus. */
.offer-cta { text-align: center; }
.offer-cta p { max-width: none; }

/* .band h2 { max-width: 26ch } (partagé, plus haut) l'emporterait sur une
   seule classe à spécificité égale : .band .offer-cta__heading pour rester
   scopé à cette page sans toucher la règle commune. */
.band .offer-cta__heading {
  color: var(--paper);
  font-size: var(--h2-size);
  line-height: 1.25;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

/* Pilule or, même traitement que le CTA de l'en-tête et le formulaire
   de contact, les surfaces gardent var(--radius), l'action non. */
.offer-cta__btn {
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.offer-cta__btn:hover,
.offer-cta__btn:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

@media (max-width: 900px) {
  .offer-hero__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .offer-row__grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

.lede { font-size: 1.0625rem; line-height: 1.6; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: var(--space-3) 0 0; }

.steps li {
  counter-increment: step;
  border-top: var(--border);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  position: relative;
  max-width: var(--measure);
  font-size: 1.0625rem;   /* même exception que .offer-row__body p, juste au-dessus */
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 1.1875rem;
  /* Navy, pas or : l'or échouerait le contraste de la charte à cette
     taille (19px) sur blanc. */
  color: var(--navy);
}

.subhead {
  font-family: var(--font-text);
  font-weight: var(--w-medium);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--space-1);
}

/* ---- Différenciateurs (a-propos.html) ------------------------------
   Preuve, pas une liste : filet or au-dessus de chaque point, deux
   colonnes, sans puce ni bordure gauche. */
/* Une colonne plutôt que deux : à quatre points de longueurs inégales
   (une à trois lignes), une grille à deux colonnes stretchait chaque
   ligne sur la hauteur de son voisin le plus long, laissant un vide
   visible sous les points les plus courts (bas-droite, en particulier).
   Une seule colonne donne à chaque point exactement la hauteur dont il
   a besoin, à toute largeur, pas seulement en dessous de 700px. */
.proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  row-gap: var(--space-4);
}

.proof .offer__rule { margin-bottom: var(--space-2); }
.proof p { margin: 0; }

/* ---- Citation de clôture (a-propos.html) ---------------------------
   Même traitement que .carousel .quote sur l'accueil : centrée, sans
   filet gauche, attribution en label au-dessus. */
.about-quote {
  text-align: center;
  border-left: 0;
  padding-left: 0;
}

.about-quote figcaption { margin: 0 auto; max-width: 60ch; }

.about-quote blockquote {
  font-size: 1.75rem;
  line-height: 1.4;
  margin: var(--space-4) auto 0;
  max-width: 60ch;
}

/* ---- Contact ------------------------------------------------------ */
/* Deux colonnes fixes plutôt que auto-fit : à deux blocs (Email,
   Séances), auto-fit ouvrait des pistes vides et les tassait à gauche. */
.contact-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---- Pied de page -------------------------------------------------- */
/* --muted échoue le contraste sur navy (4,48:1, sous les 4,5:1 requis),
   voir --text-on-navy dans tokens.css, prévu pour ce cas. */
.foot { background: var(--navy); color: var(--text-on-navy); padding-block: var(--space-4); }
.foot a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { border-bottom-color: var(--gold); }
.foot .container { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.foot small { color: var(--text-on-navy); }

/* ---- Utilitaires --------------------------------------------------- */
.stack > * + * { margin-top: var(--space-2); }
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--space-2);
  top: var(--space-2);
  z-index: 10;
  background: var(--paper);
  color: var(--navy);
  padding: var(--space-1) var(--space-2);
  border: var(--border-navy);
  border-radius: var(--radius);
}

/* ---- Petits écrans -------------------------------------------------- */
@media (max-width: 720px) {
  .profile { grid-template-columns: 1fr; }
  .profile img { max-width: 260px; }
  :root { --space-6: 3.5rem; --space-5: 2.5rem; }
  .quote blockquote { font-size: 1.3125rem; }
  .quote--lead blockquote { font-size: 1.4375rem; }
}

/* ====================================================================
   HERO, texte à gauche, portrait détouré à droite
   Le H1 revient à --h1-size (charte, 44px max). La phrase fait 60
   caractères : à 76px elle se brisait sur cinq lignes. La taille n'était
   pas ce qui faisait fonctionner la référence, c'était la brièveté.
   ==================================================================== */

/* ====================================================================
   HERO
   Principe : la hauteur du héros est définie UNE fois. Le portrait s'y
   ajuste tout seul (top/bottom, pas de height codée en dur), donc il ne
   peut plus ni passer sous l'en-tête ni déborder sur la bande navy.
   Pour l'agrandir ou le réduire : changer --lead-h, rien d'autre.
   ==================================================================== */

.lead {
  --lead-h: clamp(520px, 68vh, 700px);   /* le seul réglage de taille */
  --lead-top-clear: 48px;                /* blanc au-dessus de la tête */
  --lead-portrait-inset: max(0px, calc((100vw - var(--container)) / 2));

  position: relative;
  background: var(--paper);
  padding: 0;
  overflow: hidden;                      /* garde-fou : rien ne déborde */
}

.lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
  gap: var(--space-4);
  align-items: center;
  min-height: var(--lead-h);
}

/* Le portrait est tendu entre deux bords : sous l'en-tête d'un côté,
   sur la limite navy de l'autre. Sa hauteur en découle. */
.lead__portrait {
  position: absolute;
  top: var(--lead-top-clear);
  bottom: 0;
  right: var(--lead-portrait-inset);
  pointer-events: none;
  display: flex;
  align-items: flex-end;   /* revisions-v1.md §2 : portrait réduit, ancré en
                               bas, ne doit plus dominer la page d'accueil */
}

.lead__portrait img {
  height: 82%;
  width: auto;
  display: block;
}

/* revisions-v1.md §2 : « les mettre eux au centre, pas moi », titre
   renforcé au-delà du régime commun --w-regular des h1, exception scopée
   à ce hero précis, pas à la règle h1 partagée. */
.lead__title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
  color: var(--ink);
  max-width: 34rem;
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

/* Les trois thématiques : remplace l'ancien .lead__sub (17px/400/slate).
   Rangées empilées, numéro or en colonne fixe à gauche (seul accent de
   cette vue) et titre en type display (Outfit Medium, --h2-size) pour
   occuper le deuxième palier de la page, pas une légende sous le H1.
   Pas de max-width arbitraire ici : la largeur réelle vient de la
   colonne texte de .lead__grid — la toucher reviendrait à toucher la
   colonne du portrait, hors périmètre de ce changement. Filet entre les
   rangées seulement, pas au-dessus de la première, pas en dessous de la
   dernière. align-items: baseline cale chaque numéro sur la première
   ligne de son titre, y compris quand le titre se replie sur deux
   lignes (comportement natif de l'alignement baseline en grid). */
.lead__themes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lead__themes li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: var(--border);
}

.lead__themes li:first-child { border-top: none; }

/* Taille mesurée, pas devinée : hauteur du chiffre ≈ 1,4× la cap-height
   du titre (mesuré au rendu, glyphe pour glyphe, chez Outfit ; H à
   --h2-size ≈ 19,6px de cap-height, 2 à 2,4375rem ≈ 27,4px de hauteur
   de chiffre). Poids remonté à Regular pour ne pas lire comme un
   accent trop léger face au Medium du titre. */
.lead__themes-num {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: 2.4375rem;
  line-height: 1;
  color: var(--gold);
}

.lead__themes-title {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  color: var(--ink);
  text-wrap: balance;
}

/* En dessous de 900px, .lead__grid repasse en une colonne (voir plus
   bas) : le bloc thématiques doit refluer à des tailles plus sobres
   pour continuer à tenir, sans quoi trois lignes à --h2-size plus le
   H1 et le portrait empilé ne rentrent plus. */
@media (max-width: 900px) {
  /* Même rapport ≈1,4× recalculé pour --h3-size (19px, cap-height
     ≈13,3px) : chiffre à 1.625rem plutôt que le 2rem d'avant, cohérent
     avec le ratio desktop plutôt qu'une réduction arbitraire. */
  .lead__themes-num { font-size: 1.625rem; }
  .lead__themes-title { font-size: var(--h3-size); line-height: var(--h3-lh); }
}

/* Filet or retiré du héros, conservé ici au cas où il reviendrait. */
.lead__rule { display: none; }

@media (max-width: 900px) {
  .lead { --lead-h: auto; padding-top: var(--space-4); }
  .lead__grid { grid-template-columns: 1fr; min-height: 0; }
  .lead__spacer { display: none; }

  .lead__portrait {
    position: static;
    margin: var(--space-4) auto 0;
    width: fit-content;
  }

  .lead__portrait img { height: clamp(320px, 64vw, 440px); }
}

/* ---- Hero (a-propos.html), même mécanique que .lead, sur paper -----
   Texte à gauche, portrait détouré ancré à droite entre le dégagement du
   haut et le bas de la bande. Rien n'est fixé sur l'image : sa hauteur
   vient de --about-hero-h, comme --lead-h pour le hero de l'accueil. */
.about-hero {
  --about-hero-h: clamp(520px, 68vh, 700px);
  --about-hero-top-clear: 48px;
  --about-hero-portrait-inset: max(0px, calc((100vw - var(--container)) / 2));

  position: relative;
  background: var(--paper);
  padding: 0;
  overflow: hidden;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
  gap: var(--space-4);
  align-items: center;
  min-height: var(--about-hero-h);
}

.about-hero__eyebrow { margin-bottom: var(--space-2); }

.about-hero__text h1 {
  color: var(--ink);
  max-width: 23rem;
  text-wrap: balance;
  margin-bottom: var(--space-3);
}

/* Même exception documentée que .offer-row__body p : 15px de charte,
   1.0625rem pour ce texte de lecture longue. */
.about-hero__intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate);
  max-width: 54ch;
  margin: 0;
}

.about-hero__portrait {
  position: absolute;
  top: var(--about-hero-top-clear);
  bottom: 0;
  right: var(--about-hero-portrait-inset);
  pointer-events: none;
}

.about-hero__portrait img { height: 100%; width: auto; display: block; }

@media (max-width: 900px) {
  .about-hero { --about-hero-h: auto; padding-top: var(--space-4); }
  .about-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .about-hero__spacer { display: none; }

  .about-hero__portrait {
    position: static;
    margin: var(--space-4) auto 0;
    width: fit-content;
  }

  .about-hero__portrait img { height: clamp(320px, 64vw, 440px); }
}

/* ---- Bande navy des offres ---------------------------------------- */
/* Pas de z-index ici : le fond se peint sous les éléments positionnés,
   ce qui laisse le portrait passer devant. */
.band-offers {
  position: relative;
  background: var(--navy);
  padding-block: var(--space-6) var(--space-5);
}

.band-offers .offers { position: relative; z-index: 3; }

/* ---- Cartes sur navy, carte hover façon ICF ------------------------
   Le filet or est retiré du HTML sur ces trois cartes : sans lui, la
   carte n'a plus que 4 enfants (num, h3, p, lien) au lieu de 5. La
   grille .offers reste définie sur 5 lignes (voir plus haut) ; on fixe
   donc explicitement la ligne de chacun pour ne pas casser le subgrid,
   la ligne 2, ex-filet, reste simplement vide. */
.offers--onnavy .offer__num  { grid-row: 1; color: var(--gold); }
.offers--onnavy .offer h3    { grid-row: 3; color: var(--paper); }
/* :not(.offer__num), sinon ce sélecteur (un type + une classe) bat
   .offer__num (deux classes) en spécificité et lui vole sa ligne. Pas
   de z-index ici : voir le commentaire sur le ::after plus bas, un
   z-index plus haut que lui rendrait le paragraphe sélectionnable mais
   lui ferait perdre le clic vers le lien, ce qui casse l'objectif
   principal de cette carte. */
.offers--onnavy .offer p:not(.offer__num) {
  grid-row: 4;
  color: var(--text-on-navy);
}

.offers--onnavy .offer {
  position: relative;           /* ancre le ::after du lien-titre */
  cursor: pointer;
  background: transparent;
  border: none;                 /* pas de cadre par défaut */
  transition: background-color 0.2s ease, border-radius 0.2s ease;
}

/* Lien-titre : toute la carte est cliquable via son ::after étiré
   (position: absolute; inset: 0, ancré sur .offer ci-dessus), plutôt
   que d'englober <article> dans un <a>, ça éviterait qu'un lecteur
   d'écran annonce toute la carte comme nom de lien, et ça imbriquerait
   un lien dans un lien (invalide) avec la flèche. Un seul lien par
   carte, son nom accessible est le titre. */
.offers--onnavy .offer h3 a {
  color: inherit;
  text-decoration: none;
}

.offers--onnavy .offer h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* La bague de focus va sur la carte, pas sur le lien-titre (dont le
   ::after invisible est ce qui reçoit réellement le focus). */
.offers--onnavy .offer h3 a:focus-visible { outline: none; }

.offers--onnavy .offer:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Écart assumé à la charte (rayon max 3px) : coin arrondi au survol de
   la carte, format ICF, ne concerne que ces cartes sur navy. */
.offers--onnavy .offer:hover,
.offers--onnavy .offer:focus-within {
  background: var(--navy-light);
  border-radius: 16px;
}

/* Écart assumé à la charte (rayon max 3px) : bouton rond, format ICF. */
.offers--onnavy .offer__link {
  grid-row: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-on-navy);
  background: transparent;
  color: var(--gold);
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.offers--onnavy .offer:hover .offer__link,
.offers--onnavy .offer:focus-within .offer__link {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* ---- Cartes sur navy, non cliquables (a-propos.html) ----------------
   Même traitement visuel que .offers--onnavy (transparent par défaut,
   fond --navy-light + coin 16px au survol) mais sans le comportement de
   lien : ces cartes ne mènent nulle part, donc pas de cursor:pointer, pas
   de lien étiré, pas de bouton flèche. Le filet or reste dans le HTML,
   donc pas besoin de fixer grid-row comme pour .offers--onnavy. */
.offers--navy-plain .offer {
  background: transparent;
  border: none;
  transition: background-color 0.2s ease, border-radius 0.2s ease;
}

.offers--navy-plain .offer__num { color: var(--gold); }
.offers--navy-plain .offer h3 { color: var(--paper); }
.offers--navy-plain .offer p:not(.offer__num) { color: var(--text-on-navy); }

.offers--navy-plain .offer:hover,
.offers--navy-plain .offer:focus-within {
  background: var(--navy-light);
  border-radius: 16px;
}

/* ---- CTA or dans l'en-tête ----------------------------------------- */
/* Exception assumée à la charte (rayon max 3px), CTA uniquement. */
.nav .btn--nav-accent {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav .btn--nav-accent:hover,
.nav .btn--nav-accent:focus-visible {
  background-color: var(--gold-light);
  border-color: var(--gold-light);
}

/* ---- Petits écrans -------------------------------------------------- */
@media (max-width: 900px) {
  .lead { padding-bottom: 0; }
  .lead__grid { grid-template-columns: 1fr; min-height: 0; }
  .lead__spacer { display: none; }

  .lead__portrait {
    position: static;
    display: block;
    margin: var(--space-4) auto 0;
    width: fit-content;
  }

  .lead__portrait img { height: clamp(300px, 62vw, 420px); }

  .band-offers { padding-top: var(--space-4); }
}