/* Atelier Potterysa · feuille de style unique
   Couleurs de terre : brun #2A211C, crème #F4EFE8, argile #E3D7C7, terre cuite #9A4E2F, céladon #A9BCAF */

@font-face{font-family:'Barlow';src:url(../fonts/barlow-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/barlow-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/barlow-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}

:root{
  --brun:#2A211C;--brun-2:#4A3D34;--gris:#6E5F52;--gris-clair:#A99C8E;--sable:#DCD2C6;
  --creme:#F4EFE8;--papier:#EDE5DA;--argile:#E3D7C7;--trait:#D8CBBB;--trait-2:#C9BAA6;
  --terre:#9A4E2F;--celadon:#A9BCAF;--rouge:#8E2F22;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Barlow',system-ui,sans-serif;
  --entete:84px;--doux:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--brun);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--terre);outline-offset:3px}

.wrap{max-width:1320px;margin:0 auto;padding:0 48px}
.etroit{max-width:820px}
.centre{text-align:center}
.serif{font-family:var(--serif);font-weight:300}
.caps{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.italique{font-style:italic}
.terre{color:var(--terre)}.celadon{color:var(--celadon)}.gris{color:var(--gris)}.gris-clair{color:var(--gris-clair)}.gris-fonce{color:var(--brun-2)}
.discret{opacity:.6}
.petit{font-size:13px;line-height:1.55}
.h1{margin:0;font-size:clamp(42px,6vw,64px);line-height:1}
.h2{margin:0;font-size:clamp(38px,4.6vw,56px);line-height:1.05}
.h2-petit{margin:0;font-size:clamp(30px,3.4vw,40px);line-height:1.1}
.h3{margin:0 0 16px;font-size:clamp(36px,4vw,48px);line-height:1.05}
.h3-petit{margin:8px 0;font-size:28px;line-height:1.15}
.sous-titre{font-size:clamp(19px,2vw,22px);line-height:1.5;color:var(--brun-2)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--brun);color:var(--creme);padding:10px 16px}
.evitement:focus{left:8px}
.bandeau-demo.long{white-space:normal;max-width:min(620px,calc(100vw - 32px));text-align:left;border-radius:14px;line-height:1.5}
.bandeau-demo{position:fixed;left:16px;bottom:16px;z-index:90;margin:0;background:var(--terre);color:var(--creme);text-align:center;padding:8px 16px;border-radius:999px;font-size:10px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(42,33,28,.25)}

.lien{text-decoration:none;position:relative;padding:6px 0;display:inline-block}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--doux)}
.lien:hover::after,.lien:focus-visible::after{transform:scaleX(1);transform-origin:left}

.pilule{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 34px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .4s ease,color .4s ease,border-color .4s ease}
.pilule-sombre{background:var(--brun);color:var(--creme);border-color:var(--brun)}
.pilule-sombre:hover,.pilule-sombre:focus-visible{background:var(--brun-2)}
.pilule-sombre:disabled{background:transparent;color:var(--gris);border-color:var(--trait-2);cursor:not-allowed}
.pilule-contour{background:transparent;color:var(--brun);border-color:var(--brun)}
.pilule-contour:hover{background:var(--brun);color:var(--creme)}
.pilule-large{width:100%;min-height:56px}

