/* =============================================================
   LE BON PORC — feuille de style
   Conception mobile d'abord : les règles de base visent le
   téléphone, les media queries élargissent ensuite.
   ============================================================= */

/* ---------- Polices auto-hébergées (aucun appel externe) ----- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Variables ---------------------------------------- */
:root {
  --bord:  #7B1E2E;
  --bordL: #9B2E42;
  --bordD: #5A1520;
  --bordX: #3D0C18;
  --rose:  #F4C2C2;
  --roseV: #FBE3E3;
  --chair: #E8A0A0;
  --creme: #FDF5F0;
  --blanc: #FFFFFF;
  --gris:  #5B616B;   /* assombri par rapport à la maquette : lisible sur blanc */
  --grisL: #E9E2DE;
  --noir:  #1A0A0A;
  --vert:  #15803D;
  --vertF: #F0FDF4;
  --vertB: #22C55E;
  --rouge: #B91C1C;
  --rougeF:#FEF2F2;
  --wa:    #25D366;
  --waD:   #128C7E;

  --titre: 'Oswald', 'Arial Narrow', sans-serif;
  --texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --nav-h: 62px;
  --rayon: 12px;
  --ombre: 0 4px 20px rgba(26, 10, 10, .09);
  --ombreF: 0 10px 40px rgba(26, 10, 10, .18);
  --transition: .22s ease;
}

/* ---------- Base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Un display: flex/grid déclaré plus loin l'emporterait sur le
   display:none implicite de [hidden] : on verrouille le comportement,
   sans quoi les éléments masqués par le script restent visibles. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir);
  background: var(--blanc);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bord); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: 3px solid var(--bordL);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav :focus-visible, .tiroir :focus-visible, footer :focus-visible {
  outline-color: var(--rose);
}

/* Lien d'évitement pour la navigation au clavier */
.evitement {
  position: absolute; left: 8px; top: -60px; z-index: 300;
  background: var(--blanc); color: var(--bord); font-weight: 700;
  padding: .7rem 1.2rem; border-radius: 8px; text-decoration: none;
  transition: top var(--transition);
}
.evitement:focus { top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================
   NAVIGATION
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: var(--bord);
  display: flex; align-items: center; gap: .6rem;
  padding: 0 4vw;
  box-shadow: 0 2px 14px rgba(123, 30, 46, .35);
  transition: box-shadow var(--transition);
}
.nav.defile { box-shadow: 0 4px 24px rgba(123, 30, 46, .55); }

.nav-logo {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; margin-right: auto; flex-shrink: 0;
}
.nav-logo img {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: var(--blanc);
}
.nav-logo-txt {
  font-family: var(--titre); font-weight: 700; font-size: 1.02rem;
  color: var(--blanc); letter-spacing: .03em; line-height: 1.1;
}
.nav-logo-txt span { color: var(--rose); }

.nav-liens { display: none; }

/* Bouton panier de la barre de navigation */
.nav-panier {
  position: relative; display: flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .5rem .85rem; white-space: nowrap; flex-shrink: 0;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px; color: var(--blanc);
  font-size: .84rem; font-weight: 600;
  transition: background var(--transition);
}
.nav-panier:hover { background: rgba(255, 255, 255, .24); }
.nav-panier-txt { display: none; }
.badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  background: var(--rose); color: var(--bordD);
  border-radius: 11px; font-size: .72rem; font-weight: 800;
  display: grid; place-items: center;
}

