/* ===========================================================================
   Chaque site unique (2026-09-28) — règles communes aux 4 templates clients
   (atelier, studio, commerce, garage). Le template interne B-In-Tech ne
   charge pas cette feuille.

   Chargée APRÈS la feuille du template : à spécificité égale, elle gagne.
   Aucune règle ne s'applique sans une classe explicite (variante `v-*` sur
   un bloc, ou réglage `photos-*` / `divider-*` / `pattern-*` sur <body>),
   à l'exception de la section « Socle » : un site sans aucun réglage doit
   s'afficher au pixel près comme avant (vérifié par captures comparées).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Socle
   --------------------------------------------------------------------------- */

/* La photo du hero vit dans son propre élément, et non plus en fond de la
   section : c'est ce qui permet de la traiter (noir et blanc, bichromie) sans
   toucher au texte, et aux variantes de la déplacer. `isolation` fait du hero
   un contexte d'empilement : la photo (z-index -1) passe sous les voiles
   décoratifs (::before) et le texte, mais au-dessus du fond de la section.
   Atelier garde sa colonne photo (`.hero-visual`), déjà un élément à part. */
.hero { isolation: isolate; }
.hero > .hero-media:not(.hero-visual) {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}

/* Pictogramme du métier en filigrane (sites/_variety.html). Une silhouette
   très pâle, rognée par le bord de la section : présente, jamais lue avant
   le texte. */
.site-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
  color: currentColor;
  opacity: .075;
}
.site-watermark svg { width: 100%; height: 100%; display: block; }
.hero .site-watermark {
  right: max(-48px, calc((100vw - 1180px) / 2 - 64px));
  bottom: -16%;
  width: clamp(220px, 34vw, 470px);
  height: clamp(220px, 34vw, 470px);
  rotate: -14deg;
}
.hero-panel > .hero-inner { position: relative; }
.hero-panel > .site-watermark { right: 3%; }
/* Dans le contact, en bas à gauche : la section referme la page sur le même
   pictogramme que le hero, de l'autre côté. `:has()` : rien ne change pour un
   site sans pictogramme. */
#contact:has(> .site-watermark) { position: relative; overflow: hidden; }
#contact:has(> .site-watermark) > .container { position: relative; z-index: 1; }
#contact > .site-watermark {
  left: -3%;
  bottom: -14%;
  width: clamp(200px, 30vw, 420px);
  height: clamp(200px, 30vw, 420px);
  rotate: 12deg;
}

.site-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------------------
   Traitement des photos (sites.photo_style)
   Appliqué aux photos du CLIENT seulement : hero, « à propos », galerie,
   équipe. Jamais aux photos de véhicules (un acheteur doit voir la vraie
   couleur de la moto), ni aux logos, ni au plan d'accès. La galerie révèle
   la photo d'origine au survol, et la visionneuse l'affiche toujours telle
   quelle.
   --------------------------------------------------------------------------- */
