/* ==========================================================================
   CORNELL PREMIUM · FEUILLE DE STYLE COMMUNE
   Fichier unique importe par toutes les pages du site, francaises et anglaises.
   Aucun build, aucune dependance, aucun appel reseau.

   Regles de marque appliquees ici sans exception :
   · aucun noir, nulle part. Le marine #051D43 remplace le noir, y compris
     dans les ombres portees, qui utilisent rgba(5,29,67,...).
   · aucun tiret long, ni dans le code ni dans les commentaires.
   · le bordeaux mene : hero et CTA finaux. Le marine reste secondaire.
   · polices auto hebergees dans assets/fonts/, jamais de CDN.

   SOMMAIRE
   00 · Polices
   01 · Variables
   02 · Reinitialisation et bases
   03 · Typographie
   04 · Mise en page, sections, rythme bordeaux et beige
   05 · Boutons et liens d'action
   06 · En tete
   07 · Blocs de contenu communs
   08 · Avant et apres
   09 · Prix, cadeau, offre
   10 · Questions frequentes
   11 · Ecosysteme et boutique
   12 · Encadres reglementaires et marqueurs de redaction
   13 · Page d'accueil
   14 · Pages legales
   15 · Pied de page
   16 · Accessibilite et reglages d'affichage
   ========================================================================== */


/* ==========================================================================
   00 · POLICES

   Les fichiers de polices se deposent dans assets/fonts/.
   Deux formats sont acceptes, le navigateur prend le premier qu'il trouve :
     .woff2  le plus leger, le mieux
     .ttf    celui que Google Fonts donne directement, sans conversion

   Tant que le dossier assets/fonts/ est vide, le site s'affiche avec les
   polices de remplacement indiquees plus bas. Rien ne casse.

   Les roles proviennent de la charte graphique, pages 4 et 5.
   La liste des fichiers a telecharger figure dans A-COMPLETER.md.
   ========================================================================== */

@font-face{
  font-family:'Playfair Display';
  src:url('../fonts/PlayfairDisplay-SemiBold.woff2') format('woff2'),
      url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  src:url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
      url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  /* Le nom du fichier ci-dessous vient de Google Fonts. Il designe un poids
     de caractere, le plus gras, pas une couleur. */
  src:url('../fonts/PlayfairDisplay-900-Italic.woff2') format('woff2'),
      url('../fonts/PlayfairDisplay-BlackItalic.ttf') format('truetype');
  font-weight:900; font-style:italic; font-display:swap;
}

@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/EBGaramond-Regular.woff2') format('woff2'),
      url('../fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/EBGaramond-Italic.woff2') format('woff2'),
      url('../fonts/EBGaramond-Italic.ttf') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/EBGaramond-Medium.woff2') format('woff2'),
      url('../fonts/EBGaramond-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/EBGaramond-MediumItalic.woff2') format('woff2'),
      url('../fonts/EBGaramond-MediumItalic.ttf') format('truetype');
  font-weight:500; font-style:italic; font-display:swap;
}

