/* ─────────────────────────────────────────────────────────────
   Gabarit des sites clients.
   Une seule feuille pour tous les sites : corriger ici corrige
   l'ensemble du parc. La couleur --accent vient du client.
   ───────────────────────────────────────────────────────────── */

:root {
  --accent: #c4402b;
  /* Couleur de texte lisible SUR l'accent. Calculée par le serveur d'après la
     couleur réelle du commerçant (voir couleur_sur() dans inc/contenu.php) :
     du blanc en dur devenait illisible sur un accent pastel. */
  --sur-accent: #fff;
  --encre: #1c1815;
  --encre-2: #6a625b;
  --papier: #fffdf8;
  --papier-2: #f6f1e7;
  --trait: #e8e0d2;
  --blanc: #fff;
  --menthe: #0e7c5a;
  --display: 'Fraunces', Georgia, serif;
  --texte: 'Manrope', system-ui, -apple-system, sans-serif;
  --pas: clamp(1.15rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.env { width: 100%; max-width: 62rem; margin-inline: auto; padding-inline: var(--pas); }
.sec { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.sec--creme { background: var(--papier-2); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 6.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.0625rem; font-family: var(--texte); font-weight: 700; letter-spacing: 0; }
p { margin: 0; }

/*
 * Cet intitulé était coloré avec l'accent du commerçant. Or c'est du TEXTE posé
 * sur le fond du thème : avec un accent pastel sur un papier clair, il devenait
 * illisible (1,36:1 mesuré). Le serveur ne peut pas corriger ce cas — il ne
 * connaît pas le fond, qui appartient au thème.
 *
 * Le gabarit ne parie donc plus sur une couleur inconnue. Un thème qui veut
 * l'accent ici peut le remettre : lui sait quel fond il pose derrière.
 */
.sur-titre {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--encre-2); margin-bottom: 0.7rem;
}

/* ── Bandeau d'aperçu (jamais présent sur un site publié) ──── */
.bandeau-apercu {
  background: #ffc02e; color: #23150f;
  font-size: 0.8125rem; font-weight: 700; text-align: center;
  padding: 0.55rem var(--pas); line-height: 1.4;
}
.bandeau-apercu a { color: #23150f; }

/* ── En-tête ────────────────────────────────────────────────── */
.tete {
  background: var(--blanc); border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 30;
}
.tete__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.9rem; }
.tete__nom { font-family: var(--display); font-weight: 600; font-size: 1.15rem; text-decoration: none; color: var(--encre); }
.tete__tel {
  /* Le bouton d'appel de l'en-tête : c'est celui qui rapporte de l'argent au
     commerçant. Il doit faire 44 px comme les autres. */
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--accent); color: var(--sur-accent, #fff); text-decoration: none;
  font-weight: 700; font-size: 0.9375rem; border-radius: 999px;
  padding: 0.5rem 1.05rem; white-space: nowrap;
}
.tete__tel:hover { filter: brightness(0.92); }

/* ── Héros ──────────────────────────────────────────────────── */
.heros { position: relative; min-height: clamp(19rem, 52vw, 30rem); display: grid; align-items: end; }
.heros__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.heros__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 10, 6, 0.88) 0%, rgba(14, 10, 6, 0.25) 60%, rgba(14, 10, 6, 0.35) 100%);
}
.heros--sans { background: var(--accent); }
.heros__txt { position: relative; z-index: 1; color: #fff; padding-block: clamp(2rem, 6vw, 3.5rem); }
.heros__txt h1 { color: #fff; text-wrap: balance; }
.heros__sous { font-size: clamp(1rem, 2.4vw, 1.2rem); margin-top: 0.6rem; opacity: 0.95; max-width: 42ch; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border-radius: 999px; padding: 0.75rem 1.35rem; border: 2px solid transparent;
  /* 44 px : la taille d'un pouce. En dessous, on rate le bouton une fois sur
     trois sur un téléphone — et ce bouton est celui qui déclenche l'appel. */
  min-height: 44px;
}
.bt--plein { background: var(--accent); color: var(--sur-accent, #fff); }
.bt--plein:hover { filter: brightness(0.92); }
.bt--clair { background: #fff; color: var(--encre); }
.bt--clair:hover { background: var(--papier-2); }
.bt--fant { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.bt--fant:hover { background: rgba(255, 255, 255, 0.14); }

.ouvert { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; color: #fff; }
.ouvert::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #37d39a; }

/* ── Blocs de contenu ───────────────────────────────────────── */
.duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .duo { grid-template-columns: 1.15fr 0.85fr; } }

.texte-long { font-size: 1.0625rem; white-space: pre-line; max-width: 60ch; }

.services { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
@media (min-width: 44rem) { .services { grid-template-columns: repeat(2, 1fr); } }
/*
 * Une prestation seule sur sa ligne l'occupe entièrement.
 *
 * La grille est peinte avec `--trait` et les cartes par-dessus : avec un nombre
 * IMPAIR de prestations, la case manquante laissait un rectangle de la couleur
 * du filet en bas à droite. Et trois prestations, c'est le cas le plus courant —
 * un commerçant en liste rarement exactement quatre. Corrigé ici, donc pour
 * tout le parc et pour les quarante thèmes d'un coup.
 */
.service:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service { background: var(--blanc); padding: 1.25rem; }
.service h3 { margin-bottom: 0.3rem; }
.service p { color: var(--encre-2); font-size: 0.9375rem; }

.info-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 1.25rem; }
.info-carte h3 { margin-bottom: 0.75rem; }
.horaires-liste { list-style: none; margin: 0; padding: 0; }
.horaires-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--trait); font-size: 0.9375rem; }
.horaires-liste li:first-child { border-top: 0; }
.horaires-liste .jour { text-transform: capitalize; color: var(--encre-2); }
.horaires-liste .auj { font-weight: 700; color: var(--encre); }
.horaires-liste .auj .jour { color: var(--accent); }

.coord { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9375rem; }
.coord a { color: var(--encre); text-decoration: none; }
.coord a:hover { color: var(--accent); }

.avis-grille { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
@media (min-width: 44rem) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
.avis-carte { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--accent); border-radius: 12px; padding: 1.1rem 1.25rem; }
.avis-carte p { font-size: 0.9375rem; line-height: 1.55; }
.avis-carte b { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--encre-2); font-weight: 700; }
.etoiles { color: #f0a92b; letter-spacing: 0.08em; margin-bottom: 0.4rem; }

.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
@media (min-width: 44rem) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ── Pied ───────────────────────────────────────────────────── */
.pied-site { background: var(--encre); color: #cdc5bc; padding-block: 2.25rem; font-size: 0.875rem; }
.pied-site__in { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .pied-site__in { grid-template-columns: 1fr auto; align-items: end; } }
.pied-site strong { color: #fff; }
.pied-site a { color: #fff; }
.pied-site__sign { font-size: 0.8125rem; opacity: 0.75; }

/* Signature : le logo seul, centré sous un filet. Discret — c'est le site du
   commerçant, pas notre vitrine — mais net et cliquable. */
.pied-site__marque {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.pied-site__logo {
  display: inline-block;
  padding: 0.42rem 0.7rem 0.46rem;
  border-radius: 0.6rem;
  background: #ffc02e;
  color: #23150f;
  font-family: var(--texte);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: -0.01em;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
 /* Bichromie par la graisse : la charte est deux jaunes et du noir. */
.pied-site__logo span { font-weight: 500; opacity: .72; }
.pied-site__marque:hover .pied-site__logo { opacity: 1; transform: translateY(-1px); }
.pied-site__marque:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pied-site__logo { transition: none; }
}

/* ── Barre d'appel mobile ───────────────────────────────────── */
.appel-fixe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--accent); color: var(--sur-accent, #fff); padding: 0.65rem var(--pas);
  display: flex; justify-content: center;
  box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, 0.4);
}
.appel-fixe a { color: #fff; font-weight: 700; text-decoration: none; font-size: 1rem; }
@media (min-width: 44rem) { .appel-fixe { display: none; } }
body.a-barre { padding-bottom: 3.6rem; }
@media (min-width: 44rem) { body.a-barre { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Formes de héros.

   Le thème DÉCLARE la forme dans sa fiche, le gabarit la rend. Trois variantes :
   pleine largeur, deux colonnes, diaporama. Un thème peut les habiller, il ne
   les fabrique pas — la structure reste ici, donc elle reste sûre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Deux colonnes : le texte à gauche, la photo à droite ───────────────── */
.heros.heros--duo {
  min-height: 0;
  display: block;
  background: var(--papier);
}
.heros.heros--duo .heros__img {
  position: relative;
  inset: auto;
  min-height: clamp(13rem, 44vw, 19rem);
}
.heros.heros--duo .heros__img::after { content: none; }   /* pas de voile : rien dessus */
.heros.heros--duo .heros__txt {
  position: static;
  color: var(--encre);
  padding-block: clamp(1.75rem, 5vw, 2.75rem);
}
.heros.heros--duo .heros__txt h1 { color: var(--encre); }
.heros.heros--duo .heros__sous { color: var(--encre-2); }
.heros.heros--duo .ouvert { color: var(--menthe); }
.heros.heros--duo .ouvert::before { background: var(--menthe); }
/* Sur fond clair, le bouton fantôme doit reprendre un contour visible. */
.heros.heros--duo .bt--fant { border-color: var(--trait); color: var(--encre); }
.heros.heros--duo .bt--fant:hover { background: var(--papier-2); }
.heros.heros--duo .bt--clair {
  background: var(--accent); color: var(--sur-accent, #fff);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
}

@media (min-width: 52rem) {
  .heros.heros--duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
  }
  /* L'image passe en second visuellement, sans changer l'ordre du document :
     le titre reste le premier élément lu par un lecteur d'écran. */
  .heros.heros--duo .heros__img { order: 2; align-self: stretch; min-height: 24rem; }
  .heros.heros--duo .heros__txt {
    order: 1;
    max-width: 34rem;
    margin-inline-start: auto;
    padding-inline: var(--pas);
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
}

/* ── Diaporama : fondu enchaîné, sans une ligne de JavaScript ───────────── */
.heros.heros--diapo .heros__diapo { position: absolute; inset: 0; overflow: hidden; }
.heros.heros--diapo .heros__vue {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heros-fondu var(--duree, 20s) infinite;
  /* Chaque vue démarre décalée d'une tranche : la somme fait un cycle. */
  animation-delay: calc(var(--duree, 20s) / var(--vues, 4) * var(--i, 0));
}
/* La première reste visible avant que l'animation ne démarre : sans ça, le
   héros est noir pendant la première fraction de seconde. */
.heros.heros--diapo .heros__vue:first-child { opacity: 1; }
.heros.heros--diapo .heros__diapo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .68) 0%, rgb(0 0 0 / .28) 55%, rgb(0 0 0 / .12) 100%);
}

@keyframes heros-fondu {
  0%                                  { opacity: 0; }
  /* Un quart de cycle visible, deux fondus courts de part et d'autre. */
  2%, 23%                             { opacity: 1; }
  25%, 100%                           { opacity: 0; }
}

/* Un diaporama qui bouge tout seul est un problème d'accessibilité : on le
   fige sur la première vue pour qui a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .heros.heros--diapo .heros__vue { animation: none; opacity: 0; }
  .heros.heros--diapo .heros__vue:first-child { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Choix de l'application d'itinéraire.

   Un `<details>` : il s'ouvre, se ferme et se pilote au clavier sans une ligne
   de JavaScript — indispensable pour des pages publiées en HTML statique.

   Le `<summary>` porte les classes `.bt`, donc chaque thème l'habille comme
   ses autres boutons sans rien avoir à écrire.
   ═══════════════════════════════════════════════════════════════════════════ */
.itin { position: relative; display: inline-block; }

.itin__bt { cursor: pointer; list-style: none; user-select: none; }
/* Safari et Chrome ajoutent un triangle par défaut : on met le nôtre. */
.itin__bt::-webkit-details-marker { display: none; }
.itin__bt::marker { content: ''; }

.itin__fleche {
  width: 0; height: 0;
  margin-left: .1rem;
  border-inline: 0.3rem solid transparent;
  border-top: 0.34rem solid currentColor;
  transition: transform 0.18s ease;
}
.itin[open] .itin__fleche { transform: rotate(180deg); }

/*
 * Masquage explicite quand le menu est fermé.
 *
 * Un `<details>` fermé masque son contenu, MAIS un enfant en position absolue y
 * échappe : mesuré à 145 px de haut, visible, alors que le menu était fermé.
 * Les trois liens flottaient donc en permanence sous le bouton.
 */
.itin:not([open]) .itin__liste { display: none; }

.itin__liste {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 0.4rem);
  min-width: 12.5rem;
  padding: 0.35rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.45);
}
/* Près du bord droit, le panneau sortirait de l'écran : on l'accroche à droite. */
.heros__actions .itin:last-child .itin__liste { left: auto; right: 0; }

.itin__appli {
  display: flex;
  align-items: center;
  min-height: 44px;                 /* cible tactile, comme les boutons */
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.itin__appli:hover, .itin__appli:focus-visible { background: var(--papier-2); }

.itin-zone { margin-top: 1rem; }

/* Sur un téléphone tenu d'une main, un panneau ancré au bouton peut dépasser :
   il prend alors toute la largeur disponible sous le bouton. */
@media (max-width: 30rem) {
  .itin { display: block; }
  .itin__bt { width: 100%; justify-content: center; }
  .itin__liste { left: 0; right: 0; min-width: 0; }
  .heros__actions .itin:last-child .itin__liste { left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .itin__fleche { transition: none; }
}

/* ═════════════════════════════════════════════════════════════
   Modules
   Sections optionnelles activées par le commerçant (inc/modules.php).

   Contrat des thèmes : ces styles n'utilisent QUE les jetons déjà
   déclarés plus haut (--accent, --sur-accent, --encre, --encre-2,
   --papier, --papier-2, --trait, --blanc). Un thème qui redéfinit
   ces jetons habille donc les modules sans une ligne de plus — et
   les quarante-deux thèmes existants restent valides tels quels.
   ═════════════════════════════════════════════════════════════ */

.mod__titre { margin-bottom: 0.35rem; }
.mod__intro { color: var(--encre-2); max-width: 62ch; margin-bottom: 0.5rem; }
.mod-rub {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
  margin-top: clamp(1.4rem, 3.5vw, 2rem); padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent);
}
.mod-rub__txt { color: var(--encre-2); font-size: 0.875rem; margin-top: 0.35rem; }
.mod-prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mod-prix span { font-weight: 500; font-size: 0.8125rem; color: var(--encre-2); }
.mod-prix--bloc { margin-top: 0.5rem; font-size: 1.0625rem; }
.mod-duree { font-size: 0.8125rem; color: var(--encre-2); }

/* Étiquettes (allergènes, labels) — petites, jamais bruyantes. */
.mod-etiq { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.mod-etiq__p {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.12rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--trait); color: var(--encre-2); background: var(--blanc);
}

/* ── `liste` en lignes : la carte d'un restaurant ───────────── */
.mod-carte { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.mod-carte__l {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.75rem 0; border-top: 1px solid var(--trait);
}
.mod-carte__l:first-child { border-top: 0; }
.mod-carte__ph { width: 4.5rem; height: 4.5rem; border-radius: 10px; object-fit: cover; flex: none; }
.mod-carte__c { min-width: 0; flex: 1; }
.mod-carte__t { display: flex; align-items: baseline; gap: 0.6rem; font-weight: 700; }
/* Le filet de conduite entre le plat et son prix : c'est ce qui fait lire une
   carte comme une carte, et non comme une liste à puces. */
.mod-carte__t > span:first-child { flex: 0 1 auto; }
.mod-carte__t::after {
  content: ''; flex: 1 1 auto; order: 1; align-self: flex-end; margin-bottom: 0.28em;
  border-bottom: 1px dotted var(--trait); min-width: 1.5rem;
}
.mod-carte__t .mod-prix { order: 2; }
.mod-carte__d { color: var(--encre-2); font-size: 0.9375rem; margin-top: 0.15rem; }
.mod-carte__l.est-vedette .mod-carte__t > span:first-child { color: var(--accent); }

/* ── `liste` en grille : une grille de tarifs ──────────────── */
.mod-tab-env { overflow-x: auto; margin-top: 1rem; }
.mod-tab { width: 100%; border-collapse: collapse; }
.mod-tab td { padding: 0.7rem 0.5rem; border-top: 1px solid var(--trait); vertical-align: top; }
.mod-tab tr:first-child td { border-top: 0; }
.mod-tab__n { width: 100%; }
.mod-tab__d { display: block; color: var(--encre-2); font-size: 0.875rem; font-weight: 400; margin-top: 0.15rem; }
.mod-tab__u { color: var(--encre-2); font-size: 0.875rem; white-space: nowrap; }
.mod-tab__p { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mod-tab tr.est-vedette td { background: var(--papier-2); }

/* ── `liste` en cartes : un catalogue produits ─────────────── */
.mod-prod { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .mod-prod { grid-template-columns: repeat(3, 1fr); } }
.mod-prod__i {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
.mod-prod__i.est-vedette { border-color: var(--accent); }
.mod-prod__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mod-prod__c { padding: 0.85rem 0.95rem 1rem; display: flex; flex-direction: column; flex: 1; }
.mod-prod__c h4 { font-size: 1rem; font-weight: 700; margin: 0; }
.mod-prod__d { color: var(--encre-2); font-size: 0.875rem; margin-top: 0.3rem; }
.mod-prod__c .mod-prix--bloc { margin-top: auto; padding-top: 0.5rem; }

/* ── `fiches` ──────────────────────────────────────────────── */
.mod-fiches { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .mod-fiches { grid-template-columns: repeat(3, 1fr); } }
.mod-fiche { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.mod-fiche__ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mod-fiches--portrait .mod-fiche { text-align: center; border: 0; background: transparent; }
.mod-fiches--portrait .mod-fiche__ph { border-radius: 50%; width: 8.5rem; margin-inline: auto; }
.mod-fiche__c { padding: 0.85rem 0.95rem 1rem; }
.mod-fiches--portrait .mod-fiche__c { padding-inline: 0; }
.mod-fiche__c h4 { font-size: 1rem; font-weight: 700; margin: 0; }
.mod-fiche__s { color: var(--accent); font-size: 0.8125rem; font-weight: 700; margin-top: 0.15rem; }
.mod-fiche__t { color: var(--encre-2); font-size: 0.875rem; margin-top: 0.4rem; }
.mod-lien { font-size: 0.875rem; font-weight: 700; }

.mod-logos { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.mod-logos__i {
  display: grid; place-items: center; min-width: 7rem; min-height: 3.75rem; padding: 0.6rem 1rem;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px;
  font-weight: 700; font-size: 0.9375rem; color: var(--encre); text-decoration: none;
}
.mod-logos__i img { max-height: 2.6rem; width: auto; object-fit: contain; }

.mod-aa { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 52rem) { .mod-aa { grid-template-columns: repeat(2, 1fr); } }
.mod-aa__i { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 0.75rem; }
.mod-aa__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.mod-aa__duo figure { margin: 0; }
.mod-aa__duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.mod-aa__duo figcaption {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-2); margin-top: 0.3rem; text-align: center;
}
.mod-aa__i h4 { font-size: 1rem; font-weight: 700; margin: 0.7rem 0 0; }
.mod-aa__s { color: var(--accent); font-size: 0.8125rem; font-weight: 700; }
.mod-aa__t { color: var(--encre-2); font-size: 0.875rem; margin-top: 0.3rem; }

/* ── `texte` ───────────────────────────────────────────────── */
.mod-qr { margin-top: 1rem; border-top: 1px solid var(--trait); }
.mod-qr__i { border-bottom: 1px solid var(--trait); }
.mod-qr__i > summary {
  cursor: pointer; padding: 0.9rem 2rem 0.9rem 0; font-weight: 700; position: relative;
  list-style: none;
}
.mod-qr__i > summary::-webkit-details-marker { display: none; }
.mod-qr__i > summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 1.25rem;
  width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.15s ease;
}
.mod-qr__i[open] > summary::after { transform: rotate(-135deg); top: 1.5rem; }
.mod-qr__r { color: var(--encre-2); padding-bottom: 1rem; max-width: 70ch; }

.mod-blocs { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 44rem) { .mod-blocs { grid-template-columns: repeat(2, 1fr); } }
.mod-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 1.1rem 1.25rem; }
.mod-bloc h4 { font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem; }
.mod-bloc p { color: var(--encre-2); font-size: 0.9375rem; }

/* ── `liens` ───────────────────────────────────────────────── */
.mod-liens { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.mod-liens__i {
  display: grid; gap: 0.1rem; text-decoration: none; min-height: 44px;
  padding: 0.7rem 1.25rem; border-radius: 999px;
  background: var(--accent); color: var(--sur-accent, #fff);
}
.mod-liens__i:hover { filter: brightness(0.92); }
.mod-liens__t { font-weight: 700; }
.mod-liens__d { font-size: 0.75rem; opacity: 0.85; }

/* ── `agenda` ──────────────────────────────────────────────── */
.mod-agenda { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.mod-agenda__i {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 0.85rem 0; border-top: 1px solid var(--trait);
}
.mod-agenda__i:first-child { border-top: 0; }
.mod-agenda__q {
  flex: none; min-width: 7.5rem; font-weight: 700; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); padding-top: 0.15rem;
}
.mod-agenda__c { flex: 1; min-width: 0; }
.mod-agenda__t { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-weight: 700; }
.mod-agenda__d { color: var(--encre-2); font-size: 0.9375rem; margin-top: 0.15rem; }
.mod-agenda__ph { width: 5rem; height: 5rem; border-radius: 10px; object-fit: cover; flex: none; }
@media (max-width: 34rem) {
  .mod-agenda__i { flex-wrap: wrap; }
  .mod-agenda__q { min-width: 100%; }
}

/* ── `choix` ───────────────────────────────────────────────── */
.mod-coche {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: 0.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.mod-coche__i { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.mod-coche__i svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--accent); }

/* ── `etiquettes` ──────────────────────────────────────────── */
.mod-rayon { color: var(--encre-2); margin-bottom: 0.5rem; }
.mod-mots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.mod-mots__i {
  font-size: 0.875rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px;
  background: var(--blanc); border: 1px solid var(--trait); color: var(--encre);
}

/* ── `bandeau` ─────────────────────────────────────────────── */
.mod-band { padding-block: clamp(1.1rem, 3vw, 1.6rem); }
.mod-band__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; }
.mod-band__txt { flex: 1 1 18rem; min-width: 0; }
.mod-band__t { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.mod-band__d { font-size: 0.9375rem; margin-top: 0.2rem; }
.mod-band__bt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0.7rem 1.35rem; border-radius: 999px; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; white-space: nowrap;
}
/* Trois tons, tous construits sur l'accent du commerçant : aucune couleur
   n'est inventée ici, donc aucun thème n'est pris à contre-pied. */
.mod-band--accent { background: var(--accent); color: var(--sur-accent, #fff); }
.mod-band--accent .mod-band__bt { background: var(--blanc); color: var(--encre); }
.mod-band--alerte { background: var(--encre); color: var(--papier); }
.mod-band--alerte .mod-band__t { font-size: 1.3rem; }
.mod-band--alerte .mod-band__bt { background: var(--accent); color: var(--sur-accent, #fff); }
.mod-band--calme { background: var(--papier-2); color: var(--encre); border-block: 1px solid var(--trait); }
.mod-band--calme .mod-band__bt { border-color: var(--encre); color: var(--encre); }

/* ── Sommaire des sections ─────────────────────────────────── */
.sommaire { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.sommaire__in {
  display: flex; gap: 0.45rem; overflow-x: auto; padding-block: 0.6rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sommaire__in::-webkit-scrollbar { display: none; }
/* Sur grand écran, une pastille coupée au bord ressemble à un défaut. Le
   défilement horizontal ne sert qu'au pouce : au-delà, on passe à la ligne. */
@media (min-width: 52rem) { .sommaire__in { flex-wrap: wrap; overflow-x: visible; } }
.sommaire__i {
  /* 44 px comme les autres cibles du gabarit : ces pastilles se tapent au
     pouce, en défilant d'une main. */
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  color: var(--encre); padding: 0.4rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--papier);
}
.sommaire__i:hover { border-color: var(--accent); color: var(--accent); }
/* Les ancres passent sous l'en-tête collant sans ce décalage. */
.mod, .mod-band, [id^='m-'], #infos { scroll-margin-top: 4.5rem; }

/* ── Offre faite au prospect, sur SON site généré ─────────────────────
   Collée EN BAS, jamais en haut : le commerçant doit d'abord reconnaître
   ses photos, son nom, ses horaires. L'offre n'arrive qu'après ce
   « c'est mon commerce ». Un bandeau haut inverserait l'ordre et
   transformerait la page en publicité.
   Le bouton reste atteignable au pouce sur téléphone, où presque tout
   le trafic d'un SMS atterrit. */
.offre-prospect {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: linear-gradient(100deg, #ffc02e 0%, #ffd76b 60%, #ffc02e 100%);
  border-top: 2px solid #23150f;
  box-shadow: 0 -8px 26px rgba(35, 21, 15, 0.22);
  color: #23150f;
}
.offre-prospect__in {
  max-width: 62rem; margin: 0 auto;
  padding: 0.85rem 1.2rem;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.offre-prospect__txt { flex: 1 1 18rem; min-width: 0; }
.offre-prospect__titre {
  margin: 0; font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.75;
}
.offre-prospect__prix { margin: 0.1rem 0 0; font-size: 1.18rem; line-height: 1.25; }
.offre-prospect__prix strong { font-size: 1.5rem; font-weight: 800; }
.offre-prospect__prix span { font-weight: 600; font-size: 0.92rem; opacity: 0.82; }
.offre-prospect__note { margin: 0.2rem 0 0; font-size: 0.8rem; opacity: 0.8; }
.offre-prospect__b {
  flex: 0 0 auto;
  background: #23150f; color: #ffd76b; text-decoration: none;
  font-weight: 800; font-size: 1.05rem;
  padding: 0.8rem 1.6rem; border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.offre-prospect__b:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(35, 21, 15, 0.35);
}
/* Le bandeau est fixe : sans cette marge il recouvrirait le pied de page. */
body.a-offre { padding-bottom: 7.5rem; }
@media (max-width: 44rem) {
  .offre-prospect__in { padding: 0.75rem 0.9rem; gap: 0.7rem; }
  .offre-prospect__b { flex: 1 1 100%; text-align: center; }
  body.a-offre { padding-bottom: 11rem; }
}

/* Fermé : pastille rouge, pas verte. L'ancien code ne regardait que le jour
   et affichait « Ouvert » en pleine nuit — voir horaire_etat(). */
.ouvert--non::before { background: #e5484d !important; }
.heros.heros--duo .ouvert--non { color: #ffb4b6; }
.heros.heros--duo .ouvert--non::before { background: #e5484d !important; }

/* Carte d'accès : OpenStreetMap, gratuit et sans clé d'API. */
.acces-carte {
  margin-top: 1rem; border-radius: 0.9rem; overflow: hidden;
  border: 1px solid var(--trait, rgb(0 0 0 / .12));
  line-height: 0; background: var(--papier-2, #f5f2ec);
}
.acces-carte iframe { width: 100%; height: 17rem; border: 0; display: block; }
.acces-carte__lien {
  display: block; padding: 0.55rem 0.8rem; font-size: 0.82rem; line-height: 1.4;
}
/* Opposition : lisible, jamais criarde. La cacher coûterait plus cher
   qu'elle ne rapporte — un prospect agacé qui ne trouve pas la sortie se
   plaint ailleurs. */
.offre-prospect__stop { margin: .3rem 0 0; font-size: .74rem; line-height: 1.3; }
.offre-prospect__stop a { color: #23150f; opacity: .62; text-decoration: underline; }
.offre-prospect__stop a:hover { opacity: 1; }

/* ── Diagnostic de la fiche Google, sur l'aperçu d'un prospect ────────
   Signé EasyWWW et volontairement DIFFÉRENT du reste de la page : c'est
   notre analyse, pas une section du site du commerçant. Le faire passer
   pour son contenu serait malhonnête — et se retournerait contre nous. */
.diag { background: #23150f; color: #fff8e7; padding: 2.6rem 0; }
.diag__in { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 46rem) {
  .diag__in { grid-template-columns: auto minmax(0, 1fr); gap: 2.4rem; }
}
.diag__note {
  background: linear-gradient(140deg, #ffc02e, #ffd76b);
  color: #23150f; border-radius: 1.1rem; padding: 1.1rem 1.4rem;
  text-align: center; min-width: 9rem;
}
.diag__chiffre { margin: 0; font-size: 3rem; font-weight: 800; line-height: 1; }
.diag__chiffre span { font-size: 1.1rem; font-weight: 700; opacity: .6; }
.diag__lib { margin: .3rem 0 0; font-size: .78rem; font-weight: 700; line-height: 1.3; }
.diag__sur {
  margin: 0 0 .2rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: #ffc02e;
}
.diag h2 { margin: 0 0 .9rem; color: #fff8e7; }
.diag__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.diag__liste li {
  padding-left: 1.4rem; position: relative; font-size: .94rem; line-height: 1.5;
}
.diag__liste li::before {
  content: "!"; position: absolute; left: 0; top: .05rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: #ffc02e; color: #23150f;
  font-size: .72rem; font-weight: 800; line-height: 1rem; text-align: center;
}
.diag__liste b { display: block; }
.diag__liste span { opacity: .8; }
.diag__pied { margin: 1.1rem 0 0; font-weight: 700; }

/* Filet de sécurité sur le titre : même raccourcie, une enseigne ne doit
   jamais dépasser deux lignes dans le héros. Au-delà, points de suspension. */
.heros__txt h1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ── Formulaire de devis ──────────────────────────────────────────────
   Le module qui transforme une visite en demande. Il doit inspirer
   confiance : champs larges, libellés lisibles, bouton évident. Un
   formulaire qui a l'air bricolé ne se remplit pas. */
.mod-form { background: var(--papier-2, #f7f4ee); padding: 3rem 0; }
.mod-form__in { max-width: 44rem; }
.mod-form__tete { text-align: center; margin-bottom: 1.6rem; }
.mod-form__tete h2 { margin: 0 0 .5rem; }
.mod-form__intro { margin: 0; font-size: 1.02rem; line-height: 1.55; opacity: .85; }
.mod-form__gage {
  display: inline-block; margin: .8rem 0 0;
  background: var(--accent, #23150f); color: #fff;
  font-size: .8rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px;
}
.mod-form__f {
  background: #fff; border: 1px solid rgb(0 0 0 / .1);
  border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / .06);
  display: grid; gap: .9rem;
}
@media (min-width: 40rem) {
  .mod-form__f { grid-template-columns: 1fr 1fr; }
  .mod-form__f .champ--large,
  .mod-form__f button,
  .mod-form__note { grid-column: 1 / -1; }
}
.mod-form__f .champ { display: grid; gap: .3rem; margin: 0; }
.mod-form__f label { font-weight: 600; font-size: .9rem; }
.mod-form__f input,
.mod-form__f textarea {
  width: 100%; padding: .65rem .8rem; font: inherit;
  border: 1px solid rgb(0 0 0 / .22); border-radius: .55rem; background: #fff;
}
.mod-form__f input:focus-visible,
.mod-form__f textarea:focus-visible {
  outline: 2px solid var(--accent, #23150f); outline-offset: 1px;
}
.mod-form__bt {
  background: var(--accent, #23150f); color: #fff; border: 0;
  font: inherit; font-weight: 800; font-size: 1.02rem;
  padding: .85rem 1.4rem; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mod-form__bt:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgb(0 0 0 / .22); }
.mod-form__note { margin: 0; font-size: .78rem; opacity: .65; text-align: center; }
/* Champ-piège : invisible pour l'œil, présent pour un robot. */
.mod-form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }