/* =========================================================================
   SMART EVENT — DESIGN SYSTEM
   1. Tokens        6. Cartes
   2. Reset / base  7. Formulaires
   3. Layout        8. Header / navigation
   4. Typographie   9. Footer
   5. Boutons      10. Sections spécifiques
   ========================================================================= */

/* =========================================================================
   OÙ CHANGER LES COULEURS
   -------------------------------------------------------------------------
   Tout se joue dans les trois blocs qui suivent.

   1. LA PALETTE DE MARQUE      couleurs fixes, identiques dans les deux
                                thèmes (le doré, le bleu nuit du logo…).
   2. LE THÈME CLAIR            bloc « :root », plus bas.
   3. LE THÈME SOMBRE           bloc « [data-theme="sombre"] ».

   Les 2 et 3 ne contiennent QUE des « jetons de rôle » : --fond, --texte,
   --surface, --bordure… Le reste de la feuille n'utilise plus que ces
   jetons. Conséquence : pour retoucher un thème, vous modifiez une seule
   ligne dans un seul bloc, et le changement se propage partout.

   ⚠️ Ne remettez jamais une couleur en dur ailleurs dans ce fichier : elle
   resterait identique dans les deux thèmes et finirait par être illisible
   dans l'un des deux.
   ========================================================================= */

/* ---------- 1. TOKENS --------------------------------------------------- */

/* --- 1a. Palette de marque : ne change pas d'un thème à l'autre ---------- */
:root {
  --nuit: #101828;
  --nuit-90: rgba(16, 24, 40, 0.9);
  --ivoire: #f8f5ef;
  --blanc-chaud: #fffdf9;
  --champagne: #c6a66b;
  --champagne-clair: #ddc79a;
  --champagne-fonce: #a9884b;
  --beige-rose: #e8ddd2;
  --anthracite: #262626;
  --anthracite-70: rgba(38, 38, 38, 0.7);
  --anthracite-55: rgba(38, 38, 38, 0.56);
  --trait: rgba(38, 38, 38, 0.1);
  --trait-clair: rgba(248, 245, 239, 0.14);
  --erreur: #9b2c2c;
  --succes: #2f6b4f;

  /* Typographie */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Échelle fluide
     -----------------------------------------------------------------------
     ⚠️ CONFORT DE LECTURE — décision du 11 septembre 2026.
     Le public du site a majoritairement plus de 45 ans. Après 45 ans, l'œil
     accommode moins bien de près (presbytie) ET la sensibilité au contraste
     baisse : un texte gris clair de 15 px se lit mal, même avec des lunettes.
     L'échelle de lecture a donc été relevée d'environ 10 %.

     Trois règles à respecter si vous y retouchez un jour :
       1. Tout est en « rem », jamais en « px ». Un rem suit la taille de
          police réglée par le visiteur dans son navigateur. Écrire « px »
          ici, ce serait refuser d'obéir à quelqu'un qui a justement agrandi
          sa police parce qu'il voit mal.
       2. --t-micro est un PLANCHER, pas une taille ordinaire. Il est réservé
          aux mentions accessoires (« obligatoire », un compteur de signes).
          Rien qui doive vraiment être lu ne descend en dessous.
       3. Une phrase entière ne descend jamais sous --t-small. Les tailles
          écrites en dur ailleurs dans cette feuille ont été remplacées par
          ces jetons : ne réintroduisez pas de « font-size: 0.87rem ».
     ----------------------------------------------------------------------- */
  --t-display: clamp(2.7rem, 1.4rem + 4.6vw, 5.1rem);
  --t-h1: clamp(2.3rem, 1.4rem + 3.4vw, 4rem);
  --t-h2: clamp(1.95rem, 1.3rem + 2.3vw, 3.05rem);
  --t-h3: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  --t-h4: clamp(1.18rem, 1.08rem + 0.4vw, 1.36rem);
  --t-body: clamp(1.09rem, 1.05rem + 0.18vw, 1.19rem);
  --t-small: 0.975rem;
  --t-micro: 0.875rem;
  --t-eyebrow: 0.78rem;

  /* Rythme */
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  --max: 1220px;
  --max-etroit: 760px;

  /* Formes */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Ombres — volontairement très discrètes */
  --ombre-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --ombre-2: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 34px -18px rgba(16, 24, 40, 0.22);
  --ombre-3: 0 2px 4px rgba(16, 24, 40, 0.04), 0 30px 60px -28px rgba(16, 24, 40, 0.3);

  --transition: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

/* --- 1b. THÈME CLAIR — les jetons de rôle ------------------------------- *
   Chaque jeton dit à quoi il sert, pas de quelle couleur il est. C'est ce
   qui permet au thème sombre de n'être pas une inversion : « --fond » et
   « --texte » changent de valeur, mais « --accent » reste le doré.

   Un piège que ce découpage évite : dans l'ancienne feuille, « --nuit »
   servait à la fois de fond de bande sombre ET de couleur de titre, et
   « --ivoire » de fond de section claire ET de texte sur fond sombre. En
   thème sombre, ces deux rôles exigent des valeurs opposées. D'où la
   séparation en « surfaces » et « textes » ci-dessous.
   ----------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --fond: #fffdf9;              /* fond général de la page */
  --fond-alt: #f8f5ef;          /* sections alternées (ex-« ivoire ») */
  --fond-accent: #e8ddd2;       /* bandes beige rosé */
  --fond-contraste: #101828;    /* bandes sombres (ex-« nuit ») */
  --surface: #fffdf9;           /* cartes, champs, panneaux */
  --surface-voile: rgba(255, 253, 249, 0.88);  /* en-tête translucide */
  --surface-voile-fort: rgba(255, 253, 249, 0.94);
  --surface-creuse: rgba(38, 38, 38, 0.05);    /* pastilles, puces */

  /* Textes
     ⚠️ CONFORT DE LECTURE — 11 septembre 2026.
     --texte-doux est la couleur de TOUS les paragraphes du site (voir la
     règle « p { color: var(--texte-doux) } »). Il était à 0,70 : environ
     5,9:1 sur le fond ivoire, conforme mais fatigant à lire longtemps.
     --texte-faible était à 0,56, soit environ 4,1:1 — SOUS le seuil lisible
     de 4,5:1, et il servait à des mentions déjà écrites petit.
     Remontés à 0,78 et 0,66. Ne les redescendez pas pour « adoucir » : le
     gris clair est un effet de style qui se paie en lecteurs perdus. */
  --texte: #262626;             /* corps de texte */
  --texte-fort: #101828;        /* titres, chiffres, éléments actifs */
  --texte-doux: rgba(38, 38, 38, 0.78);
  --texte-faible: rgba(38, 38, 38, 0.66);
  --texte-tenu: rgba(38, 38, 38, 0.3);          /* séparateurs, indices */
  --texte-substitut: rgba(38, 38, 38, 0.35);    /* placeholders */
  /* Texte posé sur --fond-contraste : sombre dans les deux thèmes, donc
     ces valeurs-là ne bougent pratiquement pas. */
  --sur-contraste: #f8f5ef;
  --sur-contraste-doux: rgba(248, 245, 239, 0.78);
  --sur-contraste-faible: rgba(248, 245, 239, 0.5);
  /* 0,52 et non 0,42 : en dessous, les intertitres de la barre latérale de
     l'espace client passaient sous le seuil de 4,5:1 sur le bleu nuit. */
  --sur-contraste-tenu: rgba(248, 245, 239, 0.52);
  /* Survol et fonds légers posés sur une bande sombre. */
  --voile-contraste: rgba(248, 245, 239, 0.07);
  --voile-contraste-faible: rgba(248, 245, 239, 0.05);

  /* Traits */
  --bordure: rgba(38, 38, 38, 0.1);
  --bordure-marquee: rgba(38, 38, 38, 0.16);    /* champs de formulaire */
  --bordure-appuyee: rgba(38, 38, 38, 0.25);
  --bordure-contraste: rgba(248, 245, 239, 0.14);

  /* Accent doré. « --accent-lisible » est la seule nuance autorisée pour du
     texte ou un contour de focus : c'est celle dont le contraste est vérifié
     sur le fond du thème en cours. */
  --accent: #c6a66b;
  --accent-lisible: #a9884b;
  --accent-doux: #ddc79a;

  /* Action principale (bouton plein) */
  --action-fond: #101828;
  --action-fond-survol: #1c2a44;
  --action-texte: #f8f5ef;

  /* États */
  --succes-fond: rgba(47, 107, 79, 0.08);
  --succes-bordure: rgba(47, 107, 79, 0.3);
  --succes-texte: #2f6b4f;
  --erreur-fond: rgba(155, 44, 44, 0.07);
  --erreur-bordure: rgba(155, 44, 44, 0.28);
  --erreur-texte: #9b2c2c;

  /* Chevron des listes déroulantes. C'est une image de fond : sa couleur est
     écrite dans le SVG, elle ne suit donc pas « color ». Trait #262626. */
  --chevron-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23262626' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Dégradés d'ambiance des hero */
  --halo-hero: rgba(232, 221, 210, 0.55);
  --halo-hero-fin: rgba(232, 221, 210, 0);
  --degrade-carte: rgba(255, 253, 249, 0);
  --contraste-degrade: #1c2a44;   /* second ton des aplats sombres */

  /* Plaque du logo. Le logo Smart For You est un monogramme SFY dont le S est
     bleu marine : sur un fond sombre, ce S disparaît purement et simplement.
     D'où une plaque ronde crème posée derrière lui UNIQUEMENT sur les fonds
     sombres (pied de page, thème sombre). Sur fond clair, elle est
     transparente : le logo se pose directement sur la page.
     « --logo-marge » creuse l'écart entre le bord de la plaque et le logo ;
     à 0, il n'y a pas de plaque à dessiner, donc pas d'écart à ménager. */
  --logo-fond: transparent;
  --logo-marge: 0px;

  --ombre-entete: 0 1px 24px -14px rgba(16, 24, 40, 0.35);
}

/* --- 1c. THÈME SOMBRE --------------------------------------------------- *
   Appliqué dès que <html data-theme="sombre">. C'est « assets/js/theme.js »
   qui pose l'attribut, avant le premier affichage, pour qu'aucun flash blanc
   ne soit visible.

   Principes retenus, dans l'ordre d'importance :
     — bleu nuit très profond, jamais de noir pur : le noir écrase le doré ;
     — ivoire adouci pour le texte, jamais de blanc pur : moins fatigant et
       plus proche de l'identité de la marque ;
     — le doré est conservé, mais éclairci quand il porte du texte ou un
       contour de focus, sinon le contraste tombe sous le seuil lisible ;
     — les bandes « contraste » descendent encore d'un cran plutôt que de
       remonter : la page garde ainsi son rythme de bandes alternées.

   Les images, vidéos et illustrations ne sont jamais filtrées ici : aucune
   règle n'applique « invert » ni « filter » à un média.
   ----------------------------------------------------------------------- */
[data-theme="sombre"] {
  color-scheme: dark;

  /* Surfaces */
  --fond: #0b1421;
  --fond-alt: #121d30;
  --fond-accent: #1b2a45;
  --fond-contraste: #070d18;
  --surface: #16233a;
  --surface-voile: rgba(11, 20, 33, 0.88);
  --surface-voile-fort: rgba(11, 20, 33, 0.94);
  --surface-creuse: rgba(232, 227, 217, 0.07);

  /* Textes */
  --texte: #e8e3d9;
  --texte-fort: #f4efe5;
  /* Mêmes valeurs relevées qu'en thème clair, et pour la même raison. */
  --texte-doux: rgba(232, 227, 217, 0.82);
  --texte-faible: rgba(232, 227, 217, 0.68);
  --texte-tenu: rgba(232, 227, 217, 0.34);
  --texte-substitut: rgba(232, 227, 217, 0.42);
  --sur-contraste: #f4efe5;
  --sur-contraste-doux: rgba(244, 239, 229, 0.78);
  --sur-contraste-faible: rgba(244, 239, 229, 0.5);
  --sur-contraste-tenu: rgba(244, 239, 229, 0.52);
  --voile-contraste: rgba(244, 239, 229, 0.07);
  --voile-contraste-faible: rgba(244, 239, 229, 0.05);

  /* Traits */
  --bordure: rgba(232, 227, 217, 0.14);
  --bordure-marquee: rgba(232, 227, 217, 0.22);
  --bordure-appuyee: rgba(232, 227, 217, 0.34);
  --bordure-contraste: rgba(244, 239, 229, 0.14);

  /* Accent : le doré de marque reste, mais s'éclaircit dès qu'il doit être lu */
  --accent: #c6a66b;
  --accent-lisible: #ddc79a;
  --accent-doux: #e7d6b2;

  /* Action principale : l'ivoire devient le fond, le bleu nuit le texte.
     Le bouton doré garde ainsi son rôle distinct d'accent. */
  --action-fond: #f0ebe1;
  --action-fond-survol: #ffffff;
  --action-texte: #0b1421;

  /* États : fonds plus denses et textes éclaircis, sinon illisibles */
  --succes-fond: rgba(90, 190, 145, 0.12);
  --succes-bordure: rgba(90, 190, 145, 0.34);
  --succes-texte: #7fd2aa;
  --erreur-fond: rgba(240, 120, 115, 0.12);
  --erreur-bordure: rgba(240, 120, 115, 0.34);
  --erreur-texte: #f2a29e;

  /* Même chevron, tracé en ivoire : le trait sombre disparaîtrait ici. */
  --chevron-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23e8e3d9' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Ambiances */
  --halo-hero: rgba(198, 166, 107, 0.14);
  --halo-hero-fin: rgba(198, 166, 107, 0);
  --degrade-carte: rgba(22, 35, 58, 0);
  --contraste-degrade: #101b2e;

  /* Plaque du logo : crème sur fond sombre. Elle ne sert pas de décor, elle
     remplit l'intérieur du monogramme pour que le S bleu marine redevienne
     lisible. Sans elle, le S se fond dans le fond et il ne reste que le F
     doré et le Y argenté. */
  --logo-fond: #f8f5ef;
  --logo-marge: 2px;

  /* Ombres : sur fond sombre, une ombre noire ne se voit pas. On la rend
     plus dense et plus large pour conserver un relief perceptible. */
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ombre-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -18px rgba(0, 0, 0, 0.75);
  --ombre-3: 0 2px 4px rgba(0, 0, 0, 0.45), 0 30px 60px -28px rgba(0, 0, 0, 0.85);
  --ombre-entete: 0 1px 24px -14px rgba(0, 0, 0, 0.8);
}

