/* Socle commun : remise à zéro + composants fonctionnels (tiroir, recherche,
   commande, textes légaux, formulaires). Aucune direction artistique ici : tout
   passe par les variables ci-dessous, que chaque boutique redéfinit dans styles.css. */
:root {
  --fond: #ffffff; --fond-2: #f5f5f3; --texte: #1a1a1a; --texte-doux: #666666;
  --accent: #222222; --accent-texte: #ffffff; --bord: #e4e4e0; --rayon: 4px;
  --police-titre: Georgia, serif; --police-texte: system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.sans-defilement { overflow: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fond); padding: 10px 14px; }
.evitement:focus { left: 8px; top: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.a-completer { background: #fff3a3; color: #5c4a00; padding: 0 4px; font-style: normal; border-radius: 2px; }
.anim [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim [data-apparait].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* Tiroir panier */
.voile { position: fixed; inset: 0; background: rgba(20, 20, 20, .4); opacity: 0; transition: opacity .25s; z-index: 60; }
.voile.ouvert { opacity: 1; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fond); z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s ease; }
.tiroir.ouvert { transform: none; }
.tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bord); }
.tiroir-entete h2 { margin: 0; font-size: 1.15rem; }
.tiroir-fermer { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.tiroir-liste { flex: 1; overflow-y: auto; padding: 8px 20px; }
.tiroir-pied { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); }
.tiroir-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; margin-bottom: 6px; }
.tiroir-note { font-size: .85rem; color: var(--texte-doux); margin-bottom: 12px; }
.tiroir-commander, .bouton, .achat-bouton, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  display: block; width: 100%; text-align: center; text-decoration: none; background: var(--accent); color: var(--accent-texte);
  border: 0; border-radius: var(--rayon); padding: 15px 18px; font-weight: 600; min-height: 48px;
}
.bouton { display: inline-block; width: auto; }
.tiroir-voir { display: block; text-align: center; padding: 10px; font-size: .9rem; }
.ligne-panier { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.ligne-panier img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--rayon); }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-nom { display: block; text-decoration: none; font-weight: 600; }
.ligne-option { display: block; font-size: .85rem; color: var(--texte-doux); }
.ligne-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: var(--rayon); }
.quantite button { background: none; border: 0; width: 36px; height: 36px; font-size: 1.1rem; }
.quantite span { min-width: 24px; text-align: center; }
.ligne-retirer { background: none; border: 0; padding: 6px 0 0; font-size: .8rem; color: var(--texte-doux); text-decoration: underline; }
.panier-vide { text-align: center; padding: 40px 10px; }
div.page-panier, .ck, .merci { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; }
.panier-total { max-width: 420px; margin: 20px 0 0 auto; }
.merci { max-width: 640px; text-align: center; padding-top: 64px; }

/* Barre d'achat collée */
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--bord); transform: translateY(110%); transition: transform .2s; }
.barre-achat.visible { transform: none; }
.barre-achat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.barre-achat-texte span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat button { width: auto; padding: 12px 22px; min-height: 44px; }
@media (max-width: 899px) { .barre-achat { display: flex; } .page-produit { padding-bottom: 84px; } }

