/* ==========================================================================
   IAkademy · IAka · IAka Daily — DESIGN SYSTEM
   Importé depuis le projet Claude Design « IAkademy Design System ».
   Référence : design-tokens v3.1 — échelle FERMÉE.
   Toute valeur absente des échelles ci-dessous est hors système.

   Ce fichier porte LE SYSTÈME (tokens, registres, balises nues, composants).
   Ce qui appartient à une seule page vit dans page-vente.css.

   Sommaire
     §  1–6   Couleurs
     §  7     Polices (@font-face) et familles
     §  8–11  Typographie
     § 12–14  Espacement, rythme, gabarit
     § 15–17  Rayons, ombres, dégradés
     § 18–19  Opacités, transitions, translations, flou
     § 20     Couches (z-index)
     § 20bis  Les trois registres
     § 21     Balises nues
     § 22     Composants
   ========================================================================== */


/* ==========================================================================
   § 7 · POLICES — Inter Tight en 700 UNIQUEMENT · Inter en 400, 500, 600.
   Les quatre graisses déclarées ici sont exactement celles que le système
   autorise. Toute autre graisse serait SYNTHÉTISÉE par le navigateur — c'est
   pourquoi il n'y a pas de fichier à charger pour elle.
   AUTO-HÉBERGÉES : aucune dépendance à un CDN, aucune requête tierce.
   ========================================================================== */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/InterTight-Bold.woff2") format("woff2"),
       local("Inter Tight Bold"), local("InterTight-Bold");
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2"),
       local("Inter Regular"), local("Inter-Regular");
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2"),
       local("Inter Medium"), local("Inter-Medium");
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2"),
       local("Inter SemiBold"), local("Inter-SemiBold");
}


