/* MyCBD. Polices hébergées sur le site (aucun appel à un service tiers) */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#000000; --bg2:#000000; --gold:#d8b26a; --cream:#f1ead9; --green:#c9ad72;
  --mute:rgba(241,234,217,.66); --line:rgba(241,234,217,.16);
  --pad:clamp(1.25rem,4.2vw,4.5rem);
  --d:'Instrument Serif',Georgia,'Times New Roman',serif;
  --b:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--cream);font-family:var(--b);-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;overflow-x:clip;font-size:1.0625rem;line-height:1.6;background:var(--bg);color:var(--cream)}
h1,h2,h3,p,ul,ol,figure,address{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--bg)}
section{position:relative}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--d);font-weight:500;letter-spacing:-.025em;line-height:1.04}
h2{font-size:clamp(1.9rem,4.6vw,4.4rem)}
.eyebrow{font-family:var(--b);font-size:.78rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.lede{color:var(--mute);max-width:46ch;margin-top:1.4rem;font-size:1.08rem}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.7rem;border-radius:999px;background:var(--gold);color:#1a1405;font-weight:600;font-size:.95rem;border:1px solid var(--gold);cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;will-change:transform}
.btn:hover{background:var(--cream);border-color:var(--cream)}
.btn-sm{padding:.7rem 1.2rem;font-size:.85rem}
.btn-lg{padding:1.3rem 2.4rem;font-size:1.05rem}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.btn-ghost:hover{background:var(--cream);color:var(--bg)}

/* roulement de texte au survol */
.roll{position:relative;display:inline-block;overflow:hidden;line-height:1.3;vertical-align:top}
.roll span{display:block;transition:transform .55s var(--ease)}
.roll::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--gold);transition:transform .55s var(--ease);white-space:nowrap}
.roll:hover span,.roll:hover::after,.roll:focus-visible span,.roll:focus-visible::after{transform:translateY(-100%)}

/* ---------- surimpressions : grain, vignettage, progression ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.5) 100%)}
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));transform:scaleX(0);transform-origin:0 50%}

/* ---------- ouverture (JS seulement) ---------- */
#loader{display:none}
.js #loader{display:grid;place-items:center;position:fixed;inset:0;z-index:200;background:var(--bg);cursor:pointer;animation:loaderSafe .01s linear 4.5s forwards}
@keyframes loaderSafe{to{visibility:hidden;opacity:0}}
.ld-box{position:relative;width:min(64vw,420px);aspect-ratio:477/250}
.ld-leaf,.ld-logo{position:absolute;inset:0;width:100%;height:100%}
.ld-logo{opacity:0}
.ld-skip{position:absolute;right:var(--pad);bottom:2rem;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}

/* ---------- curseur (bureau, JS) ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .js.has-cursor,.js.has-cursor a,.js.has-cursor button,.js.has-cursor label,.js.has-cursor summary{cursor:none}
  .js.has-cursor input,.js.has-cursor textarea,.js.has-cursor select{cursor:text}
  .js .cursor{display:block;position:fixed;left:0;top:0;z-index:150;pointer-events:none}
  .cursor-dot,.cursor-ring{position:absolute;left:0;top:0;border-radius:50%;opacity:0;transition:opacity .3s}
  .has-cursor .cursor-dot,.has-cursor .cursor-ring{opacity:1}
  .cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold)}
  .cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(241,234,217,.55);display:grid;place-items:center;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .3s,border-color .3s,opacity .3s}
  .cursor-ring em{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .25s}
  .cursor.is-link .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--gold)}
  .cursor.is-voir .cursor-ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--gold);border-color:var(--gold)}
  .cursor.is-voir .cursor-ring em{opacity:1}
  .cursor.is-voir .cursor-dot{opacity:0}
}

/* ---------- en-tête ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem var(--pad)}
.hdr::before{content:"";position:absolute;inset:0 0 -1.5rem 0;background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,0));z-index:-1;pointer-events:none}
.hdr::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.9);border-bottom:1px solid var(--line);opacity:0;transition:opacity .4s;z-index:-1;pointer-events:none}
.hdr.solid::after{opacity:1}
.hdr-logo img{height:44px;width:auto}
.nav{display:none;gap:clamp(1rem,2.2vw,2.4rem);font-size:.92rem;font-weight:500}
.hdr-r{display:flex;align-items:center;gap:1.1rem}
.lang{display:none;font-size:.82rem;letter-spacing:.14em;gap:.5rem;align-items:center;color:var(--mute)}
.lang a[aria-current]{color:var(--gold)}
.lang a:hover{color:var(--cream)}
.lang i{font-style:normal;opacity:.5}
.burger{display:grid;place-items:center;gap:6px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.5);cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:var(--cream);transition:transform .4s var(--ease)}
.burger span:nth-child(1){transform:translateY(3.5px)}
.burger span:nth-child(2){transform:translateY(-3.5px)}
.menu-open .burger span:nth-child(1){transform:translateY(0) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-1.5px) rotate(-45deg)}
@media (max-width:1099px){
  .nav{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:6rem var(--pad) 3rem;background:var(--bg);font-family:var(--d);font-size:clamp(1.6rem,7vw,2.4rem);font-weight:500;letter-spacing:-.02em;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
  .menu-open .nav{opacity:1;visibility:visible;transition:opacity .4s}
  .hdr .btn-sm{display:none}
  .lang{display:flex}
}
@media (min-width:1100px){
  .nav{display:flex}
  .lang{display:flex}
  .burger{display:none}
}

/* ---------- 6. conformité ---------- */
.conf{background:var(--bg);padding:8rem var(--pad) 7rem}
.conf-head{margin-bottom:4rem}
.conf-head h2{max-width:16ch}
.pledges{display:grid;gap:2.5rem}
.pledge{position:relative;padding-top:2.2rem}
.pledge::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--ln,1))}
.pledge svg{width:96px;height:96px;margin-bottom:1.6rem;overflow:visible}
.p-ring,.p-mark{fill:none}
.pledge h3{font-size:clamp(1.25rem,1.8vw,1.6rem);margin-bottom:.8rem;letter-spacing:-.02em}
.pledge p{color:var(--mute);max-width:36ch}
@media (min-width:900px){.pledges{grid-template-columns:repeat(3,1fr);gap:3.5rem}}