.nav-burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
}
.nav-burger span {
  display: block; width: 20px; height: 2px; background: var(--blanc);
  position: relative; transition: background var(--transition);
}
.nav-burger span::before, .nav-burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--blanc); transition: transform var(--transition);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menu déroulant mobile */
.menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: var(--bordD);
  list-style: none;
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
}
.menu.deploye { max-height: 420px; }
.menu a {
  display: block; padding: .95rem 5vw;
  color: rgba(255, 255, 255, .92); text-decoration: none;
  font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.menu a:hover, .menu a:focus { background: rgba(255, 255, 255, .08); color: var(--rose); }

/* =============================================================
   BANDEAU D'ÉTAT DE LA FENÊTRE DE COMMANDE
   ============================================================= */
.bandeau {
  margin-top: var(--nav-h);
  padding: .7rem 5vw;
  font-size: .84rem; line-height: 1.45; text-align: center;
}
.bandeau.ouvert { background: var(--vertF); color: #14532D; border-bottom: 1px solid #BBF7D0; }
.bandeau.urgent { background: #FEF3C7; color: #92400E; border-bottom: 1px solid #FDE68A; }
.bandeau.ferme  { background: var(--rougeF); color: var(--rouge); border-bottom: 1px solid #FECACA; }

/* =============================================================
   HERO
   ============================================================= */
/* Photo de viande en fond, recouverte d'un voile bordeaux dense :
   l'image donne l'appétit, le voile garantit la lisibilité du texte
   (contraste conservé bien au-delà du seuil d'accessibilité). */
.hero {
  background:
    linear-gradient(160deg, rgba(90, 21, 32, .94) 0%, rgba(123, 30, 46, .90) 45%, rgba(61, 12, 24, .96) 100%),
    url('img/hero.jpg') center / cover no-repeat,
    var(--bordD);
  position: relative; overflow: hidden;
  padding: 3rem 5vw 3.5rem;
  text-align: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hero-logo {
  width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 1.2rem;
  border: 4px solid rgba(255, 255, 255, .28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  background: var(--blanc);
}
.hero-badge {
  display: inline-block; margin-bottom: 1rem;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
  color: var(--rose);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: 100px;
}
.hero h1 {
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.06;
  color: var(--blanc); margin-bottom: .9rem;
}
.hero h1 .accent { color: var(--rose); }
.hero-sub {
  color: rgba(255, 255, 255, .86);
  font-size: 1rem; line-height: 1.65;
  max-width: 560px; margin: 0 auto 1.6rem;
}
.hero-btns { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 2rem; }

/* ---------- Boutons ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .8rem 1.6rem;
  border-radius: 9px; text-decoration: none;
  font-family: var(--titre); font-weight: 700; font-size: 1rem;
  letter-spacing: .01em; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-clair { background: var(--blanc); color: var(--bord); box-shadow: 0 4px 18px rgba(0, 0, 0, .22); }
.btn-bord { background: var(--bord); color: var(--blanc); box-shadow: var(--ombre); }
.btn-bord:hover { background: var(--bordL); }
.btn-vide { border: 2px solid rgba(255, 255, 255, .5); color: var(--blanc); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Bouton WhatsApp — fond crème et texte bordeaux plutôt que le vert vif
   de la marque, qui entrait en conflit avec le bordeaux du site.
   Le vert ne subsiste que dans le petit logo, comme repère. */
.btn-wa {
  background: var(--creme); color: var(--bord);
  border: 1px solid rgba(123, 30, 46, .12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.btn-wa:hover { background: var(--blanc); }

/* Logo WhatsApp officiel, seul élément vert conservé */
.ico-wa {
  width: 20px; height: 20px; flex-shrink: 0;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488'/%3E%3C/svg%3E");
}

/* ---------- Compte à rebours --------------------------------- */
.rebours {
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--rayon);
  padding: 1.1rem 1rem; max-width: 460px; margin: 0 auto;
  transition: border-color var(--transition);
}
.rebours.urgent { border-color: var(--rose); background: rgba(0, 0, 0, .34); }
.rebours-titre {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rose); margin-bottom: .7rem;
  line-height: 1.4; overflow-wrap: anywhere;   /* jamais coupé sur petit écran */
}
.rebours-unites { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.rebours-unite { min-width: 56px; }
.rebours-num {
  font-family: var(--titre); font-weight: 700; font-size: 1.9rem;
  color: var(--blanc); line-height: 1; font-variant-numeric: tabular-nums;
}
.rebours-lbl {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .65); margin-top: .25rem;
}
.rebours-sep { font-size: 1.5rem; color: rgba(255, 255, 255, .35); align-self: flex-start; }

/* =============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================= */
section { padding: 3.2rem 5vw; }
.sec-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bord); margin-bottom: .5rem;
}
.sec-titre {
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.5rem); line-height: 1.12;
  margin-bottom: .7rem;
}
.sec-sub { color: var(--gris); font-size: .98rem; line-height: 1.65; max-width: 640px; }
.centre { text-align: center; }
.centre .sec-sub { margin-left: auto; margin-right: auto; }

/* =============================================================
   POURQUOI NOUS
   ============================================================= */
#pourquoi { background: var(--creme); }
.atouts { display: grid; gap: 1rem; margin-top: 1.8rem; }
.atout {
  background: var(--blanc); border: 1px solid var(--grisL);
  border-radius: var(--rayon); padding: 1.3rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.atout:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.atout-ico { font-size: 1.8rem; line-height: 1; margin-bottom: .6rem; }
.atout h3 { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; }
.atout p { font-size: .9rem; color: var(--gris); line-height: 1.6; }

/* =============================================================
   TARIFS
   ============================================================= */
.tarifs { display: grid; gap: .9rem; margin: 1.6rem 0 2.4rem; }
.tarif {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--blanc); border: 2px solid var(--grisL);
  border-radius: var(--rayon); padding: 1.05rem 1.2rem;
}
.tarif.choix { border-color: var(--chair, #E8A0A0); background: #FFF8F8; }
.tarif.fidelite { border-color: var(--vertB); background: var(--vertF); }
.tarif-nom { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; }
.tarif-detail { font-size: .8rem; color: var(--gris); margin-top: .1rem; }
.tarif-val {
  font-family: var(--titre); font-weight: 700; font-size: 1.5rem;
  color: var(--bord); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tarif.fidelite .tarif-val { color: var(--vert); }
.tarif-val small { font-size: .68rem; font-weight: 600; color: var(--gris); }

/* =============================================================
   CATALOGUE DES MORCEAUX
   ============================================================= */
.grille-produits { display: grid; gap: 1rem; margin-top: 1.4rem; }

.produit {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--grisL);
  border-radius: var(--rayon); overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.produit:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.produit.dans-panier { border-color: var(--vertB); box-shadow: 0 0 0 1px var(--vertB); }
.produit.est-choix { border-color: #F0C9C9; }

/* Photo du morceau : img/produits/<id>.jpg, au format 16/9.
   L'emoji est posé DERRIÈRE l'image : si un fichier photo manque ou
   ne se charge pas, il réapparaît de lui-même — jamais de case vide. */
.produit-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, var(--roseV), var(--creme));
  display: grid; place-items: center;
  border-bottom: 1px solid var(--grisL);
}
.produit-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.produit:hover .produit-media img { transform: scale(1.04); }
.produit-emoji { font-size: 2.8rem; line-height: 1; }
.est-choix .produit-media { background: linear-gradient(135deg, #FCE0E0, #FFF6F2); }

/* Pastille « morceau de choix » posée sur la photo */
.est-choix .produit-media::after {
  content: '⭐ Choix'; position: absolute; z-index: 2; top: .55rem; right: .55rem;
  background: rgba(123, 30, 46, .92); color: var(--blanc);
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: .28rem .55rem; border-radius: 6px;
}

.produit-corps { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.produit-tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.produit-nom { font-family: var(--titre); font-weight: 700; font-size: 1.18rem; }
.produit-cat {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 5px; white-space: nowrap;
}
.cat-standard { background: var(--creme); color: var(--bord); }
.cat-choix    { background: var(--rose);  color: var(--bordD); }
.cat-abat     { background: #EEF2F7; color: #475569; }
.produit-desc { font-size: .86rem; color: var(--gris); margin: .35rem 0 .7rem; flex: 1; }
.produit-prix {
  font-family: var(--titre); font-weight: 700; font-size: 1.35rem; color: var(--bord);
  margin-bottom: .8rem; font-variant-numeric: tabular-nums;
}
.produit-prix small { font-size: .68rem; font-weight: 600; color: var(--gris); }
.produit-actions { display: flex; align-items: center; gap: .6rem; }

/* Sélecteur de poids */
.pas {
  display: flex; align-items: center; gap: .1rem;
  border: 1px solid var(--grisL); border-radius: 8px; background: var(--blanc);
  flex-shrink: 0;
}
.pas-btn {
  width: 40px; height: 44px; font-size: 1.25rem; font-weight: 700;
  color: var(--bord); display: grid; place-items: center;
  border-radius: 7px; transition: background var(--transition);
}
.pas-btn:hover { background: var(--creme); }
.pas-val {
  width: 40px; height: 44px; text-align: center; border: none; background: none;
  font-weight: 700; font-size: .98rem; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.pas-unite { font-size: .78rem; color: var(--gris); padding-right: .5rem; }
.pas-sm .pas-btn { width: 34px; height: 38px; font-size: 1.1rem; }
.pas-sm .pas-val { width: 38px; height: 38px; font-size: .9rem; }

.btn-ajout {
  flex: 1; min-height: 44px; border-radius: 8px;
  background: var(--bord); color: var(--blanc);
  font-weight: 700; font-size: .9rem;
  transition: background var(--transition);
}
.btn-ajout:hover { background: var(--bordL); }
.btn-ajout.ajoute { background: var(--vert); }

/* =============================================================
   RYTHME DE LA SEMAINE
   ============================================================= */
#rythme { background: var(--creme); }
.semaine { display: grid; gap: .9rem; margin-top: 1.6rem; }
.jour {
  background: var(--blanc); border: 1px solid var(--grisL); border-left: 4px solid var(--grisL);
  border-radius: 10px; padding: 1.05rem 1.2rem;
  display: flex; align-items: flex-start; gap: .9rem;
}
.jour.fort { border-left-color: var(--bord); }
.jour-ico { font-size: 1.6rem; line-height: 1.2; flex-shrink: 0; }
.jour-label { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; margin-bottom: .15rem; }
.jour-desc { font-size: .87rem; color: var(--gris); line-height: 1.55; }

/* =============================================================
   COMMANDER
   ============================================================= */
#commander { background: var(--bordD); color: var(--blanc); }
#commander .sec-label { color: var(--rose); }
#commander .sec-titre { color: var(--blanc); }
#commander .sec-sub { color: rgba(255, 255, 255, .82); }

.etapes { display: grid; gap: 1rem; margin: 1.8rem 0; }
.etape { display: flex; gap: .9rem; align-items: flex-start; }
.etape-num {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--rose); color: var(--bordD);
  font-family: var(--titre); font-weight: 700; font-size: 1rem;
  display: grid; place-items: center;
}
.etape h3 { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; }
.etape p { font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.6; }
.etape .cle { color: var(--rose); font-weight: 700; }


/* =============================================================
   QUESTIONS FRÉQUENTES
   ============================================================= */
#faq { text-align: center; }
#faq .sec-sub { margin-left: auto; margin-right: auto; }
.faq { margin: 1.8rem auto 0; max-width: 760px; text-align: left; }
.faq-item { border-bottom: 1px solid var(--grisL); }
.faq-q {
  width: 100%; text-align: left; padding: 1.05rem 2rem 1.05rem 0;
  font-family: var(--titre); font-weight: 700; font-size: 1.02rem;
  position: relative; min-height: 44px;
}
.faq-q::after {
  content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--bord); transition: transform var(--transition);
}
.faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq-r { padding: 0 0 1.1rem; font-size: .92rem; color: var(--gris); line-height: 1.7; }
.faq-r p + p { margin-top: .6rem; }

/* =============================================================
   CONTACT
   ============================================================= */
#contact { background: var(--bord); color: var(--blanc); }
#contact .sec-label { color: var(--rose); }
#contact .sec-titre { color: var(--blanc); }
.contacts { display: grid; gap: .9rem; margin-top: 1.6rem; }
.contact-carte {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--rayon); padding: 1.2rem; text-align: center;
}
.contact-ico { font-size: 1.7rem; margin-bottom: .4rem; }
.contact-lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose); margin-bottom: .3rem;
}
.contact-val { font-size: .92rem; color: rgba(255, 255, 255, .9); line-height: 1.55; }
.contact-val a { color: var(--blanc); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--rose); }

/* =============================================================
   PIED DE PAGE
   ============================================================= */
footer {
  background: var(--bordX); color: rgba(255, 255, 255, .6);
  padding: 2.4rem 5vw calc(2.4rem + env(safe-area-inset-bottom));
  text-align: center; font-size: .85rem;
}
.footer-logo {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
}
.footer-logo img { width: 40px; height: 40px; border-radius: 50%; background: var(--blanc); }
.footer-logo span { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; color: var(--blanc); letter-spacing: .04em; }
footer p + p { margin-top: .4rem; }
footer a { color: rgba(255, 255, 255, .75); }

/* =============================================================
   BARRE PANIER FIXE (mobile)
   ============================================================= */
.barre-panier {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: .8rem;
  padding: .7rem 4vw calc(.7rem + env(safe-area-inset-bottom));
  background: var(--bordD); color: var(--blanc);
  box-shadow: 0 -4px 22px rgba(0, 0, 0, .3);
}
.barre-panier.visible { display: flex; }
.barre-info { flex: 1; min-width: 0; text-align: left; }
.barre-resume { font-size: .76rem; color: rgba(255, 255, 255, .7); }
.barre-total {
  font-family: var(--titre); font-weight: 700; font-size: 1.2rem;
  color: var(--blanc); font-variant-numeric: tabular-nums;
}
.barre-btn {
  background: var(--rose); color: var(--bordD);
  font-family: var(--titre); font-weight: 700; font-size: .95rem;
  min-height: 46px; padding: .6rem 1.3rem; border-radius: 8px;
}

/* La barre ne doit pas masquer le bas de page */
body.avec-barre { padding-bottom: 74px; }

/* =============================================================
   TIROIR PANIER
   ============================================================= */
.tiroir { position: fixed; inset: 0; z-index: 200; }
.tiroir-fond {
  position: absolute; inset: 0; background: rgba(26, 10, 10, .55);
  opacity: 0; transition: opacity .26s ease;
}
.tiroir.ouvert .tiroir-fond { opacity: 1; }

.tiroir-panneau {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--blanc);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--ombreF);
  transform: translateY(100%);
  transition: transform .26s ease;
}
.tiroir.ouvert .tiroir-panneau { transform: translateY(0); }

.tiroir-tete {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--grisL);
}
.tiroir-titre { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; flex: 1; }
.tiroir-retour {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  font-size: 1.6rem; line-height: 1; color: var(--bord);
  display: grid; place-items: center; margin-left: -.4rem;
}
.tiroir-retour:hover { background: var(--creme); }
.tiroir-etape {
  font-size: .74rem; font-weight: 700; color: var(--gris);
  background: var(--creme); border-radius: 100px; padding: .2rem .6rem;
  flex-shrink: 0;
}
.tiroir-fermer {
  width: 44px; height: 44px; border-radius: 8px; font-size: 1.3rem;
  color: var(--gris); display: grid; place-items: center;
}
.tiroir-fermer:hover { background: var(--creme); color: var(--noir); }

.tiroir-corps { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: .4rem 1.2rem; }

.panier-lignes { list-style: none; }
.panier-vide { padding: 2.5rem 1rem; text-align: center; color: var(--gris); font-weight: 600; }
.panier-vide span { display: block; margin-top: .4rem; font-weight: 400; font-size: .88rem; }

.panier-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'nom suppr' 'pas montant';
  gap: .5rem .7rem; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--grisL);
}
.pl-nom { grid-area: nom; font-weight: 700; font-size: .98rem; }
.pl-pu { display: block; font-weight: 400; font-size: .76rem; color: var(--gris); }
.panier-ligne .pas { grid-area: pas; justify-self: start; }
.pl-montant {
  grid-area: montant; justify-self: end;
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem;
  color: var(--bord); font-variant-numeric: tabular-nums;
}
.a-confirmer { font-family: var(--texte); font-size: .8rem; font-weight: 600; color: var(--gris); }
.pl-suppr {
  grid-area: suppr; width: 38px; height: 38px; border-radius: 8px;
  color: var(--gris); font-size: 1rem; display: grid; place-items: center;
}
.pl-suppr:hover { background: var(--rougeF); color: var(--rouge); }
.etoile { font-size: .8rem; }