/* Bloc d'achat */
.achat-option { border: 0; padding: 0; margin: 0 0 14px; }
.achat-option legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.achat-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.achat-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.achat-choix span { display: block; min-width: 48px; min-height: 44px; padding: 10px 12px; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; }
.achat-choix input:checked + span { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.achat-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.achat-erreur { color: #a4262c; font-size: .9rem; margin: 0 0 10px; }
.fiche-infos { margin: 0; }
.fiche-infos > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.fiche-infos dt { color: var(--texte-doux); }
.fiche-infos dd { margin: 0; text-align: right; }
.bloc-conformite { font-size: .85rem; color: var(--texte-doux); }
.bloc-conformite p { margin-bottom: .5em; }
.avertissements { border: 1px solid #c98a00; background: #fff8e6; color: #5a4300; padding: 10px 12px; border-radius: var(--rayon); font-size: .9rem; margin: 12px 0; }
.avertissements p { margin: 0; font-weight: 600; }
.avertissements p + p { margin-top: 6px; }

/* Bas de pied de page */
.pied-legal { font-size: .82rem; }
.pied-legal p { margin: 0 0 8px; }
.grille-vide { padding: 28px 0; }
.logos-paiement { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.logos-paiement svg { width: 42px; height: 26px; }
.lien-retractation { font-weight: 600; text-decoration: underline; }

/* Recherche */
.recherche { position: fixed; inset: 0; z-index: 80; background: var(--fond); padding: 16px; overflow-y: auto; }
.recherche-barre { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 16px; align-items: center; }
.recherche-barre input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 1.05rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.recherche-barre button { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.recherche-resultats { max-width: 720px; margin: 0 auto; }
.recherche-resultat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); text-decoration: none; }
.recherche-resultat img { width: 60px; height: 80px; object-fit: cover; border-radius: var(--rayon); }
.recherche-resultat span { flex: 1; min-width: 0; }

/* Textes légaux */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 16px 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.legal li { margin-bottom: .35em; }
.legal a { text-decoration: underline; }
.legal-intro { font-size: 1.1rem; color: var(--texte-doux); }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); }
.legal .tableau { overflow-x: auto; }
.legal-mise-a-jour { font-size: .85rem; color: var(--texte-doux); margin-top: 2.5em; }
.encadre { border: 1px solid var(--bord); background: var(--fond-2); padding: 16px 18px; border-radius: var(--rayon); margin: 1em 0; font-size: .95rem; }
.faq details { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details div { padding-top: 10px; }

/* Formulaires */
.formulaire label, .ck-form label { display: block; margin-bottom: 14px; font-size: .92rem; font-weight: 600; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-weight: 400; font-size: 16px; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.bouton-secondaire { width: auto !important; margin-top: 8px; background: none !important; color: var(--texte) !important; border: 1px solid var(--bord) !important; }
.form-message { font-size: .92rem; margin: 10px 0 0; min-height: 1.2em; }
.form-message.ok { color: #1c6b3c; }
.form-message.erreur { color: #a4262c; }
.contact-grille { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact-grille { grid-template-columns: 1fr 1.3fr; } }
.newsletter-note { font-size: .78rem; margin: 8px 0 0; color: var(--texte-doux); }

/* Commande */
.ck h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.ck h2 { font-size: 1.1rem; }
.ck-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.ck-resume { order: -1; background: var(--fond-2); padding: 16px; border-radius: var(--rayon); align-self: start; }
@media (min-width: 900px) { .ck-grille { grid-template-columns: 1.3fr 1fr; } .ck-resume { order: 0; position: sticky; top: 20px; } }
.ck-form section { margin-bottom: 26px; }
.ck-duo { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ck-ligne { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.ck-ligne img { width: 56px; height: 74px; object-fit: cover; border-radius: var(--rayon); }
.ck-ligne div { flex: 1; min-width: 0; }
.ck-ligne span, .ck-ligne small { display: block; }
.ck-ligne small { color: var(--texte-doux); }
.ck-totaux { border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 10px; }
.ck-totaux > div { display: flex; justify-content: space-between; padding: 3px 0; }
.ck-total { font-size: 1.15rem; font-weight: 600; margin-top: 6px; }
.ck-securite, .ck-note { font-size: .85rem; color: var(--texte-doux); margin: 10px 0; }
.ck-indisponible { padding: 14px; background: var(--fond-2); border-radius: var(--rayon); }
.ck-form .ck-cgv { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.ck-cgv input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
[data-payer]:disabled { opacity: .72; cursor: not-allowed; }

/* Consentement */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 480px; margin: 0 auto; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: .9rem; }
.consent p { margin-bottom: 10px; }
.consent div { display: flex; gap: 8px; }
.consent button { flex: 1; padding: 10px; border: 1px solid var(--texte); background: var(--fond); border-radius: var(--rayon); }

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/big-shoulders-display-800.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/big-shoulders-display-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-600.woff2) format("woff2")}

/* ==========================================================================
   Drelqa — le plan de quartier
   Béton, papier, encre, jaune de marquage, une touche de rouge panneau.
   Plaques émaillées, passages piétons, affiches collées au mur.
   ========================================================================== */
:root {
  --beton: #e9e8e4; --papier: #f7f6f2; --encre: #141414; --jaune: #ffd400; --rouge: #d7261e;
  --route: #d6d3cb; --bordure: #a7a49c; --joint: #cfccc4; --blanc: #fffefb;
  --fond: #f7f6f2; --fond-2: #e9e8e4; --texte: #141414; --texte-doux: #55534e;
  --accent: #ffd400; --accent-texte: #141414; --bord: #c9c6be; --rayon: 6px;
  --police-titre: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --police-texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gouttiere: 16px; --large: 1240px;
  --ombre-dure: 4px 4px 0 var(--encre);
}

body {
  background-color: var(--beton);
  background-image: radial-gradient(rgba(20, 20, 20, .045) 1px, transparent 1.4px), radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
  font-size: 16px;
}
:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; box-shadow: 0 0 0 6px var(--jaune); }
h1, h2, h3 { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; hyphens: none; }
a { text-underline-offset: 3px; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 .76rem/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; }
.surtitre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--rouge); }
.petit-titre { font-size: 1.8rem; margin: 0 0 10px; }
.lien-bouton { background: none; border: 0; padding: 0 2px; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; color: var(--encre); }

/* ---------------------------------------------------------- plaques de rue */
.plaque {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 7px 16px 8px; background: var(--encre); color: var(--papier); border-radius: 9px; text-decoration: none; line-height: 1; text-align: center;
  box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4.5px var(--papier);
  transition: background-color .18s, color .18s, transform .18s;
}
.plaque-type { font: 600 .62rem/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; }
.plaque-nom { font: 800 1.35rem/1 var(--police-titre); letter-spacing: .03em; text-transform: uppercase; }
a.plaque:hover, a.plaque[aria-current], .plaque-jaune {
  background: var(--jaune); color: var(--encre); box-shadow: inset 0 0 0 3px var(--jaune), inset 0 0 0 4.5px var(--encre), 0 0 0 2px var(--encre);
}
.plaque-jaune:hover { background: var(--encre); color: var(--papier); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4.5px var(--papier); }
.plaque-mini { min-height: 44px; padding: 6px 11px 7px; }
.plaque-mini .plaque-nom { font-size: 1.08rem; }
.plaque-mini .plaque-type { font-size: .54rem; }
.plaque-grande, .plaque-moyenne {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; width: 100%;
  padding: 14px 18px 15px; text-align: left; border-radius: 11px;
  box-shadow: inset 0 0 0 4px var(--encre), inset 0 0 0 6px var(--papier);
}
.plaque-grande .plaque-type, .plaque-moyenne .plaque-type { grid-column: 1; font-size: .7rem; }
.plaque-grande .plaque-nom { grid-column: 1; font-size: 2.1rem; }
.plaque-moyenne .plaque-nom { grid-column: 1; font-size: 1.7rem; }
.plaque-compte {
  grid-column: 2; grid-row: 1 / span 2; font: 600 .78rem/1 var(--police-texte); white-space: nowrap;
  background: var(--jaune); color: var(--encre); padding: 6px 9px; border-radius: 99px;
}
.plaque-grande.plaque-jaune, .plaque-moyenne.plaque-jaune { box-shadow: inset 0 0 0 4px var(--jaune), inset 0 0 0 6px var(--encre), 0 0 0 2px var(--encre); }
.plaque-jaune .plaque-compte { background: var(--encre); color: var(--papier); }
a.plaque-grande:hover .plaque-compte, a.plaque-moyenne:hover .plaque-compte { background: var(--encre); color: var(--papier); }
.plaque-geante { padding: 14px 24px 18px; border-radius: 14px; box-shadow: inset 0 0 0 5px var(--encre), inset 0 0 0 7.5px var(--papier); margin: 0; max-width: 100%; }
.plaque-geante .plaque-type { font-size: clamp(.75rem, 2.6vw, 1rem); }
.plaque-geante .plaque-nom { font-size: clamp(2.7rem, 12.5vw, 6.2rem); line-height: .95; }

/* ------------------------------------------------------------- boutons */
.bouton-plaque, .bouton {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: auto;
  min-height: 56px; padding: 0 18px 0 20px; background: var(--jaune); color: var(--encre);
  border: 3px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre-dure);
  font: 800 1.6rem/1 var(--police-titre); letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.bouton-plaque svg { width: 22px; height: 22px; flex: none; }
.bouton-plaque:hover, .bouton:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
.bouton-trait {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px;
  border: 3px solid var(--encre); border-radius: var(--rayon); background: var(--papier); color: var(--encre);
  font: 800 1.3rem/1 var(--police-titre); text-transform: uppercase; text-decoration: none;
}
.bouton-trait:hover { background: var(--jaune); }

/* -------------------------------------------------- le passage piéton */
.passage {
  height: 24px; border-top: 3px solid var(--encre); border-bottom: 3px solid var(--encre);
  background: var(--route) repeating-linear-gradient(90deg, var(--jaune) 0 26px, transparent 26px 46px);
}
.passage-une { height: 34px; background-image: repeating-linear-gradient(90deg, var(--jaune) 0 34px, transparent 34px 58px); animation: defile 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes defile { from { background-position: -232px 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------- l'entête */
.entete {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 8px var(--gouttiere); background: var(--beton); border-bottom: 3px solid var(--encre);
}
.entete-logo { display: block; width: 124px; flex: none; }
.logo-plaque { width: 100%; height: auto; }
.entete-rues { display: none; }
.entete-outils { margin-left: auto; display: flex; gap: 8px; }
.outil {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: var(--papier); color: var(--encre); border: 2px solid var(--encre); border-radius: var(--rayon);
}
.outil svg { width: 24px; height: 24px; }
.outil-sac svg { width: 28px; height: 28px; }
.outil:hover { background: var(--jaune); }
.compteur {
  position: absolute; top: -9px; right: -9px; min-width: 23px; height: 23px; padding: 0 5px; border-radius: 12px;
  background: var(--jaune); color: var(--encre); border: 2px solid var(--encre); font: 600 .74rem/19px var(--police-texte); text-align: center;
}
.compteur[data-n="0"] { background: var(--papier); }
.entete-leger { position: static; justify-content: space-between; }
.entete-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--encre); text-decoration: none; }
.entete-retour svg { width: 20px; height: 20px; transform: rotate(180deg); }
.entete-retour:hover span { text-decoration: underline; }

/* ---------------------------------------- le menu : un poteau indicateur */
.menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(390px, 100%); overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px; padding: 14px 16px calc(28px + env(safe-area-inset-bottom));
  background: var(--beton); border-left: 3px solid var(--encre); transform: translateX(100%); transition: transform .26s ease;
}
.menu.ouvert { transform: none; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; }
.menu-titre { font: 600 .74rem var(--police-texte); letter-spacing: .14em; text-transform: uppercase; }
.menu-fermer { width: 44px; height: 44px; border: 2px solid var(--encre); border-radius: var(--rayon); background: var(--papier); font-size: 1.8rem; line-height: 1; }
.poteau { position: relative; display: grid; gap: 10px; padding: 6px 0 46px 30px; }
.poteau::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 9px; border-radius: 5px 5px 0 0; background: var(--bordure); box-shadow: inset -3px 0 0 rgba(20, 20, 20, .18); }
.poteau::after { content: ""; position: absolute; left: 0; bottom: 0; width: 27px; height: 10px; border-radius: 3px; background: var(--encre); }
.fleche-panneau {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 38px 0 16px;
  background: var(--encre); color: var(--papier); text-decoration: none; font: 800 1.45rem/1 var(--police-titre); text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.fleche-panneau small { font: 600 .76rem/1 var(--police-texte); background: var(--jaune); color: var(--encre); padding: 5px 8px; border-radius: 99px; }
.fleche-panneau:nth-child(even) { margin-left: 14px; }
.fleche-jaune { background: var(--jaune); color: var(--encre); }
.fleche-jaune small { background: var(--encre); color: var(--papier); }
.fleche-panneau:hover { background: var(--jaune); color: var(--encre); }
.menu-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-bas a { display: flex; align-items: center; min-height: 46px; padding: 0 12px; background: var(--papier); border: 2px solid var(--encre); border-radius: var(--rayon); font-weight: 600; font-size: .92rem; text-decoration: none; }
.menu-bas a:hover { background: var(--jaune); }

/* --------------------------------------------------------- sections */
.une, .plan, .mur, .trajet, .signalisation, .meme-trottoir { position: relative; }
.plan, .mur, .trajet, .signalisation { padding: 42px max(var(--gouttiere), calc((100% - var(--large)) / 2)) 52px; }
.plan, .trajet { background: var(--papier); }
.section-tete { max-width: 680px; margin-bottom: 24px; }
.section-tete h2 { font-size: clamp(2.6rem, 11vw, 5rem); margin: 0 0 10px; }
.section-intro { margin: 0; color: var(--texte-doux); font-size: 1.02rem; }

/* ----------------------------------------------------------- la une */
.une { display: grid; background: var(--beton); }
.une-photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--route); }
.une-img { width: 100%; height: 100%; object-fit: cover; }
.une-etiquette {
  position: absolute; left: 12px; bottom: 14px; padding: 7px 11px 8px; background: var(--jaune); color: var(--encre);
  border: 2px solid var(--encre); font: 800 1.05rem/1 var(--police-titre); text-transform: uppercase; transform: rotate(-3deg);
}
.une-texte { padding: 16px var(--gouttiere) 24px; }
.une-sur { margin: 0 0 8px; font: 600 .8rem/1.3 var(--police-texte); letter-spacing: .08em; text-transform: uppercase; }
.une-titre { font-size: clamp(3.4rem, 16.5vw, 8.8rem); line-height: .88; margin: 0 0 18px; }
.une-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.une-reassure { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; font-size: .9rem; font-weight: 600; }
.une-reassure span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--rouge); }

