/* reset minimal: ce que l'enveloppe des artefacts fournissait, reproduit pour le vrai site */
html,body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
/* trois papiers (crème, marine, mandarine), une seule encre d'accent. Les constantes vivent ici; chaque papier
   redéfinit les tokens que lisent tous les composants: --papier, --feuille, --encre, --encre-douce, --filet,
   --placeholder, plus l'accent (et sa version texte), l'ombre, le focus et les couleurs de bouton.
   Rien n'est codé en dur plus bas. */
:root{
  --marine:#141B3A;
  --creme:#FAF0D7;
  --mandarine:#F08A3C;
  --grain:.09;

  /* papier par défaut: crème (en-tête, héros, pied) */
  --papier:#FAF0D7;
  --feuille:#FDF6E4;
  --encre:#1F2A5A;
  --encre-douce:#545E85;
  --filet:#D9CDAF;
  --placeholder:#767D98;
  --accent:var(--mandarine);
  --sur-accent:var(--marine);
  --accent-texte:#C85F12;
  --ombre:#D3C9B3;
  --focus:var(--encre);
  --bouton:var(--mandarine);
  --sur-bouton:var(--marine);
  --bouton-survol:var(--encre);
  --sur-bouton-survol:var(--papier);
  color-scheme:light;
}
.papier-creme{
  --papier:#FAF0D7;
  --feuille:#FDF6E4;
  --encre:#1F2A5A;
  --encre-douce:#545E85;
  --filet:#D9CDAF;
  --placeholder:#767D98;
  --accent:var(--mandarine);
  --sur-accent:var(--marine);
  --accent-texte:#C85F12;               /* la mandarine comme encre de texte sur crème: la même, plus chargée */
  --ombre:#D3C9B3;
  --focus:var(--encre);
  --bouton:var(--mandarine);
  --sur-bouton:var(--marine);
  --bouton-survol:var(--encre);
  --sur-bouton-survol:var(--papier);
  color-scheme:light;
}
.papier-marine{
  --papier:#141B3A;
  --feuille:#1B2348;
  --encre:#F3ECDB;
  --encre-douce:#AEB4CC;
  --filet:#2E3861;
  --placeholder:#7C84A8;
  --accent:var(--mandarine);
  --sur-accent:var(--marine);
  --accent-texte:var(--mandarine);
  --ombre:#0A0F24;                      /* l'ombre dure des affiches: marine plus foncé */
  --focus:var(--mandarine);
  --bouton:var(--mandarine);
  --sur-bouton:var(--marine);
  --bouton-survol:var(--encre);
  --sur-bouton-survol:var(--papier);
  color-scheme:dark;
}
.papier-mandarine{
  --papier:#F08A3C;
  --feuille:#F49A57;
  --encre:#141B3A;
  --encre-douce:#3D3450;
  --filet:#C9702C;
  --placeholder:#5A4636;
  --accent:var(--encre);                /* sur le papier mandarine, l'accent devient l'encre marine */
  --sur-accent:var(--creme);
  --accent-texte:var(--encre);
  --ombre:#B85A1A;
  --focus:var(--encre);
  --bouton:var(--encre);
  --sur-bouton:var(--creme);
  --bouton-survol:var(--creme);
  --sur-bouton-survol:var(--encre);
  color-scheme:light;
}
.papier-creme,.papier-marine,.papier-mandarine{background:var(--papier);color:var(--encre)}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--papier)}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:"Karla",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grain de papier: un bruit SVG minuscule, posé par-dessus tout, presque invisible */
body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}
h1,h2,h3,p,figure{margin:0}
.display{font-family:"Young Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:0;text-wrap:balance}
.serif{font-family:"Young Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* la mandarine sert à l'action: un seul appel, répété tel quel (sur l'aplat mandarine, le bouton passe au marine) */
.btn{
  display:inline-block;background:var(--bouton);color:var(--sur-bouton);
  text-decoration:none;font-weight:700;font-size:1.05rem;line-height:1.2;
  padding:1rem 1.5rem;border:0;border-radius:2px;font-family:inherit;cursor:pointer;
}
.btn:hover{background:var(--bouton-survol);color:var(--sur-bouton-survol)}
.btn.petit{font-size:.95rem;padding:.6rem 1rem;white-space:nowrap}
.btn.contour{background:transparent;color:var(--encre);border:1px solid var(--encre);padding-block:calc(.6rem - 1px)}
.btn.contour:hover{background:var(--encre);color:var(--papier)}
.btn .court{display:none}

/* en-tête */
.haut{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--papier);border-bottom:1px solid var(--encre)}
.haut .wrap{display:flex;justify-content:flex-start;align-items:center;gap:1rem;padding-block:.85rem}
.marque{text-decoration:none;display:flex;align-items:center;gap:.5rem;color:var(--encre)}
.marque .k{width:26px;height:26px;flex:none}
.marque .by{align-self:baseline;margin-top:.35rem}
.marque .nom{font-family:"Young Serif",Georgia,serif;font-size:1.5rem;line-height:1}
.marque .by{font-size:.9rem;color:var(--encre-douce);font-weight:500}

/* images: sur papier crème elles se fondent; sur marine elles deviennent des affiches crème à bord franc */
.fig{display:grid;gap:.6rem}
.fig img{display:block;width:100%;height:auto;max-width:100%;border:0;background:var(--creme)}
/* le classeur: on rogne la marge blanche du scan pour ne garder que la feuille crème */
.rogne{max-width:320px}

/* héros */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
/* au-dessus de 900 px, le texte reste dans la colonne de gauche de la grille; l'illustration sort et touche le bord droit */
.hero .wrap{max-width:none;padding-inline:0;display:grid;align-items:center;
  grid-template-columns:max(24px,calc((100% - 1160px)/2 + 24px)) minmax(0,640px) clamp(2rem,4vw,3.5rem) minmax(0,1fr)}
.hero .wrap>div{grid-column:2}
.hero .fig{grid-column:4}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.9rem);line-height:1;margin-left:-.03em;letter-spacing:-.01em}
.hero .these{margin:1.8rem 0 0;display:grid;gap:.6rem;font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.4}
.hero .these div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .6rem;align-items:baseline}
.hero .these dt{font-weight:700;color:var(--encre);white-space:nowrap}
.hero .these dd{margin:0;color:var(--encre-douce)}
@media (max-width:560px){.hero .these div{grid-template-columns:1fr;gap:.1rem}}
.hero .pour{font-size:.95rem;color:var(--encre-douce);margin-top:.9rem}
.hero .prixh{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.1;margin-top:1.6rem}
.hero .prixh small{display:block;font-family:"Karla",sans-serif;font-size:.95rem;color:var(--encre-douce);margin-top:.5rem;font-weight:400;line-height:1.4}

