/* ==========================================================================
   Comptoir Aubrel | gabarit « boutique » (13e gabarit, chantier boutique,
   ARCH shop-worker § 10 ; revue 24/09/2026).

   Direction : vente en rendez-vous sur mobile. Hiérarchie nette, grandes
   photos carrées, titres affirmés (Fraunces), texte sobre (Inter), accent chaud
   terre cuite et seconde couleur ardoise. Mobile-first, aucun débordement de
   320 à 1440 px, aucune ressource externe.

   Personnalisation par le bot (§ 10.7) :
   - --accent, --accent-soft, --accent-deep, --accent-ink, --shadow-accent :
     réécrits par accent_css de _templates.json (style#brand-accent) ;
   - --font-title, --font-body, --itx-accent-2, --itx-accent-2-ink : réécrits
     par style#itx-theme depuis payload["shop"]["theme"] ;
   - data-hero="photo|banner", data-local="1|0", data-sh-layout, data-sh-cols,
     data-sh-cats : attributs posés par le renderer, lus ici.
   Espace réservé : toute variable de la boutique commence par --itx-sh- (bloc
   copié plus bas) ; ni l'espace des ombres « sh » des 12 ni l'accent doux nu
   d'artisan, garage et bouche n'existent dans ce fichier.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
  --accent: #B5573A;
  --accent-soft: #F5E4DC;
  --accent-deep: #8C4128;
  --accent-ink: #FFFFFF;
  --shadow-accent: 0 14px 32px -12px rgba(181, 87, 58, .45);
  --itx-accent-2: #2F4F4F;
  --itx-accent-2-ink: #FFFFFF;
  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --ink: #1F1D1A;
  --ink-soft: #5C5750;
  --line: #E7E1D8;
  --radius: 14px;
  --container: 1200px;
  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 32px);
  --sb-comp: 0px;
  --t-fast: .16s ease;
  --t-mid: .28s ease;
  color-scheme: light;
}

/* ---------- 2. Socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 2000;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Boutons et en-têtes de section ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 4px);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--bg); }
.btn--light { border-color: currentColor; color: inherit; background: transparent; }
.btn--light:hover, .btn--light:focus-visible { background: rgba(255, 255, 255, .14); }
.btn--block { width: 100%; }
.eyebrow {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin: 0 0 .75rem;
}
.section-lead {
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- 4. En-tête (contrat burger, ARCH § 10.3) ----------
   En-tête collant de hauteur FIXE (--header-h) : nom sur deux lignes au plus,
   sous-titre sur une ligne. Panneau nav#primaryNav fixé sous l'en-tête au
   seuil 1099 px, repris tel quel par main.js (matchMedia). Verrou de
   défilement sur le body seul, jamais sur la racine du document ; aucun
   backdrop-filter sur l'en-tête. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.75rem, 2vw, 1.5rem);
  height: 100%;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
}
.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  padding: .1em .06em .06em 0;
  margin: -.1em -.06em -.06em 0;
}
.brand__sub {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.5rem); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link.is-current { color: var(--accent); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--itx-accent-2);
  color: var(--itx-accent-2-ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--t-fast);
}
.nav__cta:hover, .nav__cta:focus-visible { filter: brightness(1.15); }
.nav__cta[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--accent); }
.nav__phone { display: none; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.lang-switch__btn {
  min-width: 40px;
  min-height: 34px;
  padding: 0 .55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.lang-switch__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lang-switch--mobile { display: none; }
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  flex: 0 0 auto;
}
.burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-mid), opacity var(--t-fast);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Héros ----------
   data-hero="photo" : texte à gauche, grande photo à droite (photo en tête et
   pleine largeur sur mobile). data-hero="banner" : pas de photo, bandeau
   ardoise (seconde couleur de marque) au texte clair. */