/* ---------- 7. export ---------- */
.exp{background:var(--bg2);padding:8rem var(--pad) 7rem}
.exp-head{margin-bottom:3.5rem}
.exp-grid{display:grid;gap:3rem}
.exp-grid h3{font-family:var(--b);font-size:.8rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.big-list li{font-family:var(--d);font-weight:500;font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.2;letter-spacing:-.03em;border-bottom:1px solid var(--line);padding:.5rem 0}
.mini-steps{counter-reset:s;display:grid;gap:1rem;color:var(--mute)}
.mini-steps li{counter-increment:s;padding-left:2.6rem;position:relative}
.mini-steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:.8rem}
.exp-grid p{color:var(--mute)}
.tbc{margin-top:1.2rem;font-size:.85rem;color:var(--gold)!important;letter-spacing:.04em}
@media (min-width:900px){.exp-grid{grid-template-columns:1fr 1fr 1fr;gap:4rem}}

/* ---------- 8. devis ---------- */
.devis{background:var(--bg);padding:8rem var(--pad) 7rem;display:grid;gap:3.5rem}
.devis-copy h2{margin-bottom:1.6rem}
.devis-copy>p:not(.eyebrow){color:var(--mute);max-width:42ch}
.contact-list{margin-top:2rem;display:grid;gap:.5rem;font-size:1.15rem}
.contact-list a{color:var(--cream)}
.form{display:grid;gap:1.7rem}
.row{display:grid;gap:1.7rem}
.field{position:relative}
.field input,.field select,.field textarea{width:100%;padding:1.5rem 0 .6rem;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--cream);outline:none;font-size:1.05rem;resize:vertical;appearance:none;-webkit-appearance:none}
.field select{cursor:pointer;color:var(--cream)}
.field select option{background:var(--bg2);color:var(--cream)}
.field label{position:absolute;left:0;top:1.35rem;color:var(--mute);pointer-events:none;transform-origin:0 0;transition:transform .45s var(--ease),color .3s}
.field i{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--green),var(--gold));transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.field input:focus~label,.field input:not(:placeholder-shown)~label,
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label,
.field select~label{transform:translateY(-1.15rem) scale(.78);color:var(--gold)}
.field input:focus~i,.field select:focus~i,.field textarea:focus~i{transform:scaleX(1)}
.field-sel::after{content:"";position:absolute;right:.3rem;top:1.9rem;width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);pointer-events:none}
.field input:user-invalid{border-bottom-color:#e0805f}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:.8rem}
.form-note{font-size:.88rem;color:var(--mute);max-width:32ch}
@media (min-width:900px){
  .devis{grid-template-columns:.8fr 1.2fr;gap:6rem;align-items:start}
  .row{grid-template-columns:1fr 1fr}
}

/* ---------- 9. FAQ ---------- */
.faq{background:var(--bg2);padding:8rem var(--pad) 7rem}
.faq header{margin-bottom:3rem}
.faq-list{max-width:980px;border-top:1px solid var(--line)}
@media (min-width:1000px){.faq{display:grid;grid-template-columns:.8fr 1.4fr;gap:5rem;align-items:start}.faq header{margin:0;position:sticky;top:8rem}.faq-list{max-width:none}}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.7rem 0;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--d);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.02em;line-height:1.25;color:var(--cream)}
.faq-q i{position:relative;flex:0 0 2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:50%;transition:background .4s,border-color .4s,transform .5s var(--ease)}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;width:.9rem;height:1.5px;background:var(--gold);transform:translate(-50%,-50%)}
.faq-q i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.faq-q:hover i{border-color:var(--gold)}
.faq-p{padding-bottom:1.8rem}
.faq-p p{color:var(--mute);max-width:70ch}
.faq-on .faq-p{display:grid;grid-template-rows:0fr;padding:0;visibility:hidden;transition:grid-template-rows .6s var(--ease),visibility 0s .6s}
.faq-on .faq-p>div{overflow:hidden;min-height:0}
.faq-on .faq-p p{padding-bottom:1.8rem}
.faq-on .faq-item.open .faq-p{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease),visibility 0s}
.faq-on .faq-item.open .faq-q i{background:var(--gold);transform:rotate(180deg)}
.faq-on .faq-item.open .faq-q i::before{background:var(--bg)}
.faq-on .faq-item.open .faq-q i::after{transform:translate(-50%,-50%) rotate(0);background:var(--bg)}

/* ---------- 10. pied de page ---------- */
.foot{position:relative;background:var(--bg);padding:6rem var(--pad) 0;overflow:hidden}
.foot-top{display:grid;gap:2.4rem;font-size:.98rem;color:var(--mute)}
.foot address{font-style:normal;display:grid;gap:.3rem}
.foot address strong{color:var(--cream);font-weight:600}
.foot a:hover{color:var(--gold)}
.foot-nav{display:grid;gap:.4rem}
.foot-legal{font-size:.88rem}
.foot-logo-wrap{display:flex;justify-content:center;padding:6rem 0 0}
.foot-logo{width:min(92%,760px);height:auto}
@media (min-width:900px){.foot-top{grid-template-columns:1.2fr 1fr 1fr;gap:4rem}}

/* ---------- mobile : retouches ---------- */
@media (max-width:899px){
  .terroir,.conf,.exp,.devis,.faq{padding-top:5.5rem;padding-bottom:5rem}
  .hdr-logo img{height:38px}
}

/* ---------- mouvement réduit : tout est affiché proprement ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .scroll-hint span{animation:none}
  *{scroll-behavior:auto!important}
  #loader{display:none!important}
}

/* =====================================================================
   SITE COMPLET : briques communes et pages intérieures
   ===================================================================== */