/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {

  /* ---- 1 · FONDS DE PAGE ------------------------------------------------
     Les deux fonds sont à 4 points de luminosité l'un de l'autre. Leur
     ALTERNANCE est un levier de registre, pas une décoration. */
  --couleur-fond-principal: #180E2A;
  --couleur-fond-alternatif: #23113D;
  --couleur-fond-entete-defile: color-mix(in srgb, var(--couleur-fond-principal) 82%, transparent);
  --couleur-fond-bandeau-collant: color-mix(in srgb, var(--couleur-fond-alternatif) 95%, transparent);

  /* ---- 2 · SURFACES ET RELIEFS — deux paliers, pas trois -----------------
     Sur fond sombre l'élévation passe par la LUMINOSITÉ, pas par l'ombre.
     relief-1 est réservé aux blocs SANS bordure ; relief-2 ne s'emploie que
     dans un bloc déjà en relief-1. */
  --surface-relief-1: rgba(76, 29, 122, 0.18);
  --surface-relief-2: rgba(76, 29, 122, 0.30);
  --couleur-surface-violette: #3B1361;
  --couleur-surface-survol: #2D1249;
  --couleur-voile-blanc: rgba(255, 255, 255, 0.2);

  /* ---- 3 · TEXTE — une seule écriture du blanc. Ni #fff, ni white. ------- */
  --couleur-texte-principal: #FFFFFF;
  --couleur-texte-secondaire: #D9D2E8;

  /* ---- 4 · ACCENT -------------------------------------------------------
     Un seul accent pour les trois marques. Les états se dérivent par
     variation de luminosité, jamais par un second hexadécimal.
     ⚠ DETTE D'ACCESSIBILITÉ ASSUMÉE ET DATÉE (21/08/2026) : le texte blanc sur
     --couleur-accent donne 2,44:1 au repos, 2,08:1 au survol, 3,13:1 enfoncé.
     Le seuil AA est à 4,5:1 — les trois états échouent. Arbitrage rendu en
     connaissance. Atténuations obligatoires : libellé en --graisse-semi
     minimum et jamais sous --taille-dense ; aucune information critique portée
     uniquement par ce bouton ; anneau de focus à 2 px conservé. */
  --couleur-accent: #F28C3C;
  --couleur-accent-survol: color-mix(in srgb, var(--couleur-accent) 82%, #FFFFFF);
  --couleur-accent-enfonce: color-mix(in srgb, var(--couleur-accent) 88%, #000000);

  /* Voiles d'accent — TROIS paliers pour TROIS intentions : remplir (10 %),
     tracer un trait de 1 px (20 %), allumer (40 %). Un état de survol nomme un
     autre palier ; il n'en crée pas d'intermédiaire. */
  --voile-accent-fond: color-mix(in srgb, var(--couleur-accent) 10%, transparent);
  --voile-accent-lisere: color-mix(in srgb, var(--couleur-accent) 20%, transparent);
  --voile-accent-lueur: color-mix(in srgb, var(--couleur-accent) 40%, transparent);

  /* ---- 5 · ÉTATS SÉMANTIQUES — LA RÈGLE, SANS EXCEPTION -----------------
     la paire vert/rouge ne sort JAMAIS d'un état de formulaire. Elle ne
     qualifie pas un contenu, elle rapporte le résultat d'une action de
     l'utilisateur. Un bloc éditorial « problème / solution » porte son signal
     par sa PUCE (❌ / ✅), pas par la couleur de son titre. */
  --couleur-etat-succes: #3DBE7C;
  --couleur-etat-erreur: #EC6F5E;
  --voile-succes-fond: color-mix(in srgb, var(--couleur-etat-succes) 8%, transparent);
  --voile-succes-bordure: color-mix(in srgb, var(--couleur-etat-succes) 24%, transparent);
  --voile-erreur-fond: color-mix(in srgb, var(--couleur-etat-erreur) 5%, transparent);
  --voile-erreur-bordure: color-mix(in srgb, var(--couleur-etat-erreur) 20%, transparent);

  /* ---- 6 · BORDURES ET FILETS ------------------------------------------
     UNE seule famille d'épaisseurs : 1 · 2 · 4. Le 1 px des bordures et des
     séparateurs en fait partie — il n'a pas de famille à lui. L'anneau de
     focus n'est PAS dans cette famille (voir § 15) : sa graisse est une
     garantie d'accessibilité, pas un réglage graphique. */
  --couleur-bordure: #4C1D7A;
  --couleur-filet: rgba(217, 210, 232, 0.10);
  --couleur-filet-marque: rgba(217, 210, 232, 0.18);
  --epaisseur-filet: 1px;
  --epaisseur-filet-marque: 2px;
  --epaisseur-filet-marque-fort: 4px;

  /* ---- 7 · FAMILLES ----------------------------------------------------- */
  --police-titre: 'Inter Tight', sans-serif;       /* 700 uniquement       */
  --police-texte: 'Inter', sans-serif;             /* 400, 500, 600        */
  --police-technique: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                      'Liberation Mono', monospace;
  /* Le registre « fiche technique ». Métadonnées EN CAPITALES uniquement.
     Jamais de code, jamais un corps de texte, jamais un titre. */

  /* ---- 8 · GRAISSES ----------------------------------------------------- */
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-semi: 600;
  --graisse-forte: 700;

  /* ---- 9 · ÉCHELLE — 12 pas fixes, plus 3 tokens fluides -----------------
     11 · 13 · 15 · 17 · 20 · 24 · 28 · 32 · 40 · 48 · 56 · 64 px.
     Aucune valeur libre, aucun rem intermédiaire, aucune surcharge en ligne. */
  --taille-micro: 0.6875rem;     /* 11 px · registre technique                */
  --taille-mention: 0.8125rem;   /* 13 px · mentions, métadonnées, libellés   */
  --taille-dense: 0.9375rem;     /* 15 px · corps dense, corps institutionnel */
  --taille-corps: 1.0625rem;     /* 17 px · corps vente et newsletter, .btn   */
  --taille-titre-xs: 1.25rem;    /* 20 px · h4, question de FAQ, titre carte  */
  --taille-titre-sm: 1.5rem;     /* 24 px · h3                                */
  --taille-titre-md: 1.75rem;    /* 28 px · titre de la carte de prix         */
  --taille-titre-lg: 2rem;       /* 32 px · titre de page institutionnel      */
  --taille-titre-xl: 2.5rem;     /* 40 px · h1 mobile, numéros, chiffres      */
  --taille-titre-2xl: 3rem;      /* 48 px · borne haute du h2 fluide          */
  --taille-titre-3xl: 3.5rem;    /* 56 px · le montant                        */
  --taille-titre-4xl: 4rem;      /* 64 px · borne haute du h1 fluide          */

  /* Titres fluides — bornes prises DANS l'échelle ci-dessus. */
  --taille-fluide-h1: clamp(2.5rem, 4.5vw, 4rem);        /* 40 → 64 · UN par page */
  --taille-fluide-h2: clamp(2rem, 3.5vw, 3rem);          /* 32 → 48 · tous les h2 */
  --taille-fluide-h2-carte: clamp(1.75rem, 3vw, 2.5rem); /* 28 → 40 · h2 en carte */

  --taille-guillemet-decoratif: 150px;
  /* Hors échelle par nature : objet graphique, pas du texte. */

  /* ---- 10 · INTERLIGNES — 4 rôles. Pas de cinquième. -------------------- */
  --interligne-titre-xl: 1.1;    /* h1, h2, le montant, les chiffres          */
  --interligne-titre: 1.3;       /* h3, h4, titres de carte, question de FAQ  */
  --interligne-ui: 1.5;          /* dense et interface, corps institutionnel  */
  --interligne-corps: 1.65;      /* corps long, corps vente et newsletter     */

  /* ---- 11 · APPROCHE ----------------------------------------------------
     Les capitales ont TROIS paliers, indexés sur la LONGUEUR de l'étiquette
     et non sur son emplacement. */
  --approche-titre: -0.02em;         /* h1, h2, h3                            */
  --approche-titre-fine: -0.01em;    /* h4                                    */
  --approche-capitales-sm: 0.06em;   /* une phrase entière                    */
  --approche-capitales-md: 0.10em;   /* un à trois mots                       */
  --approche-capitales-lg: 0.14em;   /* l'étiquette de section, et rien d'autre */

  /* ---- 12 · ESPACEMENT — 13 pas, base 16 px ---------------------------- */
  --esp-4xs: 0.2rem;    /*  3,2 px */
  --esp-3xs: 0.25rem;   /*  4 px   */
  --esp-2xs: 0.35rem;   /*  5,6 px */
  --esp-xs:  0.5rem;    /*  8 px   */
  --esp-sm:  0.75rem;   /* 12 px   */
  --esp-md:  1rem;      /* 16 px   */
  --esp-lg:  1.25rem;   /* 20 px   */
  --esp-xl:  1.5rem;    /* 24 px   */
  --esp-2xl: 1.75rem;   /* 28 px   */
  --esp-3xl: 2rem;      /* 32 px   */
  --esp-4xl: 2.5rem;    /* 40 px   */
  --esp-5xl: 3rem;      /* 48 px   */
  --esp-6xl: 4rem;      /* 64 px   */

  /* Micro-valeurs en pixels — hors échelle par nature : dimensions d'objets
     graphiques, pas des respirations. */
  --esp-filet: 1px;         /* gap de la barre de spec : le fond fait le séparateur */
  --esp-decalage: 2px;      /* décalage vertical des puces                    */
  --esp-burger: 6px;        /* gap des trois barres du menu mobile            */
  --esp-fleche: 10px;       /* marge des flèches ➔ de la formule              */
  --esp-caractere: 0.5ch;   /* gap de la tagline — seule unité `ch` du système */
  --esp-carre-marque: 7px;  /* le carré plein de l'étiquette de section : il
                               reprend le module carré du logo                */

  /* ---- 13 · RYTHME VERTICAL -------------------------------------------- */
  --rythme-section: 120px;
  --rythme-section-mobile: 60px;    /* moitié exacte, sous --rupture-mobile   */
  --rythme-hero-haut: 150px;

  /* L'EN-TÊTE, ses deux hauteurs mesurées. Tokenisées parce que le décalage
     d'ancre en DÉPEND : sans elles, changer le header décale silencieusement
     toutes les ancres de la page. */
  --hauteur-header: 104px;          /* au repos                               */
  --hauteur-header-defile: 72px;    /* défilé — l'état dans lequel une ancre
                                       se déclenche TOUJOURS                  */

  /* DÉCALAGE D'ANCRE = hauteur du header défilé + UN pas d'espacement.
     C'est une relation, pas un nombre : elle suit le header.
     Desktop : 72 + 48 = 120 px. Mobile : 72 + 20 = 92 px. */
  --rythme-ancre: calc(var(--hauteur-header-defile) + var(--esp-5xl));
  --rythme-ancre-mobile: calc(var(--hauteur-header-defile) + var(--esp-lg));

  --rythme-pied-degagement: 7.5rem; /* 120 px · réserve du bandeau collant    */

  /* ---- 14 · LARGEURS ET GABARIT — 5 paliers, échelle fermée ------------- */
  --largeur-page: 1200px;     /* le gabarit                                   */
  --largeur-colonne: 800px;   /* la colonne de lecture centrée                */
  --largeur-bloc: 640px;      /* le bloc étroit                               */
  --largeur-carte: 500px;     /* la carte et le visuel                        */
  --largeur-element: 380px;   /* l'élément d'interface                        */

  --hauteur-controle: 56px;
  --hauteur-carte-carrousel: 520px; /* seule hauteur imposée du système       */
  --gabarit-motif-fond: 40px;       /* tuile du motif diagonal                */
  --gabarit-grain: 200px;           /* tuile SVG du grain                     */
  --logo-hauteur-entete: 40px;      /* mesuré                                 */

  /* ---- 14 bis · POINTS DE RUPTURE --------------------------------------
     Tokenisés parce que quatre règles en dépendent : padding de carte, rythme
     de section, burger, carrousels.
     ⚠ Une media query ne peut pas lire une variable CSS : ces deux valeurs
     restent écrites en dur dans les @media. Les tokens sont là pour être LUS. */
  --rupture-grille: 992px;   /* grilles 2 et 3 colonnes vers 1 colonne        */
  --rupture-mobile: 768px;   /* burger, carrousels, rythme /2, padding −1 pas */

  /* ---- 15 · RAYONS ------------------------------------------------------
     5 rayons, avec une règle : rayon interne = rayon externe − padding, tant
     que l'inset est inférieur ou égal au rayon externe. */
  --rayon-carte: 12px;    /* le rayon de la marque, référence externe         */
  --rayon-interne: 8px;   /* un élément posé dans une carte : 12 − 4          */
  --rayon-focus: 4px;     /* DÉCALAGE de l'anneau de focus. UNIQUEMENT.       */
  --epaisseur-focus: 2px; /* ÉPAISSEUR de l'anneau — garantie d'accessibilité,
                             pas une décoration. Ne dépend d'aucun filet.     */
  --rayon-pilule: 999px;
  --rayon-cercle: 50%;

  --rayon-carte-filet: 0 var(--rayon-carte) var(--rayon-carte) 0;
  /* Motif « carte à filet gauche » : coin gauche carré pour laisser le filet
     d'accent à vif, coins droits arrondis. */

  /* ---- 16 · OMBRES — TROIS profondeurs ---------------------------------
     Elles ne hiérarchisent pas des surfaces empilées (c'est le rôle de la
     luminosité, § 2) : elles détachent un objet du flux. */
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.30),
                 0 12px 32px rgba(0, 0, 0, 0.30);
  --ombre-carte-avant: 0 1px 2px rgba(0, 0, 0, 0.30),
                       0 22px 52px rgba(0, 0, 0, 0.45);
  --ombre-visuel: 0 20px 40px rgba(0, 0, 0, 0.50);

  --ombre-halo-accent: 0 10px 40px var(--voile-accent-fond);
  --ombre-halo-accent-survol: 0 0 40px var(--voile-accent-lueur);
  /* Seul effet lumineux franc du système, réservé au registre VENTE. */

  /* ---- 17 · DÉGRADÉS --------------------------------------------------- */
  --filet-lumineux-carte: linear-gradient(90deg, transparent,
                          var(--couleur-accent), transparent);
  --degrade-progression: linear-gradient(90deg,
                         var(--couleur-bordure), var(--couleur-accent));
  --degrade-carte-avant: linear-gradient(170deg,
                         var(--voile-accent-fond) 0%,
                         var(--surface-relief-2) 55%,
                         var(--couleur-surface-violette) 100%);
  /* Seul dégradé de surface du système. */
  --degrade-motif-diagonal: linear-gradient(45deg,
                            var(--couleur-fond-alternatif) 25%, transparent 25%,
                            transparent 50%, var(--couleur-fond-alternatif) 50%,
                            var(--couleur-fond-alternatif) 75%, transparent 75%,
                            transparent);

  /* ---- 18 · OPACITÉS — TROIS paliers d'atténuation ---------------------
     Un seul geste (« ce texte compte moins ») a trois degrés, pas huit.
     Les deux opacités de TEXTURE sont à part : réglages de matière. */
  --opacite-effacee: 0.5;     /* barré, en retrait, logo du pied de page      */
  --opacite-mention: 0.70;    /* mention de service, lisible mais discrète    */
  --opacite-attenuee: 0.9;    /* à peine en retrait                           */
  --opacite-grain: 0.022;     /* TEXTURE · grain                              */
  --opacite-motif: 0.03;      /* TEXTURE · motif diagonal                     */

  /* ---- 19 · TRANSITIONS ------------------------------------------------- */
  --duree-instantanee: 0.1s;  /* barre de progression, en `linear`            */
  --duree-rapide: 0.2s;       /* liens, boutons, labels de case à cocher      */
  --duree-standard: 0.3s;     /* la durée de référence                        */
  --duree-secousse: 0.45s;    /* secousse du portail d'engagement             */
  --duree-apparition: 0.8s;   /* entrée au scroll                             */
  --duree-mots-animes: 8s;
  --delai-visuel-hero: 0.2s;

  --duree-mouvement-reduit: 0.01ms;
  /* Interrupteur d'accessibilité, pas une durée de design. */

  --courbe-defaut: ease;
  --courbe-lineaire: linear;
  --courbe-mots: cubic-bezier(0.645, 0.045, 0.355, 1);

  --translation-apparition: 30px;
  --translation-carte: -5px;          /* soulèvement d'une carte au survol    */
  --translation-bouton: -2px;         /* bouton primaire au survol            */
  --translation-laterale: 10px;       /* étape numérotée au survol            */
  --translation-laterale-fine: 4px;   /* carte d'évolution au survol          */
  --translation-secousse: 5px;        /* portail d'engagement                 */

  --flou-barre: 14px;
  /* backdrop-filter des deux barres translucides : header défilé et bandeau
     collant. Deux barres de même nature, un seul flou. */

  /* ---- 20 · COUCHES (z-index) ------------------------------------------ */
  --couche-decor: -1;         /* le motif diagonal                            */
  --couche-contenu: 2;        /* contenu au-dessus du guillemet décoratif     */
  --couche-entete: 10;        /* header, commandes de carrousel               */
  --couche-flottant: 100;     /* bandeau collant, burger                      */
  --couche-progression: 200;  /* barre de progression de lecture              */
  --couche-grain: 2000;       /* le grain — au-dessus de tout, non cliquable  */
}


/* ==========================================================================
   § 20 bis · LES TROIS REGISTRES
   La palette et la typographie ne changent JAMAIS d'une page à l'autre. Un
   registre est une SÉLECTION dans les tokens de fondation : les --role-* sont
   des INDIRECTIONS, aucune valeur nouvelle.

   UN REGISTRE EST UN TRIPLET, pas une valeur :
     VENTE           rythme 120 | corps 17 | largeur 1200
     NEWSLETTER      rythme  64 | corps 17 | largeur  800
     INSTITUTIONNEL  rythme  64 | corps 15 | largeur  800
   La classe se pose sur <body>.

   ✎ 23/08/2026 — newsletter passe de 640 à 800 px, pour unifier la colonne de
     lecture. Newsletter et institutionnel partagent désormais le RYTHME et la
     LARGEUR ; ils ne se séparent plus que sur le corps (17 vs 15), le padding
     de carte (40 vs 32) et le gap de grille (32 vs 24).
     La règle « chaque registre a un écart mesurable avec les deux autres » est
     ABANDONNÉE. Entre newsletter et institutionnel, la différenciation repose
     désormais sur les règles non chiffrables : cartes et voiles d'accent
     autorisés en newsletter, filets seuls en institutionnel.
   ========================================================================== */

body.registre-vente {
  --role-rythme-section: var(--rythme-section);            /* 120px            */
  --role-largeur-contenu: var(--largeur-page);             /* 1200px           */
  --role-titre-page: var(--taille-fluide-h1);              /* 40 → 64          */
  --role-titre-section: var(--taille-fluide-h2);           /* 32 → 48          */
  --role-corps: var(--taille-corps);                       /* 17px             */
  --role-interligne-corps: var(--interligne-corps);        /* 1.65             */
  --role-padding-carte: var(--esp-5xl);                    /* 48px             */
  --role-gap-grille: var(--esp-3xl);                       /* 32px             */
  --role-ombre-carte: var(--ombre-carte);
  --role-alternance-fond: var(--couleur-fond-alternatif);
}

body.registre-newsletter {
  --role-rythme-section: var(--esp-6xl);                   /* 64px             */
  --role-largeur-contenu: var(--largeur-colonne);          /* 800px            */
  --role-titre-page: var(--taille-fluide-h2);              /* 32 → 48          */
  --role-titre-section: var(--taille-titre-sm);            /* 24px fixe        */
  --role-corps: var(--taille-corps);                       /* 17px             */
  --role-interligne-corps: var(--interligne-corps);        /* 1.65             */
  --role-padding-carte: var(--esp-4xl);                    /* 40px             */
  --role-gap-grille: var(--esp-3xl);                       /* 32px             */
  --role-ombre-carte: none;
  --role-alternance-fond: var(--couleur-fond-principal);   /* pas d'alternance */
}

body.registre-institutionnel {
  --role-rythme-section: var(--esp-6xl);                   /* 64px             */
  --role-largeur-contenu: var(--largeur-colonne);          /* 800px            */
  --role-titre-page: var(--taille-titre-lg);               /* 32px fixe        */
  --role-titre-section: var(--taille-titre-xs);            /* 20px fixe        */
  --role-corps: var(--taille-dense);                       /* 15px             */
  --role-interligne-corps: var(--interligne-ui);           /* 1.5              */
  --role-padding-carte: var(--esp-3xl);                    /* 32px             */
  --role-gap-grille: var(--esp-xl);                        /* 24px             */
  --role-ombre-carte: none;
  --role-alternance-fond: var(--couleur-fond-principal);   /* pas d'alternance */
}

/* MOBILE — le padding de carte descend d'UN pas dans les trois registres.
   Un seul pas, jamais deux. Le rythme de section suit sa propre règle. */
@media (max-width: 768px) {
  body.registre-vente { --role-padding-carte: var(--esp-4xl); }          /* 48 → 40 */
  body.registre-newsletter { --role-padding-carte: var(--esp-3xl); }     /* 40 → 32 */
  body.registre-institutionnel { --role-padding-carte: var(--esp-2xl); } /* 32 → 28 */
  body.registre-vente { --role-rythme-section: var(--rythme-section-mobile); }
}

/* RÈGLES NON CHIFFRABLES du registre VENTE — consigne à l'auteur :
     · alternance des fonds à chaque section, indexée sur le RANG
     · halo d'accent au survol autorisé
     · emoji AUTORISÉS en puces (✅ ❌ ✓ ⚡), jamais dans un titre
     · jusqu'à 7 appels à l'action par page, bandeau collant
     · images encadrées : bordure 1 px + --rayon-carte
     · 1 fragment de titre en --couleur-accent par PAGE                      */


/* ==========================================================================
   § 21 · BALISES NUES — la carte d'identité des balises HTML.
   Aucune valeur littérale : chaque déclaration nomme un token.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--rythme-ancre);
}

body {
  margin: 0;
  background: var(--couleur-fond-principal);
  color: var(--couleur-texte-principal);
  font-family: var(--police-texte);
  font-weight: var(--graisse-normale);
  font-size: var(--role-corps, var(--taille-corps));
  line-height: var(--role-interligne-corps, var(--interligne-corps));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  color: var(--couleur-texte-principal);
  margin: 0 0 var(--esp-md);
  text-wrap: pretty;
}

h1 {
  font-size: var(--role-titre-page, var(--taille-fluide-h1));
  line-height: var(--interligne-titre-xl);
  letter-spacing: var(--approche-titre);
}
h2 {
  font-size: var(--role-titre-section, var(--taille-fluide-h2));
  line-height: var(--interligne-titre-xl);
  letter-spacing: var(--approche-titre);
  margin-bottom: var(--esp-xl);
}
h3 {
  font-size: var(--taille-titre-sm);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
}
h4 {
  font-size: var(--taille-titre-xs);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre-fine);
}

/* L'EMPHASE D'UN TITRE passe par la COULEUR, jamais par la taille.
   UN SEUL fragment accentué par PAGE, sur le h1 ou le h2 d'emphase. Jamais sur
   un h3 ni un h4. Interdit dans le registre institutionnel. */
.titre-accent { color: var(--couleur-accent); font-style: normal; }

p {
  color: var(--couleur-texte-secondaire);
  margin: 0 0 var(--esp-xl);
  text-wrap: pretty;
}

a {
  color: var(--couleur-accent);
  text-decoration: none;
  transition: color var(--duree-rapide) var(--courbe-defaut);
}
a:hover { color: var(--couleur-accent-survol); }

:focus-visible {
  outline: var(--epaisseur-focus) solid var(--couleur-accent-survol);
  outline-offset: var(--rayon-focus);
}

::selection { background: var(--couleur-accent); color: var(--couleur-texte-principal); }

strong { font-weight: var(--graisse-semi); color: var(--couleur-texte-principal); }

/* Garde-fou global : une image ne prend jamais de hauteur imposée. */
img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
  margin: var(--esp-6xl) 0;
}