/* ——— En-tête ——— */
.entete{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--creme);border-bottom:1px solid transparent;transition:background .5s ease,color .5s ease,border-color .5s ease}
.entete.plein,.entete.ouvert,.entete.defile{background:var(--creme);color:var(--brun);border-bottom-color:var(--argile)}
.entete .logo-encre{opacity:0;transition:opacity .5s ease}
.entete.plein .logo-encre,.entete.ouvert .logo-encre,.entete.defile .logo-encre{opacity:1}
.entete.plein{position:sticky}
.rangee{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--entete)}
.gauche,.droite{display:flex;align-items:center;gap:44px}
.droite{justify-content:flex-end}
.logo{display:block;line-height:0;justify-self:center}
.logo img{height:56px;width:auto}
.bouton-nav{background:none;border:0;color:inherit;text-transform:inherit;letter-spacing:inherit;font-size:inherit;font-weight:inherit;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.mobile{display:none}
.panneau{position:absolute;left:0;right:0;top:var(--entete);background:var(--creme);color:var(--brun);border-bottom:1px solid var(--argile);box-shadow:0 30px 60px rgba(42,33,28,.08)}
.panneau-grille{display:grid;grid-template-columns:200px 280px minmax(0,1fr);gap:56px;padding:40px 48px 48px}
.liste-panneau{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.titre-panneau{margin:0 0 16px;font-size:13px}
.texte-panneau{margin:0;font-size:20px;line-height:1.45;color:var(--brun-2)}
.photos-panneau{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.photos-panneau img{width:100%;aspect-ratio:4/5;object-fit:cover}
.menu-mobile{position:fixed;inset:0;z-index:80;background:var(--creme);color:var(--brun);display:flex;flex-direction:column;padding:20px}
.menu-mobile-haut{display:flex;justify-content:space-between;align-items:center;height:48px}
.menu-mobile-haut a{text-decoration:none}
.menu-mobile-liens{display:flex;flex-direction:column;gap:6px;margin-top:48px}
.menu-mobile-liens a{font-size:44px;line-height:1.15;text-decoration:none}
.menu-mobile-bas{margin-top:auto;display:flex;justify-content:space-between;color:var(--gris)}

/* ——— Ouverture : vidéo à gauche, photo à droite, logo au centre ——— */
.ouverture{position:relative;height:100vh;height:100svh;min-height:560px;display:grid;grid-template-columns:1fr 1fr;background:var(--brun);overflow:hidden}
.ouverture-video,.ouverture-photo img{width:100%;height:100%;object-fit:cover}
.ouverture-photo{overflow:hidden}
.ouverture-photo img{animation:respire 18s ease-in-out infinite alternate}
@keyframes respire{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.voile{position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side at 50% 50%,rgba(42,33,28,.28),rgba(42,33,28,0) 70%) 50% 50%/min(70vw,520px) min(70vw,520px) no-repeat,linear-gradient(180deg,rgba(42,33,28,.5) 0%,rgba(42,33,28,0) 24%,rgba(42,33,28,0) 66%,rgba(42,33,28,.55) 100%)}
.couture{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(244,239,232,.35)}
.ouverture-logo{position:absolute;left:50%;top:50%;width:clamp(150px,15vw,230px);height:auto;transform:translate(-50%,-50%);animation:apparait 1.8s var(--doux) backwards}
@keyframes apparait{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
.coin{position:absolute;bottom:40px;color:var(--creme);display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;min-height:44px}
.coin-gauche{left:40px}.coin-droit{right:40px}
.pilule-ouverture{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);background:#fff;color:var(--brun);white-space:nowrap}
.pilule-ouverture:hover,.pilule-ouverture:focus-visible{background:var(--celadon)}

/* ——— Sections ——— */
.intro{padding:140px 0 130px;text-align:center}
.intro .caps{margin:0 0 32px}
.intro-texte{margin:0 auto;max-width:900px;font-size:clamp(32px,4vw,52px);line-height:1.18}
.tete-section{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px;padding-bottom:12px;border-bottom:1px solid var(--trait)}
.tete-section .caps{margin:0 0 10px}
.tete-section > div{min-width:0;max-width:100%}
.boutique{padding-top:120px;padding-bottom:150px}
.filtres{display:flex;gap:32px;flex-wrap:wrap;margin-top:10px}
.filtre{text-decoration:none;padding:8px 0;color:var(--gris);position:relative;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.filtre.on{color:var(--brun)}
.filtre.on::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--brun)}
.grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 28px}
.carte{display:block;text-decoration:none}
.cadre{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--argile)}
.cadre img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
.carte:hover .cadre img,.carte:focus-visible .cadre img{transform:scale(1.045)}
/* Photos qu'on fait défiler dans la carte, sans ouvrir la fiche */
.piste{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.piste::-webkit-scrollbar{display:none}
.vue{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.carte-texte{display:block;text-decoration:none}
.fleche{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(244,239,232,.92);color:var(--brun);cursor:pointer;opacity:0;transition:opacity .3s var(--doux),background .2s}
.fleche:hover{background:var(--creme)}
.fleche-prec{left:12px}.fleche-suiv{right:12px}
.cadre:hover .fleche:not(:disabled),.fleche:focus-visible{opacity:1}
.fleche:disabled{opacity:0 !important;pointer-events:none}
@media (hover:none){.fleche{display:none}}
.points{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.points span{width:6px;height:6px;border-radius:50%;background:rgba(244,239,232,.55);box-shadow:0 0 0 .5px rgba(42,33,28,.18);transition:background .3s,transform .3s}
.points span.on{background:var(--creme);transform:scale(1.25)}
.carte-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.carte-nom{font-size:24px;line-height:1.2}
.carte-prix{font-size:12px;white-space:nowrap}
.carte-type{display:block;margin-top:6px;color:var(--gris);font-size:10px}
.vide{font-size:24px;color:var(--brun-2)}

.sombre{background:var(--brun);color:var(--creme)}
.potiere{padding:140px 0}
.edito{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end}
.edito-grande{width:100%;aspect-ratio:4/5;object-fit:cover}
.edito-droite{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end}
.edito-droite img{width:100%;aspect-ratio:3/4;object-fit:cover}
.edito-droite .decale{margin-bottom:64px}
.potiere .caps{margin:56px 0 20px}
.potiere .h2{margin-bottom:24px}
.texte-sombre{margin:0;font-size:21px;line-height:1.5;color:var(--sable);max-width:520px}
.geste-section{padding:140px 0}
.geste-section.suite{padding-top:0}
.sombre-ligne{border-bottom-color:var(--brun-2)}
.sombre-ligne h2{margin:0 0 10px;font-size:13px}
/* ——— Savoir-faire : une scène fixe (vidéo, grand chiffre, texte) pendant qu'on fait défiler les gestes ——— */
.scene{--h-media:min(calc(100svh - var(--entete) - 140px),640px);--chiffre:var(--creme);position:relative}
.scene-stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(96px,11vw,180px);align-items:start}
.scene-media{position:relative;height:var(--h-media);max-width:calc(var(--h-media) * .84)}
.media{position:absolute;inset:0;overflow:hidden;background:#3A2E27}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.media video.on{opacity:1}
/* Le grand chiffre chevauche le bord droit de la vidéo */
.chiffre{position:absolute;top:0;right:calc(var(--h-media) * -.16);height:100%;width:auto;aspect-ratio:640/1000;overflow:visible;pointer-events:none}
.chiffre text{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1440px;font-variant-numeric:lining-nums;font-feature-settings:'lnum';fill:var(--chiffre);opacity:0;will-change:transform,opacity}
.chiffre text.on{opacity:.93}
.scene-textes{position:relative;padding-top:calc(var(--h-media) * .14)}
.etape{max-width:620px}
.etape .h3{margin-bottom:22px;font-size:clamp(43px,4.8vw,58px)}
.etape .texte-sombre{font-size:25px;max-width:620px}
.etape + .etape{margin-top:72px}
/* Avec JavaScript : la scène reste fixe et les gestes se remplacent au fil du défilement */
.scene.actif{height:calc(var(--n,4) * 70svh + 100svh - var(--entete))}
.scene.actif .scene-stage{position:sticky;top:var(--entete);height:calc(100svh - var(--entete));align-items:center}
.scene.actif .scene-textes{align-self:start;margin-top:calc((100svh - var(--entete) - var(--h-media)) / 2);display:grid}
.scene.actif .etape{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .7s var(--doux),transform .9s var(--doux),visibility 0s .7s}
.scene.actif .etape.on{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--doux) .25s,transform 1.1s var(--doux) .25s,visibility 0s}
.scene.actif .etape.parti{transform:translateY(-28px)}
/* Le chiffre glisse de droite à gauche au fil du défilement (piloté par site.js) */
.chiffre text{transform-box:fill-box}
.geste-section{padding-bottom:110px}
.numero{margin:0 0 8px;font-size:22px;font-style:italic;color:var(--celadon)}

.livraison{padding-top:140px;padding-bottom:130px}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.modes > div{padding:32px 32px 8px;border-left:1px solid var(--trait)}
.modes > div:first-child{border-left:0;padding-left:0}
.modes .caps{margin:0 0 14px}
.modes .serif{margin:0;font-size:21px;line-height:1.45}
.livraison .wrap > .caps{margin-top:48px}
.lettre{padding:110px 0}
.lettre .h2{margin-bottom:16px}
.lettre .sous-titre{margin:0 0 40px}
.form-lettre{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;text-align:left}
.form-lettre input[type=email]{flex:1 1 260px;min-height:52px;padding:0 2px;border:0;border-bottom:1px solid var(--brun);background:transparent;font-family:var(--serif);font-size:22px;color:var(--brun);border-radius:0}
.form-lettre .petit{flex:1 1 100%;margin:0;color:var(--brun-2)}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px}

/* ——— Pied de page ——— */
.pied{background:var(--brun);color:var(--sable);padding:96px 0 40px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.pied img{height:92px;width:auto}
.pied-devise{margin:24px 0 0;font-size:19px;max-width:280px;color:var(--gris-clair)}
.pied-col{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pied-titre{color:var(--celadon);margin-bottom:6px}
.pied-bas{margin-top:80px;padding-top:24px;border-top:1px solid var(--brun-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--gris-clair)}

/* ——— Fiche ——— */
.page-panier main,.fil-ariane{padding-top:32px}
.fil-ariane{color:var(--gris)}
.fiche{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);gap:64px;align-items:start;padding-top:32px;padding-bottom:140px}
.fiche-galerie{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start}
.fiche-galerie:not(:has(.vignettes)){grid-template-columns:minmax(0,1fr)}
.vignettes{display:flex;flex-direction:column;gap:10px}
.vignette{padding:0;border:0;background:var(--argile);aspect-ratio:4/5;cursor:pointer;opacity:.55;outline-offset:2px;transition:opacity .3s var(--doux),box-shadow .3s}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette:hover{opacity:.85}
.vignette.on{opacity:1;box-shadow:0 0 0 1px var(--brun)}
.fiche-photos{position:relative;aspect-ratio:4/5;background:var(--argile)}
.fiche-photos .vue img{width:100%;height:100%;object-fit:cover}
.fiche-photos .points{display:none}
.glacures{display:flex;flex-wrap:wrap;gap:8px 18px}
.glacure{display:inline-flex;align-items:center;gap:9px}
.pastille{flex:none}
.fiche-infos{position:sticky;top:120px}
.fiche-infos > .caps:first-child{margin:0 0 18px}
.prix-fiche{margin:28px 0 0;font-size:14px;letter-spacing:.16em}
.fiche-texte{margin:28px 0 0;font-size:21px;line-height:1.5;color:var(--brun-2)}
.details{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin:32px 0;padding:22px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.details dt{color:var(--gris)}.details dd{margin:0}
.ajoute{display:flex;flex-direction:column;gap:14px}
.ajoute p{margin:0;font-size:21px}
.fiche-infos .petit{margin-top:16px}
.accompagner{background:var(--terre);color:var(--creme);padding:110px 0 130px}
.accompagner .tete-section{border-bottom-color:rgba(244,239,232,.32)}
.accompagner .lien{color:var(--creme)}
.accompagner .cadre{display:block;background:rgba(244,239,232,.12)}
.accompagner .carte-type{color:rgba(244,239,232,.75)}
.accompagner .acc-ajouter{margin-top:18px}
.accompagner :focus-visible{outline-color:var(--creme)}
.pilule-creme{background:transparent;color:var(--creme);border-color:rgba(244,239,232,.6)}
.pilule-creme:hover,.pilule-creme:focus-visible{background:var(--creme);color:var(--terre);border-color:var(--creme)}
.pilule-creme:disabled{opacity:.75;cursor:default;background:transparent;color:var(--creme)}
.suggestions{background:var(--argile);padding:110px 0 130px}
.suggestions .tete-section{border-bottom-color:var(--trait-2)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.page-simple{padding:120px 48px}

/* ——— Panier ——— */
.panier{padding-bottom:140px}
.panier .tete-section{margin-top:40px}
.cols-panier{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:80px;align-items:start}
.lignes-panier{list-style:none;margin:0;padding:0}
.ligne{display:grid;grid-template-columns:112px 1fr auto;gap:24px;align-items:center;padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--trait)}
.ligne img{width:112px;height:140px;object-fit:cover}
.ligne-nom{margin:0;font-size:26px;line-height:1.15}
.ligne-type{margin:6px 0 10px;color:var(--gris);font-size:10px}
.retirer{background:none;border:0;text-transform:inherit;letter-spacing:inherit;padding:6px 0;color:var(--gris);cursor:pointer;min-height:44px}
.alerte{color:var(--rouge);font-size:19px}
.espace-haut{margin-top:72px}
.modes-panier{border:0;margin:20px 0 0;padding:0;border-top:1px solid var(--trait)}
.mode{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--trait);cursor:pointer}
.mode input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:6px 0 0;border:1px solid var(--brun);border-radius:50%;flex:none;display:grid;place-items:center;cursor:pointer}
.mode input:checked::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brun)}
.mode-texte{flex:1 1 auto;display:flex;flex-direction:column}
.mode-nom{font-size:23px;line-height:1.2}
.mode .caps{white-space:nowrap}
.boite-cp{margin-top:28px;padding:28px;background:var(--papier)}
.ligne-cp{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.ligne-cp input{flex:1 1 160px;min-height:52px;padding:0 2px;border:0;border-bottom:1px solid var(--brun);background:transparent;font-family:var(--serif);font-size:26px;letter-spacing:.08em;text-transform:uppercase;color:var(--brun);border-radius:0}
.erreur{margin:14px 0 0;color:var(--rouge);font-size:15px}
.resultat-cp{margin-top:24px}
.resultat-ligne{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.resultat-cp .serif{font-size:22px}
.proche{margin:14px 0 0;font-size:19px;font-style:italic;color:var(--terre)}
.resume{position:sticky;top:120px;padding:36px;background:var(--papier)}
.resume h2{margin:0 0 24px;font-size:12px}
.resume-lignes{display:grid;grid-template-columns:1fr auto;gap:12px 16px;margin:0}
.resume-lignes dt{color:var(--brun-2)}.resume-lignes dd{margin:0}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:24px;padding-top:20px;border-top:1px solid var(--brun)}
.total .serif{font-size:38px;line-height:1}
.coche{display:flex;gap:14px;align-items:flex-start;cursor:pointer;margin:28px 0 24px;font-size:14px;color:var(--brun-2)}
.coche input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:3px 0 0;border:1px solid var(--brun);flex:none;display:grid;place-items:center;cursor:pointer}
.coche input:checked{background:var(--brun)}
.coche input:checked::before{content:"";width:8px;height:4px;border-left:1.5px solid var(--creme);border-bottom:1.5px solid var(--creme);transform:rotate(-45deg) translate(1px,-1px)}
.resume .petit{margin:18px 0 0}