:is(.photos-mono, .photos-warm, .photos-duotone) :is(.hero-media, .about-grid img, .gallery-grid img, .team-photo) {
  transition: filter .5s ease;
}
.photos-mono :is(.hero-media, .about-grid img, .gallery-grid img, .team-photo) { filter: grayscale(1) contrast(1.06); }
.photos-warm :is(.hero-media, .about-grid img, .gallery-grid img, .team-photo) {
  filter: sepia(.3) saturate(1.18) contrast(1.03) hue-rotate(-8deg);
}
.photos-duotone :is(.hero-media, .about-grid img, .gallery-grid img, .team-photo) { filter: url(#site-duotone); }
:is(.photos-mono, .photos-warm, .photos-duotone) .gallery-grid img:hover { filter: none; }

/* ---------------------------------------------------------------------------
   Découpe des sections (sites.divider_style)
   Le bas du hero est rogné selon la forme ; la section suivante glisse
   dessous (marge négative) et s'allonge d'autant par une bordure
   transparente, sur laquelle son fond se peint — c'est lui qu'on voit dans
   la découpe, quelle que soit sa couleur. Le pied de page reprend la même
   forme en écho, en relief au-dessus de lui : deux pseudo-éléments, l'un
   de la couleur du pied de page (`background: inherit`), l'autre, 3 px plus
   haut, de la couleur d'accent — le liseré suit la découpe au lieu de
   rester droit.
   --------------------------------------------------------------------------- */
body:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) { --divider-h: clamp(24px, 4.6vw, 64px); }
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) main > .hero {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--divider-h));
}
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) main > .hero + section {
  border-top: var(--divider-h) solid transparent;
}
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) main > section:last-child {
  border-bottom: var(--divider-h) solid transparent;
}
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) .site-footer {
  position: relative;
  z-index: 1;
  border-top: 0;
}
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) .site-footer::before,
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) .site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  pointer-events: none;
}
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) .site-footer::before {
  height: var(--divider-h);
  background: inherit;
  z-index: 1;
}
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) .site-footer::after {
  height: calc(var(--divider-h) + 3px);
  background: var(--primary);
  z-index: 0;
}
.divider-diagonal main > .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--divider-h) * 1), 0% 100%); }
.divider-diagonal .site-footer::before,
.divider-diagonal .site-footer::after { clip-path: polygon(0% calc(var(--divider-h) * 1), 100% 0, 100% 100%, 0 100%); }
.divider-chevron main > .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--divider-h) * 1), 50% 100%, 0% calc(100% - var(--divider-h) * 1)); }
.divider-chevron .site-footer::before,
.divider-chevron .site-footer::after { clip-path: polygon(0% calc(var(--divider-h) * 1), 50% 0, 100% calc(var(--divider-h) * 1), 100% 100%, 0 100%); }
.divider-wave main > .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--divider-h) * 1), 97.2222% calc(100% - var(--divider-h) * 0.983), 94.4444% calc(100% - var(--divider-h) * 0.933), 91.6667% calc(100% - var(--divider-h) * 0.8536), 88.8889% calc(100% - var(--divider-h) * 0.75), 86.1111% calc(100% - var(--divider-h) * 0.6294), 83.3333% calc(100% - var(--divider-h) * 0.5), 80.5556% calc(100% - var(--divider-h) * 0.3706), 77.7778% calc(100% - var(--divider-h) * 0.25), 75% calc(100% - var(--divider-h) * 0.1464), 72.2222% calc(100% - var(--divider-h) * 0.067), 69.4444% calc(100% - var(--divider-h) * 0.017), 66.6667% 100%, 63.8889% calc(100% - var(--divider-h) * 0.017), 61.1111% calc(100% - var(--divider-h) * 0.067), 58.3333% calc(100% - var(--divider-h) * 0.1464), 55.5556% calc(100% - var(--divider-h) * 0.25), 52.7778% calc(100% - var(--divider-h) * 0.3706), 50% calc(100% - var(--divider-h) * 0.5), 47.2222% calc(100% - var(--divider-h) * 0.6294), 44.4444% calc(100% - var(--divider-h) * 0.75), 41.6667% calc(100% - var(--divider-h) * 0.8536), 38.8889% calc(100% - var(--divider-h) * 0.933), 36.1111% calc(100% - var(--divider-h) * 0.983), 33.3333% calc(100% - var(--divider-h) * 1), 30.5556% calc(100% - var(--divider-h) * 0.983), 27.7778% calc(100% - var(--divider-h) * 0.933), 25% calc(100% - var(--divider-h) * 0.8536), 22.2222% calc(100% - var(--divider-h) * 0.75), 19.4444% calc(100% - var(--divider-h) * 0.6294), 16.6667% calc(100% - var(--divider-h) * 0.5), 13.8889% calc(100% - var(--divider-h) * 0.3706), 11.1111% calc(100% - var(--divider-h) * 0.25), 8.3333% calc(100% - var(--divider-h) * 0.1464), 5.5556% calc(100% - var(--divider-h) * 0.067), 2.7778% calc(100% - var(--divider-h) * 0.017), 0% 100%); }
.divider-wave .site-footer::before,
.divider-wave .site-footer::after { clip-path: polygon(0% calc(var(--divider-h) * 1), 2.7778% calc(var(--divider-h) * 0.983), 5.5556% calc(var(--divider-h) * 0.933), 8.3333% calc(var(--divider-h) * 0.8536), 11.1111% calc(var(--divider-h) * 0.75), 13.8889% calc(var(--divider-h) * 0.6294), 16.6667% calc(var(--divider-h) * 0.5), 19.4444% calc(var(--divider-h) * 0.3706), 22.2222% calc(var(--divider-h) * 0.25), 25% calc(var(--divider-h) * 0.1464), 27.7778% calc(var(--divider-h) * 0.067), 30.5556% calc(var(--divider-h) * 0.017), 33.3333% 0, 36.1111% calc(var(--divider-h) * 0.017), 38.8889% calc(var(--divider-h) * 0.067), 41.6667% calc(var(--divider-h) * 0.1464), 44.4444% calc(var(--divider-h) * 0.25), 47.2222% calc(var(--divider-h) * 0.3706), 50% calc(var(--divider-h) * 0.5), 52.7778% calc(var(--divider-h) * 0.6294), 55.5556% calc(var(--divider-h) * 0.75), 58.3333% calc(var(--divider-h) * 0.8536), 61.1111% calc(var(--divider-h) * 0.933), 63.8889% calc(var(--divider-h) * 0.983), 66.6667% calc(var(--divider-h) * 1), 69.4444% calc(var(--divider-h) * 0.983), 72.2222% calc(var(--divider-h) * 0.933), 75% calc(var(--divider-h) * 0.8536), 77.7778% calc(var(--divider-h) * 0.75), 80.5556% calc(var(--divider-h) * 0.6294), 83.3333% calc(var(--divider-h) * 0.5), 86.1111% calc(var(--divider-h) * 0.3706), 88.8889% calc(var(--divider-h) * 0.25), 91.6667% calc(var(--divider-h) * 0.1464), 94.4444% calc(var(--divider-h) * 0.067), 97.2222% calc(var(--divider-h) * 0.017), 100% 0, 100% 100%, 0 100%); }
.divider-arc main > .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--divider-h) * 1), 95.8333% calc(100% - var(--divider-h) * 0.8403), 91.6667% calc(100% - var(--divider-h) * 0.6944), 87.5% calc(100% - var(--divider-h) * 0.5625), 83.3333% calc(100% - var(--divider-h) * 0.4444), 79.1667% calc(100% - var(--divider-h) * 0.3403), 75% calc(100% - var(--divider-h) * 0.25), 70.8333% calc(100% - var(--divider-h) * 0.1736), 66.6667% calc(100% - var(--divider-h) * 0.1111), 62.5% calc(100% - var(--divider-h) * 0.0625), 58.3333% calc(100% - var(--divider-h) * 0.0278), 54.1667% calc(100% - var(--divider-h) * 0.0069), 50% 100%, 45.8333% calc(100% - var(--divider-h) * 0.0069), 41.6667% calc(100% - var(--divider-h) * 0.0278), 37.5% calc(100% - var(--divider-h) * 0.0625), 33.3333% calc(100% - var(--divider-h) * 0.1111), 29.1667% calc(100% - var(--divider-h) * 0.1736), 25% calc(100% - var(--divider-h) * 0.25), 20.8333% calc(100% - var(--divider-h) * 0.3403), 16.6667% calc(100% - var(--divider-h) * 0.4444), 12.5% calc(100% - var(--divider-h) * 0.5625), 8.3333% calc(100% - var(--divider-h) * 0.6944), 4.1667% calc(100% - var(--divider-h) * 0.8403), 0% calc(100% - var(--divider-h) * 1)); }
.divider-arc .site-footer::before,
.divider-arc .site-footer::after { clip-path: polygon(0% calc(var(--divider-h) * 1), 4.1667% calc(var(--divider-h) * 0.8403), 8.3333% calc(var(--divider-h) * 0.6944), 12.5% calc(var(--divider-h) * 0.5625), 16.6667% calc(var(--divider-h) * 0.4444), 20.8333% calc(var(--divider-h) * 0.3403), 25% calc(var(--divider-h) * 0.25), 29.1667% calc(var(--divider-h) * 0.1736), 33.3333% calc(var(--divider-h) * 0.1111), 37.5% calc(var(--divider-h) * 0.0625), 41.6667% calc(var(--divider-h) * 0.0278), 45.8333% calc(var(--divider-h) * 0.0069), 50% 0, 54.1667% calc(var(--divider-h) * 0.0069), 58.3333% calc(var(--divider-h) * 0.0278), 62.5% calc(var(--divider-h) * 0.0625), 66.6667% calc(var(--divider-h) * 0.1111), 70.8333% calc(var(--divider-h) * 0.1736), 75% calc(var(--divider-h) * 0.25), 79.1667% calc(var(--divider-h) * 0.3403), 83.3333% calc(var(--divider-h) * 0.4444), 87.5% calc(var(--divider-h) * 0.5625), 91.6667% calc(var(--divider-h) * 0.6944), 95.8333% calc(var(--divider-h) * 0.8403), 100% calc(var(--divider-h) * 1), 100% 100%, 0 100%); }

/* ---------------------------------------------------------------------------
   Motif de fond (sites.pattern_style) — une section sur deux, hors hero.
   Encre à 7 % de la couleur du texte : une texture, pas un décor.
   --------------------------------------------------------------------------- */
body:is(.pattern-grid, .pattern-dots, .pattern-lines) { --pattern-ink: color-mix(in srgb, var(--text) 7%, transparent); }
.pattern-grid main > section:not(.hero):nth-of-type(even) {
  background-image:
    linear-gradient(var(--pattern-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-ink) 1px, transparent 1px);
  background-size: 34px 34px;
}
.pattern-dots main > section:not(.hero):nth-of-type(even) {
  background-image: radial-gradient(var(--pattern-ink) 1.4px, transparent 1.8px);
  background-size: 20px 20px;
}
.pattern-lines main > section:not(.hero):nth-of-type(even) {
  background-image: repeating-linear-gradient(135deg, var(--pattern-ink) 0 1px, transparent 1px 13px);
}

/* ---------------------------------------------------------------------------
   Variantes du bloc « À propos » (block_layouts.py)
   --------------------------------------------------------------------------- */
/* Photo de l'autre côté : la grille est retournée par `direction`, ce qui
   inverse les colonnes quel que soit l'ordre du balisage (la photo est à
   gauche chez Commerce, à droite ailleurs). */
.v-flip .about-grid { direction: rtl; }
.v-flip .about-grid > * { direction: ltr; }

/* Photo en bandeau au-dessus du texte, texte en pleine mesure dessous. */
.v-stacked .about-grid { grid-template-columns: 1fr; gap: 36px; }
.v-stacked .about-grid > :is(img, .about-frame) { order: -1; width: 100%; }
.v-stacked .about-grid > img,
.v-stacked .about-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}
.v-stacked .about-grid > div:not(.about-frame) { max-width: 72ch; }
@media (max-width: 700px) {
  .v-stacked .about-grid > img, .v-stacked .about-frame img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   Variantes de la galerie (block_layouts.py)
   --------------------------------------------------------------------------- */
.v-grid .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  grid-auto-rows: auto;
}
.v-grid .gallery-grid img {
  height: auto;
  aspect-ratio: 4 / 3;
  grid-column: auto;
  grid-row: auto;
}