/* Le gabarit. Sa largeur est un rôle de registre. */
.conteneur {
  width: 100%;
  max-width: var(--role-largeur-contenu, var(--largeur-page));
  margin-inline: auto;
  padding-inline: var(--esp-3xl);
}

/* Le battement vertical. */
.section { padding-block: var(--role-rythme-section, var(--rythme-section)); }

/* L'ALTERNANCE est indexée sur le RANG de la section dans le document, jamais
   sur son contenu. Rang impair → fond principal, rang pair → fond alternatif.
   Le hero est le rang 1. */
.section--principal  { background: var(--couleur-fond-principal); }
.section--alternatif { background: var(--couleur-fond-alternatif); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   § 22 · COMPOSANTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Registre technique — métadonnées EN CAPITALES, police monospace.
   Trois approches, indexées sur la LONGUEUR de l'étiquette :
     .tech            un à trois mots        0.10em
     .tech--phrase    une phrase entière     0.06em
   Le troisième palier (0.14em, l'étiquette de section) n'a pas d'utilitaire :
   il appartient en propre à .entete-section__etiquette, qui le porte.
   -------------------------------------------------------------------------- */
.tech {
  font-family: var(--police-technique);
  font-size: var(--taille-micro);
  letter-spacing: var(--approche-capitales-md);
  text-transform: uppercase;
}
.tech--phrase  { letter-spacing: var(--approche-capitales-sm); }
.tech--accent  { color: var(--couleur-accent); }
.tech--secondaire { color: var(--couleur-texte-secondaire); }
.tech--effacee { opacity: var(--opacite-effacee); }
.tech--mention { opacity: var(--opacite-mention); }
.tech--attenuee { opacity: var(--opacite-attenuee); }


/* --------------------------------------------------------------------------
   Button — TROIS tailles, DEUX variantes. Toute autre combinaison est hors
   système. Le primaire s'éclaircit et se soulève de 2 px ; l'appui l'assombrit.
   Le secondaire est le seul élément du système qui change de couleur de fond
   au survol.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-xs);
  font-family: var(--police-texte);
  font-weight: var(--graisse-semi);
  line-height: var(--interligne-ui);
  font-size: var(--taille-corps);
  padding: var(--esp-md) var(--esp-3xl);
  border: 0;
  border-radius: var(--rayon-carte);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--duree-rapide) var(--courbe-defaut),
              transform var(--duree-rapide) var(--courbe-defaut);
}

/* Tailles */
.btn--compact { font-size: var(--taille-dense); padding: var(--esp-sm) var(--esp-xl); }
.btn--bloc    { width: 100%; max-width: var(--largeur-element); }
.btn--pleine  { width: 100%; max-width: none; }

/* Variantes */
.btn--primaire   { background: var(--couleur-accent); color: var(--couleur-texte-principal); }
.btn--secondaire { background: var(--couleur-surface-violette); color: var(--couleur-texte-principal); }

.btn--primaire:hover   { background: var(--couleur-accent-survol); color: var(--couleur-texte-principal); transform: translateY(var(--translation-bouton)); }
.btn--primaire:active  { background: var(--couleur-accent-enfonce); transform: none; }
.btn--secondaire:hover { background: var(--couleur-surface-survol); color: var(--couleur-texte-principal); transform: translateY(var(--translation-bouton)); }
.btn--secondaire:active{ background: var(--couleur-surface-violette); transform: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: var(--opacite-effacee);
  cursor: default;
  transform: none;
}
.btn:disabled:hover { background: var(--couleur-accent); transform: none; }


/* --------------------------------------------------------------------------
   BgTexture — les deux textures du chrome de page, toutes deux non cliquables
   et présentes sur toutes les pages.
   -------------------------------------------------------------------------- */
.texture-motif,
.texture-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.texture-motif {
  z-index: var(--couche-decor);
  background-image: var(--degrade-motif-diagonal);
  background-size: var(--gabarit-motif-fond) var(--gabarit-motif-fond);
  opacity: var(--opacite-motif);
}
.texture-grain {
  z-index: var(--couche-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--gabarit-grain) var(--gabarit-grain);
  opacity: var(--opacite-grain);
}


/* --------------------------------------------------------------------------
   ScrollProgress — 2 px, dégradé violet → orange, couche 200.
   Seul indicateur de défilement du système.
   -------------------------------------------------------------------------- */
.progression {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: var(--couche-progression);
  pointer-events: none;
}
.progression__barre {
  height: 100%;
  width: 0;
  background: var(--degrade-progression);
  transition: width var(--duree-instantanee) var(--courbe-lineaire);
}


/* --------------------------------------------------------------------------
   SiteHeader — 104 px au repos, 72 px défilé. Couche 10.
   Au défilement : fond principal à 82 %, flou 14 px, filet bas.
   -------------------------------------------------------------------------- */
/* Les DEUX HAUTEURS sont pilotées par leurs tokens, pas par le padding : le
   décalage d'ancre en dépend (--rythme-ancre = header défilé + un pas). Si la
   hauteur était la résultante du plus haut enfant — ici le bouton compact,
   46,5 px, plus haut que le logo de 40 — le header mesurerait 111 px au repos
   et les deux tokens mentiraient sur la page. */
.entete {
  position: sticky;
  top: 0;
  z-index: var(--couche-entete);
  display: flex;
  align-items: center;
  height: var(--hauteur-header);
  background: transparent;
  border-bottom: var(--epaisseur-filet) solid transparent;
  transition: height var(--duree-standard) var(--courbe-defaut),
              background var(--duree-standard) var(--courbe-defaut),
              border-color var(--duree-standard) var(--courbe-defaut);
}
.entete.est-defile {
  height: var(--hauteur-header-defile);
  background: var(--couleur-fond-entete-defile);
  -webkit-backdrop-filter: blur(var(--flou-barre));
  backdrop-filter: blur(var(--flou-barre));
  border-bottom-color: var(--couleur-filet);
}
.entete__inner {
  display: flex;
  align-items: center;
  gap: var(--esp-xl);
}
.entete__logo { display: flex; flex: none; }
.entete__logo img { max-height: var(--logo-hauteur-entete); width: auto; }

.entete__nav { display: flex; gap: var(--esp-xl); margin-left: auto; }
.entete__actions { display: flex; align-items: center; gap: var(--esp-xl); flex: none; }

.lien-nav {
  font-size: var(--taille-mention);
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
  transition: color var(--duree-rapide) var(--courbe-defaut);
}
.lien-nav:hover { color: var(--couleur-accent); }

/* Les deux entrées qui n'existent QUE dans le menu déplié : sous 768 px le
   header ne garde que le logo et le burger — à 40 px de logo et 24 px de gap,
   rien d'autre ne tient dans 375 px sans élargir le document. L'action et
   l'espace membre ne disparaissent pas, ils descendent dans le menu. */
.entete__nav-mobile { display: none; }


/* --------------------------------------------------------------------------
   BurgerToggle — trois barres de 28 × 3, gap 6, rayon 2 px.
   Le rayon de 2 px est assumé hors des cinq rayons : à 3 px de haut, 4 px
   arrondirait les barres en pilule.
   -------------------------------------------------------------------------- */
.burger {
  display: none;
  flex-direction: column;
  gap: var(--esp-burger);
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: var(--couche-flottant);
}
.burger__barre {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--couleur-texte-principal);
  border-radius: 2px;
  transition: transform var(--duree-standard) var(--courbe-defaut),
              opacity var(--duree-standard) var(--courbe-defaut);
}
.burger[aria-expanded="true"] .burger__barre:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barre:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__barre:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* --------------------------------------------------------------------------
   StickyCta — capsule de 380 px, fond alternatif à 95 %, flou 14 px,
   couche 100. Registre VENTE uniquement ; le footer lui réserve 120 px.
   -------------------------------------------------------------------------- */
.bandeau {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--couche-flottant);
  padding: var(--esp-md);
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(120%);
  transition: transform var(--duree-standard) var(--courbe-defaut);
}
.bandeau.est-visible { transform: none; }