picture{display:contents}
.skip{position:absolute;left:1rem;top:-5rem;z-index:300;background:var(--gold);color:#1a1405;padding:.7rem 1.1rem;border-radius:999px;font-weight:600;transition:top .2s}
.skip:focus{top:1rem}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.px{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mute-s{color:var(--mute);font-size:.92rem;max-width:56ch}
.more{display:inline-block;margin-top:1.6rem;font-weight:600;font-size:.95rem;border-bottom:1px solid var(--gold);padding-bottom:.1rem;color:var(--cream)}
.tbc{color:var(--gold);font-weight:500}

/* navigation : page courante, bouton du menu mobile, bascule de langue toujours visible */
.nav a[aria-current="page"]{color:var(--gold)}
.btn-nav{display:none}
@media (max-width:1099px){
  .nav .btn-nav{display:inline-flex;align-self:flex-start;margin-top:1rem;font-family:var(--b);font-size:1rem;letter-spacing:0}
}
@media (min-width:1100px){.nav-home{display:none}}
.lang a{padding:.35rem .2rem}

/* ouverture déjà vue pendant la session : on ne la rejoue pas */
.js.seen #loader{display:none}

/* transition entre pages : un volet qui se lève à l'arrivée et descend au départ (CSS seul à l'arrivée, il ne peut pas rester bloqué) */
.wipe{display:none}
.js .wipe{display:block;position:fixed;inset:0;z-index:190;background:var(--bg2);transform:translateY(-100%);pointer-events:none}
.js body:not([data-page="home"]) .wipe,.js.seen body[data-page="home"] .wipe{animation:wipeIn .75s var(--ease) both}
@keyframes wipeIn{from{transform:translateY(0)}to{transform:translateY(-100%)}}
.js.leaving .wipe{animation:none;transform:translateY(0);transition:transform .45s var(--ease)}
.js.leaving .wipe{transform-origin:50% 0}

/* ---------- tête des pages intérieures ---------- */
.pg-head{position:relative;padding:9.5rem var(--pad) 3.5rem;background:var(--bg);overflow:hidden;isolation:isolate}
.pg-head::before{content:"";position:absolute;right:-12%;top:-35%;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(circle,rgba(216,178,106,.15),transparent 62%);z-index:-1;pointer-events:none}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.82rem;color:var(--mute);margin-bottom:2rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--cream)}
.pg-eb{margin-bottom:1.2rem}
.pg-title{font-size:clamp(1.8rem,5.4vw,4.9rem);font-weight:600;line-height:1.05;letter-spacing:-.035em;max-width:20ch;overflow-wrap:break-word}
.pg-sub{margin-top:1.6rem}
.pg-head .lede{max-width:56ch}
.tw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.tw-i{display:inline-block;will-change:transform}

/* ---------- sections ---------- */
.sec{position:relative;padding:6.5rem var(--pad);background:var(--bg)}
.sec-alt{background:var(--bg2)}
.sec h2{font-size:clamp(1.7rem,3.6vw,3.2rem);max-width:16ch}
.sec header h2{margin-bottom:0}
.split{display:grid;gap:2rem}
.split-copy>p{color:var(--mute);max-width:62ch;font-size:1.08rem}
.split-copy>p+p{margin-top:1.2rem}
.split-copy .more{margin-top:.6rem}
@media (min-width:900px){.split{grid-template-columns:.8fr 1.4fr;gap:5rem;align-items:start}}
.inline-fig{margin-top:2rem;border-radius:20px;overflow:hidden;aspect-ratio:3/2}
.inline-fig img,.duo img{width:100%;height:100%;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.duo figure{border-radius:18px;overflow:hidden;aspect-ratio:3/4}
.cta-band{display:grid;gap:2rem;align-items:center;padding:6rem var(--pad);background:linear-gradient(135deg,var(--bg2),#000000);border-top:1px solid var(--line);overflow:hidden}
.cta-band h2{font-size:clamp(1.7rem,3.6vw,3.2rem);max-width:18ch}
.cta-band p:not(.eyebrow){color:var(--mute);max-width:46ch;margin-top:1.2rem}
@media (min-width:900px){.cta-band{grid-template-columns:1fr auto;gap:4rem}}

/* ---------- produits : bandeau de mots + lignes ---------- */
.plist-sec{padding-top:4rem;padding-bottom:4rem}
.plist{border-top:1px solid var(--line)}
.prow-a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"main go" "tag go";gap:.8rem 1.5rem;align-items:center;padding:2rem 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background .4s}
.prow-n{display:none;font-family:var(--d);font-size:.85rem;color:var(--gold);letter-spacing:.1em}
.prow-main{grid-area:main}
.prow-name{display:block;font-family:var(--d);font-weight:500;font-size:clamp(1.6rem,3.8vw,3.4rem);letter-spacing:-.03em;line-height:1.1;transition:color .4s,transform .5s var(--ease)}
.prow-lede{display:block;color:var(--mute);margin-top:.6rem;max-width:58ch}
.prow-tag{grid-area:tag;justify-self:start;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(216,178,106,.4);padding:.35rem .8rem;border-radius:999px}
.prow-go{grid-area:go;font-size:1.6rem;color:var(--gold);transition:transform .5s var(--ease)}
.prow-a:hover .prow-name,.prow-a:focus-visible .prow-name{color:var(--gold);transform:translateX(.6rem)}
.prow-a:hover .prow-go,.prow-a:focus-visible .prow-go{transform:translateX(.5rem)}
@media (min-width:900px){
  .prow-a{grid-template-columns:3rem 1fr auto 3rem;grid-template-areas:"n main tag go";gap:1.5rem 2rem;padding:2.4rem 0}
  .prow-n{display:block;grid-area:n}
}
.docs{display:grid;gap:2.4rem;margin-top:3rem}
.docs article{border-top:1px solid var(--gold);padding-top:1.8rem}
.docs svg{width:76px;height:76px;margin-bottom:1.2rem}
.docs h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin-bottom:.6rem;letter-spacing:-.02em}
.docs p{color:var(--mute);max-width:34ch}
@media (min-width:900px){.docs{grid-template-columns:repeat(3,1fr);gap:3.5rem}.docs-2{grid-template-columns:repeat(2,1fr);max-width:900px}}

/* ---------- fiche produit ---------- */
.fiche-hero{position:relative;isolation:isolate;display:grid;gap:2.5rem;padding:9rem var(--pad) 4rem;background:var(--bg);overflow:hidden}
.fiche-hero::before{content:"";position:absolute;left:-15%;top:-20%;width:60vw;height:60vw;max-width:800px;max-height:800px;border-radius:50%;background:radial-gradient(circle,rgba(216,178,106,.13),transparent 62%);z-index:-1;pointer-events:none}
@media (min-width:900px){.fiche-hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem;min-height:92vh}}
.fiche-hero .pg-title{font-size:clamp(1.8rem,4.4vw,4rem);max-width:16ch}
.fiche-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.6rem;margin-top:2.2rem}
.fiche-sheet{color:var(--green);font-size:.88rem;letter-spacing:.06em}
.pv{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:var(--bg2)}
.pv-photo img{width:100%;height:100%;object-fit:cover}
.pv-type{display:grid;place-items:center;border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,rgba(216,178,106,.2),transparent 70%),linear-gradient(160deg,rgba(241,234,217,.06),rgba(241,234,217,.015))}
.pv-ghost{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--d);font-weight:700;font-size:clamp(3.2rem,8vw,7.5rem);letter-spacing:-.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(241,234,217,.14);white-space:nowrap;pointer-events:none}
.pv-sym{position:relative;width:min(56%,300px);height:auto;overflow:visible}
.usage-list{display:grid}
.usage-list li{border-top:1px solid var(--line);padding:1.5rem 0;display:grid;gap:.4rem}
.usage-list li:last-child{border-bottom:1px solid var(--line)}
.usage-list h3{font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.02em;color:var(--gold)}
.usage-list p{color:var(--mute);max-width:52ch}
.spec-table{margin:0;border-bottom:1px solid var(--line)}
.spec-table>div{display:grid;gap:.3rem 2rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.spec-table dt{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.spec-table dd{margin:0}
@media (min-width:700px){.spec-table>div{grid-template-columns:1fr 2fr}}
.note-reg{margin-top:1.6rem;color:var(--mute);font-size:.95rem;max-width:60ch}
.rel-list{display:grid;border-top:1px solid var(--line);margin-top:2.4rem}
.rel-a{display:flex;align-items:center;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line);font-family:var(--d);font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:-.02em;transition:color .4s,padding .5s var(--ease)}
.rel-a>span:first-child{flex:1}
.rel-tag{color:var(--gold);font-family:var(--b);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.rel-a:hover,.rel-a:focus-visible{color:var(--gold);padding-left:.8rem}

/* ---------- export ---------- */
.sweep-list{border-top:1px solid var(--line)}
.sweep{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.sweep::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--green),var(--gold));transform:scaleX(var(--sw,0));transform-origin:0 50%}
.sw-t{font-family:var(--d);font-weight:500;font-size:clamp(1.7rem,4vw,3.4rem);letter-spacing:-.03em;line-height:1.1}
.sw-d{color:var(--mute)}
.big-steps{display:grid;gap:0;border-bottom:1px solid var(--line)}
.big-steps li{font-size:1.15rem;padding:1.4rem 0 1.4rem 3.4rem;border-top:1px solid var(--line);color:var(--cream)}
.big-steps li::before{top:1.3rem}

