/* Meridal, maquette du site. Feuille commune à toutes les pages.

   Sources :
   - compositions : planches/gabarits.html, §A, validées par Oscar ; 04-declinaisons.md, §1 et §2 ;
   - jetons : 03-direction-faience.md, §5 ; 05-mode-sombre.md, §4 (nuit bleutée) ; 08-composants.md ;
   - boutons : planches/fiche-bouton.html (pilule, trait peint « main posée », Literata) ;
   - textes : 07-site.md, relus contre la charte éditoriale.

   Organisation : 1 jetons · 2 base · 3 mise en page · 4 typographie · 5 boutons · 6 marque ·
   7 en-tête · 8 images · 9 composants · 10 compositions de page · 11 pied · 12 ruptures.
   Mobile d'abord. Ruptures : 600 (tablette portrait), 900 (tablette paysage et portable),
   1 200 (ordinateur), 1 600 (grand écran). */

/* ————————————————————————————————————————————— 1. les jetons */
:root{
  /* couleurs, clair (émail) */
  --fond:#F4F0E6; --fond-2:#ECE6D8; --eleve:#FBF8F1; --creme:#FBF8F1;
  --texte:#17181C; --texte-2:#5B5A55; --filet:#D9D2C1; --trait-2:#C9C1AE; --contour:#847F75;
  --accent:#1C3D8C; --accent-survol:#17347A; --accent-presse:#12275C; --sur-accent:#F7F3EA;
  --destructif:#963020; --focus:#17181C;
  --selection:#D5DEF3; --selection-texte:#12275C;   /* G28 : le bleu pâle de l'émail, l'encre de nuit */
  --survol:rgba(23,24,28,.06); --survol-presse:rgba(23,24,28,.11);
  --champ:#FBF8F1;
  --email-fixe:#F4F0E6; --cobalt-fixe:#1C3D8C; --nuit-fixe:#0E1220;
  --voile-film:linear-gradient(0deg,rgba(8,14,34,.82) 0%,rgba(8,14,34,.35) 55%,rgba(8,14,34,.05) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .40  0 0 0 0 .32  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacite:.2; --grain-mode:multiply;
  --image-filtre:none;

  /* espace : une seule échelle, fluide */
  --marge:clamp(1.25rem, .6rem + 3.2vw, 4rem);          /* 20 → 64 px, bord de page */
  --contenu:78rem;                                      /* 1 248 px de contenu */
  --gout:clamp(1rem, .6rem + 1.6vw, 2rem);             /* 16 → 32 px, entre colonnes */
  --duo:clamp(2rem, .9rem + 4.4vw, 5rem);              /* 32 → 80 px, entre texte et image */
  --section:clamp(4.5rem, 2.8rem + 6.8vw, 9rem);        /* 72 → 144 px, entre sections */
  --pile:1rem;
  --rayon:28px; --rayon-m:20px; --rayon-champ:14px; --rayon-film:32px;
  --entete:4.5rem;

  /* typographie : Fraunces adoucie pour les titres, Figtree pour le texte */
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bouton:Literata,Georgia,serif;
  --t-xl:clamp(2.625rem, 1.55rem + 3.9vw, 4.75rem);      /* 42 → 76 px, ouverture de l'accueil */
  --t-1:clamp(2.375rem, 1.5rem + 3.2vw, 4.5rem);         /* 38 → 72 px, titre de page */
  --t-2:clamp(1.875rem, 1.3rem + 2vw, 3.125rem);         /* 30 → 50 px, titre de section */
  --t-3:clamp(1.375rem, 1.18rem + .75vw, 1.875rem);      /* 22 → 30 px */
  --t-4:clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);       /* 19 → 22 px */
  --t-chiffre:clamp(2.5rem, 1.9rem + 2.2vw, 4rem);
  --t-chapo:clamp(1.125rem, 1.04rem + .38vw, 1.3125rem); /* 18 → 21 px */
  --t-corps:1.0625rem;                                   /* 17 px */
  --t-leg:.9375rem;                                      /* 15 px */
  --t-petit:.875rem;
  --mesure:62ch;
  color-scheme:light;
}
@media (min-width:900px){:root{--entete:5.25rem}}
@media (min-width:1600px){:root{--contenu:84rem}}

/* le sombre : nuit bleutée (05, décision du 29 septembre 2026). Il suit le système,
   sauf si le visiteur a choisi par l'interrupteur de l'en-tête. */
:root[data-theme="sombre"]{
  --fond:#0E1220; --fond-2:#161B2C; --eleve:#1F2538; --creme:#1F2538;
  --texte:#EDE7DA; --texte-2:#A8A294; --filet:#2B3247; --trait-2:#3B4360; --contour:#6B7493;
  --accent:#9DB3F0; --accent-survol:#B3C4F3; --accent-presse:#869FDD; --sur-accent:#0E1220;
  --destructif:#E59A86; --focus:#EDE7DA; --selection:#2C4588; --selection-texte:#F4F0E6;
  --survol:rgba(244,240,230,.08); --survol-presse:rgba(244,240,230,.13);
  --champ:#161B2C;
  --voile-film:linear-gradient(0deg,rgba(14,18,32,.9) 0%,rgba(14,18,32,.4) 55%,rgba(14,18,32,.08) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .94  0 0 0 0 .90  0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacite:.06; --grain-mode:screen;
  --image-filtre:brightness(.88) saturate(.95);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --fond:#0E1220; --fond-2:#161B2C; --eleve:#1F2538; --creme:#1F2538;
    --texte:#EDE7DA; --texte-2:#A8A294; --filet:#2B3247; --trait-2:#3B4360; --contour:#6B7493;
    --accent:#9DB3F0; --accent-survol:#B3C4F3; --accent-presse:#869FDD; --sur-accent:#0E1220;
    --destructif:#E59A86; --focus:#EDE7DA; --selection:#2C4588; --selection-texte:#F4F0E6;
    --survol:rgba(244,240,230,.08); --survol-presse:rgba(244,240,230,.13);
    --champ:#161B2C;
    --voile-film:linear-gradient(0deg,rgba(14,18,32,.9) 0%,rgba(14,18,32,.4) 55%,rgba(14,18,32,.08) 100%);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .94  0 0 0 0 .90  0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacite:.06; --grain-mode:screen;
    --image-filtre:brightness(.88) saturate(.95);
    color-scheme:dark;
  }
}

/* ————————————————————————————————————————————— 2. la base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 1.5rem)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--texte);
  font-family:var(--sans);font-size:var(--t-corps);line-height:1.6;font-feature-settings:"kern";
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:var(--grain-opacite);mix-blend-mode:var(--grain-mode);background-image:var(--grain)}
main{flex:1 0 auto}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* G28 (09-mouvement.md, §13.2) : la sélection prend les couleurs de la maison, en clair comme en sombre */
::selection{background:var(--selection);color:var(--selection-texte)}
main:focus{outline:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
sup{font-size:.6em;color:var(--texte-2);font-weight:600;margin-left:1px;line-height:0}
sup a{text-decoration:none;color:inherit}
.ins{white-space:nowrap}
.visuel-seul{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:var(--marge);top:-6rem;z-index:90;background:var(--fond);color:var(--texte);padding:.625rem 1rem;border-radius:var(--rayon-champ);box-shadow:inset 0 0 0 2px var(--texte);font-weight:600;text-decoration:none}
.evitement:focus{top:.75rem}
/* Lisible par un lecteur d'écran et par tout programme qui lit le code, invisible à l'œil : la légende des tableaux (site/publier.mjs). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ————————————————————————————————————————————— 3. la mise en page */
.w{width:100%;max-width:calc(var(--contenu) + 2 * var(--marge));margin-inline:auto;padding-inline:var(--marge)}
.section{padding-block:var(--section) 0}
.section.serre{padding-top:calc(var(--section) * .55)}
.section.fin{padding-bottom:var(--section)}
.tete-page{padding-top:clamp(2.5rem, 1.5rem + 4vw, 5.5rem)}

/* deux colonnes, texte et image : empilées sur mobile, côte à côte dès 900 px */
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,1.2rem + 3vw,3rem) var(--duo);align-items:center}
.duo.haut{align-items:start}

/* grilles de cartes : 1, puis 2 dès 600 px, puis 3 ou 4 dès 900 px */
.grille{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}

/* une pile : un écart vertical régulier entre enfants */
.pile{display:flex;flex-direction:column;gap:var(--pile)}
.pile > *{margin:0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem 1rem}

/* l'ouverture de section : une légende, un titre, un chapeau */
.intro{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
.intro.centre{margin-inline:auto;text-align:center;align-items:center}
.intro + *{margin-top:clamp(2rem,1.4rem + 2.4vw,3.5rem)}

/* ————————————————————————————————————————————— 4. la typographie */
.f,.titre-xl,.titre-1,.titre-2,.titre-3,.titre-4,.chiffre{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;letter-spacing:-.018em;text-wrap:balance}
.titre-xl{font-size:var(--t-xl);line-height:1.02;letter-spacing:-.025em}
.titre-1{font-size:var(--t-1);line-height:1.04;letter-spacing:-.022em}
.titre-2{font-size:var(--t-2);line-height:1.08}
.titre-3{font-size:var(--t-3);line-height:1.18;letter-spacing:-.012em}
.titre-4{font-size:var(--t-4);line-height:1.25;letter-spacing:-.008em}
.chiffre{font-size:var(--t-chiffre);line-height:1;letter-spacing:-.02em}
.legende{font-size:var(--t-leg);font-weight:500;line-height:1.4;color:var(--texte-2)}
.chapo{font-size:var(--t-chapo);line-height:1.55;color:var(--texte-2);max-width:var(--mesure);text-wrap:pretty}
.chapo.fort{color:var(--texte)}
.texte{max-width:var(--mesure);text-wrap:pretty}
.texte > * + *{margin-top:.875rem}
.discret{color:var(--texte-2)}
.petit{font-size:var(--t-petit);line-height:1.5}
.lien-fleche{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);font-weight:600;text-decoration:none}
.lien-fleche::after{content:"→";transition:transform .15s ease}
.lien-fleche:hover::after{transform:translateX(3px)}
.lien-fleche:hover{text-decoration:underline}

/* ————————————————————————————————————————————— 5. les boutons (fiche-bouton.html) */
.b{--b-fond:var(--accent);--b-survol:var(--accent-survol);--b-presse:var(--accent-presse);
  --b-sec-fond:var(--creme);--b-sec-presse:var(--fond-2);--b-trait:var(--texte);--b-lien:var(--accent);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:50px;padding:.5rem 1.625rem;border:0;border-radius:99px;background:none;cursor:pointer;
  font-family:var(--bouton);font-weight:500;font-variation-settings:'opsz' 24;font-size:1.125rem;line-height:1.25;
  white-space:nowrap;text-decoration:none;text-align:center;vertical-align:middle;transition:transform .12s ease}
.b > svg.trait{position:absolute;z-index:-1;overflow:visible;pointer-events:none;max-width:none}
.b.pr{color:var(--sur-accent);background:var(--accent)}
.b:not(.pr):not(.lien){color:var(--texte);background:var(--creme);box-shadow:inset 0 0 0 2px var(--texte)}
.b.lien{color:var(--accent);min-height:44px;padding:0 2px;white-space:normal;text-align:left;text-decoration:underline;text-underline-offset:.35em}
.b.petit{min-height:40px;padding:.375rem 1.125rem;font-size:1rem}
.b.peint{background:none !important;box-shadow:none !important;text-decoration:none}
.b:active{transform:translateY(1px)}
.b:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.b[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
/* sur une image sombre, le principal s'inverse en aplat émail (fiche du bouton) */
.film .b{--b-fond:var(--email-fixe);--b-survol:#E8E1D2;--b-presse:#DDD4C1;--b-trait:var(--email-fixe);--b-sec-fond:transparent;--b-sec-presse:rgba(244,240,230,.12);--b-lien:var(--email-fixe)}
.film .b.pr{color:var(--cobalt-fixe)}
.film .b:not(.pr){color:var(--email-fixe)}

/* ————————————————————————————————————————————— 6. la marque : SVG en masque, la couleur suit l'accent (05, §5.4) */
.lockup{display:block;height:34px;aspect-ratio:4125.4/907;background:var(--accent);
  -webkit-mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v3-lockup.svg") left center/contain no-repeat;mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v3-lockup.svg") left center/contain no-repeat}
.embleme{display:block;aspect-ratio:1;background:var(--accent);
  -webkit-mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v3.svg") center/contain no-repeat;mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v3.svg") center/contain no-repeat}
.embleme.plein{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v4.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v4.svg")}
/* le lockup de l'en-tête, composé (variante E, choisie par Oscar le 29 septembre 2026) :
   le globe plein, car il est sous 96 px (03, §3.8), 1,1 fois la hauteur du mot, puis le mot */
.lockup-entete{display:inline-flex;align-items:center;--h:clamp(30px,1.4rem + .6vw,38px);gap:calc(var(--h) * .4)}
.lockup-entete .globe{display:block;height:calc(var(--h) * 1.1);aspect-ratio:1;background:var(--accent);
  -webkit-mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v4.svg") center/contain no-repeat;mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v4.svg") center/contain no-repeat}
.lockup-entete .mot{display:block;height:calc(var(--h) * .917);aspect-ratio:3034/831.8;background:var(--accent);
  -webkit-mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/logo-b-encre.svg") center/contain no-repeat;mask:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/logo-b-encre.svg") center/contain no-repeat}
/* Meridal Learn (39-meridal-learn.md, variante A, choisie par Oscar le 10 octobre 2026) : dans la rubrique
   Apprendre, « Learn » suit le mot, à la même graisse et sur la même ligne de base (marque/learn.py) */
.lockup-entete .grp{display:flex;align-items:flex-end;gap:calc(var(--h) * .3)}
.lockup-entete .learn{display:block;height:calc(var(--h) * .917 * 800.2 / 831.8);aspect-ratio:2309.4/800.2;background:var(--accent);
  -webkit-mask:url("../../marque/sorties/Learn/learn-400.svg") center/contain no-repeat;mask:url("../../marque/sorties/Learn/learn-400.svg") center/contain no-repeat}
/* à 320 px, le lockup à trois pièces repoussait le bouton de menu hors de l'écran : il rétrécit */
@media (max-width:359px){.lockup-entete:has(.learn){--h:23px}}
/* sur un écran à un pixel par pixel CSS, les joints du globe tombaient entre deux pixels et
   se cassaient : le globe y prend le dessin ajusté au pixel de sa taille, de 33 à 42 px
   (38-logo-en-petit.md, §8). site.js arrondit sa boîte, pose data-px et la cale sur la grille ;
   les images du survol et de l'attente (mouvement.css) passent devant. */