.bandeau__capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-xl);
  width: 100%;
  max-width: var(--largeur-element);
  padding: var(--esp-sm) var(--esp-md) var(--esp-sm) var(--esp-lg);
  background: var(--couleur-fond-bandeau-collant);
  -webkit-backdrop-filter: blur(var(--flou-barre));
  backdrop-filter: blur(var(--flou-barre));
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  pointer-events: auto;
}
.bandeau__montant {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xs);
  line-height: var(--interligne-titre);
  color: var(--couleur-texte-principal);
}


/* --------------------------------------------------------------------------
   SiteFooter — logo à 50 % d'opacité, dégagement bas de 120 px.
   -------------------------------------------------------------------------- */
.pied {
  border-top: var(--epaisseur-filet) solid var(--couleur-bordure);
  padding-top: var(--esp-4xl);
  padding-bottom: var(--rythme-pied-degagement);
}
.pied__haut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-xl);
  margin-bottom: var(--esp-xl);
}
.pied__logo {
  max-height: var(--logo-hauteur-entete);
  width: auto;
  opacity: var(--opacite-effacee);
  flex: none;
}
.pied__nav { display: flex; flex-wrap: wrap; gap: var(--esp-xl); margin-left: auto; }
.pied__mention {
  font-size: var(--taille-mention);
  color: var(--couleur-texte-secondaire);
  opacity: var(--opacite-mention);
}