/* ---------- 2. RESET / BASE -------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Un lien ou un badge piloté par la configuration doit disparaître réellement
   quand la valeur correspondante est vide, même si sa classe impose un display. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-body);
  /* 1,7 et non 1,65 : l'interligne compte autant que la taille. C'est lui qui
     empêche l'œil de « sauter une ligne » en revenant à la marge — l'erreur
     de lecture la plus fréquente quand la vue baisse. */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img,
svg,
picture { max-width: 100%; display: block; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin: 0;
}

::selection { background: var(--accent); color: var(--nuit); }

:focus-visible {
  outline: 2px solid var(--accent-lisible);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--fond-contraste);
  color: var(--sur-contraste);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  transition: top 200ms ease;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. LAYOUT --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-etroit);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: clamp(3rem, 2rem + 3.5vw, 5rem); }

.section-ivoire { background: var(--fond-alt); }
.section-beige { background: var(--fond-accent); }
.section-nuit {
  background: var(--fond-contraste);
  color: var(--sur-contraste);
}
.section-nuit h1, .section-nuit h2, .section-nuit h3, .section-nuit h4, .section-nuit .titre-4 { color: var(--sur-contraste); }
.section-nuit p, .section-nuit li { color: var(--sur-contraste-doux); }

/* Un encart reste une carte CLAIRE, même posée sur une bande sombre. Les deux
   règles ci-dessus, écrites pour du texte à même le fond sombre, l'atteignaient
   aussi : son contenu devenait ivoire sur ivoire, donc invisible. On lui rend
   les couleurs du fond clair. Ces jetons basculant avec le thème, la règle vaut
   pour le mode clair comme pour le mode sombre.                              */
.section-nuit .encart { color: var(--texte); }
.section-nuit .encart p, .section-nuit .encart li { color: var(--texte-doux); }
.section-nuit .encart h1, .section-nuit .encart h2, .section-nuit .encart h3,
.section-nuit .encart h4, .section-nuit .encart .titre-4 { color: var(--texte-fort); }
/* Même raison pour le surtitre : le doré clair est fait pour le fond sombre. */
.section-nuit .encart .eyebrow { color: var(--accent-lisible); }

.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split-wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split-media-first .split-media { order: -1; }
}

.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* ---------- 4. TYPOGRAPHIE ---------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--texte-fort);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }

/* Le « petit titre » sans empattement : c'est une APPARENCE, pas un niveau.
   Un titre de carte doit ressembler à ceci tout en restant un <h3> si le
   titre qui le précède est un <h2> — sinon la hiérarchie saute un niveau et
   un lecteur d'écran annonce une sous-section qui n'existe pas.
   D'où la classe : on garde le bon niveau dans le balisage, on choisit le
   dessin avec « titre-4 ». La règle vaut aussi pour <h4> lui-même, afin que
   rien ne change là où le niveau 4 est légitime. */
h4, .titre-4 {
  font-size: var(--t-h4);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

p { margin: 0; color: var(--texte-doux); text-wrap: pretty; }
p strong { color: var(--texte); font-weight: 600; }

.display {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--texte-fort);
  margin: 0;
}

.lead {
  font-size: clamp(1.16rem, 1.08rem + 0.4vw, 1.34rem);
  line-height: 1.62;
  color: var(--texte-doux);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  margin: 0 0 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow-center { justify-content: center; }
.section-nuit .eyebrow { color: var(--accent-doux); }

.section-head { max-width: 680px; margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.section-head.center { margin-inline: auto; }
.section-head p { margin-top: 1.1rem; }

.serif-accent { font-family: var(--serif); font-style: italic; color: var(--accent-lisible); }

.text-small { font-size: var(--t-small); }
.text-muted { color: var(--texte-faible); }

/* Liens texte soulignés finement */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--texte-fort);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: gap var(--transition), color var(--transition);
}
.link-underline:hover { gap: 0.85rem; color: var(--accent-lisible); }
.link-underline .arrow { transition: transform var(--transition); }
.link-underline:hover .arrow { transform: translateX(2px); }

/* ---------- 5. BOUTONS -------------------------------------------------- */
/* Le bouton plein utilise « --action-* » et non « --fond-contraste » : en
   thème sombre, un bouton de la couleur des bandes sombres se confondrait
   avec la page. L'action principale devient donc ivoire sur texte nuit. */
.btn {
  --btn-bg: var(--action-fond);
  --btn-fg: var(--action-texte);
  --btn-bd: var(--action-fond);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background-color var(--transition), color var(--transition),
    border-color var(--transition);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--action-fond); --btn-fg: var(--action-texte); --btn-bd: var(--action-fond); }
.btn-primary:hover { --btn-bg: var(--action-fond-survol); --btn-bd: var(--action-fond-survol); }

.btn-gold { --btn-bg: var(--accent); --btn-fg: var(--nuit); --btn-bd: var(--accent); }
.btn-gold:hover { --btn-bg: var(--accent-doux); --btn-bd: var(--accent-doux); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--texte-fort);
  --btn-bd: var(--bordure-appuyee);
}
.btn-outline:hover { --btn-bd: var(--texte-fort); --btn-bg: var(--surface-creuse); }

.btn-light {
  --btn-bg: transparent;
  --btn-fg: var(--sur-contraste);
  --btn-bd: rgba(248, 245, 239, 0.35);
}
.btn-light:hover { --btn-bg: rgba(248, 245, 239, 0.08); --btn-bd: var(--sur-contraste); }

.btn-ivoire { --btn-bg: var(--ivoire); --btn-fg: var(--nuit); --btn-bd: var(--sur-contraste); }

.btn-sm { padding: 0.7rem 1.3rem; font-size: var(--t-small); }
.header-actions .btn { white-space: nowrap; }
.btn-lg { padding: 1.08rem 2.1rem; font-size: 1.08rem; }
.btn-block { width: 100%; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.btn-group.center { justify-content: center; }
@media (max-width: 420px) {
  .btn-group .btn { width: 100%; }
}

/* ---------- 6. CARTES --------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem);
  box-shadow: var(--ombre-1);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-2);
  border-color: rgba(198, 166, 107, 0.45);
}
.card h3, .card h4, .card .titre-4 { margin-bottom: 0.7rem; }
.card p { font-size: var(--t-body); }
.card .card-foot { margin-top: auto; padding-top: 1.4rem; }

.card-static:hover { transform: none; box-shadow: var(--ombre-1); border-color: var(--bordure); }

.section-ivoire .card { background: var(--surface); }
.section-nuit .card {
  background: rgba(248, 245, 239, 0.04);
  border-color: var(--bordure-contraste);
  box-shadow: none;
}
.section-nuit .card:hover { border-color: rgba(198, 166, 107, 0.5); background: rgba(248, 245, 239, 0.07); }

.card-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.9rem;
}

.card-tag {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  background: rgba(198, 166, 107, 0.12);
  border: 1px solid rgba(198, 166, 107, 0.3);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
  align-self: flex-start;
}
.card-tag-neutre {
  color: var(--texte-doux);
  background: var(--surface-creuse);
  border-color: var(--bordure);
}

.card-objectif {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordure);
  font-size: var(--t-small);
  color: var(--texte-faible);
}
.card-objectif strong {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  margin-bottom: 0.35rem;
}

/* Carte prestation */
.card-offre .prix {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--texte-fort);
  margin-top: 0.4rem;
  display: block;
}
.card-offre.is-highlight {
  border-color: rgba(198, 166, 107, 0.55);
  box-shadow: var(--ombre-2);
  background: linear-gradient(180deg, rgba(198, 166, 107, 0.07), var(--degrade-carte) 45%);
}

.liste-check { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.liste-check li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-body);
  color: var(--texte-doux);
  line-height: 1.5;
}
.liste-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(198, 166, 107, 0.25);
}
.section-nuit .liste-check li { color: var(--sur-contraste-doux); }
.section-nuit .encart .liste-check li { color: var(--texte-doux); }

/* Variante « ce qui n'est PAS inclus ». Même liste, même typographie : seule
   la puce change, pour qu'une exclusion ne se lise jamais comme une inclusion.
   La pastille dorée devient un tiret neutre. Aucune couleur nouvelle n'est
   introduite : on réutilise les jetons de texte existants. */
.liste-check--exclu li::before {
  top: 0.72em;
  width: 10px;
  height: 0;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--texte-tenu);
  background: none;
}
.section-nuit .liste-check--exclu li::before { border-top-color: var(--sur-contraste-tenu); }

/* Liste de problèmes */
.liste-probleme { display: grid; gap: 0.9rem; }
.liste-probleme li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  color: var(--texte-doux);
  transition: border-color var(--transition), transform var(--transition);
}
.liste-probleme li:hover { border-color: rgba(198, 166, 107, 0.4); transform: translateX(3px); }
.liste-probleme svg { flex: none; margin-top: 2px; color: var(--accent-lisible); }

/* ---------- 7. MÉDIAS --------------------------------------------------- */
.media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--fond-accent);
  box-shadow: var(--ombre-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-ratio-4-5 { aspect-ratio: 4 / 5; }
.media-ratio-1-1 { aspect-ratio: 1 / 1; }
.media-ratio-3-2 { aspect-ratio: 3 / 2; }
.media-ratio-16-9 { aspect-ratio: 16 / 9; }

/* Cadre champagne décalé */
.media-frame { position: relative; }
.media-frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  z-index: 0;
  pointer-events: none;
}
.media-frame .media { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .media-frame::before { inset: 12px -12px -12px 12px; }
}

/* Sur ces trois pages, le filet doré suit le bord de la photo. */
body:is([data-origine="accueil"], [data-origine="smart_ia"], [data-origine="smart_avatar"]) .media-frame::before {
  inset: 0;
  z-index: 2;
}

.media-caption {
  margin-top: 0.9rem;
  font-size: var(--t-small);
  color: var(--texte-faible);
  font-style: italic;
}

/* ---------- 8. HEADER / NAVIGATION -------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition), border-color var(--transition),
    box-shadow var(--transition), backdrop-filter var(--transition);
}
.site-header.is-scrolled {
  background: var(--surface-voile);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--bordure);
  box-shadow: var(--ombre-entete);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}
@media (min-width: 1400px) { .header-inner { gap: 1.5rem; } }

/* Le bandeau est plus large que la colonne de texte — et c'est voulu.
   -------------------------------------------------------------------------
   .header-inner porte aussi la classe .container, dont le max-width vaut
   --max (1220 px). Une fois les marges intérieures retirées, il ne restait
   que 1141 px utiles. Or le logo (246), la navigation (663) et les boutons
   (238), écarts compris, en réclament 1179. Le bandeau débordait donc de
   38 px à TOUTE largeur d'écran — le plafond de 1220 px ne dépend pas du
   viewport, agrandir la fenêtre n'y changeait rien.

   1220 px est la bonne mesure pour du TEXTE : au-delà, les lignes
   deviennent trop longues et l'œil se perd en revenant à la marge. Mais un
   bandeau de navigation n'est pas un paragraphe. On lui donne donc son
   propre plafond, plus large, sans toucher à celui du contenu.
   ------------------------------------------------------------------------- */
.site-header .header-inner { max-width: 1400px; }