/* le formulaire: courriel et bouton sur une rangée, le numéro d'entreprise dessous, discret */
.formulaire{margin-top:1.5rem;display:grid;gap:.6rem;scroll-margin-top:5rem}
.champ-nom input{font:inherit;font-size:1rem;padding:0 .9rem;height:3.25rem;width:100%;border:1px solid var(--encre);border-radius:2px;background:var(--feuille);color:var(--encre)}
.rangee{display:flex;gap:0;align-items:stretch}
.rangee input{flex:1 1 auto;min-width:0;font:inherit;font-size:1rem;padding:0 .9rem;height:3.25rem;border:1px solid var(--encre);border-right:0;border-radius:2px 0 0 2px;background:var(--feuille);color:var(--encre)}
.rangee .btn{flex:0 0 auto;height:3.25rem;padding-block:0;display:inline-flex;align-items:center;border-radius:0 2px 2px 0;font-size:1rem;padding-inline:1.2rem}
.champ-neq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center;font-size:.9rem;color:var(--encre-douce)}
.champ-neq input{font:inherit;font-size:.95rem;padding:.5rem .7rem;border:1px solid var(--filet);border-radius:2px;background:var(--feuille);color:var(--encre);min-width:0;width:100%}
input::placeholder{color:var(--placeholder);opacity:1}
input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;position:relative;z-index:1}
.hero .amorce{font-size:1rem;line-height:1.45;max-width:34em}
.hero .amorce b{font-weight:700}
.hero .note{font-size:.88rem;color:var(--encre-douce);line-height:1.45;max-width:36em;margin-top:.2rem}

/* le bandeau qui défile: le premier sur marine (points mandarine), le second sur mandarine (points marine). Quatre copies du ruban,
   la piste avance d'un quart (une copie) en boucle; pause au survol; figé si le mouvement est réduit */
