/* ════════════════════════════════════════════════════════════════
   ACCUEIL — CSS spécifique au gabarit front-page.php.
   La base commune (:root, header, boutons, badges, chips, footer,
   reveal/tilt) vit dans style.css : rien n'est redéfini ici.
   ════════════════════════════════════════════════════════════════ */

/* ── HÉROS CINÉMATIQUE */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transform:scale(1.06);will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(27,15,8,.88) 0%,rgba(27,15,8,.62) 42%,rgba(27,15,8,.15) 75%,rgba(27,15,8,.35) 100%),
  linear-gradient(to top,rgba(27,15,8,.55),transparent 34%)}
.hero .wrap{position:relative;z-index:2;padding-top:110px;padding-bottom:80px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(252,247,240,.12);border:1px solid rgba(240,230,217,.3);backdrop-filter:blur(6px);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;color:#F6ECDD;margin-bottom:24px}
.pill .d{width:7px;height:7px;border-radius:50%;background:#5FC98A;box-shadow:0 0 0 3px rgba(95,201,138,.25)}
.hero h1{font-size:clamp(42px,6vw,76px);font-weight:800;line-height:.98;color:#FDF9F3;max-width:640px;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero h1 em{font-style:normal;color:var(--gold);position:relative;white-space:nowrap}
.hero h1 em svg{position:absolute;left:0;bottom:-10px;width:100%;height:13px}
.hero p{margin:26px 0 34px;font-size:18px;color:#E4D6C3;max-width:460px}
.microtrust{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap}
.microtrust div{font-size:13px;color:#D9C9B4;display:flex;align-items:center;gap:7px}
.microtrust svg{width:16px;height:16px;stroke:#5FC98A;stroke-width:2.2;fill:none}
.hero-card{position:absolute;right:max(22px,calc((100vw - 1136px)/2));bottom:56px;z-index:3;background:rgba(252,247,240,.96);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:18px 22px;backdrop-filter:blur(8px)}
.hero-card .st{font-size:11px;font-weight:700;color:#fff;background:var(--dispo);padding:4px 10px;border-radius:999px;font-family:'Bricolage Grotesque';display:inline-block;margin-bottom:8px}
.hero-card b{font-family:'Bricolage Grotesque';font-size:26px;color:var(--ink);display:block;line-height:1.1}
.hero-card span{font-size:12.5px;color:var(--ink-soft)}
.scrolldn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:#E4D6C3;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.85}
.scrolldn::after{content:"";width:1px;height:34px;background:linear-gradient(to bottom,#E4D6C3,transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}
@media(max-width:900px){.hero-card{display:none}.hero{min-height:78vh}}

/* ── BANDEAU CERTIFICATIONS */
.certs{background:#fff;border-bottom:1px solid var(--line)}
.certs .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:20px 22px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.chip svg{width:16px;height:16px;stroke:var(--brand);stroke-width:1.8;fill:none}

/* ── SECTIONS GÉNÉRIQUES */
section.blk{padding:88px 0}
.head{max-width:660px;margin:0 auto 48px;text-align:center}
.kick{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-bottom:12px}
.head h2{font-size:clamp(30px,3.8vw,46px);font-weight:800}
.head p{color:var(--ink-soft);font-size:16px;margin-top:12px}

/* ── GAMMES */
.ranges{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.rphoto{border-radius:22px;overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--line);position:relative;min-height:360px}
.rphoto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s ease}
.rphoto:hover img{transform:scale(1.04)}
.rphoto .cap{position:absolute;left:16px;bottom:16px;background:rgba(27,15,8,.82);color:#F3E9DB;font-size:12.5px;padding:8px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.rcol{display:flex;flex-direction:column;gap:18px}
.rng{position:relative;border-radius:20px;padding:28px 30px;overflow:hidden;box-shadow:var(--sh-sm);transition:.22s;cursor:pointer;flex:1}
.rng:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.rng.light{background:linear-gradient(160deg,#fff,#F6EEE1);border:1px solid var(--line)}
.rng.dark{background:linear-gradient(155deg,#291A0E,#3E2917);color:#F3E9DB}
.rng .tag{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;background:var(--ember);color:#fff;padding:5px 12px;border-radius:999px;font-family:'Bricolage Grotesque'}
.rng h3{font-size:22px;font-weight:800;margin-bottom:5px}
.rng .lead{font-size:13.5px;margin-bottom:13px}
.rng.light .lead{color:var(--ink-soft)}.rng.dark .lead{color:#CDBBA6}
.rng ul{list-style:none;display:flex;gap:14px;flex-wrap:wrap}
.rng li{display:flex;align-items:center;gap:7px;font-size:13px}
.rng li svg{width:16px;height:16px;stroke:var(--dispo);stroke-width:2.2;fill:none}
.rng.dark li svg{stroke:var(--gold)}
.rng .go{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:7px;margin-top:16px;transition:gap .2s}
.rng:hover .go{gap:12px}
.rng.light .go{color:var(--brand)}.rng.dark .go{color:var(--gold)}
@media(max-width:860px){.ranges{grid-template-columns:1fr}.rphoto{min-height:240px}}

/* ── PROCESS */
.process{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:30px 26px 26px;transition:.22s}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-sm)}
.step .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:15px;color:#fff;background:var(--brand);width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 8px 18px rgba(140,90,41,.35)}
.step h3{font-size:19px;font-weight:800;margin-bottom:8px}
.step p{font-size:14px;color:var(--ink-soft)}
.step::after{content:"";position:absolute;top:44px;right:-22px;width:22px;height:2px;background:var(--line)}
.step:last-child::after{display:none}
@media(max-width:820px){.steps{grid-template-columns:1fr}.step::after{display:none}}

/* ── STOCK ACCUEIL */
.stock{background:linear-gradient(180deg,var(--sand),var(--cream))}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.u{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);transition:box-shadow .25s;display:flex;flex-direction:column;transform-style:preserve-3d;will-change:transform}
.u:hover{box-shadow:var(--sh)}
.u-media{aspect-ratio:4/3;position:relative;overflow:hidden}
.u-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.u:hover .u-media img{transform:scale(1.06)}
/* Pastille couleur (unité sans photo) — fond sw, libellé swt */
.u-sw{position:absolute;inset:0;background:var(--sand);display:grid;place-items:center}
.u-sw span{font-size:12.5px;font-weight:600;color:#FDF9F3;background:rgba(27,15,8,.55);border-radius:999px;padding:6px 14px;backdrop-filter:blur(4px)}
.u-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.u-body h3{font-size:17px;font-weight:700;margin-bottom:3px}
.u-body .m{font-size:12.5px;color:var(--steel);margin-bottom:9px}
.u-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.u-foot .p{font-family:'Bricolage Grotesque';font-weight:800;font-size:20px}
.u-foot .p small{display:block;font-size:11px;color:var(--steel);font-family:'Inter';font-weight:500}
.u-foot a{font-size:13.5px;font-weight:600;color:var(--brand)}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.stockcta{text-align:center;margin-top:34px}

/* ── INTÉRIEUR + STATS */
.inside{background:var(--espresso);color:#F3EADF;overflow:hidden}
.inside .wrap{padding:84px 22px 70px}
.igrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:46px;align-items:center}
.igrid h2{color:#fff;font-size:clamp(26px,3.4vw,40px);font-weight:800;margin-bottom:14px}
.igrid>div>p{color:#C6B7A3;font-size:15.5px;margin-bottom:22px}
.ifeat{display:flex;flex-direction:column;gap:12px}
.ifeat div{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#E7DCCB}
.ifeat svg{width:18px;height:18px;stroke:var(--gold);stroke-width:2;fill:none;flex:none;margin-top:2px}
.iphotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;perspective:1000px}
.ip{border-radius:18px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.4);transform-style:preserve-3d;transition:transform .25s;will-change:transform}
.ip img{width:100%;height:100%;object-fit:cover;min-height:220px}
.ip:first-child{grid-row:span 2}
/* Modification imposée : 3 stats (2021 · 7 RAL · 24 h) — maquette : repeat(4,1fr) */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;border-top:1px solid rgba(240,230,217,.15);margin-top:60px;padding-top:44px}
.st-b{font-family:'Bricolage Grotesque';font-size:42px;font-weight:800;color:#fff;line-height:1}
.st-l{color:#C6B7A3;font-size:13.5px;margin-top:8px}
@media(max-width:860px){.igrid{grid-template-columns:1fr}.statrow{grid-template-columns:1fr 1fr;gap:30px}}

/* ── FAQ */
.faq{max-width:760px;margin:0 auto}
.qa{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:box-shadow .2s}
.qa[open]{box-shadow:var(--sh-sm)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;font-weight:600;font-size:15px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pl{width:26px;height:26px;border-radius:8px;background:var(--sand);display:grid;place-items:center;flex:none;transition:transform .25s,background .25s}
.qa[open] summary .pl{transform:rotate(45deg);background:var(--brand)}
.qa summary .pl svg{width:14px;height:14px;stroke:var(--brand);stroke-width:2.4;fill:none}
.qa[open] summary .pl svg{stroke:#fff}
.qa .a{padding:0 20px 18px;font-size:14px;color:var(--ink-soft)}

/* ── BANDEAU CTA FINAL */
.band{padding:78px 0}
.band .box{background:linear-gradient(130deg,var(--brand),var(--ember));border-radius:28px;box-shadow:var(--sh);padding:58px;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,.20),transparent 60%)}
.band h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;position:relative}
.band p{position:relative;margin:12px 0 28px;color:#FBEEDF;font-size:16px}
.band .btn-w{position:relative}

/* ── A2 — accueil édité en Gutenberg : équivalences de la maquette.
   Le H1 est du texte pur (éditable) : le trait doré redevient un ::after. */
.hero h1 em::after{content:"";position:absolute;left:0;bottom:-10px;width:100%;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C50 3, 150 3, 198 8' stroke='%23E0A560' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%}
.hero-card p{font-size:12.5px;color:var(--ink-soft)}
.qa>p{padding:0 20px 18px;font-size:14px;color:var(--ink-soft)}
.rng .go a::after{content:"";position:absolute;inset:0}

/* Hero infaillible : quelle que soit la photo déposée dans l'éditeur (styles inline
   width/height/aspect-ratio de Gutenberg), elle remplit la zone en recadrage cover. */
.hero-bg img{width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;object-fit:cover;object-position:center 62%;transform:scale(1.06)}