.logo { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* LE LOGO — POURQUOI 46 px ET PAS 38

   Jusqu'ici cette pastille contenait une simple lettre « S » dessinée en
   CSS, faute de logo fourni. Elle porte désormais le vrai monogramme SFY
   (« assets/img/logo-smart-for-you.svg »), qui superpose un S, un F, un Y et
   une étoile dans un anneau. À 38 px ces quatre éléments se confondent ;
   la mesure dans l'aperçu situe le seuil de lisibilité à 46 px.

   Ces 8 px de plus sont pris sur la marge de l'en-tête, qui est comptée :
   voir le commentaire « SIGNATURE DU LOGO SUR PETITS ÉCRANS » juste en
   dessous. À 1280 px il restait 20 px de marge, il en reste 12. C'est
   suffisant, mais ce n'est plus confortable : si vous agrandissez encore le
   logo ou rallongez la signature, vérifiez que le bouton « Faire un
   diagnostic » reste entier à 1280 px et le bouton de menu à 360 px. */
.logo-mark {
  width: 46px; height: 46px;
  box-sizing: border-box;
  padding: var(--logo-marge);
  display: grid; place-items: center;
  background: var(--logo-fond);
  border-radius: 50%;
  flex: none;
}
.logo-mark img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text strong {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--texte-fort);
  letter-spacing: -0.01em;
}
.logo-text em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* SIGNATURE DU LOGO SUR PETITS ÉCRANS — À LIRE AVANT DE LA RALLONGER

   « .logo » est en « flex: none » : le logo ne se comprime jamais. Une
   signature trop large repousse donc le bouton de menu hors de l'écran, et
   la navigation devient littéralement inatteignable — ce n'est pas un défaut
   d'esthétique, c'est une page sans issue.

   La signature actuelle fait 36 caractères, contre 28 pour la précédente.
   À corps égal elle occupait 270 px au lieu de 206, et ces 64 px de trop
   suffisaient à pousser hors champ le bouton « Faire un diagnostic » sur un
   écran de 1280 px, et le bouton de menu sur un téléphone.

   D'où deux réglages, mesurés et non estimés :
     — dans l'en-tête, corps et interlettrage réduits À TOUTES LES LARGEURS.
       La signature retombe à 197 px, soit MOINS que l'ancienne : la marge
       disponible à 1280 px passe de 11 px à 20 px. Le pied de page, lui,
       n'est pas concerné — il est disposé en colonne, rien n'y est poussé
       hors champ — et garde donc la taille normale ;
     — sous 360 px, on la masque : à cette largeur, aucun réglage ne la fait
       tenir sans repousser le bouton de menu hors de l'écran. Le nom de la
       marque seul suffit.

   Ces valeurs sont calées sur la LONGUEUR ACTUELLE du texte. Elles ne
   s'adaptent pas toutes seules : si vous changez « marque.signature » pour
   un texte plus long, revenez vérifier ici que le bouton « Faire un
   diagnostic » reste entier à 1280 px et le bouton de menu à 360 px. */
.site-header .logo-text em { font-size: 0.52rem; letter-spacing: 0.06em; }

@media (max-width: 359px) {
  .site-header .logo-text em { display: none; }
}

.nav-desktop { display: none; align-items: center; gap: 0.35rem; }
.nav-desktop a {
  position: relative;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 450;
  white-space: nowrap;
  color: var(--texte);
  border-radius: var(--r-sm);
  transition: color var(--transition);
}
/* Navigation un peu plus aérée quand la place le permet vraiment.
   1400 px et non 1300 px : à 1300 px, le gabarit du bandeau plafonne encore
   à 1220 px utiles, et cette règle réclamait 1229 px — elle provoquait donc
   elle-même le débordement qu'elle était censée éviter. À 1400 px, le
   bandeau dispose de 1320 px : la marge existe pour de bon. */
/* Seuil remonté de 1400 à 1700 px le 17 sept. 2026 : avec la septième
   entrée (Smart IA™), la barre aérée ne tenait plus entre 1400 et 1560 px. */
@media (min-width: 1700px) { .nav-desktop a { padding: 0.5rem 0.78rem; font-size: 0.9rem; } }
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0.72rem; right: 0.72rem;
  bottom: 0.28rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
.nav-desktop a[aria-current="page"] { color: var(--texte-fort); font-weight: 600; }

.header-actions { display: none; align-items: center; gap: 0.6rem; flex: none; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  flex: none;
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--fond-contraste);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Bascule menu déroulant → menu horizontal.
   -------------------------------------------------------------------------
   1280 px, et non 1024 px. À 1024 px, l'addition ne tombait pas juste : le
   logo (246 px), les six entrées de navigation (663 px) et les boutons de
   droite (238 px) réclament 1147 px, auxquels s'ajoutent 32 px d'écarts et
   75 px de marges intérieures : 1254 px en tout. En dessous, les entrées se
   tassaient jusqu'à se toucher et devenaient difficiles à viser.

   Le passage au menu déroulant en dessous de 1280 px n'est pas un repli :
   le panneau plein écran affiche les mêmes entrées en 1,42rem, avec des
   zones de clic hautes. C'est plus lisible et plus facile à viser qu'une
   barre serrée — ce qui compte d'autant plus pour un lecteur de plus de
   45 ans.

   ⚠️ Si vous ajoutez une entrée de navigation, remesurez : la somme des
   trois blocs doit rester sous la largeur du seuil, sinon remontez-le.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .header-actions { display: flex; }
  .burger { display: none; }
  .header-actions .btn-secondaire-nav { display: none; }
}
/* Entre 1024 et 1279 px (portables 13-14 pouces), la barre complète tient
   à condition de resserrer : liens plus compacts, signature sous le logo
   masquée, bouton d'action réduit. Seuil abaissé le 14 sept. 2026 : à
   1280 px, la plupart des portables n'affichaient que le bouton de menu et
   le site donnait l'impression de n'avoir aucune page. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-desktop { gap: 0.1rem; }
  .nav-desktop a { padding: 0.45rem 0.38rem; font-size: 0.78rem; }
  .site-header .logo-text em { display: none; }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn { padding: 0.55rem 0.85rem; font-size: 0.8rem; }
  /* Septième entrée ajoutée le 17 sept. 2026 (Smart IA™). Sur cette plage
     étroite, la barre ne tient qu'en retirant une entrée : « Ressources »
     reste accessible par le pied de page, le menu mobile et les accès
     rapides de l'accueil. Les cinq univers, eux, restent tous visibles. */
  .nav-desktop a[href="ressources.html"] { display: none; }
}
/* 1280 – 1559 px : sept entrées à taille normale ne tiennent pas avec la
   signature sous le logo. On garde tout, mais un peu plus serré. */
@media (min-width: 1280px) and (max-width: 1559px) {
  .nav-desktop { gap: 0.2rem; }
  .nav-desktop a { padding: 0.45rem 0.5rem; font-size: 0.84rem; }
  .site-header .logo-text em { display: none; }
}
/* Troisième bouton du bandeau (« Parler de votre projet ») : 1560 px.
   -------------------------------------------------------------------------
   Le seuil était à 1500 px, où il ne tenait pas : avec ce bouton, le bandeau
   réclame 1456 px utiles, et 1500 px d'écran n'en laissent que 1420 une fois
   les marges retirées. Il débordait donc de 36 px sur tout écran large —
   défaut invisible en relecture, mesurable en une ligne dans le navigateur.
   Il faut 1456 + 80 de marges = 1536 px. On prend 1560 px, et on élargit le
   gabarit du bandeau d'autant, sinon son plafond de 1400 px annulerait le
   bénéfice. */
@media (min-width: 1560px) {
  .header-actions .btn-secondaire-nav { display: inline-flex; }
  .site-header .header-inner { max-width: 1600px; }
}

/* Bouton « Espace client » : masqué tant que espaceMembre.actif vaut false,
   grâce à [hidden] { display: none !important } déclaré plus haut. Ces règles
   ne servent donc que le jour où l'espace sera ouvert.                     */
.btn-espace { gap: 0.45rem; }
.btn-espace svg { flex: none; }

/* Menu mobile */
.mobile-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--surface);
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, transform 260ms ease, visibility 260ms;
  border-top: 1px solid var(--bordure);
}
.mobile-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-panel nav { display: grid; }
.mobile-panel nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  font-family: var(--serif);
  font-size: 1.42rem;
  color: var(--texte-fort);
  border-bottom: 1px solid var(--bordure);
}
.mobile-panel nav a[aria-current="page"] { color: var(--accent-lisible); }
.mobile-panel nav a::after { content: "→"; font-family: var(--sans); font-size: 0.95rem; color: var(--accent); }
.mobile-panel .btn-group { margin-top: 1.8rem; }
.mobile-panel .btn { width: 100%; }
.mobile-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.9rem;
  color: var(--texte-faible);
  display: grid;
  gap: 0.4rem;
}
@media (min-width: 1280px) { .mobile-panel { display: none; } }

/* Décalage du contenu sous le header fixe */
.page-top { padding-top: var(--header-h); }

/* ---------- 8b. SÉLECTEUR DE THÈME -------------------------------------- *
   Le composant est construit par assets/js/theme.js. Il existe sous deux
   présentations :
     .theme-choix--menu    — un bouton discret qui déplie trois choix.
                             En-tête du site et barres de l'espace client.
     .theme-choix--segment — les trois choix affichés d'emblée, côte à côte.
                             Menu mobile, où un menu dans un menu serait
                             pénible à manipuler au pouce.
   Les deux partagent .theme-option : une seule apparence à entretenir.

   Le sélecteur doit rester discret. Il ne porte donc ni couleur pleine, ni
   ombre, ni libellé au repos : une icône de 18 pixels dans un cadre fin,
   qui ne rivalise pas avec les deux boutons d'appel à l'action voisins.   */

.theme-choix--menu { position: relative; display: inline-flex; flex: none; }

.theme-declencheur {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  color: var(--texte-doux);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition),
              border-color var(--transition);
}
.theme-declencheur:hover {
  color: var(--texte-fort);
  background: var(--surface-creuse);
  border-color: var(--bordure-marquee);
}
.theme-choix--menu.is-open .theme-declencheur {
  color: var(--texte-fort);
  border-color: var(--bordure-appuyee);
  background: var(--surface-creuse);
}
.theme-declencheur-icone { display: grid; place-items: center; }

/* Le panneau déroulant */
.theme-choix--menu .theme-liste {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 140;
  display: grid;
  gap: 0.1rem;
  min-width: 13.5rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-3);
}

.theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.2;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
}
.theme-option:hover { background: var(--surface-creuse); color: var(--texte-fort); }
.theme-option-icone { display: grid; place-items: center; color: var(--texte-faible); }
.theme-option-texte { flex: 1 1 auto; }
.theme-coche { flex: none; color: var(--accent-lisible); opacity: 0; }

.theme-option.is-actif { color: var(--texte-fort); font-weight: 500; }
.theme-option.is-actif .theme-option-icone { color: var(--accent-lisible); }
.theme-option.is-actif .theme-coche { opacity: 1; }

/* Présentation « segment » : le bloc apparence du menu mobile. */
.theme-choix--segment {
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
}
.theme-segment-titre {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.theme-choix--segment .theme-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.theme-choix--segment .theme-option {
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  min-height: 76px;
  padding: 0.85rem 0.4rem;
  border: 1px solid var(--bordure);
  font-size: 0.8rem;
  text-align: center;
}
/* L'option retenue se signale par trois choses à la fois : un cadre plus
   épais, un fond, et une coche. Jamais par la seule couleur — un cadre plus
   épais reste perceptible sans distinguer les teintes.                     */
.theme-choix--segment .theme-option.is-actif {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--surface-creuse);
  font-weight: 600;
}
.theme-choix--segment .theme-coche {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  width: 14px; height: 14px;
}

/* Zones volontairement sombres dans les deux thèmes : barre latérale et
   barre mobile de l'espace client. Sans cela, le bouton s'y effacerait. */
.theme-choix--contraste .theme-declencheur {
  color: var(--sur-contraste-doux);
  border-color: var(--bordure-contraste);
}
.theme-choix--contraste .theme-declencheur:hover,
.theme-choix--contraste.is-open .theme-declencheur {
  color: var(--sur-contraste);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--sur-contraste-faible);
}

/* ---------- 9. HERO ----------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
  background:
    radial-gradient(120% 90% at 88% 8%, var(--halo-hero) 0%, var(--halo-hero-fin) 58%),
    linear-gradient(180deg, var(--fond-alt) 0%, var(--fond) 100%);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.02fr 0.98fr; }
}
.hero-copy { max-width: 620px; }
.hero .display { margin-bottom: 1.4rem; }
.hero-sub { font-size: clamp(1.15rem, 1.08rem + 0.45vw, 1.32rem); max-width: 34ch; }
@media (min-width: 960px) { .hero-sub { max-width: 46ch; } }
.hero .btn-group { margin-top: 2.1rem; }

.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--bordure);
  font-size: var(--t-small);
  color: var(--texte-faible);
  max-width: 46ch;
}
.hero-note svg { flex: none; margin-top: 3px; color: var(--accent-lisible); }

/* Bandeau de formats sous le hero */
.bandeau {
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  background: var(--surface);
  padding-block: 1.4rem;
}
.bandeau-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.6rem;
}
.bandeau-liste li {
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--texte-faible);
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.bandeau-liste li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
}
@media (max-width: 700px) {
  .bandeau-liste li:not(:last-child)::after { display: none; }
  .bandeau-liste { gap: 0.55rem 1.1rem; }
}

/* ---------- 10. MÉTHODE (étapes) ---------------------------------------- */
.etapes { display: grid; gap: 0; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(4, 1fr); } }

.etape {
  position: relative;
  padding: 2rem 1.6rem 2rem 0;
  border-top: 1px solid var(--bordure-contraste);
}
@media (min-width: 860px) {
  .etape { padding: 2.2rem 1.8rem 0 0; }
}
.etape-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
}
.etape h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.etape p { font-size: var(--t-body); }

/* ---------- 11. SMART EVENT SCORE --------------------------------------- */
.score-band {
  position: relative;
  background: var(--fond-contraste);
  color: var(--sur-contraste);
  overflow: hidden;
}
.score-band::before {
  content: "";
  position: absolute;
  inset: auto -10% -55% 55%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(198, 166, 107, 0.22), rgba(198, 166, 107, 0));
  pointer-events: none;
}
.score-band .container { position: relative; z-index: 1; }