/* --------------------------------------------------------------------------
   Card — un seul squelette, cinq variantes.
   LA RÈGLE DE FOND, unique et sans exception : la carte prend le fond que sa
   section n'a pas. relief-1 n'est PAS un fond de carte — il est réservé aux
   blocs SANS bordure. Jamais une bordure ET un relief.
   -------------------------------------------------------------------------- */
.carte {
  position: relative;
  border-radius: var(--rayon-carte);
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  box-shadow: var(--role-ombre-carte, var(--ombre-carte));
  padding: var(--role-padding-carte, var(--esp-5xl));
  transition: transform var(--duree-standard) var(--courbe-defaut),
              box-shadow var(--duree-standard) var(--courbe-defaut),
              background var(--duree-standard) var(--courbe-defaut);
}
/* Le fond que la section n'a pas. */
.carte--sur-principal  { background: var(--couleur-fond-alternatif); }
.carte--sur-alternatif { background: var(--couleur-fond-principal); }

/* Soulèvement de 5 px — une seule amplitude dans tout le système. */
.carte--survol:hover {
  transform: translateY(var(--translation-carte));
  box-shadow: var(--ombre-carte-avant);
}

.carte__titre {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xs);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  color: var(--couleur-texte-principal);
  margin: 0 0 var(--esp-md);
  text-wrap: pretty;
}
.carte__badge { margin-bottom: var(--esp-lg); }
/* L'icône de catalogue posée en tête de carte. Elle se dimensionne par la
   HAUTEUR (voir .visuel--icone) ; seule sa respiration basse est ici. */
