@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
/* ============================================================
   Zalie Smagghe — feuille de style du site, d'après DESIGN-SYSTEM.md
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root{
  --bleu-tampon:#1F2BF3;
  --beurre:#FFF9E8;
  --rose-poudre:#FCEBEA;
  --craie:#FFFFFF;
  --encre:#21242E;
  --encre-douce:#5B6072;
  --coeur:#F53B30;
  --coeur-action:#E7170B;

  --sarcelle:#527177;
  --rose-forge:#C17B73;
  --vert-pascal:#52B686;

  --accent:var(--bleu-tampon);
  --sur-accent:var(--craie);

  --sp-8:8px; --sp-16:16px; --sp-24:24px; --sp-40:40px;
  --sp-64:64px; --sp-104:104px; --sp-168:168px;

  --r-carte:4px;
  --r-bouton:999px;

  --filet:1px solid rgba(33,36,46,.10);
  --marge:clamp(20px,5vw,72px);
  --contenu:1240px;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Instrument Sans",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--beurre);
  color:var(--encre);
  font:400 1.0625rem/1.65 var(--texte);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* --- Utilitaires typographiques ----------------------------- */
.display-xl,.display-l,.display-m{
  font-family:var(--display);
  font-weight:500;
  margin:0;
  text-wrap:balance;
}
.display-xl{
  font-size:clamp(2.75rem,11vw,8rem);
  font-variation-settings:"wdth" 88,"opsz" 96;
  letter-spacing:-.03em;
  line-height:.94;
}
.display-l{
  font-size:clamp(2rem,5vw,4.5rem);
  font-variation-settings:"wdth" 94,"opsz" 48;
  letter-spacing:-.02em;
  line-height:1.02;
}
.display-m{
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-variation-settings:"wdth" 100,"opsz" 24;
  letter-spacing:-.01em;
  line-height:1.12;
}
.etiquette{
  font:500 .75rem/1.4 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* les ordinaux restent en bas de casse même dans une étiquette capitale */
.etiquette sup,.porte__num sup{text-transform:none;letter-spacing:0;margin-left:-.08em}
.donnee{
  font:400 .875rem/1.6 var(--mono);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.corps-l{font-size:1.25rem;line-height:1.55}
.corps-s{font-size:.9375rem;line-height:1.6}
.mesure{max-width:62ch}
.douce{color:var(--encre-douce)}

/* --- Accessibilité ------------------------------------------ */
.saut{
  position:absolute;left:var(--sp-16);top:-100px;z-index:100;
  background:var(--bleu-tampon);color:var(--craie);
  padding:12px 20px;border-radius:var(--r-bouton);
  font:500 .9375rem var(--texte);text-decoration:none;
}
.saut:focus{top:var(--sp-16)}
:focus-visible{outline:2px solid var(--bleu-tampon);outline-offset:3px;border-radius:2px}
.invisible{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* --- Gabarit ------------------------------------------------ */
.enveloppe{
  width:100%;max-width:var(--contenu);
  margin-inline:auto;padding-inline:var(--marge);
}
.section{padding-block:var(--sp-64)}
.section[data-serre]{padding-block:var(--sp-40)}
@media (min-width:768px){
  .section{padding-block:var(--sp-104)}
  .section[data-serre]{padding-block:var(--sp-64)}
}

/* --- En-tête ------------------------------------------------ */
.entete{border-bottom:var(--filet)}
.entete__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-16);min-height:64px;
}
.marque{
  font-family:var(--display);font-weight:600;font-size:1.125rem;
  font-variation-settings:"wdth" 92;letter-spacing:0;
  text-decoration:none;color:var(--bleu-tampon);
}
.nav-principale{display:none}
@media (min-width:768px){
  .nav-principale{display:flex;gap:var(--sp-24)}
  .nav-principale a{
    font:500 .9375rem var(--texte);text-decoration:none;
    padding:10px 2px;position:relative;
  }
  .nav-principale a::after{
    content:"";position:absolute;left:0;bottom:6px;height:1.5px;width:100%;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .18s ease-out;
  }
  .nav-principale a:hover::after,.nav-principale a:focus-visible::after{transform:scaleX(1)}
}

/* --- Ruban d'ancres (mobile) -------------------------------- */
.ruban{
  position:sticky;top:0;z-index:40;
  height:52px;display:flex;align-items:stretch;
  background:var(--craie);border-bottom:var(--filet);
}
.ruban a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;text-decoration:none;
  font:500 .8125rem var(--mono);letter-spacing:.06em;
}
.ruban a+a{border-left:var(--filet)}
.ruban .puce--14{background:var(--sarcelle)}
.ruban .puce--11{background:var(--rose-forge)}
.ruban .puce--13{background:var(--vert-pascal)}
.ruban .puce{
  width:10px;height:10px;border-radius:50%;flex:none;
}
/* rail à gauche seulement quand la marge lui laisse la place (20 + 44 + 20 px) :
   en dessous de 1280px il recouvrait le texte, le ruban prend le relais */