/* Mosaïque en colonnes (et non en cases fixes, comme la signature de
   Commerce) : des hauteurs alternées qui se remplissent quel que soit le
   nombre de photos — une grille à motif fixe laissait des trous à 4 photos. */
.v-mosaic .gallery-grid { display: block; columns: 2; column-gap: 12px; }
@media (min-width: 700px) { .v-mosaic .gallery-grid { columns: 3; } }
.v-mosaic .gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
  break-inside: avoid;
}
.v-mosaic .gallery-grid img:nth-child(3n + 2) { aspect-ratio: 4 / 3; }
.v-mosaic .gallery-grid img:nth-child(3n) { aspect-ratio: 1; }

/* Bandeau à faire défiler : de grandes photos côte à côte, calées au doigt
   (scroll-snap). La suivante dépasse du bord pour montrer qu'il y en a
   d'autres. */
.v-strip .gallery-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.v-strip .gallery-grid img {
  flex: 0 0 min(82%, 460px);
  height: clamp(230px, 30vw, 340px);
  scroll-snap-align: start;
}

/* ---------------------------------------------------------------------------
   Variantes des prestations (sites/_services.html)
   Un balisage neutre (`.svc-*`) peint avec les jetons du template :
   `--feature-radius` (16 px chez Atelier, 2 chez Studio, 24 chez Commerce,
   6 chez Garage), `--surface`, `--border`, `--primary-soft`. Chaque feuille de
   template y ajoute ses retouches.
   --------------------------------------------------------------------------- */
.svc { display: grid; gap: 20px; }
.svc-item h3 { margin: 0 0 8px; font-size: 1.08rem; }
.svc-item p { margin: 0; color: var(--text-muted); }
.svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: min(var(--feature-radius), 14px);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.3rem;
}

/* Trois colonnes : le compte juste pour 3 ou 6 prestations, les cas les plus
   courants. Exactement 4 : deux par deux plutôt qu'un 3 + 1 bancal. */
.svc-cards { grid-template-columns: 1fr; }
@media (min-width: 600px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .svc-cards { grid-template-columns: repeat(3, 1fr); }
  .svc-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
.svc-cards .svc-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--feature-radius);
  padding: 28px;
}
.svc-cards .svc-icon { margin-bottom: 18px; }

/* Liste : une prestation par ligne, l'intitulé à gauche et sa description en
   face, sans numéros (ce n'est pas une séquence). */
.svc-list { gap: 0; }
.svc-list .svc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.svc-list .svc-item:last-child { border-bottom: 1px solid var(--border); }
.svc-list .svc-icon { width: 42px; height: 42px; font-size: 1.1rem; }
@media (min-width: 760px) {
  .svc-list .svc-body { display: grid; grid-template-columns: minmax(180px, .75fr) 1.6fr; gap: 28px; align-items: baseline; }
  .svc-list .svc-item h3 { margin: 0; }
}

/* Mosaïque : la première prestation en grande tuile, les autres autour. La
   tuile est à l'encre inversée (texte sur fond) : lisible dans les deux
   thèmes, là où `--primary-2` devient clair en thème sombre chez Atelier. */
.svc-bento { grid-template-columns: 1fr; }
.svc-bento .svc-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--feature-radius);
  padding: 26px;
}
.svc-bento .svc-icon { margin-bottom: 16px; }
@media (min-width: 760px) {
  .svc-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); }
  .svc-bento .svc-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--text);
    border-color: transparent;
    color: var(--bg);
  }
  .svc-bento .svc-item:first-child .svc-icon {
    margin-bottom: auto;
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: #fff;
  }
  .svc-bento .svc-item:first-child h3 { font-size: clamp(1.3rem, 2.3vw, 1.85rem); color: inherit; }
  .svc-bento .svc-item:first-child p { color: color-mix(in srgb, var(--bg) 80%, transparent); max-width: 44ch; }
}

/* ---------------------------------------------------------------------------
   Réseaux sociaux en rangée fixe (moins de 4, voir sites/_social.html)
   --------------------------------------------------------------------------- */
.social-static { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 0; }

/* ---------------------------------------------------------------------------
   Carte de note Google (sites/_reviews.html)
   --------------------------------------------------------------------------- */