/* -------------------------------------------------------- le plan */
.plan-carte { display: none; }
.plan-svg { width: 100%; height: auto; border: 3px solid var(--encre); border-radius: 12px; background: #ecebe6; }
.plan-fond { fill: #ecebe6; }
.plan-ilots rect { fill: #dedbd3; }
.plan-rues path { stroke: var(--encre); fill: none; }
.plan-rues circle { fill: var(--encre); }
.plan-marquage path { stroke: var(--jaune); stroke-width: 3.5; stroke-dasharray: 22 16; fill: none; }
.plan-passages path { stroke: var(--jaune); stroke-width: 6; }
.plan-place { fill: #ecebe6; stroke: var(--jaune); stroke-width: 6; }
.pp-fond { fill: var(--encre); transition: fill .18s; }
.pp-filet { fill: none; stroke: var(--papier); stroke-width: 2; }
.pp-type, .pp-nom { transition: fill .18s; }
.pp-type { font: 600 13px var(--police-texte); letter-spacing: 2px; fill: var(--papier); }
.pp-nom { font: 800 35px var(--police-titre); letter-spacing: 1.5px; fill: var(--papier); }
.pp-nom-petit { font-size: 30px; }
.pp-compte { font: 600 15px var(--police-texte); fill: var(--encre); }
.plan-plaque { cursor: pointer; }
.plan-plaque:hover .pp-fond, .plan-plaque:focus-visible .pp-fond { fill: var(--jaune); }
.plan-plaque:hover .pp-type, .plan-plaque:hover .pp-nom, .plan-plaque:focus-visible .pp-type, .plan-plaque:focus-visible .pp-nom { fill: var(--encre); }
.plan-plaque:hover .pp-filet, .plan-plaque:focus-visible .pp-filet { stroke: var(--encre); }
.plan-plaque:focus-visible { outline: none; }
.plan-plaque-place .pp-fond { fill: var(--jaune); stroke: var(--encre); stroke-width: 2; }
.plan-plaque-place .pp-filet { stroke: var(--encre); }
.plan-plaque-place text { fill: var(--encre); }
.plan-plaque-place:hover .pp-fond { fill: var(--encre); }
.plan-plaque-place:hover text { fill: var(--papier); }
.plan-plaque-place:hover .pp-filet { stroke: var(--papier); }
.plan-liste { display: grid; gap: 14px; }
.plan-liste .plaque-grande { padding: 11px 16px 12px; }
.plan-liste p { margin: 5px 4px 0; font-size: .86rem; line-height: 1.4; color: var(--texte-doux); }

/* ------------------------------------------------ le mur d'affiches */
.mur {
  background-color: var(--beton);
  background-image: repeating-linear-gradient(90deg, transparent 0 238px, rgba(20, 20, 20, .055) 238px 240px), repeating-linear-gradient(0deg, transparent 0 158px, rgba(20, 20, 20, .04) 158px 160px);
}
.mur-grille, .grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; padding-top: 12px; }
.mur-suite { margin: 34px 0 0; text-align: center; }

.affiche {
  --penche: -1.1deg;
  position: relative; background: var(--papier); border: 1px solid var(--joint); padding: 7px 7px 11px;
  box-shadow: 2px 3px 0 rgba(20, 20, 20, .13); transform: rotate(var(--penche)); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.affiche:nth-child(4n+2) { --penche: .9deg; }
.affiche:nth-child(4n+3) { --penche: -.4deg; }
.affiche:nth-child(4n) { --penche: 1.3deg; }
.affiche::before, .affiche::after, .affiche-grande::before, .affiche-grande::after, .note-collee::before, .legal::before, .legal::after {
  content: ""; position: absolute; top: -9px; z-index: 3; width: 44px; height: 17px; pointer-events: none;
  background: rgba(226, 213, 168, .82); border-left: 1px dashed rgba(20, 20, 20, .14); border-right: 1px dashed rgba(20, 20, 20, .14);
}
.affiche::before, .affiche-grande::before, .legal::before { left: -9px; transform: rotate(-33deg); }
.affiche::after, .affiche-grande::after, .legal::after { right: -9px; transform: rotate(31deg); }
.affiche:hover, .affiche:focus-within { transform: rotate(0) translateY(-4px); box-shadow: 3px 7px 0 rgba(20, 20, 20, .14); }
.affiche-lien { display: block; color: inherit; text-decoration: none; }
.affiche-photo { display: block; aspect-ratio: 1; overflow: hidden; background: var(--blanc); }
.affiche-photo img { width: 100%; height: 100%; object-fit: cover; }
.affiche-prix {
  position: absolute; z-index: 2; top: 12px; right: -7px; padding: 6px 9px 7px; background: var(--jaune); color: var(--encre);
  border: 2px solid var(--encre); border-radius: 99px; font: 800 1.08rem/1 var(--police-titre); transform: rotate(5deg); white-space: nowrap;
}
.affiche-legende { display: block; padding: 10px 3px 0; }
.affiche-rue { display: block; font: 600 .64rem/1.25 var(--police-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.affiche-nom { margin: 4px 0 5px; font-size: 1.35rem; line-height: .98; }
.affiche-meta { display: block; font-size: .8rem; line-height: 1.3; color: var(--texte-doux); }
.affiche-lien:hover .affiche-nom { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--jaune); }

/* ---------------------------------------------------- le trajet du jour */
.trajet-choix { display: grid; gap: 10px; margin-bottom: 18px; }
.trajet-bouton {
  display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; min-height: 58px; padding: 6px 14px; text-align: left;
  background: var(--papier); color: var(--encre); border: 3px solid var(--encre); border-radius: var(--rayon);
}
.trajet-nom { font: 800 1.75rem/1 var(--police-titre); text-transform: uppercase; }
.trajet-texte { font-size: .88rem; line-height: 1.3; color: var(--texte-doux); }
.trajet-bouton[aria-pressed="true"] { background: var(--jaune); box-shadow: var(--ombre-dure); }
.trajet-bouton[aria-pressed="true"] .trajet-texte { color: var(--encre); }
.trajet-bouton:hover { background: var(--jaune); }
.trajet-resultat, .mur-trois {
  display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 16px 10px 14px; margin: 0 -10px; scrollbar-width: thin;
}
.trajet-resultat .affiche, .mur-trois .affiche { scroll-snap-align: start; }
.tire .affiche { animation: colle .45s cubic-bezier(.2, .8, .2, 1) both; }
.tire .affiche:nth-child(2) { animation-delay: .08s; }
.tire .affiche:nth-child(3) { animation-delay: .16s; }
@keyframes colle { from { opacity: 0; transform: translateY(-14px) rotate(-5deg); } }
.trajet-note { margin: 14px 0 0; font-size: .9rem; color: var(--texte-doux); }

/* ---------------------------------------------------- la signalisation */
.panneaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
.panneau { display: flex; flex-direction: column; align-items: center; text-align: center; }
.panneau:last-child:nth-child(odd) { grid-column: 1 / -1; }
.panneau svg { width: 96px; height: auto; }
.panneau p { margin: 10px 0 0; }
.panneau strong { display: block; font: 800 1.3rem/1.02 var(--police-titre); text-transform: uppercase; }
.panneau span { display: block; margin-top: 4px; font-size: .86rem; color: var(--texte-doux); }

/* ---------------------------------------------- boutique et collections */
.liste { max-width: var(--large); margin: 0 auto; padding: 26px var(--gouttiere) 56px; }
.liste-tete { margin-bottom: 8px; }
.liste-titre { font-size: clamp(3rem, 14vw, 6.4rem); margin: 0 0 10px; }
.liste-intro { max-width: 680px; margin: 12px 0 0; }
.liste-tete-rue .plaque-geante { transform: rotate(-1deg); }
.filtres { margin: 20px 0 22px; padding: 10px 12px 12px; background: var(--papier); border: 3px solid var(--encre); border-radius: 12px; }
.filtres-rangee { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--bord); }
.filtres-titre { font: 600 .68rem var(--police-texte); letter-spacing: .12em; text-transform: uppercase; }
.filtres-defile {
  display: flex; gap: 7px; overflow-x: auto; padding: 3px 30px 3px 2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
}
.filtres-defile::-webkit-scrollbar { display: none; }
.filtre {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px;
  background: var(--papier); color: var(--encre); border: 2px solid var(--encre); border-radius: 7px; font: 600 .88rem var(--police-texte);
  box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 3px rgba(20, 20, 20, .4);
}
.filtre:hover { background: var(--jaune); box-shadow: inset 0 0 0 2px var(--jaune), inset 0 0 0 3px var(--encre); }
.filtre.actif { background: var(--encre); color: var(--papier); box-shadow: inset 0 0 0 2px var(--encre), inset 0 0 0 3.5px var(--papier); }
.pastille { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--encre); }
.filtre.actif .pastille { border-color: var(--papier); }
.filtres-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-top: 12px; }
.filtres-compte { margin: 0; font: 800 1.45rem/1 var(--police-titre); text-transform: uppercase; }
.tri { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; }
.tri select { min-height: 44px; padding: 0 10px; font-size: 16px; border: 2px solid var(--encre); border-radius: var(--rayon); background: var(--blanc); }
.grille-vide { padding: 34px 10px; text-align: center; }
.grille-vide-panneau span {
  display: inline-block; margin-bottom: 12px; padding: 8px 16px 9px; background: var(--encre); color: var(--papier); border-radius: 9px;
  box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4.5px var(--papier), inset 0 -10px 0 -4px var(--rouge);
  font: 800 1.6rem/1 var(--police-titre); text-transform: uppercase;
}
.autres-rues { padding-top: 32px; }
.autres-rues ul { display: grid; gap: 12px; }
.liste .passage { margin: 46px calc(-1 * var(--gouttiere)) 0; }

/* -------------------------------------------------------- la fiche */
.fiche { max-width: var(--large); margin: 0 auto; padding: 14px var(--gouttiere) 46px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; font-size: .84rem; color: var(--texte-doux); }
.fil a { display: inline-flex; align-items: center; min-height: 32px; color: var(--encre); }
.fiche-grille { display: grid; gap: 22px; }
.fiche-defile {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 16px 10px 12px; margin: 0 -10px; scrollbar-width: none;
}
.fiche-defile::-webkit-scrollbar { display: none; }
.affiche-grande {
  position: relative; margin: 0; padding: 10px; background: var(--papier); border: 1px solid var(--joint);
  box-shadow: 3px 4px 0 rgba(20, 20, 20, .14); transform: rotate(-.7deg); scroll-snap-align: center;
}
.affiche-grande-2 { transform: rotate(.9deg); }
.affiche-grande img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--blanc); }
.fiche-photos-aide { margin: 4px 0 0; font-size: .78rem; text-align: center; color: var(--texte-doux); }
.fiche-rue { display: inline-flex; width: auto; min-height: 44px; padding: 8px 16px 9px; }
.fiche-rue .plaque-nom { font-size: 1.5rem; }
.fiche-nom { margin: 14px 0 10px; font-size: clamp(2.9rem, 13vw, 5rem); line-height: .95; }
.fiche-prix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.autocollant {
  display: inline-block; padding: 7px 16px 8px; background: var(--jaune); color: var(--encre); border: 3px solid var(--encre);
  border-radius: 99px; font: 800 2.1rem/1 var(--police-titre); transform: rotate(-3deg);
}
.fiche-prix small { font-size: .84rem; color: var(--texte-doux); }
.fiche-resume { font-size: 1.06rem; margin-bottom: 14px; }
.coloris-titre { margin: 0 0 8px; font: 600 .72rem var(--police-texte); letter-spacing: .12em; text-transform: uppercase; }
.coloris ul { display: flex; flex-wrap: wrap; gap: 8px; }
.coloris a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; font-size: .72rem; line-height: 1.2; text-align: center; text-decoration: none; }
.coloris img { width: 64px; height: 64px; object-fit: cover; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon); }
.coloris a:hover img { box-shadow: 0 0 0 3px var(--jaune); }
.coloris-ici { margin: 12px 0 14px; font-size: .92rem; }