.carte__icone { margin-bottom: var(--esp-lg); }

/* Filet lumineux de 1 px, de 12 % à 88 % — géométrie d'un ornement unique,
   porté par les variantes « c'est » et « prix ». */
.carte__filet-lumineux {
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: var(--filet-lumineux-carte);
  opacity: var(--opacite-effacee);
}

/* Variante persona — un pas de padding sous la carte standard, fond de survol. */
.carte--persona { padding: var(--esp-4xl); }
.carte--persona:hover { background: var(--couleur-surface-survol); }

/* Variante « c'est / ce n'est pas ». Les deux prennent la couleur de texte
   standard : le signal est porté par la PUCE de chaque ligne (✅ / ❌) et par
   l'ordre des deux cartes. La paire sémantique ne sort pas du formulaire.
   Son padding est celui du registre — elle ne le fige pas, sinon la règle
   « −1 pas sous 768 px » ne s'appliquerait pas à elle. */

/* Variante mise en avant — seul dégradé de surface du système. */
.carte--feature {
  background: var(--degrade-carte-avant);
  border-color: transparent;
  min-height: var(--hauteur-carte-carrousel);
  box-shadow: 0 0 0 1px var(--voile-accent-lisere), var(--ombre-carte-avant);
}
.carte--feature:hover {
  box-shadow: 0 0 0 1px var(--voile-accent-lueur), var(--ombre-carte-avant);
}

/* Variante prix — halo d'accent, le seul effet lumineux franc du système :
   au repos un halo à 10 % décalé de 10 px, au survol un halo à 40 % sans
   décalage. */
.carte--prix {
  max-width: var(--largeur-carte);
  border-color: var(--couleur-accent);
  box-shadow: var(--ombre-halo-accent), var(--ombre-carte);
}
.carte--prix:hover {
  box-shadow: var(--ombre-halo-accent-survol), var(--ombre-carte-avant);
  transform: translateY(var(--translation-carte));
}
.carte--prix .carte__titre {
  font-size: var(--taille-titre-md);
}

/* Variante dernier appel */
.carte--final {
  max-width: var(--largeur-bloc);
  border-color: var(--couleur-accent);
  box-shadow: var(--ombre-halo-accent), var(--ombre-carte);
}
.carte--final .carte__titre {
  font-size: var(--taille-fluide-h2-carte);
  line-height: var(--interligne-titre-xl);
}


/* --------------------------------------------------------------------------
   Badge — pilule technique en capitales mono, ou étiquette de persona.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: var(--esp-2xs) var(--esp-sm);
  border-radius: var(--rayon-pilule);
  font-family: var(--police-technique);
  font-size: var(--taille-micro);
  line-height: var(--interligne-ui);
  letter-spacing: var(--approche-capitales-md);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-relief-1);
  border: var(--epaisseur-filet) solid var(--couleur-filet-marque);
  color: var(--couleur-texte-secondaire);
}
.badge--feature {
  background: var(--voile-accent-fond);
  border-color: var(--voile-accent-lisere);
  color: var(--couleur-accent);
}
.badge--alerte {
  background: var(--voile-accent-fond);
  border-color: var(--voile-accent-lisere);
  color: var(--couleur-accent-survol);
}
.badge--compteur {
  background: var(--surface-relief-1);
  border-color: var(--couleur-filet-marque);
  color: var(--couleur-texte-principal);
}
/* L'étiquette de persona n'est pas une pilule : ni fond, ni bordure. */
.badge--tag {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--taille-mention);
  font-weight: var(--graisse-semi);
  color: var(--couleur-accent);
}


/* --------------------------------------------------------------------------
   SectionHeader — étiquette, titre, chapô.
   Colonne de 800 px centrée, 64 px de marge basse.
   -------------------------------------------------------------------------- */
.entete-section {
  max-width: var(--largeur-colonne);
  margin-inline: auto;
  margin-bottom: var(--esp-6xl);
  text-align: center;
}
.entete-section--gauche { margin-inline: 0; text-align: left; }

.entete-section__etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-xs);
  font-family: var(--police-technique);
  font-size: var(--taille-micro);
  letter-spacing: var(--approche-capitales-lg);
  text-transform: uppercase;
  color: var(--couleur-accent);
  margin-bottom: var(--esp-md);
}
/* Le carré plein n'est pas un caractère : c'est une forme CSS qui reprend le
   module carré du logo. */
.entete-section__carre {
  width: var(--esp-carre-marque);
  height: var(--esp-carre-marque);
  background: var(--couleur-accent);
  opacity: var(--opacite-attenuee);
  flex: none;
}
.entete-section h2 { margin: 0; }
.entete-section__chapo {
  font-size: var(--role-corps, var(--taille-corps));
  line-height: var(--role-interligne-corps, var(--interligne-corps));
  color: var(--couleur-texte-secondaire);
  margin: var(--esp-xl) 0 0;
}