.lockup-entete .globe[data-px="33"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-33.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-33.svg")}
.lockup-entete .globe[data-px="34"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-34.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-34.svg")}
.lockup-entete .globe[data-px="35"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-35.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-35.svg")}
.lockup-entete .globe[data-px="36"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-36.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-36.svg")}
.lockup-entete .globe[data-px="37"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-37.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-37.svg")}
.lockup-entete .globe[data-px="38"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-38.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-38.svg")}
.lockup-entete .globe[data-px="39"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-39.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-39.svg")}
.lockup-entete .globe[data-px="40"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-40.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-40.svg")}
.lockup-entete .globe[data-px="41"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-41.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-41.svg")}
.lockup-entete .globe[data-px="42"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-42.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v4-px-42.svg")}

/* ————————————————————————————————————————————— 7. l'en-tête */
/* fond émail opaque, pas de verre dépoli : la faïence est opaque (05, §1 ; 07, §1.2) */
.entete{position:sticky;top:0;z-index:50;background:var(--fond);border-bottom:1px solid transparent;transition:border-color .2s ease}
.entete.defile{border-bottom-color:var(--filet)}
.entete-in{display:flex;align-items:center;gap:1rem;min-height:var(--entete)}
.marque{display:inline-flex;align-items:center;flex:none;text-decoration:none;border-radius:6px}

.nav{display:none}
.nav ul{display:flex;align-items:center;gap:clamp(1.25rem,.4rem + 1.6vw,2.25rem);list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:500;color:var(--texte);text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.outils{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.langue{display:none;align-items:center;gap:.375rem;font-size:.875rem;font-weight:500;color:var(--texte-2)}
.langue [aria-current="true"]{color:var(--texte)}
.langue .a-venir{color:var(--texte-2);opacity:.75;cursor:help;text-decoration:underline dotted;text-underline-offset:.3em}
/* les boutons ronds : un cercle visible de 36 px, dans une zone de clic de 44 px (variante E) */
.theme-btn,.menu-btn{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--texte);cursor:pointer}
.theme-btn::before,.menu-btn::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:50%;background:var(--survol);transition:background .15s ease}
.theme-btn:hover::before,.menu-btn:hover::before{background:var(--survol-presse)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .lune{display:none}
:root[data-theme-actif="sombre"] .theme-btn .soleil{display:none}
:root[data-theme-actif="sombre"] .theme-btn .lune{display:block}
.entete .cta{display:none}
.menu-btn .ico{position:relative;width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-btn .ico::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.menu-btn[aria-expanded="true"] .ico{border:0;height:18px}
.menu-btn[aria-expanded="true"] .ico::before,.menu-btn[aria-expanded="true"] .ico::after{content:"";position:absolute;left:0;right:0;top:8px;border-top:2px solid currentColor;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .ico::after{transform:rotate(-45deg)}
.menu-panneau{position:fixed;left:0;right:0;bottom:0;top:var(--entete);z-index:49;background:var(--fond);overflow-y:auto;padding:1.5rem var(--marge) 3rem}
.menu-panneau[hidden]{display:none}
.menu-panneau ul{list-style:none}
.menu-panneau li{border-bottom:1px solid var(--filet)}
.menu-panneau li:first-child{border-top:1px solid var(--filet)}
.menu-panneau .entree{display:block;padding:1rem 0;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:clamp(1.625rem,1.3rem + 1.5vw,2.25rem);line-height:1.15;color:var(--texte);text-decoration:none}
.menu-panneau .entree[aria-current="page"]{color:var(--accent)}
.menu-panneau .b.pr{display:flex;width:100%;margin-top:2rem}
.menu-panneau .bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem;color:var(--texte-2);font-size:.9375rem}
/* la surface glisse (09-mouvement.md, §2) : le panneau descend de 8 px sur la courbe commune,
   320 ms à l'ouverture, 160 ms à la fermeture. Sans script ou avec « réduire les animations »,
   il paraît d'un coup. */
.menu-panneau.glisse{transition:opacity var(--etat,160ms) var(--courbe,ease),transform var(--etat,160ms) var(--courbe,ease)}
.menu-panneau.glisse.ouvert{transition-duration:var(--entree,320ms)}
.menu-panneau.glisse:not(.ouvert){opacity:0;transform:translateY(-8px)}
@media (prefers-reduced-motion:reduce){.menu-panneau.glisse{transition:none}}
.menu-panneau .bas .langue{display:flex}
.no-js .menu-btn,.no-js .theme-btn{display:none}
/* le menu ouvert porte son bouton : celui de l'en-tête s'efface, un seul « Réserver » à l'écran */
.menu-ouvert .entete .cta{visibility:hidden}
.no-js .entete-in{flex-wrap:wrap;padding-block:.75rem}
.no-js .nav{display:block;order:3;width:100%}

/* ————————————————————————————————————————————— 8. les images */
.image{position:relative;overflow:hidden;border-radius:var(--rayon);background:var(--fond-2);aspect-ratio:4/3}
.image img{width:100%;height:100%;object-fit:cover;filter:var(--image-filtre)}
.image.portrait{aspect-ratio:4/5}
.image.carre{aspect-ratio:1}
.image.large{aspect-ratio:4/3}
.image.recadre img{transform:scale(1.14)}   /* vb-08 porte un cadre gris : on le rogne */
.image.remplit img{position:absolute;inset:0}   /* l'image suit la hauteur de sa rangée */
.image.remplit .planche{position:absolute;inset:0}
/* un portrait à fournir : un emplacement sobre, pas une hachure */
.image.a-fournir{display:grid;place-items:center;text-align:center;padding:2rem;color:var(--texte-2);font-size:.9375rem}
.image.a-fournir .embleme{width:56px;margin:0 auto .875rem;opacity:.35}

/* la section « film » : une image pleine largeur de contenu, le titre posé dessus */
.film{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--rayon-film);min-height:clamp(22rem,16rem + 22vw,36rem);display:flex;align-items:flex-end;background:var(--nuit-fixe);color:var(--email-fixe)}
.film > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.film::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--voile-film)}
.film .contenu{padding:clamp(1.5rem,1rem + 3vw,4rem);max-width:46rem;display:flex;flex-direction:column;gap:1rem}
.film .legende{color:#C9D3EC}
.film .titre-2,.film .titre-1{color:var(--email-fixe)}
.film p{color:#DCE2F0}

/* ————————————————————————————————————————————— 9. les composants */
/* les cartes */
.carte{background:var(--fond-2);border-radius:var(--rayon);padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);min-width:0}
.carte.ligne{background:transparent;box-shadow:inset 0 0 0 1px var(--filet)}
.carte.accent{background:var(--eleve);box-shadow:inset 0 0 0 1.5px var(--accent)}
.carte > * + *{margin-top:.875rem}
.carte .titre-3 + p,.carte .titre-4 + p{margin-top:.625rem}

/* les pastilles de statut (04, §4 ; 08, §7) */
.pastille{display:inline-flex;align-items:center;gap:.5rem;min-height:28px;padding:0 .75rem;border:1.5px solid var(--accent);border-radius:99px;color:var(--accent);font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap}
.pastille i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.statut{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem}

/* une liste numérotée : les étapes de la méthode, les suites */
.etapes{list-style:none;counter-reset:e}
.etapes > li{counter-increment:e;display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:0 1rem;padding:1.375rem 0;border-bottom:1px solid var(--filet)}
.etapes > li:first-child{border-top:1px solid var(--filet)}
.etapes > li::before{content:counter(e);grid-row:1 / span 2;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:clamp(1.75rem,1.5rem + .9vw,2.25rem);line-height:1;color:var(--accent)}
.etapes .titre-4{margin-top:.125rem}
.etapes p{color:var(--texte-2);margin-top:.375rem;max-width:52ch}

/* trois temps, côte à côte dès 600 px : ce qui se passe ensuite */
.suites{list-style:none;counter-reset:s;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem var(--gout)}
.suites > li{counter-increment:s;padding-top:1rem;border-top:1px solid var(--filet)}
.suites > li::before{content:counter(s);display:block;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:2.25rem;line-height:1;color:var(--accent);margin-bottom:.75rem}
.suites b{display:block;font-weight:600}
.suites p{color:var(--texte-2);margin-top:.25rem}

/* une liste à filets */
.filets{list-style:none}
.filets > li{padding:.875rem 0;border-bottom:1px solid var(--filet)}
.filets > li:first-child{border-top:1px solid var(--filet)}

/* l'accordéon (08, §17) */
.acc{border-top:1px solid var(--filet)}
.acc details{border-bottom:1px solid var(--filet);scroll-margin-top:calc(var(--entete) + 1rem)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:72px;padding:1rem 0;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.25}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:12px;height:12px;margin-right:.375rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .18s ease}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.acc summary:hover{color:var(--accent)}
.acc .reponse{padding:0 0 1.5rem;max-width:var(--mesure);color:var(--texte-2)}

/* la sortie d'un programme */
.sortie{background:var(--fond-2);border-radius:var(--rayon-m);overflow:hidden}
.sortie .ent{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding:.75rem 1.125rem;border-bottom:1px solid var(--filet);font-size:.8125rem;color:var(--texte-2)}
.sortie .ent code{color:var(--texte);font-size:.8125rem}
.sortie pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;line-height:1.55;padding:1rem 1.125rem 1.125rem 2.75rem;overflow-x:auto;color:var(--texte);-webkit-overflow-scrolling:touch}
.sortie pre span{display:block;position:relative;white-space:pre}
.sortie pre span[data-r]::before{content:attr(data-r);position:absolute;left:-2rem;top:1px;width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-family:var(--sans);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.reperes{list-style:none;margin-top:1rem}
.reperes li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.625rem;padding:.5rem 0;border-top:1px solid var(--filet);font-size:.9375rem}
.reperes li i{font-style:normal;width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:2px}

/* un tableau qui défile dans sa boîte sur petit écran */
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:4px}
.defile:focus-visible{outline-offset:4px}
.prov{width:100%;min-width:40rem;border-collapse:collapse;font-size:.875rem}
.prov th{text-align:left;font-weight:600;color:var(--texte-2);font-size:.8125rem;padding:.625rem .75rem;border-bottom:1.5px solid var(--filet)}
.prov td{padding:.75rem;border-bottom:1px solid var(--filet);vertical-align:top;line-height:1.45}
.prov td:first-child{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;white-space:nowrap}
.prov td:last-child{white-space:nowrap;color:var(--texte-2)}
.prov code{font-size:.78rem}

/* une valeur à fournir */
.af{display:inline-block;border:1.5px dashed var(--texte-2);border-radius:99px;padding:0 .625rem;font-size:.84rem;line-height:1.6;color:var(--texte-2);white-space:nowrap}

/* les sources des chiffres, repliées en bas de page */
.sources{border-top:1px solid var(--filet);padding-top:1rem}
.sources summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.9375rem;font-weight:600;color:var(--texte-2)}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--texte-2);font-weight:600;line-height:1}
.sources[open] summary::before{content:"−"}
.sources ol{margin-top:.5rem;padding-left:1.375rem;font-size:.875rem;line-height:1.55;color:var(--texte-2);max-width:80ch}
.sources li + li{margin-top:.25rem}

/* le formulaire (08, §1 à §4) */
.form{min-width:0}
.form .champ-l + .champ-l,.form .champ-l + fieldset{margin-top:1.5rem}
.form label,.form legend{display:block;font-size:.9375rem;font-weight:600;line-height:1.35}
.form .facultatif{font-weight:500;color:var(--texte-2)}
.form .aide{font-size:.9375rem;font-weight:500;color:var(--texte-2);margin-top:.5rem;line-height:1.45}
.form input[type=text],.form input[type=email],.form textarea{display:block;width:100%;margin-top:.5rem;min-height:50px;padding:0 1rem;border:1px solid var(--contour);border-radius:var(--rayon-champ);background:var(--champ);color:var(--texte);font-size:1.0625rem;transition:border-color .15s ease}
.form textarea{min-height:152px;padding:.875rem 1rem;resize:vertical;line-height:1.5}
.form input::placeholder,.form textarea::placeholder{color:var(--texte-2);opacity:1}
.form input:hover,.form textarea:hover{border-color:var(--texte-2)}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form [aria-invalid="true"]{border:2px solid var(--destructif)}
.form .msg{display:flex;gap:.5rem;align-items:flex-start;margin-top:.5rem;font-size:.9375rem;font-weight:500;line-height:1.4}
.form .msg[hidden]{display:none}
.form .msg::before,.resume::before{content:"!";flex:none;width:19px;height:19px;border-radius:50%;background:var(--destructif);color:var(--fond);display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;margin-top:1px}
.form fieldset{margin:1.5rem 0 0;padding:0;border:0;min-width:0}
.form .radios{display:grid;grid-template-columns:minmax(0,1fr);gap:0 1rem;margin-top:.375rem}
.form .radios label{display:flex;align-items:center;gap:.75rem;min-height:44px;font-weight:400;font-size:1.0625rem;cursor:pointer}
.form .radios input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:50%;border:1.5px solid var(--contour);background:var(--champ);display:grid;place-items:center}
.form .radios input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sur-accent);transform:scale(0)}
.form .radios input:checked{background:var(--accent);border-color:var(--accent)}
.form .radios input:checked::after{transform:scale(1)}
.form .radios input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form .envoi{margin-top:2rem}
.form .info{margin-top:1rem;font-size:.875rem;color:var(--texte-2);line-height:1.5}
.form .info a{color:var(--accent)}
.resume{display:flex;gap:.625rem;border:2px solid var(--destructif);border-radius:var(--rayon-champ);padding:.875rem 1rem;margin-bottom:1.5rem;font-size:.9375rem}
.resume[hidden]{display:none}
.resume:focus{outline:2px solid var(--focus);outline-offset:2px}
.resume ul{margin-top:.25rem;padding-left:1.125rem}
.resume a{color:var(--accent)}
.echec{margin-top:1.25rem}
.charge{position:relative;display:inline-block;width:18px;height:18px;flex:none}
.charge i{position:absolute;inset:0;background:currentColor;opacity:0;animation:bout 480ms steps(1,end) infinite;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.charge i:nth-child(1){--m:url("../../marque/sorties/Chargement/charge-v4-1-email.svg")}
.charge i:nth-child(2){--m:url("../../marque/sorties/Chargement/charge-v4-2-email.svg");animation-delay:-320ms}
.charge i:nth-child(3){--m:url("../../marque/sorties/Chargement/charge-v4-3-email.svg");animation-delay:-160ms}
@keyframes bout{0%{opacity:1}33.333%{opacity:0}100%{opacity:0}}

/* ————————————————————————————————————————————— 10. les compositions de page */

/* A1 · l'ouverture */
.ouverture{padding-top:clamp(2rem,1rem + 3.5vw,4.5rem)}
.ouverture .pile{--pile:1.5rem}
.ouverture .titre-xl{max-width:15ch}
.ouverture .actions{margin-top:.5rem}
.ouverture .condition{font-size:.9375rem;color:var(--texte-2);max-width:46ch}
.ouverture .image{aspect-ratio:5/4}

/* A1 · le problème : trois cartes */
.probleme .carte{display:flex;flex-direction:column;gap:.75rem}
.probleme .carte p{color:var(--texte-2)}
.probleme .carte .b.lien{align-self:flex-start;margin-top:auto;padding-top:.5rem}
.probleme .numero{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.125rem;color:var(--accent)}

/* A1 · la méthode : l'image et quatre étapes */
.methode .image{aspect-ratio:4/3}
.methode .actions{margin-top:1.75rem}

/* A1 · une réalisation mise en avant */
.vedette{display:grid;grid-template-columns:minmax(0,1fr);background:var(--fond-2);border-radius:var(--rayon);overflow:hidden}
.vedette .image{border-radius:0;aspect-ratio:16/10}
.vedette .corps{padding:clamp(1.5rem,1rem + 2.4vw,3.5rem);display:flex;flex-direction:column;gap:1rem;align-self:center}
.vedette .mesure{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;padding-top:1rem;border-top:1px solid var(--filet)}
.vedette .mesure .chiffre{color:var(--accent)}
.vedette .actions{margin-top:.5rem}

/* la porte finale, centrée (gabarit A1, A2, A5, A6) */
.porte{padding-block:var(--section);text-align:center}
.porte .intro{margin-inline:auto;align-items:center;max-width:40rem}
.porte .actions{justify-content:center;margin-top:2rem}
.porte .ou{margin-top:1.25rem;font-size:.9375rem;color:var(--texte-2)}
.porte .ou a{color:var(--accent)}

/* A2 · l'offre */
.sommaire{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.9375rem}
.sommaire a{color:var(--accent);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent);padding-bottom:1px}
.sommaire a:hover{border-bottom-color:var(--accent)}
.forfait{display:flex;flex-direction:column;gap:0;scroll-margin-top:calc(var(--entete) + 1.5rem)}
.forfait > * + *{margin-top:0}
.forfait .haut{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--filet)}
/* le prix descend au bas de la tête : face à face, les deux prix tombent sur la même ligne */
.forfait .prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin-top:auto;padding-top:.25rem}
.forfait .prix .chiffre{font-size:clamp(2.75rem,2.1rem + 2.2vw,4rem)}
.forfaits{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout)}
.forfait .ligne-f{padding:1rem 0;border-top:1px solid var(--filet)}
.forfait .haut + .ligne-f{border-top:0}
.forfait .ligne-f .lab{display:block;font-size:.875rem;font-weight:600;color:var(--texte-2);margin-bottom:.25rem}
.forfait .actions{margin-top:auto;padding-top:1.5rem}
.frise{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.frise li{position:relative;padding:0 0 1.75rem 2.25rem}
.frise li::before{content:"";position:absolute;left:5px;top:.4rem;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--accent);background:var(--fond)}
.frise li::after{content:"";position:absolute;left:11px;top:1.4rem;bottom:0;width:2px;background:var(--filet)}
.frise li:last-child{padding-bottom:0}
.frise li:last-child::after{display:none}
.frise li.fige::before{background:var(--accent)}
.frise .quand{display:block;font-weight:600;color:var(--texte)}
.frise li.fige .quand{color:var(--accent)}
.frise p{color:var(--texte-2);margin-top:.25rem;max-width:46ch}