.achat-option { min-width: 0; margin-bottom: 4px; }
.achat-option legend { margin-bottom: 8px; font: 800 1.35rem/1 var(--police-titre); text-transform: uppercase; }
/* 21 pointures, du 36 au 46 par demi-pointure : 7 pavés sur 3 rangées pleines, en 390 px comme en bureau */
.achat-choix {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 3px;
  background: var(--bordure); border: 3px solid var(--encre); border-radius: 8px;
}
.achat-choix label { display: block; min-width: 0; }
.achat-choix span {
  display: grid; place-items: center; min-width: 0; min-height: 50px; padding: 0 1px; border: 0; border-radius: 2px;
  background: var(--beton); color: var(--encre); font: 800 1.3rem/1 var(--police-titre); white-space: nowrap; letter-spacing: 0;
  box-shadow: inset 0 -3px 0 rgba(20, 20, 20, .13), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.achat-choix span:hover { background: var(--papier); }
.achat-choix input:checked + span { background: var(--jaune); color: var(--encre); border: 0; box-shadow: inset 0 0 0 2px var(--encre); }
.achat-choix input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: -5px; }
.achat-rappel { margin: 10px 0 2px; font-size: .92rem; }
.achat-rappel.choisie strong { padding: 0 6px; background: var(--jaune); border-radius: 3px; }
.achat-guide { margin: 0 0 4px; font-size: .9rem; }
.achat-guide a { font-weight: 600; color: var(--encre); }
.achat-erreur { color: var(--rouge); font-weight: 600; }
.achat-bouton, .tiroir-commander, [data-payer], .formulaire button[type="submit"], .formulaire [data-confirmer] {
  min-height: 58px; margin-top: 12px; background: var(--jaune); color: var(--encre); border: 3px solid var(--encre); border-radius: var(--rayon);
  box-shadow: var(--ombre-dure); font: 800 1.5rem/1 var(--police-titre); letter-spacing: .02em; text-transform: uppercase;
  transition: transform .15s, box-shadow .15s;
}
.achat-bouton:hover, .tiroir-commander:hover, [data-payer]:not(:disabled):hover, .formulaire button[type="submit"]:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
.fiche-promesses { display: grid; gap: 7px; margin: 18px 0; padding: 12px 14px; border: 2px dashed var(--encre); border-radius: 9px; font-size: .9rem; font-weight: 600; }
.fiche-promesses li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--rouge); }
.trois-points { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.trois-points li { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: start; }
.point-num {
  grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px;
  background: var(--encre); color: var(--papier); box-shadow: inset 0 0 0 2.5px var(--encre), inset 0 0 0 4px var(--papier);
  font: 800 1.3rem/1 var(--police-titre);
}
.point-titre { font: 800 1.15rem/1.1 var(--police-titre); text-transform: uppercase; }
.point-texte { font-size: .94rem; }
.fiche-texte { margin: 24px 0 18px; }
.fiche-pointure { padding: 10px 12px; background: var(--beton); border-left: 5px solid var(--jaune); font-size: .92rem; }
.fiche-pointure a { color: var(--encre); font-weight: 600; }
.volet { border-top: 3px solid var(--encre); padding: 4px 0 12px; }
.volet:last-child { border-bottom: 3px solid var(--encre); }
.volet summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; font: 800 1.25rem/1 var(--police-titre); text-transform: uppercase; }
.volet summary::-webkit-details-marker { display: none; }
.volet summary::after { content: "+"; font-size: 1.8rem; }
.volet[open] summary::after { content: "–"; }
.fiche-infos > div { border-bottom: 1px dashed var(--bord); }
.meme-trottoir { padding-top: 34px; }
.fiche .passage { margin: 46px calc(-1 * var(--gouttiere)) 0; }
.barre-achat { background: var(--papier); border-top: 3px solid var(--encre); }
.barre-achat-texte span { font: 800 1.1rem/1.1 var(--police-titre); text-transform: uppercase; }
.barre-achat button { margin: 0; min-height: 48px; background: var(--jaune); color: var(--encre); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); font: 800 1.25rem/1 var(--police-titre); text-transform: uppercase; }