.review-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 8px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--feature-radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease;
}
.review-badge:hover { border-color: var(--primary); }
.review-badge-logo { line-height: 0; }
.review-badge-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.review-badge-score { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.review-badge-stars { color: #f2b01e; font-size: 1.2rem; letter-spacing: .08em; }
.review-badge-meta { color: var(--text-muted); font-size: .95rem; }
.review-badge-cta {
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Visuel des éléments de bloc (sites/_visual.html, app/icon_picker.py)
   Pastille colorée : teinte de la couleur choisie, pictogramme à la couleur
   pleine. Image : en tête de carte, ou en vignette dans une liste.
   --------------------------------------------------------------------------- */
:is(.card-icon, .cell-icon, .svc-icon).has-chip {
  background: color-mix(in srgb, var(--chip) 16%, transparent);
  color: var(--chip);
}
#services .card-icon.has-chip { border-color: var(--chip); }
.item-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: min(var(--feature-radius, 12px), 14px);
  margin-bottom: 16px;
}
.svc-list .item-image { width: 72px; height: 72px; aspect-ratio: 1; margin: 0; }
.service-thumb { width: 72px; height: 72px; object-fit: cover; flex: none; margin-left: auto; align-self: center; }
/* Grande tuile de la mosaïque : l'image monte en tête, le texte reste en bas. */
:is(.svc-bento .svc-item, .service-scroller .card):first-child > .item-image { margin-bottom: auto; }

/* ===========================================================================
   Nouveaux blocs (2026-09-29, sites/_blocks/, app/extra_blocks.py)
   Un balisage commun aux 4 templates clients, peint avec leurs jetons
   (`--primary`, `--surface`, `--border`, `--feature-radius`...). Les retouches
   propres à un template sont dans le bloc « Nouveaux blocs » de sa feuille,
   préfixées par `.blk` pour l'emporter sur ces règles (chargées après).
   =========================================================================== */

/* Texte lisible sur la couleur d'accent : blanc sur un accent foncé, encre
   sur un accent clair (l'accent de Studio devient presque blanc en thème
   sombre). Blanc là où la syntaxe relative des couleurs est inconnue. */
.blk, .blk-divider { --on-primary: #fff; }
@supports (color: lch(from red l c h)) {
  .blk, .blk-divider { --on-primary: lch(from var(--primary) calc((70 - l) * 100) 0 0); }
}

.blk h2 { text-wrap: balance; }
.blk h3 { margin: 0 0 8px; font-size: 1.1rem; }
:where(.blk) :where(.stat, .step, .feature-body, .cta-text, .quote, .blk-video, .blk-prices) p { margin: 0; }

/* Bouton secondaire des blocs (sites/_section.html, macro `button`). */
.btn.btn-quiet {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.btn.btn-quiet:hover { box-shadow: inset 0 0 0 1.5px var(--primary); }
.btn-outline.btn-quiet { border-color: var(--border); color: var(--text-muted); }
.btn-outline.btn-quiet:hover { border-color: var(--text); color: var(--bg); }

/* ---------------------------------------------------------------------------
   Séparateur
   --------------------------------------------------------------------------- */
.blk-divider {
  --dv-h: 56px;
  --dv-space: 32px;
  color: var(--primary);
  line-height: 0;
}
.dv-tone-secondary { color: var(--primary-2); }
.dv-tone-muted { color: color-mix(in srgb, var(--text) 24%, transparent); }
.dv-size-s { --dv-h: 30px; --dv-space: 18px; }
.dv-size-l { --dv-h: 96px; --dv-space: 56px; }

.blk-divider svg { display: block; width: 100%; height: var(--dv-h); fill: currentColor; }
.dv-flip svg, .dv-flip .dv-ruler { scale: 1 -1; }
.dv-alt { opacity: .4; }
.dv-stroke { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dv-is-wave svg { height: calc(var(--dv-h) * .7); margin: calc(var(--dv-space) * .4) 0; }

.dv-ruler, .dv-ornament, .dv-dots { margin: var(--dv-space) auto; }
.dv-ruler {
  display: block;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 12px) left bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 60px) left bottom / 100% 14px no-repeat;
}
.dv-size-s .dv-ruler { height: 10px; }
.dv-size-l .dv-ruler { height: 20px; }

.dv-ornament { display: flex; align-items: center; gap: 20px; }
.dv-line { flex: 1; height: 1px; background: currentColor; opacity: .55; }
.dv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  line-height: 1;
  font-size: 1.2rem;
}
.dv-chip.has-chip { color: var(--chip); border-color: var(--chip); background: color-mix(in srgb, var(--chip) 12%, transparent); }
.dv-size-s .dv-chip { width: 40px; height: 40px; }
.dv-size-l .dv-chip { width: 68px; height: 68px; }
.dv-size-l .dv-chip svg { width: 30px; height: 30px; }
.dv-logo { display: block; flex: none; width: auto; height: 46px; max-width: 180px; object-fit: contain; }
.dv-size-s .dv-logo { height: 32px; }
.dv-size-l .dv-logo { height: 72px; max-width: 240px; }

.dv-dots { display: flex; justify-content: center; gap: 16px; }
.dv-dots span { width: 8px; height: 8px; background: currentColor; rotate: 45deg; }
.dv-dots span:nth-child(2) { width: 11px; height: 11px; }
.dv-size-l .dv-dots span { width: 11px; height: 11px; }
.dv-size-l .dv-dots span:nth-child(2) { width: 15px; height: 15px; }

.dv-is-space { height: calc(var(--dv-space) * 2); }

/* Découpe du hero réglée sur le site (plus haut) : un séparateur posé juste
   sous le hero laisse la même place qu'une section. */
:is(.divider-diagonal, .divider-chevron, .divider-wave, .divider-arc) main > .hero + .blk-divider {
  border-top: var(--divider-h) solid transparent;
}

/* ---------------------------------------------------------------------------
   Chiffres clés
   --------------------------------------------------------------------------- */
.blk-stats { display: grid; gap: 32px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.blk-stats:has(> :only-child) { grid-template-columns: 1fr; }
@media (min-width: 760px) { .blk-stats { grid-template-columns: repeat(var(--stats, 3), minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 2px solid var(--primary); }
.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-label { font-weight: 700; }
.stat-text { color: var(--text-muted); font-size: .95rem; }

/* ---------------------------------------------------------------------------
   Étapes : numérotées sur un trait qui les relie (vertical sur téléphone)
   --------------------------------------------------------------------------- */
.blk-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 28px; position: relative; }
.step { position: relative; padding-left: 64px; }
.step p { color: var(--text-muted); }
.step-number {
  position: absolute;
  left: 0;
  top: -4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.blk-steps::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 35%, transparent);
}
@media (min-width: 900px) {
  .blk-steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 32px; }
  .step { padding: 64px 0 0; }
  .step-number { top: 0; }
  .blk-steps::before { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 2px; }
  .blk-steps:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blk-steps:has(> :nth-child(6))::before { display: none; }
}
.js .blk-steps::before { scale: 1 0; transform-origin: top; transition: scale .8s cubic-bezier(.16,1,.3,1) .15s; }
.js .is-visible .blk-steps::before { scale: 1 1; }
@media (min-width: 900px) {
  .js .blk-steps::before { scale: 0 1; transform-origin: left; }
  .js .is-visible .blk-steps::before { scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .blk-steps::before { scale: 1 1 !important; transition: none; }
  .video-play, .blk-logos img, .feature-link svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   Avant / après. Sans JavaScript : les deux photos côte à côte, étiquetées.
   Avec : superposées, le curseur (un <input type="range"> invisible posé sur
   toute la photo, donc utilisable au clavier et au doigt) découvre « avant ».
   --------------------------------------------------------------------------- */
.blk-ba-list { display: grid; gap: 32px; margin-top: 8px; }
@media (min-width: 900px) { .blk-ba-list:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; } }
.ba { margin: 0; }
/* Une seule paire : pas sur toute la largeur, elle ferait 800 px de haut. */
.blk-ba-list > .ba:only-child { width: 100%; max-width: 880px; margin-inline: auto; }
.ba figcaption { margin-top: 12px; color: var(--text-muted); text-align: center; }
.ba-frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow: hidden;
  border-radius: var(--feature-radius, 12px);
}
.ba-img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-after { order: 2; }
.ba-tag {
  position: absolute;
  top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
}
.ba-tag-before { left: 12px; }
.ba-tag-after { left: calc(50% + 16px); }
.ba-handle, .ba-range { display: none; }

.js .ba-frame { display: block; gap: 0; aspect-ratio: 4 / 3; touch-action: pan-y; }
.js .ba-img { position: absolute; inset: 0; aspect-ratio: auto; }
.js .ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.js .ba-tag-after { left: auto; right: 12px; }
.js .ba-handle {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.js .ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.js .ba-range {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.js .ba-frame:has(.ba-range:focus-visible) .ba-handle { background: var(--primary); }
.js .ba-frame:has(.ba-range:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Vidéo : façade 16/9 (rien n'est chargé chez l'hébergeur avant le clic)
   --------------------------------------------------------------------------- */
.blk-video { margin: 8px 0 0; }
.video-facade, .video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--feature-radius, 12px);
}
.video-facade {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--primary-2) center / cover no-repeat;
  background-image: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--primary) 45%, transparent), transparent 60%);
  color: #fff;
}
.video-facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .45)); }
.video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5);
  transition: scale .25s cubic-bezier(.34,1.56,.64,1);
}
.video-play svg { margin-left: 4px; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { scale: 1.08; }
.blk-video figcaption { margin-top: 12px; font-weight: 600; }
.video-note { margin: 6px 0 0; color: var(--text-muted); font-size: .82rem; }

/* ---------------------------------------------------------------------------
   Appel à l'action
   --------------------------------------------------------------------------- */
section.sec-cta { padding: 48px 0; background: none; }
.cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 5vw, 52px);
  border-radius: var(--feature-radius, 12px);
  position: relative;
  overflow: hidden;
}
.cta-text { flex: 1 1 380px; }
.cta-text h2 { margin: 0 0 10px; color: inherit; }
.cta-text h2::after { display: none; }
.cta-text p { opacity: .88; max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cta-accent .cta-box { background: var(--primary); color: var(--on-primary); }
.cta-accent .cta-box::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-primary) 12%, transparent);
  pointer-events: none;
}
.cta-accent .cta-actions > :first-child { background: var(--on-primary); color: var(--primary); border-color: transparent; }
/* Second bouton en contour : ombre intérieure pour ceux qui n'ont pas de
   bordure (Atelier, Commerce), bordure pour ceux qui en ont une. */