@media (min-width:1280px){.ruban{display:none}}

/* --- Rail vertical (desktop) -------------------------------- */
.rail{display:none}
@media (min-width:1280px){
  .rail{
    display:flex;flex-direction:column;gap:var(--sp-16);
    position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:30;
  }
  .rail a{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    text-decoration:none;border:var(--filet);background:var(--craie);
    font:500 .8125rem var(--mono);
    transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out;
  }
  .rail a[data-rail="b14"]{--peinture:var(--sarcelle);--sur-peinture:var(--craie)}
  .rail a[data-rail="b11"]{--peinture:var(--rose-forge);--sur-peinture:var(--encre)}
  .rail a[data-rail="b13"]{--peinture:var(--vert-pascal);--sur-peinture:var(--encre)}
  .rail a:hover,.rail a:focus-visible{border-color:var(--peinture)}
  /* liseré blanc : le rond reste visible posé sur une section de la même couleur */
  .rail a[aria-current="true"],.rail a:hover{
    background:var(--peinture);border-color:var(--craie);color:var(--sur-peinture);
    box-shadow:0 0 0 2px var(--craie),0 4px 12px -4px rgba(33,36,46,.3);
  }
}

/* --- Hero --------------------------------------------------- */
.hero{padding-top:var(--sp-40);padding-bottom:var(--sp-64)}
/* air entre le titre et les trois portes */
.hero__tete{display:grid;gap:var(--sp-40);margin-bottom:clamp(56px,7vw,104px)}
/* carte presque en losange (38°) : son texte, en diagonale sur l'original, se lit à l'horizontale.
   Le webp a un liseré transparent de 1 % : bords lissés à la rotation. */
.hero__carte{
  --l:min(60vw,260px);
  width:var(--l);justify-self:center;
  margin:calc(var(--l) * .2);
  transform:rotate(38deg);
  /* ombre légère, exprimée dans le repère tourné : retombe vers le bas à l'écran */
  filter:drop-shadow(5px 6px 8px rgba(33,36,46,.22));
}
@media (min-width:960px){
  .hero__tete{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-40)}
  /* pas de marge latérale : les pointes du losange débordent dans la gouttière et la marge de page */
  .hero__carte{--l:clamp(220px,23vw,330px);justify-self:end;margin-inline:0}
}
/* grand écran : hero (et en-tête, pour garder l'alignement du logo) plus large que le reste.
   Largeur bornée à 100vw - 48px : le bord du texte reste à droite du rail 14/11/13. */