/* ------------------------------------------------------ notre histoire */
.histoire { max-width: var(--large); margin: 0 auto; padding: 30px var(--gouttiere) 64px; }
.histoire-titre { font-size: clamp(3.6rem, 17vw, 8.6rem); line-height: .88; margin: 0 0 18px; }
.histoire-intro { max-width: 680px; font-size: 1.12rem; }
.histoire .passage { margin: 34px calc(-1 * var(--gouttiere)); }
.histoire-affiches { display: grid; gap: 34px 22px; }
.note-collee { --penche: -1deg; position: relative; margin: 0; padding: 24px 20px 18px; background: var(--papier); border: 1px solid var(--joint); box-shadow: 3px 4px 0 rgba(20, 20, 20, .12); transform: rotate(var(--penche)); }
.note-collee:nth-child(even) { --penche: .8deg; }
.note-collee::before { left: calc(50% - 22px); top: -10px; transform: rotate(-3deg); }
.note-collee h2 { font-size: clamp(2.1rem, 9vw, 3rem); margin: 0 0 12px; }
.note-collee p { margin: 0; }
.histoire-suite { margin-top: 40px; text-align: center; }

/* ------------------------------------------------ textes légaux et aide */
.legal { position: relative; max-width: 820px; margin: 28px var(--gouttiere) 60px; padding: 30px 20px 40px; background: var(--papier); border: 1px solid var(--joint); box-shadow: 3px 4px 0 rgba(20, 20, 20, .12); }
.legal-entete { margin-bottom: 18px; }
.legal-avis { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 4px 9px 4px 4px; border: 2px solid var(--rouge); border-radius: 5px; color: var(--rouge); font: 600 .72rem/1 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; }
.legal-avis span { padding: 4px 7px; background: var(--rouge); color: #fff; border-radius: 2px; }
.legal h1 { font-size: clamp(2.5rem, 10.5vw, 4.4rem); margin: 0 0 12px; }
.legal h2 { font-size: 1.65rem; margin: 1.7em 0 .6em; padding-top: 14px; border-top: 3px solid var(--encre); }
.legal h3 { font-family: var(--police-texte); font-size: 1.05rem; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.legal a { color: var(--encre); text-decoration-thickness: 2px; }
.legal th { font-family: var(--police-titre); font-size: 1.05rem; text-transform: uppercase; border-bottom: 3px solid var(--encre); }
.legal th, .legal td { padding: 8px 5px; }
.legal tbody tr:nth-child(odd) { background: rgba(233, 232, 228, .6); }
.legal ol { padding-left: 1.3em; }
.legal ol li { margin-bottom: .4em; }
.encadre { background: var(--beton); border: 2px solid var(--encre); border-left-width: 8px; }
.guide-demies { margin: 12px 0 0; padding: 10px 12px; background: var(--beton); border-left: 5px solid var(--jaune); }
.faq-groupe { border-top: 0 !important; padding-top: 0 !important; display: inline-block; margin-top: 1.2em !important; padding: 4px 10px 5px !important; background: var(--jaune); border: 2px solid var(--encre) !important; font-size: 1.3rem !important; }
.faq details { border-bottom: 2px solid var(--encre); padding: 4px 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--encre); color: var(--papier); font: 800 1.3rem/1 var(--police-titre); }
.faq details[open] summary::after { content: "–"; background: var(--jaune); color: var(--encre); }
.faq details div { padding: 2px 0 14px; }

/* ------------------------------------------------------- formulaires */
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select { min-height: 48px; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon); }
.formulaire label, .ck-form label { font-weight: 600; }
.bouton-secondaire { box-shadow: none !important; background: var(--papier) !important; border: 2px solid var(--encre) !important; font: 600 1rem var(--police-texte) !important; text-transform: none !important; }
.contact-infos h2, .formulaire h2 { font-size: 1.9rem; }
.contact-infos p { padding-left: 12px; border-left: 4px solid var(--jaune); }