/* A3 · l'index des réalisations */
.segmente{display:inline-flex;flex-wrap:nowrap;gap:4px;padding:4px;border-radius:16px;background:var(--fond-2);max-width:100%}
.segmente button{min-height:40px;padding:0 1.125rem;white-space:nowrap;border:0;border-radius:12px;background:transparent;color:var(--texte-2);font-size:.9375rem;font-weight:500;cursor:pointer}
.segmente button:hover{color:var(--texte)}
.segmente button[aria-pressed="true"]{background:var(--fond);color:var(--texte);font-weight:600;box-shadow:inset 0 0 0 1px var(--contour)}
.no-js .segmente{display:none}
.real{position:relative;display:flex;flex-direction:column;gap:.875rem;min-width:0}
.real[hidden]{display:none}
.real .image{aspect-ratio:4/3;transition:transform .35s ease}
.real .titre-4 a{color:var(--texte);text-decoration:none}
.real .titre-4 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--rayon)}
.real:hover .titre-4 a{text-decoration:underline}
.real:hover .image img{transform:scale(1.03)}
.real .image img{transition:transform .5s ease}
.real .titre-4 a:focus-visible{outline:none}
.real:has(.titre-4 a:focus-visible){outline:2px solid var(--focus);outline-offset:6px;border-radius:var(--rayon)}
.real .mesure{font-size:.9375rem}
.real .date{font-size:.84rem;color:var(--texte-2)}

/* A4 · une réalisation */
.a4-tete .titre-1{max-width:22ch}
.a4-tete .auteur{font-size:.9375rem;color:var(--texte-2)}
.a4-image{aspect-ratio:4/3}
.a4-corps{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem var(--duo)}
.a4-corps .zones > section + section{margin-top:clamp(2.25rem,1.8rem + 1.6vw,3rem)}
.a4-corps .zones h2{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-3);line-height:1.2;margin-bottom:.875rem}
.a4-corps .zones p{max-width:var(--mesure)}
.a4-corps .zones p + p{margin-top:.75rem}
.a4-corps .zones ul.liste{padding-left:1.25rem;margin:.75rem 0;max-width:var(--mesure)}
.a4-corps .zones ul.liste li + li{margin-top:.25rem}
.a4-corps .limite{background:var(--fond-2);border-radius:var(--rayon-m);padding:1.25rem 1.5rem}
/* R1 à R14, depuis leurs fiches (5 octobre 2026) : les étapes et les frises en liste numérotée */
.a4-corps .zones ol.liste{padding-left:1.25rem;margin:.75rem 0;max-width:var(--mesure)}
.a4-corps .zones ol.liste li + li{margin-top:.375rem}
.a4-corps .zones .defile{margin:.75rem 0}
/* le tableau d'une fiche (R12, R13) : un comparatif, pas une provenance */
.comparatif td:first-child{font-family:inherit;font-variation-settings:normal;font-size:inherit;white-space:normal}
.comparatif td:last-child{white-space:nowrap;color:inherit}
.comparatif .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.comparatif tr.choisie td{background:var(--fond-2)}
.comparatif tr.total td{font-weight:600;border-bottom:0}
/* une planche gravée : la gravure sert de masque, l'encre suit le thème */
.planche{display:block;width:100%;height:100%;background:var(--accent);-webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.real .planche{transition:transform .5s ease}
.real:hover .image .planche{transform:scale(1.03)}
/* un schéma en papier découpé des supports : il garde son papier, en clair comme en sombre */
.schema-papier{margin:0}
.schema-papier .defile{background:var(--email-fixe);border-radius:var(--rayon-m);padding:clamp(.75rem,.4rem + 1.2vw,1.5rem)}
.schema-papier svg{display:block;width:100%;height:auto;min-width:46rem}
.schema-papier figcaption{margin-top:.625rem;max-width:var(--mesure)}
.preuve{background:var(--fond-2);border-radius:var(--rayon);padding:1.75rem;overflow-wrap:anywhere}
.preuve h2{font-size:.9375rem;font-weight:600;color:var(--texte-2)}
.preuve .v{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:clamp(1.75rem,1.55rem + .6vw,2.125rem);line-height:1.1;margin-top:1.25rem}
.preuve .v:first-of-type{color:var(--accent)}
.preuve .lib{font-size:.9375rem;line-height:1.45;margin-top:.375rem;color:var(--texte-2)}
.preuve .meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--filet);font-size:.84rem;color:var(--texte-2);line-height:1.5}
.forfait-lie{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.suivante{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.suivante .titre-3 a{color:var(--texte);text-decoration:none}
.suivante .titre-3 a::after{content:"";position:absolute;inset:0;border-radius:var(--rayon);z-index:1}
.suivante:hover{box-shadow:inset 0 0 0 1px var(--filet),inset 0 0 0 999px var(--survol)}
.suivante:hover .titre-3 a{text-decoration:underline}
.suivante .titre-3 a:focus-visible{outline:none}
.suivante:has(.titre-3 a:focus-visible){outline:2px solid var(--focus);outline-offset:4px}
.schema-cab{background:var(--fond-2);border-radius:var(--rayon-m);padding:1rem}
.schema-cab svg{width:100%;min-width:34rem;height:auto}
.schema-cab text{fill:var(--texte);font-family:var(--sans)}
.schema-cab text.sur{fill:var(--sur-accent)} .schema-cab text.gris{fill:var(--texte-2)}
.dc-trait{stroke:var(--texte)} .dc-plein{fill:var(--fond)} .dc-plein-2{fill:var(--fond-2)} .dc-accent{fill:var(--accent)} .dc-sur{stroke:var(--sur-accent)}

/* A5 · la méthode, une étape par section */
.etape{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem var(--duo);align-items:center}
.etape .image{aspect-ratio:4/3}
.etape .num{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:clamp(4rem,3rem + 4vw,6.5rem);line-height:.9;color:var(--accent)}
.etape .quand{font-size:.9375rem;font-weight:600;color:var(--texte-2)}
.etape .pile{--pile:1rem}
.etape p{color:var(--texte-2);max-width:48ch}
.fournir ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--gout);margin-top:1.25rem}
.fournir li{padding:.875rem 0;border-top:1px solid var(--filet)}
.fournir li b{display:block;font-weight:600}
.fournir li span{color:var(--texte-2)}