.defile{overflow:hidden;border-top:1px solid var(--encre);padding-block:.8rem;font-weight:500;font-size:.95rem;line-height:1.3}
.defile .piste{display:flex;width:max-content}
.defile ul{display:flex;list-style:none;margin:0;padding:0;flex:none}
.defile li{display:flex;align-items:center;gap:1.4rem;padding-right:1.4rem;white-space:nowrap}
.defile li::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);flex:none}
@keyframes defiler{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:no-preference){
  .defile .piste{animation:defiler 40s linear infinite}
  .defile.lent .piste{animation-duration:60s}
  .defile:hover .piste{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .defile .piste{animation:none;transform:none}
}

/* blocs: un filet de 1 px de l'encre du bloc qui suit, jamais de dégradé */
.bloc{padding-block:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--encre)}
.titre{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.9rem}
/* un grand chiffre ou une courte accroche en mandarine au-dessus du titre, quand le bloc en a un */
.accroche{font-family:"Young Serif",Georgia,serif;color:var(--accent-texte);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;margin-bottom:.5rem}
.phrase-bloc{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.5;max-width:38em;color:var(--encre)}
.phrase-bloc b{font-weight:700}
.tete{display:grid;gap:.9rem;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.tete .titre{margin-bottom:0}

/* ce que ça change: à gauche ce qu'il fait, à droite l'affiche puis ce que tu gardes */
.avant-apres{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.avant-apres h3{font-size:1.35rem;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--encre)}
.avant-apres ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.avant-apres li{padding-left:1.1rem;position:relative;color:var(--encre-douce);line-height:1.5}
.avant-apres li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.avant-apres li b{color:var(--encre);font-weight:700}
.avant-apres li .formats{display:block;margin-top:.4rem;font-size:.92rem}
.avant-apres .garde li::before{background:var(--encre)}
.avant-apres .garde .fig{margin:.4rem .4rem 2rem;transform:rotate(-1.5deg)}   /* l'affiche casse la grille */
.avant-apres .resultat{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--filet);font-family:"Young Serif",Georgia,serif;font-size:1.15rem;line-height:1.35;color:var(--encre)}
.avant-apres .ordre{margin-top:.8rem;font-size:.95rem;color:var(--encre-douce)}
.avant-apres .ordre b{color:var(--encre);font-weight:700}
@media (max-width:900px){.avant-apres{grid-template-columns:1fr}.avant-apres .garde .fig{max-width:420px}}