/* ---------- devis ---------- */
.devis-page{padding-top:2rem;padding-bottom:6rem}
.h-sm{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:1.4rem}
.check-list{display:grid;gap:.6rem;margin-bottom:1.6rem}
.check-list li{position:relative;padding-left:1.7rem;color:var(--mute)}
.check-list li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold)}
.devis-page .contact-list{margin-bottom:1.8rem}
.form-legal{font-size:.82rem;color:var(--mute);max-width:60ch}
.form-legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.form-note.err{color:#ffb199}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#e0805f}
.form-ok{padding:2.2rem;border:1px solid var(--gold);border-radius:22px;background:linear-gradient(160deg,rgba(216,178,106,.1),rgba(216,178,106,.02))}
.form-ok h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:.8rem}
.form-ok p{color:var(--mute)}
.form-ok:focus{outline:none}

/* ---------- FAQ (page) ---------- */
.faq-page{display:block;padding-top:2rem;padding-bottom:6rem}
.faq-page .faq-list{max-width:980px}
@media (min-width:1000px){.faq-page{display:block}}

/* ---------- journal ---------- */
.journal-note{margin-bottom:2.4rem}
.jlist{display:grid;gap:3rem}
@media (min-width:900px){.jlist{grid-template-columns:1fr 1fr;gap:3.5rem 3rem}}
.jcard-a{display:grid;gap:1.3rem}
.jcard-fig{overflow:hidden;border-radius:20px;aspect-ratio:3/2;background:var(--bg2)}
.jcard-fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.jcard-a:hover .jcard-fig img,.jcard-a:focus-visible .jcard-fig img{transform:scale(1.05)}
.jcard-t time{display:block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.jcard-t h2{font-size:clamp(1.3rem,2.2vw,1.9rem);max-width:22ch;margin-bottom:.8rem;line-height:1.12}
.jcard-t p{color:var(--mute);max-width:46ch}
.jcard-go{display:inline-block;margin-top:1rem;color:var(--gold);font-weight:600;font-size:.95rem}
.jteaser{background:var(--bg);padding:7rem var(--pad)}
.jteaser h2{font-size:clamp(1.8rem,4vw,3.4rem);max-width:16ch}
.jt-list{margin-top:2.4rem;border-top:1px solid var(--line)}
.jt-link{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line);font-family:var(--d);font-size:clamp(1.05rem,2vw,1.7rem);letter-spacing:-.02em;transition:color .4s,padding .5s var(--ease)}
.jt-link:hover,.jt-link:focus-visible{color:var(--gold);padding-left:.8rem}
.jt-go{color:var(--gold)}
.jt-en{color:var(--mute);margin-top:1.6rem;max-width:56ch}

/* article */
.art-head{padding-bottom:2.4rem}
.art-hero{margin:0 var(--pad);border-radius:26px;overflow:hidden;aspect-ratio:16/8;background:var(--bg2)}
.art-hero img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.art-hero{aspect-ratio:4/3}}
.prose{max-width:74ch;margin:0 auto;padding:4rem var(--pad) 5rem}
.sec.legal .prose{margin:0;max-width:78ch;padding:0}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:-.025em;max-width:none;margin:2.6rem 0 1rem}
.prose p{color:rgba(241,234,217,.88);margin:0 0 1.15rem}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.art-meta{color:var(--mute)!important;font-size:.88rem;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2.6rem!important}
.art-links .more{margin:.4rem 1.6rem 0 0;text-decoration:none}
.sec.legal{padding-top:2rem}

/* remerciement, 404, page d'erreur du formulaire */
.merci{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:10rem var(--pad) 5rem}
.merci .pg-title{max-width:18ch}
.merci-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.err-list{margin-top:1.4rem;display:grid;gap:.4rem;color:var(--mute)}
.plain .merci{min-height:100vh}

/* accueil : liens de section */
.faq header .more{margin-top:1.4rem}
.card-links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.4rem}
.card-links .card-link{margin-top:0}
.faq-page .faq-q{font-size:clamp(1.05rem,1.7vw,1.5rem)}