@media (min-width:1440px){
  .hero .enveloppe,.entete .enveloppe{max-width:min(1600px,calc(100vw - 48px))}
  .hero__tete .display-xl{font-size:min(7.2vw,10rem)}
  .hero__carte{--l:clamp(330px,21vw,420px)}
}
.hero__titre{margin:0}
.hero__titre>span{display:block}
.hero__eyebrow{color:var(--bleu-tampon);margin:0 0 var(--sp-16)}
.hero h1{color:var(--bleu-tampon);margin-bottom:var(--sp-24)}
.hero__chapeau{margin:0;max-width:46ch}

.portes{
  display:grid;gap:var(--sp-16);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .portes{grid-template-columns:repeat(3,1fr);gap:var(--sp-24)}
}
.porte{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:max(50vh,340px);padding:var(--sp-24);
  text-decoration:none;border-radius:var(--r-carte);
  overflow:hidden;isolation:isolate;
  animation:porte-monte .4s ease-out backwards;
}
@media (min-width:768px){.porte{min-height:clamp(520px,72vh,820px)}}
.porte:nth-child(1){animation-delay:.05s}
.porte:nth-child(2){animation-delay:.13s}
.porte:nth-child(3){animation-delay:.21s}
@keyframes porte-monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.porte::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--peinture);
}
.porte__photo{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;
  opacity:.34;mix-blend-mode:luminosity;
  transition:opacity .18s ease-out;
}
.porte:hover .porte__photo,.porte:focus-visible .porte__photo{opacity:.5}
/* survol : les vraies couleurs de la devanture apparaissent en fondu
   (image couleur chargée à la demande par site.js) */
.porte__couleur{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease-out;
}
.porte__couleur:not([src]){display:none}
.porte:hover .porte__couleur,.porte:focus-visible .porte__couleur{opacity:1}
/* voile de peinture en bas : l'adresse reste lisible sur la photo en couleur */
.porte::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--peinture) 0%,var(--peinture) 14%,transparent 52%);
  opacity:0;transition:opacity .4s ease-out;
}
.porte:hover::after,.porte:focus-visible::after{opacity:1}
.porte__rue{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.375rem,4.5vw,1.75rem);
  font-variation-settings:"wdth" 96;line-height:1.1;
  margin:0 0 8px;
}
.porte__meta{display:flex;align-items:center;gap:8px;margin:0}
.porte__num{
  border:1.5px solid currentColor;border-radius:var(--r-bouton);
  padding:2px 8px;font:500 .75rem var(--mono);letter-spacing:.06em;
}
.porte--14{--peinture:var(--sarcelle);color:var(--craie)}
.porte--11{--peinture:var(--rose-forge);color:var(--encre)}
.porte--13{--peinture:var(--vert-pascal);color:var(--encre)}


/* --- Boutiques : une façade par boutique ------------------- */
.etat{display:inline-flex;align-items:center;gap:8px}
.etat__puce{width:10px;height:10px;border-radius:50%;flex:none;background:var(--encre-douce)}
.etat[data-ouvert="oui"] .etat__puce{background:var(--vert-pascal)}
.etat[data-ouvert="non"] .etat__puce{background:var(--coeur)}
.etat__texte{font:500 .875rem/1.4 var(--mono);letter-spacing:.01em}
/* le mono de Martian est large : on rend l'interlettrage à 320px */
@media (max-width:400px){.etat__texte,.donnee{letter-spacing:0}}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;
  background:var(--coeur-action);color:var(--craie);
  border-radius:var(--r-bouton);border:0;
  font:500 1rem var(--texte);text-decoration:none;cursor:pointer;
  transition:filter .18s ease-out;
}
.bouton:hover{filter:brightness(.9)}