.cta-accent .cta-actions > :is(.btn-quiet, .btn-light) { background: transparent; color: var(--on-primary); box-shadow: inset 0 0 0 1.5px currentColor; }
.cta-accent .cta-actions > :is(.btn-ghost, .btn-outline.btn-quiet) { background: transparent; color: var(--on-primary); border-color: currentColor; box-shadow: none; }

.cta-dark .cta-box { background: var(--text); color: var(--bg); }
.cta-dark .cta-actions > .btn-quiet { background: transparent; color: var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bg) 45%, transparent); }
.cta-dark .cta-actions > :is(.btn-ghost, .btn-outline.btn-quiet) { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 45%, transparent); box-shadow: none; }
.cta-dark .btn-outline { border-color: var(--bg); color: var(--bg); }
.cta-dark .cta-actions > .btn-outline:first-child { background: var(--bg); color: var(--text); }
.cta-dark .btn-outline:hover { background: var(--bg); color: var(--text); }

.cta-soft .cta-box { background: var(--primary-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); }

/* ---------------------------------------------------------------------------
   Texte et image en alternance
   --------------------------------------------------------------------------- */
.blk-features { display: grid; gap: clamp(40px, 7vw, 88px); margin-top: 8px; }
.feature { display: grid; gap: 24px 56px; align-items: center; }
@media (min-width: 820px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature.is-reversed .feature-media { order: 2; }
  .feature.no-media { grid-template-columns: minmax(0, 760px); }
}
.feature-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--feature-radius, 12px);
}
.feature-chip {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--feature-radius, 12px);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 3rem;
}
.feature-chip svg { width: clamp(56px, 9vw, 96px); height: auto; }
.feature-chip.has-chip { background: color-mix(in srgb, var(--chip) 14%, var(--surface)); color: var(--chip); }
/* Un pictogramme n'a pas besoin de la moitié de la largeur : colonne étroite,
   pastille carrée. */
@media (min-width: 820px) {
  .feature:has(.feature-chip) { grid-template-columns: minmax(0, 280px) 1fr; }
  .feature.is-reversed:has(.feature-chip) { grid-template-columns: 1fr minmax(0, 280px); }
}
.feature .feature-chip { aspect-ratio: 1; max-width: 280px; }
@media (max-width: 819px) { .feature .feature-chip { max-width: 180px; } }
.feature-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 12px; }
.feature-body p { color: var(--text-muted); white-space: pre-line; }
.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.feature-link svg { transition: translate .2s ease; }
.feature-link:hover svg { translate: 4px 0; }

/* ---------------------------------------------------------------------------
   Carte / liste de prix
   --------------------------------------------------------------------------- */
.blk-prices { display: grid; gap: 36px 64px; margin-top: 8px; }
@media (min-width: 860px) { .blk-prices.is-multi { grid-template-columns: 1fr 1fr; align-items: start; } }
.price-group h3 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  font-size: 1.15rem;
}
.price-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.price-line { display: flex; align-items: baseline; gap: 10px; }
.price-name { font-weight: 700; }
.price-dots { flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--text) 30%, transparent); translate: 0 -4px; }
.price-value { font-weight: 800; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-desc { display: block; margin-top: 4px; color: var(--text-muted); font-size: .94rem; max-width: 52ch; }
.price-note { margin: 28px 0 0; color: var(--text-muted); font-size: .9rem; }

/* ---------------------------------------------------------------------------
   Zone d'intervention
   --------------------------------------------------------------------------- */
.blk-area { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.blk-area li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.blk-area svg { color: var(--primary); flex: none; }
.area-note { margin: 20px 0 0; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Partenaires et labels : niveaux de gris, en couleur au survol
   --------------------------------------------------------------------------- */
.blk-logos {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
/* Tuile toujours blanche, même sur un template sombre : ce sont des logos
   en couleurs officielles (même choix que les marques du mode garage). Le
   gris et l'atténuation ne touchent que le logo, jamais la tuile. */
.blk-logos li {
  display: flex;
  height: 96px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: min(var(--feature-radius, 12px), 14px);
}
.blk-logos a { display: flex; flex: 1; min-width: 0; }
.blk-logos img {
  display: block;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.blk-logos li:hover img { filter: none; opacity: 1; }

/* ---------------------------------------------------------------------------
   Documents à télécharger
   --------------------------------------------------------------------------- */
.blk-docs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .blk-docs:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; } }
.doc {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: min(var(--feature-radius, 12px), 14px);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease;
}
.doc:hover { border-color: var(--primary); }
.doc-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: min(var(--feature-radius, 12px), 12px);
  background: var(--primary-soft);
  color: var(--primary);
}
.doc-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.doc-title { font-weight: 700; }
.doc-text { color: var(--text-muted); font-size: .92rem; }
.doc-meta { flex: none; color: var(--text-muted); font-size: .8rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Citation
   --------------------------------------------------------------------------- */
.quote { margin: 0 auto; max-width: 860px; text-align: center; }
.quote blockquote { margin: 0; position: relative; }
.quote blockquote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.5rem;
  line-height: .7;
  height: .45em;
  color: var(--primary);
}
.quote blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: pre-line;
}
.quote figcaption { margin-top: 24px; display: grid; gap: 2px; }
.quote figcaption span { color: var(--text-muted); font-size: .92rem; }
.quote-portrait {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--primary);
}

/* ===========================================================================
   Menu et en-tête (2026-09-30, app/site_menu.py, sites/_menu.html)
   Modèles d'en-tête (`header-*` sur <body>), bandeau d'infos (`.topbar`),
   boutons des modes « Appeler » et « personnalisé ». Chaque template déclare
   en fin de sa feuille les couleurs de son en-tête (--header-bg, --header-ink,
   --header-line) et de son bandeau (--topbar-bg, --topbar-ink facultatif).
   Aucune règle ne s'applique à un site sans réglage.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Bouton de l'en-tête
   --------------------------------------------------------------------------- */
/* Appel : toujours visible, c'est le geste d'un visiteur sur téléphone ;
   l'icône seule sous 620 px, pour ne pas écraser la marque. */
.site-header .site-header-cta.cta-phone { display: inline-flex; }
.site-header .site-header-cta.cta-phone span { display: inline; }
@media (max-width: 619px) {
  .site-header .site-header-cta.cta-phone { padding: 10px 12px; }
  .site-header .site-header-cta.cta-phone span { display: none; }
}
/* Bouton personnalisé : sur téléphone, il passe dans le menu déroulant. */
.site-header .site-header-cta.cta-custom { display: inline-flex; }
.site-header .site-header-cta.cta-custom span { display: inline; }
@media (max-width: 759px) { .site-header .site-header-cta.cta-custom { display: none; } }
.site-nav-mobile .nav-cta { font-weight: 700; color: var(--primary); }

/* ---------------------------------------------------------------------------
   Bandeau d'infos (sites/_topbar.html)
   Texte blanc ou encre selon la clarté du fond (même calcul que --on-primary),
   sauf si le template impose sa couleur.
   --------------------------------------------------------------------------- */