/* le rapport Positionnement: le texte à côté, la feuille sur huit colonnes */
.rapport-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,3rem);align-items:start}
.rapport-grille .tete{margin-bottom:0}
.rapport-grille .titre{font-size:clamp(2.4rem,3.6vw,3.2rem)}   /* la colonne est étroite: le titre reste grand, mais tient */
.rapport-grille .tete .btn{justify-self:start;margin-top:.4rem}
.rapport{border:1px solid var(--encre);padding:clamp(18px,3vw,32px);display:grid;gap:20px;background:var(--feuille)}
.rapport-tete{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;border-bottom:1px solid var(--encre);padding-bottom:14px}
.rapport-tete .kicker{font-size:.85rem;font-weight:500;color:var(--encre-douce)}
.rapport-tete .org{font-family:"Young Serif",Georgia,serif;font-size:1.45rem;line-height:1.1;margin-top:4px}
.rapport-tete .cohorte{font-size:.86rem;color:var(--encre-douce);margin-top:4px}
.etiquette{display:inline-block;font-size:.8rem;font-weight:500;border:1px dashed var(--encre-douce);color:var(--encre-douce);padding:.3em .6em;white-space:nowrap;border-radius:2px}
.mesures{display:grid;gap:14px}
.mesure{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-block:6px;border-top:1px solid var(--filet)}
.mesure:first-child{border-top:0}
@media (min-width:600px){.mesure{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:20px;align-items:center}}
.mesure .nom{font-weight:700;font-size:1rem;line-height:1.25}
.mesure .def{font-size:.85rem;color:var(--encre-douce);margin-top:3px}
.mesure .ecart{font-size:.85rem;font-weight:700;margin-top:6px}
.barres{width:100%;height:auto;display:block;max-width:100%}
.barres .grille line{stroke:var(--filet);stroke-width:1}
.barres .tick{fill:var(--encre-douce);font-family:"Karla",Arial,sans-serif;font-size:12px;font-weight:500}
.barres .toi{fill:var(--accent);stroke:var(--encre);stroke-width:1}
.barres .med{fill:url(#trame);stroke:var(--encre);stroke-width:1}
.barres .val{fill:var(--encre);font-family:"Karla",Arial,sans-serif;font-size:13px;font-weight:700}
.barres .val.m{fill:var(--encre-douce);font-weight:500}
/* la trame vit dans la feuille du rapport: elle hérite des tokens du papier où elle est posée */
#trame .fond{fill:var(--feuille)}
#trame .point{fill:var(--encre)}
.rapport-legende{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--encre-douce);border-top:1px solid var(--encre);padding-top:12px}
.rapport-legende span{display:inline-flex;align-items:center;gap:8px}
.rapport-legende i{display:inline-block;width:18px;height:9px;border:1px solid var(--encre);background:var(--feuille);
  background-image:radial-gradient(var(--encre) 1px,transparent 1.2px);background-size:4px 4px}
.rapport-legende i.toi{background:var(--accent)}
.rapport-pied{font-size:.8rem;color:var(--encre-douce);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* la maquette de l'application: une fenêtre crème posée sur la section marine, ombre dure décalée de 8 px (une affiche, pas un flou) */
.navig{border:1px solid var(--encre);font-size:.84rem;line-height:1.4;border-radius:3px;overflow:hidden;box-shadow:8px 8px 0 var(--ombre);margin-right:8px;margin-bottom:8px}
.fenetre{background:var(--papier);color:var(--encre)}
.navig-barre{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-bottom:1px solid var(--encre)}
.navig-barre .pt{width:10px;height:10px;border:1px solid var(--encre);border-radius:50%}
.navig-barre .url{flex:1;margin-left:.5rem;border:1px solid var(--filet);padding:.2rem .6rem;color:var(--encre-douce);font-size:.76rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:2px}
.app{display:grid;grid-template-columns:11rem minmax(0,1fr);min-height:22rem}
.app-cote{border-right:1px solid var(--encre);padding:1rem .85rem;display:flex;flex-direction:column;gap:.15rem}
.app-logo{font-family:"Young Serif",Georgia,serif;font-size:1rem;margin-bottom:.8rem}
.app-cote span{display:block;padding:.4rem .6rem;color:var(--encre-douce);font-weight:500;border:1px solid transparent;border-radius:2px}
.app-cote span.on{color:var(--encre);border-color:var(--encre)}
.app-cote .org{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--filet);color:var(--encre-douce);font-size:.76rem;line-height:1.35}
.app-cote .org b{display:block;color:var(--encre);font-weight:700}
.app-main{padding:1rem;display:flex;flex-direction:column;gap:.85rem;min-width:0}
.app-tete{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.app-tete small{display:block;color:var(--encre-douce)}
.app-tete strong{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:1.2rem}
.puce{display:inline-block;padding:.15rem .55rem;font-size:.74rem;font-weight:700;border:1px solid var(--encre);color:var(--encre);white-space:nowrap;border-radius:2px}
.puce.pret{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}
.app-grille{display:grid;grid-template-columns:1.2fr 1fr;gap:.85rem}
.panneau{border:1px solid var(--encre);padding:.8rem .9rem;min-width:0;border-radius:2px}
.panneau-titre{font-weight:700;font-size:.8rem;color:var(--encre-douce);margin-bottom:.5rem}
.cal{grid-row:1/3}
.cal-ligne{display:grid;grid-template-columns:3.8rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--filet)}
.cal-ligne:first-of-type{border-top:0}
.cal-ligne .d{font-weight:700}
.cal-ligne .t{min-width:0}
.cal-ligne .t small{display:block;color:var(--encre-douce)}
.brouillon-texte{font-style:italic;margin:.15rem 0 .6rem}
cite.src{display:inline-block;font-style:normal;font-size:.7rem;color:var(--encre-douce);border-bottom:1px dotted var(--encre-douce);margin-left:.3rem;white-space:nowrap}
.a-valider{margin:0;padding:0;list-style:none;color:var(--encre-douce)}
.a-valider li{display:flex;justify-content:space-between;gap:.5rem;padding:.3rem 0;border-top:1px solid var(--filet)}
.a-valider b{color:var(--encre);font-weight:700}
.courriel .de{color:var(--encre-douce);font-size:.74rem;margin-bottom:.3rem}
.courriel strong{display:block;margin-bottom:.35rem}
.courriel ul{margin:0;padding-left:1rem;color:var(--encre-douce)}
.courriel li{margin:.15rem 0}
.courriel li b{color:var(--encre);font-weight:700}

/* ce qui se passe: le bandeau court, puis cinq temps numérotés (une vraie séquence), la ligne « À toi » isole ce qui dépend de la DG */
.bandeau-court{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.bandeau-court{max-width:100%}
.bandeau-court img{aspect-ratio:16/7;object-fit:cover;object-position:50% 60%}
.rythme .titre{max-width:20em}
.etapes{list-style:none;margin:clamp(1.2rem,3vw,2rem) 0 0;padding:0;border-top:1px solid var(--encre);max-width:52em}
.etapes li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1rem;padding-block:1.4rem 1.6rem;border-bottom:1px solid var(--filet)}
.etapes .num{font-size:2.4rem;line-height:1;color:var(--encre-douce);margin-top:.1em}
.etapes .moment{font-size:.95rem;font-weight:700;color:var(--encre-douce)}
.etapes h3{font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.15;margin-top:.3rem;max-width:22em}
.etapes p:not(.moment){margin-top:.6rem;color:var(--encre-douce);max-width:42em}
.etapes .atoi{color:var(--encre);font-weight:700}
.etapes .atoi b{font-weight:700}

/* ce que ça coûte: trois feuilles, une par clientèle, qui disent d'abord à qui elles s'adressent;
   puis les options, la note, les conditions et le classeur cadenassé */
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:.6rem}
.formule{background:var(--feuille);border:1px solid var(--encre);border-radius:2px;padding:clamp(1.1rem,2.2vw,1.7rem);display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;align-content:start;min-width:0;scroll-margin-top:5rem}
.formule .pourqui{font-size:1.25rem;line-height:1.25;padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--filet);text-wrap:balance}
.formule .nom{font-weight:700;font-size:1.05rem;line-height:1.3}
.formule .nom a{text-decoration:none;border-bottom:1px solid var(--accent)}
.formule .prix-grand{font-family:"Young Serif",Georgia,serif;font-size:2.4rem;line-height:1;margin-top:.7rem}
.formule .prix-grand small{font-family:"Karla",sans-serif;font-size:.95rem;color:var(--encre-douce);margin-left:.35rem;font-weight:400}
.formule .comprend{list-style:none;margin:1.1rem 0 1.5rem;padding:0;display:grid;gap:.5rem;align-content:start;color:var(--encre-douce);font-size:.97rem;line-height:1.4}
.formule .comprend li{padding-left:1.1rem;position:relative}
.formule .comprend li::before{content:"";position:absolute;left:0;top:.55em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.formule .btn{align-self:end;text-align:center;white-space:normal;text-wrap:balance;font-size:1rem;padding:.85rem 1rem}
.formule .dabord{font-size:.9rem;color:var(--encre-douce);margin-top:.8rem;text-align:center}
.formule .dabord a{text-decoration:none;border-bottom:1px solid var(--accent)}
.options{margin:1.4rem 0 0;display:grid;border-top:1px solid var(--encre)}
.options div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.3rem 1.6rem;align-items:center;padding-block:1rem;border-bottom:1px solid var(--filet);scroll-margin-top:5rem}
.options dd.action{font-family:inherit;font-size:1rem;justify-self:end}
.options dt{font-weight:700;font-size:1.05rem;line-height:1.3}
.options dt .def{display:block;font-weight:400;color:var(--encre-douce);font-size:.95rem;margin-top:.2rem;max-width:36em}
.options dd{margin:0;font-family:"Young Serif",Georgia,serif;font-size:1.4rem;line-height:1.1;white-space:nowrap;text-align:right}
/* comparer en détail: un bloc repliable sans script, le tableau défile dans son propre conteneur, jamais la page */
.comparer{margin-top:1.4rem;border-top:1px solid var(--encre)}
.comparer summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1rem;font-family:"Young Serif",Georgia,serif;font-size:1.25rem;line-height:1.2}
.comparer summary::-webkit-details-marker{display:none}
.comparer summary::after{content:"+";font-family:"Karla",sans-serif;font-weight:500;font-size:1.8rem;line-height:1;color:var(--accent-texte);flex:none}
.comparer[open] summary::after{transform:rotate(45deg)}
.tableau-defile{overflow-x:auto;padding-bottom:1.2rem}
.compare{border-collapse:collapse;width:100%;min-width:640px;font:inherit;font-size:.95rem;line-height:1.35;color:var(--encre)}   /* sans doctype, la table ne redonne pas la couleur ni la fonte: on les redit */
.compare th,.compare td{padding:.6rem .8rem;border-bottom:1px solid var(--filet);vertical-align:top;text-align:left}
.compare thead th{border-bottom:1px solid var(--encre);vertical-align:bottom;font-weight:700}
.compare thead th small{display:block;font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:1.05rem;color:var(--encre-douce);margin-top:.15rem}
.compare th[scope=row]{font-weight:700;color:var(--encre);width:26%}
.compare .groupe th{font-family:"Young Serif",Georgia,serif;font-size:1.05rem;color:var(--encre);padding-top:1.4rem;border-bottom:1px solid var(--encre)}
.compare td{color:var(--encre);font-size:.93rem}
.compare thead th:not(:first-child){width:22%}
.comparer .partout{font-size:.95rem;color:var(--encre-douce);max-width:44em;margin-bottom:.8rem}
.comparer .partout a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--accent)}
.compare .oui::before{content:"";display:inline-block;width:.65rem;height:.65rem;border-radius:50%;background:var(--accent);vertical-align:middle}
.compare .non::before{content:"";display:inline-block;width:.8rem;height:1px;background:var(--encre-douce);vertical-align:middle}
.compare td.prix{font-family:"Young Serif",Georgia,serif;font-size:1rem;white-space:nowrap}
.carte-note{margin-top:1.2rem;font-size:1rem;color:var(--encre);max-width:40em}
.carte-note small{display:block;font-size:.88rem;color:var(--encre-douce);margin-top:.3rem}
.gratuit-ligne{margin-top:1.4rem;padding-block:1rem;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);font-family:"Young Serif",Georgia,serif;font-size:1.25rem;line-height:1.2}
.gratuit-ligne b{color:var(--accent-texte);font-weight:400}
.conditions-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.conditions-grille h3{font-size:1.35rem;margin-bottom:.8rem}
.conditions{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.5rem;border-top:1px solid var(--encre)}
.conditions dt,.conditions dd{padding-block:.7rem;border-bottom:1px solid var(--filet)}
.conditions dt{font-weight:700}
.conditions dd{margin:0;color:var(--encre-douce)}
.conditions-grille .fig{max-width:320px;justify-self:end}
@media (max-width:900px){
  .formule .pourqui{font-size:1.1rem}
  .formule .prix-grand{font-size:2rem}
  .formule .comprend{font-size:.92rem}
}