.facade{
  background:var(--peinture);color:var(--sur-peinture);
  padding-block:clamp(64px,9vw,120px);scroll-margin-top:72px;
}
.facade--14{--peinture:var(--sarcelle);--sur-peinture:var(--craie);--trait:rgba(255,255,255,.35)}
.facade--11{--peinture:var(--rose-forge);--sur-peinture:var(--encre);--trait:rgba(33,36,46,.3)}
.facade--13{--peinture:var(--vert-pascal);--sur-peinture:var(--encre);--trait:rgba(33,36,46,.3)}
.facade__haut{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--sp-16);
  border-bottom:1px solid var(--trait);padding-bottom:var(--sp-16);margin-bottom:clamp(32px,5vw,56px);
}
.facade__num{
  font:500 clamp(5rem,16vw,13rem)/.8 var(--display);
  font-variation-settings:"wdth" 80,"opsz" 96;letter-spacing:-.05em;
}
.facade__num sup{font-size:.28em;vertical-align:top;margin-left:.15em;position:relative;top:.1em}
.facade__grille{display:grid;gap:var(--sp-40)}
@media (min-width:900px){.facade__grille{grid-template-columns:5fr 4fr 3fr;align-items:start}}
.facade h1,.facade h2{margin-bottom:20px}
.facade__lien{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.06em;text-underline-offset:.12em;transition:text-decoration-color .18s ease-out}
.facade__lien:hover,.facade__lien:focus-visible{text-decoration-color:currentColor}
.facade__mot{font-size:1.125rem;max-width:40ch;margin:0 0 28px}
.facade__etat{margin:0 0 24px}
.facade .etat{padding:8px 16px;border-radius:999px;background:var(--craie);color:var(--encre)}
.facade__infos{margin:0 0 28px;display:grid;gap:16px}
.facade__infos dt{text-transform:none;letter-spacing:.02em}
.facade__infos dd{margin:2px 0 0}
.facade__infos a{text-underline-offset:4px}
.facade__action{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-16) var(--sp-24)}
.facade .bouton{background:var(--encre);color:var(--craie)}
.facade .bouton--contour{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.facade .bouton--contour:hover{filter:none;background:var(--encre);color:var(--craie);box-shadow:none}
.facade__photo{margin:0}
/* pages boutiques : photo agrandie, numéro géant à cheval sur le haut de la photo */
.facade--page{--num:clamp(7rem,34vw,15rem);padding-top:clamp(40px,6vw,72px)}
.facade--page .facade__photo--haute{position:relative;margin-top:calc(var(--num) * .42)}
.facade--page .facade__photo--haute img{aspect-ratio:4/3;object-fit:cover;display:block}
.facade--page .facade__num{
  position:absolute;left:clamp(12px,3vw,28px);top:0;z-index:1;pointer-events:none;
  font-size:var(--num);line-height:.78;transform:translateY(-52%);
  color:var(--sur-peinture);text-shadow:0 4px 24px rgba(0,0,0,.18);
}
.facade__surtitre{margin:0 0 var(--sp-16)}
@media (min-width:900px){
  .facade--page .facade__grille{grid-template-columns:7fr 5fr;grid-template-areas:"photo texte" "photo basse";column-gap:var(--sp-64);row-gap:var(--sp-40)}
  .facade--page .facade__photo--haute{grid-area:photo}
  .facade--page .facade__photo--haute img{aspect-ratio:4/5}
  .facade--page .facade__grille>div{grid-area:texte;padding-top:calc(var(--num) * .42)}
  .facade--page .facade__photo--basse{grid-area:basse;margin-top:0}
}

.facade__photo img{width:100%;border-radius:var(--r-carte)}
@media (min-width:900px){
  .facade__photo--haute img{aspect-ratio:3/4;object-fit:cover}
  .facade__photo--basse{margin-top:120px}
}

/* --- Pages boutiques (générées par deploy/boutiques.py) -------- */
.fil{padding-block:var(--sp-16);font:400 .875rem/1.6 var(--mono);color:var(--encre-douce)}
.fil a{color:var(--bleu-tampon);text-underline-offset:3px}
.pratique{background:var(--craie);border-bottom:var(--filet)}
.pratique__grille{display:grid;gap:var(--sp-40);align-items:start}
@media (min-width:900px){.pratique__grille{grid-template-columns:7fr 5fr;gap:var(--sp-64)}.pratique__plan{position:sticky;top:96px}}
.pratique__plan{margin:0}
.pratique__plan img{width:100%;height:auto;border-radius:var(--r-carte);border:var(--filet);display:block}
.pratique__plan a:focus-visible{outline:2px solid var(--bleu-tampon);outline-offset:4px;display:block}
.pratique__plan figcaption{margin-top:8px;font-size:.75rem;color:var(--encre-douce)}
.pratique__plan figcaption a{color:inherit}
.pratique h2{color:var(--bleu-tampon);margin:0 0 var(--sp-24)}
.pratique h3{font:500 .8125rem/1.4 var(--mono);letter-spacing:.02em;color:var(--encre-douce);margin:var(--sp-40) 0 var(--sp-8)}
.pratique h2+h3{margin-top:0}
.pratique p{margin:0 0 var(--sp-16)}
.pratique__boutons{display:flex;flex-wrap:wrap;gap:var(--sp-16)}
.bouton--contour{background:transparent;color:var(--bleu-tampon);box-shadow:inset 0 0 0 2px currentColor}
.bouton--contour:hover{filter:none;background:var(--bleu-tampon);color:var(--craie);box-shadow:none}
.horaires{border-collapse:collapse;width:100%;max-width:26rem;margin-bottom:var(--sp-16)}
.horaires th,.horaires td{text-align:left;padding:8px 0;border-bottom:var(--filet);font-weight:400}
.horaires th{width:9em}
.horaires__aujourdhui th,.horaires__aujourdhui td{font-weight:600;color:var(--bleu-tampon)}
.horaires tr:first-child th,.horaires tr:first-child td{border-top:var(--filet)}
.pratique__note{font-size:.9375rem;color:var(--encre-douce)}
.pratique__note a,.pratique__liste a{color:var(--bleu-tampon);text-underline-offset:3px}
.pratique__liste{margin:0 0 var(--sp-16);padding-left:1.2em}
.pratique__liste li{margin-bottom:8px}
.autres h2{color:var(--bleu-tampon);margin:0 0 var(--sp-24)}
.autres__liste{list-style:none;margin:0 0 var(--sp-40);padding:0;display:grid;gap:var(--sp-16)}
@media (min-width:700px){.autres__liste{grid-template-columns:1fr 1fr}}
.autres__liste a{
  display:grid;gap:8px;padding:var(--sp-24);text-decoration:none;color:var(--encre);
  background:var(--craie);border:var(--filet);border-radius:var(--r-carte);
}
.autres__liste a:hover .autres__rue{text-decoration:underline}
.autres__rue{font:500 1.375rem/1.2 var(--display);color:var(--bleu-tampon)}
.autres__retour{margin:0}

/* --- À propos : le caméo ------------------------------------ */
.apropos{background:var(--rose-poudre);border-block:var(--filet)}
.apropos__grille{display:grid;gap:var(--sp-40);align-items:center}
@media (min-width:768px){.apropos__grille{grid-template-columns:4fr 7fr;gap:var(--sp-64)}}
.polaroid{
  margin:0 auto;max-width:360px;position:relative;
  background:var(--craie);padding:12px 12px 56px;border-radius:var(--r-carte);
  box-shadow:0 1px 0 rgba(33,36,46,.08),0 18px 40px -20px rgba(33,36,46,.35);
  transform:rotate(-3deg);
}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%}
.polaroid figcaption{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font:500 .8125rem var(--mono);letter-spacing:.06em;color:var(--encre-douce);
}
.apropos h2{color:var(--bleu-tampon);margin:var(--sp-8) 0 var(--sp-24)}
.apropos p{margin:0 0 var(--sp-16)}
.apropos__equipe{font-weight:500}