.topbar {
  --topbar-auto-ink: #fff;
  background: var(--topbar-bg, var(--primary-2));
  color: var(--topbar-ink, var(--topbar-auto-ink));
  font-size: .84rem;
  line-height: 1.35;
}
@supports (color: lch(from red l c h)) {
  .topbar { --topbar-auto-ink: lch(from var(--topbar-bg, var(--primary-2)) calc((70 - l) * 100) 0 0); }
}
.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.topbar-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-item svg { flex: none; opacity: .75; }
.topbar-address { margin-left: auto; }
.topbar-address span { overflow: hidden; text-overflow: ellipsis; }
.topbar-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 28%, transparent);
}
.topbar-hours.is-closed .topbar-dot { background: #ef4444; box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 28%, transparent); }
/* Téléphone : le numéro et l'état du jour, rien d'autre. */
@media (max-width: 699px) {
  .topbar-inner { justify-content: space-between; padding: 7px 16px; }
  .topbar-address { display: none; }
}

/* ---------------------------------------------------------------------------
   Centré (`header-centered`) : la marque au milieu, le bouton à droite, le menu
   sur sa propre ligne. Dès 900 px, et tant que le menu tient : sinon
   nav-fit.js passe au bouton menu, et c'est l'en-tête habituel qui revient.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .header-centered .site-header:not(.nav-collapsed) .site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". brand cta" "nav nav nav";
    align-items: center;
    row-gap: 14px;
  }
  .header-centered .site-header:not(.nav-collapsed) .site-brand { grid-area: brand; margin: 0; }
  .header-centered .site-header:not(.nav-collapsed) .site-logo { height: 48px; }
  .header-centered .site-header:not(.nav-collapsed) .site-header-cta { grid-area: cta; justify-self: end; }
  .header-centered .site-header:not(.nav-collapsed) .site-nav {
    grid-area: nav;
    justify-content: center;
    padding-top: 13px;
    border-top: 1px solid var(--header-line);
  }
}

/* ---------------------------------------------------------------------------
   Flottant (`header-floating`) : une barre détachée des bords, arrondie et
   translucide, qui suit le défilement. La bande qui l'entoure reste
   transparente — la page défile derrière — et laisse passer les clics.
   --------------------------------------------------------------------------- */
.header-floating .site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 16px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
.header-floating .site-header > * { pointer-events: auto; }
.header-floating .site-header-inner,
.header-floating .site-nav-mobile {
  max-width: var(--header-max, 1120px);
  margin-inline: auto;
  background: color-mix(in srgb, var(--header-bg) var(--header-glass, 86%), transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border: 1px solid var(--header-line);
  border-radius: calc(var(--feature-radius, 12px) + 8px);
  box-shadow: 0 16px 36px -26px rgba(0, 0, 0, .5);
}
.header-floating .site-header-inner,
.header-floating .site-header.is-scrolled .site-header-inner { padding: 10px 22px; }
/* Un bouton en bout de barre s'y cale, à la même distance du bord que du haut. */
.header-floating .site-header-inner:has(> .site-header-cta),
.header-floating .site-header.is-scrolled .site-header-inner:has(> .site-header-cta) { padding-right: 10px; }
.header-floating .site-header.is-scrolled .site-header-inner { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
.header-floating .site-nav-mobile { margin-top: 8px; padding: 10px 22px 14px; }
.header-floating.corners-sharp :is(.site-header-inner, .site-nav-mobile) { border-radius: 0; }
.header-floating.corners-soft :is(.site-header-inner, .site-nav-mobile) { border-radius: 12px; }
.header-floating.corners-round .site-header-inner { border-radius: 999px; padding-left: 26px; }
.header-floating.corners-round .site-nav-mobile { border-radius: 26px; }

/* ---------------------------------------------------------------------------
   Plein écran (`header-drawer`) : le bouton « Menu » à toutes les largeurs,
   qui ouvre un grand menu en surimpression (le menu déroulant, agrandi).
   Seulement avec JavaScript : sans lui le bouton ne ferait rien, et c'est le
   menu habituel qui reste. Échap, clic sur un lien, blocage du défilement :
   static/sites/nav-fit.js.

   Le grand menu vit DANS l'en-tête, sous sa marque et son bouton (z-index
   négatif dans le contexte de l'en-tête) : ils restent visibles et le bouton
   sert à refermer. D'où la couleur de fond de l'en-tête (--header-bg), et un
   en-tête toujours collant — c'est le seul accès au menu.
   --------------------------------------------------------------------------- */
.nav-toggle-label,
.nav-toggle svg + svg { display: none; }
.js .header-drawer .site-header { position: sticky; top: 0; z-index: 20; }
.js .header-drawer .site-nav { display: none; }
.js .header-drawer .nav-toggle { display: inline-flex; gap: 9px; }
.js .header-drawer .nav-toggle-label { display: inline-grid; font: inherit; font-size: .92rem; font-weight: 600; }
/* Les deux mots empilés : le bouton garde la largeur du plus long. */
.js .header-drawer .nav-toggle-label > span { grid-area: 1 / 1; }
.js .header-drawer .nav-toggle-label > span + span,
.js .header-drawer .nav-toggle[aria-expanded="true"] .nav-toggle-label > span:first-child { visibility: hidden; }
.js .header-drawer .nav-toggle[aria-expanded="true"] .nav-toggle-label > span + span { visibility: visible; }
.js .header-drawer .nav-toggle[aria-expanded="true"] svg:first-child { display: none; }
.js .header-drawer .nav-toggle[aria-expanded="true"] svg + svg { display: block; }
@media (max-width: 419px) { .js .header-drawer .nav-toggle-label { display: none; } }

.js .header-drawer .site-header .site-nav-mobile.open {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: -1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  /* Sous l'en-tête, aligné sur la marque : nav-fit.js mesure les deux. */
  padding: calc(var(--drawer-top, 80px) + 5vh) var(--drawer-left, 24px) 48px;
  background: var(--header-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.js .header-drawer .site-nav-mobile.open a {
  width: auto;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--header-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-decoration: none;
  text-transform: none;
}
.js .header-drawer .site-nav-mobile.open a:hover { background: none; color: var(--primary); }
.js .header-drawer .site-nav-mobile.open a.nav-anchor {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0;
  opacity: .72;
}
.js .header-drawer .site-nav-mobile.open a:not(.nav-anchor) + a.nav-anchor { margin-top: 22px; }
/* Le bouton de l'en-tête, repris en bas du grand menu (« Appeler » du mode
   « Selon le template » de Garage compris : un lien tel:). */
.js .header-drawer .site-nav-mobile.open :is(a.nav-cta, a[href^="tel:"]) {
  margin-top: 28px;
  padding: 12px 22px;
  border-radius: min(var(--feature-radius, 12px), 999px);
  background: var(--primary);
  color: var(--on-primary);
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0;
}
.site-nav-mobile { --on-primary: #fff; }
@supports (color: lch(from red l c h)) {
  .site-nav-mobile { --on-primary: lch(from var(--primary) calc((70 - l) * 100) 0 0); }
}
/* Bouton personnalisé : dès 760 px, il reste visible dans la barre, au-dessus
   du grand menu — inutile de le répéter dessous. */
@media (min-width: 760px) { .js .header-drawer .site-nav-mobile.open a.nav-cta:not([href^="tel:"]) { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .header-drawer .site-nav-mobile.open { animation: drawer-in .3s ease both; }
  .js .header-drawer .site-nav-mobile.open a { animation: drawer-item .55s cubic-bezier(.16, 1, .3, 1) both; }
  .js .header-drawer .site-nav-mobile.open a:nth-child(2) { animation-delay: .04s; }
  .js .header-drawer .site-nav-mobile.open a:nth-child(3) { animation-delay: .08s; }
  .js .header-drawer .site-nav-mobile.open a:nth-child(4) { animation-delay: .12s; }
  .js .header-drawer .site-nav-mobile.open a:nth-child(5) { animation-delay: .16s; }
  .js .header-drawer .site-nav-mobile.open a:nth-child(n+6) { animation-delay: .2s; }
}
@keyframes drawer-in { from { opacity: 0; } }
@keyframes drawer-item { from { opacity: 0; translate: 0 16px; } }
/* Menu ouvert : l'en-tête passe au-dessus de tout (bandeaux, bouton de retour
   en haut, bandeau cookies), sans flou — un `backdrop-filter` ferait de
   l'en-tête le repère du `position: fixed`, et le grand menu serait rogné à
   sa hauteur (en-tête fumé de Garage). */
/* La barre de défilement disparaît : la place qu'elle occupait est rendue
   (--scrollbar-gap, mesuré par nav-fit.js) pour que rien ne bouge dessous. */
html.nav-drawer-open { overflow: hidden; }
html.nav-drawer-open body { padding-right: var(--scrollbar-gap, 0px); }
.nav-drawer-open .header-drawer .site-header {
  z-index: 90;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--header-bg);
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Formulaire de contact en « demande de rendez-vous » (sites/_contact_form.html,
   appointment_request.py) : date et moment côte à côte, libellés visibles (un
   champ date n'a pas de texte indicatif). Les champs eux-mêmes gardent le style
   de chaque template, `select` compris. */
.contact-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: inherit; }
.contact-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.contact-field > span { font-size: .85rem; font-weight: 600; opacity: .85; }
/* Date et moment à la même hauteur (un champ date est plus haut qu'une liste). */
.contact-form-row .contact-field > :last-child { flex: 1 1 auto; }
/* Icône du calendrier lisible : claire sur un formulaire sombre. Garage et
   commerce, sombres autour du formulaire en toutes circonstances, le posent
   dans leur propre feuille. */
@media (prefers-color-scheme: dark) { .contact-form input[type=date] { color-scheme: dark; } }
.contact-form select { cursor: pointer; }
.contact-form select option { color: #1f2430; background: #fff; }


/* ===========================================================================
   « Nos occasions » en carrousel (2026-10-08, demande de l'utilisateur : GB
   Motos a plus de six véhicules en vente, la grille s'étalait sur trois lignes).
   Une seule rangée, qui défile seule (static/sites/blocks.js), deux boutons à
   l'écran, le doigt sur un téléphone. Sans JavaScript : la grille d'origine,
   sans les boutons.

   Largeur des fiches selon la place réellement disponible (requête de
   conteneur, pas d'écran : le rail de Studio est plus étroit que la page) :
   une et le bord de la suivante, puis deux, puis trois.
   =========================================================================== */
.carrousel { position: relative; container-type: inline-size; --carrousel-gap: 22px; }
.carrousel-btn { display: none; }

.js .carrousel-piste {
  display: flex;
  gap: var(--carrousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px; /* le retrait de la piste : à 0 au départ */
  scrollbar-width: none;
  /* De la place pour l'ombre et le soulèvement des fiches au survol, que le
     défilement horizontal rognerait ; rendue par la marge négative. */
  padding: 10px 2px 30px;
  margin: -10px -2px -30px;
}
.js .carrousel-piste::-webkit-scrollbar { display: none; }
.js .carrousel-piste > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
@container (min-width: 560px) {
  .js .carrousel-piste > * { flex-basis: calc((100% - var(--carrousel-gap)) / 2); }
}
@container (min-width: 900px) {
  .js .carrousel-piste > * { flex-basis: calc((100% - 2 * var(--carrousel-gap)) / 3); }
}

.js .carrousel-btn {
  position: absolute;
  top: var(--carrousel-milieu, calc(50% - 10px)); /* milieu de la photo, mesuré par blocks.js */
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.js .carrousel-btn:hover { color: var(--primary); border-color: var(--primary); }
.js .carrousel-btn:active { transform: translateY(-50%) scale(.94); }
.js .carrousel-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.js .carrousel-prec { left: -14px; }
.js .carrousel-suiv { right: -14px; }
/* Tout tient sur une rangée : rien à faire défiler, pas de boutons. */
.js .carrousel.est-fixe .carrousel-btn { display: none; }
@container (max-width: 559px) {
  .js .carrousel-btn { width: 40px; height: 40px; }
  .js .carrousel-prec { left: 2px; }
  .js .carrousel-suiv { right: 2px; }
}


/* ---------------------------------------------------------------------------
   Style des cartes — bordure colorée et effet au survol (block_style.py, 2026-10-16)

   Option de BLOC, jamais du site : la `<section>` reçoit `data-bordure` (accent | secondary | custom), éventuellement
   `data-bordure-quand="survol"`, `data-survol` (lift | glow | tint) et, pour une couleur choisie, `--bord` / `--bord-w`
   en ligne. Sans ces attributs, aucune règle ci-dessous ne s'applique : le rendu d'origine du modèle est inchangé.

   La liste vise les cartes de chaque type de bloc par l'identifiant de sa section. `:is()` prend la spécificité de son
   argument le plus fort : avec un identifiant, ces règles l'emportent sur les retouches de template qui commencent par
   `#services` (même piège que les variantes de prestations, plus haut).
   --------------------------------------------------------------------------- */
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure="accent"] { --bord: var(--primary); }
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure="secondary"] { --bord: var(--primary-2); }

:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure]
  :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) {
  border: var(--bord-w, 2px) solid var(--bord, var(--primary));
}
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure-quand="survol"]
  :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) {
  border-color: var(--border, rgba(128, 128, 128, .28));
}

:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure], 
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-survol] {
  --carte-transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card),
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-survol] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) {
  transition: var(--carte-transition);
}

