/* ════════════════════════════════════════════════════════════════
   Gabarit « Modèle Demi-ronde » — CSS spécifique.
   La base commune (root, header, footer, badges, boutons, reveal…)
   vit dans style.css : aucune duplication ici.
   ════════════════════════════════════════════════════════════════ */

/* ── HERO */
.hero{padding:44px 0 30px}
#modele .crumb{font-size:12.5px;color:var(--steel);margin-bottom:16px}
#modele .crumb a:hover{color:var(--brand)}
.hgrid{display:grid;grid-template-columns:1fr 1.08fr;gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--brand);margin-bottom:16px;font-family:'Bricolage Grotesque';text-transform:uppercase;letter-spacing:.06em}
.hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.02}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{margin:18px 0 22px;font-size:16.5px;color:var(--ink-soft);max-width:460px}
.ticks{display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.ticks div{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.ticks svg{width:17px;height:17px;stroke:var(--dispo);stroke-width:2.2;fill:none;flex:none;margin-top:2px}
.hphoto{position:relative;perspective:1100px}
.hp{border-radius:24px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--line);transform-style:preserve-3d;transition:transform .25s;will-change:transform}
.hp img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hfloat{position:absolute;bottom:-14px;left:-12px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh);padding:12px 16px;font-size:12.5px;z-index:3}
.hfloat b{font-family:'Bricolage Grotesque';font-size:19px;color:var(--brand);display:block}
@media(max-width:880px){.hgrid{grid-template-columns:1fr;gap:28px}}

/* ── Boutons — la maquette modèle diffère de la base :
   primaire brun (pas ambre), gabarit 14px/25px, sans reflet animé */
#modele .btn{padding:14px 25px}
#modele .btn-p{background:var(--brand);box-shadow:var(--sh)}
#modele .btn-p:hover{background:var(--brand-d)}
#modele .btn-p::after{display:none}

/* ── SECTIONS */
section.blk{padding:66px 0}
.head{max-width:680px;margin:0 auto 40px;text-align:center}
.kick{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.head h2{font-size:clamp(27px,3.4vw,40px);font-weight:800}
.head p{color:var(--ink-soft);font-size:15.5px;margin-top:10px}

/* ── DEUX VERSIONS côte à côte */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vc{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--sh-sm);transition:.22s;display:flex;flex-direction:column}
.vc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.vc .vm{aspect-ratio:4/3;position:relative;overflow:hidden}
.vc .vm img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vc:hover .vm img{transform:scale(1.05)}
.vtag{position:absolute;top:13px;left:13px;font-family:'Bricolage Grotesque';font-size:11.5px;font-weight:700;color:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:2}
.vt-c{background:var(--espresso)} .vt-n{background:var(--ember)}
.vb{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.vb h3{font-size:21px;font-weight:800;margin-bottom:4px}
.vb .sub{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.vb ul{list-style:none;margin-bottom:18px}
.vb li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin-bottom:8px;color:var(--ink)}
.vb li svg{width:16px;height:16px;stroke:var(--dispo);stroke-width:2.2;fill:none;flex:none;margin-top:2px}
.vfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.vp{font-family:'Bricolage Grotesque';font-weight:800;font-size:21px}
.vp small{display:block;font-size:11px;color:var(--steel);font-family:'Inter';font-weight:500}
.vfoot a{font-size:13.5px;font-weight:600;color:var(--brand)}
@media(max-width:820px){.vgrid{grid-template-columns:1fr}}

/* ── TABLEAU COMPARATIF */
.cmp{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-sm);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:'Bricolage Grotesque';font-size:13.5px;background:var(--sand)}
.cmp thead th:nth-child(2){color:var(--espresso)}
.cmp thead th:nth-child(3){color:var(--ember)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{color:var(--ink-soft);font-weight:500;width:34%}
.cmp tbody tr:hover{background:#FBF6EE}
.yes{color:var(--dispo);font-weight:600}.no{color:var(--steel)}
.cnote{font-size:12px;color:var(--steel);padding:12px 18px;background:#FBF6EE;border-top:1px solid var(--line);font-style:italic}
@media(max-width:640px){.cmp{overflow-x:auto}.cmp table{min-width:560px}}

/* ── GALERIE */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:1000px}
.g{border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);transform-style:preserve-3d;transition:transform .25s,box-shadow .25s;will-change:transform}
.g:hover{box-shadow:var(--sh)}
.g img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:700px){.gal{grid-template-columns:1fr 1fr}}

/* ── SPECS */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;box-shadow:var(--sh-sm)}
.sp b{font-family:'Bricolage Grotesque';font-size:20px;display:block;color:var(--brand)}
.sp span{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:760px){.specs{grid-template-columns:1fr 1fr}}

/* ── DEMI-RONDES EN STOCK */
.stk{background:linear-gradient(180deg,var(--sand),var(--cream))}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.u{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);transition:.2s;display:flex;flex-direction:column}
.u:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.um{aspect-ratio:4/3;position:relative;overflow:hidden}
.um img{width:100%;height:100%;object-fit:cover}
.ub{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.ub h3{font-size:15px;font-weight:700}
.ub .m{font-size:12px;color:var(--steel);margin-bottom:10px}
.uf{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.uf .p{font-family:'Bricolage Grotesque';font-weight:800;font-size:17px}
.uf .p small{display:block;font-size:10.5px;color:var(--steel);font-family:'Inter',sans-serif;font-weight:500;line-height:1.3}
.uf a{font-size:12.5px;font-weight:600;color:var(--brand);flex:none}
@media(max-width:760px){.sgrid{grid-template-columns:1fr}}

/* ── BANDEAU CTA */
.band .box{background:linear-gradient(130deg,var(--brand),var(--ember));border-radius:26px;box-shadow:var(--sh);padding:48px;text-align:center;color:#fff;position:relative;overflow:hidden}
.band .box::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 130% at 82% 0%,rgba(255,255,255,.2),transparent 60%)}
.band h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;position:relative}
.band p{position:relative;margin:10px 0 24px;color:#FBEEDF;font-size:15px}
.band .btn-w{position:relative}