/* ==========================================================================
   Les Délices du Terroir — charte graphique (section 21)
   Mobile d'abord : 360 → 768 → 1024 → 1280 px (ACC-04). Texte de base 16 px, zones tactiles 44 px (ACC-02).
   ========================================================================== */

/* Polices hébergées localement (21.1) : déposer les fichiers .woff2 dans /assets/fonts/. Repli : Georgia / système. */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --marque: #5C3A16;          /* brun terroir (logo) */
  --marque-fonce: #3E2609;
  --marque-clair: #EFE4D4;
  --accent: #E5257C;          /* rose « Délices » (logo) */
  --accent-fonce: #B8175F;
  --paille: #D9A21B;          /* paille, doré */
  --vert: #4F7942;            /* rappel du terroir */
  --vert-clair: #E4EDDF;
  --creme: #FBF6EE;
  --creme-fonce: #F1E8DA;
  --anthracite: #2B2A28;
  --gris-fonce: #57534E;
  --gris: #8A857C;
  --gris-clair: #D6D0C4;
  --blanc: #FFFFFF;
  --succes: #2E7D32; --succes-clair: #E3F1E4;
  --alerte: #C77700; --alerte-clair: #FFF1DC;
  --erreur: #B3261E; --erreur-clair: #FBE4E2;
  --info: #1F5F8B; --info-clair: #E1EEF6;
  /* Pôles (RG-44) */
  --pole-traiteur: #E07A1F; --pole-patisserie: #D9537A; --pole-boucherie: #7B1E2B; --pole-activites: #4F7942;
  --police-titres: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rayon: 12px; --rayon-petit: 8px;
  --ombre: 0 2px 8px rgba(43, 42, 40, .08), 0 8px 24px rgba(43, 42, 40, .06);
  --ombre-forte: 0 12px 40px rgba(43, 42, 40, .18);
  --largeur-max: 1200px;
  --gouttiere: 16px;
  --transition: .18s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--police-texte); font-size: 16px; line-height: 1.55; color: var(--anthracite); background: var(--creme); -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--marque); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marque-fonce); }
h1, h2, h3, h4 { font-family: var(--police-titres); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; color: var(--anthracite); letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .petit { font-size: .875rem; }
.discret { color: var(--gris-fonce); }
.centre { text-align: center; }
.droite { text-align: right; }
.masque { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--anthracite); color: #fff; padding: 8px 12px; z-index: 1000; border-radius: var(--rayon-petit); }
.lien-evitement:focus { left: 8px; }

/* --------------------------------------------------------------------- Mise en page */
.conteneur { width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--gouttiere); }
.conteneur-etroit { max-width: 760px; }
.section { padding: 40px 0; }
.section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-titre h2 { margin: 0; }
.section-titre .lien-plus { font-weight: 600; white-space: nowrap; }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.grille-1 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grille { gap: 20px; grid-template-columns: repeat(3, 1fr); } .grille-2 { grid-template-columns: repeat(2, 1fr); } .grille-4 { grid-template-columns: repeat(4, 1fr); } .section { padding: 56px 0; } }
@media (min-width: 1024px) { .grille-4 { grid-template-columns: repeat(4, 1fr); } .grille-3 { grid-template-columns: repeat(3, 1fr); } }
.colonnes { display: grid; gap: 24px; }
@media (min-width: 1024px) { .colonnes-2-1 { grid-template-columns: 2fr 1fr; align-items: start; } .colonnes-1-2 { grid-template-columns: 1fr 2fr; align-items: start; } .colonnes-1-1 { grid-template-columns: 1fr 1fr; } }
.pile { display: flex; flex-direction: column; gap: 12px; }
.ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.fin { justify-content: flex-end; }
.marge-haut { margin-top: 24px; }
.marge-bas { margin-bottom: 24px; }