/* La bande a le fond sombre de « .section-nuit » sans en porter la classe :
   ses titres et ses paragraphes gardaient donc leur couleur foncée par défaut,
   invisible sur ce fond. Le « color » déclaré plus haut ne suffit pas, car
   « h2 » et « p » ont chacun une couleur propre, qui l'emporte sur l'héritage. */
.score-band h1, .score-band h2, .score-band h3,
.score-band h4, .score-band .titre-4 { color: var(--sur-contraste); }
.score-band p, .score-band li { color: var(--sur-contraste-doux); }

.score-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.score-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--bordure-contraste);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: rgba(248, 245, 239, 0.85);
}
.score-facts li svg { color: var(--accent); flex: none; }

.orientations { display: grid; gap: 0.75rem; }
.orientation {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.3rem;
  background: rgba(248, 245, 239, 0.05);
  border: 1px solid var(--bordure-contraste);
  border-radius: var(--r-md);
}
.orientation-lettre {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--nuit);
  background: var(--accent);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  font-weight: 600;
}
.orientation strong { display: block; color: var(--sur-contraste); font-size: 0.99rem; font-weight: 600; margin-bottom: 0.2rem; }
.orientation span { font-size: var(--t-small); color: rgba(248, 245, 239, 0.8); line-height: 1.55; }

/* ---------- 12. QUIZ (page Score) --------------------------------------- */
.quiz {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-3);
  padding: clamp(1.6rem, 1.1rem + 2vw, 3rem);
}
/* Diagnostic hébergé à l'extérieur : le cadre s'efface derrière l'application */
.quiz-externe { padding: clamp(0.6rem, 0.4rem + 0.8vw, 1rem); }
.quiz-progress-wrap { margin-bottom: 2rem; }
.quiz-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 0.7rem;
}
.quiz-progress {
  height: 3px;
  background: var(--fond-accent);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.quiz-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.quiz-question { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.15; margin-bottom: 1.6rem; color: var(--texte-fort); }

.quiz-options { display: grid; gap: 0.7rem; }
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  color: var(--texte);
  font-size: var(--t-body);
  line-height: 1.45;
  transition: border-color var(--transition), background-color var(--transition),
    transform var(--transition);
}
.quiz-option:hover {
  border-color: var(--accent);
  background: rgba(198, 166, 107, 0.06);
  transform: translateX(3px);
}
.quiz-option.is-selected { border-color: var(--accent); background: rgba(198, 166, 107, 0.12); }
.quiz-option-marker {
  width: 22px; height: 22px;
  border: 1px solid var(--bordure-appuyee);
  border-radius: 50%;
  flex: none;
  margin-top: 1px;
  display: grid; place-items: center;
  transition: border-color var(--transition), background-color var(--transition);
}
.quiz-option.is-selected .quiz-option-marker { border-color: var(--accent-lisible); background: var(--accent); }
.quiz-option.is-selected .quiz-option-marker::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--fond-contraste);
  border-radius: 50%;
}

.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
.quiz-back {
  background: none;
  border: 0;
  padding: 0.5rem 0;
  color: var(--texte-faible);
  font-size: var(--t-small);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--transition);
}
.quiz-back:hover { color: var(--texte-fort); }
.quiz-back[hidden] { visibility: hidden; display: inline-flex !important; }

.quiz-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(198, 166, 107, 0.14);
  border: 1px solid rgba(198, 166, 107, 0.4);
  color: var(--accent-lisible);
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.quiz-score-visuel {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--serif);
  margin: 1.4rem 0;
}
.quiz-score-visuel b { font-size: 3.2rem; line-height: 1; color: var(--texte-fort); font-weight: 500; }
.quiz-score-visuel span { color: var(--texte-faible); font-family: var(--sans); font-size: 0.9rem; }

/* ---------- 13. FORMULAIRES --------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form-row { display: grid; gap: 1.15rem; }
@media (min-width: 700px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--texte);
  letter-spacing: 0.01em;
}
.field label .optionnel { color: var(--texte-faible); font-weight: 400; }
.field label .requis { color: var(--accent-lisible); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-marquee);
  border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select {
  /* Le chevron est une image : sa couleur est figée dans le SVG et ne suit pas
     « color ». Il lui faut donc sa propre variable, sinon il disparaît sur le
     fond sombre des champs. Voir --chevron-select dans les deux thèmes. */
  background-image: var(--chevron-select);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198, 166, 107, 0.16);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--texte-substitut); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--erreur-texte); }
.field-error {
  font-size: var(--t-small);
  color: var(--erreur-texte);
  display: none;
  align-items: center;
  gap: 0.35rem;
}
.field.has-error .field-error { display: flex; }

/* Précision sous un champ : sert à poser une limite honnête (« cette réponse
   ne vaut pas autorisation »), pas à décorer. */
.field-hint {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--texte-faible);
}

/* Encart d'explication à l'intérieur d'un formulaire. */
.encart-form {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--fond-alt);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
}
.encart-form p { margin: 0; line-height: 1.6; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
}
.field-check input[type="checkbox"] {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent-lisible);
  cursor: pointer;
  padding: 0;
}
.field-check label { font-size: var(--t-small); color: var(--texte-doux); font-weight: 400; line-height: 1.5; }
.field-check label a { border-bottom: 1px solid var(--accent); }
.field-check.has-error { border-color: var(--erreur-texte); }

.form-feedback {
  display: none;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.15rem 1.3rem;
  border-radius: var(--r-md);
  font-size: var(--t-small);
  line-height: 1.55;
}
.form-feedback.is-visible { display: flex; }
.form-feedback.is-success {
  background: var(--succes-fond);
  border: 1px solid var(--succes-bordure);
  color: var(--succes-texte);
}
.form-feedback.is-error {
  background: var(--erreur-fond);
  border: 1px solid var(--erreur-bordure);
  color: var(--erreur-texte);
}
.form-feedback svg { flex: none; margin-top: 2px; }

/* Newsletter inline */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.newsletter-form input {
  flex: 1 1 240px;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(248, 245, 239, 0.25);
  background: rgba(248, 245, 239, 0.06);
  color: var(--sur-contraste);
  font-family: var(--sans);
  font-size: 1rem;
}
.newsletter-form input::placeholder { color: rgba(248, 245, 239, 0.45); }
.newsletter-form input:focus { outline: none; border-color: var(--accent); }

/* ---------- 14. TÉMOIGNAGES --------------------------------------------- */
.temoignage {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  height: 100%;
}
.temoignage-quote {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.temoignage blockquote { margin: 0; font-size: var(--t-body); line-height: 1.65; color: var(--texte-doux); }
.temoignage figcaption {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: var(--t-small);
  color: var(--texte-faible);
}
.temoignage figcaption strong { display: block; color: var(--texte); font-weight: 600; }

.placeholder-note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: rgba(198, 166, 107, 0.09);
  border: 1px dashed rgba(198, 166, 107, 0.55);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--texte-doux);
}
.placeholder-note svg { flex: none; margin-top: 2px; color: var(--accent-lisible); }
.placeholder-note strong { color: var(--accent-lisible); }

.temoignage-vide {
  border-style: dashed;
  border-color: rgba(198, 166, 107, 0.45);
  background: rgba(198, 166, 107, 0.04);
}
.temoignage-vide blockquote { color: var(--texte-faible); font-style: italic; }

/* ---------- 15. RESSOURCES ---------------------------------------------- */
.ressource { overflow: hidden; padding: 0; }
.ressource-cover {
  aspect-ratio: 3 / 2;
  background: linear-gradient(155deg, var(--fond-contraste) 0%, var(--contraste-degrade) 100%);
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow: hidden;
}
.ressource-cover::after {
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  width: 260px; height: 260px;
  background: radial-gradient(closest-side, rgba(198, 166, 107, 0.35), transparent);
}
.ressource-cover-titre {
  position: relative;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.25;
  color: var(--sur-contraste);
  text-align: center;
  z-index: 1;
}
.ressource-cover-marque {
  position: absolute;
  bottom: 1rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  z-index: 1;
}
.ressource-body { padding: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.ressource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.badge {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--bordure);
  color: var(--texte-faible);
}
.badge-gratuit { color: var(--succes-texte); border-color: var(--succes-bordure); background: var(--succes-fond); }
.badge-payant { color: var(--accent-lisible); border-color: rgba(198, 166, 107, 0.45); background: rgba(198, 166, 107, 0.1); }
.badge-bientot { color: var(--texte-faible); border-style: dashed; }

/* ---------- 16. FOOTER -------------------------------------------------- */
.site-footer {
  background: var(--fond-contraste);
  color: rgba(248, 245, 239, 0.72);
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  font-size: var(--t-small);
}
.site-footer a { color: rgba(248, 245, 239, 0.72); transition: color var(--transition); }
.site-footer a:hover { color: var(--accent-doux); }
.site-footer .logo-text strong { color: var(--sur-contraste); }
.site-footer .logo-text em { color: rgba(248, 245, 239, 0.5); }
/* Le pied de page est sombre DANS LES DEUX THÈMES : il lui faut donc la
   plaque crème en permanence, sans quoi le S bleu marine du logo disparaît.
   On ne peut pas se reposer sur « --logo-fond », qui est transparent tant
   que le thème clair est actif. */
.site-footer .logo-mark { background: #f8f5ef; padding: 2px; }

.footer-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } }

.footer-titre {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.footer-liens { display: grid; gap: 0.65rem; }
.footer-brand p { color: rgba(248, 245, 239, 0.72); margin-top: 1.2rem; max-width: 42ch; font-size: var(--t-small); }

.footer-social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--bordure-contraste);
  border-radius: 50%;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}
.footer-social a:hover { border-color: var(--accent); background: rgba(198, 166, 107, 0.12); transform: translateY(-2px); }

.footer-bottom {
  border-top: 1px solid var(--bordure-contraste);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-small);
  color: var(--sur-contraste-faible);
}
/* Sans cette ligne, la mention de copyright reprend la couleur générale des
   paragraphes — sombre — sur le fond sombre du pied de page, et disparaît. */
.footer-bottom p { color: inherit; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }

/* ---------- 17. CTA MOBILE FIXE ----------------------------------------- */
.cta-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--surface-voile-fort);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordure);
  display: flex;
  gap: 0.6rem;
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cta-mobile.is-visible { transform: translateY(0); }
.cta-mobile .btn {
  flex: 1;
  padding: 0.72rem 0.8rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.cta-mobile .btn-outline { flex: 0 0 auto; }
@media (min-width: 1280px) { .cta-mobile { display: none; } }
@media (max-width: 1023px) {
  body.has-sticky-cta { padding-bottom: 78px; }
}
@media (max-width: 359px) {
  .cta-mobile .btn { font-size: var(--t-micro); padding: 0.72rem 0.6rem; }
}

/* ---------- 18. BANDEAU COOKIES ----------------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 120;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-3);
  padding: 1.4rem 1.5rem;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, transform 320ms ease, visibility 320ms;
}
.cookie-banner.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cookie-banner h4, .cookie-banner .titre-4 { margin-bottom: 0.5rem; font-size: 1rem; }
.cookie-banner p { font-size: var(--t-small); line-height: 1.6; }
.cookie-banner .btn-group { margin-top: 1.15rem; gap: 0.6rem; }
.cookie-banner .btn { flex: 1; padding: 0.75rem 1rem; font-size: var(--t-small); }
/* Sur écran large, le bandeau s'étale en barre basse au lieu de former une
   carte haute de près de 300 px : sous sa forme carte, il recouvrait les
   boutons d'appel à l'action de la page d'accueil. La marge de droite laisse
   le bouton de discussion (56 px) accessible. */
@media (min-width: 721px) {
  .cookie-banner {
    right: calc(var(--gutter) + 5.5rem);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titre  actions"
      "texte  actions"
      "lien   actions";
    align-items: center;
    column-gap: 2rem;
    padding: 1.15rem 1.5rem;
  }
  .cookie-banner > h2,
  .cookie-banner > .titre-4 { grid-area: titre; margin-bottom: 0.15rem; }
  .cookie-banner > p:not(.text-small) { grid-area: texte; margin: 0; }
  .cookie-banner > p.text-small { grid-area: lien; margin-top: 0.35rem !important; }
  .cookie-banner > .btn-group { grid-area: actions; margin-top: 0; flex: none; }
  .cookie-banner > .btn-group .btn { flex: none; white-space: nowrap; }
}

@media (max-width: 620px) {
  .cookie-banner { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; max-width: none; }
  body.has-sticky-cta .cookie-banner { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* ---------- 19. PAGE HEADERS (pages internes) --------------------------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 2rem + 3vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background:
    radial-gradient(100% 80% at 80% 0%, var(--halo-hero) 0%, var(--halo-hero-fin) 60%),
    var(--fond-alt);
  border-bottom: 1px solid var(--bordure);
}
.page-hero .display, .page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 60ch; margin-top: 1.4rem; }
.page-hero .btn-group { margin-top: 2rem; }

.fil { display: flex; gap: 0.5rem; align-items: center; font-size: var(--t-micro); color: var(--texte-faible); margin-bottom: 1.4rem; }
.fil a:hover { color: var(--accent-lisible); }
/* Dans le fil d'Ariane, le dernier « span » porte le nom de la page courante :
   c'est un vrai texte, il doit se lire. Seule la barre oblique de séparation,
   qui est décorative (aria-hidden), reste volontairement effacée. */
.fil span { color: var(--texte-doux); }
.fil span[aria-hidden="true"] { color: var(--texte-tenu); }

/* ---------- 20. TABLEAU / DIVERS ---------------------------------------- */
.prose h2 { margin-top: 2.8rem; margin-bottom: 1rem; font-size: 1.65rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.7rem; font-size: 1.2rem; font-family: var(--sans); font-weight: 600; }
.prose p, .prose li { color: var(--texte-doux); font-size: var(--t-body); line-height: 1.8; }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0; display: grid; gap: 0.55rem; }
.prose ul li { position: relative; padding-left: 1.3rem; }
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.68em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.prose a { border-bottom: 1px solid var(--accent); }
.prose strong { color: var(--texte); }
.prose > *:first-child { margin-top: 0; }