/* ——— Merci ——— */
.merci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center;padding-top:96px;padding-bottom:120px}
.titre-merci{margin:0;font-size:clamp(72px,9vw,104px);line-height:.95}
.merci figure{margin:0}
.merci figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.merci figcaption{margin-top:18px;font-size:21px;line-height:1.45;color:var(--brun-2)}
.suite{background:var(--papier);padding:96px 0 110px}
.suite .tete-section{margin-bottom:8px;font-size:12px}
.etapes-merci{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.etapes-merci li{padding:28px 32px 8px;border-left:1px solid var(--trait)}
.etapes-merci li:first-child{border-left:0;padding-left:0}
.etapes-merci .numero{color:var(--terre)}
.etapes-merci p{color:var(--brun-2)}

/* ——— Pages de texte ——— */
.texte-long{padding-top:64px;padding-bottom:120px}
.texte-long .h1{margin:12px 0 10px}
.texte-long p{font-size:17px;line-height:1.7}
.texte-long h2{margin:48px 0 12px}

/* ——— Mouvement lié au défilement (seulement si le navigateur le permet) ——— */
.leve{animation:leve 1.2s var(--doux) both}
@keyframes leve{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes rv{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  .lent{animation:lent linear both;animation-timeline:view();animation-range:cover}
  @keyframes lent{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
}

/* ——— Mobile ——— */
@media (max-width:900px){
  :root{--entete:68px}
  .wrap{padding-left:20px;padding-right:20px}
  .gauche,.cache-mobile{display:none}
  .bandeau-demo{left:auto;right:12px;bottom:auto;top:78px}
  .mobile{display:inline-flex;justify-self:start}
  .droite{gap:20px}
  .panneau{display:none !important}
  .ouverture{grid-template-columns:1fr}
  .ouverture-photo,.couture,.coin{display:none}
  .ouverture-logo{width:150px}
  .intro{padding:96px 0 88px}
  .boutique{padding-top:72px;padding-bottom:96px}
  .filtres{gap:20px;flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:0 20px}
  .filtre{white-space:nowrap}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}
  .carte-nom{font-size:20px}
  .edito,.fiche,.cols-panier,.merci{grid-template-columns:minmax(0,1fr);gap:32px}
  .potiere{padding:96px 0}
  .scene{--h-media:min(48svh,440px)}
  .scene-stage{grid-template-columns:minmax(0,1fr);gap:28px}
  .scene-media{width:calc(100% - var(--h-media) * .14)}
  .scene-textes{padding-top:0}
  .etape .texte-sombre{font-size:22px}
  .scene.actif .scene-stage{align-items:start;align-content:start;padding-top:36px}
  .scene.actif .scene-textes{margin-top:0}
  .modes,.etapes-merci{grid-template-columns:minmax(0,1fr)}
  .modes > div,.etapes-merci li{border-left:0;border-top:1px solid var(--trait);padding:24px 0}
  .pied-grille{grid-template-columns:1fr 1fr;gap:36px}
  .trio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;gap:14px;margin:0 -20px;padding:0 20px}
  .trio > a,.trio > article{flex:0 0 72%;scroll-snap-align:start}
  .fiche-infos,.resume{position:static}
  .fiche{padding-top:12px}
  .fiche-galerie{grid-template-columns:minmax(0,1fr);margin:0 -20px}
  .vignettes{display:none}
  .fiche-photos .points{display:flex}
  .ligne{grid-template-columns:84px 1fr;}
  .ligne img{width:84px;height:105px}
  .ligne > .caps{grid-column:2}
  .page-simple{padding:96px 20px}
  .merci{padding-top:64px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
/* Bascule FR / EN */
.langues{display:inline-flex;gap:.35em;align-items:center;padding:6px 0}
.langues a{text-decoration:none;opacity:.55;transition:opacity .3s}
.langues a:hover,.langues a:focus-visible{opacity:1}
.langues [aria-current]{opacity:1}
.mention-traduction{font-size:.8rem;margin-top:-.4rem}
/* Aperçu du brouillon de l'atelier */
.bandeau-apercu{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:95;display:flex;gap:18px;align-items:center;background:var(--brun);color:var(--creme);padding:10px 20px;border-radius:999px;font-size:10px;white-space:nowrap;box-shadow:0 6px 18px rgba(42,33,28,.3)}
.bandeau-apercu a{color:inherit;text-decoration:underline}

/* ——— Couleurs de fond choisies dans l'atelier ———
   ton-clair : fond pâle, texte brun · ton-fonce : fond foncé, texte crème.
   Les petits accents (terre, céladon) changent de couleur quand ils manqueraient de contraste sur le fond. */
.fond-creme{background:var(--creme)}.fond-argile{background:var(--argile)}.fond-celadon{background:var(--celadon)}
.fond-terre{background:var(--terre)}.fond-brun{background:var(--brun)}
.ton-clair{color:var(--brun)}
.ton-clair .texte-sombre{color:var(--brun-2)}
.ton-clair .celadon,.ton-clair .numero{color:var(--terre)}
.ton-clair .gris-clair{color:var(--gris)}
.ton-clair .sombre-ligne,.ton-clair .etape{border-color:var(--trait-2)}
.fond-argile .terre,.fond-argile .celadon,.fond-argile .numero{color:#7E3F25}
.fond-argile .gris{color:var(--brun-2)}
.fond-celadon .terre,.fond-celadon .celadon,.fond-celadon .numero,.fond-celadon .gris,.fond-celadon .gris-clair,.fond-celadon .texte-sombre{color:var(--brun)}
.fond-celadon .tete-section,.fond-celadon .modes > div,.fond-celadon .etape{border-color:rgba(42,33,28,.28)}
.ton-fonce{color:var(--creme)}
.ton-fonce .texte-sombre{color:var(--sable)}
.ton-fonce .terre{color:var(--celadon)}
.ton-fonce .gris,.ton-fonce .gris-clair{color:var(--sable)}
.ton-fonce .tete-section,.ton-fonce .modes > div{border-color:rgba(244,239,232,.28)}
.fond-terre .terre,.fond-terre .celadon,.fond-terre .numero{color:var(--creme)}
.fond-terre .texte-sombre{color:#F1E1D4}
.fond-terre .sombre-ligne,.fond-terre .etape{border-color:rgba(244,239,232,.32)}
.ton-fonce .form-lettre input[type=email]{color:var(--creme);border-bottom-color:var(--creme)}
.ton-fonce .form-lettre input::placeholder{color:rgba(244,239,232,.7)}
.ton-fonce .form-lettre .petit{color:var(--sable)}
.ton-fonce .pilule-sombre{background:var(--creme);color:var(--brun);border-color:var(--creme)}
.ton-fonce .pilule-sombre:hover,.ton-fonce .pilule-sombre:focus-visible{background:var(--sable);border-color:var(--sable)}
.fond-celadon .form-lettre .petit{color:var(--brun)}
.fond-terre .gris,.fond-terre .gris-clair,.fond-terre .form-lettre .petit{color:var(--creme)}
.ton-fonce .sous-titre{color:var(--sable)}
.fond-terre .sous-titre{color:var(--creme)}
.fond-celadon .sous-titre{color:var(--brun)}

/* Couleur du grand chiffre selon le fond du savoir-faire */
.ton-clair .scene{--chiffre:var(--terre)}
.fond-argile .scene{--chiffre:#7E3F25}
.fond-celadon .scene{--chiffre:var(--creme)}
@media (prefers-reduced-motion: reduce){
  .scene.actif .etape,.scene.actif .etape.on{transition:none;transform:none}
}

/* Marqueurs de confiance (fiche et panier) */
.confiance{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--trait);display:grid;gap:12px;font-size:15px;line-height:1.45;color:var(--brun-2)}
.confiance li{display:flex;gap:12px;align-items:flex-start}
.confiance svg{flex:none;margin-top:1px;color:var(--terre)}
.confiance a{color:inherit}
.paiement-sur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:20px}
.paiements{list-style:none;margin:0;padding:0;display:flex;gap:14px;color:var(--brun-2)}
.paiements svg{display:block;width:30px;height:30px}
.resume .confiance{font-size:14px}
/* Bris à l'arrivée : la marche à suivre en 3 temps */
.etapes-bris{counter-reset:bris;list-style:none;margin:20px 0 8px;padding:0;display:grid;gap:14px}
.etapes-bris li{counter-increment:bris;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.etapes-bris li::before{content:counter(bris);font:italic 400 32px/1 var(--serif);color:var(--terre)}

/* Questions fréquentes : chaque question s'ouvre au clic */
.page-faq .sous-titre{margin:18px 0 40px}
.faq{border-top:1px solid var(--trait)}
.faq-item{border-bottom:1px solid var(--trait)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:clamp(21px,2.4vw,25px);line-height:1.3;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--doux)}
.faq-item[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq-item summary:hover{color:var(--terre)}
.faq-item summary:focus-visible{outline:2px solid var(--terre);outline-offset:4px}
.faq-reponse{padding:0 0 22px}
.texte-long .faq-reponse p{margin:0;max-width:66ch;color:var(--brun-2)}
.faq-suite{margin-top:40px}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}

/* Pièces vendues : à la fin de la grille, en couleur, sans lien ni prix */
.carte-vendue .cadre img{transition:none}
.carte-vendue:hover .cadre img{transform:none}
.etiquette-vendue{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:999px;background:rgba(244,239,232,.94);color:var(--brun);font-size:10px}
.prix-vendue{color:var(--terre)}

/* Marchés et points de vente */
.marches{padding:120px 0 110px}
.marches-intro{margin:18px 0 52px;max-width:46ch}
.marches-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px}
.marches-grille.une-colonne{grid-template-columns:minmax(0,1fr)}
.marches-sous{margin:0 0 6px;font-size:11px;opacity:.7}
.liste-marches{list-style:none;margin:0;padding:0}
.liste-marches li{padding:22px 0;border-bottom:1px solid currentColor;border-bottom-color:rgba(42,33,28,.16)}
.ton-fonce .liste-marches li{border-bottom-color:rgba(244,239,232,.24)}
.liste-marches p{margin:0}
.marche-date{font-size:11px;color:var(--terre)}
.ton-fonce .marche-date{color:var(--celadon)}
.fond-terre .marche-date{color:var(--creme)}
.marche-nom{font-size:26px;line-height:1.25;margin-top:6px !important}
.marche-lieu,.marche-note{font-size:15px;line-height:1.5;margin-top:4px !important;opacity:.8}
.marche-note{font-style:italic}
@media (max-width:900px){.marches{padding:84px 0}.marches-grille{grid-template-columns:minmax(0,1fr);gap:40px}.marche-nom{font-size:22px}}

/* Ouverture : chaque couche a son rang. Sur iPhone (Safari), une vidéo qui joue reçoit sa propre couche matérielle ;
   sans rang explicite, le logo et le bouton peuvent être peints à travers le voile et paraître gris au lieu de blancs. */
.ouverture{isolation:isolate}
.ouverture-video,.ouverture-photo{position:relative;z-index:0}
.voile,.couture{z-index:1}
.ouverture-logo,.coin,.pilule-ouverture{z-index:2}
/* Avec photo (marchés sans point de vente) : le texte à gauche, la photo à droite sur toute la hauteur, du filet du titre au dernier filet */
.marches-duo{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);margin-top:-32px;align-items:stretch}
.marches-duo .marches-intro{margin-top:92px}
.marches-duo{padding-bottom:16px;border-bottom:1px solid var(--trait)}
.marches-duo .liste-marches li:last-child{border-bottom:0;padding-bottom:0}
.ton-fonce .marches-duo{border-bottom-color:rgba(244,239,232,.24)}
.marches-photo{margin:0;position:relative;min-height:320px;overflow:hidden;background:var(--argile)}
.marches-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
@media (max-width:900px){.marches-duo{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:0}.marches-duo .marches-intro{margin-top:0}.marches-photo{min-height:0;aspect-ratio:4/3}}