@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2'),
      url('../fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}

@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-Regular.woff2') format('woff2'),
      url('../fonts/Jost-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-Medium.woff2') format('woff2'),
      url('../fonts/Jost-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-SemiBold.woff2') format('woff2'),
      url('../fonts/Jost-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ==========================================================================
   01 · VARIABLES
   Les neuf premieres sont les noms imposes. Les pages sources utilisaient des
   noms incompatibles entre elles, gold et or, beige-deep et beige-profond :
   tout est uniformise ici.
   ========================================================================== */

:root{
  /* Palette de marque, noms imposes */
  --bordeaux:#780000;        /* couleur de marque n1, fonds hero et CTA */
  --bordeaux-accent:#8C1C1C; /* texte d'accent sur fond beige */
  --marine:#051D43;          /* secondaire, remplace le noir partout */
  --beige:#F8F5EE;           /* fond clair principal */
  --beige-profond:#EFE8D8;   /* fond clair alternatif */
  --or:#D7A041;              /* or brillant, monogramme, titres sur fond sombre */
  --or-mat:#C0913A;          /* or texte, wordmark */
  --ivoire:#FFFDF7;          /* traits fins des pictogrammes */
  --gris:#5C5652;            /* texte secondaire */

  /* Nuances de service, derivees de la palette. Aucune couleur nouvelle. */
  --bordeaux-sombre:#5C0000;                  /* survol des boutons bordeaux */
  --or-clair:#E9C878;                         /* survol des boutons dores */
  --beige-doux:rgba(248,245,238,0.72);        /* texte secondaire sur fond sombre */
  --beige-discret:rgba(248,245,238,0.55);     /* notes fines sur fond sombre */
  --ligne-claire:rgba(5,29,67,0.14);          /* filets sur fond clair */
  --ligne-bordeaux:rgba(120,0,0,0.20);        /* filets bordeaux sur fond clair */
  --ligne-sombre:rgba(248,245,238,0.22);      /* filets sur fond sombre */
  --ombre:0 8px 24px rgba(5,29,67,0.18);      /* ombre standard, jamais de noir */
  --ombre-forte:0 18px 44px rgba(5,29,67,0.28);

  /* Mesures */
  --rayon:3px;
  --rayon-plein:999px;
  --largeur-texte:820px;
  --largeur-large:1080px;
  --largeur-etroite:680px;
  --gouttiere:28px;
  --section-y:88px;
  --section-y-mobile:60px;
  --hauteur-entete:76px;
}


/* ==========================================================================
   02 · REINITIALISATION ET BASES
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hauteur-entete) + 16px);}

body{
  background:var(--beige);
  color:var(--marine);
  font-family:'EB Garamond', Garamond, Georgia, serif;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
b,strong{font-weight:500;}


/* ==========================================================================
   03 · TYPOGRAPHIE
   Roles et corps repris de la charte graphique, page 5.
   ========================================================================== */

h1,h2,h3,h4{font-family:'Playfair Display', Georgia, serif;line-height:1.18;color:var(--marine);}

/* Titre principal : Playfair Display 900 italic, 44 a 72 px */
h1,.titre-1{
  font-weight:900;
  font-style:italic;
  font-size:clamp(44px, 6vw, 72px);
  line-height:1.08;
}

/* Titres de section : reprise des pages existantes, Playfair 700.
   Sur fond clair ils passent en bordeaux : c'est la couleur qui mène. */
h2,.titre-2{font-weight:700;font-size:clamp(28px, 3.4vw, 38px);}
.section--beige h2,.section--beige-profond h2,.section--ivoire h2{color:var(--bordeaux);}
h3,.titre-3{font-weight:600;font-size:21px;}
h4,.titre-4{font-weight:600;font-size:19px;}

/* Sous titre : EB Garamond 500 italic, 18 a 22 px */
.sous-titre{
  font-family:'EB Garamond', Garamond, Georgia, serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(18px, 2.1vw, 22px);
  line-height:1.45;
}

/* Citations : EB Garamond 400 italic, 18 a 22 px */
.citation,blockquote{
  font-style:italic;
  font-size:clamp(18px, 2vw, 22px);
  line-height:1.5;
}

/* Wordmark : Cormorant Garamond 600, tracking 0.2em, 14 a 30 px */
.wordmark{
  font-family:'Cormorant Garamond', Garamond, Georgia, serif;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-size:clamp(14px, 1.6vw, 30px);
}

/* Interface : Jost 500 majuscules, 10 a 13 px */
.ui,.eyebrow,.etiquette,.note,.bouton,.lien-doux{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

.eyebrow{
  display:inline-block;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--or-mat);
  margin-bottom:16px;
}
.eyebrow.sur-sombre{color:var(--or);}

p{margin-bottom:18px;max-width:66ch;}
p:last-child{margin-bottom:0;}

.texte-large p,.texte-large li{font-size:20px;}
.note{font-size:13px;line-height:1.5;color:var(--gris);}
.sur-sombre .note,.section--bordeaux .note,.section--marine .note{color:var(--beige-discret);}

/* Filet dore court, utilise sous les titres et dans le pied de page */
.filet{width:64px;height:2px;background:var(--or);border:none;margin:26px 0;}
.filet--centre{margin-left:auto;margin-right:auto;}

/* Accent bordeaux sur fond clair, ou dore sur fond sombre */
.accent{color:var(--bordeaux-accent);}
.section--bordeaux .accent,.section--marine .accent,.hero .accent{color:var(--or);}


/* ==========================================================================
   04 · MISE EN PAGE, SECTIONS, RYTHME BORDEAUX ET BEIGE
   Chaque page ouvre sur une section bordeaux. Ensuite l'alternance se fait
   avec le beige. Le marine reste reserve aux transitions et a l'ecosysteme.
   ========================================================================== */

.wrap{width:100%;max-width:var(--largeur-texte);margin:0 auto;padding:0 var(--gouttiere);}
.wrap--large{max-width:var(--largeur-large);}
.wrap--etroit{max-width:var(--largeur-etroite);}

section{padding:var(--section-y) 0;}

.section--bordeaux{background:var(--bordeaux);color:var(--beige);}
.section--marine{background:var(--marine);color:var(--beige);}
.section--beige{background:var(--beige);color:var(--marine);}
.section--beige-profond{background:var(--beige-profond);color:var(--marine);}
.section--ivoire{background:var(--ivoire);color:var(--marine);}

.section--bordeaux h1,.section--bordeaux h2,.section--bordeaux h3,.section--bordeaux h4,
.section--marine h1,.section--marine h2,.section--marine h3,.section--marine h4{color:var(--beige);}
.section--bordeaux p,.section--marine p{color:var(--beige-profond);}
.section--bordeaux .filet,.section--marine .filet{background:var(--or);}

.centre{text-align:center;}
.centre p,.centre .sous-titre{margin-left:auto;margin-right:auto;}


/* HERO
   Recit d'ouverture. Aucun bouton dans le hero des pages de vente : le premier
   CTA arrive seulement apres la fin du recit. */
.hero{
  background:var(--bordeaux);
  color:var(--beige);
  padding:calc(var(--section-y) + 22px) 0 var(--section-y);
}
.hero h1{color:var(--beige);}
.hero .sous-titre{color:var(--beige-profond);margin-top:12px;}
.hero .eyebrow{color:var(--or);}
.hero .recit{margin-top:36px;font-size:18.5px;color:var(--beige-profond);}
.hero .recit p{margin-bottom:18px;}
.hero .question{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;font-weight:600;
  color:var(--or);font-size:24px;margin:26px 0;
}
.hero .suite{
  font-style:italic;color:var(--or);font-size:20px;margin-top:28px;
}


/* ==========================================================================
   05 · BOUTONS ET LIENS D'ACTION
   Un seul texte de CTA par page, repete a l'identique. Les variantes ci
   dessous ne changent que la couleur selon le fond, jamais le libelle.
   ========================================================================== */

.bouton{
  display:inline-block;
  font-weight:500;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1.2;
  padding:18px 40px;
  border:2px solid transparent;
  border-radius:var(--rayon);
  cursor:pointer;
  transition:background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}
.bouton:hover{transform:translateY(-2px);}

/* Bouton principal sur fond clair */
.bouton--bordeaux{background:var(--bordeaux);color:var(--beige);}
.bouton--bordeaux:hover{background:var(--bordeaux-sombre);}

/* Bouton sur fond bordeaux ou marine */
.bouton--or{background:var(--or);color:var(--bordeaux);}
.bouton--or:hover{background:var(--or-clair);}

.bouton--ivoire{background:var(--beige);color:var(--bordeaux);}
.bouton--ivoire:hover{background:var(--beige-profond);}

/* Bouton secondaire, contour dore, jamais un CTA concurrent */
.bouton--contour{background:transparent;color:var(--or);border-color:var(--or);}
.bouton--contour:hover{background:var(--or);color:var(--bordeaux);}

.bouton--plein{width:100%;text-align:center;}
.bouton--pilule{border-radius:var(--rayon-plein);}

/* Precision sous le bouton : delai, format, condition d'age */
.sous-cta{
  display:block;
  margin-top:14px;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--gris);
}
.section--bordeaux .sous-cta,.section--marine .sous-cta,.hero .sous-cta{color:var(--beige-discret);}

/* Lien discret, pour un contact ou une ressource, jamais pour vendre */
.lien-doux{
  display:inline-block;
  font-weight:500;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--or-mat);
  border-bottom:1px solid var(--or-mat);
  padding-bottom:3px;
}
.section--bordeaux .lien-doux,.section--marine .lien-doux{color:var(--or);border-bottom-color:var(--or);}
.lien-doux:hover{color:var(--bordeaux);border-bottom-color:var(--bordeaux);}
.section--bordeaux .lien-doux:hover,.section--marine .lien-doux:hover{color:var(--or-clair);border-bottom-color:var(--or-clair);}


