/* ──────────────────────────────────────────────────────────────
   DÉMONSTRATION 4/4 — site fictif (JWC WEB STUDIO)
   Formule simple, TROIS pages : 250 € (150 € la première, 50 € les suivantes).

   🔑 Les règles de ce fichier sont identiques à celles de la version
      UNE page (/demos/atelier-terre-grise.html) — vérifié : 8 196
      caractères, un seul commentaire diffère. S'y ajoutent, tout en
      bas, les règles propres aux trois pages (navigation, lien vers
      la page suivante). C'est le cœur de la démonstration : la
      formule simple garde « la même mise en page » quel que soit le
      nombre de pages. Ce qui change, c'est la place : chaque sujet a
      sa page au lieu d'un bloc.
      ⛔ Ne pas « améliorer » le design ici : si la version à 250 €
         devenait plus jolie, on vendrait autre chose que ce qui est
         écrit au tarif.
   🔴 Téléphone : racine 01 99 00 — bloc Arcep réservé à la fiction
      (décision 2018-0881) : ni appeler, ni être appelé.
   ────────────────────────────────────────────────────────────── */
:root{
  --ground:#f3f3f2;      /* gris très clair */
  --ink:#1a1e20;
  --soft:#434a4d;        /* ≥7:1 */
  --faint:#50585b;       /* ≥4.5:1 */
  --accent:#3a5260;      /* bleu ardoise */
  --accent-d:#2a3c47;
  --field:#e4e5e4;
  --slot:#d8dad9;
  --white:#fdfdfc;
  --serif:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
img,svg{max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
@media (max-width:560px){.wrap{padding:0 16px}}

/* ── Bandeau de démonstration (mention 1/2) ── */
.demobar{background:var(--ink);color:#eef0f0;font-size:13px;padding:9px 0}
.demobar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.demobar b{font-weight:600}
.demobar .px{color:#aeb5b7}
/* deux liens : la version une page du même atelier, et l'offre */
.dlinks{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 18px}
.demobar a{color:var(--white);text-decoration:underline;
           text-underline-offset:3px;white-space:nowrap;font-weight:600}
.demobar a:hover{color:#a9c4d2}
@media (max-width:760px){.dlinks{margin-left:0}}

/* ── En-tête ── */
.top{background:var(--ground);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:22px;padding-top:18px;padding-bottom:18px}
.mark{font-family:var(--serif);font-size:20px;text-decoration:none}
.nav{display:flex;gap:20px;margin-left:auto;font-size:15.5px}
.nav a{text-decoration:none;color:var(--soft);padding:4px 0}
.nav a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.call{background:var(--accent);color:var(--white);text-decoration:none;
      padding:10px 17px;font-weight:600;font-size:15.5px;transition:background .15s}
.call:hover{background:var(--accent-d)}
@media (prefers-reduced-motion:reduce){.call{transition:none}}
@media (max-width:760px){
  .nav{display:none}
  .top .wrap{padding-top:14px;padding-bottom:14px;gap:12px}
  .call{margin-left:auto;padding:9px 14px;font-size:15px}
}
@media (max-width:480px){
  .hero .acts{display:block}
  .hero .acts .call{display:block;text-align:center}
  .hero .acts .tel{display:inline-block;margin-top:16px}
}

/* ── BLOC 1 — accueil ── */
.hero{padding:34px 0 58px}
/* Palatino est plus large que Georgia : palier plus bas pour tenir en deux lignes */
.hero h1{font-family:var(--serif);font-weight:400;margin:0;
         font-size:clamp(32px,5.4vw,53px);line-height:1.05;letter-spacing:-.022em}
.hero .sub{margin:26px 0 0;font-size:clamp(17px,2vw,20px);max-width:36ch;color:var(--soft)}
.hero .acts{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .tel{font-family:var(--serif);font-size:19px;text-decoration:none}
.hero .tel:hover{box-shadow:inset 0 -2px 0 var(--accent)}
/* la photo mène le premier écran : elle prend plus de place que le texte */
.herogrid{display:grid;grid-template-columns:1fr 1.22fr;gap:40px;align-items:center}
@media (max-width:860px){.herogrid{grid-template-columns:1fr;gap:26px;align-items:start}}

/* ── Emplacements photo (prise de vue non comprise : sur devis) ── */
.ph{position:relative;overflow:hidden;background:var(--slot);
    display:flex;align-items:center;justify-content:center;text-align:center}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph .lab{padding:0 16px;line-height:1.45;font-size:14px;color:var(--soft)}
.ph .lab b{display:block;font-family:var(--serif);font-weight:400;
           font-size:17px;color:var(--ink);margin-bottom:2px}
.ph.t2{background:#dcdedd}
.ph.t3{background:#d1d4d3}
.ph.r43{aspect-ratio:4/3}
.ph.r32{aspect-ratio:3/2}

/* ── BLOC 2 — cours et tarifs ── */
.band{background:var(--field)}
section{padding:62px 0;scroll-margin-top:76px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.8vw,39px);
   line-height:1.08;letter-spacing:-.018em;margin:0 0 8px}
.lede{margin:0 0 34px;color:var(--soft);max-width:54ch}
.cours{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
@media (max-width:780px){.cours{grid-template-columns:1fr}}
.fold{border:0;padding:16px 0;margin:0;background:none;width:100%;text-align:left;
      font:inherit;color:inherit;cursor:pointer;display:flex;align-items:baseline;gap:12px}
.fold:hover .ft{box-shadow:inset 0 -2px 0 var(--accent)}
.fold .ft{font-family:var(--serif);font-size:21px}
.fold .fc{margin-left:auto;color:var(--faint);font-size:14.5px}
.fold .fi{color:var(--accent);font-size:19px;line-height:1;width:14px;transition:transform .18s}
.fold[aria-expanded="true"] .fi{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.fold .fi{transition:none}}
.panel{display:none;padding:0 0 18px}
.panel.open{display:block}
.item{display:flex;gap:14px;align-items:baseline;padding:9px 0}
.item .in{flex:1}
.item .id{color:var(--soft);font-size:15px;display:block;margin-top:2px}
.item .ip{font-family:var(--serif);white-space:nowrap}
.cgroup+.cgroup{box-shadow:inset 0 1px 0 rgba(26,30,32,.13)}

/* ── BLOC 3 — les photos ── */
/* 4 emplacements + celui de l'accueil = 5, la limite de la formule */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.shots{grid-template-columns:1fr}}
.shot{position:relative;border:0;padding:0;background:none;cursor:zoom-in;
      display:block;width:100%;font:inherit;color:inherit}
.shot figcaption{font-size:14px;color:var(--soft);padding-top:7px;text-align:left}
.shot .ph{transition:box-shadow .15s}
.shot:hover .ph,.shot:focus-visible .ph{box-shadow:inset 0 0 0 3px var(--accent)}
@media (prefers-reduced-motion:reduce){.shot .ph{transition:none}}
.shotnote{margin:22px 0 0;font-size:15px;color:var(--soft);max-width:62ch}

/* visionneuse */
.lb{position:fixed;inset:0;z-index:90;background:rgba(12,15,16,.94);
    display:none;padding:28px;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{margin:0;max-width:860px;width:100%}
.lb figcaption{color:#e4e7e7;font-size:15px;padding-top:14px}
.lbx{position:absolute;top:18px;right:20px;background:none;border:0;color:var(--white);
     font-size:30px;line-height:1;cursor:pointer;padding:8px 12px;font-family:var(--sans)}
.lbx:hover{color:#a9c4d2}

/* ── BLOC 4 — horaires et accès ── */
.infos{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:780px){.infos{grid-template-columns:1fr;gap:30px}}
.hrow{display:flex;gap:16px;padding:11px 0;align-items:baseline}
.hrow .hd{min-width:9.5em;font-family:var(--serif);font-size:18px}
.hrow .hv{color:var(--soft)}
.hrow.off .hv{color:var(--faint)}
.hrow+.hrow{box-shadow:inset 0 1px 0 rgba(26,30,32,.13)}
.acc p{margin:0 0 13px}
.acc .big{font-family:var(--serif);font-size:20px}

/* ── BLOC 5 — contact ── */
.contact{background:var(--accent);color:#eef4f7}
.contact h2{color:var(--white)}
.contact .lede{color:#c8dae3}
.cgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
@media (max-width:780px){.cgrid{grid-template-columns:1fr;gap:30px}}
.cbig{font-family:var(--serif);font-size:clamp(30px,5.5vw,51px);letter-spacing:-.02em;
      text-decoration:none;display:inline-block}
.cbig:hover{box-shadow:inset 0 -3px 0 #a9c4d2}
.cnote{margin:22px 0 0;color:#c8dae3;max-width:46ch}
.cside{color:#c8dae3}
.cside p{margin:0 0 15px}
.cside b{display:block;color:var(--white);font-family:var(--serif);
         font-size:19px;font-weight:400;margin-bottom:3px}

/* ── pied ── */
footer{background:var(--ink);color:#c6cbcc;padding:40px 0;font-size:14.5px}
footer .fname{font-family:var(--serif);font-size:24px;color:#eef0f0;
              display:block;margin-bottom:14px}
footer p{margin:0 0 9px;max-width:66ch}
footer .fdemo{color:#eef0f0}
footer a{color:var(--white)}

.rise{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}
@media print{.rise{opacity:1 !important;transform:none !important}}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.contact :focus-visible,.demobar :focus-visible,footer :focus-visible{outline-color:#a9c4d2}

/* ── Propre à la version trois pages ──────────────────────────
   La navigation mène à de vraies pages : on montre la page courante.
   ───────────────────────────────────────────────────────────── */
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.navmob{display:none}
@media (max-width:760px){
  .navmob{display:flex;gap:4px 20px;flex-wrap:wrap;font-size:15.5px;
          padding:0 0 8px;margin-top:-6px}
  /* cible tactile : 23px de haut, c'était trop petit pour un pouce */
  .navmob a{text-decoration:none;color:var(--soft);padding:11px 0;display:inline-block}
  .navmob a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
}
/* lien de bas de page vers la page suivante */
.next{margin-top:38px;padding-top:24px;box-shadow:inset 0 1px 0 rgba(26,30,32,.13)}
.next a{font-family:var(--serif);font-size:21px;text-decoration:none}
.next a:hover{box-shadow:inset 0 -2px 0 var(--accent)}
.next .nl{display:block;font-size:14px;color:var(--faint);
          font-family:var(--sans);margin-bottom:4px}

/* ── Calcul du tarif — propre à la version TROIS pages ────────
   🔑 Sur une seule page, ce bloc prendrait la place d'un autre :
      la formule simple va jusqu'à 5 blocs PAR PAGE. C'est
      exactement ce qu'on gagne en achetant une page de plus —
      pas un plus beau design, mais de la place pour un outil.
   ───────────────────────────────────────────────────────────── */
.calc{background:var(--white);padding:22px 24px}
.calcopts{display:flex;flex-wrap:wrap;gap:8px}
.co{font:inherit;font-size:15.5px;padding:11px 15px;cursor:pointer;border:0;
    background:var(--field);color:var(--ink);transition:background .15s,color .15s}
.co:hover{background:#d6d9d8}
.co[aria-pressed="true"]{background:var(--accent);color:var(--white)}
.calcnb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
/* 🔴 sans cette ligne, display:flex écrase l'attribut hidden et le choix du
   nombre de séances reste affiché pour le cours d'essai (constaté à l'écran). */
.calcnb[hidden]{display:none}
.cnl{color:var(--soft);font-size:15px}
.cnb{display:flex;gap:6px}
.cn{font:inherit;font-size:15px;min-width:44px;height:44px;cursor:pointer;border:0;
    background:var(--field);color:var(--ink);transition:background .15s,color .15s}
.cn:hover{background:#d6d9d8}
.cn[aria-pressed="true"]{background:var(--accent);color:var(--white)}
@media (prefers-reduced-motion:reduce){.co,.cn{transition:none}}
.calcres{margin-top:20px;padding-top:18px;box-shadow:inset 0 1px 0 rgba(26,30,32,.13)}
.crp{font-family:var(--serif);font-size:clamp(31px,5vw,45px);letter-spacing:-.02em;line-height:1}
.crd{margin-top:7px;font-size:16px}
.cri{margin-top:4px;font-size:15px;color:var(--soft);max-width:56ch}
.calcnote{margin:18px 0 0;font-size:15px;color:var(--soft);max-width:64ch}
.shotfig{margin:0}

/* ── « Du tour au four » : les étapes, une par une (page L'atelier) ── */
.etapes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.et{font:inherit;font-size:15.5px;padding:11px 15px;cursor:pointer;border:0;
    background:var(--field);color:var(--ink);transition:background .15s,color .15s}
.et:hover{background:#d6d9d8}
.et[aria-pressed="true"]{background:var(--accent);color:var(--white)}
@media (prefers-reduced-motion:reduce){.et{transition:none}}
.etpan{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:780px){.etpan{grid-template-columns:1fr;gap:22px}}
.etpan[hidden]{display:none}
.ettitre{font-family:var(--serif);font-size:22px;margin:0 0 8px}
.etdelai{display:inline-block;font-size:14px;color:var(--faint);margin-bottom:10px}
.ettexte p{margin:0 0 12px}