/* M7 GOAT — charte commune à toutes les pages (voir CHARTE.md). */
@font-face{font-family:Metro;font-weight:200;font-display:swap;src:url(../fonts/metropolis-200.woff2) format("woff2")}
@font-face{font-family:Metro;font-weight:300;font-display:swap;src:url(../fonts/metropolis-300.woff2) format("woff2")}
@font-face{font-family:Metro;font-weight:400;font-display:swap;src:url(../fonts/metropolis-400.woff2) format("woff2")}
@font-face{font-family:Metro;font-weight:500;font-display:swap;src:url(../fonts/metropolis-500.woff2) format("woff2")}
@font-face{font-family:"M7 Racine";font-display:swap;src:url(../fonts/m7-racine-display.woff2) format("woff2")}

:root{
  --blanc:#fff;--gris:#f4f2ef;--sable:#efe9e1;--encre:#2e1a0e;--doux:#7d6d60;--terre:#b4734f;--filet:#e3ddd5;--alerte:#a5432c;
  --marge:clamp(18px,2.3vw,32px);--gap:14px;--section:clamp(70px,9vw,120px);--entete:64px;
  --t-titre:clamp(34px,4.6vw,66px);--t-h2:clamp(28px,3.4vw,50px);--t-h3:clamp(22px,2vw,30px);--t-chiffre:clamp(40px,4vw,58px);
  --courbe:cubic-bezier(.4,0,.2,1);--sortie:cubic-bezier(.16,1,.3,1);
  --d-texte:.8s;--d-image:1.2s;--d-survol:.3s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:var(--entete);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--blanc);color:var(--encre);font-family:Metro,system-ui,sans-serif;font-weight:400;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:300;text-transform:uppercase;letter-spacing:-.005em;line-height:1.04;text-wrap:balance}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--terre);outline-offset:3px}
[hidden]{display:none!important}

/* typographie utilitaire */
.lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.puce::before{content:"•";margin-right:8px}
.doux{color:var(--doux)}
.h2{font-size:var(--t-h2)}
.prix{font-variant-numeric:tabular-nums;white-space:nowrap}
.note{font-size:13px;color:var(--doux)}

/* liens et boutons */
.lien{position:relative;display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 0 4px}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .6s var(--courbe)}
.lien:hover::after{transform:scaleX(0);transform-origin:right}
.bouton{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:0 28px;background:var(--encre);color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:background-color var(--d-survol) var(--courbe),color var(--d-survol)}
.bouton:hover{background:var(--terre)}
.bouton.creux{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.bouton.creux:hover{background:var(--encre);color:#fff}
.bouton.large{width:100%}
.bouton[disabled]{opacity:.4;pointer-events:none}

/* en-tête commun */
.entete{position:sticky;top:0;z-index:30;height:var(--entete);padding:0 var(--marge);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--blanc);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:box-shadow .4s,transform .6s var(--courbe)}
.entete.ombre{box-shadow:0 1px 0 var(--filet)}
.entete.cache{transform:translateY(-100%)}
.entete nav,.entete .droite{display:flex;gap:26px;align-items:center}
.entete .droite{justify-content:flex-end}
.entete nav a,.entete .droite a{position:relative;padding:14px 0}
.entete nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor}
.logo{font-family:"M7 Racine",Didot,serif;font-feature-settings:"ss01";font-size:30px;letter-spacing:0;text-transform:none;line-height:1}
.pastille{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--encre);color:#fff;font-size:10px;letter-spacing:0}
.pastille:empty{display:none}
.burger{display:none;width:44px;height:44px;place-items:center;margin-left:-10px}
.burger span{display:block;width:18px;height:1px;background:currentColor;box-shadow:0 6px 0 currentColor;transform:translateY(-3px)}
.menu{position:fixed;inset:var(--entete) 0 0;z-index:29;background:var(--blanc);padding:30px var(--marge);display:flex;flex-direction:column;gap:6px}
.menu a{font-size:30px;font-weight:300;text-transform:uppercase;padding:8px 0}
.menu .lab{margin-top:auto;color:var(--doux)}