@media (max-width:899px){
  .sec{padding-top:4.5rem;padding-bottom:4.5rem}
  .pg-head{padding-top:8rem}
  .fiche-hero{padding-top:7.5rem}
  .cta-band{padding-top:4.5rem;padding-bottom:4.5rem}
  .jteaser{padding-top:5rem;padding-bottom:4rem}
  .merci{padding-top:8rem}
}
@media (prefers-reduced-motion:reduce){
  .js .wipe{display:none}
  .jcard-fig img,.prow-name,.prow-go,.rel-a,.jt-link{transition:none}
}

/* =====================================================================
   27/10 : le décor fixe (style KIFKONG), photos entières, textes lisibles
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main,.foot{position:relative;z-index:2}

/* ---------- 10/11/2026 : guide de la loi 13-21, pages export en anglais, fiches enrichies ---------- */
.def{color:var(--cream);font-size:clamp(1.06rem,1.45vw,1.24rem);line-height:1.6;max-width:62ch}
.split-copy>p.def{color:var(--cream);font-size:clamp(1.06rem,1.45vw,1.24rem)}
.def-note{color:var(--mute);font-size:.92rem;margin-top:1rem}
.proc-list{counter-reset:pl}
.proc-list li{counter-increment:pl;position:relative;padding-left:3.2rem}
.proc-list li::before{content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:1.62rem;font-family:var(--d);font-size:.9rem;color:var(--gold)}
@media (min-width:900px){.docs-4{grid-template-columns:repeat(2,1fr);max-width:1000px}}
@media (min-width:1280px){.docs-4{grid-template-columns:repeat(4,1fr);max-width:none;gap:2.6rem}}
.usage-list h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.usage-list h3 a:hover{color:var(--cream)}
.faq-more{margin-top:2.2rem}
.guide-grid{display:grid;gap:2.5rem}
@media (min-width:1000px){.guide-grid{grid-template-columns:15rem minmax(0,1fr);gap:4.5rem;align-items:start}.toc{position:sticky;top:7rem}}
.toc ol{list-style:none;display:grid;gap:.6rem;font-size:.9rem;border-left:1px solid var(--line);padding-left:1rem;margin:0}
.toc a{color:var(--mute);text-decoration:none}
.toc a:hover,.toc a:focus-visible{color:var(--gold)}
.answer{border:1px solid rgba(216,178,106,.45);border-radius:18px;padding:1.4rem 1.6rem;background:rgba(216,178,106,.06);margin:0 0 1rem}
.answer .eyebrow{margin-bottom:.8rem}
.prose .answer p:last-child{margin:0;color:var(--cream)}
.g-sec{scroll-margin-top:6rem}
.prose p.def{color:var(--cream);font-size:1.1rem}
q.loi{font-style:italic;color:var(--cream);quotes:"\201C" "\201D" "\2018" "\2019"}
q.loi:lang(fr){quotes:"\00AB\00A0" "\00A0\00BB" "\201C" "\201D"}
.loi-ref{color:var(--gold);font-size:.86em;white-space:nowrap}
.loi-fr{display:block;margin-top:.7rem;font-size:.9rem;color:var(--mute)}
.loi-fr q.loi{color:var(--mute)}
.src-box{border-top:1px solid var(--gold);margin-top:3rem;padding-top:1.6rem}
.src-box .eyebrow{margin-bottom:.8rem}
.prose .g-list{list-style:disc;padding-left:1.2rem;display:grid;gap:.6rem;color:rgba(241,234,217,.88);margin:0 0 1.15rem}
.prose .mini-steps{margin:0 0 1.3rem}
.prose .big-steps li{font-size:1.02rem}
.prose .faq-list{margin-top:1rem}
.prose strong{color:var(--cream)}

/* =====================================================================
   10/11/2026, R279 (« trop de photos !!! », puis « ok vas-y on mélange alors !!! »)
   Le STYLE sombre (une photo en tête, fonds unis, filets fins, cartes, serif avec un mot en italique coloré, beaucoup
   d'air, bandeau de faits) et la STRUCTURE B2B (barre de faits en haut, menu Produits / Traçabilité / Export / Journal /
   Contact, « Demander un devis » et « Catalogue et specs », titre qui dit à qui on vend).
   UNE SEULE GRANDE PHOTO PAR PAGE, EN TÊTE ; les photos de produits en petit, dans des cartes. Contrôle : verif_photos.py
   ===================================================================== */
:root{--mute:rgba(241,234,217,.8);--card:rgba(241,234,217,.035);--line:rgba(241,234,217,.14);--line2:rgba(241,234,217,.22)}
html{font-synthesis:none}
.grain{opacity:.045}
/* le vignettage de cinéma assombrissait les bords de l'écran, jusqu'à faire tomber un bouton doré sous 4,5:1 (3,64
   mesuré en bas d'écran le 10/11) ; sur des fonds unis il n'apporte plus rien */
.vignette{display:none}

/* ---------- typographie : serif fin, un mot en italique doré ---------- */
h1,h2,h3,.faq-q,.big-list li,.sw-t,.prow-name,.rel-a,.jt-link,.pv-ghost,.facts strong,.step-n,.prow-n{font-weight:400}
h1,h2,h3{letter-spacing:-.012em;line-height:1.04}
h1 em,h2 em,h3 em,.pg-title em{font-style:italic;color:var(--gold);letter-spacing:-.005em}
h2{font-size:clamp(2.3rem,4.4vw,4.1rem)}
.eyebrow{font-size:.76rem;letter-spacing:.24em}

/* ---------- barre de faits du haut + en-tête ---------- */
.hdr{display:block;padding:0}
.hdr-main{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.75rem var(--pad)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:2.3rem;padding:0 var(--pad);background:#000000;border-bottom:1px solid var(--line);
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,234,217,.9);white-space:nowrap;overflow:hidden;transition:margin-top .45s var(--ease)}
.topbar i{font-style:normal;color:var(--gold);margin:0 .7em}
.topbar a:hover{color:var(--gold)}
.tb-contact{text-transform:none;letter-spacing:.06em;font-size:.78rem}
.tb-short{display:none}
.hdr.up .topbar{margin-top:-2.3rem}
@media (max-width:899px){
  .tb-long,.tb-contact{display:none}
  .tb-short{display:inline}
  .topbar{justify-content:center;font-size:.68rem;letter-spacing:.12em}
  .nav{font-weight:400}
}
.hdr-logo img{height:42px}
/* accueil : l'en-tête est transparent au-dessus de la photo ; la bascule FR | EN y passait sous 4,5:1 (3,17 mesuré le
   10/11 par verif_contraste.py). Elle porte une pastille sombre, comme le surtitre du haut. */