/* A7 · le contact */
/* le calendrier garde des cases de 36 à 48 px : il ne s'étire pas sur toute la carte en tablette */
.reserver .creneaux{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:23rem;text-align:center;font-size:.875rem;margin-top:1.25rem}
.reserver .creneaux b{font-weight:600;color:var(--texte-2);padding:.25rem 0}
.reserver .creneaux span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;color:var(--texte-2)}
.reserver .creneaux span.libre{color:var(--texte);box-shadow:inset 0 0 0 1.5px var(--accent)}
.reserver .creneaux span.choisi{background:var(--accent);color:var(--sur-accent);font-weight:600}
.reserver .heures{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.reserver .heures span{padding:.375rem .875rem;border-radius:10px;background:var(--fond);font-size:.875rem}
.reserver .heures span.choisi{background:var(--accent);color:var(--sur-accent);font-weight:600}
.reserver .apercu{font-size:.84rem;color:var(--texte-2);margin-top:1rem}
/* de 768 à 899 px, la carte est seule sur sa ligne : le calendrier à gauche, les heures, le
   bouton et l'adresse à sa droite, centrés sur sa hauteur. Sinon le calendrier de 23 rem restait
   seul à gauche d'une carte vide. La colonne de droite garde la largeur du bouton. */
/* de 600 à 767 px, la carte est trop étroite pour deux colonnes : le calendrier se centre */
@media (min-width:600px) and (max-width:767px){
  .reserver .creneaux{margin-inline:auto}
}
@media (min-width:768px) and (max-width:899px){
  .reserver{display:grid;grid-template-columns:minmax(17rem,22rem) minmax(19.5rem,1fr);grid-template-rows:auto auto 1fr auto auto auto auto 1fr;column-gap:2.5rem;align-items:start}
  .reserver > h2,.reserver > .discret:first-of-type{grid-column:1 / -1}
  .reserver .creneaux{grid-column:1;grid-row:3 / 9;max-width:none}
  .reserver .heures{grid-column:2;grid-row:4;margin-top:1.25rem}
  .reserver .apercu{grid-column:2;grid-row:5}
  .reserver .actions{grid-column:2;grid-row:6}
  .reserver .petit{grid-column:2;grid-row:7}
}
.donnees ul{list-style:none;margin-top:1rem}
.donnees li{padding:.625rem 0;border-top:1px solid var(--filet);color:var(--texte-2)}
.donnees li b{color:var(--texte);font-weight:600}

/* A8, A13 · les pages courtes : un bloc serré, centré dans le premier écran (gabarits A8, A13) */
.courte{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:min(calc(100svh - var(--entete)),52rem);padding-block:clamp(3rem,2rem + 4vw,5rem)}
.courte > .embleme{width:clamp(5.5rem,4.5rem + 4vw,8rem);margin:0 0 clamp(1.5rem,1.2rem + 1vw,2rem)}
.courte .intro{max-width:56rem;margin-inline:auto;align-items:center}
.courte .chapo{max-width:40rem}
.courte .intro + .actions{justify-content:center;margin-top:clamp(1.75rem,1.5rem + 1vw,2.25rem)}
.detache{position:relative;width:clamp(8rem,6.5rem + 5vw,11rem);aspect-ratio:1;margin:0 0 clamp(1.75rem,1.4rem + 1.2vw,2.5rem)}
/* la 404 : le globe v3 privé de son troisième fuseau, et ce fuseau seul qui s'écarte à gauche
   (marque/fuseau_detache.py ; 07-site.md, §2.9). Cadre du fuseau : x 25,6 %, y 9,1 %, 17,4 x 81,6 %. */
.detache .embleme{width:100%;margin:0;-webkit-mask-image:url("embleme-sans-fuseau.svg");mask-image:url("embleme-sans-fuseau.svg")}
.detache i{position:absolute;left:-15%;top:13%;width:17.4%;height:81.6%;background:var(--accent);-webkit-mask:url("fuseau.svg") center/100% 100% no-repeat;mask:url("fuseau.svg") center/100% 100% no-repeat;transform:rotate(-10deg)}

/* A12 · les pages légales */
.legal{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem var(--duo)}
.legal .somm{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 1.25rem;font-size:.9375rem}
.legal .somm a{display:inline-block;padding:.3125rem 0;color:var(--texte-2);text-decoration:none}
.legal .somm a:hover{color:var(--accent);text-decoration:underline}
.legal .somm a[aria-current]{color:var(--accent);font-weight:600}
.legal .somm li + li{margin-top:0}
.legal .texte h2{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-3);line-height:1.18;margin:3rem 0 1rem;scroll-margin-top:calc(var(--entete) + 1.5rem)}
.legal .texte h2:first-child{margin-top:0}
.legal .kv{width:100%;border-collapse:collapse;font-size:.97rem}
.legal .kv td{padding:.625rem 0;border-top:1px solid var(--filet);vertical-align:top;overflow-wrap:anywhere}
.legal .kv td:first-child{width:40%;color:var(--texte-2);padding-right:1rem;overflow-wrap:normal}
.legal ul{padding-left:1.25rem}
.legal li + li{margin-top:.25rem}

/* ————————————————————————————————————————————— 11. le pied */
.pied{position:relative;overflow:hidden;margin-top:auto;border-top:1px solid var(--filet);font-size:.9375rem}
.pied-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem var(--gout);padding-block:clamp(3rem,2.2rem + 3vw,5rem) 2rem}
.pied .marque .lockup{height:32px}
/* sur un écran 1x, le lockup du pied prend le globe tracé réglé sur un pixel et calé sur la
   grille (38-logo-en-petit.md, §9) ; site.js pose data-px et cale la boîte */