.encart {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 1.3rem 1.5rem;
  margin: 1.8rem 0;
}
.encart p { font-size: var(--t-body); }

/* Bloc citation / accroche */
.accroche {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
  line-height: 1.28;
  color: var(--texte-fort);
  letter-spacing: -0.015em;
  max-width: 22ch;
}

/* ---------- 20b. BLOCS ÉDITORIAUX (formats, prestations détaillées) ----- */
.bloc {
  border-top: 1px solid var(--bordure);
  padding-block: clamp(2.4rem, 1.8rem + 2.2vw, 3.8rem);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.bloc:last-of-type { border-bottom: 1px solid var(--bordure); }
.bloc-grid {
  display: grid;
  gap: clamp(1.6rem, 1.1rem + 2vw, 3.2rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .bloc-grid { grid-template-columns: 0.92fr 1.08fr; } }
.bloc-index {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--accent-lisible);
  display: block;
  margin-bottom: 0.7rem;
}
.bloc h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-bottom: 0.9rem; }
.bloc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.3rem;
}
.bloc-meta span {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--texte-faible);
  border: 1px solid var(--bordure);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.8rem;
}
.bloc-sous-titre {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  margin-bottom: 0.8rem;
  font-family: var(--sans);
}

/* Sommaire d'ancres */
.ancres { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ancres a {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-pill);
  color: var(--texte-doux);
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.ancres a:hover { border-color: var(--accent); color: var(--texte-fort); background: rgba(198, 166, 107, 0.08); }

/* Pastille de confirmation (pages merci / 404) */
.icone-succes {
  width: 62px; height: 62px;
  margin: 0 auto 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-lisible);
  background: rgba(198, 166, 107, 0.12);
  border: 1px solid rgba(198, 166, 107, 0.35);
}
.code-erreur {
  font-family: var(--serif);
  font-size: clamp(4.5rem, 3rem + 8vw, 8.5rem);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ---------- 20c. LE PORTAIL DES UNIVERS (page d'accueil) ---------------- */
/* Refonte du 13 septembre 2026. Ce bloc remplace les anciennes cartes
   .card-univers / .univers-carte / .univers-lien / .grid-univers, qui ont
   été supprimées. Vérification faite dans tout le projet avant suppression :
   index.html en était le seul utilisateur, aucune autre page ni aucun script
   n'y faisait référence. En revanche .card-num et .grid-4 servent à d'autres
   pages (seminaires, smart-event, smart-avatar, smart-event-score) : ils
   sont conservés intacts et ne sont PAS utilisés ici.

   DEUX PRINCIPES À NE PAS PERDRE DE VUE SI VOUS Y RETOUCHEZ :

   1. Tout est en CSS. Aucune ligne de JavaScript n'a été ajoutée. Les quatre
      liens sont écrits en dur dans index.html, l'apparition réutilise le
      système « reveal » existant. Script désactivé, la section reste
      entièrement fonctionnelle — seules les animations disparaissent.

   2. Les animations ne touchent QUE « opacity », « transform » et « filter ».
      Aucune ne déclenche de recalcul de mise en page. C'est ce qui permet
      d'avoir du mouvement permanent sans coût de performance mesurable.    */

/* Le halo déborde volontairement de la grille : on le contient ici plutôt
   que de le rogner, sans quoi il ferait apparaître une barre de défilement
   horizontale sur les écrans étroits.                                      */
.section-portail { overflow: hidden; }

/* --- La scène ---------------------------------------------------------- */
/* Sur ordinateur : 3 colonnes sur 2 rangées. Le cœur occupe la colonne du
   milieu sur toute la hauteur, les orbes se placent aux quatre coins.

   Une GRILLE, et non un positionnement absolu : les résumés peuvent grandir
   (zoom à 200 %, police agrandie dans le navigateur, traduction automatique)
   sans jamais venir chevaucher le cercle central. Un placement absolu aurait
   été plus simple à écrire et se serait cassé au premier texte long.       */
.portail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Troisième rangée ajoutée le 17 sept. 2026 pour la cinquième orbe
     (Smart IA™), placée sous le cœur, dans la colonne centrale. */
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: clamp(1.75rem, 0.5rem + 3vw, 3.5rem);
  max-width: 1040px;
  margin-inline: auto;
}

/* L'ordre visuel arrêté : 01 en haut à gauche, 02 en haut à droite,
   03 en bas à gauche, 04 en bas à droite. Il reproduit exactement l'ordre du
   HTML, donc l'ordre de lecture et l'ordre de tabulation coïncident.
   « nth-of-type » compte parmi les <article> : le halo (<span>) et le cœur
   (<div>) ne sont pas comptés.                                            */
.portail-coeur { grid-column: 2; grid-row: 1 / 3; }
.orbe:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.orbe:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.orbe:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.orbe:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.orbe:nth-of-type(5) { grid-column: 2; grid-row: 3; }

/* --- Le halo ----------------------------------------------------------- */
/* Il respire : opacité et échelle, aller-retour de 9 secondes. Assez lent
   pour qu'on le ressente sans le voir bouger.                             */
.portail-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150%, 940px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    rgba(198, 166, 107, 0.24) 0%,
    rgba(198, 166, 107, 0.11) 36%,
    rgba(198, 166, 107, 0) 68%);
  animation: portail-respire 9s ease-in-out infinite;
  transition: filter var(--transition);
}

@keyframes portail-respire {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.97); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.03); }
}

/* Le portail réagit quand on approche d'un univers. On passe par « filter »
   et non par « opacity » : l'opacité est déjà pilotée par l'animation
   ci-dessus, et une animation l'emporte toujours sur une règle ordinaire.
   Purement décoratif : un navigateur sans « :has() » ignore la règle et
   personne ne s'en aperçoit.                                              */
.portail:has(.orbe-lien:hover) .portail-halo,
.portail:has(.orbe-lien:focus-visible) .portail-halo {
  filter: saturate(1.3) brightness(1.18);
}

/* --- Le cercle central ------------------------------------------------- */
/* Il ne bouge JAMAIS au survol : c'est le point fixe de la section.       */
.portail-coeur {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(258px, 26vw, 370px);
  aspect-ratio: 1;
  padding: clamp(1.4rem, 0.8rem + 2vw, 2.4rem);
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle at 50% 36%, var(--surface) 0%, var(--fond-alt) 100%);
  border: 1px solid rgba(198, 166, 107, 0.38);
  box-shadow: var(--ombre-3), inset 0 0 70px -24px rgba(198, 166, 107, 0.55);
}

/* Deux anneaux concentriques, en rotation très lente et en sens inverse
   (90 s et 140 s). À cette vitesse on ne voit pas le mouvement, on le sent.
   C'est ce qui donne la profondeur sans jamais attirer l'œil.             */
.portail-anneau {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.portail-anneau-a {
  inset: clamp(9px, 1.6vw, 18px);
  border: 1px solid rgba(198, 166, 107, 0.26);
  border-top-color: rgba(198, 166, 107, 0.7);
  animation: portail-tourne 90s linear infinite;
}
.portail-anneau-b {
  inset: clamp(20px, 3.4vw, 38px);
  border: 1px dashed rgba(198, 166, 107, 0.16);
  animation: portail-tourne 140s linear infinite reverse;
}

/* L'unique « particule » : un point lumineux accroché à l'anneau, donc
   emporté par sa rotation. Un seul élément, aucun canvas, aucune
   bibliothèque — et rien à recalculer.                                    */
.portail-anneau-a::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(198, 166, 107, 0.6);
}

@keyframes portail-tourne { to { transform: rotate(360deg); } }

/* La largeur du texte dans le cercle. « 22ch » et non une valeur plus étroite :
   l'œilleton « QUATRE UNIVERS » et son filet mesurent 181 px, et à 16ch
   (176 px) il repassait à la ligne sur téléphone. « min(100%, …) » l'empêche
   de déborder du cercle sur les petits diamètres.

   Un texte large au MILIEU d'un cercle ne pose pas de problème : c'est à cet
   endroit que la corde est la plus longue. Seules les lignes éloignées du
   centre doivent être courtes, et le bloc est trop bas pour y arriver.     */
.portail-texte {
  position: relative;
  z-index: 1;
  max-width: min(100%, 22ch);
}
.portail-texte .eyebrow { margin-bottom: 0.55rem; }

/* Le titre est volontairement plus petit que le --t-h2 des autres sections :
   dans un cercle, la largeur utile est bien inférieure à la largeur totale,
   et un titre à 3 rem y déborderait ou le ferait grossir démesurément.    */
.portail-coeur h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);
  line-height: 1.14;
  text-wrap: balance;
}

/* --- Les orbes --------------------------------------------------------- */
/* Chaque orbe est UN SEUL lien qui enveloppe le disque, le nom et le résumé.
   Plus besoin du lien « étiré » de l'ancienne carte : toute la cellule est
   naturellement cliquable, et le contour de focus épouse exactement la zone
   cliquable au lieu de s'en écarter.                                      */
/* « align-self: start » est indispensable : la grille centre ses éléments, or
   les quatre résumés n'ont pas la même hauteur (« Clarifier votre projet et
   identifier la prochaine étape. » passe à la ligne, « Donner vie à vos
   messages en vidéo. » non). Sans cette ligne, les deux disques d'une même
   rangée se retrouvaient décalés de 12 px sur téléphone — assez peu pour ne
   pas sauter aux yeux, assez pour que la constellation paraisse de travers.
   Le cercle central, lui, reste centré : la règle ne vise que les orbes.   */
.orbe {
  position: relative;
  z-index: 1;
  align-self: start;
  width: 100%;
  max-width: 264px;
}

.orbe-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding: 0.5rem 0.4rem 0.9rem;
  border-radius: var(--r-lg);
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* --- La bulle ---------------------------------------------------------- */
/* Généreuse, et elle porte le nom de l'univers : c'est elle le choix, pas la
   légende. Le volume tient à quatre choses superposées, aucune image :
     1. un dégradé radial décentré vers le haut — la lumière vient d'en haut ;
     2. un reflet elliptique (::before) dans le quart supérieur ;
     3. une ombre portée diffuse, très étalée et peu opaque ;
     4. un liseré champagne, plus une ombre interne basse couleur champagne
        qui simule la lumière renvoyée par le sol.

   « width: min(100%, clamp(...)) » et non « clamp(...) » seul : à 320 px de
   large, la colonne ne fait que 132 px et une bulle de 148 px en aurait
   débordé. Le « min(100%, …) » la laisse rétrécir avec sa colonne.        */
.orbe-bulle {
  /* Le contour au repos passe par une variable : le thème sombre en change
     la valeur, et la règle « pas de survol » plus bas doit pouvoir y
     revenir sans réécrire deux fois la même couleur.                      */
  --bulle-bordure: rgba(198, 166, 107, 0.45);
  position: relative;
  display: grid;
  place-content: center;
  gap: 0.3rem;
  width: min(100%, clamp(148px, 16.5vw, 206px));
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 20%,
    var(--surface) 0%, var(--fond-alt) 58%, var(--fond-accent) 100%);
  border: 1px solid var(--bulle-bordure);
  box-shadow:
    0 20px 40px -20px rgba(16, 24, 40, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -18px 32px -24px rgba(198, 166, 107, 0.75);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color var(--transition);
}

/* Le reflet. Il occupe toute la bulle et c'est le dégradé lui-même qui
   s'éteint, dans TOUTES les directions, avant d'atteindre le bord.
   Une ellipse plus petite remplie d'un dégradé vertical — la version
   précédente — laissait une arête nette sur ses côtés et sous son bord
   inférieur : en thème sombre on ne voyait plus un reflet mais une calotte
   grise rapportée. Un dégradé radial n'a pas de bord du tout.             */
.orbe-bulle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 60% 40% at 50% 15%,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.26) 46%,
    rgba(255, 255, 255, 0) 78%);
  pointer-events: none;
}

/* En thème sombre, le même reflet à pleine force ferait une bulle laiteuse
   posée sur du bleu nuit. On le réduit au strict éclat.                   */
[data-theme="sombre"] .orbe-bulle::before { opacity: 0.3; }

/* Sur bleu nuit, un champagne à 45 % se mélange au fond et vire au gris
   argent : le contour perd sa couleur. On le remonte pour qu'il reste
   identifiable comme champagne dans les deux thèmes.                      */
[data-theme="sombre"] .orbe-bulle { --bulle-bordure: rgba(198, 166, 107, 0.58); }