/* fondations: la deuxième clientèle a sa propre porte, sans image */
.fond-liste{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.8rem;max-width:40em}
.fond-liste li{padding-left:1.1rem;position:relative;color:var(--encre-douce);line-height:1.5}
.fond-liste li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.fond-liste li b{color:var(--encre);font-weight:700}
.fond-prix{margin-top:1.4rem;font-size:1.6rem;line-height:1.1}
.fond-prix small{display:block;font-size:.95rem;color:var(--encre-douce);margin-top:.4rem;line-height:1.4}

/* appel final: marine, un très grand titre crème, le bouton mandarine, un lien pour ceux qui ont déjà décidé */
.final .titre{font-size:clamp(2.6rem,8vw,6.2rem);margin-bottom:.8rem}
.final p{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.35;max-width:26em;font-weight:400}
.final .actions{margin-top:1.6rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.final .ou{font-size:1rem;color:var(--encre);text-decoration:none;border-bottom:1px solid var(--accent);line-height:1.3}

/* pied */
footer{border-top:1px solid var(--encre);padding-block:2rem 3rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem 2rem;font-size:.95rem}
footer .qui{color:var(--encre-douce)}
footer .filo{font-weight:700}
footer .filo a{text-decoration:none;border-bottom:1px solid var(--accent)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-inline:24px;gap:2rem}
  .hero .wrap>div,.hero .fig{grid-column:auto}
  .hero .fig{order:-1;max-width:560px}
  .rapport-grille{grid-template-columns:1fr}
  .conditions-grille{grid-template-columns:1fr}
  .conditions-grille .fig{max-width:260px;justify-self:start}
  .app-grille{grid-template-columns:1fr}
  .cal{grid-row:auto}
}
@media (max-width:640px){
  .etapes li{grid-template-columns:2.4rem minmax(0,1fr);gap:.7rem}
  .etapes .num{font-size:1.8rem}
  .app{grid-template-columns:1fr}
  .app-cote{display:none}
  .navig{font-size:.8rem}
  .formules{grid-template-columns:1fr}
  .formule .pourqui{font-size:1.25rem}
  .formule .prix-grand{font-size:2.4rem}
  .formule .comprend{font-size:.97rem}
  .options div{grid-template-columns:1fr;justify-items:start}
  .options dd{text-align:left}
  .options dd.action{justify-self:start}
  .rangee{flex-direction:column;gap:.6rem}
  .rangee input{border-right:1px solid var(--encre);border-radius:2px}
  .rangee .btn{border-radius:2px;justify-content:center;width:100%}
  .champ-neq{grid-template-columns:1fr;gap:.3rem}
}
@media (max-width:460px){
  body{font-size:16px}
  .wrap,.hero .wrap{padding-inline:16px}
  .haut{position:static}
  .haut .wrap{gap:.75rem;padding-block:.7rem}
  .marque .nom{font-size:1.35rem}
  .btn.petit{font-size:.85rem;padding:.55rem .8rem}
  .btn .long{display:none}
  .btn .court{display:inline}
  .hero .btn,.final .btn,.rapport-grille .btn{width:100%;text-align:center}
  .hero h1{font-size:clamp(2.5rem,11.5vw,3.2rem)}
  .final .actions{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background .15s ease,color .15s ease}
  .comparer summary::after{transition:transform .15s ease}
}