/* ==========================================================================
   06 · EN TETE
   Identique sur toutes les pages, francaises et anglaises.
   ========================================================================== */

.entete{
  position:sticky;top:0;z-index:60;
  background:var(--bordeaux);
  border-bottom:1px solid rgba(215,160,65,0.28);
}
.entete__inner{
  /* L'en-tete a besoin de plus de large que le corps de page : sept entrees de
     menu, le bouton du carnet et le selecteur de langue sur une seule ligne. */
  max-width:1340px;
  margin:0 auto;
  padding:0 var(--gouttiere);
  min-height:var(--hauteur-entete);
  display:flex;align-items:center;gap:24px;
}

/* Logo : monogramme et wordmark ensemble, hauteur 48 px, jamais sous 28 px de
   large. L'espace libre autour vaut la hauteur du monogramme, soit 48 px.

   Le fichier logo complet est un verrouillage vertical, monogramme au dessus du
   wordmark. Pose a 48 px de haut, son wordmark deviendrait illisible. On
   affiche donc cp-monogramme.png, le monogramme seul, et on compose le wordmark
   en texte vivant a cote, dans son role de charte : Cormorant Garamond 600,
   letter-spacing 0.2em.

   cp-monogramme.png a ete decoupe dans cp-logo.png, aux bornes exactes du
   monogramme. Le jour ou une version vectorielle existe, il suffit de remplacer
   le fichier : rien a changer ici. */
.entete__logo{display:flex;align-items:center;gap:14px;padding:14px 0;margin-right:auto;}
.entete__monogramme{flex:0 0 auto;display:flex;}
.entete__monogramme img{
  height:48px;width:auto;
  min-width:28px;   /* taille minimale lisible fixee par la charte */
}
.entete__wordmark{
  display:flex;flex-direction:column;line-height:1;
  color:var(--or);
  white-space:nowrap;
}
.entete__wordmark .nom{font-size:19px;letter-spacing:0.2em;}
.entete__wordmark .qualite{font-size:9.5px;letter-spacing:0.34em;margin-top:5px;opacity:0.9;}

.nav{display:flex;align-items:center;gap:22px;}
.nav a{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:11.5px;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--or);
  padding:6px 0;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--or);}
.nav a[aria-current="page"]{color:var(--or-clair);border-bottom-color:var(--or-clair);}

.entete__actions{display:flex;align-items:center;gap:18px;}

.entete__cta{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--or);color:var(--bordeaux);
  padding:11px 22px;border-radius:var(--rayon-plein);
  white-space:nowrap;
  transition:background .22s ease;
}
.entete__cta:hover{background:var(--or-clair);}

/* Selecteur de langue : la langue active en or, l'autre en ivoire a 60 pour cent */
.langues{
  display:flex;align-items:center;gap:7px;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:11.5px;letter-spacing:0.1em;
}
.langues span{color:rgba(255,253,247,0.35);}
.langues a{color:rgba(255,253,247,0.6);}
.langues a:hover{color:var(--or-clair);}
.langues a[aria-current="true"]{color:var(--or);}