/* --------------------------------------------------------------------- En-tête (VIT-01) */
.entete { position: sticky; top: 0; z-index: 100; background: rgba(251, 246, 238, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--creme-fonce); }
.entete-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--anthracite); font-family: var(--police-titres); font-weight: 700; font-size: 1.1rem; line-height: 1.05; }
.logo img { width: 40px; height: 40px; }
.logo .logo-image { width: auto; height: 46px; }
@media (min-width: 768px) { .logo .logo-image { height: 54px; } }
.logo span small { display: block; font-family: var(--police-texte); font-weight: 500; font-size: .7rem; color: var(--gris-fonce); letter-spacing: .04em; text-transform: uppercase; }
.nav-principale { display: none; margin-left: 12px; }
.nav-principale a { padding: 8px 12px; text-decoration: none; color: var(--anthracite); font-weight: 500; border-radius: var(--rayon-petit); }
.nav-principale a:hover, .nav-principale a.actif { background: var(--marque-clair); color: var(--marque-fonce); }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; color: var(--anthracite); cursor: pointer; text-decoration: none; position: relative; }
.bouton-icone:hover { background: var(--creme-fonce); }
.bouton-icone svg { width: 24px; height: 24px; }
.compteur-panier { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--marque); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.recherche-globale { display: none; position: relative; }
.recherche-globale input { width: 220px; height: 40px; border-radius: 20px; border: 1px solid var(--gris-clair); padding: 0 16px 0 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A857C' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center; }
.suggestions { position: absolute; top: 44px; left: 0; right: 0; background: #fff; border: 1px solid var(--gris-clair); border-radius: var(--rayon-petit); box-shadow: var(--ombre-forte); z-index: 200; overflow: hidden; }
.suggestions a { display: block; padding: 10px 14px; text-decoration: none; color: var(--anthracite); border-bottom: 1px solid var(--creme-fonce); }
.suggestions a:hover { background: var(--creme); }
.suggestions small { color: var(--gris); display: block; }
@media (min-width: 1024px) { .nav-principale { display: flex; } .recherche-globale { display: block; } .bouton-menu { display: none; } }

/* Tiroir mobile */
.tiroir { position: fixed; inset: 0; z-index: 300; display: none; }
.tiroir.ouvert { display: block; }
.tiroir-fond { position: absolute; inset: 0; background: rgba(43, 42, 40, .5); }
.tiroir-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); background: var(--creme); padding: 16px; overflow-y: auto; box-shadow: var(--ombre-forte); display: flex; flex-direction: column; gap: 4px; }
.tiroir-panneau a { display: block; padding: 12px 10px; text-decoration: none; color: var(--anthracite); font-weight: 500; border-radius: var(--rayon-petit); min-height: 44px; }
.tiroir-panneau a:hover { background: var(--marque-clair); }
.tiroir-panneau .sous { padding-left: 24px; font-weight: 400; color: var(--gris-fonce); }
.tiroir-panneau form { margin: 8px 0 12px; }
.tiroir-panneau input { width: 100%; height: 44px; border-radius: 22px; border: 1px solid var(--gris-clair); padding: 0 16px; }