.hero { background: var(--bg); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__media {
  order: -1;
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--accent-soft);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__content { max-width: 40rem; }
.hero__title {
  font-size: clamp(2.35rem, 7vw, 4.2rem);
  line-height: 1.02;
  margin: 0 0 1rem;
}
.hero__tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.hero__badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
body[data-hero="banner"] .hero {
  background: var(--itx-accent-2);
  background: linear-gradient(135deg, var(--itx-accent-2), color-mix(in srgb, var(--itx-accent-2) 72%, #000));
  color: var(--itx-accent-2-ink);
}
body[data-hero="banner"] .hero__media { display: none; }
body[data-hero="banner"] .hero__inner { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
body[data-hero="banner"] .hero__tagline { color: inherit; opacity: .88; }
body[data-hero="banner"] .eyebrow { color: inherit; opacity: .8; }
body[data-hero="banner"] .hero__badge { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: inherit; }
body[data-hero="banner"] .btn--ghost { border-color: currentColor; color: inherit; }
body[data-hero="banner"] .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: inherit; }

/* ---------- 6. Engagements (modes de remise) ---------- */
.trust {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 2vw, 1.5rem);
}
.trust-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.trust-card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: .9rem;
  border-radius: 12px;
  background: var(--accent-soft);
  /* Picto en --accent-deep, pas en --accent : sur le fond --accent-soft d'une palette
     injectée (jeton tint), une couleur de marque vive (orange, or, vert, bleu) tombait
     sous 3:1 ; l'accent foncé tient au moins 4,3:1 (garde test_render_boutique, 4 bis). */
  color: var(--accent-deep);
}
.trust-card h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 0 0 .35rem; letter-spacing: 0; }
.trust-card p { font-size: .92rem; color: var(--ink-soft); }
/* Petits téléphones (balayage au pixel près du 04/10/2026) : en anglais, le mot le plus long
   d'un titre de carte dépassait de 5 px la boîte de sa carte de 320 à 326 px. Marge intérieure
   resserrée jusqu'à 340 px (le mot tient, rendu inchangé au-delà) ; filet : un mot plus long
   encore se coupe au lieu de sortir de la carte (garde : test_gouttieres, section 9). */
.trust-card h3 { overflow-wrap: anywhere; }
@media (max-width: 340px) { .trust-card { padding: 1rem; } }
/* Sans local, la carte du retrait n'a rien à dire ; dans le régime numérique (08/10/2026,
   #engagements[data-sh-digital="1"]) elle annonce le téléchargement immédiat et reste. */
body[data-local="0"] .trust:not([data-sh-digital="1"]) .trust-card[data-sh-trust="pickup"] { display: none; }
/* Titres des cartes du régime numérique (relecture R2 du 10/10/2026, mesuré dans Edge de 320 à
   430 px) : « Téléchargement » porte une césure douce (shop_i18n) ; l'équilibrage des titres
   (text-wrap: balance) s'en servait même quand le mot tient (« Télécharge- / ment immédiat » à
   414 px) : ici « pretty », césure seulement quand le mot ne tient pas. Jusqu'à 340 px, titre à
   1rem : « défectueux ? » (espace insécable) ne tenait pas à 320 px et le filet overflow-wrap
   envoyait le « ? » en tête de ligne. Les cartes du lot 1 ne changent pas. */
#engagements[data-sh-digital="1"] .trust-card h3 { text-wrap: pretty; }
@media (max-width: 340px) { #engagements[data-sh-digital="1"] .trust-card h3 { font-size: 1rem; } }

/* ---------- 7. L'atelier (local, horaires, adresse) ---------- */
.local { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--surface); border-top: 1px solid var(--line); }
.local__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.local__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--accent-soft);
}
.local__media img { width: 100%; height: 100%; object-fit: cover; }
.local__title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 .9rem; }
.local__text p { color: var(--ink-soft); }
.local__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.local__facts h3 { font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .6rem; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: .95rem;
}
.hours li:last-child { border-bottom: 0; }
.hours li span:first-child { font-weight: 500; }
.hours__closed { color: var(--accent); }
.local__addr { font-style: normal; font-size: .95rem; line-height: 1.6; }
.local__addr a { color: inherit; text-decoration: none; }
.local__addr a:hover { color: var(--accent); }
.local__map {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .75rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--accent);
  text-decoration: none;
}
.local__map:hover, .local__map:focus-visible { text-decoration: underline; }
.local__map-pin { font-weight: 500; }
/* Sans local, « L'atelier » n'est masqué que s'il montre encore ses faits (horaires, adresse,
   plan) : une boutique numérique garde sa présentation sans eux (08/10/2026, § 3.2). */
