/* ════════════════════════════════════════════════════════════════════════════
   OSSATURE COMMUNE DES 4 PAGES MODÈLES (§1→§10) — chantier « rédaction vente »
   du 2026-08-01. Chargée par templates/modele.php (Demi-ronde ≤ 750 kg, gabarit
   PHP) ET par templates/page-modele.php (les 3 grands formats, contenu Gutenberg).
   C'est ce fichier qui crée la cohérence visuelle entre les deux mécanismes.

   Tout est préfixé « pm- » : modele.css et accueil.css définissent déjà .pill,
   .lead et .head de leur côté — aucune collision possible.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── §1 HERO — sombre, pleine largeur, la promesse en 3 secondes */
.pm-hero{position:relative;background:linear-gradient(160deg,var(--espresso),#3A2412);color:#F6ECDD;overflow:hidden}
.pm-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 120% at 88% 0%,rgba(224,165,96,.24),transparent 62%);pointer-events:none}
.pm-hero .wrap{padding:44px 22px 58px;position:relative;z-index:2}
.pm-hero .crumb{font-size:12.5px;color:#C9B69E;margin-bottom:18px}
.pm-hero .crumb a:hover{color:var(--gold)}
.pm-hgrid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.pm-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(252,247,240,.12);border:1px solid rgba(240,230,217,.32);backdrop-filter:blur(6px);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;color:#F6ECDD;margin-bottom:20px}
.pm-hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;color:#FDF9F3;line-height:1.06}
.pm-hero h1 em{font-style:normal;color:var(--gold)}
.pm-lead{margin:18px 0 24px;font-size:17px;color:#DCCDB8;max-width:520px}
.pm-ticks{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.pm-ticks div{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:#EDE0CD}
.pm-ticks svg{width:19px;height:19px;flex:0 0 19px;stroke:var(--gold);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pm-hero .btns{gap:12px}
.pm-hshot{position:relative}
.pm-hshot img{width:100%;border-radius:18px;box-shadow:0 30px 60px -22px rgba(0,0,0,.6)}
.pm-hshot figcaption{font-size:11.5px;color:#B8A88F;margin-top:8px;font-style:italic;text-align:center}
.pm-hfloat{position:absolute;right:-10px;bottom:-16px;background:#fff;color:var(--ink);border-radius:14px;padding:13px 18px;font-size:13px;font-weight:600;box-shadow:var(--sh);line-height:1.35}
.pm-hfloat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;color:var(--brand)}

/* ── Rythme des sections */
.pm-sec{padding:62px 0}
.pm-sec.tight{padding-top:0}
.pm-sec.alt{background:var(--sand)}
.pm-head{max-width:660px;margin-bottom:32px}
.pm-kick{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--brand);margin-bottom:9px}
.pm-sec h2{font-size:clamp(25px,3vw,34px);font-weight:800;line-height:1.15}
.pm-head p{margin-top:12px;font-size:16px;color:var(--ink-soft)}

/* ── §2 POUR QUI — 3 cartes de projection */
.pm-fit{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pm-fit article{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
.pm-fit article:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.pm-fit .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sand);color:var(--brand);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;margin-bottom:14px}
.pm-fit h3{font-size:17.5px;font-weight:700;margin-bottom:8px}
.pm-fit p{font-size:14.5px;color:var(--ink-soft)}

/* ── Lien croisé entre gammes (fin de §2) */
.pm-cross{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ember);border-radius:0 14px 14px 0;padding:18px 22px;margin-top:22px;box-shadow:var(--sh-sm)}
.pm-cross b{font-family:'Bricolage Grotesque',sans-serif;font-size:16px}
.pm-cross span{font-size:14.5px;color:var(--ink-soft);flex:1;min-width:220px}
.pm-cross a{font-weight:600;color:var(--brand);white-space:nowrap}
.pm-cross a:hover{text-decoration:underline}

/* ── §3 CE QUI EST INCLUS */
.pm-incl{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pm-incl .c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--sh-sm)}
.pm-incl .c.full{grid-column:1/-1}
.pm-incl h3{font-size:16.5px;font-weight:700;margin-bottom:14px}
.pm-incl h3 small{font-weight:500;color:var(--ink-soft);font-family:'Inter',sans-serif}
.pm-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.pm-list.one{grid-template-columns:1fr}
.pm-list li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--ink-soft)}
.pm-list li::before{content:"";flex:0 0 16px;height:16px;margin-top:3px;border-radius:50%;background:var(--sand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C5A29' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center}
.pm-note{margin-top:18px;font-size:13.5px;color:var(--steel);font-style:italic}

/* ── §4 VERSIONS & PRIX — le tableau doit vendre, pas documenter */
.pm-tbl{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm)}
.pm-tbl table{width:100%;border-collapse:collapse;font-size:14.5px}
.pm-tbl th{background:var(--espresso);color:#FDF9F3;padding:15px 16px;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14.5px}
.pm-tbl th:first-child{text-align:left;font-size:13px;color:#C9B69E;font-weight:600}
.pm-tbl td{padding:13px 16px;border-top:1px solid var(--line);text-align:center;color:var(--ink-soft)}
.pm-tbl td:first-child{text-align:left;font-weight:600;color:var(--ink)}
.pm-tbl tr.hi td{background:#FBF4EA;color:var(--ink);font-weight:700}
.pm-tbl tr.price td{background:var(--sand);border-top:2px solid var(--ember)}
.pm-tbl tr.price td:not(:first-child){font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;color:var(--brand)}
.pm-tbl tr.ttc td{font-size:13.5px;color:var(--steel);border-top:0;padding-top:0;background:var(--sand)}
.pm-tblnote{font-size:13px;color:var(--steel);margin-top:14px}
.pm-cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}

/* ── §5 AUTRES DIMENSIONS · §6 À SAVOIR — encadrés de confiance */
.pm-call{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ember);border-radius:0 16px 16px 0;padding:26px 28px;box-shadow:var(--sh-sm)}
.pm-call.warm{background:#FBF4EA}
.pm-call h3{font-size:19px;font-weight:800;margin-bottom:10px}
.pm-call p{font-size:15px;color:var(--ink-soft);margin-bottom:12px}
.pm-call p:last-child{margin-bottom:0}
.pm-call strong{color:var(--ink)}

/* ── §7 POURQUOI TYLER'S — réassurance commune aux 4 pages */
.pm-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.pm-why div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.pm-why b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;margin-bottom:7px}
.pm-why p{font-size:14px;color:var(--ink-soft)}

/* ── §8 COMMENT ÇA SE PASSE — 3 étapes numérotées */
.pm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.pm-steps div{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 24px 24px;box-shadow:var(--sh-sm)}
.pm-steps div::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:24px;width:36px;height:36px;border-radius:50%;background:var(--ember);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;box-shadow:0 8px 20px rgba(201,119,47,.4)}
.pm-steps b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;margin-bottom:7px}
.pm-steps p{font-size:14.5px;color:var(--ink-soft)}

/* ── §9 FAQ — accordéon natif, sans JS */
.pm-faq{max-width:820px}
.pm-faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.pm-faq summary{cursor:pointer;padding:17px 52px 17px 20px;font-weight:600;font-size:15.5px;position:relative;list-style:none}
.pm-faq summary::-webkit-details-marker{display:none}
.pm-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-6px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .2s}
.pm-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.pm-faq summary:hover{color:var(--brand)}
.pm-faq .a{padding:0 20px 18px;font-size:14.5px;color:var(--ink-soft)}