/* Burger, actif sous 900 px */
.burger{
  display:none;
  width:42px;height:42px;
  background:transparent;border:1px solid rgba(215,160,65,0.5);border-radius:var(--rayon);
  cursor:pointer;
  padding:0;
  align-items:center;justify-content:center;
}
.burger span,.burger span::before,.burger span::after{
  display:block;width:18px;height:1.5px;background:var(--or);content:'';position:relative;
}
.burger span::before{position:absolute;top:-6px;}
.burger span::after{position:absolute;top:6px;}

/* Entre 1200 et 1400 px, le menu tient encore sur une ligne mais il faut le
   resserrer. Sept entrees en francais, plus le bouton et les deux langues,
   demandent environ 1300 px au corps nominal. */
@media (max-width:1400px){
  .entete__inner{gap:16px;}
  .entete__actions{gap:14px;}
  .nav{gap:15px;}
  .nav a{font-size:10.5px;letter-spacing:0.07em;}
  .entete__cta{padding:10px 16px;font-size:10.5px;letter-spacing:0.07em;}
  .entete__wordmark .nom{font-size:17px;letter-spacing:0.16em;}
}

/* En dessous de 1200 px, le menu passe en burger plein ecran, fond bordeaux.
   Le selecteur de langue et le bouton du carnet restent visibles hors du
   burger. La charte demande ce comportement au plus tard a 900 px : on le
   declenche plus tot, parce que les sept entrees ne tiennent plus au dela. */
@media (max-width:1200px){
  .burger{display:flex;}
  .nav{
    position:fixed;inset:var(--hauteur-entete) 0 0 0;
    background:var(--bordeaux);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:6px;
    padding:0 34px 60px;
    overflow-y:auto;
    transform:translateX(100%);
    /* visibility en plus de la translation : le menu ferme sort de l'ordre de
       tabulation et ne peut pas rester visible sur un ecran etroit. */
    visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;
  }
  .nav[data-ouvert="true"]{
    transform:translateX(0);
    visibility:visible;
    transition:transform .28s ease, visibility 0s;
  }
  .nav a{font-size:15px;letter-spacing:0.08em;padding:15px 0;width:100%;}
  .entete__inner{gap:14px;}
}
@media (max-width:640px){
  .entete__cta{padding:10px 14px;font-size:10px;letter-spacing:0.07em;}
  .entete__actions{gap:11px;}
  .entete__logo{gap:10px;}
  .entete__wordmark .nom{font-size:15px;letter-spacing:0.16em;}
  .entete__wordmark .qualite{font-size:8px;letter-spacing:0.26em;}
  /* Le monogramme descend a 39 px de haut, soit 42 px de large : au dessus
     des 28 px minimum fixes par la charte. */
  .entete__monogramme img{height:39px;}
}
@media (max-width:400px){
  .entete__wordmark{display:none;}   /* le monogramme seul reste lisible */
}


/* ==========================================================================
   07 · BLOCS DE CONTENU COMMUNS
   ========================================================================== */

/* Citation detachee, filet dore a gauche */
.pull-quote{
  font-style:italic;
  font-size:23px;line-height:1.45;
  color:var(--bordeaux);
  border-left:3px solid var(--or);
  padding-left:22px;
  margin:30px 0;
  max-width:54ch;
}
.section--bordeaux .pull-quote,.section--marine .pull-quote{color:var(--or);}

/* Scene narrative, encadre beige profond, ton du livre */
.scene-texte{
  background:var(--beige-profond);
  border-left:4px solid var(--or);
  padding:26px 30px;
  margin:28px 0;
  font-style:italic;
  font-size:21px;line-height:1.5;
  color:var(--marine);
}

/* Phrase de bascule en fin de section */
.phrase-cle{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;font-weight:600;
  font-size:24px;color:var(--bordeaux);
  margin-top:26px;
}
.section--bordeaux .phrase-cle,.section--marine .phrase-cle{color:var(--or);}

/* Liste a points medians dores */
.liste-points li{
  position:relative;padding-left:22px;margin-bottom:14px;max-width:62ch;
}
.liste-points li::before{
  content:'·';position:absolute;left:0;top:-4px;
  color:var(--or);font-size:22px;font-weight:700;
}
.liste-points--deux{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;}
.liste-points--deux li{margin-bottom:0;}

/* Liste miroir, les phrases dans lesquelles la lectrice se reconnait */
.liste-miroir li{
  position:relative;padding-left:34px;margin-bottom:18px;font-size:18px;max-width:64ch;
}
.liste-miroir .croix{
  position:absolute;left:0;top:2px;
  color:var(--or);font-size:15px;
}

/* Grille de mecanisme, deux colonnes de cartes courtes */
.grille-mecanisme{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:34px;}
.grille-mecanisme .item{border-top:2px solid var(--or);padding-top:16px;}
.grille-mecanisme .etiquette{
  display:block;font-weight:500;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--or-mat);margin-bottom:9px;
}
.section--bordeaux .grille-mecanisme .etiquette,
.section--marine .grille-mecanisme .etiquette{color:var(--or);}
.grille-mecanisme p{font-size:17.5px;margin-bottom:0;}