.pied .marque .lockup[data-px="32"]{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v3-lockup-px-32.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/Au%20pixel/g7-v3-lockup-px-32.svg")}
.pied .cabinet p{color:var(--texte-2);margin-top:1rem;max-width:30ch;line-height:1.5}
.pied h2{font-family:var(--sans);font-size:.875rem;font-weight:600;margin-bottom:.75rem}
.pied ul{list-style:none}
.pied li + li{margin-top:.375rem}
.pied a{text-decoration:none;color:var(--texte)}
.pied a:hover{text-decoration:underline;color:var(--accent)}
.pied .releve{color:var(--texte-2);margin-top:.75rem;line-height:1.45}
.pied .bas{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-block:1.25rem 2rem;border-top:1px solid var(--filet);font-size:.84rem;color:var(--texte-2)}
.pied .grand{position:absolute;z-index:0;right:-4rem;bottom:-9rem;width:clamp(16rem,12rem + 12vw,26rem);opacity:.12;pointer-events:none}

/* ————————————————————————————————————————————— 12. les ruptures */
@media (min-width:480px){
  .pied-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied-in .cabinet{grid-column:1 / -1}
}
@media (min-width:600px){
  .grille.deux,.grille.trois,.grille.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* les deux forfaits se font face : leurs rangées s'alignent, ligne à ligne */
  .forfaits{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,auto);row-gap:0}
  .forfaits .forfait{grid-row:span 8;display:grid;grid-template-rows:subgrid;row-gap:0}
  /* à partir de la troisième carte, une nouvelle rangée : elle garde l'écart entre cartes, sans
     quoi elle se colle à celle du dessus (l'écart vertical des rangées alignées est nul) */
  .forfaits .forfait:nth-child(n+3){margin-top:var(--gout)}
  .grille.trois > .large{grid-column:1 / -1}
  .suites{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form .radios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forfait-lie,.suivante{flex-direction:row;justify-content:space-between;align-items:center}
  .forfait-lie > .b,.suivante > .b{flex:none;white-space:nowrap}
  .fournir ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fournir ul li:nth-last-child(-n+2){border-bottom:1px solid var(--filet)}
  .a4-image{aspect-ratio:16/9}
  .vedette .image{aspect-ratio:16/9}
  .langue{display:inline-flex}
  .entete .cta{display:inline-flex}
  /* menu ouvert, de 600 à 999 px : la bascule FR · EN est déjà dans l'en-tête, le panneau ne
     la répète pas. Le bouton et l'adresse tiennent sur une ligne, sous les entrées. */
  .menu-panneau{padding-top:2rem}
  .menu-panneau .pied-menu{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2.5rem}
  .menu-panneau .pied-menu .b.pr{width:auto;margin-top:0}
  .menu-panneau .pied-menu .bas{margin-top:0}
  .menu-panneau .bas .langue{display:none}
  .entete .cta.b{min-height:40px;padding:.25rem 1.125rem;font-size:1rem}
  .entete .cta.b::after{content:"";position:absolute;inset:-2px 0}
}
@media (min-width:900px){
  .nav{display:block}
  .menu-btn{display:none}
  .entete-in{gap:clamp(1.5rem,.5rem + 2vw,3rem)}
  .nav{margin-left:auto}
  .outils{margin-left:0}
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo.sept-cinq{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .duo.cinq-sept{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .duo.inverse > :first-child{order:2}
  .grille.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grille.trois > .large{grid-column:auto}
  .grille.quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ouverture .image,.methode .image{aspect-ratio:auto;align-self:stretch;min-height:32rem}
  .ouverture .image{min-height:36rem}
  .vedette{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .vedette .image{aspect-ratio:auto;min-height:28rem}
  .frise{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem var(--gout)}
  .frise li{padding:2.25rem 0 0}
  .frise li::before{left:0;top:0}
  .frise li::after{left:22px;right:calc(-1 * var(--gout));top:6px;bottom:auto;width:auto;height:2px}
  .frise li:nth-child(4n)::after{display:none}
  .frise li:last-child::after{display:none}
  .a4-image{aspect-ratio:21/9}
  .a4-corps{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start}
  .a4-corps .preuve{position:sticky;top:calc(var(--entete) + 1.5rem)}
  .etape{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .etape.inverse > :first-child{order:2}
  .etape .image{aspect-ratio:5/4}
  .legal{grid-template-columns:minmax(12rem,3fr) minmax(0,9fr);align-items:start}
  .legal > nav{position:sticky;top:calc(var(--entete) + 1.5rem)}
  .legal .somm{display:block}
  .legal .somm li + li{margin-top:.125rem}
  .contact-duo .reserver{position:sticky;top:calc(var(--entete) + 1.5rem)}
  .pied-in{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
  .pied-in .cabinet{grid-column:auto}
  .prov{min-width:0}
  .schema-cab svg{min-width:0}
}
@media (min-width:1200px){
  .langue{display:inline-flex}
  .carte{padding:2.5rem}
}
@media (max-width:479px){
  .legal .kv,.legal .kv tbody,.legal .kv tr,.legal .kv td{display:block;width:auto}
  .legal .kv tr{border-top:1px solid var(--filet);padding:.625rem 0}
  .legal .kv td{border-top:0;padding:0}
  .legal .kv td:first-child{width:auto;font-size:.875rem;padding:0 0 .125rem}
  .actions .b{flex:1 1 auto}
  /* un libellé long passe à la ligne plutôt que de sortir de sa carte */
  .b{max-width:100%;white-space:normal;padding-inline:1.25rem;text-wrap:balance}
  /* le filtre des réalisations ne se coupe jamais en « 3 + 1 » : deux par deux, à parts égales */
  .segmente{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .segmente button{padding:0 .5rem}
  /* pages courtes : les chemins s'empilent, pleine largeur, comme à l'ouverture de l'accueil */
  .courte .actions{align-self:stretch}
  .courte .actions .b{flex:1 1 100%}
}
/* cinq filtres (les familles de R1 à R15, 5 octobre 2026) : sous 600 px, « Tout » tient sa
   rangée, puis les quatre familles deux par deux, à parts égales */
@media (max-width:599px){
  .segmente:has(> button:nth-child(5)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .segmente:has(> button:nth-child(5)) > button:first-child{grid-column:1 / -1}
  .segmente:has(> button:nth-child(5)) button{padding:0 .5rem}
}
/* le tableau de provenance : une fiche par chiffre sous 600 px, chaque valeur avec son intitulé */
/* sous 900 px, une carte de forfait est étroite : le délai passe sous le prix, dans les deux cartes */
@media (max-width:899px){
  .forfait .prix{flex-direction:column;align-items:flex-start;gap:.125rem}
}
@media (max-width:599px){
  .prov{min-width:0}
  .prov thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .prov,.prov tbody,.prov tr,.prov td{display:block}
  .prov tr{padding:1rem 0;border-bottom:1px solid var(--filet)}
  .prov tr:first-child{padding-top:.25rem}
  .prov td{border:0;padding:.125rem 0;white-space:normal}
  .prov td:first-child{font-size:1.375rem;white-space:normal;padding-bottom:.375rem}
  .prov td:last-child{white-space:normal}
  .prov td:not(:first-child)::before{content:attr(data-l) "\00a0: ";font-weight:600;color:var(--texte-2)}
  /* le comparatif d'une fiche, empilé : les montants se lisent à gauche, une cellule vide disparaît */
  .comparatif td.num{text-align:left;white-space:normal}
  .comparatif td:empty{display:none}
  .comparatif tr.choisie td{background:none}
  .comparatif tr.choisie{background:var(--fond-2);border-radius:var(--rayon-m);padding-inline:.75rem}
  /* la section « film » : l'image reste visible au-dessus du texte, qui descend dans la partie voilée */
  .film{min-height:30rem}
  .film .titre-1{font-size:var(--t-2)}
}

/* ————————————————————————————————————————————— réduire les animations, imprimer */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;scroll-behavior:auto !important}
  .charge i{animation-duration:2400ms}
  .real:hover .image img,.real:hover .image .planche{transform:none}
}
@media print{
  body::before,.entete,.menu-panneau,.pied .grand,.porte{display:none}
  .film{min-height:0;color:var(--texte);background:none}
  .film > img,.film::before{display:none}
}

/* ————————————————————————————————————————————— 13. la composition des sections
   Règles du 29 septembre 2026 au soir (07-site.md, §2.1 bis), demandées par Oscar : les
   modules se lisaient comme des blocs indépendants. Une page se lit désormais comme un seul
   document, dont chaque section, un « acte », suit la même charpente :
   - la tête (légende, titre, une phrase) tient dans une colonne de gauche, qui reste en vue
     pendant qu'on lit le corps, à droite ; un corps large (prix, frise) passe dessous ;
   - un filet ouvre chaque acte, et l'écart entre actes est plus court qu'entre sections ;
   - deux matières seulement : la carte émail 2 pour ce qui se choisit ou se compare, le filet
     pour tout le reste ; une seule mise en avant par page. */
:root{--acte:clamp(3.5rem, 2.6rem + 3.6vw, 6.5rem)}                /* 56 → 104 px */
.acte{padding-top:var(--acte)}
.acte-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,1.1rem + 1.6vw,2.5rem) var(--duo);
  padding-top:clamp(1.25rem,1rem + .8vw,1.75rem);border-top:1px solid var(--filet)}
.acte-tete{display:flex;flex-direction:column;gap:.75rem;max-width:30rem}
.titre-acte{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;
  font-size:clamp(1.625rem,1.28rem + 1.3vw,2.375rem);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.acte-tete p{color:var(--texte-2);text-wrap:pretty}
.acte-tete .pastille{align-self:flex-start}   /* la pastille garde sa largeur, la colonne ne l'étire pas */
.acte-corps{min-width:0}
.acte-corps > * + *{margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}

/* des points numérotés, sous un filet : ce qui rend un forfait dû */
.points{list-style:none;counter-reset:p}
.points li{counter-increment:p;display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:0 .75rem;padding:.75rem 0;border-bottom:1px solid var(--filet)}
.points li:first-child{border-top:1px solid var(--filet)}
.points li::before{content:counter(p);font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.25rem;line-height:1.3;color:var(--texte-2)}
.points-titre{display:block;font-weight:600;margin-bottom:.75rem}

/* des faits courts, deux par rangée, chacun sous son filet */
.faits{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--gout)}
.faits > div{padding:1rem 0 1.25rem;border-top:1px solid var(--filet)}
.faits b{display:block;font-weight:600;margin-bottom:.25rem}
.faits p{color:var(--texte-2)}

/* un encart : la phrase qui engage, sur émail 2 */
.encart{background:var(--fond-2);border-radius:var(--rayon-m);padding:clamp(1.25rem,1rem + 1vw,1.75rem) clamp(1.25rem,1rem + 1.2vw,2rem)}

/* le forfait mis en avant porte .carte.accent (le contour cobalt, une seule fois par page) et
   une pastille, qui ne s'étire pas sur la largeur de la carte */
.forfait .pastille{align-self:flex-start}
/* la ligne du haut garde la hauteur de la pastille dans les deux cartes : les titres s'alignent */
.forfait .haut > .statut{min-height:28px}

/* A3 · la sixième case : une tuile de la taille d'une image, son texte en bas */
.rendez-vous{align-self:start;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end}

/* un lien sous un fait */
.faits .lien-fleche{margin-top:.625rem}

/* le nom : les sept fuseaux de l'emblème à plat, puis refermés en globe (03, §3.8) */
.embleme.plat{-webkit-mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v1.svg");mask-image:url("../../marque/sorties/Logo%20final%20-%20Toutes%20les%20vues/g7-v1.svg")}
.diptyque{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem var(--gout);max-width:34rem}
.diptyque > span{display:grid;place-items:center;aspect-ratio:1;background:var(--fond-2);border-radius:var(--rayon-m)}
.diptyque .embleme{width:52%}
.diptyque figcaption{grid-column:1 / -1}

/* A3 · la sixième case : une marge plus serrée, et son bouton passe à la ligne plutôt que de
   sortir de la carte quand les colonnes sont étroites (900 à 1 000 px) */
.rendez-vous{padding:clamp(1.25rem,.8rem + 1.2vw,2rem)}
.rendez-vous .b{white-space:normal;text-wrap:balance}

@media (min-width:600px){
  .faits{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ————— les ruptures intermédiaires (relevé du 30 septembre 2026, balayage de 1 920 à 320 px)
   Entre 600 et 767 px, trois compositions à plusieurs colonnes se serraient au point de
   déborder ou de tasser le texte sur vingt signes : elles restent empilées jusqu'à 768 px. */
@media (min-width:600px) and (max-width:767px){
  /* les deux forfaits : côte à côte, leurs boutons sortaient des cartes (600 à 700 px) */
  .forfaits{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--gout)}
  .forfaits .forfait{grid-row:auto;display:flex;flex-direction:column}
  /* la carte du forfait lié et la suivante, en fin de réalisation : le texte tombait à 18 signes */
  .forfait-lie,.suivante{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  /* les trois étapes du contact : trois colonnes de vingt signes */
  .suites{grid-template-columns:minmax(0,1fr)}
}
/* Entre 600 et 899 px, les images passaient pleine largeur à leur rapport de téléphone : 800 sur
   640 px à l'ouverture de l'accueil, quatre photos de 800 sur 600 px empilées sur la méthode.
   L'accueil prend un cadre en 16 sur 9 ; chaque étape de la méthode garde image et texte côte à
   côte, comme sur ordinateur. Sous 600 px, le rapport du gabarit (5 sur 4, 4 sur 3) revient. */
@media (min-width:600px) and (max-width:899px){
  .ouverture .image,.methode .image{aspect-ratio:16/9}
  .etape{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .etape.inverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .etape.inverse > :first-child{order:2}
}
/* sur une colonne, la sixième case des réalisations n'a plus d'image à côté d'elle : elle prend
   la hauteur de son texte */
@media (max-width:599px){
  .rendez-vous{aspect-ratio:auto}
}
/* L'en-tête : entre 900 et 999 px, la navigation se serrait contre le lockup et passait sur
   deux lignes (« À propos », à 900 px). Depuis que Contact y est entré (8 octobre 2026), elle
   passe sur deux lignes jusqu'à 1 040 px : le menu reste replié jusqu'à 1 080 px. */
@media (min-width:900px) and (max-width:1079px){
  :root{--entete:4.5rem}   /* replié, l'en-tête garde sa hauteur de tablette : 72 px, et non 84 */
  .nav{display:none}
  .menu-btn{display:inline-grid}
  .outils{margin-left:auto}
}
/* la tête en colonne dès 1 024 px : entre 900 et 1 023, la colonne de gauche tombait à 270 px
   et hachait les titres sur quatre ou cinq lignes (relevé du 30 septembre 2026) */
@media (min-width:1024px){
  .acte-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .acte-tete{position:sticky;top:calc(var(--entete) + 1.5rem);align-self:start}
  .acte.large .acte-in{grid-template-columns:minmax(0,1fr)}
  .acte.large .acte-tete{position:static}
}

/* ————————————————————————————————————————— A2 · la composition du 6 octobre 2026
   21-offre-composition.md, §7 et §8 : la sélection d'Oscar. */

/* la tête d'acte reste visible sous l'en-tête et sous le sommaire collé (G16) */
@media (min-width:1024px){
  .mvt-sommaire-ok .acte-tete{top:calc(var(--entete) + 4.5rem)}
}

/* O2 · la carte des prix, repliée en une ligne pleine largeur, comme une question de l'accordéon */
.carte-prix{padding-top:clamp(1.5rem,1rem + 1.5vw,2.5rem)}
.vue-resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:1.25rem;padding:1.125rem 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);cursor:pointer;list-style:none}
.vue-resume::-webkit-details-marker{display:none}
.vr-titre{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.25;color:var(--texte)}
.vr-sous{color:var(--texte-2);font-size:.9375rem}
.vue-resume svg{align-self:center;width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.vue-resume:hover .vr-titre{color:var(--accent)}
.vue-details[open] .vue-resume .v{display:none}
.vue-details[open] .vue-resume{border-bottom-color:transparent}
.cp{--nom:clamp(13rem,32%,26rem);padding-top:.5rem}
.cp-axe,.cp-corps{display:grid;grid-template-columns:var(--nom) minmax(0,1fr);column-gap:2rem}
.cp-axe{position:sticky;top:calc(var(--entete) + 3.5rem);z-index:2;background:var(--cp-fond,var(--fond));padding:.5rem 0;border-bottom:1px solid var(--filet);font-size:.8125rem;color:var(--texte-2)}
.cp-axe .cp-piste{position:relative;height:1.25rem}
.cp-axe .cp-piste span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.cp-corps{position:relative}
/* le quadrillage est un calque : il commence là où commence la piste, sans prendre de cellule */
.cp-quadrillage{position:absolute;top:0;bottom:0;right:0;left:calc(var(--nom) + 2rem);pointer-events:none}
.cp-quadrillage i{position:absolute;top:0;bottom:0;width:1px;background:var(--filet);opacity:.7}
.cp-fam,.cp-ligne{grid-column:1 / -1;position:relative;z-index:1}
.cp-fam{justify-self:start;margin:1.75rem 0 .25rem;padding-right:.75rem;background:var(--cp-fond,var(--fond));font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.25rem;line-height:1.25}
.cp-ligne{display:grid;grid-template-columns:subgrid;align-items:center;padding:.625rem 0;border-bottom:1px solid color-mix(in srgb,var(--filet) 60%,transparent);color:var(--texte);text-decoration:none}
.cp-nom{font-weight:500;line-height:1.3}
.cp-nom small{display:block;font-size:.84rem;font-weight:400;color:var(--texte-2);margin-top:.125rem}
.cp-ligne .cp-piste{position:relative;height:2.25rem}
.cp-barre{position:absolute;top:50%;height:10px;margin-top:-5px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 2px var(--fond)}
.cp-val{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.9375rem;font-variant-numeric:tabular-nums}
.cp-val.mois{left:0;color:var(--texte-2)}
.cp-ligne:hover .cp-nom,.cp-ligne:focus-visible .cp-nom{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cp-ligne:hover .cp-barre{background:var(--accent-survol);height:12px;margin-top:-6px}
.cp-note{margin-top:1.25rem}
@media (max-width:760px){
  .vue-resume{grid-template-columns:minmax(0,1fr) auto;row-gap:.25rem}
  .vr-sous{grid-column:1;grid-row:2}
  .vue-resume svg{grid-column:2;grid-row:1 / span 2}
  .cp-axe,.cp-quadrillage{display:none}
  .cp-fam{background:none;padding-right:0}                 /* sans quadrillage, rien à cacher */
  .cp-corps{grid-template-columns:minmax(0,1fr)}
  .cp-ligne{grid-template-columns:minmax(0,1fr);row-gap:.375rem}
  .cp-ligne .cp-piste{height:auto;padding-top:.25rem}
  .cp-barre{position:relative;display:block;top:auto;margin:0}
  .cp-ligne:hover .cp-barre{margin:0}
  .cp-val{position:static !important;display:block;transform:none;margin-top:.375rem}
}

/* O8 · le diagnostic, porte d'entrée de toute mission, dans un contour cobalt */
.acte.entree .acte-in{border:1.5px solid var(--accent);border-radius:var(--rayon);padding:clamp(1.25rem,1rem + 1.5vw,2.5rem)}

/* O6 · la planche de chaque famille, sous sa tête */
.planche-famille{display:block;margin-top:1rem;aspect-ratio:16/7;border-radius:var(--rayon);background:var(--fond-2);overflow:hidden}
@media (min-width:1024px){.planche-famille{aspect-ratio:4/3}}

/* O3 · les cartes repliées : la tête, la durée, le prix, le bouton, puis le détail. Les rangées
   restent alignées d'une carte à l'autre (sous-grille de cinq rangées) */
@media (min-width:600px){
  .forfaits.replies{grid-template-rows:none}
  .forfaits.replies .forfait{grid-row:span 6}
}
.forfaits.replies .forfait .actions{margin-top:0;padding-top:1.25rem}
.detail-service{margin-top:1.25rem;border-top:1px solid var(--filet)}
.detail-service summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0 0;list-style:none;cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--accent)}
.detail-service summary::-webkit-details-marker{display:none}
.detail-service summary::after{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.detail-service[open] summary::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.detail-service .ouvert,.detail-service[open] .ferme{display:none}
.detail-service[open] .ouvert{display:inline}
.detail-service summary:hover{text-decoration:underline;text-underline-offset:3px}
.detail-service .ligne-f:first-of-type{margin-top:.75rem}

/* O5 · la fourchette mise en valeur, la durée en pastille */
.forfait .ligne-f.prix-i p{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.35;color:var(--texte)}
.forfait .ligne-f.duree p{display:inline-flex;align-items:center;min-height:30px;padding:.125rem .875rem;border:1.5px solid var(--accent);border-radius:15px;color:var(--accent);font-weight:600;font-size:.9375rem}

/* O4 · la troisième carte en large : ses rangées passent sur deux colonnes */
@media (min-width:900px){
  .forfaits.replies.trois .forfait:nth-child(3){grid-column:1 / -1;grid-row:auto;display:grid;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gout);align-items:start}
  .forfaits.replies.trois .forfait:nth-child(3) > .haut,.forfaits.replies.trois .forfait:nth-child(3) > .exemple,.forfaits.replies.trois .forfait:nth-child(3) > .actions,.forfaits.replies.trois .forfait:nth-child(3) > .detail-service{grid-column:1 / -1}
}

/* O9 · la bande film avant les familles ; « L'essai avant la facture » en nuit, sur toute la largeur */
.acte.nuit{max-width:none;margin-top:var(--acte);padding-block:calc(var(--acte) * .9);background:var(--nuit-fixe);color:var(--email-fixe)}
.acte.nuit .acte-in{max-width:var(--contenu);margin-inline:auto;border-top-color:rgba(244,240,230,.18)}
.acte.nuit .legende,.acte.nuit .acte-tete p,.acte.nuit .discret,.acte.nuit .points li::before{color:#C9D3EC}
.acte.nuit .titre-acte,.acte.nuit b,.acte.nuit .points li{color:var(--email-fixe)}
.acte.nuit .points li{border-color:rgba(244,240,230,.18)}
.acte.nuit .mvt-coche{color:#9DB3F0}
.acte.nuit .encart{background:rgba(244,240,230,.08);color:var(--email-fixe)}
.acte.nuit .encart .titre-4{color:var(--email-fixe)}
:root[data-theme="sombre"] .acte.nuit{background:#161E3A}
@media (prefers-color-scheme:dark){:root:not([data-theme="clair"]) .acte.nuit{background:#161E3A}}

/* O7 rangé deux plus un · les trois exemples en cartes, la troisième en large */
.faits.exemples-cartes{gap:var(--gout)}
.faits.exemples-cartes > div{background:var(--fond-2);border-top:0;border-radius:var(--rayon);padding:clamp(1.25rem,1rem + 1vw,2rem)}
@media (min-width:900px){
  .faits.exemples-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faits.exemples-cartes > div:nth-child(3):last-child{grid-column:1 / -1}
}

/* A4 · la page d'une réalisation, par problème (26-fiches-par-probleme.md, 6 octobre 2026) :
   une étiquette à gauche, le texte à droite ; l'avant et l'après ; la valeur en très grand. */
.fr-bloc{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;align-items:start}
.fr-bloc > h2{font:500 var(--t-leg)/1.3 var(--sans);color:var(--texte-2);margin:0}
.fr-texte{font-size:var(--t-chapo);line-height:1.6;max-width:var(--mesure)}
.fr-texte + .fr-texte{margin-top:.875rem}
.fr-maj{margin-top:.875rem;font-size:var(--t-leg);line-height:1.5;color:var(--texte-2)}
@media (min-width:900px){
  .fr-bloc{grid-template-columns:minmax(10rem,15rem) minmax(0,1fr);gap:var(--duo)}
  .fr-bloc > h2{padding-top:.4rem}
}
.fr-problemes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fr-problemes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;padding:.85rem 1.1rem;border:1px solid var(--filet);border-radius:var(--rayon-m);
  font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
.fr-problemes li.vous-actif{border-color:var(--accent);background:var(--eleve);box-shadow:inset 3px 0 0 var(--accent)}
.fr-problemes .vous{margin-left:auto;font:500 .8125rem/1 var(--sans);color:var(--accent);white-space:nowrap}

.aa .titre-2{margin-bottom:clamp(1.25rem,1rem + 1vw,2rem)}
.aa-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.aa-col{border-radius:var(--rayon);padding:clamp(1.5rem,1.1rem + 1.5vw,2.5rem);display:flex;flex-direction:column}
.aa-avant{background:var(--fond-2);color:var(--texte-2)}
.aa-apres{background:var(--accent);color:var(--sur-accent)}
.aa-col h3{font:600 var(--t-leg)/1.3 var(--sans);margin:0 0 1.25rem}
.aa-avant h3{color:var(--texte)}
.aa-col ol{list-style:none;margin:0;padding:0;counter-reset:geste;flex:1}
.aa-col li{counter-increment:geste;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.75rem;align-items:baseline;padding:.9rem 0;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:var(--t-4);line-height:1.35}
.aa-col li::before{content:counter(geste,decimal-leading-zero);font:500 .875rem/1 var(--sans);opacity:.7}
.aa-avant li.lourd{color:var(--texte)}
.aa-avant li.lourd span{text-decoration:underline wavy var(--destructif) 1.5px;text-underline-offset:.28em}
.aa-apres li{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100}
.aa-pied{margin-top:1.25rem;font-size:.9375rem;line-height:1.5;opacity:.85}
.aa-fleche{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.aa-fleche svg{width:2.25rem;height:auto;transform:rotate(90deg)}
@media (min-width:900px){
  .aa-grille{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1rem,.5rem + 1.5vw,2rem);align-items:stretch}
  .aa-fleche svg{width:clamp(2rem,1rem + 2vw,3.25rem);transform:none}
}

.fr-valeur .legende{display:block;margin-bottom:1rem}
.fr-phrase{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-2);line-height:1.08;color:var(--accent);max-width:22ch;margin:0}
@media (max-width:399px){.fr-phrase{font-size:var(--t-3);line-height:1.15}}
@media (min-width:600px){.fr-phrase{font-size:var(--t-1)}}
.fr-valeur p:not(.fr-phrase){margin-top:1.5rem;font-size:var(--t-chapo);line-height:1.6;color:var(--texte-2);max-width:var(--mesure)}
.fr-limites{padding-top:1.5rem;border-top:1px solid var(--filet);font-size:var(--t-leg);line-height:1.55;color:var(--texte-2)}
.fr-limites p{max-width:var(--mesure)}

/* A3 · les réalisations en table des matières (25-realisations-par-probleme.md, §6) : les
   chapitres à gauche, le panneau de la réalisation survolée à droite, collé au défilement. */
.toc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--duo);align-items:start}
.toc-chap{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.75rem;padding:clamp(1.5rem,1.2rem + 1vw,2.25rem) 0;border-top:1px solid var(--filet)}
.toc-chap:first-child{border-top:0;padding-top:0}
.toc-num{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-chiffre);line-height:.9;color:var(--accent)}
.toc-theme{font:500 var(--t-corps)/1.3 var(--sans);margin:.35rem 0 .5rem}
.toc-chap ul{list-style:none;margin:0;padding:0}
.toc-ligne{display:block;padding:.6rem 0;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3;
  color:var(--texte);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.22em;transition:color .12s,text-decoration-color .12s}
.toc-ligne:hover,.toc-ligne:focus-visible,.toc-ligne.actif{color:var(--accent);text-decoration-color:var(--accent)}
.toc-meridal{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--filet)}
.toc-panneau{position:sticky;top:calc(var(--entete) + 1.5rem);background:var(--eleve);border:1px solid var(--filet);border-radius:var(--rayon);overflow:hidden}
.toc-image{aspect-ratio:16/10;background:var(--fond-2)}
.toc-image .image{width:100%;height:100%;margin:0;aspect-ratio:auto;border-radius:0;background:none}
.toc-corps{padding:1.5rem 1.75rem 1.75rem;display:flex;flex-direction:column;gap:.75rem}
.toc-corps .titre-4{margin:0 0 .5rem}
.toc-valeur{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-3);line-height:1.2;color:var(--accent);margin:0}
@media (min-width:600px){.toc-chap{grid-template-columns:5rem minmax(0,1fr);gap:1.25rem}}
@media (min-width:900px){.toc{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}

/* A2 · les paliers qui disent ce qu'ils comprennent (27-prix-paliers.md, 6 octobre 2026) :
   le nom et son contenu sur une ligne, le prix dessous ; le palier du haut ouvert, sur devis. */
.forfait .ligne-f.prix-i p{font-family:var(--sans);font-size:var(--t-corps);line-height:1.45}
.forfait .ligne-f.prix-i p br{display:none}
.forfait .pal{display:block;padding:.5rem 0;border-top:1px solid color-mix(in srgb,var(--filet) 70%,transparent)}
.forfait .pal:first-child{border-top:0;padding-top:0}
.forfait .pal b{font-weight:600}
.forfait .pal-desc{color:var(--texte-2)}
.forfait .pal-prix{display:block;margin-top:.15rem;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);color:var(--texte)}
.forfait .pal-prix.ouvert{color:var(--accent)}
.forfait .ligne-f.prix-i .prix-note{margin-top:.5rem;font-size:var(--t-leg);color:var(--texte-2)}
.forfait .ligne-f.exemple a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.cp-barre.ouverte{border-radius:99px 0 0 99px}
.cp-barre.ouverte::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:1.5rem;border-radius:0 99px 99px 0;background:linear-gradient(90deg,var(--accent),transparent)}

/* A2 · la vue d'ensemble des prix, repliée : une carte qu'on a envie d'ouvrir (Oscar, 6 octobre
   2026 : « deux lignes grises, pas assez de contraste »). Un fond qui se détache, l'aperçu des
   barres en miniature, un bouton cobalt. */
.carte-prix .vue-resume{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:1.25rem clamp(1.5rem,1rem + 2vw,3rem);
  padding:clamp(1.25rem,1rem + 1vw,2rem) clamp(1.25rem,1rem + 1.5vw,2.25rem);background:var(--eleve);border:1px solid var(--filet);border-radius:var(--rayon);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.carte-prix .vue-resume:hover{border-color:var(--accent);box-shadow:0 14px 36px rgba(14,18,32,.10);transform:translateY(-2px)}
.carte-prix .vue-resume:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.vue-details[open] .vue-resume{border-bottom-color:var(--filet);border-radius:var(--rayon) var(--rayon) 0 0;transform:none;box-shadow:none}
.vr-texte{display:flex;flex-direction:column;gap:.35rem}
.carte-prix .vr-titre{font-size:var(--t-3);line-height:1.15}
.carte-prix .vr-sous{font-size:var(--t-leg);color:var(--texte-2)}
.vr-apercu{position:relative;display:block;height:4.5rem;background:repeating-linear-gradient(0deg,transparent 0 5px,color-mix(in srgb,var(--filet) 45%,transparent) 5px 6px)}
.vr-apercu i{position:absolute;height:3px;border-radius:99px;background:var(--accent)}
.vr-apercu i:nth-child(1){top:2px}.vr-apercu i:nth-child(2){top:8px}.vr-apercu i:nth-child(3){top:14px}.vr-apercu i:nth-child(4){top:20px}
.vr-apercu i:nth-child(5){top:26px}.vr-apercu i:nth-child(6){top:32px}.vr-apercu i:nth-child(7){top:38px}.vr-apercu i:nth-child(8){top:44px}
.vr-apercu i:nth-child(9){top:50px}.vr-apercu i:nth-child(10){top:56px}.vr-apercu i:nth-child(11){top:62px}.vr-apercu i:nth-child(12){top:68px}
.vr-apercu i.ouverte{background:linear-gradient(90deg,var(--accent) 70%,transparent)}
.vr-bouton{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;border-radius:99px;background:var(--accent);color:var(--sur-accent);
  font:500 1rem/1 var(--bouton);white-space:nowrap}
.carte-prix .vue-resume svg{width:18px;height:18px;stroke:currentColor}
.carte-prix .vue-resume:hover .vr-titre{color:var(--texte)}
.carte-prix .vue-resume:hover .vr-bouton{background:var(--accent-survol)}
.vr-bouton .ouvert,.vue-details[open] .vr-bouton .ferme{display:none}
.vue-details[open] .vr-bouton .ouvert{display:inline}
/* le fond de la carte ouverte : le nom de famille et l'axe le reprennent pour cacher le quadrillage
   sans dessiner de boîte (Oscar, 8 octobre 2026 : « mise en forme des sous-titres sur l'offre ») */
.vue-details[open] .cp{--cp-fond:var(--eleve);border:1px solid var(--filet);border-top:0;border-radius:0 0 var(--rayon) var(--rayon);padding:0 clamp(1.25rem,1rem + 1.5vw,2.25rem) 1.5rem;background:var(--eleve)}
@media (max-width:899px){
  .carte-prix .vue-resume{grid-template-columns:minmax(0,1fr)}
  .carte-prix .vr-sous,.carte-prix .vue-resume svg{grid-column:auto;grid-row:auto}
  .vr-bouton{justify-self:start}
}