/* --- La sélection : une photo par marque -------------------- */
.marques h2{color:var(--bleu-tampon);margin:var(--sp-8) 0 var(--sp-24)}
.marques__intro{margin:0 0 var(--sp-40)}
.marques__intro p{margin:0 0 var(--sp-16)}
.marques__intro a{color:var(--bleu-tampon);font-weight:500;text-underline-offset:3px}
.galerie{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--sp-24) var(--sp-16);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.galerie{grid-template-columns:repeat(4,1fr);gap:var(--sp-40) var(--sp-24)}}
.galerie li{display:grid;gap:8px;align-content:start}
.galerie img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-carte);background:var(--craie);
}
.galerie__nom{font:500 .8125rem/1.4 var(--mono);letter-spacing:.02em;color:var(--bleu-tampon)}
.galerie__desc{font-size:.875rem;line-height:1.5;color:var(--encre-douce)}
.plus summary{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:var(--sp-40);
  padding:0 24px;border-radius:var(--r-bouton);border:1px solid var(--bleu-tampon);
  color:var(--bleu-tampon);font:500 1rem var(--texte);cursor:pointer;list-style:none;
}
.plus summary::-webkit-details-marker{display:none}
.plus summary::after{content:"+";font:500 1.125rem var(--mono)}
.plus[open] summary::after{content:"–"}
.plus[open] summary{margin-bottom:var(--sp-40)}