/* Grille de chapitres numerotes en chiffres romains */
.grille-chapitres{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px;margin-top:34px;}
.grille-chapitres .num{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;font-size:30px;color:var(--or);
  display:block;margin-bottom:6px;line-height:1;
}
.grille-chapitres h4{color:var(--bordeaux);margin-bottom:7px;}
.section--bordeaux .grille-chapitres h4,.section--marine .grille-chapitres h4{color:var(--beige);}
.grille-chapitres p{font-size:17.5px;margin-bottom:0;}

/* Liste de parties, filets fins, une ligne par partie du livre */
.parties .partie{padding:22px 0;border-bottom:1px solid var(--ligne-bordeaux);}
.parties .partie:first-child{border-top:1px solid var(--ligne-bordeaux);}
.parties h3{font-size:19px;color:var(--bordeaux);margin-bottom:7px;}
.parties p{font-size:17.5px;color:var(--gris);margin-bottom:0;}

/* Points de difference numerotes, 01 a 09 */
.atout{display:flex;gap:26px;padding:28px 0;border-bottom:1px solid var(--ligne-claire);}
.atout:last-child{border-bottom:none;}
.atout .num{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;font-size:34px;color:var(--or);
  min-width:54px;line-height:1;
}
.atout h3{color:var(--bordeaux);margin-bottom:7px;}
.atout p{font-size:17.5px;margin-bottom:0;}

/* Etapes numerotees, trois colonnes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px;}
.etape .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--rayon-plein);
  background:var(--or);color:var(--bordeaux);
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;font-weight:600;font-size:15px;
  margin-bottom:14px;
}
.etape h4{margin-bottom:7px;}
.etape p{font-size:17px;margin-bottom:0;}

/* Cartes de format ou de reference produit */
.cartes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;}
.carte{
  background:var(--ivoire);
  border:1px solid var(--ligne-claire);
  border-top:4px solid var(--bordeaux);
  border-radius:var(--rayon);
  padding:28px;
}
.carte h3{color:var(--bordeaux);margin-bottom:12px;}
.carte li{position:relative;padding:5px 0 5px 20px;font-size:17px;}
.carte li::before{content:'·';position:absolute;left:0;top:1px;color:var(--or);font-weight:700;font-size:20px;}

/* Etiquettes courtes, fiches ou caracteristiques */
.etiquettes{display:flex;flex-wrap:wrap;gap:9px;}
.etiquettes span{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:11px;letter-spacing:0.07em;text-transform:uppercase;
  border:1px solid var(--or);color:var(--or);
  padding:7px 13px;border-radius:var(--rayon-plein);
}
.section--beige .etiquettes span,.section--beige-profond .etiquettes span,.section--ivoire .etiquettes span{
  border-color:var(--or-mat);color:var(--or-mat);
}

/* Encadre sombre a l'interieur d'une section claire, pour un bonus inclus */
.encadre-sombre{
  background:var(--marine);color:var(--beige);
  border-radius:var(--rayon);
  padding:34px;
  margin-top:36px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;
}
.encadre-sombre h3{color:var(--or);margin-bottom:10px;}
.encadre-sombre p{color:var(--beige-profond);margin-bottom:0;}

/* Bloc produit de la page bien etre : un usage, un produit, un geste */
.theme{padding:30px 0;border-bottom:1px solid var(--ligne-claire);}
.theme:last-child{border-bottom:none;}
.theme h3{color:var(--bordeaux);margin-bottom:12px;}
.theme .scene{font-style:italic;font-size:18px;color:var(--gris);margin-bottom:14px;}
.produit{display:flex;gap:12px;align-items:baseline;margin:14px 0 8px;}
.produit .fleche{color:var(--or-mat);}
.produit .noms{font-size:18.5px;font-weight:500;}
.produit .commercial{color:var(--gris);font-weight:400;}


/* --------------------------------------------------------------------------
   Les memes composants sur fond sombre
   Les blocs ci dessus sont ecrits pour le beige. Poses sur bordeaux ou marine,
   leurs filets et leurs textes secondaires deviendraient illisibles. Ce bloc
   les rattrape, et rien d'autre. Il doit rester APRES les composants.
   -------------------------------------------------------------------------- */

.section--bordeaux .parties h3,   .section--marine .parties h3,
.section--bordeaux .atout h3,     .section--marine .atout h3,
.section--bordeaux .theme h3,     .section--marine .theme h3,
.section--bordeaux .faq-plat h4,  .section--marine .faq-plat h4{color:var(--or);}

.section--bordeaux .parties .partie,.section--marine .parties .partie,
.section--bordeaux .parties .partie:first-child,.section--marine .parties .partie:first-child,
.section--bordeaux .atout,        .section--marine .atout,
.section--bordeaux .theme,        .section--marine .theme,
.section--bordeaux .faq details,  .section--marine .faq details,
.section--bordeaux .faq-plat,     .section--marine .faq-plat{border-color:var(--ligne-sombre);}

.section--bordeaux .parties p,    .section--marine .parties p,
.section--bordeaux .theme .scene, .section--marine .theme .scene,
.section--bordeaux .faq .reponse, .section--marine .faq .reponse,
.section--bordeaux .faq-plat p,   .section--marine .faq-plat p{color:var(--beige-profond);}

.section--bordeaux .faq summary,  .section--marine .faq summary{color:var(--beige);}
.section--bordeaux .faq summary::after,.section--marine .faq summary::after,
.section--bordeaux .produit .fleche,.section--marine .produit .fleche,
.section--bordeaux .produit .commercial,.section--marine .produit .commercial{color:var(--or);}