/* Au survol et au clavier (focus à l'intérieur d'une carte) : la bordure s'allume, l'effet choisi se joue. */
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-bordure-quand="survol"]
  :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card):is(:hover, :focus-within) {
  border-color: var(--bord, var(--primary));
}
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-survol="lift"]
  :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card):is(:hover, :focus-within) {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--bord, var(--primary)) 55%, transparent), 0 6px 14px -8px rgba(0, 0, 0, .28);
}
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-survol="glow"]
  :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card):is(:hover, :focus-within) {
  box-shadow: 0 0 0 1px var(--bord, var(--primary)), 0 0 26px color-mix(in srgb, var(--bord, var(--primary)) 45%, transparent);
}
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-survol="tint"]
  :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card):is(:hover, :focus-within) {
  background-color: color-mix(in srgb, var(--bord, var(--primary)) 10%, var(--surface, var(--bg, transparent)));
}
@media (prefers-reduced-motion: reduce) {
  :is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-survol="lift"]
    :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card):is(:hover, :focus-within) {
    transform: none;
  }
}


/* Cibles tactiles (audit du 2026-10-16) : le bouton « Compris » du bandeau cookies faisait 21 px de haut et les liens du
   pied de page (crédit B-In-Tech, téléphone, e-mail) 21 px — sous les 24 px de WCAG 2.2 (2.5.8). Un peu d'air vertical
   suffit ; l'aspect de la ligne ne change pas. */
.cookie-banner button { min-height: 40px; }
.site-footer a { display: inline-block; padding-block: 2px; }


/* ---------------------------------------------------------------------------
   Style des blocs, suite (block_style.py, 2026-10-16) : ombre et coins des cartes, fond, largeur, titre, animation,
   couleur des pictogrammes. Comme plus haut : rien ne s'applique sans l'attribut `data-*` correspondant sur la
   `<section>` du bloc, donc un site sans réglage reste au pixel près ce qu'il était.
   --------------------------------------------------------------------------- */