/* ---------- Étape 2 : coordonnées du client ------------------ */
.coord { padding: 1.1rem 0 .4rem; }
.coord-titre { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; margin-bottom: .9rem; }

/* Récapitulatif chiffré : il défile avec les coordonnées, seul le
   total à payer reste figé en bas. */
.recap {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--grisL);
}

.champ { margin-bottom: 1rem; }
.champ-lbl { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.oblig { color: var(--bord); }
.champ-inp {
  width: 100%; min-height: 46px; padding: .6rem .8rem;
  border: 1px solid var(--grisL); border-radius: 8px; background: var(--blanc);
  font-size: 1rem; transition: border-color var(--transition);
}
.champ-inp:focus { border-color: var(--bord); }
.champ-inp.en-erreur { border-color: var(--rouge); background: var(--rougeF); }
select.champ-inp { appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--bord) 50%),
                    linear-gradient(135deg, var(--bord) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.champ-aide { font-size: .78rem; color: var(--gris); margin-top: .35rem; line-height: 1.5; }

.choix-mode { border: none; margin-bottom: 1rem; }
.modes { display: grid; gap: .6rem; margin-top: .5rem; }
.mode { display: block; cursor: pointer; }
.mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-corps {
  display: flex; align-items: center; gap: .7rem;
  border: 2px solid var(--grisL); border-radius: 10px; padding: .75rem .9rem;
  transition: border-color var(--transition), background var(--transition);
}
.mode input:checked + .mode-corps { border-color: var(--bord); background: var(--creme); }
.mode input:focus-visible + .mode-corps { outline: 3px solid var(--bordL); outline-offset: 2px; }
.mode-ico { font-size: 1.4rem; line-height: 1; }
.mode-txt { display: flex; flex-direction: column; line-height: 1.3; }
.mode-txt strong { font-size: .92rem; }
.mode-txt small { font-size: .76rem; color: var(--gris); }

/* Le pied est compact : chaque pixel qu'il prend est retiré à la
   liste des morceaux, qui doit rester consultable sans défiler. */
.panier-pied { border-top: 2px solid var(--grisL); padding: .8rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); background: var(--creme); }
.panier-erreur {
  background: var(--rougeF); color: var(--rouge); border: 1px solid #FECACA;
  border-radius: 8px; padding: .6rem .8rem; font-size: .85rem;
  font-weight: 600; margin-bottom: .8rem;
}
#panierFrais.gratuit { color: var(--vert); font-weight: 700; }
#panierFrais.a-confirmer { color: #9A3412; font-size: .82rem; }
.panier-note { border-radius: 9px; padding: .55rem .8rem; font-size: .82rem; line-height: 1.45; margin-bottom: .7rem; }
.panier-note.incitation { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.panier-note.bonne { background: var(--vertF); color: var(--vert); border: 1px solid #BBF7D0; }
.panier-confirmer { font-size: .8rem; color: var(--gris); margin-bottom: .8rem; }

.panier-total-l {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .3rem; font-size: .9rem; color: var(--gris);
}
.panier-total-l.grand { font-size: 1rem; color: var(--noir); font-weight: 700; margin: .4rem 0 .7rem; }
.panier-total-l.grand strong {
  font-family: var(--titre); font-size: 1.6rem; color: var(--bord); font-variant-numeric: tabular-nums;
}
.panier-livraison { font-size: .78rem; color: var(--gris); margin-bottom: .7rem; line-height: 1.45; }
.panier-livraison strong { color: var(--noir); }
.panier-confirmer { font-size: .76rem; line-height: 1.45; }

/* Boutons pleine largeur du pied du tiroir */
.btn-large { width: 100%; }
.panier-vider {
  display: block; width: 100%; margin-top: .7rem; padding: .5rem;
  font-size: .84rem; color: var(--gris); text-decoration: underline;
}

/* =============================================================
   BOUTON WHATSAPP FLOTTANT
   ============================================================= */
/* Rappel flottant — grand écran uniquement, et seulement lorsqu'une
   commande est en cours (le script pilote l'attribut hidden). Sur
   téléphone, la barre du bas joue ce rôle : pas de doublon.
   Aucun bouton d'action ne s'affiche tant que le panier est vide. */
.flottant-panier { display: none; }

@media (min-width: 900px) {
  .flottant-panier {
    position: fixed; right: 22px; bottom: 22px; z-index: 85;
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--bord); color: var(--blanc);
    font-weight: 600; font-size: .9rem;
    padding: .85rem 1.3rem; border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 8px 26px rgba(123, 30, 46, .42);
    transition: transform var(--transition), background var(--transition);
  }
  .flottant-panier strong { font-family: var(--titre); font-size: 1rem; }
  .flottant-panier:hover { transform: scale(1.04); background: var(--bordL); }
}

/* =============================================================
   ÉCRANS MOYENS  (≥ 620px)
   ============================================================= */
@media (min-width: 620px) {
  .hero-btns { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .atouts { grid-template-columns: repeat(2, 1fr); }
  .grille-produits { grid-template-columns: repeat(2, 1fr); }
  .contacts { grid-template-columns: repeat(2, 1fr); }
  .semaine { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .nav-panier-txt { display: inline; }
}

/* =============================================================
   ORDINATEUR  (≥ 900px)
   ============================================================= */
@media (min-width: 900px) {
  :root { --nav-h: 68px; }
  section { padding: 4.5rem 6vw; }

  .nav { padding: 0 3vw; gap: .9rem; }
  .nav-burger { display: none; }
  .nav-liens {
    display: flex; gap: 1rem; list-style: none; margin-left: auto;
  }
  /* Sans nowrap, « Pourquoi nous » se coupe en deux lignes vers
     1024 px et fait déborder toute la barre. */
  .nav-liens a {
    color: rgba(255, 255, 255, .88); text-decoration: none; white-space: nowrap;
    font-size: .84rem; font-weight: 600; padding: .4rem 0;
    border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition);
  }
  .nav-liens a:hover { color: var(--rose); border-bottom-color: var(--rose); }
  .nav-logo { margin-right: 0; }
  .menu { display: none; }

  .hero { padding: 5rem 6vw 5rem; }
  .hero-logo { width: 128px; height: 128px; }
  .rebours-num { font-size: 2.4rem; }
  .rebours-unite { min-width: 68px; }

  .atouts { grid-template-columns: repeat(3, 1fr); }
  .grille-produits { grid-template-columns: repeat(3, 1fr); }
  .tarifs { grid-template-columns: repeat(3, 1fr); }
  .tarif { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .semaine { grid-template-columns: repeat(5, 1fr); }
  .jour { flex-direction: column; }
  .contacts { grid-template-columns: repeat(4, 1fr); }

  /* Les quatre étapes sur une seule ligne : le parcours se lit d'un
     coup d'œil. Le numéro passe au-dessus du texte pour laisser
     toute la largeur de la colonne à la phrase. */
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 1.8rem 1.4rem; }
  .etape { flex-direction: column; gap: .7rem; }
  .etape-num { width: 38px; height: 38px; font-size: 1.05rem; }

  /* Le tiroir devient un panneau latéral */
  .tiroir-panneau {
    left: auto; top: 0; bottom: 0; width: 440px;
    max-height: none; border-radius: 0;
    transform: translateX(100%);
  }
  .tiroir.ouvert .tiroir-panneau { transform: translateX(0); }

  /* La barre fixe cède la place au bouton de la navigation */
  .barre-panier.visible { display: none; }
  body.avec-barre { padding-bottom: 0; }
}

/* =============================================================
   GRAND ÉCRAN  (≥ 1200px) — la barre respire de nouveau
   ============================================================= */
@media (min-width: 1200px) {
  .nav { padding: 0 6vw; gap: 1.4rem; }
  .nav-liens { gap: 1.4rem; }
  .nav-liens a { font-size: .87rem; }
}

/* =============================================================
   CONFORT DE LECTURE ET PRÉFÉRENCES SYSTÈME
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .produit:hover, .atout:hover, .flottant-panier:hover { transform: none; }
}

@media print {
  .nav, .menu, .barre-panier, .tiroir, .flottant-panier, .bandeau { display: none !important; }
  body { padding: 0; }
  section { padding: 1rem 0; }
}