.hdr:not(.solid) .lang{background:rgba(0,0,0,.72);padding:.15rem .75rem;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lang a{color:rgba(241,234,217,.92)}
.lang a[aria-current]{color:#e2c48a}

/* ---------- 1. haut de l'accueil : la seule grande photo ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--bg)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg2)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 34%}
.hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 24%,rgba(0,0,0,.35) 42%,rgba(0,0,0,0) 56%),
             linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 26%),linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0) 20%)}
.hero-in{position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:2.4rem;padding:10rem var(--pad) 5.5rem}
.hero-top,.hero-foot{max-width:36rem}
.hero .eyebrow{display:inline-block;margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.3rem,4.1vw,4.2rem);line-height:1;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.ln{display:block}
.ln-sub{font-size:.56em;line-height:1.18;margin-top:.55em;color:rgba(241,234,217,.94)}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.hero-foot p{max-width:38ch;color:rgba(241,234,217,.92);font-size:1.02rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero-cta .btn{background:#e2be78;border-color:#e2be78}
.hero-cta .btn-ghost{background:rgba(0,0,0,.62);border-color:rgba(241,234,217,.55);color:var(--cream);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-cta .btn:hover,.hero-cta .btn-ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--bg)}
.scroll-hint{position:absolute;z-index:3;left:50%;bottom:1rem;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(241,234,217,.86)}
.scroll-hint span{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:hint 1.8s ease-in-out infinite;transform-origin:50% 0}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (min-width:900px){.scroll-hint{display:flex}}
@media (max-width:899px){
  .hero-media img{object-position:50% 50%}
  .hero-shade{background:linear-gradient(to bottom,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,0) 46%,rgba(0,0,0,0) 60%,rgba(0,0,0,.9) 84%,rgba(0,0,0,.94) 100%)}
  .hero-in{justify-content:space-between;gap:1.5rem;padding:7.4rem var(--pad) 1.5rem}
  .hero .eyebrow{margin-bottom:1rem;font-size:.68rem}
  .hero h1{font-size:clamp(1.95rem,8.6vw,2.6rem)}
  .hero-foot p{font-size:.9rem}
  .hero-cta{flex-wrap:nowrap;gap:.6rem;margin-top:1rem}
  .hero-cta .btn{padding:.8rem 1.05rem;font-size:.84rem}
}

/* ---------- sections de l'accueil : fonds unis, beaucoup d'air ---------- */
.manif,.prod,.proc,.terroir,.jteaser{padding:8rem var(--pad) 7rem}
.manif{background:var(--bg)}
.prod{background:var(--bg2)}
.proc{background:var(--bg)}
.conf{background:var(--bg2)}
.terroir{background:var(--bg)}
.exp{background:var(--bg2)}
.jteaser{background:var(--bg)}
.devis{background:var(--bg2)}
.faq{background:var(--bg)}
@media (max-width:899px){.manif,.prod,.proc,.terroir,.jteaser,.conf,.exp,.devis,.faq{padding-top:5rem;padding-bottom:4.5rem}}

/* tête de section : surtitre et titre à gauche, texte court à droite, filet dessous */
.shead{display:grid;gap:1.4rem 4rem;margin-bottom:3.4rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.shead h2{max-width:17ch}
.shead-side p{color:var(--mute);max-width:44ch}
.shead-side .more{margin-top:1.1rem}
@media (min-width:900px){.shead{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end}}
.shead-manif h2{font-size:clamp(2.2rem,4vw,3.8rem);max-width:22ch}
.conf-head,.exp-head{margin-bottom:0}

/* bandeau de faits */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.facts li{display:grid;gap:.5rem;align-content:start;padding:1.8rem 1.8rem 2rem;background:var(--bg)}
.facts strong{font-family:var(--d);font-size:clamp(1.8rem,2.5vw,2.5rem);line-height:1.05;color:var(--gold);font-style:italic}
.facts span{color:var(--mute);font-size:.96rem;max-width:30ch}
@media (min-width:640px){.facts{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.facts{grid-template-columns:repeat(4,1fr)}}

/* cartes produits : la photo de produit en petit */
.cards{display:grid;gap:1.1rem}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:linear-gradient(170deg,rgba(241,234,217,.05),rgba(241,234,217,.012));overflow:hidden;transition:border-color .4s,transform .6s var(--ease)}
.card:hover{border-color:rgba(216,178,106,.55);transform:translateY(-4px)}
.card-vis{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 45%,rgba(216,178,106,.13),transparent 70%)}
.card-vis svg{width:44%;height:auto}
.card-vis-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card-vis-photo img{transform:scale(1.04)}
.card-body{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.4rem 1.6rem}
.tag{align-self:flex-start;display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(216,178,106,.45);padding:.32rem .75rem;border-radius:999px;margin-bottom:1rem}
.card h3{font-size:clamp(1.6rem,2vw,1.95rem);margin-bottom:.6rem}
.card-body p{color:var(--mute);font-size:.96rem}
.card .spec{margin-top:auto;padding-top:1rem;font-size:.8rem;letter-spacing:.05em;color:var(--gold)}
.card-link{font-weight:600;font-size:.92rem;border-bottom:1px solid var(--gold);padding-bottom:.1rem;color:var(--cream)}
.card-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1rem}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1300px){.cards{grid-template-columns:repeat(5,1fr)}}
@media (max-width:639px){
  /* mobile : la vignette est un petit carré en haut à gauche de la carte, jamais une bande étirée sur toute sa hauteur */
  .card{flex-direction:row;align-items:flex-start;gap:1rem;padding:1.1rem}
  .card-vis{flex:0 0 92px;width:92px;height:92px;aspect-ratio:1;border:1px solid var(--line);border-radius:14px}
  .card-vis svg{width:64%}
  .card-body{padding:0}
  .card h3{font-size:1.5rem}
}

/* de la graine au lot : six cartes numérotées, sans photo */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.step{display:grid;gap:.7rem;align-content:start;padding:2rem 1.8rem 2.3rem;background:var(--bg2)}
.step-n{display:block;font-family:var(--d);font-style:italic;font-size:3rem;line-height:1;color:var(--gold);margin-bottom:.6rem}
.step h3,.step h2{font-size:clamp(1.7rem,2.2vw,2.1rem);max-width:none;margin:0}
.step p{color:var(--mute);max-width:40ch}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
.proc-page{background:var(--bg);padding:2rem var(--pad) 6rem}