/* --------------------------------------------------------------------------
   TrustBar — filets haut et bas, aucun fond.
   -------------------------------------------------------------------------- */
.barre-confiance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-6xl);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
  padding: var(--esp-2xl) 0;
}
.barre-confiance__item { display: flex; flex-direction: column; gap: var(--esp-2xs); }
.barre-confiance__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xs);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  color: var(--couleur-texte-principal);
}
.barre-confiance__libelle {
  font-size: var(--taille-mention);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-secondaire);
}


/* --------------------------------------------------------------------------
   SpecBar — le gap de 1 px laisse voir le fond : c'est LUI qui fait le
   séparateur.
   -------------------------------------------------------------------------- */
.barre-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--esp-filet);
  background: var(--couleur-filet);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}
.barre-spec__cellule { padding: var(--esp-2xl); }
.barre-spec--sur-principal  .barre-spec__cellule { background: var(--couleur-fond-alternatif); }
.barre-spec--sur-alternatif .barre-spec__cellule { background: var(--couleur-fond-principal); }
.barre-spec__label { margin-bottom: var(--esp-xs); }
.barre-spec__valeur {
  font-size: var(--taille-dense);
  line-height: var(--interligne-corps);
  color: var(--couleur-texte-secondaire);
}


/* --------------------------------------------------------------------------
   CardProof — relief 2 dans relief 1. Rayon interne 8 px.
   -------------------------------------------------------------------------- */
.preuve {
  background: var(--surface-relief-2);
  border-radius: var(--rayon-interne);
  margin: var(--esp-3xs) 0;
  padding: var(--esp-sm) var(--esp-md);
  font-size: var(--taille-mention);
  line-height: var(--interligne-ui);
}
.preuve__label { margin-bottom: var(--esp-3xs); color: var(--couleur-accent); }
.preuve__ligne {
  display: flex;
  align-items: center;
  gap: var(--esp-xs);
  flex-wrap: wrap;
}
.preuve__avant {
  text-decoration: line-through;
  opacity: var(--opacite-effacee);
  color: var(--couleur-texte-secondaire);
}
.preuve__fleche { color: var(--couleur-accent); margin: 0 var(--esp-3xs); }
.preuve__apres {
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte-principal);
}


/* --------------------------------------------------------------------------
   CardCloser — carte à filet gauche : coin gauche à vif pour laisser le filet
   d'accent, coins droits arrondis.
   -------------------------------------------------------------------------- */
.conclusion {
  border-left: var(--epaisseur-filet-marque) solid var(--couleur-accent);
  border-radius: var(--rayon-carte-filet);
  padding: var(--esp-lg) var(--esp-xl);
  font-size: var(--taille-mention);
  line-height: var(--interligne-ui);
  font-weight: var(--graisse-forte);
  color: var(--couleur-texte-principal);
}
.conclusion--sur-principal  { background: var(--couleur-fond-alternatif); }
.conclusion--sur-alternatif { background: var(--couleur-fond-principal); }


/* --------------------------------------------------------------------------
   FormulaBox — progression en trois temps : barré, neutre, conclusion.
   -------------------------------------------------------------------------- */
.formule {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: var(--voile-accent-fond);
  border: var(--epaisseur-filet) solid var(--voile-accent-lisere);
  border-radius: var(--rayon-carte);
  padding: var(--esp-lg) var(--esp-xl);
  font-size: var(--taille-corps);
  line-height: var(--interligne-ui);
}
.formule__depart {
  text-decoration: line-through;
  opacity: var(--opacite-effacee);
  color: var(--couleur-texte-secondaire);
}
.formule__etape { color: var(--couleur-texte-principal); }
.formule__arrivee { color: var(--couleur-accent); font-weight: var(--graisse-semi); }
.formule__fleche { color: var(--couleur-accent); margin-inline: var(--esp-fleche); }


/* --------------------------------------------------------------------------
   AudienceTable — relief 1 sans bordure, lignes séparées par un filet.
   Aucune barre de proportion, AUCUNE LIGNE DE TOTAL : toutes les lignes ont le
   même poids typographique.
   -------------------------------------------------------------------------- */
.audience {
  background: var(--surface-relief-1);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}
.audience__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-xl);
  padding: var(--esp-md) var(--esp-2xl);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
}
.audience__label { color: var(--couleur-accent); }
.audience__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xl);
  line-height: var(--interligne-titre-xl);
  letter-spacing: var(--approche-titre);
  color: var(--couleur-texte-principal);
}
.audience__note {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-md);
  padding: var(--esp-sm) var(--esp-2xl);
  color: var(--couleur-texte-secondaire);
}


/* --------------------------------------------------------------------------
   Byline — un seul bloc d'attribution pour tout le système, dans les trois
   registres. Photo de 48 px : dimension du seul bloc d'attribution.
   -------------------------------------------------------------------------- */
.attribution {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
  padding: var(--esp-lg) 0 0;
}
.attribution__photo {
  width: 48px;
  height: 48px;
  border-radius: var(--rayon-cercle);
  object-fit: cover;
  flex: none;
}
.attribution__nom {
  font-size: var(--taille-dense);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte-principal);
  line-height: var(--interligne-ui);
}
.attribution__role {
  font-size: var(--taille-mention);
  color: var(--couleur-texte-secondaire);
  line-height: var(--interligne-ui);
}


/* --------------------------------------------------------------------------
   Figure — TROIS ratios, chacun adossé à un TYPE D'ACTIF que la marque possède
   réellement. C'est le type d'actif qui choisit le ratio, jamais l'emplacement
   dans la page.
     2:3  editorial  hero, illustration, photo source  bordure + rayon + ombre
     1:1  avatar     avatar, logo, icône de plateforme rond, ni bordure ni ombre
     16:9 media      miniature vidéo, capture d'écran  cadre, pas d'ombre
   Une image qui n'entre dans aucun des trois est RECADRÉE, pas déformée.
   -------------------------------------------------------------------------- */
.visuel--editorial {
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-visuel);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  width: 100%;
  max-width: var(--largeur-carte);
}
.visuel--avatar {
  border-radius: var(--rayon-cercle);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.visuel--avatar-carre { border-radius: var(--rayon-interne); }
.visuel--media {
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}
/* Pas un ratio : les dix icônes de catalogue partagent une HAUTEUR de 180 px
   et une largeur libre (132 à 258 px). Elles se dimensionnent donc PAR LA
   HAUTEUR. Jamais de largeur imposée : elle écraserait la moitié du jeu. */
.visuel--icone { height: 180px; width: auto; }
.visuel--icone-60 { height: 60px; width: auto; }
.visuel--icone-100 { height: 100px; width: auto; }


/* --------------------------------------------------------------------------
   CarouselButton — commande ronde de 40 px. Elle sort explicitement de
   l'échelle des boutons de texte.
   -------------------------------------------------------------------------- */
.carrousel-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rayon-cercle);
  background: var(--couleur-surface-violette);
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  color: var(--couleur-texte-principal);
  font-size: var(--taille-dense);
  cursor: pointer;
  z-index: var(--couche-entete);
  transition: background var(--duree-rapide) var(--courbe-defaut);
}
.carrousel-btn:hover { background: var(--couleur-accent); }
.carrousel-btn:disabled { opacity: var(--opacite-effacee); cursor: default; background: var(--couleur-surface-violette); }