/* fil d'Ariane */
.fil{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.fil a:hover{color:var(--encre)}
.fil span[aria-current]{color:var(--encre)}

/* tuile produit */
.rang{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tuile{display:grid;gap:10px;align-content:start}
.tuile .v{position:relative;aspect-ratio:3/4;background:var(--gris);overflow:hidden}
.tuile .v>a{display:block;height:100%}
.tuile .v img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--courbe)}
.tuile:hover .v img{transform:scale(1.03)}
.tuile .n{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.tuile h3{font-size:12px;font-weight:400;letter-spacing:.06em;line-height:1.4}
.tuile .n .prix{font-size:12px;color:var(--doux)}
.tuile small{font-size:13px;color:var(--doux)}
.tuile .ajout{position:absolute;left:12px;right:12px;bottom:12px;min-height:44px;background:var(--blanc);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transform:translateY(calc(100% + 14px));transition:transform .6s var(--courbe),background-color .3s}
.tuile:hover .ajout,.tuile .ajout:focus-visible{transform:none}
.tuile .ajout:hover{background:var(--encre);color:#fff}
.etiquette{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--blanc);padding:6px 9px}

/* formulaires */
.champ{display:grid;gap:6px}
.champ label,.champ .lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;border:0;border-bottom:1px solid var(--filet);background:transparent;padding:10px 0;font-size:16px;border-radius:0;transition:border-color .3s}
.champ textarea{min-height:90px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--encre)}
.champ .erreur{font-size:12px;color:var(--alerte)}
.choix{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--filet);cursor:pointer;transition:border-color .3s}
.choix:has(input:checked){border-color:var(--encre)}
.choix input{margin-top:3px;accent-color:var(--encre)}
.choix b{display:block;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.choix small{font-size:13px;color:var(--doux)}
.qte{display:inline-grid;grid-template-columns:44px 40px 44px;align-items:center;border:1px solid var(--filet);height:46px;text-align:center}
.qte button{height:100%;font-size:16px}
.qte span{font-variant-numeric:tabular-nums}

/* confirmation flottante */
.toast{position:fixed;z-index:40;right:var(--marge);bottom:var(--marge);background:var(--encre);color:#fff;padding:16px 20px;font-size:13px;display:flex;gap:18px;align-items:center;transform:translateY(20px);opacity:0;transition:transform .6s var(--sortie),opacity .4s;pointer-events:none}
.toast.on{transform:none;opacity:1;pointer-events:auto}
.toast a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* pied de page commun */
.pied{background:var(--gris);padding:70px var(--marge) 28px;overflow:hidden}
.pied-haut{display:grid;grid-template-columns:460px 1fr;gap:60px}
.news{display:grid;gap:16px;align-content:start}
.news .lab{color:var(--doux)}
.ch{display:flex;border-bottom:1px solid var(--encre)}
.ch input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;padding:12px 0}
.ch input:focus{outline:none}
.ch button{width:44px;font-size:18px}
.ok{font-size:13px;color:var(--terre)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cols div{display:grid;align-content:start}
.cols span{color:var(--doux);margin-bottom:8px}
.cols a{padding:6px 0}
.geant{font-family:"M7 Racine",Didot,serif;font-feature-settings:"ss01";font-size:clamp(64px,13.2vw,190px);line-height:.9;margin-top:clamp(60px,10vw,140px);white-space:nowrap;overflow:hidden}
.mini{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--doux);letter-spacing:.06em;margin-top:22px}

/* ——— mouvement : états de départ (seulement si JS actif et mouvement autorisé) ——— */
.anime .r-ligne .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.anime .r-ligne .l>span{display:inline-block;transform:translateY(105%);transition:transform var(--d-texte) var(--courbe);transition-delay:calc(var(--i,0) * 80ms + var(--retard,0ms))}
.anime .r-ligne.vu .l>span{transform:none}
.anime .r-monte{opacity:0;transform:translateY(15px);transition:opacity var(--d-texte) var(--courbe),transform var(--d-texte) var(--courbe);transition-delay:calc(var(--i,0) * 80ms + var(--retard,0ms))}
.anime .r-monte.vu{opacity:1;transform:none}
.anime .r-image{clip-path:inset(100% 0 0 0);transition:clip-path var(--d-image) var(--courbe);transition-delay:calc(var(--i,0) * 90ms + var(--retard,0ms))}
.anime .r-image img{transform:scale(1.08);transition:transform calc(var(--d-image) + .6s) var(--sortie);transition-delay:calc(var(--i,0) * 90ms + var(--retard,0ms))}
.anime .r-image.vu{clip-path:inset(0 0 0 0)}
.anime .r-image.vu img{transform:scale(1)}
.anime .r-rond{clip-path:circle(0% at 50% 50%);transition:clip-path 1.4s var(--courbe);transition-delay:var(--retard,0ms)}
.anime .r-rond.vu{clip-path:circle(50% at 50% 50%)}
.anime .r-filet{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--courbe);transition-delay:calc(var(--i,0) * 120ms + var(--retard,0ms))}
.anime .r-filet.vu{transform:none}

/* tablette */
@media (max-width:1100px){
  .rang{grid-template-columns:repeat(2,1fr)}
  .pied-haut{grid-template-columns:1fr}
}
/* téléphone */
@media (max-width:760px){
  :root{--entete:56px}
  .entete{grid-template-columns:auto 1fr auto}
  .entete nav,.entete .cache-mobile{display:none}
  .burger{display:grid}
  .logo{font-size:24px;text-align:center}
  .rang{gap:10px}
  .tuile h3,.tuile .n .prix{font-size:11px}
  .tuile .ajout{display:none}
  .cols{grid-template-columns:1fr 1fr}
  .geant{font-size:13.5vw}
  .toast{left:var(--marge)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}