/* Le numéro reste un repère, pas un titre : petit, espacé, en retrait.
   En linéale, et non en romain comme le reste de la section : Cormorant
   Garamond dessine des chiffres elzéviriens, dont le zéro descend sous la
   ligne et le 1 ressemble à un I majuscule. « 01 » s'y lisait « o ɪ ».
   C'est le seul endroit du site où l'on compose des chiffres isolés.      */
.orbe-num {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--accent-lisible);
  opacity: 0.85;
}

/* Le nom est DANS la bulle. Dans un cercle, la largeur utile au niveau du
   texte vaut environ 70 % du diamètre : « Smart Séminaire™ », le plus long,
   y passe sur deux lignes. C'est pour cela que la bulle est généreuse.    */
.orbe-nom {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.85rem + 0.55vw, 1.32rem);
  line-height: 1.16;
  color: var(--texte-fort);
  text-wrap: balance;
}

/* Le résumé est TOUJOURS visible, ordinateur comme téléphone. Un texte
   réservé au survol est un texte qui n'existe pas au doigt.               */
.orbe-resume {
  max-width: 25ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--texte-doux);
  text-wrap: pretty;
}

/* Survol ET focus clavier : exactement le même rendu. Sans la seconde
   moitié du sélecteur, la navigation au clavier n'aurait aucun retour.
   La bulle se SOULÈVE (translateY) plutôt qu'elle ne grossit : l'ombre
   s'étale en même temps, et c'est l'écart entre l'objet et son ombre qui
   fait lire la hauteur.                                                   */
.orbe-lien:hover .orbe-bulle,
.orbe-lien:focus-visible .orbe-bulle {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow:
    0 34px 54px -22px rgba(16, 24, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -18px 32px -24px rgba(198, 166, 107, 0.8),
    0 0 0 6px rgba(198, 166, 107, 0.1);
}

/* L'appui. Volontairement bref (110 ms) et léger : la bulle se comprime
   sous le doigt, puis le lien part IMMÉDIATEMENT — rien n'attend la fin de
   l'animation, il n'y a aucun JavaScript pour retarder la navigation.
   Sur téléphone, c'est ce retour-là qui remplace le survol.               */
.orbe-lien:active .orbe-bulle {
  transform: translateY(-1px) scale(0.965);
  box-shadow:
    0 10px 20px -14px rgba(16, 24, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -10px 24px -20px rgba(198, 166, 107, 0.7);
  transition-duration: 110ms;
}

/* Le contour de focus doit rester franchement visible : c'est le seul
   repère de la personne qui navigue au clavier.                           */
.orbe-lien:focus-visible {
  outline: 2px solid var(--accent-lisible);
  outline-offset: 4px;
}

/* Le trait de lumière qui relie l'orbe au portail. Ordinateur seulement :
   en dessous, le cœur passe au-dessus des orbes et le trait n'aurait plus
   aucun sens.                                                             */
@media (min-width: 1024px) {
  .orbe::after {
    content: "";
    position: absolute;
    /* Hauteur du haut de l'orbe jusqu'au centre de la bulle : le retrait
       supérieur du lien (0,5 rem) plus la moitié du diamètre. La bulle est
       carrée (aspect-ratio : 1), sa hauteur est donc sa largeur. À revoir si
       l'un de ces deux chiffres change.                                     */
    top: calc(0.5rem + clamp(148px, 16.5vw, 206px) / 2);
    width: clamp(26px, 4vw, 60px);
    height: 1px;
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  .orbe:nth-of-type(1)::after,
  .orbe:nth-of-type(3)::after {
    left: 100%;
    background: linear-gradient(to right, var(--accent), transparent);
  }
  .orbe:nth-of-type(2)::after,
  .orbe:nth-of-type(4)::after {
    right: 100%;
    background: linear-gradient(to left, var(--accent), transparent);
  }
  .orbe:nth-of-type(5)::after {
    /* Cinquième orbe : le trait monte vers le cœur, au lieu d'aller sur le
       côté. Il part du bord supérieur de l'orbe, centré. */
    top: auto;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: clamp(26px, 3vw, 44px);
    background: linear-gradient(to top, var(--accent), transparent);
  }
  .orbe:hover::after,
  .orbe:focus-within::after { opacity: 1; }
}

/* Sur écran tactile il n'y a pas de survol. Les navigateurs mobiles
   appliquent pourtant « :hover » au moment de la frappe et le laissent collé
   jusqu'au geste suivant : la bulle resterait soulevée après le retour en
   arrière. On annule donc le soulèvement…                                  */
@media (hover: none) {
  .orbe-lien:hover .orbe-bulle {
    transform: none;
    box-shadow:
      0 20px 40px -20px rgba(16, 24, 40, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -18px 32px -24px rgba(198, 166, 107, 0.75);
    border-color: var(--bulle-bordure);
  }

  /* …mais surtout pas l'enfoncement. C'est la sensation de pression au
     toucher, et elle doit survivre à la règle ci-dessus : à spécificité
     égale, seule la dernière l'emporte, d'où cette répétition assumée.
     Rien ici ne retarde l'ouverture du lien — il n'y a aucun JavaScript sur
     cette section, le navigateur suit le lien dès le relâchement.          */
  .orbe-lien:active .orbe-bulle {
    transform: translateY(-1px) scale(0.965);
    box-shadow:
      0 10px 20px -14px rgba(16, 24, 40, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -10px 24px -20px rgba(198, 166, 107, 0.7);
  }
}

/* --- Tablette : le cœur passe au-dessus, les orbes en 2 × 2 ------------- */
/* La constellation est impossible sous 1024 px : soit le cercle devient
   minuscule, soit les orbes se chevauchent. On change donc de disposition
   plutôt que de comprimer celle-ci. L'ordre de lecture est préservé :
   01 · 02 puis 03 · 04.                                                   */
@media (max-width: 1023px) {
  .portail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    gap: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1rem, 0.5rem + 2vw, 2rem);
  }
  .portail-coeur { grid-column: 1 / -1; grid-row: 1; }
  .orbe:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .orbe:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .orbe:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .orbe:nth-of-type(4) { grid-column: 2; grid-row: 3; }
  /* La cinquième occupe seule la quatrième rangée, centrée sur les deux
     colonnes : l'ordre de lecture reste 01 · 02, 03 · 04, puis 05. */
  .orbe:nth-of-type(5) { grid-column: 1 / -1; grid-row: 4; }
}

/* --- Téléphone --------------------------------------------------------- */
@media (max-width: 560px) {
  .portail-coeur { width: min(84vw, 296px); }

  /* La bulle n'est volontairement pas rapetissée ici : sa largeur vaut déjà
     « min(100%, …) », elle s'ajuste donc d'elle-même à la colonne, jusqu'à
     320 px de large. La réduire davantage rendrait « Smart Séminaire™ »
     illisible à l'intérieur.                                               */
  .orbe-resume { font-size: var(--t-small); }

  /* Une animation permanente empêche le processeur graphique de se rendormir
     et se paie en autonomie. Sur téléphone on arrête donc les anneaux ; le
     halo, lui, est un simple fondu et ne coûte quasiment rien.            */
  .portail-anneau { animation: none; }
}

/* ---------- 20d. ACCÈS RAPIDES ------------------------------------------ */
.acces-rapides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acces-rapides a {
  display: block;
  height: 100%;
  padding: 1.15rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}

.acces-rapides a:hover,
.acces-rapides a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(198, 166, 107, 0.55);
  box-shadow: var(--ombre-1);
}

.acces-titre {
  display: block;
  font-weight: 550;
  margin-bottom: 0.3rem;
}

.acces-titre::after {
  content: " \2192";
  color: var(--accent);
}

.acces-detail {
  display: block;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--texte-faible);
}

/* ---------- 20e. LECTEUR VIDÉO ------------------------------------------ */
/* Aucun de ces styles ne s'applique tant qu'aucune vidéo n'est configurée :
   main.js ne construit le lecteur que si une source existe, et retire
   sinon la section entière du document. Pas de cadre vide possible.       */
.video-cadre {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-2);
  background: var(--fond-contraste);
}

/* Format 16:9 tenu à toute largeur, sans calcul en JavaScript. */
.video-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Format vertical (9:16). C'est celui des vidéos filmées au téléphone et de
   tout ce que YouTube publie en « Short ». Deux réglages, pas un seul :
     — le rapport, sans quoi la vidéo s'affiche au milieu de deux larges
       bandes noires et le visage devient minuscule ;
     — surtout, une largeur plafonnée. Une verticale étalée sur les 940 px
       du cadre paysage occuperait 1 670 px de haut, soit plusieurs écrans
       pour une seule vidéo : on ne verrait jamais le lecteur en entier.
   380 px correspond à la largeur d'un téléphone : c'est la taille à laquelle
   ces vidéos ont été pensées, et elle tient dans la hauteur d'un écran. */
.video-ratio-portrait { aspect-ratio: 9 / 16; }
.video-cadre-portrait { max-width: 380px; }

.video-ratio > video,
.video-ratio > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--fond-contraste);
}

.video-legende {
  margin: 1rem auto 0;
  max-width: 940px;
  font-size: var(--t-small);
  color: var(--texte-faible);
  text-align: center;
}

/* Galerie d'exemples */
.video-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 1.4rem;
  justify-content: center;
}

/* Une vignette verticale ne doit pas s'élargir pour remplir sa colonne :
   « auto-fit » donne toute la largeur disponible quand il n'y a qu'un ou
   deux exemples, et un 9:16 étalé sur 1 200 px ferait 2 100 px de haut. */
.video-vignette-portrait {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}

/* Galerie entièrement verticale : on quitte la grille. Elle partage la
   largeur en colonnes égales, or une vignette verticale est plafonnée à
   380 px : elle flotte alors au milieu d'une colonne bien plus large, et
   deux vidéos se retrouvent séparées par deux cents pixels de vide.
   En alignement centré, elles restent côte à côte, à l'écart habituel,
   et passent l'une sous l'autre quand l'écran devient trop étroit.       */
.video-galerie-portrait {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.video-galerie-portrait .video-vignette-portrait {
  flex: 0 1 380px;
  margin: 0;
}

.video-vignette {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}

.video-vignette .video-ratio { border-radius: 0; }

.video-vignette-corps { padding: 1.15rem 1.3rem 1.4rem; }
.video-vignette-corps h3 { font-size: var(--t-h4); margin-bottom: 0.35rem; }
.video-vignette-corps p { font-size: var(--t-small); margin: 0; }

.video-categorie {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-lisible);
  background: rgba(198, 166, 107, 0.12);
  border-radius: 999px;
}

/* ---------- 20f. GRILLE TARIFAIRE SMART AVATAR -------------------------- */
/* « mention » sous le prix, et les caractéristiques optionnelles (durée,
   révisions, formats) qui n'apparaissent que si elles sont renseignées
   dans config.js.                                                         */
.prix-mention {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--texte-faible);
}

.prix-details {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  font-size: var(--t-small);
}

.prix-details li { display: flex; gap: 0.5rem; }
.prix-details li::before { content: "\2022"; color: var(--accent); }

.tarifs-note {
  max-width: 760px;
  margin: 2rem auto 0;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--texte-faible);
  text-align: center;
}

/* ---------- 20g. INSPIRATIONS SMART EVENT™ ------------------------------ *
   La sélection éditoriale de lieux et de formats de la page Smart Event.
   Le contenu est construit par assets/js/inspirations.js à partir de
   assets/js/inspirations-donnees.js.

   Parti pris : la photo occupe la moitié haute de la carte et rien ne vient
   la découper. Une vignette de 120 px bordée de trois lignes de prix, c'est
   un comparateur. Ici, l'image doit donner envie avant que le texte ne
   renseigne. D'où des cartes hautes, très aérées, deux par rangée sur écran
   large plutôt que trois : on parcourt une sélection, on ne compare pas.
   ------------------------------------------------------------------------ */
.inspi-section { background: var(--fond-alt); }

.inspi-tete { max-width: 760px; }
.inspi-soustitre {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.3;
  margin-top: 0.9rem;
}
.inspi-intro { margin-top: 1.2rem; }

/* --- Les filtres --- */
.inspi-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
}
.inspi-filtre-groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.inspi-filtre-nom {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-right: 0.35rem;
}
.inspi-puce {
  border: 1px solid var(--bordure-marquee);
  background: var(--surface);
  color: var(--texte-doux);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.05rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
    background-color var(--transition);
}
.inspi-puce:hover { color: var(--texte-fort); border-color: var(--bordure-appuyee); }
.inspi-puce[aria-pressed="true"] {
  background: var(--action-fond);
  border-color: var(--action-fond);
  color: var(--action-texte);
  font-weight: 500;
}

.inspi-compteur { margin-bottom: 1.8rem; }

/* --- La grille --- */
.inspi-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.6rem);
}
@media (min-width: 1100px) {
  .inspi-grille { grid-template-columns: repeat(3, 1fr); }
}

.inspi-carte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-1);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}
@media (hover: hover) {
  .inspi-carte:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-3);
    border-color: rgba(198, 166, 107, 0.45);
  }
  .inspi-carte:hover .inspi-media img { transform: scale(1.045); }
}
.inspi-carte:focus-within {
  border-color: var(--accent-lisible);
  box-shadow: var(--ombre-2);
}