/* --- Questions fréquentes ------------------------------------ */
.faq{border-top:var(--filet)}
.faq h2{color:var(--bleu-tampon);margin:var(--sp-8) 0 var(--sp-40)}
.faq__liste{border-top:var(--filet)}
.faq__item{border-bottom:var(--filet)}
.faq__item summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16);
  min-height:64px;padding:var(--sp-16) 0;cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:none;font:500 1.375rem var(--mono);color:var(--bleu-tampon)}
.faq__item[open] summary::after{content:"–"}
.faq__item summary:focus-visible{outline:2px solid var(--bleu-tampon);outline-offset:4px}
.faq__item h3{margin:0;font:500 1.125rem/1.35 var(--texte);color:var(--encre)}
.faq__item summary:hover h3{color:var(--bleu-tampon)}
.faq__reponse{padding:0 0 var(--sp-24)}
.faq__reponse p{margin:0 0 var(--sp-8)}
.faq__reponse ul{margin:0;padding-left:1.2em}
.faq__reponse li{margin-bottom:8px}
.faq__reponse a{color:var(--bleu-tampon);text-underline-offset:3px}

/* --- Contact (pied bleu, d'après la carte postale) ---------- */
.pied{
  background:var(--bleu-tampon);color:var(--craie);
  padding-block:var(--sp-64) calc(var(--sp-40) + env(safe-area-inset-bottom));
}
@media (min-width:768px){.pied{padding-top:var(--sp-104)}}
.pied :focus-visible{outline-color:var(--craie)}
.pied__contact{
  display:grid;gap:var(--sp-24) var(--sp-64);
  padding-bottom:var(--sp-64);margin-bottom:var(--sp-40);
  border-bottom:1px solid rgba(255,255,255,.25);
}
@media (min-width:960px){.pied__contact{grid-template-columns:4fr 7fr}}
.pied__contact h2{margin:0 0 var(--sp-16)}
.pied__contact>div>p{margin:0;font-size:1.25rem;line-height:1.5;max-width:24ch}
.pied__tampon{width:120px;margin-top:var(--sp-40);border-radius:50%;transform:rotate(-8deg);box-shadow:0 0 0 4px var(--craie)}
.pied .formulaire{--f-erreur:#FFB4AB;--f-bouton-fond:var(--craie);--f-bouton-texte:var(--bleu-tampon)}
.pied__grille{display:grid;gap:var(--sp-24);margin-bottom:var(--sp-40)}
@media (min-width:640px){.pied__grille{grid-template-columns:repeat(3,1fr)}}
.pied__adresse h3{margin:0 0 8px;font:500 1rem var(--texte)}
.pied__adresse p{margin:0;opacity:.85}
.pied__adresse a{display:inline-flex;min-height:44px;align-items:center;text-underline-offset:3px}
.pied__bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-16);padding-top:var(--sp-24);border-top:1px solid rgba(255,255,255,.25);
}
.social{display:flex;gap:var(--sp-8)}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
}
.social svg{width:20px;height:20px}
.pied__legal{display:flex;gap:var(--sp-16);flex-wrap:wrap}
.pied__legal a{text-underline-offset:3px;opacity:.85}