body[data-local="0"] .local:has(.local__facts) { display: none; }

/* ---------- 8. Avis ---------- */
.reviews { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--bg); border-top: 1px solid var(--line); }
.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.85rem, 2vw, 1.5rem);
}
.review {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.review__stars { display: flex; gap: 2px; color: var(--accent); margin-bottom: .8rem; }
.review__text { font-family: var(--font-title); font-size: 1.12rem; line-height: 1.45; margin: 0 0 1rem; }
.review__author { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--ink-soft); }
.review__author strong { display: block; color: var(--ink); font-weight: 600; }
.review__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--itx-accent-2);
  color: var(--itx-accent-2-ink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- 9. Contact (formulaire principal #contactForm) ---------- */
.contact { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--surface); border-top: 1px solid var(--line); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.contact__intro p { color: var(--ink-soft); }
.contact__list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.contact__list li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; }
.contact__list svg { flex: 0 0 auto; color: var(--accent); }
.contact__list a { color: inherit; text-decoration: none; }
.contact__list a:hover { color: var(--accent); }
.form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.field label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.field__error { display: block; min-height: 1.2em; font-size: .8rem; color: #B3261E; }
.field--checkbox label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .9rem; line-height: 1.5; }
.field--checkbox input { flex: 0 0 auto; margin: .25rem 0 0; }
.inline-link { color: var(--accent); }
.form__status { margin: 0; font-size: .95rem; color: var(--itx-accent-2); }

/* ---------- 10. Pied de page ---------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .78); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 2rem;
}
.footer__brand .brand { color: #fff; }
.footer__brand .brand__sub { color: rgba(255, 255, 255, .6); }
.footer__tag { margin: 1rem 0 0; font-size: .95rem; max-width: 34rem; }
.footer__col h4 { font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 .9rem; }
.footer__col li { margin: 0 0 .5rem; font-size: .95rem; }
.footer__col a { color: inherit; text-decoration: none; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__addr { font-style: normal; line-height: 1.6; }
/* Adresse e-mail du pied seule sécable, à toutes les largeurs (fusion du 04/10/2026, doctrine
   des pieds de page du 03/10/2026) : sur trois colonnes, de 900 à 1005 px, une adresse fictive
   de 44 caractères sortait de l'écran de 19 px (tools/recette_pieds.py --balayage). Elle ne se
   coupe que si elle ne tient pas : une adresse courante reste sur une ligne ; la grille et ses
   autres descendants gardent leurs mots entiers (un mot néerlandais long ne se coupe pas). */
.footer__col a[href^="mailto:"] { overflow-wrap: anywhere; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 1.25rem var(--gutter) 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer__legal a { color: inherit; text-decoration: none; }
.footer__legal a:hover { color: #fff; text-decoration: underline; }
/* Panier flottant du widget (a.itx-sh-fab, ajouté au <body> par js/shop.js : fixe, à 16 px du
   bas et de la droite, 12 px de marge intérieure autour d'une ligne de 1,6 rem, soit 49,6 px
   de haut). Fusion du 04/10/2026, doctrine du 03/10/2026 (bouton flottant en fin de page) :
   page défilée jusqu'au bout sur un téléphone, panier non vide, il se posait sur
   « Conditions de vente », et aucun défilement ne découvrait le lien. Tant qu'il est montré
   (le widget le masque dès que le bon de commande est à l'écran : en bureau, la fin de page
   le masque presque toujours), le pied garde sa place sous sa dernière ligne : retrait 16 px
   + hauteur 3,1 rem + 16 px d'air (au-dessus du bandeau d'une page de présentation, retrait
   de 20 px : 12 px d'air). Sans panier montré, rendu inchangé (1,5 rem). */
body:has(> .itx-sh-fab:not([hidden])) .footer__bottom { padding-bottom: calc(16px + 3.1rem + 16px); }

/* ---------- 11. Boutique : bloc canonique copié entre marqueurs ---------- */
/* ==== shop-section (copie octet à octet de _shared/shop-section.css) ==== */
/* ==========================================================================
   Boutique ITexperience | CSS canonique de la section, des cartes, du
   catalogue /boutique/ et de l'hôte du widget (ARCH shop-worker § 10.5,
   § 10.6, § 10.7 ; revue 24/09/2026).

   Copié OCTET À OCTET dans boutique/css/styles.css entre les deux marqueurs
   de commentaire « shop-section » (ouverture et fermeture), et injecté tel quel
   dans les 12 gabarits au lot 2 (style#itx-sh-section). Il ne connaît donc que
   l'espace réservé --itx-sh-* : la correspondance de ces variables vers celles
   d'un gabarit (accent, encre, surface, filet, rayon) est écrite HORS de ce
   bloc, par le gabarit ou par shop_render.inject_section. Chaque variable porte
   un repli : sans correspondance, la section reste lisible.

   Règles : jamais l'espace des ombres « sh » de 8 gabarits ni l'accent doux
   nu d'artisan, garage et bouche (d'où le préfixe itx) ; jamais de prix barré
   ni de texte rayé ; aucune classe du panier de bouche ; [hidden] gagne sur
   tout display d'auteur ; font: inherit sur les boutons.
   ========================================================================== */

/* ---------- Section teaser de l'accueil ---------- */
.sh-section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: var(--itx-sh-surface, #FFFFFF);
  color: var(--itx-sh-ink, #1F1D1A);
}
.sh-section__head {
  max-width: 44rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.sh-section__eyebrow,
.sh-catalog__eyebrow {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--itx-sh-accent, #B5573A);
}
.sh-section__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.sh-section__lead,
.sh-catalog__lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .86;
}
.sh-section__note,
.sh-catalog__note {
  display: inline-block;
  margin: 1rem 0 0;
  padding: .3rem .7rem;
  border: 1px dashed var(--itx-sh-line, #E7E1D8);
  border-radius: 999px;
  font-size: .8rem;
  opacity: .8;
}

/* ---------- Chips de catégories (accueil et /boutique/) ---------- */
.sh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.sh-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border: 1px solid var(--itx-sh-line, #E7E1D8);
  border-radius: 999px;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  background: var(--itx-sh-surface, #FFFFFF);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.sh-chip:hover,
.sh-chip:focus-visible {
  border-color: var(--itx-sh-accent, #B5573A);
  color: var(--itx-sh-accent, #B5573A);
}
.sh-chip.is-active,
.sh-chip[aria-current="true"] {
  background: var(--itx-sh-accent-2, #2F4F4F);
  border-color: var(--itx-sh-accent-2, #2F4F4F);
  color: var(--itx-sh-accent-2-ink, #FFFFFF);
}

/* ---------- Grille des cartes : colonnes pilotées par data-sh-cols ---------- */
.sh-grid {
  display: grid;
  grid-template-columns: repeat(var(--itx-sh-cols, 3), minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
[data-sh-cols="2"] { --itx-sh-cols: 2; }
[data-sh-cols="3"] { --itx-sh-cols: 3; }
[data-sh-cols="4"] { --itx-sh-cols: 4; }

/* ---------- Carte produit ---------- */
.sh-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--itx-sh-surface, #FFFFFF);
  border: 1px solid var(--itx-sh-line, #E7E1D8);
  border-radius: var(--itx-sh-radius, 14px);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .sh-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .35);
  }
}
.sh-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--itx-sh-line, #E7E1D8);
  color: inherit;
  text-decoration: none;
}
.sh-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sh-card__state {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: var(--itx-sh-ink, #1F1D1A);
  color: var(--itx-sh-surface, #FFFFFF);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
}
.sh-card__state:empty { display: none; }
.sh-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .45rem;
  padding: .95rem 1rem 1rem;
}
.sh-card__name {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 600;
  /* Filet (fusion du 05/10/2026) : un mot du nom plus large que toute la carte (noms composés
     néerlandais, cartes sur deux colonnes de 421 à 767 px) sortait de la carte, jusqu'à 109 px ;
     il se coupe en dernier recours. Un nom dont chaque mot tient ne change pas. */
  overflow-wrap: anywhere;
}
.sh-card__name a {
  color: inherit;
  text-decoration: none;
}
.sh-card__name a:hover,
.sh-card__name a:focus-visible { color: var(--itx-sh-accent, #B5573A); }
.sh-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  opacity: .78;
}
.sh-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  margin: .15rem 0 0;
}
.sh-card__price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--itx-sh-ink, #1F1D1A);
  white-space: nowrap;
}
.sh-card__price:empty { display: none; }
.sh-card__unit {
  font-size: .85rem;
  opacity: .72;
}
.sh-card__unit:empty { display: none; }
/* Ligne d'un produit numérique (« 48 min · 1,2 Go », boutique numérique du 08/10/2026) : second
   p.sh-card__meta de la carte, sous le prix ; discrète (graisse normale, encre adoucie), même
   corps que le prix, coupée plutôt que de déborder (320 px compris). */
.sh-card__meta--digital {
  display: block;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--itx-sh-ink, #1F1D1A);
  opacity: .72;
  overflow-wrap: anywhere;
}
.sh-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
}
.sh-card__badges:empty { display: none; }
.sh-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--itx-sh-line, #E7E1D8);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
}
.sh-badge--food { border-color: var(--itx-sh-accent, #B5573A); color: var(--itx-sh-accent, #B5573A); }
.sh-badge--18 { background: var(--itx-sh-ink, #1F1D1A); border-color: var(--itx-sh-ink, #1F1D1A); color: var(--itx-sh-surface, #FFFFFF); }
.sh-badge--digital,
.sh-badge--gift,
.sh-badge--custom { background: var(--itx-sh-accent-2, #2F4F4F); border-color: var(--itx-sh-accent-2, #2F4F4F); color: var(--itx-sh-accent-2-ink, #FFFFFF); }
.sh-badge--featured { border-color: var(--itx-sh-accent, #B5573A); color: var(--itx-sh-accent, #B5573A); }
/* Actions : 44 px fixes (le widget remplace le lien par un bouton de même boîte) */
.sh-card__actions {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  height: 44px;
  margin-top: auto;
  padding-top: .35rem;
}
.sh-card__actions > .btn,
.sh-card__actions > a,
.sh-card__actions > button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 1rem;
  border-radius: calc(var(--itx-sh-radius, 14px) - 4px);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.sh-card__order,
.sh-card__actions > button {
  background: var(--itx-sh-accent, #B5573A);
  border: 1px solid var(--itx-sh-accent, #B5573A);
  color: var(--itx-sh-accent-ink, #FFFFFF);
}
.sh-card__order:hover,
.sh-card__order:focus-visible,
.sh-card__actions > button:hover,
.sh-card__actions > button:focus-visible { filter: brightness(.92); }
.sh-card__ask {
  background: transparent;
  border: 1px solid var(--itx-sh-ink, #1F1D1A);
  color: var(--itx-sh-ink, #1F1D1A);
}
.sh-card__ask:hover,
.sh-card__ask:focus-visible {
  background: var(--itx-sh-ink, #1F1D1A);
  color: var(--itx-sh-surface, #FFFFFF);
}

/* ---------- Mise en page « liste » : photo à gauche, texte à droite ---------- */
[data-sh-layout="list"] .sh-card { flex-direction: row; }
[data-sh-layout="list"] .sh-card__media {
  flex: 0 0 38%;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
}
[data-sh-layout="list"] .sh-card__body { padding: 1rem 1.1rem; }

/* ---------- Lien « Voir toute la boutique » ---------- */
.sh-more {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  text-align: center;
}

/* ---------- Page /boutique/ : catalogue complet ---------- */
.sh-catalog {
  padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5.5rem);
  background: var(--itx-sh-surface, #FFFFFF);
  color: var(--itx-sh-ink, #1F1D1A);
}
.sh-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.25rem;
  font-size: .9rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  opacity: .8;
}
.sh-back:hover,
.sh-back:focus-visible { color: var(--itx-sh-accent, #B5573A); opacity: 1; }
.sh-catalog__title {
  margin: 0 0 .75rem;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.sh-catalog__lead { max-width: 44rem; }
.sh-catalog .sh-chips {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 5;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: .75rem 0;
  background: var(--itx-sh-surface, #FFFFFF);
  border-bottom: 1px solid var(--itx-sh-line, #E7E1D8);
}
.sh-cat {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  scroll-margin-top: calc(var(--header-h, 0px) + 72px);
}
.sh-cat__title {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
}
/* Mode « tabs » : main.js pose hidden sur les catégories non choisies à
   l'initialisation ; hauteur réservée pour un CLS nul (§ 10.6). */
.sh-catalog[data-sh-cats="tabs"] .sh-cat { min-height: 60vh; }

/* ---------- Hôte du widget et formulaire de repli ---------- */
.sh-order {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  color: var(--itx-sh-ink, #1F1D1A);
}
.sh-order__title {
  margin: 0 0 .6rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
}
.sh-order__lead {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: .86;
}
/* Hauteur réservée : le widget remplace le formulaire sans décaler la page. */
.sh-host {
  min-height: 600px;
  max-width: 760px;
}
.sh-order__form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--itx-sh-surface, #FFFFFF);
  border: 1px solid var(--itx-sh-line, #E7E1D8);
  border-radius: var(--itx-sh-radius, 14px);
}
.sh-order__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.sh-order__form label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .9rem;
  font-weight: 600;
}
.sh-order__form input:not([type="checkbox"]),
.sh-order__form select,
.sh-order__form textarea {
  width: 100%;
  min-height: 46px;
  padding: .65rem .85rem;
  border: 1px solid var(--itx-sh-line, #E7E1D8);
  border-radius: calc(var(--itx-sh-radius, 14px) - 4px);
  background: var(--itx-sh-surface, #FFFFFF);
  color: inherit;
  font: inherit;
}
.sh-order__form textarea { min-height: 120px; resize: vertical; }
.sh-order__form input:focus-visible,
.sh-order__form select:focus-visible,
.sh-order__form textarea:focus-visible {
  outline: 2px solid var(--itx-sh-accent, #B5573A);
  outline-offset: 1px;
}
.sh-order__check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  line-height: 1.5;
}
.sh-order__check input { margin: .25rem 0 0; flex: 0 0 auto; }
.sh-order__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border: 1px solid var(--itx-sh-accent, #B5573A);
  border-radius: calc(var(--itx-sh-radius, 14px) - 4px);
  background: var(--itx-sh-accent, #B5573A);
  color: var(--itx-sh-accent-ink, #FFFFFF);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
.sh-order__submit:hover,
.sh-order__submit:focus-visible { filter: brightness(.92); }
.sh-order__status {
  margin: 0;
  font-size: .95rem;
}

/* ---------- [hidden] gagne sur tout display d'auteur ---------- */
.sh-section[hidden], .sh-catalog[hidden], .sh-order[hidden], .sh-cat[hidden],
.sh-chips[hidden], .sh-chip[hidden], .sh-grid[hidden], .sh-card[hidden],
.sh-card__media[hidden], .sh-card__body[hidden], .sh-card__meta[hidden],
.sh-card__badges[hidden], .sh-card__actions[hidden], .sh-card__order[hidden],
.sh-card__ask[hidden], .sh-card__state[hidden], .sh-more[hidden], .sh-back[hidden],
.sh-host[hidden], .sh-order__form[hidden], .sh-order__row[hidden], .sh-order__check[hidden],
.sh-order__submit[hidden], .sh-order__status[hidden], .sh-badge[hidden] { display: none; }

/* ---------- Points de rupture ---------- */
@media (max-width: 1023px) {
  [data-sh-cols="4"] { --itx-sh-cols: 3; }
}
@media (max-width: 767px) {
  .sh-grid { --itx-sh-cols: 2; gap: .85rem; }
  .sh-card__body { padding: .8rem .8rem .85rem; gap: .35rem; }
  .sh-card__name { font-size: 1rem; }
  .sh-card__price { font-size: 1.08rem; }
  .sh-card__meta--digital { font-size: 1.08rem; }
  [data-sh-layout="list"] .sh-card { flex-direction: column; }
  [data-sh-layout="list"] .sh-card__media { flex: none; }
  .sh-order__row { grid-template-columns: minmax(0, 1fr); }
  /* Les chips du catalogue passent à la ligne comme celles de l'accueil (revue du
     25/09/2026) : le ruban à défilement horizontal sans barre coupait « Texti… » à
     390 px sans rien signaler, contraire à la règle « aucun contenu hors de l'écran
     de 320 à 1440 px » des gabarits (mémoire entetes-gabarits, 28057f8).
     Sur une GRILLE à colonnes fixes (relecture 26/09/2026) : en flux (flex-wrap), le
     nombre de lignes dépendait de la largeur des glyphes, et au remplacement des
     polices (font-display: swap) la barre gagnait une ligne à 414 px et poussait tout
     le catalogue (CLS à froid 0,1366 sur /boutique/ en anglais, seuil « bon » 0,1 ;
     tools/recette_debordements.py, CLS-FROID). Trois colonnes jusqu'à 767 px, deux
     jusqu'à 480 px : la hauteur de la barre ne dépend plus de la police. */
  .sh-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-chip { justify-content: center; text-align: center; white-space: normal; padding-left: .6rem; padding-right: .6rem; }
}
@media (max-width: 480px) {
  .sh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sh-host { min-height: 680px; }
}
@media (max-width: 420px) {
  .sh-grid { --itx-sh-cols: 1; }
  .sh-card__body { padding: .95rem 1rem 1rem; }
  .sh-card__name { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-card, .sh-chip { transition: none; }
  .sh-card:hover { transform: none; }
}
/* ==== /shop-section ==== */
/* Correspondance vers les variables du gabarit, HORS des marqueurs (§ 10.7) :
   le bloc copié aux 12 gabarits ne doit jamais emporter var(--itx-accent-2). */
:root{--itx-sh-accent:var(--accent);--itx-sh-accent-ink:var(--accent-ink);--itx-sh-accent-2:var(--itx-accent-2);--itx-sh-surface:var(--surface);--itx-sh-ink:var(--ink);--itx-sh-line:var(--line);--itx-sh-radius:var(--radius);--itx-sh-accent-2-ink:var(--itx-accent-2-ink)}
/* Habillage propre au gabarit : la section teaser sur fond sable, l'hôte du
   widget sur fond ardoise, le catalogue sur fond clair. */
.sh-section { background: var(--bg); border-top: 1px solid var(--line); }
.sh-section .sh-card,
.sh-catalog .sh-card { --itx-sh-line: var(--line); }
.sh-order { background: var(--accent-soft); border-top: 1px solid var(--line); }
.sh-order__form { background: var(--surface); }
.sh-catalog { background: var(--bg); }
.sh-catalog .sh-chips { background: var(--bg); }

/* ---------- 12. Points de rupture du gabarit ---------- */
@media (min-width: 640px) {
  .hero__media { margin: 0; border-radius: var(--radius); }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    padding-top: clamp(2rem, 4vw, 3.5rem);
  }
  .hero__media { order: 0; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -40px rgba(31, 29, 26, .5); }
  .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .local__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .local__media { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + 24px); }
  .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* Menu replié (burger) jusqu'à 1099 px : même seuil dans main.js
   (window.matchMedia("(max-width: 1099px)"), fermeture au « change »). */
@media (max-width: 1099px) {
  .burger { display: flex; }
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile { display: inline-flex; align-self: flex-start; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: clamp(1.25rem, 5vw, 2rem) var(--gutter) 2rem;
    background: var(--itx-accent-2);
    color: var(--itx-accent-2-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--t-mid), visibility var(--t-mid), transform var(--t-mid);
  }
  .nav.is-open,
  .site-header:has(#burger[aria-expanded="true"]) .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: .25rem; width: 100%; }
  .nav__list li { width: 100%; }
  .nav__link {
    display: flex;
    min-height: 50px;
    padding: .5rem .75rem;
    border-bottom: 0;
    border-radius: 10px;
    font-family: var(--font-title);
    font-size: 1.35rem;
    font-weight: 600;
    color: inherit;
    white-space: normal;
  }
  .nav__link:hover, .nav__link:focus-visible, .nav__link.is-current { background: rgba(255, 255, 255, .1); color: inherit; }
  .nav__cta {
    justify-content: center;
    min-height: 50px;
    margin: .5rem 0 0;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.05rem;
  }
  .nav__phone {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: 0 .75rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
  }
  .lang-switch--mobile { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); }
  .lang-switch--mobile .lang-switch__btn { color: rgba(255, 255, 255, .8); }
  .lang-switch--mobile .lang-switch__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
  /* Verrou de défilement sur le body seul (jamais sur la racine) et barre de
     défilement compensée (--sb-comp posée par main.js) ; l'en-tête collant
     est prolongé d'autant pour rester bord à bord. */
  body.nav-open,
  body:has(#burger[aria-expanded="true"]) { overflow: hidden; padding-right: var(--sb-comp); }
  body.nav-open .site-header,
  body:has(#burger[aria-expanded="true"]) .site-header { margin-right: calc(-1 * var(--sb-comp)); padding-right: var(--sb-comp); }
}
/* Tablette (601 à 1099 px) : tiroir latéral droit sous un voile. */
@media (min-width: 601px) and (max-width: 1099px) {
  .nav {
    left: auto;
    width: min(78vw, 420px);
    border-left: 1px solid rgba(255, 255, 255, .12);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .45);
  }
  .nav::before {
    content: "";
    position: fixed;
    top: var(--header-h);
    right: min(78vw, 420px);
    bottom: 0;
    left: 0;
    background: rgba(31, 29, 26, .45);
    pointer-events: none;
  }
}
@media (max-width: 359px) {
  .brand__mark { width: 36px; height: 36px; font-size: 1.25rem; }
  .brand__name { font-size: 1.1rem; }
  .brand__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .burger span, .btn, .skip-link { transition: none; }
}

/* Adresse e-mail affichée dans la page (fusion du 05/10/2026, décision de Charles « E2 » du 04/10/2026
   étendue au 13e gabarit) : le bot pose une coupure permise juste après « @ » (<wbr>) et enveloppe
   dans .itx-email une adresse écrite seule hors d'un lien. Cette coupure, et son filet (une partie
   encore trop longue se coupe n'importe où), ne jouent que dans la liste de contact et dans le bloc
   « Nous trouver », à toute largeur : leurs colonnes sont des pistes minmax(0, …), qui ne
   s'élargissent pas pour l'adresse (balayage d'une démo : adresse de 41 caractères sortie de 36 px du
   bloc « Nous trouver » de 900 à 1035 px, page défilant de 900 à 913 px). Ailleurs (pied de page, qui
   garde son filet), la coupure est neutralisée et le rendu reste celui d'avant. */
a[href^="mailto:"] wbr, .itx-email wbr { display: none; }
.contact__list a[href^="mailto:"] wbr, .contact__list .itx-email wbr { display: inline; }
.contact__list a[href^="mailto:"], .contact__list .itx-email { overflow-wrap: anywhere; }
.local__addr a[href^="mailto:"] wbr, .local__addr .itx-email wbr { display: inline; }
.local__addr a[href^="mailto:"], .local__addr .itx-email { overflow-wrap: anywhere; }