/* ------------------------------------------------------------ le tiroir */
.voile { background: rgba(20, 20, 20, .45); }
.tiroir { background: var(--papier); border-left: 3px solid var(--encre); }
.tiroir-entete { position: relative; padding: 14px 16px; background: var(--beton); border-bottom: 0; }
.tiroir-entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 16px; border-top: 3px solid var(--encre); border-bottom: 3px solid var(--encre);
  background: var(--route) repeating-linear-gradient(90deg, var(--jaune) 0 16px, transparent 16px 28px);
}
.tiroir-entete h2 {
  margin: 0; padding: 6px 14px 7px; background: var(--encre); color: var(--papier); border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4.5px var(--papier); font-size: 1.6rem;
}
.tiroir-fermer, .recherche-barre button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--papier); border: 2px solid var(--encre); border-radius: var(--rayon); font-size: 1.8rem; line-height: 1; }
.tiroir-liste { padding: 26px 16px 8px; }
.ligne-panier { border-bottom: 1px dashed var(--bord); }
.ligne-panier img { width: 76px; height: 76px; object-fit: cover; background: var(--blanc); border: 2px solid var(--encre); border-radius: 4px; }
.ligne-nom { font: 800 1.25rem/1.05 var(--police-titre); text-transform: uppercase; }
.ligne-option { margin-top: 2px; }
.ligne-bas strong { font: 800 1.25rem/1 var(--police-titre); }
.quantite { border: 2px solid var(--encre); border-radius: var(--rayon); background: var(--blanc); }
.quantite button { width: 40px; height: 40px; }
.tiroir-pied { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--beton); border-top: 3px solid var(--encre); }
.tiroir-ligne strong { font: 800 1.6rem/1 var(--police-titre); }
.tiroir-commander { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.tiroir-voir { color: var(--encre); font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.panier-vide p { font: 800 1.7rem/1.05 var(--police-titre); text-transform: uppercase; }
.panier-vide a { display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; border: 3px solid var(--encre); border-radius: var(--rayon); background: var(--jaune); color: var(--encre); font: 800 1.3rem/1 var(--police-titre); text-transform: uppercase; text-decoration: none; box-shadow: var(--ombre-dure); }

/* --------------------------------------------------- panier, commande */
div.page-panier h1, .ck h1, .merci h1 { font-size: clamp(2.8rem, 12vw, 4.6rem); margin-bottom: 20px; }
.panier-lignes { padding: 4px 16px; background: var(--papier); border: 1px solid var(--joint); box-shadow: 3px 4px 0 rgba(20, 20, 20, .12); }
.panier-total { padding: 16px; background: var(--papier); border: 3px solid var(--encre); border-radius: 10px; }
.ck-form { counter-reset: etape; }
.ck-form section { counter-increment: etape; padding: 18px 16px 8px; background: var(--papier); border: 1px solid var(--joint); border-radius: 10px; }
.ck h2 { display: flex; align-items: center; font-size: 1.55rem; }
.ck-form section > h2::before {
  content: counter(etape); flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 7px;
  background: var(--encre); color: var(--papier); box-shadow: inset 0 0 0 2.5px var(--encre), inset 0 0 0 4px var(--papier); font-size: 1.3rem;
}
.ck-valider { background: var(--beton) !important; border: 3px solid var(--encre) !important; }
.ck-resume { background: var(--papier); border: 3px solid var(--encre); border-radius: 10px; }
.ck-resume h2 { font-size: 1.55rem; }
.ck-ligne img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--encre); background: var(--blanc); }
.ck-total strong { font: 800 1.7rem/1 var(--police-titre); }
.ck-indisponible { background: var(--jaune); border: 2px solid var(--encre); color: var(--encre); }
[data-payer] { width: 100%; }
.merci { background: var(--papier); border: 1px solid var(--joint); margin-top: 30px; margin-bottom: 60px; }