/* ==========================================================================
   08 · AVANT ET APRES
   Trois formes selon la page source : lignes, paires, deux cartes.
   ========================================================================== */

/* Forme 1 : lignes avant, fleche, apres */
.scenes{display:flex;flex-direction:column;gap:14px;margin-top:34px;}
.scene-ligne{
  display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;
  background:var(--beige-profond);border-radius:var(--rayon);overflow:hidden;
}
.scene-ligne .avant,.scene-ligne .apres{padding:22px 24px;font-size:17px;}
.scene-ligne .avant{border-left:3px solid var(--bordeaux);color:var(--gris);}
.scene-ligne .apres{border-left:3px solid var(--or);font-weight:500;}
.scene-ligne .fleche{
  text-align:center;color:var(--or-mat);font-size:18px;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
}
.scene-ligne .tag{
  display:block;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;
}
.scene-ligne .avant .tag{color:var(--bordeaux);}
.scene-ligne .apres .tag{color:var(--or-mat);}

/* Forme 2 : paires compactes sur fond sombre */
.paires{display:flex;flex-direction:column;gap:10px;margin-top:32px;}
.paire{
  display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:8px;
  padding:16px 0;border-bottom:1px solid var(--ligne-sombre);
  font-size:17px;
}
.paire:last-child{border-bottom:none;}
.paire .avant{color:var(--beige-doux);}
.paire .fleche{text-align:center;color:var(--or);}
.paire .apres{color:var(--beige);font-weight:500;}
.section--beige .paire,.section--beige-profond .paire,.section--ivoire .paire{border-bottom-color:var(--ligne-claire);}
.section--beige .paire .avant,.section--beige-profond .paire .avant,.section--ivoire .paire .avant{color:var(--gris);}
.section--beige .paire .apres,.section--beige-profond .paire .apres,.section--ivoire .paire .apres{color:var(--marine);}
.section--beige .paire .fleche,.section--beige-profond .paire .fleche,.section--ivoire .paire .fleche{color:var(--or-mat);}

/* Forme 3 : deux cartes face a face */
.deux-cartes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;}
.deux-cartes .carte-avant{background:var(--beige-profond);border-top:4px solid var(--gris);padding:28px;border-radius:var(--rayon);}
.deux-cartes .carte-apres{background:var(--ivoire);border-top:4px solid var(--bordeaux);padding:28px;border-radius:var(--rayon);}
.deux-cartes .label{
  display:block;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:12px;
}
.deux-cartes .carte-avant .label{color:var(--gris);}
.deux-cartes .carte-apres .label{color:var(--bordeaux);}
.deux-cartes p{font-style:italic;font-size:18px;margin-bottom:0;}

/* Phrase de fermeture apres un bloc avant et apres */
.fermeture{
  font-style:italic;font-size:21px;text-align:center;
  margin-top:34px;color:var(--bordeaux);
}
.section--bordeaux .fermeture,.section--marine .fermeture{color:var(--or);}


/* ==========================================================================
   09 · PRIX, CADEAU, OFFRE
   Aucun compteur de places, aucune valeur marche inventee, aucun prix barre
   sans les deux prix presentes clairement comme lancement et prix suivant.
   ========================================================================== */

.carte-offre{
  background:var(--ivoire);
  border:1px solid var(--ligne-claire);
  border-top:5px solid var(--bordeaux);
  border-radius:var(--rayon);
  box-shadow:var(--ombre);
  padding:38px 34px;
  max-width:560px;margin:34px auto 0;
  text-align:center;
}
.carte-offre .mention-offre{
  display:inline-block;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:11px;letter-spacing:0.11em;text-transform:uppercase;
  background:var(--bordeaux);color:var(--beige);
  padding:7px 16px;border-radius:var(--rayon-plein);
  margin-bottom:24px;
}
.carte-offre .inclus{text-align:left;margin-bottom:26px;}
.carte-offre .inclus li{
  position:relative;padding-left:22px;margin-bottom:12px;font-size:17.5px;
}
.carte-offre .inclus li::before{content:'·';position:absolute;left:0;top:-3px;color:var(--or);font-size:21px;font-weight:700;}

.ligne-prix{display:flex;align-items:baseline;justify-content:center;gap:16px;margin-bottom:8px;}
.ligne-prix .ancien{
  font-size:22px;color:var(--gris);text-decoration:line-through;
}
.ligne-prix .montant{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;font-size:56px;color:var(--bordeaux);line-height:1;
}
.ligne-prix .montant sup{font-size:26px;top:-0.55em;}
.mention-prix{font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;font-size:12.5px;color:var(--gris);margin-bottom:22px;}
.mention-delai{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--or-mat);margin-bottom:24px;
}
.rassurance{
  font-style:italic;font-size:18px;text-align:center;
  max-width:52ch;margin:28px auto 0;color:var(--gris);
}


/* ==========================================================================
   10 · QUESTIONS FREQUENTES
   Deux formes selon la page source : depliant, ou question et reponse a plat.
   ========================================================================== */

.faq details{border-bottom:1px solid var(--ligne-claire);padding:20px 0;}
.faq summary{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:17px;
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  color:var(--marine);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+';
  font-family:'Playfair Display', Georgia, serif;font-size:24px;color:var(--or-mat);
  flex:0 0 auto;
}
.faq details[open] summary::after{content:'\2212';}
.faq .reponse{padding-top:14px;font-size:17.5px;color:var(--gris);max-width:64ch;}

