/* Mont Saint Clair : feuille de style du thème (reprise des maquettes validées du 2/11/2026). */

:root{
  --klein:#1F18C0;
  --sel:#F7F4EF;      /* blanc sel */
  --sable:#EAE1D3;
  --sable-clair:#F1EBE1;
  --encre:#121212;
  --pierre:#7A746A;
  --trait:#DCD3C5;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --marge:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--sel);color:var(--encre);font:400 15px/1.6 var(--sans)}
img{display:block;max-width:100%;height:auto}
:where(.vis,.heros,.matiere,.banniere,.galerie .g,.choix-motifs .m,.heros-cadeau,.taille-aide .vis,.chapitre .vis,.recit .vis,.histoire .vis,.duo .vis) img{width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Typo ---------- */
.kicker{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--pierre)}
.display{font:400 88px/0.98 var(--serif);letter-spacing:-.01em}
.h1{font:400 64px/1.02 var(--serif);letter-spacing:-.01em}
.h2{font:400 48px/1.05 var(--serif)}
.h3{font:400 30px/1.15 var(--serif)}
.it{font-style:italic}
.lead{font-size:17px;line-height:1.6;color:#3a3732;max-width:520px}
.petit{font-size:13px;color:var(--pierre)}
.lien{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:5px}
.klein{color:var(--klein)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;background:var(--encre);color:#fff;
  font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--encre)}
.btn--clair{background:#fff;color:var(--encre);border-color:#fff}
.btn--contour{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.btn--klein{background:var(--klein);border-color:var(--klein)}
.btn--plein{width:100%}

/* ---------- Bandeau + en-tête ---------- */
.bandeau{background:var(--klein);color:#fff;text-align:center;font:500 11px/36px var(--sans);letter-spacing:.14em;text-transform:uppercase;height:36px;overflow:hidden;white-space:nowrap}
.bandeau span{opacity:.55;margin:0 14px}
.entete{position:relative;z-index:20;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--marge);background:var(--sel);border-bottom:1px solid var(--trait)}
.entete--sur{position:absolute;left:0;right:0;top:36px;background:transparent;border-bottom:1px solid rgba(255,255,255,.25);color:#fff}
.entete nav{display:flex;gap:30px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.entete nav a.actif{border-bottom:1px solid currentColor;padding-bottom:4px}
.entete .logo{width:196px;height:auto}
.entete .logo img{height:auto}
.entete .outils{display:flex;justify-content:flex-end;align-items:center;gap:22px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4}
.burger,.seul-mobile{display:none}
.compte{display:inline-flex;align-items:center;gap:8px}
.pastille{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--klein);color:#fff;font-size:10px;letter-spacing:0;padding:0 5px}
.entete--sur .pastille{background:#fff;color:var(--klein)}

/* ---------- Sections ---------- */
.section{padding:120px var(--marge)}
.section--sable{background:var(--sable-clair)}
.section--serree{padding:72px var(--marge)}
.titre-ligne{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}

/* Héros accueil */
.heros{position:relative;height:100vh;min-height:760px;color:#fff;overflow:hidden}
.heros picture,.heros picture img{position:absolute;inset:0;width:100%;height:100%}
.heros::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.5) 100%)}
.heros .texte{position:absolute;z-index:2;left:var(--marge);right:var(--marge);bottom:72px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.heros .kicker{color:rgba(255,255,255,.85);margin-bottom:22px}
.heros p.sous{font-size:16px;line-height:1.55;max-width:420px;margin:22px 0 32px;color:rgba(255,255,255,.92)}
.heros .actions{display:flex;gap:12px}
.heros .legende{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75);text-align:right}

/* Manifeste */
.manifeste{text-align:center;padding:130px var(--marge) 120px}
.manifeste .trait{width:200px;margin:0 auto 40px}
.manifeste .trait img{height:auto}
.manifeste p{font:400 40px/1.25 var(--serif);max-width:980px;margin:0 auto}
.manifeste p em{color:var(--klein)}

/* Rail de dessins */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4.35);gap:20px;overflow:hidden;margin-right:calc(-1*var(--marge))}
.carte-dessin .vis{aspect-ratio:3/4;overflow:hidden;background:var(--sable)}
.carte-dessin .nom{font:400 26px/1.1 var(--serif);margin-top:18px}
.carte-dessin .auteur{font-size:13px;color:var(--pierre);margin-top:6px}

/* Bloc partagé image / texte */
.duo{display:grid;grid-template-columns:1fr 1fr;min-height:880px}
.duo .vis{position:relative;overflow:hidden}
.duo .txt{display:flex;flex-direction:column;justify-content:center;padding:80px 9vw 80px 7vw;background:var(--sable-clair)}
.duo .txt .h1{margin:20px 0 24px}
.prix-ligne{display:flex;align-items:center;gap:18px;margin:30px 0 34px;font-size:15px}
.pastilles{display:flex;gap:8px}
.pastilles i{width:16px;height:16px;border-radius:50%;border:1px solid var(--trait);display:block}
.c-noir{background:#151515}.c-blanc{background:#fbfaf7}.c-beige{background:#e6dccb}.c-marine{background:#1d2540}.c-ecru{background:#efe7d8}

/* Matière */
.matiere{position:relative;height:900px;color:#fff;overflow:hidden}
.matiere img{position:absolute;inset:0}
.matiere::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 60%)}
.matiere .contenu{position:absolute;z-index:2;left:var(--marge);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:560px}
.matiere .h1{margin:20px 0 24px}
.matiere .kicker{color:rgba(255,255,255,.8)}
.chiffres{position:absolute;z-index:2;left:var(--marge);right:var(--marge);bottom:56px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.35);padding-top:26px}
.chiffres b{display:block;font:400 44px/1 var(--serif)}
.chiffres span{display:block;font-size:13px;margin-top:10px;color:rgba(255,255,255,.85)}

/* Histoire du trait */
.histoire{display:grid;grid-template-columns:5fr 6fr;gap:7vw;align-items:center}
.histoire .trait-grand{width:100%;margin-bottom:46px}
.histoire .trait-grand img{height:auto}
.histoire .vis{aspect-ratio:4/5;overflow:hidden}
.histoire figcaption{font-size:12px;color:var(--pierre);margin-top:12px;letter-spacing:.04em}

/* Motifs sweat */
.motifs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.motif .vis{aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.motif .nom{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.motif .nom b{font:400 26px/1 var(--serif)}

/* Bannière pleine */
.banniere{position:relative;height:820px;color:#fff;overflow:hidden}
.banniere img{position:absolute;inset:0}
.banniere::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 55%)}
.banniere .contenu{position:absolute;z-index:2;left:var(--marge);bottom:72px;max-width:640px}
.banniere .kicker{color:rgba(255,255,255,.85)}
.banniere .display{margin:18px 0 18px}
.banniere p{font-size:17px;margin-bottom:30px;color:rgba(255,255,255,.92)}

/* Avis */
.avis-tete{display:flex;align-items:center;gap:16px;margin-bottom:46px}
.etoiles{color:var(--klein);letter-spacing:3px;font-size:16px}
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.avis blockquote{font:400 italic 25px/1.35 var(--serif)}
.avis cite{display:block;margin-top:20px;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--pierre)}

/* Engagements */
.engagements{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.engagements div{padding:34px 28px;border-right:1px solid var(--trait);font-size:14px;line-height:1.45}
.engagements div:last-child{border-right:0}
.engagements b{display:block;font:400 21px/1.2 var(--serif);margin-bottom:6px}

/* Pied de page */
.pied{background:var(--klein);color:#fff;padding:96px var(--marge) 36px}
.pied .haut{display:grid;grid-template-columns:5fr 2fr 2fr 2fr;gap:48px}
.pied .lettre p.h3{margin:16px 0 10px}
.pied .lettre p.petit{color:rgba(255,255,255,.75);max-width:380px}
.champ{display:flex;border-bottom:1px solid rgba(255,255,255,.6);margin-top:26px;max-width:420px}
.champ span{flex:1;padding:14px 0;color:rgba(255,255,255,.6);font-size:14px}
.champ b{font:500 12px/48px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.pied h4{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:20px}
.pied ul{list-style:none;display:grid;gap:11px;font-size:14px}
.pied .grand-logo{margin:110px 0 26px}
.pied .grand-logo img{height:auto}
.pied .bas{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.25);padding-top:22px}

/* ---------- Boutique ---------- */
.tete-page{padding:84px var(--marge) 36px}
.tete-page .h1{margin-top:16px}
.filtres{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 var(--marge);height:64px;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--sel)}
.puces{display:flex;gap:8px;white-space:nowrap}
.puce{height:36px;padding:0 16px;border:1px solid var(--trait);border-radius:18px;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.puce.on{background:var(--encre);color:#fff;border-color:var(--encre)}
.puce small{color:var(--pierre)}
.puce.on small{color:rgba(255,255,255,.6)}
.groupe{padding:56px var(--marge) 24px}
.groupe-tete{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px}
.carte .vis{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.carte .vis.plat img{object-fit:contain;background:#eef0f2}
.carte .badge{position:absolute;left:12px;top:12px;background:var(--sel);font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:7px 9px}
.carte .badge.epuise{background:var(--encre);color:#fff}
.carte .infos{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.carte .nom{font-size:14px;font-weight:500}
.carte .detail{font-size:13px;color:var(--pierre);margin-top:3px}
.carte .prix{font-size:14px;white-space:nowrap}
.carte .pastilles{margin-top:10px}
.carte .pastilles i{width:12px;height:12px}
.carte--edito{grid-column:span 2;position:relative;color:#fff}
.carte--edito .vis{aspect-ratio:auto;height:100%}
.carte--edito .sur{position:absolute;left:28px;bottom:28px;z-index:2}
.carte--edito .vis::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 50%)}

/* ---------- Fiche produit ---------- */
.fil{padding:22px var(--marge);font-size:12px;color:var(--pierre);letter-spacing:.04em}
.fiche{display:grid;grid-template-columns:7fr 5fr;gap:0;align-items:start}
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.galerie .g{aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.galerie .g.large{grid-column:span 2;aspect-ratio:4/4.2}
.panneau{padding:28px 5.5vw 60px 4.5vw;position:sticky;top:0}
.panneau .h1{font-size:54px;margin:14px 0 8px}
.panneau .prix{font-size:20px;margin:6px 0 4px}
.note-avis{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--pierre);margin:14px 0 30px}
.etiq{display:flex;justify-content:space-between;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:28px 0 12px}
.etiq span{color:var(--pierre);letter-spacing:.04em;text-transform:none;font-size:13px;font-weight:400}
.coloris{display:flex;gap:10px}
.coloris i{width:30px;height:30px;border-radius:50%;border:1px solid var(--trait);display:block;outline-offset:3px}
.coloris i.on{outline:1px solid var(--encre)}
.tailles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tailles b{height:48px;display:grid;place-items:center;border:1px solid var(--trait);font-weight:500;font-size:13px;background:#fff}
.tailles b.on{background:var(--encre);color:#fff;border-color:var(--encre)}
.conseil{display:flex;gap:14px;background:var(--sable-clair);padding:16px 18px;margin-top:12px;font-size:13.5px;line-height:1.5}
.conseil b{font-weight:600}
.rassure{display:grid;gap:9px;margin:20px 0 6px;font-size:13px;color:#4a463f}
.rassure div{display:flex;gap:10px;align-items:center}
.rassure .ico{width:17px;height:17px}
.accordeon{border-top:1px solid var(--trait);margin-top:30px}
.accordeon details{border-bottom:1px solid var(--trait);padding:20px 0}
.accordeon summary{list-style:none;display:flex;justify-content:space-between;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.accordeon summary::after{content:"+";font-size:18px;font-weight:300;line-height:10px}
.accordeon details[open] summary::after{content:"–"}
.accordeon details p,.accordeon details ul{margin-top:14px;font-size:14px;line-height:1.65;color:#3a3732}
.accordeon ul{padding-left:18px}

/* Motifs au dos (sweat) */
.choix-motifs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.choix-motifs div{border:1px solid var(--trait);background:#fff;padding:5px 5px 9px;text-align:center;font-size:11.5px;line-height:1.25}
.choix-motifs div .m{aspect-ratio:1;overflow:hidden;margin-bottom:7px;background:var(--sable)}
.choix-motifs div.on{border-color:var(--encre);outline:1px solid var(--encre)}
.choix-motifs small{display:block;color:var(--pierre)}
.recap-prix{display:flex;justify-content:space-between;font-size:13px;color:var(--pierre);margin-top:10px}

/* Récit du dessin */
.recit{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw;padding:130px var(--marge)}
.recit .vis{aspect-ratio:1;overflow:hidden}
.recit .h1{margin:18px 0 22px}

/* Barre mobile collante */
.barre-mobile{display:none}

/* ---------- Offrir Sète ---------- */
.heros-cadeau{position:relative;height:86vh;min-height:700px;color:#fff;overflow:hidden}
.heros-cadeau img,.heros-cadeau picture{position:absolute;inset:0}
.heros-cadeau::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 60%)}
.heros-cadeau .contenu{position:absolute;z-index:2;left:var(--marge);bottom:80px;max-width:720px}
.heros-cadeau .kicker{color:rgba(255,255,255,.85)}
.heros-cadeau .display{margin:16px 0 18px;font-size:104px}
.heros-cadeau p{font-size:18px;color:rgba(255,255,255,.92)}
.date-limite{display:flex;justify-content:center;align-items:center;gap:34px;background:var(--encre);color:#fff;padding:22px var(--marge);font-size:14px;text-align:center}
.date-limite b{font:400 24px/1 var(--serif)}
.date-limite .sep{width:1px;height:26px;background:rgba(255,255,255,.3)}
.ancres{display:flex;justify-content:center;gap:10px;padding:40px var(--marge) 0}
.budget{padding:90px var(--marge) 40px}
.budget-tete{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:40px;margin-bottom:36px;border-bottom:1px solid var(--trait);padding-bottom:26px}
.budget-tete .montant{font:400 92px/0.85 var(--serif);color:var(--klein)}
.budget-tete p{font-size:15px;color:#3a3732;max-width:540px}
.idees-duo{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.idee{background:#fff;padding:30px 28px;border:1px solid var(--trait)}
.idee .total{font:400 46px/1 var(--serif);margin:14px 0 6px}
.idee .ligne{font-size:14px;color:#3a3732}
.idee .gratuit{display:inline-block;margin-top:16px;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--klein);border:1px solid var(--klein);padding:7px 9px}
.taille-aide{display:grid;grid-template-columns:5fr 7fr;gap:0;background:var(--sable-clair)}
.taille-aide .vis{min-height:640px;overflow:hidden}
.taille-aide .txt{padding:90px 7vw}
.taille-aide ol{list-style:none;counter-reset:n;margin-top:34px;display:grid;gap:26px}
.taille-aide li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;font-size:15px;line-height:1.55}
.taille-aide li::before{content:counter(n);font:400 30px/1 var(--serif);color:var(--klein)}
.taille-aide li b{display:block;font-weight:600}

/* ---------- Panier ---------- */
.panier{display:grid;grid-template-columns:7fr 4fr;gap:64px;padding:56px var(--marge) 110px;align-items:start}
.livraison-jauge{background:var(--sable-clair);padding:22px 24px;margin-bottom:28px}
.livraison-jauge p{font-size:14.5px}
.livraison-jauge p b{font-weight:600}
.jauge{height:4px;background:var(--trait);margin-top:14px;position:relative}
.jauge i{position:absolute;left:0;top:0;bottom:0;background:var(--klein)}
.jauge-bornes{display:flex;justify-content:space-between;font-size:11.5px;color:var(--pierre);margin-top:8px}
.article{display:grid;grid-template-columns:132px 1fr auto;gap:24px;padding:26px 0;border-bottom:1px solid var(--trait)}
.article:first-of-type{border-top:1px solid var(--trait)}
.article .vis{aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.article .nom{font:400 26px/1.1 var(--serif)}
.article .opt{font-size:13px;color:var(--pierre);margin-top:6px;line-height:1.6}
.qte{display:inline-flex;align-items:center;border:1px solid var(--trait);height:38px;margin-top:16px;background:#fff}
.qte span{width:38px;text-align:center;font-size:15px}
.article .retirer{font-size:12px;color:var(--pierre);text-decoration:underline;margin-left:16px}
.article .p{font-size:15px;text-align:right}
.ajout-suggestion{display:grid;grid-template-columns:84px 1fr auto;gap:18px;align-items:center;border:1px solid var(--trait);background:#fff;padding:12px;margin-top:28px}
.ajout-suggestion .vis{aspect-ratio:4/5;overflow:hidden}
.ajout-suggestion .t{font-size:14px}
.ajout-suggestion .t b{display:block;font-weight:500;margin-bottom:3px}
.ajout-suggestion .plus{height:40px;padding:0 16px;border:1px solid var(--encre);font:500 11px/38px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.recap{background:#fff;border:1px solid var(--trait);padding:34px 32px}
.recap h2{font:400 32px/1 var(--serif);margin-bottom:26px}
.recap .l{display:flex;justify-content:space-between;font-size:14px;padding:9px 0}
.recap .l span:last-child{text-align:right}
.recap .total{border-top:1px solid var(--trait);margin-top:12px;padding-top:18px;font-size:17px;font-weight:600}
.recap .modes{display:grid;gap:10px;margin:24px 0 26px}
.mode{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--trait);padding:14px 16px;font-size:13.5px}
.mode.on{border-color:var(--encre)}
.mode .rond{width:16px;height:16px;border-radius:50%;border:1px solid var(--pierre);flex:none}
.mode.on .rond{border:5px solid var(--encre)}
.mode div{flex:1}
.mode small{display:block;color:var(--pierre);font-size:12px}

/* =================== TÉLÉPHONE =================== */
@media (max-width:760px){
  :root{--marge:20px}
  body{font-size:15px}
  .display{font-size:46px;line-height:1}
  .h1{font-size:40px}
  .h2{font-size:34px}
  .h3{font-size:25px}
  .lead{font-size:15.5px}
  .bandeau{font-size:10px;letter-spacing:.1em}
  .bandeau .loin{display:none}
  .entete{height:58px;grid-template-columns:44px 1fr 44px;padding:0 14px}
  .entete nav,.entete .outils .loin{display:none}
  .burger,.seul-mobile{display:block}
  .entete .logo{width:150px;justify-self:center}
  .entete .outils{gap:0}
  .section{padding:76px var(--marge)}
  .section--serree{padding:52px var(--marge)}
  .titre-ligne{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:30px}

  .heros{height:92vh;min-height:0}
  .heros .texte{bottom:36px;flex-direction:column;align-items:stretch;gap:0}
  .heros .kicker{margin-bottom:16px}
  .heros p.sous{font-size:15px;margin:16px 0 24px}
  .heros .actions{flex-direction:column;gap:10px}
  .heros .actions .btn{width:100%}
  .heros .legende{display:none}

  .manifeste{padding:80px var(--marge)}
  .manifeste .trait{width:140px;margin-bottom:30px}
  .manifeste p{font-size:27px;line-height:1.28}

  .rail{grid-auto-columns:72%;gap:12px;margin-right:calc(-1*var(--marge))}
  .carte-dessin .nom{font-size:23px;margin-top:14px}

  .duo{grid-template-columns:1fr;min-height:0}
  .duo .vis{aspect-ratio:4/5}
  .duo .txt{padding:46px var(--marge) 60px}
  .duo .txt .h1{margin:14px 0 16px}

  .matiere{height:auto;min-height:0;display:flex;flex-direction:column}
  .matiere img{position:relative;height:520px}
  .matiere::after{display:none}
  .matiere .contenu{position:relative;left:0;padding:46px var(--marge) 10px;background:var(--encre);max-width:none}
  .chiffres{position:relative;left:0;right:0;bottom:0;grid-template-columns:1fr 1fr;gap:26px 10px;padding:26px var(--marge) 50px;background:var(--encre);border-top:0}
  .chiffres b{font-size:36px}

  .histoire{grid-template-columns:1fr;gap:40px}
  .histoire .trait-grand{margin-bottom:30px}

  .motifs{grid-template-columns:1fr 1fr;gap:28px 12px}
  .motif .nom{flex-direction:column;gap:4px}
  .motif .nom b{font-size:22px}

  .banniere{height:640px}
  .banniere .contenu{bottom:40px;right:var(--marge)}
  .banniere .display{font-size:52px}

  .avis{grid-template-columns:1fr;gap:38px}
  .avis blockquote{font-size:22px}
  .avis-tete{flex-wrap:wrap;gap:10px}

  .engagements{grid-template-columns:1fr 1fr}
  .engagements div{padding:24px 16px;border-bottom:1px solid var(--trait)}
  .engagements div:nth-child(2n){border-right:0}
  .engagements div:nth-child(n+3){border-bottom:0}
  .engagements b{font-size:18px}

  .pied{padding:64px var(--marge) 30px}
  .pied .haut{grid-template-columns:1fr 1fr;gap:40px 20px}
  .pied .lettre{grid-column:span 2}
  .pied .grand-logo{margin:64px 0 20px}
  .pied .bas{flex-direction:column;gap:6px}

  /* boutique */
  .tete-page{padding:44px var(--marge) 24px}
  .filtres{height:auto;padding:12px 0 12px var(--marge);overflow:hidden}
  .filtres .trier{display:none}
  .groupe{padding:40px var(--marge) 10px}
  .grille{grid-template-columns:1fr 1fr;gap:28px 10px}
  .carte .infos{flex-direction:column;gap:2px;margin-top:10px}
  .carte .nom{font-size:13.5px}
  .carte .detail{font-size:12.5px}
  .carte .badge{left:8px;top:8px;font-size:9px;padding:6px 7px}
  .carte--edito{grid-column:span 2;aspect-ratio:4/5}

  /* fiche */
  .fil{display:none}
  .fiche{grid-template-columns:1fr}
  .galerie{display:flex;overflow:hidden;gap:4px}
  .galerie .g{flex:0 0 88%;aspect-ratio:4/5}
  .galerie .g.large{aspect-ratio:4/5}
  .points{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .points i{width:6px;height:6px;border-radius:50%;background:var(--trait)}
  .points i.on{background:var(--encre)}
  .panneau{padding:18px var(--marge) 40px;position:static}
  .panneau .h1{font-size:40px;margin:10px 0 6px}
  .tailles b{height:46px}
  .choix-motifs{grid-template-columns:repeat(5,1fr);gap:5px}
  .choix-motifs div{font-size:10px;padding:3px 3px 7px}
  .recit{grid-template-columns:1fr;padding:70px var(--marge);gap:34px}
  .barre-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--sel);border-top:1px solid var(--trait);padding:10px 14px 14px;gap:10px;align-items:center}
  .barre-mobile .t{font-size:12.5px;line-height:1.3;flex:1}
  .barre-mobile .t b{display:block;font-size:14px}
  .barre-mobile .btn{height:50px;padding:0 20px;flex:none}

  /* offrir */
  .heros-cadeau{height:88vh;min-height:0}
  .heros-cadeau .contenu{bottom:40px;right:var(--marge)}
  .heros-cadeau .display{font-size:60px}
  .heros-cadeau p{font-size:16px}
  .date-limite{flex-direction:column;gap:8px;padding:20px var(--marge)}
  .date-limite .sep{display:none}
  .date-limite b{font-size:21px}
  .ancres{justify-content:flex-start;overflow:hidden;padding:26px 0 0 var(--marge)}
  .budget{padding:64px var(--marge) 20px}
  .budget-tete{grid-template-columns:1fr;gap:14px}
  .budget-tete .montant{font-size:66px}
  .idees-duo{grid-template-columns:1fr;gap:12px}
  .taille-aide{grid-template-columns:1fr}
  .taille-aide .vis{min-height:0;aspect-ratio:4/5}
  .taille-aide .txt{padding:56px var(--marge)}

  /* panier */
  .panier{grid-template-columns:1fr;gap:34px;padding:26px var(--marge) 120px}
  .article{grid-template-columns:96px 1fr;gap:16px}
  .article .p{grid-column:2;text-align:left;margin-top:-4px}
  .article .nom{font-size:22px}
  .ajout-suggestion{grid-template-columns:64px 1fr;}
  .ajout-suggestion .plus{grid-column:1 / -1}
  .recap{padding:26px 20px}
}
@media (min-width:761px){ .points{display:none} }

/* Accueil : texte du héros à droite sur ordinateur (le couple est à gauche) */
@media (min-width:761px){
  .heros .texte{flex-direction:row-reverse;text-align:right}
  .heros .actions{justify-content:flex-end}
  .heros p.sous{margin-left:auto}
  .heros .legende{text-align:left}
}

/* Corrections après relecture des captures */
.heros-cadeau::after{background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.puce{white-space:nowrap;flex:none}
.carte--edito.simple{grid-column:span 1}
.carte--edito.simple .vis{aspect-ratio:4/5;height:auto}
@media (max-width:760px){ .carte--edito.simple{grid-column:span 1;aspect-ratio:auto} .carte--edito.simple .sur{left:12px;bottom:14px;right:12px} .carte--edito.simple .h3{font-size:19px} }

.carte{display:block}
@media (max-width:760px){ .carte--edito.simple .kicker{display:none} }

/* ===== V2 : interactions ===== */
[hidden]{display:none!important}
img.contenu{object-fit:contain!important;background:#fff;padding:6%}
.galerie .g.plat,.carte .vis.plat{background:#fff}
.carte .vis.plat img{background:#fff;padding:8%}
button.btn{cursor:pointer}
.btn--off{background:var(--trait);border-color:var(--trait);color:var(--pierre);cursor:default}
.btn--blanc{background:#fff;color:var(--encre)}
.etiq a{color:var(--pierre);letter-spacing:.04em;text-transform:none;font-size:13px;font-weight:400;text-decoration:underline}
.coloris a{display:block}
.tailles b{cursor:pointer}
.tailles.unique{grid-template-columns:1fr}
.choix-motifs div{cursor:pointer}
.fige{overflow:hidden}
a:focus-visible,button:focus-visible,[data-taille]:focus-visible{outline:2px solid var(--klein);outline-offset:3px}

/* Menu téléphone */
.tiroir{position:fixed;inset:0;z-index:60;background:var(--sel);display:flex;flex-direction:column;padding:0 20px 28px;overflow:auto}
.tiroir-tete{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:58px;border-bottom:1px solid var(--trait);margin:0 -20px;padding:0 14px}
.tiroir-tete img{width:150px;justify-self:center}
.tiroir-tete .compte{justify-self:end;display:flex;gap:6px;align-items:center}
.tiroir-liens{display:grid;padding-top:18px}
.tiroir-liens a{font:400 34px/1.2 var(--serif);padding:8px 0;border-bottom:1px solid var(--trait)}
.tiroir-liens a.sous{font:400 15px/1 var(--sans);padding:12px 0 12px 16px;border-bottom:0;color:#3a3732}
.tiroir-liens a.sous:last-of-type{border-bottom:1px solid var(--trait);padding-bottom:20px}
.tiroir-pied{margin-top:auto;display:grid;gap:12px;padding-top:30px;font-size:14px;color:var(--pierre)}
@media (min-width:761px){.tiroir{display:none!important}}

/* Confirmation d'ajout */
.confirmation{position:fixed;inset:0;z-index:70;background:rgba(18,18,18,.45);display:flex;align-items:flex-end;justify-content:center}
.conf-boite{background:var(--sel);width:min(520px,100%);padding:30px 26px 28px;display:grid;gap:12px}
.conf-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.conf-actions .btn{padding:0 12px}
@media (min-width:761px){.confirmation{align-items:center}}

/* Panier dynamique */
.mode{width:100%;text-align:left;background:#fff;cursor:pointer}
.qte button{width:38px;height:36px;font-size:16px}
.retirer{font-size:12px;color:var(--pierre);text-decoration:underline;margin-left:16px}
.ajout-suggestion .plus{background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.article .nom{display:block}

@media (max-width:760px){
  .galerie{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .galerie::-webkit-scrollbar{display:none}
  .galerie .g{scroll-snap-align:start}
}

/* Pages Les dessins et Notre histoire */
.dessins{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 28px}
.dessin .vis{aspect-ratio:4/5;overflow:hidden;background:var(--sable);display:block}
.dessin .vis.plat{background:#fff}
.dessin h2{font:400 34px/1.05 var(--serif);margin:20px 0 6px}
.dessin .auteur{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--klein)}
.dessin .auteur.vide{color:var(--pierre)}
.dessin p.txt{margin:12px 0 14px;font-size:15px;color:#3a3732;max-width:42ch}
.dessin .sur{display:flex;flex-wrap:wrap;gap:6px}
.dessin .sur a{font-size:12.5px;border:1px solid var(--trait);border-radius:16px;padding:6px 12px;background:#fff}
.chapitre{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;padding:110px var(--marge)}
.chapitre.inverse .vis{order:2}
.chapitre .vis{aspect-ratio:4/5;overflow:hidden}
.chapitre .h1{margin:16px 0 22px}
.chapitre .lead+.lead{margin-top:14px}
.faits{display:grid;gap:10px;margin-top:26px;font-size:14.5px}
.faits div{display:grid;grid-template-columns:140px 1fr;gap:14px;border-top:1px solid var(--trait);padding-top:10px}
.faits b{font-weight:600}
.aide{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.aide h3{font:400 28px/1.1 var(--serif);margin-bottom:14px}
.aide ul{list-style:none;display:grid;gap:10px;font-size:14.5px;line-height:1.5}
.aide li{border-top:1px solid var(--trait);padding-top:10px}
.heros-simple{position:relative;height:78vh;min-height:560px;color:#fff;overflow:hidden}
.heros-simple img{position:absolute;inset:0}
.heros-simple::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%)}
.heros-simple .contenu-h{position:absolute;z-index:2;left:var(--marge);right:var(--marge);bottom:64px;max-width:760px}
.heros-simple .kicker{color:rgba(255,255,255,.85)}
.heros-simple .display{margin:14px 0 16px}
.heros-simple p{font-size:17px;color:rgba(255,255,255,.92);max-width:560px}
@media (max-width:760px){
  .dessins{grid-template-columns:1fr;gap:48px}
  .dessin h2{font-size:30px}
  .chapitre{grid-template-columns:1fr;gap:30px;padding:64px var(--marge)}
  .chapitre.inverse .vis{order:0}
  .faits div{grid-template-columns:1fr;gap:2px}
  .aide{grid-template-columns:1fr;gap:34px}
  .heros-simple{height:80vh;min-height:0}
  .heros-simple .contenu-h{bottom:36px}
  .heros-simple .display{font-size:50px}
}

.motif,.carte-dessin{display:block}
.puce{background:none;cursor:pointer;font:inherit;font-size:13px}
.puce.on{background:var(--encre)}

html{scroll-behavior:smooth}
.idee{display:block}
.budget,.taille-aide{scroll-margin-top:20px}

.tiroir-tete img{height:auto}