/* ----------------------------------------------------------- la recherche */
.recherche { background: var(--beton); }
.recherche-barre input { min-height: 52px; font-size: 18px; background: var(--blanc); border: 3px solid var(--encre); border-radius: var(--rayon); }
.recherche-resultat { border-bottom: 1px dashed var(--bord); }
.recherche-resultat img { width: 60px; height: 60px; object-fit: cover; background: var(--blanc); border: 2px solid var(--encre); }
.recherche-resultat span { font: 800 1.2rem/1.05 var(--police-titre); text-transform: uppercase; }
.recherche-resultat strong { padding: 3px 8px; background: var(--jaune); border: 2px solid var(--encre); border-radius: 99px; font: 800 1rem/1 var(--police-titre); }
.recherche-vide { font-weight: 600; }

/* ---------------------------------------------------------------- 404 */
.introuvable { max-width: 660px; margin: 0 auto; padding: 50px var(--gouttiere) 70px; text-align: center; }
.impasse-svg { width: 112px; margin: 0 auto 16px; transform: rotate(-2deg); }
.introuvable h1 { font-size: clamp(2.7rem, 11.5vw, 4.8rem); margin-bottom: 14px; }

/* ------------------------------------------------------------- le pied */
.pied { background: var(--papier); }
.pied-trottoir { background: var(--beton); line-height: 0; }
.trottoir-svg { width: 100%; height: 70px; }
.pied-corps { display: grid; gap: 30px; max-width: var(--large); margin: 0 auto; padding: 30px var(--gouttiere) 34px; }
.logo-pied { width: 176px; }
.pied-slogan { margin: 14px 0 6px; font-weight: 600; }
.pied-mail a { color: var(--encre); font-weight: 600; }
.pied-courrier { margin-top: 18px; padding: 14px; background: var(--beton); border: 2px solid var(--encre); border-radius: 10px; }
.pied-courrier p { margin: 0 0 8px; font-size: .9rem; }
.pied-courrier-titre { font: 800 1.35rem/1 var(--police-titre) !important; text-transform: uppercase; }
.newsletter { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter input[type="email"] { flex: 1 1 170px; min-width: 0; min-height: 48px; padding: 0 12px; font-size: 16px; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon); }
.newsletter button { min-height: 48px; padding: 0 16px; background: var(--jaune); color: var(--encre); border: 2px solid var(--encre); border-radius: var(--rayon); font: 800 1.2rem/1 var(--police-titre); text-transform: uppercase; }
.newsletter .form-message, .newsletter-note { flex-basis: 100%; }
.newsletter .form-message { min-height: 0; margin: 0; }
.newsletter .form-message:empty { display: none; }
.newsletter-note a { color: var(--encre); }
.pied-titre { margin: 0 0 12px; font: 800 1.45rem/1 var(--police-titre); text-transform: uppercase; }
.pied-col ul { display: flex; flex-wrap: wrap; gap: 8px; }
.plaque-lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 13px; background: var(--encre); color: var(--papier); border-radius: 7px;
  box-shadow: inset 0 0 0 2.5px var(--encre), inset 0 0 0 3.5px var(--papier); font: 600 .84rem/1.2 var(--police-texte); text-decoration: none;
}
.plaque-lien:hover, .plaque-lien-jaune { background: var(--jaune); color: var(--encre); box-shadow: inset 0 0 0 2.5px var(--jaune), inset 0 0 0 3.5px var(--encre), 0 0 0 1.5px var(--encre); }
.pied-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; max-width: var(--large); margin: 0 auto; padding: 16px var(--gouttiere) 28px; border-top: 3px solid var(--encre); }
.pied-legal p { margin: 0; }
.pied-legal-coord { flex-basis: 100%; }
.pied-legal a { color: var(--encre); }
.logos-paiement { margin: 0; }
.pied-leger { padding: 18px var(--gouttiere) 0; background: var(--papier); border-top: 3px solid var(--encre); }
.pied-leger-liens { display: flex; flex-wrap: wrap; gap: 0 16px; max-width: var(--large); margin: 0 auto; }
.pied-leger .plaque-lien { padding: 0; background: none; color: var(--encre); box-shadow: none; text-decoration: underline; font-size: .84rem; }
.pied-leger .pied-legal { border-top: 0; }