.inspi-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fond-accent);
}
.inspi-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Photo absente ou introuvable : un aplat de marque, jamais une icône cassée. */
.inspi-media.is-sans-photo {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, var(--fond-alt)),
    var(--fond-accent));
}

.inspi-categorie,
.inspi-marqueur {
  position: absolute;
  top: 1rem;
  border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem;
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  backdrop-filter: blur(6px);
}
.inspi-categorie {
  left: 1rem;
  background: var(--nuit-90);
  color: var(--ivoire);
}
/* Les deux pastilles sont posées sur une photo, jamais sur le fond du thème :
   elles utilisent donc la palette de marque, identique en clair et en sombre.
   Les inverser avec le thème les rendrait illisibles sur une image claire. */
.inspi-marqueur {
  right: 1rem;
  background: var(--blanc-chaud);
  color: var(--anthracite-70);
  border: 1px solid var(--trait);
}

.inspi-corps {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.7rem 0.6rem;
  flex: 1 1 auto;
}
.inspi-titre {
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--texte-fort);
  margin-bottom: 0.35rem;
}
.inspi-lieu {
  font-size: var(--t-small);
  color: var(--accent-lisible);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.inspi-accroche {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--texte-doux);
  margin-bottom: 1.1rem;
}

.inspi-faits {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.3rem;
}
.inspi-faits li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--texte-doux);
}
.inspi-faits svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--accent-lisible);
}

.inspi-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1.3rem 1.7rem 1.6rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--bordure);
}
.inspi-tarif {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texte-fort);
  line-height: 1.3;
}
/* « Tarif sur demande » n'est pas un prix : il ne doit pas en avoir l'allure. */
.inspi-tarif--devis {
  font-weight: 500;
  font-size: var(--t-small);
  color: var(--texte-faible);
}
.inspi-tarif-maj {
  display: block;
  font-size: var(--t-micro);
  font-weight: 400;
  color: var(--texte-faible);
  margin-top: 0.2rem;
}
.inspi-bouton { flex: none; }

.inspi-vide {
  grid-column: 1 / -1;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--bordure-appuyee);
  border-radius: var(--r-lg);
  color: var(--texte-faible);
}

.inspi-plus { display: flex; justify-content: center; margin-top: 2.5rem; }

.inspi-mention {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
  line-height: 1.6;
}

/* --- Les trois niveaux --- */
.inspi-niveaux { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.inspi-niveaux .section-head { margin-inline: auto; }
.inspi-niveaux h3 { font-size: var(--t-h3); line-height: 1.25; }
.inspi-niveaux .titre-4 { margin-top: 0.4rem; }

/* --- Le rappel : le lieu n'est qu'une composante --- */
.inspi-rappel {
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.inspi-rappel p { max-width: 62ch; margin-top: 0.7rem; }
.inspi-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.6rem 1.4rem;
  margin-top: 1.6rem;
}
.inspi-prestations li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-small);
  color: var(--texte-doux);
}
.inspi-prestations svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent-lisible);
}

/* --- Le bloc final --- */
.inspi-final {
  max-width: 680px;
  margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) auto 0;
  text-align: center;
}
.inspi-final h3 { font-size: var(--t-h3); line-height: 1.25; }
.inspi-final .lead { margin-top: 1.1rem; }
.inspi-final .btn-group { margin-top: 2rem; }

/* --- L'aperçu du haut de page ------------------------------------------ *
   Trois ou quatre grandes cartes juste après l'accroche. Sur grand écran,
   deux par rangée pour que la photo reste grande. Sur téléphone, un ruban
   horizontal : une carte occupe presque tout l'écran, la suivante dépasse
   un peu pour inviter à glisser, et chaque geste s'arrête sur une carte.
   ------------------------------------------------------------------------ */
.inspi-apercu { padding-top: clamp(2.6rem, 2rem + 2vw, 4rem); }
.inspi-apercu-tete { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.inspi-transition {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  line-height: 1.35;
  color: var(--accent-lisible);
  margin-bottom: 0.8rem;
}

.inspi-piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 340px);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Le ruban déborde de la marge pour que la carte suivante se devine. */
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.4rem var(--gutter) 1.2rem;
}
.inspi-piste::-webkit-scrollbar { display: none; }
.inspi-piste > .inspi-carte { scroll-snap-align: start; }

/* Les cartes du ruban ne se soulèvent pas au survol : sur un écran tactile,
   ce mouvement fait croire que la carte a été touchée. */
.inspi-carte--apercu .inspi-media { aspect-ratio: 5 / 4; }
.inspi-carte--apercu .inspi-corps { padding-bottom: 0.4rem; }
.inspi-carte--apercu .inspi-faits { margin-top: 0.9rem; }
.inspi-carte--apercu .inspi-pied { margin-top: 0.9rem; }
.inspi-lien-carte {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--accent-lisible);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(198, 166, 107, 0.5);
}
.inspi-lien-carte:hover { color: var(--texte-fort); text-decoration-color: currentColor; }

.inspi-indication {
  text-align: center;
  margin-top: 0.2rem;
}

.inspi-positionnement {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  line-height: 1.35;
  text-align: center;
  max-width: 640px;
  margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) auto 0;
  color: var(--texte-fort);
}
.inspi-apercu-boutons { margin-top: 1.8rem; }

@media (min-width: 760px) {
  .inspi-piste {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    gap: clamp(1.5rem, 1rem + 2vw, 2.6rem);
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    scroll-snap-type: none;
  }
  .inspi-indication { display: none; }
}

@media (max-width: 520px) {
  .inspi-corps { padding: 1.35rem 1.35rem 0.5rem; }
  .inspi-pied { padding: 1.2rem 1.35rem 1.45rem; }
  .inspi-bouton { width: 100%; justify-content: center; }
  .inspi-filtre-nom { width: 100%; margin-bottom: 0.15rem; }
}

/* ---------- 21. ANIMATIONS ---------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .quiz-option:hover { transform: none; }

  /* Le portail des univers. La règle générique ci-dessus ramène déjà les
     animations à 0,01 ms, mais elle les laisse se terminer sur leur dernière
     image : le halo se figerait alors à sa valeur la plus faible. On les
     coupe donc explicitement, et on rétablit le halo à une opacité franche.
     Le survol reste signalé — par la couleur du contour et par l'ombre,
     plus par le déplacement.                                               */
  .portail-halo { animation: none; opacity: 0.8; }
  .portail-anneau { animation: none; }
  .orbe-lien:hover .orbe-bulle,
  .orbe-lien:focus-visible .orbe-bulle,
  .orbe-lien:active .orbe-bulle { transform: none; }
}

/* ---------- 22. IMPRESSION ---------------------------------------------- *
   On imprime toujours en clair, même si le visiteur consulte le site en
   thème sombre : un aplat bleu nuit vide une cartouche et rend le document
   illisible en photocopie.

   Le sélecteur « :root, [data-theme="sombre"] » n'est pas une coquetterie :
   sans lui, le bloc sombre continuerait de l'emporter à l'impression, car
   il est plus spécifique que « :root » seul.
   ----------------------------------------------------------------------- */