/* --------------------------------------------------------------------------
   Puces — le vrai jeu d'icônes de l'interface est fait de caractères Unicode.
   ✓ accent graisse 700, décalage vertical de 2 px.
   ✅ / ❌ puces des cartes « c'est / ce n'est pas », registre vente uniquement.
   -------------------------------------------------------------------------- */
.liste-puces { list-style: none; margin: 0; padding: 0; }
.puce {
  display: flex;
  gap: var(--esp-xs);
  font-size: var(--taille-dense);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-secondaire);
  margin-bottom: var(--esp-sm);
}
.puce__glyphe {
  color: var(--couleur-accent);
  font-weight: var(--graisse-forte);
  margin-top: var(--esp-decalage);
  flex: none;
}
/* Les emoji portent déjà leur couleur : l'accent ne s'applique qu'au ✓. */
.puce__glyphe--emoji { color: inherit; }


/* --------------------------------------------------------------------------
   FaqAccordion — colonne de 800 px. Le « + » pivote de 45° à l'ouverture :
   violet fermé, accent ouvert.
   -------------------------------------------------------------------------- */
.faq { max-width: var(--largeur-colonne); margin-inline: auto; }

.faq__item {
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  margin-bottom: var(--esp-sm);
  overflow: hidden;
  transition: border-color var(--duree-standard) var(--courbe-defaut);
}
.faq__item.est-ouvert { border-color: var(--couleur-accent); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--esp-lg) var(--esp-xl);
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xs);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre-fine);
  color: var(--couleur-texte-principal);
}
.faq__signe {
  flex: none;
  font-family: var(--police-texte);
  font-weight: var(--graisse-normale);
  font-size: var(--taille-titre-xs);
  line-height: 1;
  color: var(--couleur-surface-violette);
  transition: transform var(--duree-standard) var(--courbe-defaut),
              color var(--duree-standard) var(--courbe-defaut);
}
.faq__item.est-ouvert .faq__signe {
  color: var(--couleur-accent);
  transform: rotate(45deg);
}

/* 0fr → 1fr : l'accordéon s'ouvre à la hauteur réelle de son contenu, sans
   hauteur calculée en JavaScript. */
.faq__panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duree-standard) var(--courbe-defaut);
}
.faq__item.est-ouvert .faq__panneau { grid-template-rows: 1fr; }
.faq__panneau > div { overflow: hidden; }
.faq__reponse {
  padding: 0 var(--esp-xl) var(--esp-lg);
  font-size: var(--taille-dense);
  line-height: var(--interligne-corps);
  color: var(--couleur-texte-secondaire);
  margin: 0;
}


/* --------------------------------------------------------------------------
   CheckoutGate — le portail d'engagement ne bloque pas, il RALENTIT : la
   secousse latérale de 5 px sur 0,45 s remplace le message d'erreur.
   Relief 1 sans bordure de carte : c'est un bloc, pas une carte.
   -------------------------------------------------------------------------- */
.portail {
  background: var(--surface-relief-1);
  border: var(--epaisseur-filet) solid var(--couleur-filet-marque);
  border-radius: var(--rayon-carte);
  padding: var(--esp-lg) var(--esp-xl);
  transition: transform var(--duree-secousse) var(--courbe-defaut);
}
.portail.secousse { animation: secousse var(--duree-secousse) var(--courbe-defaut); }

@keyframes secousse {
  0%, 100% { transform: none; }
  25%      { transform: translateX(var(--translation-secousse)); }
  75%      { transform: translateX(calc(var(--translation-secousse) * -1)); }
}

.portail__titre { color: var(--couleur-accent-survol); margin-bottom: var(--esp-sm); }
.portail__label {
  display: flex;
  gap: var(--esp-sm);
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--taille-dense);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-secondaire);
  transition: color var(--duree-rapide) var(--courbe-defaut);
}
.portail__label:hover { color: var(--couleur-texte-principal); }
.portail__case {
  width: 16px;
  height: 16px;
  margin: var(--esp-decalage) 0 0;
  accent-color: var(--couleur-accent);
  flex: none;
  cursor: pointer;
}
.portail__indice { color: var(--couleur-accent-survol); margin-top: var(--esp-sm); }
.portail.est-coche .portail__indice { display: none; }


/* --------------------------------------------------------------------------
   Entrée au scroll — 0,8 s, translation de 30 px. Pas de cascade, pas de
   rebond, pas de parallaxe.
   -------------------------------------------------------------------------- */
.apparition {
  opacity: 0;
  transform: translateY(var(--translation-apparition));
  transition: opacity var(--duree-apparition) var(--courbe-defaut),
              transform var(--duree-apparition) var(--courbe-defaut);
}
.apparition.est-visible { opacity: 1; transform: none; }


/* ==========================================================================
   POINTS DE RUPTURE
   ========================================================================== */

@media (max-width: 768px) {
  html { scroll-padding-top: var(--rythme-ancre-mobile); }

  .conteneur { padding-inline: var(--esp-xl); }

  /* Le burger remplace la navigation. */
  .burger { display: flex; }
  .entete__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--esp-md);
    margin: 0;
    padding: var(--esp-xl) var(--esp-xl) var(--esp-3xl);
    background: var(--couleur-fond-alternatif);
    border-bottom: var(--epaisseur-filet) solid var(--couleur-bordure);
    display: none;
  }
  .entete__nav.est-ouvert { display: flex; }
  .entete__nav .lien-nav { font-size: var(--taille-corps); }

  /* Le header se réduit au logo et au burger ; l'action et l'espace membre
     passent dans le menu déplié. Le bandeau collant porte de toute façon
     l'appel à l'action en permanence dans le registre vente. */
  .entete__actions .lien-nav,
  .entete__actions .btn { display: none; }
  .entete__nav .lien-nav.entete__nav-mobile { display: block; }
  .entete__nav .btn.entete__nav-mobile { display: inline-flex; margin-top: var(--esp-xs); }

  /* Le padding de carte descend d'UN pas — y compris pour la persona, qui
     part déjà d'un pas plus bas. */
  .carte--persona { padding: var(--esp-3xl); }

  .barre-confiance { gap: var(--esp-3xl); }
  .audience__valeur { font-size: var(--taille-titre-sm); }
  .audience__note { flex-direction: column; gap: var(--esp-3xs); }
  .faq__question { font-size: var(--taille-dense); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: var(--duree-mouvement-reduit) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duree-mouvement-reduit) !important;
  }
  .apparition { opacity: 1; transform: none; }
}