.faq-plat{border-bottom:1px solid var(--ligne-claire);padding:22px 0;}
.faq-plat h4{color:var(--bordeaux);margin-bottom:8px;}
.faq-plat p{font-size:17.5px;color:var(--gris);margin-bottom:0;}


/* ==========================================================================
   11 · ECOSYSTEME ET BOUTIQUE
   Sections marine, secondaires. Un seul produit se vend par page : ici les
   autres sont mentionnes, jamais vendus.
   ========================================================================== */

.ecosysteme li b{color:var(--beige);font-weight:500;}
.ecosysteme li{color:var(--beige-profond);}


/* ==========================================================================
   12 · ENCADRES REGLEMENTAIRES ET MARQUEURS DE REDACTION
   ========================================================================== */

/* Encadre bien etre et Human Design, obligatoire sur les pages concernees */
.avertissement{
  background:var(--beige-profond);
  border-left:4px solid var(--or-mat);
  border-radius:var(--rayon);
  padding:24px 28px;
  margin:36px 0;
  font-size:16.5px;line-height:1.55;color:var(--gris);
}
.avertissement h3{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:600;font-size:12px;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--bordeaux);margin-bottom:10px;
}
.avertissement p{max-width:none;}
.section--bordeaux .avertissement,.section--marine .avertissement{
  background:rgba(248,245,238,0.08);border-left-color:var(--or);color:var(--beige-profond);
}
.section--bordeaux .avertissement h3,.section--marine .avertissement h3{color:var(--or);}

/* Marqueur visible des informations manquantes. Toutes sont recensees dans
   A-COMPLETER.md a la racine du site. */
.a-completer{
  background:var(--beige-profond);
  color:var(--bordeaux-accent);
  border:1px dashed var(--bordeaux-accent);
  border-radius:2px;
  padding:1px 6px;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12.5px;
  font-style:normal;
  white-space:normal;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;   /* le cadre reste propre quand le texte passe a la ligne */
}

/* Emplacement d'image en attente de visuel definitif */
.image-attente{
  display:flex;align-items:center;justify-content:center;
  min-height:220px;
  background:var(--beige-profond);
  border:1px dashed var(--or-mat);
  border-radius:var(--rayon);
  color:var(--gris);
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  text-align:center;padding:20px;
}


/* ==========================================================================
   13 · PAGE D'ACCUEIL
   Structure reprise de la maquette : logo a gauche, titre au centre, cerveau
   a droite, six boutons pilules, ligne Instagram, puis six blocs alternes.
   ========================================================================== */

.accueil-hero{
  background:var(--bordeaux);color:var(--beige);
  padding:64px 0 56px;
}
.accueil-hero__grille{
  /* Plus large que le corps de page : la maquette Canva pose trois colonnes,
     et les six pilules ont besoin de place pour rester lisibles sur deux
     colonnes sans casser les libelles en trois lignes. */
  max-width:1400px;margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:0.9fr 2.2fr 1fr;gap:30px;align-items:center;
}
.accueil-hero__logo img{width:100%;max-width:220px;margin:0 auto;}
.accueil-hero__centre{display:flex;flex-direction:column;align-items:center;text-align:center;}
.accueil-hero h1{
  color:var(--or);
  font-size:clamp(32px, 4vw, 56px);
  margin-bottom:38px;
  text-shadow:0 2px 18px rgba(5,29,67,0.28);
}
.accueil-hero__cerveau img{width:100%;max-width:330px;margin:0 auto;}

.pilules{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;width:100%;max-width:790px;}
.pilule{
  display:flex;align-items:center;gap:16px;
  background:var(--ivoire);color:var(--bordeaux);
  border-radius:var(--rayon-plein);
  padding:14px 26px 14px 18px;
  min-height:76px;
  box-shadow:0 6px 18px rgba(5,29,67,0.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pilule:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);}
.pilule img{flex:0 0 auto;width:40px;height:40px;object-fit:contain;}
.pilule span{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  line-height:1.3;text-align:left;
}

.instagram{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:44px;color:var(--or);
}
.instagram svg{width:32px;height:32px;flex:0 0 auto;}
.instagram span{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  line-height:1.35;text-align:left;
}
.instagram:hover{color:var(--or-clair);}

/* Six blocs descriptifs, alternance bordeaux et beige */
.bloc-accueil .accroche{
  display:block;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:500;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;
  line-height:1.6;
  margin-bottom:20px;
  max-width:70ch;
}
.section--bordeaux .bloc-accueil .accroche,
.section--marine .bloc-accueil .accroche{color:var(--or);}
.section--beige .bloc-accueil .accroche,
.section--beige-profond .bloc-accueil .accroche{color:var(--bordeaux-accent);}
.bloc-accueil h2{margin-bottom:8px;}
.bloc-accueil .sous-titre{margin-bottom:22px;}
.bloc-accueil .bouton{margin-top:12px;}


/* ==========================================================================
   14 · PAGES LEGALES
   Entierement en beige, mise en page sobre, une seule colonne.
   ========================================================================== */