/* ── §10 CTA FINAL */
.pm-final{background:linear-gradient(160deg,var(--espresso),#3A2412);color:#F6ECDD;border-radius:22px;padding:52px 40px;text-align:center;position:relative;overflow:hidden}
.pm-final::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(224,165,96,.22),transparent 62%);pointer-events:none}
.pm-final>*{position:relative;z-index:2}
.pm-final h2{font-size:clamp(25px,3.2vw,36px);font-weight:800;color:#FDF9F3}
.pm-final p{margin:14px auto 26px;font-size:16px;color:#DCCDB8;max-width:560px}
.pm-final .btns{justify-content:center}
.pm-tel{margin-top:22px;font-size:14.5px;color:#C9B69E}
.pm-tel a{color:var(--gold);font-weight:600}
.pm-tel a:hover{text-decoration:underline}

/* ── Photos — reprend la règle F2 (mention sous l'image si autre dimension) */
.pm-shot{margin:0}
.pm-shot img{width:100%;border-radius:16px;border:1px solid var(--line)}
.pm-shot figcaption{font-size:11.5px;color:var(--steel);margin-top:7px;font-style:italic}
.pm-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

/* ── §4bis GALERIE — miniatures cliquables + visionneuse (2026-08-01).
   Une page modèle sans photos ne vend pas : chaque page expose désormais tout ce
   qu'on a du modèle (extérieurs, intérieurs, détails). Règle F2 : la mention
   « autre dimension » est portée par la note de section ET par la légende de la
   visionneuse, donc toujours visible quand la photo est regardée en grand. */
.pm-galnote{font-size:13px;color:var(--steel);font-style:italic;margin:-18px 0 20px}
.pm-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pm-th{border:0;padding:0;margin:0;background:none;cursor:zoom-in;border-radius:12px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-sm);position:relative;display:block}
.pm-th img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pm-th:hover img,.pm-th:focus-visible img{transform:scale(1.07)}
.pm-th:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.pm-th::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,15,8,.34),transparent 42%);opacity:0;transition:opacity .25s}
.pm-th:hover::after{opacity:1}
.pm-th b{position:absolute;left:10px;bottom:9px;z-index:2;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6);opacity:0;transition:opacity .25s}
.pm-th:hover b{opacity:1}