/* Ombre et coins des cartes (blocs à cartes seulement). */
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-ombre="none"] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) { box-shadow: none; }
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-ombre="soft"] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) { box-shadow: 0 2px 10px -4px rgba(15, 23, 42, .18); }
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-ombre="strong"] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) { box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .38); }
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-coins="square"] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) { border-radius: 0; }
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-coins="round"] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) { border-radius: 16px; }
:is(#services, #temoignages, #tarifs, #equipe, #faq, #occasions)[data-coins="pill"] :is(.card, .svc-item, .service-row, .service-cell, .testimonial-card, .pricing-card, .team-card, .faq-item, .vehicle-card) { border-radius: 30px; }

/* Fond d'une section : toujours une TEINTE pâle (mélange avec le fond du modèle), jamais une couleur pleine — le texte
   reste lisible en clair comme en sombre, quelle que soit la couleur choisie. `body section` bat la règle d'alternance
   des fonds de chaque modèle (`section:nth-of-type(even)`). */
body section[data-fond="tint"] { background: color-mix(in srgb, var(--primary) 10%, var(--bg)); }
body section[data-fond="tint2"] { background: color-mix(in srgb, var(--primary-2) 9%, var(--bg)); }
body section[data-fond="soft"] { background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
body section[data-fond="gradient"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 13%, var(--bg)), color-mix(in srgb, var(--primary-2) 10%, var(--bg)));
}
body section[data-fond="custom"] { background: color-mix(in srgb, var(--fond, var(--primary)) 14%, var(--bg)); }

/* Largeur du contenu. */
section[data-largeur="narrow"] > .container { max-width: 760px; }
section[data-largeur="wide"] > .container { max-width: min(1400px, 94vw); }

/* Titre : centré (pas dans le rail de Studio, dont le titre est à gauche par conception) et/ou plus grand. */
section[data-titre="center"] > .container:not(.section-rail) :is(h2, .section-lead, .tag, .eyebrow) {
  text-align: center; margin-inline: auto;
}
section[data-titre="center"] > .container:not(.section-rail) h2::after { margin-inline: auto; }
section[data-titre="center"] > .container:not(.section-rail) .tag { display: table; }
section[data-titre-taille="large"] h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }

/* Animation d'apparition : « aucune » montre le bloc et ses cartes tout de suite ; « fondu » garde le fondu sans
   glissement ; « zoom » le fait grossir légèrement. Les feuilles des modèles animent la section (opacity + transform)
   et ses cartes (opacity + translate) : on neutralise les deux. */
.js section[data-anim="none"]:not(.hero) { opacity: 1; transform: none; translate: none; scale: none; transition: none; }
.js section[data-anim="none"]:not(.hero) :is(.grid, .gallery-grid, .faq-list, .pricing-grid, .team-grid, .testimonial-grid, .service-list, .service-scroller, .service-table, .vehicle-grid) > *,
.js section[data-anim="none"]:not(.hero) .card { opacity: 1; translate: none; transition-delay: 0s; }
.js section[data-anim="fade"]:not(.hero) { transform: none; translate: none; }
.js section[data-anim="fade"]:not(.hero) :is(.grid, .gallery-grid, .faq-list, .pricing-grid, .team-grid, .testimonial-grid, .service-list, .service-scroller, .service-table, .vehicle-grid) > * { translate: none; }
.js section[data-anim="zoom"]:not(.hero) { transform: none; scale: .94; transition: opacity .6s ease, scale .6s cubic-bezier(.22, 1, .36, 1); }
.js section[data-anim="zoom"]:not(.hero).is-visible { scale: 1; }
.js section[data-anim="zoom"]:not(.hero) :is(.grid, .gallery-grid, .faq-list, .pricing-grid, .team-grid, .testimonial-grid, .service-list, .service-scroller, .service-table, .vehicle-grid) > * { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .js section[data-anim="zoom"]:not(.hero) { scale: none; }
}

/* Couleur des pictogrammes (prestations, « texte et image en alternance ») : même teinte pâle que les pastilles que le
   client colore à la main (`.has-chip`) ; une pastille déjà colorée à la main garde SA couleur. */
:is(#services, .sec-features)[data-icones] :is(.card-icon, .cell-icon, .svc-icon, .feature-chip):not(.has-chip) {
  background: color-mix(in srgb, var(--chip-ton) 16%, transparent);
  color: var(--chip-ton);
}
#services[data-icones] .card-icon:not(.has-chip) { border-color: var(--chip-ton); }
[data-icones="accent"] { --chip-ton: var(--primary); }
/* La couleur secondaire d'un modèle sombre (Garage) est presque celle du fond : on la tire vers la couleur du texte pour que
   le pictogramme reste lisible (vu au rendu). */
[data-icones="secondary"] { --chip-ton: color-mix(in srgb, var(--primary-2) 62%, var(--text)); }
[data-icones="multi"] :is(.card, .svc-item, .service-cell, .feature):nth-child(4n + 1) { --chip-ton: var(--primary); }
[data-icones="multi"] :is(.card, .svc-item, .service-cell, .feature):nth-child(4n + 2) { --chip-ton: color-mix(in srgb, var(--primary-2) 62%, var(--text)); }
[data-icones="multi"] :is(.card, .svc-item, .service-cell, .feature):nth-child(4n + 3) { --chip-ton: #2f9e6f; }
[data-icones="multi"] :is(.card, .svc-item, .service-cell, .feature):nth-child(4n) { --chip-ton: #3b82f6; }


/* Bouton d'appel flottant (site_menu.FAB_MODES, 2026-10-16) : téléphone seulement. En bas à GAUCHE, pour ne pas recouvrir le
   bouton « retour en haut » (à droite) ; au-dessus du bandeau cookies tant qu'il est là. Couleurs posées en ligne par le
   serveur (`--fab-bg`, et `--fab-ink` choisi pour rester lisible sur ce fond). */
.call-fab { display: none; }
@media (max-width: 760px) {
  .call-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; left: 16px; bottom: 16px; z-index: 40;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--fab-bg, var(--primary)); color: var(--fab-ink, #fff);
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .45);
    text-decoration: none; transition: transform .15s ease;
  }
  .call-fab:active { transform: scale(.94); }
  body.has-cookie-banner .call-fab { bottom: 104px; }
}
@media print { .call-fab { display: none; } }

/* --- Tableau comparatif (2026-10-18, sites/_compare.html) : rendu commun des 4 modèles clients, couleurs du modèle.
   Au téléphone, la première colonne reste collée à gauche et seul le tableau défile à l'horizontale. --- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--feature-radius, 10px); background: var(--surface); }
.compare-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.blk table.compare { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .92rem; }
.blk .compare th, .blk .compare td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: center; font-weight: 400; }
.blk .compare tbody th[scope="row"], .blk .compare thead th:first-child { text-align: left; }
.blk .compare thead th { font-weight: 700; color: var(--text-muted); background: var(--bg); }
.blk .compare thead th.hl { color: var(--primary); }
.blk .compare td.hl { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.blk .compare .grp th { text-align: left; font-weight: 700; color: var(--primary); background: var(--bg); }
.blk .cmp-yes { color: var(--primary); font-weight: 700; }
.blk .cmp-no { color: var(--text-muted); }
@media (max-width: 700px) {
  .blk .compare tbody th[scope="row"], .blk .compare thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border);
  }
}
.blk .compare-notes { margin-top: 18px; display: grid; gap: 6px; color: var(--text-muted); font-size: .86rem; }
.blk .compare-notes p { margin: 0; }