/* conformité : trois cartes */
.pledges{gap:1.1rem}
.pledge{padding:2rem 1.8rem 2.2rem;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden}
.pledge svg{width:72px;height:72px;margin-bottom:1.3rem}
.pledge h3{font-size:clamp(1.5rem,2vw,1.9rem)}
@media (min-width:900px){.pledges{gap:1.1rem}}

/* terroir et export */
.terroir-cols{display:grid;gap:1.2rem;max-width:1100px;color:var(--mute);font-size:1.08rem}
@media (min-width:900px){.terroir-cols{grid-template-columns:1fr 1fr;gap:3rem}}
.exp-grid article{padding-top:1.6rem;border-top:1px solid var(--line)}
.exp-grid .more{margin-right:1.4rem}
.big-list li{font-size:clamp(1.8rem,2.8vw,2.7rem)}
.jt-link{font-size:clamp(1.25rem,2vw,1.85rem)}
.faq-q{font-size:clamp(1.2rem,1.8vw,1.65rem);letter-spacing:-.005em}
.devis-copy h2{font-size:clamp(2.4rem,4.4vw,4.1rem)}

/* ---------- pages intérieures : la tête, avec ou sans sa photo ---------- */
.pg-head{padding:11rem var(--pad) 4rem}
.pg-title{font-size:clamp(2.4rem,5vw,4.8rem);font-weight:400;line-height:1.02;letter-spacing:-.012em;max-width:19ch}
.pg-head-photo{display:grid;gap:2.2rem;align-items:center}
.pg-head-photo .pg-title{max-width:16ch}
/* le cadre épouse la photo (paysage ou portrait), sans bandes vides de part et d'autre */
.pg-photo{position:relative;justify-self:center;width:fit-content;max-width:100%;border-radius:22px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.pg-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:74vh}
@media (min-width:900px){
  .pg-head-photo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4.5rem;min-height:min(88vh,860px);padding-bottom:5rem}
}
@media (max-width:899px){.pg-head{padding-top:8.6rem}.pg-head-photo{padding-bottom:3rem}}
.art-head{padding-bottom:4rem}
.cta-band h2{font-size:clamp(2.1rem,4vw,3.6rem)}
.sec h2{font-size:clamp(2rem,3.6vw,3.3rem)}
.split-copy>p{font-size:1.06rem}

/* fiche produit : la photo du produit montrée en entier, à côté du titre */
.fiche-hero{padding-top:11rem}
.fiche-hero .pg-title{font-size:clamp(2.4rem,4.6vw,4.4rem)}
.pv-photo{aspect-ratio:auto;border:1px solid var(--line)}
.pv-photo img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain;margin:0 auto}
.pv-ghost{font-family:var(--d);font-style:italic;text-transform:none;letter-spacing:-.01em}
@media (max-width:899px){.fiche-hero{padding-top:8.6rem}}

/* produits : catalogue et specs */
.spec-cards{display:grid;gap:1.1rem}
@media (min-width:900px){.spec-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1300px){.spec-cards{grid-template-columns:repeat(3,1fr)}}
.spec-card{display:flex;flex-direction:column;padding:1.6rem 1.6rem 1.8rem;border:1px solid var(--line);border-radius:20px;background:var(--bg)}
.sc-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.3rem}
.sc-head .card-vis{flex:0 0 88px;width:88px;aspect-ratio:1;border:1px solid var(--line);border-radius:14px}
.sc-head .tag{margin-bottom:.5rem}
.sc-head h3{font-size:clamp(1.55rem,2vw,1.9rem)}
.sc-head h3 a:hover{color:var(--gold)}
.spec-card .spec-table>div{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:.2rem 1.2rem;padding:.8rem 0}
.spec-card .spec-table dt{font-size:.7rem;letter-spacing:.16em}
.spec-card .spec-table dd{font-size:.95rem}
.spec-card .card-links{margin-top:auto;padding-top:1.3rem}
.plist-sec{padding-top:2rem}

