/* ============================================================
   AMS MAILLOT — feuille de style
   DA : e-commerce clair façon boutique de maillots, blanc os,
   encre teintée, vert pelouse, accent terre battue.
   Typo : Clash Display (titres) + Satoshi (corps), via Fontshare.
   ============================================================ */

:root{
  --bg:        #f6f4ee;
  --paper:     #fffdf7;
  --ink:       #14171a;
  --ink-soft:  #4b5157;
  --line:      #e3dfd4;
  --green:     #0d6b3d;
  --green-ink: #0a5330;
  --clay:      #d95b2b;
  --gold:      #e0b13a;
  --night:     #101b16;
  --radius:    14px;
  --font-display: "Clash Display", "Arial Black", sans-serif;
  --font-body:    "Satoshi", "Segoe UI", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* Smooth CSS uniquement en secours : si Lenis pilote le scroll (html.lenis),
   on laisse le natif pour éviter un double lissage qui ralentit tout. */
html:not(.lenis){ scroll-behavior:smooth; }
html.lenis{ height:auto; scroll-behavior:auto; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--green); color:#fdfcf6; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-.01em; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px, 4vw, 40px); }

/* ---------- Barre d'annonce ---------- */
.annonce{
  background:var(--night); color:#e9f2ec;
  font-size:13px; letter-spacing:.04em;
  text-align:center; padding:9px 14px;
}
.annonce strong{ color:var(--gold); font-weight:700; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,253,247,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-in{
  display:flex; align-items:center; gap:28px;
  height:68px;
}
.logo{
  font-family:var(--font-display); font-weight:700;
  font-size:21px; letter-spacing:.02em; white-space:nowrap;
}
.logo .dot{ color:var(--green); }
.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  font-size:14.5px; font-weight:500; color:var(--ink-soft);
  padding:6px 0; position:relative; transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after, .nav a.actif::after{ transform:scaleX(1); }
.nav a.actif{ color:var(--ink); }

.cart-btn{
  margin-left:8px; display:flex; align-items:center; gap:8px;
  background:var(--ink); color:#fdfcf6; border:0;
  padding:10px 18px; border-radius:999px;
  font-size:14px; font-weight:600; transition:background .2s, transform .2s;
}
.cart-btn:hover{ background:var(--green); transform:translateY(-1px); }
.cart-count{
  background:var(--gold); color:var(--ink);
  min-width:20px; height:20px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; padding:0 5px;
}
.burger{ display:none; background:none; border:0; width:42px; height:42px; margin-left:auto; }
.burger span{ display:block; height:2px; background:var(--ink); margin:5px 8px; border-radius:2px; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--night); }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,27,22,.25) 0%, rgba(16,27,22,.72) 82%);
}
.hero-in{
  position:relative; z-index:2; color:#f4f6f1;
  padding-block:clamp(90px, 14vw, 170px) clamp(70px, 10vw, 130px);
}
.hero-sur{
  display:inline-block; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(40px, 7.2vw, 92px); color:#fdfcf6;
  max-width:13ch;
}
.hero h1 em{ font-style:normal; color:#8fd6ae; }
.hero p{
  margin-top:22px; max-width:52ch; font-size:clamp(15px, 1.6vw, 18px);
  color:#cfd8d0;
}
.hero-cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px; border:0;
  font-size:15px; font-weight:600; transition:transform .2s, background .2s, color .2s;
}
.btn-vert{ background:var(--green); color:#fdfcf6; }
.btn-vert:hover{ background:#0f7d48; transform:translateY(-2px); }
.btn-clair{ background:#fdfcf6; color:var(--ink); }
.btn-clair:hover{ background:var(--gold); transform:translateY(-2px); }
.btn-ligne{ background:transparent; color:#fdfcf6; box-shadow:inset 0 0 0 1.5px rgba(253,252,246,.5); }
.btn-ligne:hover{ box-shadow:inset 0 0 0 1.5px var(--gold); color:var(--gold); }

/* ---------- Marquee équipes & pays ---------- */
.marquee-zone{ background:var(--paper); border-bottom:1px solid var(--line); padding:26px 0; }
.marquee{ overflow:hidden; white-space:nowrap; position:relative; }
.marquee + .marquee{ margin-top:14px; }
.marquee-track{ display:inline-flex; align-items:center; will-change:transform; }
.marquee-a .marquee-track{ animation:defile 42s linear infinite; }
.marquee-b .marquee-track{ animation:defile-inv 46s linear infinite; }
.marquee-item{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(17px, 2.2vw, 24px); color:var(--ink);
  padding:0 clamp(18px, 3vw, 34px);
}
.marquee-item i{
  width:11px; height:11px; border-radius:50%;
  background:var(--pastille, var(--green)); flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.marquee-b .marquee-item{ color:var(--ink-soft); font-size:clamp(15px, 1.9vw, 20px); }
@keyframes defile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes defile-inv{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------- Sections ---------- */
.section{ padding:clamp(56px, 9vw, 110px) 0; }
.section-tete{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(28px, 4vw, 46px);
}
.section-tete h2{ font-size:clamp(28px, 4.2vw, 52px); max-width:18ch; }
.section-tete .lien-tout{
  font-weight:600; font-size:15px; color:var(--green-ink);
  border-bottom:2px solid var(--green); padding-bottom:2px;
  white-space:nowrap; transition:color .2s;
}
.section-tete .lien-tout:hover{ color:var(--clay); border-color:var(--clay); }
.sous-titre{ color:var(--ink-soft); max-width:60ch; margin-top:10px; font-size:16px; }

/* ---------- Grille produits ---------- */
.grille{
  display:grid; gap:clamp(14px, 2vw, 24px);
  grid-template-columns:repeat(4, 1fr);
}
.carte{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.carte:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -18px rgba(20,23,26,.25); }
.carte-visu{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.carte-visu img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.carte:hover .carte-visu img{ transform:scale(1.05); }

/* Tuile graphique en attendant la photo du client */
.tuile{
  width:100%; height:100%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.055) 26px 52px),
    linear-gradient(150deg, var(--c1) 0%, var(--c1) 46%, var(--c2) 46.5%, var(--c2) 100%);
}
.tuile b{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px, 4vw, 44px); letter-spacing:.04em;
  color:rgba(255,255,255,.92); text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.tuile.sombre b{ color:rgba(255,255,255,.9); }
.tuile::after{
  content:""; position:absolute; inset:12px;
  border:1px solid rgba(255,255,255,.28); border-radius:10px;
  pointer-events:none;
}

.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--clay); color:#fff7ee;
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px;
}
.badge.nouveau{ background:var(--green); }

.carte-corps{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:5px; flex:1; }
.carte-groupe{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.carte-nom{ font-size:16px; font-weight:700; line-height:1.3; }
.carte-pied{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.carte-prix{ font-family:var(--font-display); font-weight:600; font-size:19px; }
.carte-prix small{ display:block; font-family:var(--font-body); font-weight:500; font-size:11.5px; color:var(--ink-soft); }
.btn-carte{
  background:var(--ink); color:#fdfcf6; border:0;
  padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  transition:background .2s;
}
.btn-carte:hover{ background:var(--green); }

/* ---------- Bandeau Pack Été ---------- */
.pack{
  position:relative; overflow:hidden;
  background:var(--night); color:#eef3ee; border-radius:0;
}
.pack-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.pack-in{
  position:relative; z-index:2;
  padding-block:clamp(60px, 9vw, 110px);
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px, 5vw, 70px); align-items:center;
}
.pack-tag{
  display:inline-block; background:var(--gold); color:var(--ink);
  font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.pack h2{ font-size:clamp(32px, 5vw, 64px); color:#fdfcf6; }
.pack h2 em{ font-style:normal; color:var(--gold); }
.pack p{ margin-top:16px; color:#c9d4cb; max-width:48ch; }
.pack-detail{ margin-top:22px; display:grid; gap:10px; }
.pack-detail li{
  list-style:none; display:flex; gap:12px; align-items:baseline;
  font-size:15.5px; color:#e6ece5;
}
.pack-detail li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; transform:translateY(-1px); }
.pack-cta{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }

.compte{
  background:rgba(253,252,246,.06); border:1px solid rgba(253,252,246,.16);
  border-radius:var(--radius); padding:clamp(22px, 3vw, 36px); text-align:center;
  backdrop-filter:blur(4px);
}
.compte-titre{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#b9c6bb; font-weight:600; }
.compte-grille{ margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.compte-case b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px, 3.4vw, 42px); color:#fdfcf6;
}
.compte-case span{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#9fb0a2; }
.compte-prix{
  margin-top:20px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px, 4.6vw, 54px); color:var(--gold);
}
.compte-prix small{ display:block; font-family:var(--font-body); font-size:13px; font-weight:500; color:#b9c6bb; }

/* ---------- Cartes catégories ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px, 2vw, 24px); }
.cat-carte{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; display:flex; align-items:flex-end;
  border:1px solid var(--line); transition:transform .25s, box-shadow .25s;
}
.cat-carte:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -18px rgba(20,23,26,.3); }
.cat-fond{ position:absolute; inset:0; }
.cat-carte::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(12,16,13,.82));
}
.cat-corps{ position:relative; z-index:2; padding:22px; color:#fdfcf6; }
.cat-corps h3{ font-size:clamp(20px, 2.4vw, 28px); }
.cat-corps p{ font-size:14px; color:#d4dcd4; margin-top:4px; }
.cat-prix{
  display:inline-block; margin-top:10px; background:rgba(253,252,246,.14);
  border:1px solid rgba(253,252,246,.3); border-radius:999px;
  font-size:13px; font-weight:600; padding:5px 13px;
}

/* ---------- Personnalisation ---------- */
.perso{ background:var(--paper); border-block:1px solid var(--line); }
.perso-in{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 70px);
  align-items:center; padding-block:clamp(56px, 8vw, 100px);
}
.perso-visu{ border-radius:var(--radius); overflow:hidden; position:relative; }
.perso-visu img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.perso h2{ font-size:clamp(28px, 4vw, 48px); }
.perso-etapes{ margin-top:26px; display:grid; gap:0; counter-reset:etape; }
.perso-etape{
  display:flex; gap:18px; padding:16px 0;
  border-bottom:1px solid var(--line);
}
.perso-etape:last-child{ border-bottom:0; }
.perso-etape::before{
  counter-increment:etape; content:"0" counter(etape);
  font-family:var(--font-display); font-weight:700; font-size:22px;
  color:var(--green); flex:none; width:44px;
}
.perso-etape b{ display:block; font-size:16px; }
.perso-etape span{ font-size:14.5px; color:var(--ink-soft); }

/* ---------- Vous ne trouvez pas ---------- */
.introuvable{
  background:linear-gradient(160deg, var(--green-ink), var(--green) 65%, #0f7d48);
  color:#f0f6f0; border-radius:var(--radius);
  padding:clamp(34px, 5vw, 64px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px, 4vw, 56px);
  align-items:center;
}
.introuvable h2{ font-size:clamp(26px, 3.6vw, 44px); color:#fdfcf6; }
.introuvable p{ margin-top:14px; color:#d7e6d8; max-width:50ch; }
.form-libre{ display:grid; gap:12px; }
.form-libre label{ font-size:13px; font-weight:600; letter-spacing:.04em; }
.form-libre input[type="text"], .form-libre textarea{
  width:100%; border:0; border-radius:10px; padding:13px 15px;
  font-family:inherit; font-size:15px; background:#fdfcf6; color:var(--ink);
}
.form-libre textarea{ min-height:86px; resize:vertical; }
.fichier{
  display:flex; align-items:center; gap:12px;
  background:rgba(253,252,246,.1); border:1.5px dashed rgba(253,252,246,.4);
  border-radius:10px; padding:12px 15px; cursor:pointer; transition:background .2s;
  font-size:14px;
}
.fichier:hover{ background:rgba(253,252,246,.18); }
.fichier input{ display:none; }
.fichier img{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
.note-photo{ font-size:12.5px; color:#c9dcca; }

/* ---------- Réassurance livraison ---------- */
.reassurance{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px, 2vw, 24px); }
.re-item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px;
}
.re-item b{ font-family:var(--font-display); font-weight:600; font-size:19px; display:block; }
.re-item span{ font-size:14.5px; color:var(--ink-soft); display:block; margin-top:8px; }
.re-item .re-chiffre{
  font-family:var(--font-display); font-weight:700; font-size:34px;
  color:var(--green); display:block; margin-bottom:10px;
}

/* ---------- Footer ---------- */
.footer{ background:var(--night); color:#c3cfc5; margin-top:clamp(56px, 9vw, 110px); }
.footer-in{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(24px, 4vw, 56px); padding-block:clamp(48px, 7vw, 80px) 40px;
}
.footer .logo{ color:#fdfcf6; font-size:24px; }
.footer-pitch{ margin-top:14px; font-size:14.5px; max-width:34ch; }
.footer h4{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#8fa392; margin-bottom:16px; font-weight:700;
}
.footer ul{ list-style:none; display:grid; gap:9px; }
.footer a{ font-size:14.5px; transition:color .2s; }
.footer a:hover{ color:var(--gold); }
.footer-wa{
  display:inline-flex; align-items:center; gap:10px; margin-top:6px;
  background:var(--green); color:#fdfcf6; padding:12px 20px;
  border-radius:999px; font-weight:600; font-size:14.5px; transition:background .2s;
}
.footer-wa:hover{ background:#0f7d48; color:#fdfcf6; }
.footer-bas{
  border-top:1px solid rgba(195,207,197,.15);
  padding:20px 0 26px; display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between; font-size:13.5px;
}
.credit-mc{
  color:var(--gold); font-weight:700; letter-spacing:.02em;
}
.credit-mc:hover{ text-decoration:underline; }

/* ---------- Page boutique ---------- */
.page-tete{ padding-block:clamp(44px, 7vw, 80px) clamp(20px, 3vw, 36px); }
.page-tete h1{ font-size:clamp(34px, 5.4vw, 68px); }
.filtres{
  position:sticky; top:68px; z-index:40;
  background:rgba(246,244,238,.94); backdrop-filter:blur(10px);
  padding:14px 0; border-bottom:1px solid var(--line); margin-bottom:clamp(24px, 4vw, 40px);
}
.filtres-in{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chip{
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft);
  padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  transition:all .2s;
}
.chip:hover{ border-color:var(--green); color:var(--green-ink); }
.chip.actif{ background:var(--ink); border-color:var(--ink); color:#fdfcf6; }
.recherche{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:999px;
  padding:8px 16px; min-width:210px;
}
.recherche input{ border:0; outline:0; background:none; font-family:inherit; font-size:14px; width:100%; color:var(--ink); }
.compteur-resultats{ font-size:13.5px; color:var(--ink-soft); margin:0 0 18px; }
.grille-vide{ grid-column:1 / -1; text-align:center; color:var(--ink-soft); padding:50px 16px; font-size:15px; line-height:1.7; }

/* ---------- Modale produit ---------- */
.voile{
  position:fixed; inset:0; z-index:90; background:rgba(16,23,19,.55);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.voile.ouvert{ opacity:1; pointer-events:auto; }
.modale{
  position:fixed; z-index:95; inset:auto 0 0 0; margin:0 auto;
  width:min(920px, 100%); max-height:92dvh; overflow:auto;
  background:var(--paper); border-radius:18px 18px 0 0;
  transform:translateY(102%); transition:transform .35s cubic-bezier(.32,.72,.28,1);
}
.modale.ouvert{ transform:translateY(0); }
@media (min-width:960px){
  .modale{ inset:50% auto auto 50%; transform:translate(-50%, -46%); opacity:0; pointer-events:none; border-radius:18px; transition:opacity .25s, transform .3s; }
  .modale.ouvert{ opacity:1; pointer-events:auto; transform:translate(-50%, -50%); }
}
.modale-in{ display:grid; grid-template-columns:1fr 1.2fr; }
.modale-visu{ position:relative; min-height:320px; }
.modale-visu .tuile, .modale-visu img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.modale-corps{ padding:clamp(22px, 3vw, 34px); }
.modale-fermer{
  position:absolute; top:14px; right:14px; z-index:5;
  width:38px; height:38px; border-radius:50%; border:0;
  background:var(--ink); color:#fdfcf6; font-size:17px; line-height:1;
}
.modale-fermer:hover{ background:var(--clay); }
.modale-corps h3{ font-size:clamp(22px, 2.6vw, 30px); padding-right:30px; }
.modale-groupe{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-bottom:6px; }
.modale-prix{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--green-ink); margin-top:8px; }

.opt{ margin-top:20px; }
.opt-titre{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; display:flex; justify-content:space-between; }
.opt-titre .opt-plus{ color:var(--clay); text-transform:none; letter-spacing:0; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  border:1.5px solid var(--line); background:var(--paper);
  min-width:52px; padding:9px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ink-soft); transition:all .15s;
}
.pill:hover{ border-color:var(--ink); color:var(--ink); }
.pill.actif{ background:var(--ink); border-color:var(--ink); color:#fdfcf6; }

.commutateur{ display:flex; align-items:center; gap:12px; }
.commutateur input{ position:absolute; opacity:0; }
.commutateur .rail{
  width:48px; height:27px; border-radius:999px; background:var(--line);
  position:relative; transition:background .2s; flex:none; cursor:pointer;
}
.commutateur .rail::after{
  content:""; position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:50%; background:#fff; transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.commutateur input:checked + .rail{ background:var(--green); }
.commutateur input:checked + .rail::after{ transform:translateX(21px); }
.commutateur input:focus-visible + .rail{ outline:2px solid var(--green); outline-offset:2px; }

.champs-flocage{ display:grid; grid-template-columns:1.5fr 1fr; gap:10px; margin-top:12px; }
.champs-flocage input{
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:inherit; font-size:15px; background:#fff; color:var(--ink); width:100%;
}
.champs-flocage input:focus{ outline:2px solid var(--green); border-color:var(--green); }

.qte{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.qte button{ width:40px; height:40px; border:0; background:var(--paper); font-size:18px; font-weight:700; color:var(--ink); }
.qte button:hover{ background:var(--line); }
.qte b{ min-width:40px; text-align:center; font-size:16px; }

.modale-pied{ margin-top:26px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn-ajout{ flex:1; justify-content:center; background:var(--green); color:#fdfcf6; min-width:200px; }
.btn-ajout:hover{ background:#0f7d48; }

/* ---------- Panier (tiroir) ---------- */
.tiroir{
  position:fixed; top:0; right:0; bottom:0; z-index:95;
  width:min(460px, 100%); background:var(--paper);
  transform:translateX(103%); transition:transform .35s cubic-bezier(.32,.72,.28,1);
  display:flex; flex-direction:column;
}
.tiroir.ouvert{ transform:translateX(0); }
.tiroir-tete{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--line);
}
.tiroir-tete h3{ font-size:20px; }
.tiroir-corps{ flex:1; overflow:auto; padding:18px 24px; }
.panier-vide{ text-align:center; color:var(--ink-soft); padding:60px 10px; }
.panier-vide b{ display:block; font-family:var(--font-display); font-size:20px; color:var(--ink); margin-bottom:8px; }

.ligne{
  display:grid; grid-template-columns:64px 1fr auto; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.ligne-visu{ width:64px; height:80px; border-radius:8px; overflow:hidden; position:relative; }
.ligne-visu .tuile b{ font-size:15px; }
.ligne-visu .tuile::after{ inset:4px; }
.ligne-nom{ font-weight:700; font-size:14.5px; line-height:1.35; }
.ligne-detail{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
.ligne-prix{ font-weight:700; font-size:15px; text-align:right; }
.ligne-actions{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.ligne-actions .qte button{ width:30px; height:30px; font-size:15px; }
.ligne-actions .qte b{ min-width:28px; font-size:14px; }
.ligne-suppr{ background:none; border:0; font-size:12.5px; color:var(--clay); font-weight:600; text-decoration:underline; }

.tiroir-pied{ border-top:1px solid var(--line); padding:18px 24px 22px; background:var(--bg); }
.total-ligne{ display:flex; justify-content:space-between; font-size:14.5px; color:var(--ink-soft); padding:3px 0; }
.total-ligne.grand{ font-size:19px; color:var(--ink); font-weight:700; padding-top:10px; }
.total-ligne.grand span:last-child{ font-family:var(--font-display); }
.btn-commander{ width:100%; justify-content:center; margin-top:14px; background:var(--green); color:#fdfcf6; }
.btn-commander:hover{ background:#0f7d48; }
.note-paiement{ font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:10px; }

/* ---------- Étape coordonnées ---------- */
.form-co{ display:grid; gap:12px; }
.form-co label{ font-size:13px; font-weight:700; }
.form-co input, .form-co textarea, .form-co select{
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:inherit; font-size:15px; background:#fff; color:var(--ink); width:100%;
}
.form-co input:focus, .form-co textarea:focus{ outline:2px solid var(--green); border-color:var(--green); }
.radio-livraison{ display:grid; gap:10px; }
.radio-livraison label{
  display:flex; gap:12px; align-items:flex-start; font-weight:500; font-size:14.5px;
  border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; cursor:pointer;
  transition:border-color .2s, background .2s; background:#fff;
}
.radio-livraison label:has(input:checked){ border-color:var(--green); background:#f0f7f1; }
.radio-livraison input{ width:auto; margin-top:3px; accent-color:var(--green); }
.radio-livraison b{ display:block; font-size:14.5px; }
.radio-livraison span{ font-size:12.5px; color:var(--ink-soft); }
.retour-panier{ background:none; border:0; font-size:13.5px; color:var(--ink-soft); text-decoration:underline; margin-bottom:6px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:99;
  transform:translate(-50%, 120%); transition:transform .3s cubic-bezier(.32,.72,.28,1);
  background:var(--ink); color:#fdfcf6; font-size:14.5px; font-weight:600;
  padding:13px 22px; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.25);
  display:flex; gap:10px; align-items:center; max-width:calc(100vw - 32px);
}
.toast.visible{ transform:translate(-50%, 0); }
.toast i{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; }

/* ---------- Page Pack Été ---------- */
.pack-form{
  display:grid; gap:clamp(18px, 2.6vw, 28px);
  max-width:860px;
}
.pack-bloc{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px, 3vw, 30px);
}
.pack-bloc > h3{ font-size:20px; margin-bottom:4px; }
.pack-bloc > .pack-bloc-sous{ font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; }
.pack-champ{ display:grid; gap:8px; margin-top:14px; }
.pack-champ label{ font-size:13px; font-weight:700; }
.pack-champ select, .pack-champ input{
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:inherit; font-size:15px; background:#fff; color:var(--ink); width:100%;
}
.pack-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pack-total{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--night); color:#fdfcf6; border-radius:var(--radius);
  padding:22px clamp(20px, 3vw, 30px);
}
.pack-total b{ font-family:var(--font-display); font-size:34px; color:var(--gold); }

/* ---------- 404 ---------- */
.page-404{ min-height:70vh; display:flex; align-items:center; }
.page-404 h1{ font-size:clamp(60px, 12vw, 140px); color:var(--green); }
.page-404 p{ color:var(--ink-soft); margin:14px 0 28px; }

/* ---------- Reveals (JS ajoute .rv-init seulement si GSAP est chargé) ---------- */
.rv{ opacity:1; transform:none; }

/* ---------- Accessibilité & divers ---------- */
:focus-visible{ outline:2.5px solid var(--green); outline-offset:3px; border-radius:4px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .grille{ grid-template-columns:repeat(3, 1fr); }
  .footer-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav{
    position:fixed; inset:68px 0 auto 0; z-index:59;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:10px 0;
    transform:translateY(calc(-100% - 70px)); transition:transform .3s;
    visibility:hidden;
  }
  .nav.ouvert{ visibility:visible; }
  .nav.ouvert{ transform:translateY(0); }
  .nav a{ padding:14px clamp(16px,4vw,40px); font-size:16px; }
  .nav a::after{ display:none; }
  .burger{ display:block; }
  .cart-btn{ margin-left:0; }
  .cart-btn .cart-txt{ display:none; }
  .pack-in, .perso-in, .introuvable{ grid-template-columns:1fr; }
  .modale-in{ grid-template-columns:1fr; }
  .modale-visu{ min-height:200px; aspect-ratio:16/9; }
  .reassurance{ grid-template-columns:1fr 1fr; }
  .cats{ grid-template-columns:1fr; }
  .cat-carte{ aspect-ratio:16/9; }
}
@media (max-width:640px){
  .grille{ grid-template-columns:repeat(2, 1fr); }
  .carte-corps{ padding:12px; }
  .carte-nom{ font-size:14px; }
  .btn-carte{ padding:8px 12px; font-size:12.5px; }
  .carte-prix{ font-size:16px; }
  .section-tete{ flex-direction:column; align-items:flex-start; gap:10px; }
  .recherche{ margin-left:0; width:100%; }
  .footer-in{ grid-template-columns:1fr; gap:30px; }
  .reassurance{ grid-template-columns:1fr; }
  .pack-2col, .champs-flocage{ grid-template-columns:1fr; }
  .compte-grille{ grid-template-columns:repeat(4,1fr); gap:6px; }
}

/* ============================================================
   OPTIMISATION MOBILE & TACTILE — iPhone / Android, portrait
   ET paysage. Zones tactiles ≥44px, anti-zoom iOS sur les
   champs, gestion de l'encoche (safe-area-inset), hauteurs
   dynamiques (dvh) et aplatissement des marges en paysage.
   ============================================================ */

/* Confort tactile global (toutes tailles) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button, .chip, .pill, label, summary, input{ -webkit-tap-highlight-color:transparent; }
.tiroir-corps, .modale, .nav{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* Encoche : le contenu suit toujours la zone sûre de l'écran
   (nécessite viewport-fit=cover dans le <meta viewport>). En
   portrait sans encoche, les insets valent 0 : aucun impact. */
.wrap{
  padding-left:max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
  padding-right:max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
}
.tiroir{ padding-right:env(safe-area-inset-right); }
.tiroir-pied{ padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
.modale{ padding-bottom:env(safe-area-inset-bottom); }
.toast{ bottom:calc(26px + env(safe-area-inset-bottom)); }

/* Écrans tactiles (≤860px) : champs à 16px = pas de zoom auto
   iOS au focus, et zones tactiles confortables. */
@media (max-width:860px){
  input, textarea, select,
  .recherche input, .form-co input, .form-co textarea, .form-co select{ font-size:16px; }
  .btn-carte{ min-height:44px; }
  .cart-btn{ min-height:44px; }
  .burger{ width:44px; height:44px; }
  .chip{ min-height:42px; display:inline-flex; align-items:center; }
  .modale-fermer{ width:44px; height:44px; font-size:19px; }
  .ligne-actions .qte button{ width:34px; height:34px; }
  .nav{ max-height:calc(100dvh - 68px); overflow-y:auto; }
  .logo{ padding-block:6px; }
}

/* Très petits écrans (iPhone SE, petits Android) */
@media (max-width:360px){
  .grille{ gap:12px; }
  .cart-btn{ padding:10px 12px; }
  .annonce{ font-size:12px; letter-spacing:.02em; }
  .hero h1{ font-size:34px; }
}

/* PAYSAGE mobile : on aplatit les grands espacements verticaux
   pour que le contenu tienne à l'écran (hauteur réduite). */
@media (orientation:landscape) and (max-height:500px){
  .annonce{ padding:6px 12px; font-size:12px; }
  .hero-in{ padding-block:42px 34px; }
  .hero h1{ font-size:clamp(30px, 6.4vw, 52px); }
  .hero p{ margin-top:14px; }
  .hero-cta{ margin-top:22px; }
  .marquee-zone{ padding:16px 0; }
  .section{ padding:46px 0; }
  .page-tete{ padding-block:30px 14px; }
  .modale{ max-height:100dvh; border-radius:0; }
  .nav{ max-height:calc(100dvh - 68px); overflow-y:auto; }
}