.legal{background:var(--beige);padding:56px 0 var(--section-y);}
.legal .wrap{max-width:760px;}
.legal h1{
  font-size:clamp(32px, 3.6vw, 44px);
  font-style:normal;font-weight:700;
  color:var(--bordeaux);
  margin-bottom:10px;
}
.legal .maj{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gris);
  margin-bottom:40px;
}
.legal h2{
  font-size:23px;color:var(--bordeaux);
  margin:44px 0 14px;padding-top:22px;
  border-top:1px solid var(--ligne-claire);
}
.legal h3{font-size:18px;color:var(--marine);margin:26px 0 10px;}
.legal p,.legal li{font-size:17.5px;}
.legal ul{margin:0 0 18px;}
.legal li{position:relative;padding-left:20px;margin-bottom:9px;}
.legal li::before{content:'·';position:absolute;left:0;top:-3px;color:var(--or-mat);font-size:20px;font-weight:700;}
.legal dl{margin-bottom:18px;}
.legal dt{font-weight:500;color:var(--bordeaux);margin-top:12px;}
.legal dd{margin-left:0;}
.legal .avis-traduction{
  background:var(--beige-profond);
  border-left:4px solid var(--bordeaux);
  border-radius:var(--rayon);
  padding:18px 22px;margin-bottom:34px;
  font-size:16.5px;color:var(--gris);
}


/* ==========================================================================
   15 · PIED DE PAGE
   Bloc CTA carnet, trois colonnes marine, affiliation, avertissement, annee.
   ========================================================================== */

/* 1 · Bloc CTA, present sur chaque page. Sur la page du carnet il est remplace
   par un renvoi vers le livre, pour eviter le CTA en boucle. */
/* Filet doré en haut : sur les pages dont le CTA final est en bordeaux, il
   évite que les deux blocs se fondent en un seul aplat. */
.pied-cta{
  background:var(--bordeaux);color:var(--beige);text-align:center;padding:76px 0;
  border-top:2px solid var(--or);
}
.pied-cta h2{color:var(--beige);margin-bottom:12px;}
.pied-cta p{color:var(--beige-profond);max-width:48ch;margin:0 auto 30px;}

/* 2 · Trois colonnes */
.pied{background:var(--marine);color:var(--beige-doux);padding:60px 0 34px;}
.pied a{color:var(--beige-doux);}
.pied a:hover{color:var(--or);}
.pied__colonnes{
  max-width:var(--largeur-large);margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
}
.pied h3{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight:600;font-size:11.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--or);margin-bottom:16px;
}
.pied li{margin-bottom:10px;font-size:16.5px;}

/* 3 et 4 · Affiliation et avertissement */
.pied__mentions{
  max-width:var(--largeur-large);margin:44px auto 0;padding:26px var(--gouttiere) 0;
  border-top:1px solid var(--ligne-sombre);
}
.pied__mentions p{
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;line-height:1.7;color:var(--beige-discret);
  max-width:none;margin-bottom:12px;
}

/* 5 · Annee */
.pied__annee{
  text-align:center;margin-top:22px;
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:11.5px;letter-spacing:0.08em;color:var(--beige-discret);
}


/* ==========================================================================
   16 · ACCESSIBILITE ET REGLAGES D'AFFICHAGE
   ========================================================================== */

a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{
  outline:3px solid var(--or);
  outline-offset:3px;
  border-radius:2px;
}

/* Lien d'evitement. Masque par decoupe plutot que par une position hors
   ecran, qui creerait un debordement horizontal de la page. */
.saut-contenu{
  position:absolute;left:12px;top:12px;z-index:100;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  background:var(--or);color:var(--bordeaux);
  font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  padding:12px 18px;white-space:nowrap;
}
.saut-contenu:focus{
  width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;
}

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


/* --- Tablette --- */
/* En dessous de 1100 px, les trois colonnes du hero d'accueil compriment trop
   la colonne centrale : on empile logo, titre et boutons, le cerveau passe en
   dessous. */
@media (max-width:1100px){
  .accueil-hero__grille{grid-template-columns:1fr;text-align:center;}
  .accueil-hero__logo img{max-width:150px;}
  .accueil-hero__cerveau{order:3;margin-top:22px;}
  .accueil-hero__cerveau img{max-width:230px;}
}

@media (max-width:900px){
  .etapes{grid-template-columns:1fr;gap:26px;}
  .pied__colonnes{grid-template-columns:1fr 1fr;}
}

/* --- Mobile --- */
@media (max-width:760px){
  body{font-size:18px;}
  section{padding:var(--section-y-mobile) 0;}
  :root{--gouttiere:22px;}
  .hero{padding:56px 0 var(--section-y-mobile);}

  .pilules{grid-template-columns:1fr;}
  .grille-mecanisme,.grille-chapitres,.cartes,.deux-cartes,.encadre-sombre,.liste-points--deux{
    grid-template-columns:1fr;
  }
  .encadre-sombre{padding:26px;}

  .scene-ligne{grid-template-columns:1fr;}
  .scene-ligne .fleche{transform:rotate(90deg);padding:6px 0;}
  .paire{grid-template-columns:1fr;gap:6px;}
  .paire .fleche{text-align:left;transform:rotate(90deg);width:20px;}

  .atout{flex-direction:column;gap:6px;}
  .atout .num{font-size:28px;}

  .carte-offre{padding:30px 22px;}
  .ligne-prix .montant{font-size:46px;}

  .pied__colonnes{grid-template-columns:1fr;gap:30px;}
  .scene-texte{padding:22px;font-size:19px;}
}

/* --- Confort de lecture --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}