/* journal : vignettes en petit */
.jcard-a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1rem;align-items:start}
.jcard-fig{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.jcard-fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.jcard-t h2{font-size:clamp(1.35rem,2.2vw,1.9rem)}
@media (min-width:600px){.jcard-a{grid-template-columns:34% minmax(0,1fr);gap:1.6rem}.jcard-fig{aspect-ratio:4/3;border-radius:16px}}

/* ouverture : le logo reste plus petit que le titre du haut (mesuré le 10/11 : à 420 px il devenait le plus grand
   élément peint, et le LCP mobile passait de 1,6 s à 3,0 s) */
.ld-box{width:min(50vw,300px)}

/* en-tête fixe : fond quasi opaque et flouté, le texte qui défile dessous ne se lit plus au travers */
.hdr::after{background:rgba(0,0,0,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (max-width:639px){.facts li{padding:1.3rem 1.4rem 1.5rem}.facts strong{font-size:1.75rem}}

/* mouvement réduit */
@media (prefers-reduced-motion:reduce){
  .card,.card-vis-photo img,.jcard-fig img,.topbar{transition:none}
}

/* =====================================================================
   11/11/2026 : le style validé par Nabil (accueil de l'aperçu, version 7), étendu à TOUTES les pages, FR et EN.
   Noir pur #000 partout (« du noir point final »), aucun grain ni vignette, zellige au trait et étoile à huit branches
   devant les surtitres, la résine seule (R283), Instagram en bas, marque blanche, pages de lecture sans grand vide.
   ===================================================================== */
:root{--zellige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23d8b26a' stroke-width='.7'%3E%3Crect x='26' y='26' width='36' height='36'/%3E%3Crect x='26' y='26' width='36' height='36' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='8'/%3E%3Cpath d='M0 44h18M70 44h18M44 0v18M44 70v18'/%3E%3C/g%3E%3C/svg%3E");
  --etoile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d8b26a' stroke-width='2'%3E%3Crect x='9' y='9' width='22' height='22'/%3E%3Crect x='9' y='9' width='22' height='22' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E")}

/* noir, point final : aucun fond en nuance de noir */
html,body{background:#000}
.grain,.vignette{display:none!important}
.card,.card-vis,.cta-band,.topbar,.spec-card,.facts li,.step,.pledge,.sec-alt,.foot{background:#000!important}
.pg-head::before,.fiche-hero::before{display:none!important}
.hero-shade{z-index:2}
.card .spec,.spec{color:var(--gold)!important}
.gacp{color:#d8b26a;font-weight:600}

/* ouverture : la résine, puis le champ du Rif monte au défilement (site.js) */
.hero-media .intro{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 45%;clip-path:inset(100% 0% 0% 0%)}
@media (prefers-reduced-motion:reduce){.hero-media .intro{display:none}}

/* touche marocaine : zellige au trait, et étoile à huit branches devant chaque surtitre */
.manif,.devis,.pg-head,.fiche-hero,.cta-band,.mb-home,.insta,.merci{position:relative;isolation:isolate}
.manif::before,.devis::before,.pg-head::after,.fiche-hero::after,.cta-band::before,.mb-home::before,.insta::before,.merci::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--zellige);opacity:.07;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at 85% 30%,#000,transparent 65%);mask-image:radial-gradient(ellipse at 85% 30%,#000,transparent 65%)}
.eyebrow::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.5em;vertical-align:-.1em;background:no-repeat center/contain var(--etoile)}
.etoile{display:inline-block;width:.95em;height:.95em;margin-right:.55em;vertical-align:-.12em;background:no-repeat center/contain var(--etoile)}

/* la résine seule : une grande carte horizontale */
.prod-seule .cards{display:grid;grid-template-columns:1fr!important;max-width:1100px}
.prod-seule .card{flex-direction:row;align-items:stretch}
.prod-seule .card-vis{flex:0 0 52%;aspect-ratio:auto;min-height:360px;border-bottom:0;border-right:1px solid var(--line)}
.prod-seule .card-vis img{width:100%;height:100%;object-fit:cover}
.prod-seule .card-body{justify-content:center;padding:2.4rem}
.prod-seule .card h3{font-size:clamp(2rem,3.4vw,3rem)}
@media (max-width:760px){.prod-seule .card{flex-direction:column;padding:0}.prod-seule .card-vis{flex:none;width:100%;height:auto;min-height:240px;border:0;border-bottom:1px solid var(--line);border-radius:0}.prod-seule .card-body{padding:1.6rem}}

/* marque blanche sur l'accueil */
.mb-home{padding:8rem var(--pad) 7rem;background:#000}
.mb-steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;list-style:none;margin:0;padding:0}
.mb-steps li{display:grid;gap:.5rem;align-content:start;padding:1.8rem 1.8rem 2rem;background:#000}
.mb-n{font-family:var(--d);font-style:italic;font-size:2.4rem;line-height:1;color:var(--gold)}
.mb-steps h3{font-size:clamp(1.5rem,2vw,1.9rem);margin:0}
.mb-steps p{color:var(--mute);max-width:32ch}
.mb-cta{margin-top:2.4rem}
@media (min-width:640px){.mb-steps{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.mb-steps{grid-template-columns:repeat(4,1fr)}}
@media (max-width:899px){.mb-home{padding-top:5rem;padding-bottom:4.5rem}}
.steps-5{grid-template-columns:1fr}
@media (min-width:700px){.steps-5{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps-5{grid-template-columns:repeat(5,1fr)}}
.mb-proc{padding-top:6rem}
.check-mb{display:flex;align-items:flex-start;gap:.7rem;margin:.4rem 0 1.2rem;color:var(--cream);font-size:.98rem;cursor:pointer}
.check-mb input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:#d8b26a;flex:none}
.fiche-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.fiche-cta .fiche-sheet{flex-basis:100%}

/* Instagram, au bas de toutes les pages : nos photos, un lien, aucun widget */
.insta{padding:6rem var(--pad) 5rem;border-top:1px solid var(--line);background:#000}
.insta-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem 3rem;margin-bottom:2.4rem}
.insta h2{font-size:clamp(2rem,3.6vw,3.2rem);margin:0}
.insta-p{color:var(--mute);margin-top:.8rem;max-width:46ch}
.insta-btn{display:inline-flex;align-items:center;gap:.6rem}
.ig-ico{width:1.2rem;height:1.2rem}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;list-style:none;margin:0;padding:0}
.ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.05);opacity:.85}
@media (min-width:640px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.ig-grid{grid-template-columns:repeat(6,1fr);gap:.8rem}}
@media (max-width:899px){.insta{padding-top:4.5rem;padding-bottom:4rem}}
/* pied de page : plus de logo (Nabil, 10/11) */
.foot{padding-top:4rem;padding-bottom:3rem}
.foot-logo-wrap{display:none}
.foot-tag{color:var(--mute)}

/* pages de lecture (journal, guides, pages export) : sommaire | texte | encart, centrés, sans grand vide latéral */
.read-grid{display:grid;gap:2.5rem;max-width:1480px;margin:0 auto}
.read-grid .prose,.sec.legal .read-grid .prose{max-width:70ch;margin:0;padding:0;width:100%}
.read-aside{display:grid;gap:1rem;align-content:start}
.ra-box{border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.4rem 1.5rem;background:#000;display:grid;gap:.8rem;justify-items:start}
.ra-box .eyebrow{margin:0}
.ra-t{color:var(--cream);font-family:var(--d);font-size:1.35rem;line-height:1.2;margin:0}
.ra-box .btn{width:100%;justify-content:center;text-align:center}
.ra-link{color:var(--gold);font-weight:600;font-size:.92rem}
.ra-link:hover{color:var(--cream)}
.art-band{padding:0 var(--pad) 5rem}
.art-band .prose{padding:0}
@media (min-width:1000px){
  .read-grid{grid-template-columns:14rem minmax(0,70ch);justify-content:center;gap:3.5rem;align-items:start}
  .read-grid .toc{position:sticky;top:7rem}
  .read-aside{grid-column:2}
}
@media (min-width:1280px){
  .read-grid{grid-template-columns:14rem minmax(0,70ch) 17rem;gap:3.5rem}
  .read-aside{grid-column:auto;position:sticky;top:7rem}
}
@media (min-width:1700px){.read-grid{grid-template-columns:16rem minmax(0,72ch) 19rem;gap:4.5rem}}
@media (max-width:999px){.read-grid .toc{border-bottom:1px solid var(--line);padding-bottom:1.6rem}}
/* titres du texte de lecture : à l'échelle du texte, pas des titres de section (le guide de la loi les avait énormes) */
.read-grid .prose h2,.sec .read-grid .prose h2{font-size:clamp(1.6rem,2.3vw,2.15rem);line-height:1.12;margin:2.8rem 0 1rem}