/* bascule FR / EN: les deux versions de la page vivent dans le document, une seule est visible.
   Rien d'autre ne change: les boutons réutilisent .btn.petit et .btn.petit.contour. */
[hidden]{display:none}
.langues{margin-left:auto;flex:none;display:flex;gap:.5rem;align-items:center}
/* la version anglaise a sa propre trame (les id restent uniques): même dessin, autre identifiant */
#trame-en .fond{fill:var(--feuille)}
#trame-en .point{fill:var(--encre)}
#en .barres .med{fill:url(#trame-en)}

/* la question qui revient: les quatre points en deux colonnes, comme .fond-liste mais sur toute la largeur */
.fond-liste.deux{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.4rem}
@media (max-width:640px){.fond-liste.deux{grid-template-columns:1fr}}
/* v16: le formulaire quitte le héros pour la section du Positionnement (17 sept) */
.hero .actions{margin-top:1.8rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.hero .ou,.appat .ou{font-size:1rem;color:var(--encre);text-decoration:none;border-bottom:1px solid var(--accent);line-height:1.3}
.appat .formulaire{margin-top:1.4rem}
.appat .note{font-size:.88rem;color:var(--encre-douce);line-height:1.45;max-width:36em;margin-top:.2rem}
.rythme .carte-note{margin-top:1.6rem}
.conditions-grille details{margin-bottom:1.2rem}
@media (max-width:640px){.hero .actions{flex-direction:column;align-items:flex-start}.appat .btn{width:100%}}
/* v16: les deux voies de la fin (le gratuit, l'abonnement) */
.deux-voies{margin-top:clamp(1.6rem,4vw,2.4rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,3rem);align-items:start;text-align:left}
.deux-voies .voie{border-top:1px solid var(--encre);padding-top:1.2rem;scroll-margin-top:5rem}
.deux-voies h3{font-size:1.45rem;margin:0 0 .6rem}
.deux-voies p{font-size:1rem;line-height:1.5;max-width:34em;color:var(--encre-douce);margin:0}
.deux-voies .voie-action{margin-top:1.2rem}
.deux-voies select{font:inherit;font-size:1rem;padding:0 .9rem;height:3.25rem;width:100%;border:1px solid var(--encre);border-radius:2px;background:var(--feuille);color:var(--encre)}
@media (max-width:760px){.deux-voies{grid-template-columns:1fr}}
/* v16 (correction): dans une colonne étroite, le champ et le bouton s'empilent au lieu de se chevaucher */
.appat .rangee,.deux-voies .rangee{display:grid;grid-template-columns:1fr;gap:.6rem}
.appat .rangee input,.deux-voies .rangee input{border-right:1px solid var(--encre);border-radius:2px;width:100%}
.appat .rangee .btn,.deux-voies .rangee .btn{border-radius:2px;width:100%;justify-content:center}
/* v16: la maquette travaille sous tes yeux (barre de demande, balayage du calendrier, barres du rapport) */
.curseur{display:inline-block;width:.45em;height:1.05em;background:var(--accent);vertical-align:-.16em;margin-left:.12em;flex:none}
/* la maquette joue deux écrans: le tableau (0-11 s), puis les programmes (11-20 s) */
.cal-ligne .agir{font-size:.75rem;font-weight:700;border:1px solid var(--accent);color:var(--accent-texte);
  border-radius:2px;padding:.2rem .5rem;white-space:nowrap}
.contextuel{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--filet)}
.contextuel span{font-size:.72rem;border:1px solid var(--filet);border-radius:999px;padding:.2rem .5rem;color:var(--encre-douce)}
.curseur{display:inline-block;width:.45em;height:1.05em;background:var(--accent);vertical-align:-.16em;margin-left:.12em}
.app-main{display:grid}
.vue{grid-area:1/1;display:flex;flex-direction:column;gap:.85rem;min-width:0}
.v-programmes{opacity:0;pointer-events:none}
.cal-ligne.prog .t small{color:var(--encre-douce)}
@media (prefers-reduced-motion:no-preference){
  .v-tableau{animation:ecran-un 20s linear infinite}
  .v-programmes{animation:ecran-deux 20s linear infinite}
  .app-cote .n-tableau{animation:onglet-un 20s linear infinite}
  .app-cote .n-programmes{animation:onglet-deux 20s linear infinite}
  .cal .cal-ligne:nth-child(3){animation:eclairer 20s linear infinite}
  .v-tableau .cal-ligne .agir{animation:presser 20s linear infinite}
  .app-grille .panneau:nth-child(2){animation:repondre 20s linear infinite}
  .brouillon-texte{animation:rediger 20s linear infinite}
  .a-valider li{animation:surgir 20s linear infinite}
  .a-valider li:nth-child(2){animation-delay:.4s}
  .contextuel{animation:surgir 20s linear infinite;animation-delay:.8s}
  .v-programmes .cal-ligne{animation:surgir-prog 20s linear infinite}
  .v-programmes .cal-ligne:nth-child(3){animation-delay:.25s}
  .v-programmes .cal-ligne:nth-child(4){animation-delay:.5s}
  .v-programmes .cal-ligne:nth-child(5){animation-delay:.75s}
  .curseur{animation:clignoter 1.15s steps(1) infinite}
}
@keyframes ecran-un{0%,52%{opacity:1}56%,96%{opacity:0}100%{opacity:1}}
@keyframes ecran-deux{0%,52%{opacity:0}56%,96%{opacity:1}100%{opacity:0}}
@keyframes onglet-un{0%,52%{background:var(--accent);color:var(--sur-accent)}56%,96%{background:transparent;color:inherit}100%{background:var(--accent);color:var(--sur-accent)}}
@keyframes onglet-deux{0%,52%{background:transparent;color:inherit}56%,96%{background:var(--accent);color:var(--sur-accent)}100%{background:transparent;color:inherit}}
@keyframes eclairer{0%,2%{background:transparent}4%,50%{background:rgba(240,138,60,.14)}54%,100%{background:transparent}}
@keyframes presser{0%,2%{background:transparent;color:var(--accent-texte)}4%,8%{background:var(--accent);color:var(--sur-accent)}11%,100%{background:transparent;color:var(--accent-texte)}}
@keyframes repondre{0%,4%{box-shadow:none}6%,50%{box-shadow:0 0 0 2px var(--accent)}54%,100%{box-shadow:none}}
@keyframes rediger{0%,5%{clip-path:inset(0 0 100% 0)}7%{clip-path:inset(0 0 75% 0)}9%{clip-path:inset(0 0 50% 0)}11%{clip-path:inset(0 0 25% 0)}13%,100%{clip-path:inset(0 0 0 0)}}
@keyframes surgir{0%,14%{opacity:0;transform:translateY(4px)}18%,100%{opacity:1;transform:none}}
@keyframes surgir-prog{0%,56%{opacity:0;transform:translateY(4px)}60%,100%{opacity:1;transform:none}}
@keyframes clignoter{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes pousser{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* bascule trimestre / année dans la grille des formules (17 sept): CSS seul, :has() pour montrer le bon prix */
.periode{display:inline-flex;gap:.25rem;padding:.3rem;border:1px solid var(--encre);border-radius:999px;margin:0 0 1.4rem}
.periode input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.periode label{display:flex;align-items:baseline;gap:.5rem;padding:.55rem 1.1rem;border-radius:999px;cursor:pointer;font-weight:700;font-size:.95rem;line-height:1.1}
.periode .offert{font-weight:400;font-size:.8rem;color:var(--accent-texte)}
.periode input:checked+label{background:var(--accent);color:var(--sur-accent)}
.periode input:checked+label .offert{color:var(--sur-accent)}
.periode input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.prix-grand .fact{display:block;font-family:"Karla",sans-serif;font-size:.85rem;font-weight:400;color:var(--encre-douce);margin-top:.5rem;line-height:1.3}
.p-an .fact{color:var(--accent-texte)}
.p-an{display:none}
#prix:has(#periode-an:checked) .p-an,#prix-en:has(#periode-an-en:checked) .p-an{display:inline}
#prix:has(#periode-an:checked) .p-trim,#prix-en:has(#periode-an-en:checked) .p-trim{display:none}
#prix:has(#periode-an:checked) .prix-grand .p-an,#prix-en:has(#periode-an-en:checked) .prix-grand .p-an{display:block}
#prix .prix-grand .p-trim,#prix-en .prix-grand .p-trim{display:block}
#prix:has(#periode-an:checked) .prix-grand .p-trim,#prix-en:has(#periode-an-en:checked) .prix-grand .p-trim{display:none}
@media (max-width:520px){.periode label{padding:.5rem .8rem}}
/* les trois cartes partagent leurs rangées: la question, le nom, le prix et le bouton s'alignent d'une carte à l'autre */
@media (min-width:641px){
  .formules{grid-template-rows:auto auto auto 1fr auto}
  .formule{grid-row:span 5;grid-template-rows:subgrid}
}
/* cases à cocher du formulaire du Positionnement: non enregistré, et consentement aux courriels (loi antipourriel) */
.coche{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.35;color:var(--encre-douce);cursor:pointer}
.coche input{margin-top:.2rem;width:1rem;height:1rem;flex:none;accent-color:var(--accent)}
/* deux formules au lieu de trois: une pour les organismes, une pour les fondations */
.formules.deux-formules{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem}
@media (max-width:640px){.formules.deux-formules{grid-template-columns:1fr}}
.bloc .partout{max-width:56rem;color:var(--encre-douce);margin-top:1.2rem}

/* pages légales: texte courant lisible, même charte que l'accueil */
.legal{padding-block:clamp(2.5rem,6vw,4.5rem)}
.legal .wrap{max-width:46rem}
.legal h1{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:clamp(2rem,4.4vw,3rem);line-height:1.1;margin:0 0 .6rem}
.legal .maj{color:var(--encre-douce);font-size:.9rem;margin:0 0 2.2rem}
.legal h2{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:1.35rem;margin:2.2rem 0 .6rem;padding-top:1.2rem;border-top:1px solid var(--filet)}
.legal p,.legal li{line-height:1.6;max-width:40em}
.legal ul{padding-left:1.1rem}
.legal a{color:inherit;text-decoration-color:var(--accent)}
.liens-legaux{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:.6rem 0 0;font-size:.9rem}
.liens-legaux a{color:inherit;text-decoration-color:var(--accent)}
.merci{padding-block:clamp(3rem,10vw,7rem)}
.merci .wrap{max-width:40rem}