/* ============================================================== tablette */
@media (min-width: 760px) {
  :root { --gouttiere: 28px; }
  .mur-grille, .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 24px; }
  .trajet-resultat, .mur-trois { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 14px 0 0; }
  .trajet-choix { grid-template-columns: repeat(3, 1fr); }
  .trajet-bouton { grid-template-columns: 1fr; align-content: center; gap: 4px; min-height: 96px; padding: 12px 16px; }
  .panneaux { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .panneau:last-child:nth-child(odd) { grid-column: auto; }
  .autres-rues ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trajet-resultat, .mur-grille.mur-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
  .legal th, .legal td { padding: 9px 10px; }
  .achat-choix span { min-height: 54px; font-size: 1.45rem; }
  .histoire-affiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal { margin: 40px auto 70px; padding: 44px 48px 52px; }
  .pied-corps { grid-template-columns: 1fr 1fr; }
}

/* =============================================================== bureau */
@media (min-width: 900px) {
  .une { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
  .une-photo { order: 2; aspect-ratio: auto; min-height: 540px; border-left: 3px solid var(--encre); }
  .une-texte { order: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px 48px max(28px, calc((100vw - var(--large)) / 2)); }
  .une-titre { font-size: clamp(4.6rem, 6.7vw, 7.4rem); }
  .une-boutons { max-width: 420px; }
  .une-etiquette { left: 22px; bottom: 22px; font-size: 1.3rem; }
  .plan-carte { display: block; }
  .plan-liste { display: none; }
  .fiche-grille { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .fiche-photos { position: sticky; top: 90px; }
  .fiche-defile { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 16px 0 0; gap: 0; }
  .affiche-grande-2 { width: 52%; margin: -9% -6px 0 auto; z-index: 2; }
  .fiche-photos-aide { display: none; }
  .filtres-defile { flex-wrap: wrap; overflow: visible; padding-right: 2px; -webkit-mask-image: none; mask-image: none; }
  .filtres-rangee { grid-template-columns: 70px minmax(0, 1fr); }
  .pied-corps { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
  .pied-col ul { flex-direction: column; align-items: flex-start; }
  .menu-bas { grid-template-columns: 1fr; }
}

@media (min-width: 1100px) {
  .entete { padding: 8px max(28px, calc((100% - var(--large)) / 2)); }
  .entete-logo { width: 150px; }
  .entete-rues { display: flex; align-items: center; gap: 8px; margin-left: 22px; }
  .outil-menu { display: none; }
  .mur-grille, .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 30px; }
  .affiche-nom { font-size: 1.55rem; }
  .mur-grille.mur-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .affiche-prix { font-size: 1.25rem; }
}