@media print {
  :root,
  [data-theme="sombre"] {
    color-scheme: light;
    --fond: #ffffff;
    --fond-alt: #ffffff;
    --fond-accent: #ffffff;
    --fond-contraste: #ffffff;
    --surface: #ffffff;
    --surface-voile: #ffffff;
    --surface-voile-fort: #ffffff;
    --surface-creuse: transparent;
    --texte: #000000;
    --texte-fort: #000000;
    --texte-doux: #333333;
    --texte-faible: #444444;
    --texte-tenu: #666666;
    --texte-substitut: #666666;
    --sur-contraste: #000000;
    --sur-contraste-doux: #333333;
    --sur-contraste-faible: #555555;
    /* Sur papier blanc, le chevron doit redevenir noir. */
    --chevron-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --bordure: rgba(0, 0, 0, 0.25);
    --bordure-marquee: rgba(0, 0, 0, 0.35);
    --bordure-appuyee: rgba(0, 0, 0, 0.45);
    --bordure-contraste: rgba(0, 0, 0, 0.25);
    --accent-lisible: #7a5f2c;
    --action-fond: #ffffff;
    --action-fond-survol: #ffffff;
    --action-texte: #000000;
    /* À l'impression le papier est blanc : aucune plaque n'est nécessaire
       derrière le logo, et un aplat imprimé pour rien vide la cartouche. */
    --logo-fond: transparent;
    --logo-marge: 0px;
    --succes-fond: transparent;
    --erreur-fond: transparent;
    --ombre-1: none;
    --ombre-2: none;
    --ombre-3: none;
    --ombre-entete: none;
    --halo-hero: transparent;
    --halo-hero-fin: transparent;
    --contraste-degrade: #ffffff;
  }
  .site-header, .cta-mobile, .cookie-banner, .site-footer,
  .theme-choix { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* Finitions visuelles — septembre 2026. Aucun changement de parcours. */
@media screen {
  .hero .display { font-size: clamp(2.65rem, 4.7vw, 4.8rem); line-height: 1.04; letter-spacing: -.035em; max-width: 16ch; }
  .hero-sub { font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.75; color: var(--texte-doux); }
  .hero-note { max-width: 43ch; line-height: 1.65; }
  .hero .media { border-radius: 48% 48% 1.5rem 1.5rem; }
  .hero .media-frame::before { border-radius: 48% 48% 1.5rem 1.5rem; opacity: .5; inset: 12px -12px -12px 12px; }
  .btn { border-radius: 999px; }
  .btn-primary { box-shadow: 0 8px 22px -15px var(--texte-fort); }
  .bandeau { padding-block: 1.25rem; }
  .bandeau-liste { row-gap: .7rem; }
  .page-hero { border-bottom: 1px solid var(--bordure); }
  .section-portail { padding-block: clamp(4rem, 7vw, 7rem); background: radial-gradient(ellipse at 50% 48%, var(--fond-accent), transparent 65%), var(--fond); }
  .portail { max-width: 1100px; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 2.5rem; }
  .portail-coeur { width: clamp(250px, 25vw, 330px); background: transparent; border-color: transparent; box-shadow: none; }
  .portail-coeur h2 { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.08; letter-spacing: -.025em; }
  .portail-texte .eyebrow { font-size: .65rem; letter-spacing: .22em; margin-bottom: 1rem; }
  .portail-texte .eyebrow::before { display: none; }
  .portail-anneau { opacity: .45; }
  .portail-halo { animation: none; opacity: .5; }
  .orbe { --orbe-teinte: #cfd9c9; max-width: 285px; }
  .orbe:nth-of-type(2) { --orbe-teinte: #d7c29d; }
  .orbe:nth-of-type(3) { --orbe-teinte: #c7d6ce; }
  .orbe:nth-of-type(4) { --orbe-teinte: #bdcddd; }
  .orbe:nth-of-type(5) { --orbe-teinte: #d8c8d9; }
  .orbe-lien { gap: 1.25rem; padding: .5rem .5rem 1rem; }
  .orbe-bulle { width: min(100%, 218px); gap: .7rem; padding: 1.1rem; border-color: color-mix(in srgb, var(--orbe-teinte) 70%, var(--surface)); background: radial-gradient(circle at 30% 22%, var(--surface) 0%, color-mix(in srgb, var(--orbe-teinte) 22%, var(--surface)) 48%, color-mix(in srgb, var(--orbe-teinte) 60%, var(--surface)) 100%); box-shadow: inset 2px 3px 5px #ffffff80, inset -6px -9px 22px #1018280b, 0 20px 35px -24px #10182870; }
  .orbe-bulle::before { inset: 8%; background: radial-gradient(ellipse at 32% 20%, #ffffff70, transparent 56%); }
  .orbe-bulle::after { content: '↗'; position: absolute; right: 18%; bottom: 16%; font-family: var(--sans); color: var(--texte-fort); font-size: 1rem; opacity: .55; }
  .orbe-num { color: var(--texte-doux); font-size: .65rem; letter-spacing: .2em; }
  .orbe-nom { font-size: clamp(1.15rem, 1.7vw, 1.55rem); max-width: 9ch; line-height: 1.12; }
  .orbe-resume { max-width: 25ch; font-size: .88rem; line-height: 1.65; }
  .orbe::after { display: none; }
  [data-theme="sombre"] .orbe-bulle { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--orbe-teinte) 23%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--orbe-teinte) 45%, var(--surface)); box-shadow: inset 1px 1px 2px #ffffff20, inset -4px -6px 20px #00000025, 0 22px 38px -22px #00000080; }
  [data-theme="sombre"] .orbe-bulle::before { opacity: .18; }
  @media (hover: hover) {
    .orbe-lien:hover .orbe-bulle { transform: translateY(-7px) scale(1.025); }
  }
  .orbe-lien:active .orbe-bulle { transform: scale(.97); }
  @media (max-width: 1023px) {
    .portail { max-width: 620px; }
    .portail-coeur { width: 260px; }
    .orbe-bulle { width: min(100%, 210px); }
  }
  @media (max-width: 560px) {
    .hero .display { font-size: clamp(2.4rem, 10vw, 3.4rem); }
    .hero-grid { gap: 2.4rem; }
    .hero .media-frame { width: 85%; margin-inline: auto; }
    .portail { column-gap: .65rem; row-gap: 1.25rem; }
    .portail-coeur { width: 228px; }
    .portail-coeur h2 { font-size: 2rem; }
    .orbe-lien { padding-inline: .15rem; gap: .9rem; }
    .orbe-bulle { padding: .65rem; gap: .4rem; }
    .orbe-nom { font-size: clamp(1.04rem, 4.4vw, 1.35rem); }
    .orbe-resume { font-size: .8rem; line-height: 1.55; }
    .orbe-bulle::after { font-size: .8rem; bottom: 12%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .orbe-lien:hover .orbe-bulle, .orbe-lien:active .orbe-bulle { transform: none; }
  }
}

/* ============================================================
   FAQ — blocs dépliables (17 septembre 2026)
   Utilise <details>/<summary> : fonctionne sans JavaScript, se plie et se
   déplie tout seul, et reste lisible par les moteurs de recherche.
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: 0.75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq details[open] { border-color: var(--accent); box-shadow: var(--ombre-1); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.3;
  color: var(--texte-fort);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.9rem; height: 0.9rem;
  margin-top: 0.35rem;
  border-right: 2px solid var(--accent-lisible);
  border-bottom: 2px solid var(--accent-lisible);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 0.6rem; }
.faq summary:hover { color: var(--accent-lisible); }
.faq summary:focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 2px; border-radius: var(--r-md); }
.faq-corps { padding: 0 1.35rem 1.35rem; }
.faq-corps p { margin-bottom: 0.8rem; }
.faq-corps p:last-child { margin-bottom: 0; }
.faq-corps ul { margin: 0.4rem 0 0.8rem 1.2rem; color: var(--texte-doux); }
.faq-corps li { margin-bottom: 0.3rem; }
.faq-corps .exemple {
  border-left: 3px solid var(--accent);
  padding: 0.6rem 1rem;
  margin: 0.8rem 0;
  background: var(--fond-alt);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--texte-fort);
  font-style: italic;
}
.faq-groupe { margin-top: 2.75rem; }
.faq-groupe:first-of-type { margin-top: 0; }
.faq-groupe > h2 { font-size: var(--t-h3); margin-bottom: 1.1rem; }

/* =========================================================================
   NOUVELLE DIRECTION VISUELLE DE L'ACCUEIL — 17 SEPTEMBRE 2026
   -------------------------------------------------------------------------
   Rythme demandé par Léa : ouverture large, grands titres, textes courts,
   boutons visibles, grands blocs qui alternent texte et visuel, cartes de
   services régulières.

   Tout ce qui suit est AJOUTÉ : aucune règle existante n'est modifiée. Les
   classes ci-dessous ne sont utilisées que par les blocs nouveaux ou refondus
   (accueil, Smart IA™, Smart Avatar™). Les autres pages gardent exactement
   l'apparence qu'elles avaient.
   ========================================================================= */

/* ---------- Cartes des cinq univers -------------------------------------
   Remplacent le portail d'orbes sur l'accueil. Comme les orbes : un seul
   <a> par univers, écrit en dur, qui fonctionne sans JavaScript, et dont le
   contour de focus épouse la zone cliquable. Le portail reste dans la
   feuille de style : il n'est plus utilisé par l'accueil, mais rien ne le
   casse si une autre page s'en sert. */
.univers-cartes {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .univers-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .univers-cartes { grid-template-columns: repeat(3, 1fr); } }

.univers-carte { display: flex; }

.univers-lien {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  padding: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.univers-lien:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
}
.univers-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.univers-num {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--accent-lisible);
}
.univers-nom { font-family: var(--serif); font-size: clamp(1.32rem, 1.2rem + 0.5vw, 1.6rem); line-height: 1.2; }
.univers-resume { font-size: var(--t-body); color: var(--texte-doux); }
.univers-fleche {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-lisible);
}
.univers-lien:hover .univers-fleche { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mosaïque de photos (séminaires et événements) ---------------- */
.duo-visuel {
  display: grid;
  gap: clamp(0.7rem, 0.5rem + 0.6vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}
.duo-visuel .media-frame { margin: 0; }
.duo-visuel > *:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .duo-visuel > *:first-child { grid-column: auto; grid-row: span 2; }
  /* La grande photo remplit les deux lignes, comme son cadre. */
  .duo-visuel > .media-frame:first-child > .media {
    height: 100%;
    aspect-ratio: auto;
  }
  .duo-visuel > .media-frame:first-child > .media > img {
    position: absolute;
    inset: 0;
  }
}

/* ---------- Méthode en trois temps -------------------------------------- */
@media (min-width: 860px) {
  .etapes--trois { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Bloc de démonstration MIA ----------------------------------- */
/* Le portrait large de MIA n'apparaît qu'une fois par page : ici et sur la
   page Smart Avatar™. Ailleurs, on se contente du petit jeton rond. */
.mia-cadre {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}
.mia-cadre .media-frame { margin: 0; }
.mia-cadre .mia-jeton {
  position: relative;
  margin: -1.6rem auto 0;
  display: flex;
  width: max-content;
  max-width: 100%;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.16);
}

/* Sur les très petits écrans, le jeton passe sous l'image sans la chevaucher
   et ne masque donc jamais un bouton. */
@media (max-width: 420px) {
  .mia-cadre .mia-jeton { margin-top: 0.9rem; }
}

/* ---------- Preuve / démonstrations disponibles -------------------------- */
.preuve-liste {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- Animations discrètes ----------------------------------------
   « .reveal » gère déjà l'apparition au défilement et respecte
   prefers-reduced-motion. On n'ajoute donc aucune animation nouvelle : les
   seules transitions ajoutées ici sont des survols, désactivés ci-dessous
   pour qui demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .univers-lien { transition: none; }
  .univers-lien:hover { transform: none; }
}


/* ---------- Ouverture de l'accueil : visuel d'équipe ---------------------
   Le hero du site est habillé d'une arche (border-radius 48% en haut, dans
   le bloc de finitions ci-dessus). Cette arche convient à un portrait, mais
   elle rognait les visages du visuel d'équipe posé ici le 17 septembre 2026 :
   la personne de droite perdait une partie de la tête.
   On adoucit donc la courbe pour ce seul visuel, au lieu de masquer les
   sujets. Le cadre champagne décalé suit la même forme, sinon les deux
   contours ne coïncideraient plus.
   Cette classe ne sert QUE sur l'accueil : les autres pages gardent l'arche. */
.hero .media-frame--photo-large .media,
.hero .media-frame--photo-large.media-frame::before {
  border-radius: 20% 20% 1.5rem 1.5rem;
}


/* ---------- Portrait de format réduit -----------------------------------
   Un portrait qui remplit toute la colonne d'un bloc « split » devient
   énorme sur grand écran. Cette classe le ramène à une taille de photo
   d'illustration, sans toucher au cadre champagne décalé. Sur mobile, elle
   le centre et le limite à 60 % de la largeur pour ne pas pousser le texte
   trop bas. */
.media-frame--compact { max-width: 300px; margin-inline: auto; }
@media (max-width: 640px) { .media-frame--compact { max-width: 60%; } }


/* Visuel paysage d'illustration : plafonné pour rester en équilibre avec le
   texte de son bloc, au lieu de remplir toute la colonne. */
.media-frame--paysage { max-width: 460px; margin-inline: auto; }
/* La légende suit la largeur de l'image, sinon elle déborde en dessous. */
.media-frame--paysage + .media-caption { max-width: 460px; margin-inline: auto; }
@media (max-width: 640px) { .media-frame--paysage { max-width: 100%; } }

/* =========================================================================
   GALERIE DES AVATARS IA — 18 SEPTEMBRE 2026
   -------------------------------------------------------------------------
   Les visages proposés dans Smart Avatar™, écrits par initAvatars() dans
   tout élément portant « data-avatars ».

   Trois colonnes sur ordinateur, deux sur tablette et sur téléphone : un
   portrait par ligne donnerait une page interminable, alors que ces visages
   se comparent d'un coup d'œil.
   ========================================================================= */
.avatars-galerie {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .avatars-galerie { grid-template-columns: repeat(3, 1fr); } }

.avatar-carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.avatar-photo { position: relative; }
.avatar-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.avatar-corps {
  padding: clamp(0.8rem, 0.6rem + 0.5vw, 1.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.avatar-prenom {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.avatar-role { font-size: var(--t-small); color: var(--texte-doux); }

.avatar-traits {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--accent-lisible);
}

/* Repère de MIA : elle est l'assistante du site, pas seulement un visage. */
.avatar-repere {
  margin-top: 0.4rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--texte-doux);
  border-top: 1px solid var(--trait);
  padding-top: 0.5rem;
}

/* Sur une bande sombre, la carte reste claire : sinon les textes gris
   deviendraient illisibles sur fond nuit. */
.section-nuit .avatar-carte { color: var(--texte); }
.section-nuit .avatar-prenom { color: var(--texte-fort); }
.section-nuit .avatar-role,
.section-nuit .avatar-repere { color: var(--texte-doux); }

/* ---------- Ligne de bénéfices sous l'ouverture -------------------------- */
.benefices {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .benefices { grid-template-columns: repeat(4, 1fr); } }

.benefice { display: flex; flex-direction: column; gap: 0.35rem; }
.benefice svg { width: 26px; height: 26px; color: var(--accent-lisible); }
.benefice strong { font-family: var(--serif); font-size: 1.02rem; font-weight: 500; line-height: 1.25; }
.benefice span { font-size: var(--t-small); color: var(--texte-doux); }

/* Bande de faible hauteur : utilisée pour la ligne de bénéfices, juste sous
   l'ouverture. Une section normale y mettrait deux fois trop d'air et
   éloignerait le portail des univers du premier écran. */
.section-mince {
  padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
}

/* =========================================================================
   VIGNETTES D'AVATARS AUTOUR DU VISUEL D'ACCUEIL — 18 SEPTEMBRE 2026
   -------------------------------------------------------------------------
   Reprise de la maquette : quelques visages accrochés aux bords du visuel
   d'ouverture. Elles sont écrites par initAvatarsFlottants() (main.js).

   Règle centrale : elles n'existent qu'à partir de 1180 px de large. En
   dessous, elles sont masquées, parce qu'elles couvriraient les visages de la
   photo. Les six avatars restent visibles dans la galerie des pages
   Smart IA™ et Smart Avatar™, vers laquelle renvoie le lien sous le visuel.

   Les vignettes débordent volontairement du cadre (valeurs négatives) : c'est
   ce léger décalage qui donne l'effet de la maquette. Elles sont placées aux
   angles, jamais au centre, pour ne pas masquer l'écran ni les visages.
   ========================================================================= */
.hero-visuel { position: relative; }

.hero-avatar { display: none; }

.hero-visuel-note {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--t-small);
  color: var(--texte-doux);
}

@media (min-width: 1180px) {
  .hero-avatar {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    margin: 0;
    border: 1px solid var(--trait);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14);
    max-width: 200px;
  }

  .hero-avatar img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--r-pill);
    object-fit: cover;
  }

  .hero-avatar figcaption { min-width: 0; line-height: 1.25; }
  .hero-avatar strong {
    display: block;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    color: var(--texte-fort);
  }
  .hero-avatar span {
    display: block;
    font-size: 0.72rem;
    color: var(--texte-doux);
  }

  /* Deux à gauche, deux à droite, décalées en hauteur. Les pourcentages
     suivent le cadre : le haut du visuel reste dégagé pour l'arche, et le
     bas pour l'écran de MIA. */
  /* Décalages calibrés à l'écran, de 1180 à 1920 px. Deux contraintes
     opposées : trop peu de décalage et la vignette couvre la photo, trop et
     elle sort de l'écran à droite ou vient chevaucher le titre à gauche.
     Ces valeurs tiennent les deux. */
  .hero-avatar--1 { top: 14%; left: -4%; }
  .hero-avatar--2 { top: 46%; left: -6%; }
  .hero-avatar--3 { top: 26%; right: -4%; }
  .hero-avatar--4 { top: 58%; right: -6%; }
}

@media (min-width: 1366px) {
  .hero-avatar--1 { left: -7%; }
  .hero-avatar--2 { left: -10%; }
  .hero-avatar--3 { right: -7%; }
  .hero-avatar--4 { right: -10%; }
}


/* =========================================================================
   CADRE CHAMPAGNE : ALIGNEMENT — 18 SEPTEMBRE 2026
   -------------------------------------------------------------------------
   Léa a relevé que le liseré doré paraissait décalé sous certaines photos.
   Deux causes, deux corrections.

   1. La mosaïque « duo-visuel » de l'accueil. La grande photo de gauche
      occupe deux rangées ; sa case est donc plus haute que l'image, et le
      liseré, qui épouse la CASE, descendait dans le vide bien en dessous de
      la photo. L'image remplit maintenant sa case : le liseré la suit.

   2. Le décalage de 18 px, pensé pour les grandes photos de section, sautait
      aux yeux sur les visuels de format réduit (portrait de MIA, visuel de
      montage). On le ramène à 10 px pour ceux-là : l'effet reste, la
      sensation de travers disparaît.
   ========================================================================= */
.duo-visuel > * { display: flex; }
.duo-visuel .media-frame { flex: 1 1 auto; display: flex; }
.duo-visuel .media { flex: 1 1 auto; }

@media (min-width: 900px) {
  .duo-visuel > *:first-child .media { aspect-ratio: auto; height: 100%; }
}

.media-frame--compact::before,
.media-frame--paysage::before {
  inset: 10px -10px -10px 10px;
}