/* Bandeau d'information (VIT-06) */
.bandeau-info { background: var(--anthracite); color: #fff; font-size: .9rem; text-align: center; padding: 8px 16px; }
.bandeau-info.fermeture { background: var(--erreur); }
.bandeau-info.offre { background: var(--accent-fonce); }
.bandeau-info a { color: #fff; }

/* Fil d'Ariane (VIT-05) */
.ariane { font-size: .85rem; color: var(--gris-fonce); margin: 12px 0 8px; }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ariane li + li::before { content: "›"; margin: 0 6px; color: var(--gris); }
.ariane a { color: var(--gris-fonce); }

/* --------------------------------------------------------------------- Pied de page (VIT-02) */
.pied { background: var(--anthracite); color: #D6D0C4; margin-top: 48px; padding: 40px 0 24px; font-size: .92rem; }
.pied h4 { color: #fff; font-family: var(--police-texte); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.pied a { color: #D6D0C4; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pied-grille { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .pied-grille { grid-template-columns: repeat(4, 1fr); } }
.pied-bas { border-top: 1px solid #44413c; margin-top: 28px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .8rem; color: #9C968C; }
.moyens-paiement { display: flex; flex-wrap: wrap; gap: 6px; }
.moyens-paiement span { background: #3d3a36; border-radius: 4px; padding: 2px 8px; font-size: .75rem; color: #fff; }
.pied form { display: flex; gap: 6px; }
.pied input { flex: 1; min-width: 0; height: 40px; border-radius: 20px; border: 1px solid #57534E; background: #3d3a36; color: #fff; padding: 0 14px; }

/* Bouton WhatsApp flottant (VIT-03) */
.whatsapp-flottant { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--ombre-forte); text-decoration: none; }
.whatsapp-flottant svg { width: 30px; height: 30px; }
body.avec-barre-mobile .whatsapp-flottant { bottom: 76px; }

/* Barre fixe mobile (VIT-38, 21.2 : action principale en bas) */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--gris-clair); padding: 8px var(--gouttiere); padding-bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; }
.barre-mobile .prix { font-weight: 700; font-size: 1.1rem; }
@media (min-width: 768px) { .barre-mobile { display: none; } body.avec-barre-mobile .whatsapp-flottant { bottom: 16px; } }
body.avec-barre-mobile { padding-bottom: 84px; }
@media (min-width: 768px) { body.avec-barre-mobile { padding-bottom: 0; } }

/* --------------------------------------------------------------------- Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--marque); background: var(--marque); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); font-family: inherit; line-height: 1.2; }
.bouton:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); color: #fff; }
.bouton:active { transform: translateY(1px); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.bouton-secondaire { background: transparent; color: var(--marque); }
.bouton-secondaire:hover { background: var(--marque-clair); color: var(--marque-fonce); }
.bouton-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-accent:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.bouton-vert { background: var(--vert); border-color: var(--vert); }
.bouton-vert:hover { background: #3d5e33; border-color: #3d5e33; }
.bouton-clair { background: #fff; border-color: var(--gris-clair); color: var(--anthracite); }
.bouton-clair:hover { background: var(--creme-fonce); border-color: var(--gris); color: var(--anthracite); }
.bouton-danger { background: var(--erreur); border-color: var(--erreur); }
.bouton-danger:hover { background: #8f1e18; border-color: #8f1e18; }
.bouton-petit { min-height: 36px; padding: 6px 14px; font-size: .9rem; }
.bouton-large { width: 100%; }
.bouton-texte { background: none; border: 0; color: var(--marque); padding: 8px; min-height: 44px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 1rem; }
.bouton svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------- Formulaires (21.2, ACC-05) */
.champ { margin-bottom: 16px; }
.champ label, .etiquette { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.champ .aide { font-size: .82rem; color: var(--gris-fonce); margin-top: 4px; }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ input[type="password"], .champ input[type="number"], .champ input[type="date"], .champ input[type="time"], .champ input[type="search"], .champ input[type="url"], .champ select, .champ textarea, .saisie {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--gris-clair); border-radius: var(--rayon-petit); background: #fff; font: inherit; color: var(--anthracite); transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .saisie:focus { border-color: var(--marque); box-shadow: 0 0 0 3px var(--marque-clair); outline: none; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--erreur); }
.champ-erreur { color: var(--erreur); font-size: .85rem; margin: 6px 0 0; font-weight: 500; }
.champ-ligne { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .champ-ligne { grid-template-columns: 1fr 1fr; } .champ-ligne-3 { grid-template-columns: 1fr 1fr 1fr; } }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; padding: 6px 0; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--marque); flex: none; }
.telephone-groupe { display: flex; gap: 8px; }
.telephone-groupe select { width: 110px; flex: none; }
.robustesse { height: 6px; border-radius: 3px; background: var(--gris-clair); margin-top: 8px; overflow: hidden; }
.robustesse span { display: block; height: 100%; width: 0; background: var(--erreur); transition: width var(--transition), background var(--transition); }
.code-otp { letter-spacing: .4em; font-size: 1.6rem; text-align: center; font-weight: 700; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--gris-clair); border-radius: 999px; background: #fff; overflow: hidden; }
.quantite button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--marque); font-family: inherit; }
.quantite input, .quantite output { width: 64px; text-align: center; border: 0; font: inherit; font-weight: 600; background: transparent; }
.choix-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-pastilles label { border: 2px solid var(--gris-clair); border-radius: 999px; padding: 8px 14px; cursor: pointer; background: #fff; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.choix-pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-pastilles input:checked + span, .choix-pastilles label:has(input:checked) { border-color: var(--marque); background: var(--marque-clair); color: var(--marque-fonce); }
.choix-pastilles label:has(input:disabled) { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.choix-cartes { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .choix-cartes { grid-template-columns: 1fr 1fr; } }
.choix-cartes label { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--gris-clair); border-radius: var(--rayon); padding: 14px; background: #fff; cursor: pointer; }
.choix-cartes label:has(input:checked) { border-color: var(--marque); background: var(--marque-clair); }
.choix-cartes input { margin-top: 3px; accent-color: var(--marque); width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------- Cartes, produits */
.carte { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; }
.carte-produit { background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); position: relative; }
.carte-produit:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.carte-produit .visuel { aspect-ratio: 4 / 3; background: var(--creme-fonce); overflow: hidden; }
.carte-produit .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-produit .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte-produit h3 { font-size: 1rem; margin: 0; font-family: var(--police-texte); font-weight: 600; }
.carte-produit h3 a { color: inherit; text-decoration: none; }
.carte-produit h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-produit .prix { font-weight: 700; font-size: 1.05rem; margin-top: auto; }
.carte-produit .prix small { font-weight: 400; color: var(--gris-fonce); }
.carte-produit .prix .barre { text-decoration: line-through; color: var(--gris); font-weight: 400; margin-right: 6px; }
.carte-produit .meta { font-size: .8rem; color: var(--gris-fonce); }
.carte-produit .bouton { position: relative; z-index: 2; }
.etiquette-coin { position: absolute; top: 10px; left: 10px; background: var(--paille); color: var(--anthracite); font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; z-index: 1; }
.etiquette-coin.promo { background: var(--erreur); color: #fff; }
.etiquette-coin.epuise { background: var(--gris-fonce); color: #fff; }
.carte-metier { position: relative; border-radius: var(--rayon); overflow: hidden; min-height: 200px; color: #fff; display: flex; align-items: flex-end; text-decoration: none; box-shadow: var(--ombre); }
.carte-metier img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-metier .corps { position: relative; padding: 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); width: 100%; }
.carte-metier h3 { color: #fff; margin: 0 0 4px; }
.carte-metier p { margin: 0; font-size: .9rem; opacity: .9; }
@media (min-width: 768px) { .carte-metier { min-height: 260px; } }

/* Pastilles de pôle (RG-44) */
.pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: .72rem; font-weight: 700; color: #fff; background: var(--gris); letter-spacing: .02em; }
.pastille-traiteur { background: var(--pole-traiteur); }
.pastille-patisserie { background: var(--pole-patisserie); }
.pastille-boucherie { background: var(--pole-boucherie); }
.pastille-activites { background: var(--pole-activites); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--creme-fonce); color: var(--gris-fonce); white-space: nowrap; }
.badge-succes { background: var(--succes-clair); color: var(--succes); }
.badge-alerte { background: var(--alerte-clair); color: var(--alerte); }
.badge-erreur { background: var(--erreur-clair); color: var(--erreur); }
.badge-info { background: var(--info-clair); color: var(--info); }
.badge-marque { background: var(--marque-clair); color: var(--marque-fonce); }

/* --------------------------------------------------------------------- Messages, alertes */
.messages { position: fixed; top: 76px; right: 16px; left: 16px; z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
@media (min-width: 640px) { .messages { left: auto; width: 380px; } }
.message { pointer-events: auto; padding: 12px 40px 12px 16px; border-radius: var(--rayon-petit); box-shadow: var(--ombre-forte); background: var(--anthracite); color: #fff; font-weight: 500; position: relative; animation: apparait .25s ease; }
.message.succes { background: var(--succes); } .message.erreur { background: var(--erreur); } .message.alerte { background: var(--alerte); } .message.info { background: var(--info); }
.message button { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; }
@keyframes apparait { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.alerte-bloc { padding: 14px 16px; border-radius: var(--rayon-petit); border-left: 4px solid var(--info); background: var(--info-clair); color: var(--anthracite); margin-bottom: 16px; }
.alerte-bloc.succes { border-color: var(--succes); background: var(--succes-clair); }
.alerte-bloc.alerte { border-color: var(--alerte); background: var(--alerte-clair); }
.alerte-bloc.erreur { border-color: var(--erreur); background: var(--erreur-clair); }
.etat-vide { text-align: center; padding: 40px 20px; color: var(--gris-fonce); background: #fff; border-radius: var(--rayon); border: 1px dashed var(--gris-clair); }
.etat-vide svg { width: 56px; height: 56px; margin: 0 auto 12px; color: var(--gris-clair); }

/* --------------------------------------------------------------------- Accueil */
.hero { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--anthracite); color: #fff; min-height: 380px; display: flex; align-items: flex-end; margin-top: 16px; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero .corps { position: relative; padding: 28px 20px; max-width: 640px; }
.hero h1 { color: #fff; margin-bottom: 8px; }
.hero p { font-size: 1.05rem; opacity: .92; }
.hero .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-points { display: flex; gap: 6px; position: absolute; right: 16px; top: 16px; }
.hero-points button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; padding: 0; }
.hero-points button.actif { background: #fff; }
@media (min-width: 768px) { .hero { min-height: 480px; } .hero .corps { padding: 48px 40px; } }
.etapes { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; counter-reset: etape; }
@media (min-width: 768px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etape { background: #fff; border-radius: var(--rayon); padding: 20px 16px; box-shadow: var(--ombre); }
.etape::before { counter-increment: etape; content: counter(etape); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paille); color: var(--anthracite); font-weight: 700; font-family: var(--police-titres); margin-bottom: 12px; font-size: 1.2rem; }
.etape h3 { font-size: 1.05rem; }
.etape p { margin: 0; font-size: .9rem; color: var(--gris-fonce); }
.reassurance { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .reassurance { grid-template-columns: repeat(4, 1fr); } }
.reassurance div { display: flex; gap: 10px; align-items: flex-start; }
.reassurance svg { width: 28px; height: 28px; color: var(--vert); flex: none; }
.reassurance strong { display: block; }
.reassurance span { font-size: .85rem; color: var(--gris-fonce); }
.bloc-zone { background: var(--vert-clair); border-radius: var(--rayon); padding: 24px 20px; }
.bloc-zone form { display: flex; gap: 8px; flex-wrap: wrap; }
.bloc-zone input { flex: 1; min-width: 200px; }
.resultat-zone { margin-top: 12px; font-weight: 500; }
.temoignage { background: #fff; border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); }
.temoignage .etoiles { color: var(--paille); letter-spacing: 2px; }
.temoignage footer { font-size: .85rem; color: var(--gris-fonce); margin-top: 8px; }
.motif-fond { background-color: var(--creme-fonce); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 4l20 20-20 20L4 24z' fill='none' stroke='%23A8431F' stroke-opacity='.08' stroke-width='1.5'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------- Catalogue, fiche produit */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtres select, .filtres input { min-height: 40px; border-radius: 20px; border: 1px solid var(--gris-clair); padding: 0 14px; background: #fff; font: inherit; }
.filtres .puce { border: 1px solid var(--gris-clair); background: #fff; border-radius: 999px; padding: 8px 14px; text-decoration: none; color: var(--anthracite); font-size: .9rem; min-height: 40px; display: inline-flex; align-items: center; }
.filtres .puce.actif { background: var(--anthracite); color: #fff; border-color: var(--anthracite); }
.fiche-produit { display: grid; gap: 24px; }
@media (min-width: 1024px) { .fiche-produit { grid-template-columns: 1.1fr 1fr; } }
.galerie-produit .principale { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; background: var(--creme-fonce); }
.galerie-produit .principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie-produit .vignettes { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.galerie-produit .vignettes img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--rayon-petit); border: 2px solid transparent; cursor: pointer; }
.galerie-produit .vignettes img.actif { border-color: var(--marque); }
.fiche-prix { font-size: 1.6rem; font-weight: 700; }
.fiche-prix small { font-size: .95rem; color: var(--gris-fonce); font-weight: 400; }
.fiche-infos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: var(--gris-fonce); margin: 12px 0; }
.fiche-infos span { display: inline-flex; align-items: center; gap: 6px; }
.fiche-infos svg { width: 18px; height: 18px; color: var(--vert); }
.premiere-date { background: var(--vert-clair); color: var(--vert); padding: 10px 14px; border-radius: var(--rayon-petit); font-weight: 600; display: inline-block; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--gris-clair); margin: 24px 0 16px; overflow-x: auto; }
.onglets button { border: 0; background: none; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--gris-fonce); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; min-height: 44px; }
.onglets button.actif { color: var(--marque); border-color: var(--marque); }
.panneau-onglet { display: none; }
.panneau-onglet.actif { display: block; }
.groupe-options { border: 1px solid var(--gris-clair); border-radius: var(--rayon); padding: 14px; margin-bottom: 12px; background: #fff; }
.groupe-options h4 { margin: 0 0 8px; display: flex; justify-content: space-between; font-family: var(--police-texte); }
.groupe-options h4 small { font-weight: 400; color: var(--gris-fonce); }
.groupe-options .case { border-top: 1px solid var(--creme-fonce); }
.groupe-options .case:first-of-type { border-top: 0; }
.groupe-options .supplement { margin-left: auto; color: var(--gris-fonce); font-size: .9rem; }

/* --------------------------------------------------------------------- Panier, tunnel */
.ligne-panier { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--creme-fonce); }
.ligne-panier img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--rayon-petit); }
.ligne-panier .detail { font-size: .85rem; color: var(--gris-fonce); }
.ligne-panier .actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.ligne-panier .total { font-weight: 700; }
.recap { background: #fff; border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); position: sticky; top: 80px; }
.recap dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.recap dt { color: var(--gris-fonce); }
.recap dd { margin: 0; text-align: right; font-weight: 500; }
.recap .total dt, .recap .total dd { font-weight: 700; font-size: 1.15rem; color: var(--anthracite); border-top: 1px solid var(--gris-clair); padding-top: 10px; }
.etapes-tunnel { display: flex; gap: 4px; margin: 16px 0 24px; counter-reset: tunnel; }
.etapes-tunnel span { flex: 1; text-align: center; font-size: .78rem; color: var(--gris); padding-top: 30px; position: relative; }
.etapes-tunnel span::before { counter-increment: tunnel; content: counter(tunnel); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gris-clair); background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--gris); }
.etapes-tunnel span.fait::before { background: var(--vert); border-color: var(--vert); color: #fff; content: "✓"; }
.etapes-tunnel span.actif { color: var(--marque-fonce); font-weight: 600; }
.etapes-tunnel span.actif::before { border-color: var(--marque); color: var(--marque); }
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendrier button { aspect-ratio: 1; border-radius: var(--rayon-petit); border: 1px solid var(--gris-clair); background: #fff; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 2px; }
.calendrier button small { font-size: .65rem; color: var(--gris); text-transform: uppercase; }
.calendrier button:disabled { background: var(--creme-fonce); color: var(--gris); cursor: not-allowed; text-decoration: line-through; }
.calendrier button.actif { background: var(--marque); color: #fff; border-color: var(--marque); }
.calendrier button.actif small { color: #fff; }
.creneaux { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
@media (min-width: 640px) { .creneaux { grid-template-columns: repeat(3, 1fr); } }
.creneaux label { border: 2px solid var(--gris-clair); border-radius: var(--rayon-petit); padding: 10px; background: #fff; cursor: pointer; text-align: center; font-weight: 600; min-height: 56px; display: flex; flex-direction: column; justify-content: center; }
.creneaux label small { font-weight: 400; color: var(--alerte); font-size: .75rem; }
.creneaux label:has(input:checked) { border-color: var(--marque); background: var(--marque-clair); }
.creneaux label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.creneaux input { position: absolute; opacity: 0; }

/* --------------------------------------------------------------------- Frise de suivi (SUI-01) */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.frise li { position: relative; padding: 0 0 20px 36px; }
.frise li::before { content: ""; position: absolute; left: 9px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--gris-clair); }
.frise li::after { content: ""; position: absolute; left: 15px; top: 24px; bottom: 0; width: 2px; background: var(--gris-clair); }
.frise li:last-child::after { display: none; }
.frise li.fait::before { background: var(--vert); border-color: var(--vert); }
.frise li.fait::after { background: var(--vert); }
.frise li.actif::before { border-color: var(--marque); background: var(--marque); box-shadow: 0 0 0 4px var(--marque-clair); }
.frise strong { display: block; }
.frise small { color: var(--gris-fonce); }

/* --------------------------------------------------------------------- Espace client */
.espace { display: grid; gap: 24px; margin-top: 16px; }
@media (min-width: 1024px) { .espace { grid-template-columns: 260px 1fr; align-items: start; } }
.menu-espace { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px; display: flex; gap: 4px; overflow-x: auto; }
@media (min-width: 1024px) { .menu-espace { flex-direction: column; position: sticky; top: 80px; } }
.menu-espace a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rayon-petit); text-decoration: none; color: var(--anthracite); white-space: nowrap; font-weight: 500; min-height: 44px; }
.menu-espace a.actif, .menu-espace a:hover { background: var(--marque-clair); color: var(--marque-fonce); }
.menu-espace svg { width: 20px; height: 20px; flex: none; }
.tuiles { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .tuiles { grid-template-columns: repeat(4, 1fr); } }
.tuile { background: #fff; border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre); }
.tuile .valeur { font-size: 1.6rem; font-weight: 700; font-family: var(--police-titres); }
.tuile .libelle { font-size: .82rem; color: var(--gris-fonce); }
.jauge { height: 8px; border-radius: 4px; background: var(--creme-fonce); overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--vert); }

/* --------------------------------------------------------------------- Tableaux */
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tableau { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rayon); overflow: hidden; font-size: .92rem; }
.tableau th, .tableau td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--creme-fonce); vertical-align: top; }
.tableau th { background: var(--creme-fonce); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-fonce); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td.nombre, .tableau th.nombre { text-align: right; white-space: nowrap; }
.pagination { display: flex; gap: 6px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; text-decoration: none; background: #fff; border: 1px solid var(--gris-clair); color: var(--anthracite); padding: 0 12px; }
.pagination .actif { background: var(--marque); color: #fff; border-color: var(--marque); }

/* --------------------------------------------------------------------- Divers */
.accordeon details { background: #fff; border-radius: var(--rayon-petit); margin-bottom: 8px; box-shadow: var(--ombre); }
.accordeon summary { padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 44px; }
.accordeon summary::after { content: "+"; color: var(--marque); font-size: 1.3rem; }
.accordeon details[open] summary::after { content: "–"; }
.accordeon .contenu { padding: 0 16px 16px; color: var(--gris-fonce); }
.galerie { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie figure { margin: 0; position: relative; border-radius: var(--rayon-petit); overflow: hidden; aspect-ratio: 1; background: var(--creme-fonce); }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; font-size: .8rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; }
.galerie .bouton-meme { position: absolute; top: 8px; right: 8px; }
.visionneuse { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 500; display: none; align-items: center; justify-content: center; }
.visionneuse.ouverte { display: flex; }
.visionneuse img { max-width: 94vw; max-height: 90vh; object-fit: contain; }
.visionneuse button { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 1.4rem; cursor: pointer; }
.carte-leaflet { height: 300px; border-radius: var(--rayon); overflow: hidden; z-index: 0; }
.bandeau-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 450; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 18px; font-size: .9rem; }
@media (min-width: 640px) { .bandeau-cookies { left: auto; width: 400px; } }
.bandeau-cookies .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.5em; font-size: 1.4rem; }
.prose ul { padding-left: 20px; }
.bloc-appel { background: var(--marque); color: #fff; border-radius: var(--rayon); padding: 28px 20px; text-align: center; }
.bloc-appel h2 { color: #fff; }
.bloc-appel .bouton { background: #fff; color: var(--marque); border-color: #fff; }
.bloc-appel .bouton:hover { background: var(--creme); }
.modale { position: fixed; inset: 0; z-index: 480; background: rgba(43, 42, 40, .55); display: none; align-items: flex-end; justify-content: center; padding: 0; }
.modale.ouverte { display: flex; }
.modale .panneau { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: var(--rayon) var(--rayon) 0 0; padding: 20px; }
@media (min-width: 640px) { .modale { align-items: center; padding: 16px; } .modale .panneau { border-radius: var(--rayon); } }
.impression-seulement { display: none; }
@media print { .entete, .pied, .whatsapp-flottant, .barre-mobile, .bandeau-cookies, .messages, .bouton, .menu-espace, .ariane { display: none !important; } body { background: #fff; } .impression-seulement { display: block; } .carte, .recap { box-shadow: none; border: 1px solid #ccc; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Bandeau de synchronisation : nouvelles informations disponibles pendant une saisie */
.sync-bandeau { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 450; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--anthracite, #2b2b2b); color: #fff; border-radius: 999px; box-shadow: var(--ombre-forte, 0 8px 24px rgba(0,0,0,.25)); font-size: .9rem; max-width: calc(100vw - 32px); animation: apparait .25s ease; }
.sync-bandeau .bouton { margin: 0; }

/* Champ mot de passe avec bouton « Afficher / Masquer » */
.champ-mdp { position: relative; display: block; width: 100%; }
.champ-mdp input { width: 100%; padding-right: 88px !important; }
.bouton-oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 1px solid var(--gris-clair, #ddd); background: #fff; color: var(--marque, #5C3A16); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.bouton-oeil:hover { background: var(--creme, #F7F3EC); }