/* --- Bascule de couleur ------------------------------------- */
:root{transition:--accent .4s ease-out}
@property --accent{syntax:"<color>";inherits:true;initial-value:#1F2BF3}

/* --- Images en attente de chargement ------------------------ */
/* site.js pose .attente sur chaque image différée tant qu'elle n'est pas
   arrivée : un reflet passe sur un fond teinté, puis l'image apparaît en
   fondu. Sans JS, rien ne change. */
img.attente{
  background:
    linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%) 100% 0/250% 100% no-repeat,
    var(--attente-fond,color-mix(in srgb,var(--encre) 7%,var(--craie)));
  animation:attente 1.4s ease-in-out infinite;
}
@keyframes attente{to{background-position:0 0,0 0}}
img.arrive{animation:arrive .4s ease-out}
@keyframes arrive{from{opacity:0}}

/* --- Mouvement réduit --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition-duration:1ms !important}
}

/* --- Pages secondaires : mentions légales, 404 -------------- */
.lignes{margin:0}
.lignes div{display:grid;grid-template-columns:8.5em 1fr;gap:8px;padding:12px 0;border-bottom:var(--filet)}
.lignes div:first-child{border-top:var(--filet)}
.lignes dt{color:var(--encre-douce);padding-top:2px}
.lignes dd{margin:0}
.lignes a{min-height:44px;display:inline-flex;align-items:center;margin-block:-12px;text-underline-offset:3px}
@media (max-width:400px){.lignes div{grid-template-columns:1fr;gap:2px}}
.legal h1{color:var(--bleu-tampon);margin:var(--sp-8) 0 var(--sp-8)}
.legal__maj{color:var(--encre-douce);margin:0 0 var(--sp-40)}
.legal__sommaire{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-40)}
.legal__sommaire a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:var(--filet);border-radius:var(--r-bouton);background:var(--craie);
  font:500 .9375rem var(--texte);text-decoration:none;
}
.legal section{max-width:72ch;padding-top:var(--sp-40);scroll-margin-top:var(--sp-24)}
.legal h2{color:var(--bleu-tampon);margin:0 0 var(--sp-16)}
.legal h3{font:600 1.0625rem var(--texte);margin:var(--sp-24) 0 var(--sp-8)}
.legal p,.legal li{margin:0 0 var(--sp-16)}
.legal ul{padding-left:1.2em;margin:0}
.legal a{text-underline-offset:3px}
.legal__fiche{background:var(--craie);border-radius:var(--r-carte);padding:0 var(--sp-16)}
.legal__fiche div:first-child{border-top:0}
.legal__fiche div:last-child{border-bottom:0}
.legal mark{background:#FFE08A;padding:0 4px}
.legal__retour{margin-top:var(--sp-64)}
.pied--court{padding-block:var(--sp-24) calc(var(--sp-24) + env(safe-area-inset-bottom))}
.pied--court .pied__bas{border-top:0;padding-top:0}
.introuvable{min-height:60vh}
.introuvable h1{color:var(--bleu-tampon);margin:var(--sp-8) 0 var(--sp-24)}
.introuvable p{margin:0 0 var(--sp-24)}
.erreur__boutiques{max-width:40rem;margin-top:var(--sp-40)}