/* Visionneuse — construite par page-modele.js, fermée par Échap / clic hors image */
.pm-lb{position:fixed;inset:0;z-index:200;background:rgba(20,11,5,.94);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 18px 30px;gap:14px}
.pm-lb[hidden]{display:none}
.pm-lb img{max-width:min(1120px,94vw);max-height:76vh;width:auto;border-radius:12px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.pm-lb figcaption{color:#DCCDB8;font-size:13.5px;text-align:center;max-width:640px}
.pm-lb .c{color:#EDE0CD;font-size:12.5px;letter-spacing:.04em}
.pm-lb button{position:absolute;border:1px solid rgba(240,230,217,.3);background:rgba(252,247,240,.1);color:#F6ECDD;border-radius:50%;width:46px;height:46px;cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.16s}
.pm-lb button:hover{background:rgba(252,247,240,.24);transform:scale(1.06)}
.pm-lb .x{top:18px;right:18px}
.pm-lb .p{left:18px;top:50%;margin-top:-23px}
.pm-lb .n{right:18px;top:50%;margin-top:-23px}
body.pm-lb-open{overflow:hidden}

/* ── §3bis COMPARATEUR CLASSIC / NOUVELLE GÉNÉRATION — deux cartes photo côte à
   côte puis les différences en face-à-face. Objectif : comprendre l'écart en
   5 secondes sans lire (retour Mike du 2026-08-01, deux listes à puces ne suffisent pas). */
.pm-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.pm-vs article{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.pm-vs article:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.pm-vs .m{position:relative;aspect-ratio:16/10;overflow:hidden}
.pm-vs .m img{width:100%;height:100%;object-fit:cover}
.pm-vs .tag{position:absolute;top:12px;left:12px;background:var(--espresso);color:#FDF9F3;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:999px;letter-spacing:.04em}
.pm-vs .tag.ng{background:var(--ember)}
.pm-vs .b{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pm-vs h3{font-size:19px;font-weight:800}
.pm-vs .s{font-size:14.5px;color:var(--ink-soft);flex:1}
.pm-vs .pr{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;font-weight:800;color:var(--brand);line-height:1.15}
.pm-vs .pr small{display:block;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--steel)}
.pm-diff td.a{color:var(--ink-soft)}
.pm-diff td.b{background:#FBF4EA;font-weight:700;color:var(--ink)}

/* ── CARTES MODÈLES (page catégorie /grands-formats/) — la porte d'entrée du menu
   doit montrer les 3 modèles en grand, pas les citer en paragraphes. */
.pm-models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pm-models article{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.pm-models article:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.pm-models .m{aspect-ratio:4/3;overflow:hidden}
.pm-models .m img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pm-models article:hover .m img{transform:scale(1.05)}
.pm-models .b{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1}
.pm-models h3{font-size:21px;font-weight:800}
.pm-models .len{font-size:12.5px;font-weight:700;color:var(--brand);font-family:'Bricolage Grotesque',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pm-models p{font-size:14.5px;color:var(--ink-soft);flex:1}
.pm-models .pr{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;color:var(--brand)}
.pm-models .pr small{display:block;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--steel)}
.pm-models .go{margin-top:6px}

/* ── PLACEHOLDER PHOTO — mieux vaut une case honnête qu'une photo qui ment.
   Posé le 2026-08-01 sur la Demi-ronde Grand Format : toute demi-ronde ≤ 750 kg
   est à UN essieu par construction (c'est la limite de charge qui l'impose), ses
   photos extérieures ne peuvent donc pas illustrer une fiche « 2 essieux freinés ».
   Aucune vue extérieure de Demi-ronde Grand Format n'existe encore au dépôt. */
.pm-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:30px 26px;color:var(--ink-soft);
  background:repeating-linear-gradient(135deg,var(--sand),var(--sand) 13px,#EFE2CE 13px,#EFE2CE 26px);
  border:1px dashed #D9C7AC;border-radius:16px;min-height:230px}
.pm-ph svg{width:34px;height:34px;stroke:var(--brand);stroke-width:1.6;fill:none;opacity:.75}
.pm-ph b{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;color:var(--brand)}
.pm-ph span{font-size:12.5px;max-width:300px;line-height:1.5}
.pm-models .m .pm-ph{height:100%;border:0;border-radius:0;min-height:0}
.pm-hshot .pm-ph{aspect-ratio:16/10;min-height:0}

/* ── Adaptatif */
@media(max-width:960px){
  .pm-hgrid{grid-template-columns:1fr;gap:34px}
  .pm-hfloat{position:static;display:inline-block;margin-top:14px}
  .pm-fit,.pm-steps,.pm-models{grid-template-columns:1fr}
  .pm-vs{grid-template-columns:1fr}
  .pm-gal{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .pm-lb{padding:64px 12px 24px}
  .pm-lb .p{left:8px}.pm-lb .n{right:8px}
  .pm-incl{grid-template-columns:1fr}
  .pm-list{grid-template-columns:1fr}
  .pm-sec{padding:46px 0}
}
@media(max-width:640px){
  .pm-tbl{overflow-x:auto}
  .pm-tbl table{min-width:520px}
  .pm-final{padding:40px 22px;border-radius:16px}
  .pm-hero .wrap{padding:32px 22px 44px}
}