/* ===========================================================================
   Air Frais Provence, habillage A : « Le relevé thermique ».

   Le monde est une planche de relevé posée sur une table lumineuse : des
   feuilles translucides qui se recouvrent, une rampe de onze zones qui donne
   la mesure, une hachure dont la densité dit la charge, et une seule encre
   vive, le magenta, réservée au circuit de fluide, la seule chose que le
   lecteur n'a pas le droit de toucher.

   --primary, --accent, --bg, --texte, --font-titres et --font-corps sont
   posés par le build depuis theme.json. Tout le reste vit ici.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Rampe de onze zones : la seule échelle tonale du site. */
  --z0: #080C10;
  --z1: #101820;
  --z2: #18222C;
  --z3: #22303B;
  --z4: #30404D;
  --z5: #43555F;
  --z6: #5E717C;
  --z7: #83929C;
  --z8: #AFBBC3;
  --z9: #D4DCE1;
  --z10: #EFF3F5;

  /* Le magenta éclairé, pour les fonds profonds. */
  --fluide-clair: #FF4D93;

  --large: 1360px;
  --gouttiere: 40px;
  --mesure: 66ch;
  --rayon: 3px;

  --hachure-claire: repeating-linear-gradient(45deg, rgba(16, 25, 32, .065) 0 1px, transparent 1px 8px);
  --hachure-sombre: repeating-linear-gradient(45deg, rgba(212, 220, 225, .075) 0 1px, transparent 1px 8px);
  --hachure-dense: repeating-linear-gradient(45deg, rgba(16, 25, 32, .08) 0 1px, transparent 1px 5px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");

  --q-fond: rgba(16, 25, 32, .06);
  --feuille: rgba(255, 255, 255, .72);
  --filet: rgba(16, 25, 32, .16);
  --filet-fin: rgba(16, 25, 32, .09);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(130% 62% at 50% -6%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 64%),
    var(--hachure-claire);
  background-attachment: fixed, scroll;
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
}

img, svg { max-width: 100%; }
svg { display: block; }

a { color: var(--primary); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 1px;
}
.bande--sombre :focus-visible,
.bande--tete :focus-visible,
.entete :focus-visible,
.pied :focus-visible { outline-color: var(--fluide-clair); }
/* Le bouton porte deja le magenta : son anneau passe en clair. */
.bouton:focus-visible,
.entete__tel:focus-visible {
  outline: 3px solid var(--z10);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--z0);
  color: var(--z10);
  padding: 12px 20px;
  font-family: var(--font-titres);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.saut-contenu:focus { left: 0; }

/* --- Conteneurs et bandes ------------------------------------------------ */

main { display: block; }

.large {
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.bande {
  position: relative;
  padding-block: 56px;
  border-top: 1px solid var(--filet-fin);
}
.bande:first-child { border-top: 0; }

.bande--claire {
  background-color: rgba(255, 255, 255, .58);
  background-image: var(--hachure-claire);
}
.bande--claire > .large, .bande--grille > .large, .bande--sources > .large {
  border-inline: 1px solid var(--filet-fin);
}

.bande--grille {
  background-color: rgba(255, 255, 255, .34);
  background-image:
    linear-gradient(rgba(239, 243, 245, .76), rgba(239, 243, 245, .82)),
    var(--hachure-dense),
    url(../../assets/theme/feuilles.webp);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: repeat, repeat, no-repeat;
}

.bande--sombre {
  --q-fond: rgba(212, 220, 225, .12);
  --filet: rgba(212, 220, 225, .24);
  --filet-fin: rgba(212, 220, 225, .13);
  --feuille: rgba(255, 255, 255, .06);
  background-color: var(--z1);
  background-image:
    linear-gradient(rgba(16, 24, 32, .76), rgba(16, 24, 32, .76)),
    radial-gradient(86% 120% at 76% -10%, rgba(126, 158, 178, .26), transparent 62%),
    var(--hachure-sombre),
    var(--grain),
    url(../../assets/theme/flux.webp);
  background-size: auto, auto, auto, 180px 180px, cover;
  background-position: center, center, center, center, right center;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  color: var(--z9);
  border-top-color: transparent;
}
.bande--sombre a { color: var(--fluide-clair); }
.bande--sombre h2, .bande--sombre h3 { color: var(--z10); }

/* --- Rampe de zones ------------------------------------------------------ */

.rampe {
  display: flex;
  max-width: var(--large);
  margin: 40px auto 0;
  padding-inline: var(--gouttiere);
  gap: 3px;
}
.rampe span {
  flex: 1;
  height: 10px;
  background: var(--z9);
}
.rampe span:nth-child(1) { background: var(--z0); }
.rampe span:nth-child(2) { background: var(--z1); }
.rampe span:nth-child(3) { background: var(--z2); }
.rampe span:nth-child(4) { background: var(--z3); }
.rampe span:nth-child(5) { background: var(--z4); }
.rampe span:nth-child(6) { background: var(--z5); }
.rampe span:nth-child(7) { background: var(--z6); }
.rampe span:nth-child(8) { background: var(--z7); }
.rampe span:nth-child(9) { background: var(--z8); }
.rampe span:nth-child(10) { background: var(--z9); }
.rampe span:nth-child(11) { background: var(--primary); }

/* --- Entête -------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
}
.entete__barre {
  background: var(--z0);
  color: var(--z9);
  background-image: var(--hachure-sombre);
}
.entete__grille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 28px;
  min-height: 62px;
}

.entete__marque {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  text-decoration: none;
  color: inherit;
  padding-right: 24px;
  border-right: 1px solid rgba(212, 220, 225, .2);
}
.entete__nom {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--z10);
  line-height: 1.1;
}
.entete__ref {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--z7);
  display: flex;
  align-items: center;
  gap: 7px;
}
.entete__ref i { width: 7px; height: 7px; background: var(--primary); display: block; transform: rotate(45deg); }

.entete__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  align-items: stretch;
  flex-wrap: wrap;
}
.entete__nav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 100%;
  color: var(--z8);
  text-decoration: none;
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.entete__nav a:hover { color: var(--z10); background: rgba(212, 220, 225, .07); }
.entete__nav a[aria-current="page"] {
  color: var(--z10);
  border-bottom-color: var(--primary);
  background: rgba(212, 220, 225, .06);
}

.entete__tel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  margin-block: 9px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.entete__tel:hover { background: var(--fluide-clair); color: var(--z0); }

.entete__rampe {
  height: 4px;
  background:
    linear-gradient(90deg,
      var(--z0) 0 9.09%, var(--z1) 9.09% 18.18%, var(--z2) 18.18% 27.27%,
      var(--z3) 27.27% 36.36%, var(--z4) 36.36% 45.45%, var(--z5) 45.45% 54.54%,
      var(--z6) 54.54% 63.63%, var(--z7) 63.63% 72.72%, var(--z8) 72.72% 81.81%,
      var(--z9) 81.81% 90.9%, var(--primary) 90.9% 100%);
}

.icone { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Typographie --------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-titres);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 3.7vw, 3.55rem);
  letter-spacing: -.012em;
}

h2 {
  font-size: 1.44rem;
  line-height: 1.24;
}

.titre-bande {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--z5);
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--filet);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.titre-bande::before {
  content: "";
  width: 34px;
  height: 8px;
  background: var(--primary);
  flex: none;
  transform: translateY(-1px);
}
/* Chaque bande porte son rang, comme une planche dans un dossier. */
.titre-bande::after {
  content: counter(bande, decimal-leading-zero);
  margin-left: auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--primary);
}
.bande--sombre .titre-bande { color: var(--z8); }
.bande--sombre .titre-bande::after,
.bande--tete .titre-bande::after { color: var(--fluide-clair); }
main { counter-reset: bande; }
.titre-bande { counter-increment: bande; }

.prose p { margin: 0 0 1.05em; max-width: var(--mesure); }
.prose > :last-child { margin-bottom: 0; }
.prose a { color: var(--primary); }

.prose--deux {
  column-count: 2;
  column-gap: 54px;
  column-rule: 1px solid var(--filet-fin);
}
.prose--deux p { max-width: none; }

.chapeau p {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: 1.1rem;
  color: var(--z8);
}
.chapeau a { color: var(--fluide-clair); }

/* Les quantités passent en chiffres tabulaires : c'est la mesure du relevé. */
.q {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: .93em;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: var(--q-fond);
  padding: .05em .28em;
  border-radius: 2px;
}

/* --- Fil d'Ariane -------------------------------------------------------- */

.fil ol {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--z7);
}
.fil li + li::before { content: "/"; margin-right: 8px; color: var(--primary); }
.fil a { color: var(--z8); text-decoration: none; }
.fil a:hover { color: var(--z10); text-decoration: underline; }

/* --- Tête de page -------------------------------------------------------- */

.bande--tete {
  --q-fond: rgba(212, 220, 225, .12);
  --filet: rgba(212, 220, 225, .24);
  --filet-fin: rgba(212, 220, 225, .13);
  padding-block: 0 40px;
  background-color: var(--z1);
  background-image:
    linear-gradient(94deg, rgba(14, 21, 28, .97) 0 40%, rgba(14, 21, 28, .74) 66%, rgba(14, 21, 28, .58) 100%),
    radial-gradient(70% 110% at 74% 4%, rgba(132, 168, 190, .26), transparent 60%),
    var(--hachure-sombre),
    var(--grain),
    url(../../assets/theme/tete.webp);
  background-size: auto, auto, auto, 180px 180px, cover;
  background-position: center, center, center, center, center;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  color: var(--z9);
  border-top: 0;
}
.bande--tete h1 { color: var(--z10); }

.tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 50%);
  gap: 44px;
  align-items: center;
  padding-block: 54px 42px;
}
.tete--nue { grid-template-columns: minmax(0, 1fr); }
.tete__texte { min-width: 0; }

.plaque {
  position: relative;
  border: 1px solid var(--filet);
  background: rgba(255, 255, 255, .045);
  padding: 18px;
}
.plaque::before, .plaque::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid var(--primary);
}
.plaque::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plaque::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.plaque--tete { background: rgba(8, 12, 16, .3); }

/* Les couleurs des planches : posées par le contexte, jamais dans le SVG. */
.planche {
  width: 100%;
  height: auto;
  --pl-trait: var(--z7);
  --pl-matiere: var(--z5);
  --pl-plein: rgba(16, 24, 32, .55);
  --pl-fluide: var(--fluide-clair);
  --pl-air: var(--z8);
  --pl-selection: rgba(8, 12, 16, .55);
}
.bande--claire .planche, .bande--grille .planche, .plaque--charge .planche {
  --pl-trait: var(--z5);
  --pl-matiere: var(--z7);
  --pl-plein: rgba(255, 255, 255, .8);
  --pl-fluide: var(--primary);
  --pl-air: var(--z5);
  --pl-selection: var(--z3);
}
.planche text {
  font-family: var(--font-titres);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--pl-trait);
}
.planche .pl-legende--fluide { fill: var(--pl-fluide); }
.planche .pl-legende--clair { fill: var(--z8); }
.planche .pl-chiffre text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
  text-anchor: middle;
  fill: var(--pl-fluide);
}
.planche .pl-charge-cell + .pl-chiffre text { text-anchor: middle; }
.planche--charge .pl-legende text { text-anchor: middle; font-size: 13px; }
.planche--pac .pl-etiquette {
  font-size: 22px;
  letter-spacing: .16em;
  fill: var(--pl-fluide);
}

/* Le tracé du fluide se dessine une fois : il répond à « par où passe la
   liaison entre les deux unités ». */
@media (prefers-reduced-motion: no-preference) {
  .plaque--tete .pl-fluide path,
  .plaque--tete .pl-fluide circle {
    stroke-dasharray: 760;
    stroke-dashoffset: 760;
    animation: tracer 1.5s cubic-bezier(.65, 0, .35, 1) .25s forwards;
  }
  @keyframes tracer { to { stroke-dashoffset: 0; } }
}

/* --- Duo : colonne principale et panneau latéral ------------------------- */

.bande--duo { padding-block: 52px; }

.duo {
  --col-panneau: 372px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--col-panneau);
  gap: 52px;
  align-items: start;
}
/* La colonne du panneau reste une marge de planche graduée, même quand le
   panneau collant est plus court que le corps. */
.duo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--gouttiere);
  width: var(--col-panneau);
  border-left: 1px solid var(--filet-fin);
  background-image: repeating-linear-gradient(0deg, var(--filet-fin) 0 1px, transparent 1px 30px);
  z-index: 0;
  pointer-events: none;
}
.duo > * { position: relative; z-index: 1; }
.duo__corps { min-width: 0; display: grid; gap: 44px; }

/* Le titre pend dans la marge, comme la légende d'une planche. */
.bloc, .duo__corps > h2 + .prose { min-width: 0; }
.bloc {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 30px;
}
.bloc > h2 {
  grid-column: 1;
  text-align: right;
  font-size: 1.16rem;
  line-height: 1.28;
  color: var(--z4);
  padding: 8px 22px 22px 0;
  border-top: 2px solid var(--primary);
  border-right: 1px solid var(--filet);
  background-image: repeating-linear-gradient(0deg, var(--filet) 0 1px, transparent 1px 26px);
  background-position: right top;
  background-size: 11px 100%;
  background-repeat: no-repeat;
}
.bloc > .prose { grid-column: 2; padding-top: 6px; }
.bloc > .plaque { grid-column: 1 / -1; margin-top: 28px; }

/* Titre en marge, corps sur deux colonnes : la bande remplit la planche. */
.bloc--deux { grid-template-columns: 236px minmax(0, 1fr); gap: 44px; }
.bloc--deux > h2 {
  font-size: 1.62rem;
  color: var(--texte);
  padding-top: 8px;
}
.bloc--deux > .prose--deux { column-gap: 48px; padding-top: 14px; }

.duo--service .duo__corps, .duo--legal .duo__corps { gap: 40px; }

.duo__corps > h2 {
  font-size: 1.9rem;
  margin-bottom: 18px;
  color: var(--texte);
}
.duo__corps > h2::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  background: var(--primary);
  margin-top: 14px;
}

.panneau {
  border: 1px solid var(--filet);
  background: var(--feuille);
  background-image: var(--hachure-claire);
  padding: 22px;
  position: relative;
}
.panneau--collant { position: sticky; top: 92px; }

.panneau__titre {
  margin: 0 0 14px;
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--z5);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--filet);
}

.panneau__titre--suite { margin-top: 24px; }

.panneau__villes {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.panneau__villes li {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .02em;
  padding: 3px 8px;
  border: 1px solid var(--filet-fin);
  background: rgba(255, 255, 255, .6);
  color: var(--z3);
}

.panneau__sommaire, .panneau__liens {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: som;
}
.panneau__sommaire li, .panneau__liens li {
  counter-increment: som;
  border-top: 1px solid var(--filet-fin);
}
.panneau__sommaire li:first-child, .panneau__liens li:first-child { border-top: 0; }
.panneau__sommaire a, .panneau__liens a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  color: var(--z2);
  text-decoration: underline;
  text-decoration-color: var(--filet);
  text-underline-offset: .18em;
  font-size: .89rem;
  line-height: 1.34;
}
.panneau__sommaire a::before, .panneau__liens a::before {
  content: counter(som, decimal-leading-zero);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  color: var(--primary);
  padding-top: .2em;
}
.panneau__sommaire a:hover, .panneau__liens a:hover { color: var(--primary); text-decoration-color: var(--primary); }
.panneau__liens a[aria-current="page"] { color: var(--primary); font-weight: 600; }

.panneau__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 2px solid var(--filet);
  border-bottom: 2px solid var(--filet);
  margin-bottom: 16px;
  color: var(--texte);
  text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.12rem;
  font-weight: 500;
}
.panneau__tel .icone { width: 1.05em; height: 1.05em; color: var(--primary); }
.panneau__tel:hover { color: var(--primary); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 22px;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--texte); }
.bande--sombre .bouton:hover,
.demande .bouton:hover { background: var(--fluide-clair); color: var(--z0); }
.bouton--plein { width: 100%; }
.bouton .icone { width: 1.1em; height: 1.1em; }
.bouton[disabled] { opacity: .55; cursor: default; }

/* --- Bande « la règle » -------------------------------------------------- */

.bande--regle { padding-block: 60px; }
.regle-grille { display: grid; gap: 40px; }

/* --- Cartes : les quatre demandes ---------------------------------------- */

.cartes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  counter-reset: carte;
}
.cartes li {
  counter-increment: carte;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 18px;
  border: 1px solid var(--filet);
  background: rgba(255, 255, 255, .92);
  background-image: repeating-linear-gradient(45deg, rgba(16, 25, 32, .11) 0 1px, transparent 1px calc(15px - var(--i, 0) * 3px));
}
.cartes li:nth-child(1) { --i: 0; }
.cartes li:nth-child(2) { --i: 1; }
.cartes li:nth-child(3) { --i: 2; }
.cartes li:nth-child(4) { --i: 3; }
.cartes li::before {
  content: counter(carte, decimal-leading-zero);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--primary);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--filet);
}
.carte__texte { display: block; font-size: .95rem; line-height: 1.5; flex: 1; }
.carte__lien {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--filet-fin);
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
}
.carte__lien .icone { width: 1.05em; height: 1.05em; color: var(--primary); }
.carte__lien:hover { color: var(--primary); }

/* --- Bande de conflit : deux hachures croisées -------------------------- */

.bande--conflit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 77, 147, .32) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(255, 77, 147, .32) 0 1px, transparent 1px 16px);
  mask-image: linear-gradient(284deg, rgba(0, 0, 0, .95) 0 26%, rgba(0, 0, 0, .35) 52%, transparent 74%);
}
.bande--conflit > * { position: relative; z-index: 1; }

/* --- Chemin des étapes --------------------------------------------------- */

.chemin ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.chemin li {
  counter-increment: etape;
  position: relative;
  width: min(50%, calc(100% - var(--i, 0) * 8.2%));
  margin-left: calc(var(--i, 0) * 8.2%);
  margin-bottom: 20px;
  padding: 16px 20px 16px 66px;
  border: 1px solid var(--filet);
  background: rgba(255, 255, 255, .055);
  background-image: var(--hachure-sombre);
  font-size: .97rem;
  line-height: 1.5;
}
.chemin li:nth-child(1) { --i: 0; }
.chemin li:nth-child(2) { --i: 1; }
.chemin li:nth-child(3) { --i: 2; }
.chemin li:nth-child(4) { --i: 3; }
.chemin li:nth-child(5) { --i: 4; }
.chemin li:nth-child(6) { --i: 5; }
.chemin li:nth-child(7) { --i: 6; }
.chemin li:nth-child(8) { --i: 7; }
.chemin li:nth-child(9) { --i: 8; }
.chemin li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--z10);
  border-right: 1px solid var(--filet);
  background-image: repeating-linear-gradient(45deg, var(--fluide-clair) 0 1px, transparent 1px calc(11px - var(--i, 0) * 1.1px));
}
.chemin li::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 100%;
  width: 16.4%;
  height: 20px;
  border-left: 2px solid var(--fluide-clair);
  border-bottom: 2px solid var(--fluide-clair);
}
.chemin li:last-child::after { display: none; }

/* --- Deux colonnes de feuilles ------------------------------------------ */

.colonnes-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.bloc--feuille {
  display: block;
  border: 1px solid var(--filet);
  background: var(--feuille);
  background-image: var(--hachure-claire);
  padding: 28px;
}
.bloc--feuille > h2 {
  text-align: left;
  border-top: 0;
  padding-top: 0;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--primary);
  color: var(--texte);
  font-size: 1.32rem;
}

/* --- Sources ------------------------------------------------------------- */

.bande--sources {
  background-color: rgba(255, 255, 255, .42);
  background-image: var(--hachure-dense);
  padding-block: 44px;
}
.sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 40px;
  counter-reset: src;
}
.sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 2px solid var(--filet);
  font-size: .93rem;
  line-height: 1.46;
}
.sources li::before {
  content: counter(src, decimal-leading-zero);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  color: var(--primary);
  padding-top: .25em;
}
.sources a { color: var(--z2); text-decoration-color: var(--primary); text-decoration-thickness: 1px; }
.sources a:hover { color: var(--primary); }

/* --- Questions fréquentes ------------------------------------------------ */

.faq__liste {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 18px;
}
.faq__item {
  border: 1px solid var(--filet);
  background: var(--feuille);
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.faq__item dt {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--texte);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
}
.faq__item dd { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--z3); }

/* Sur le dépannage, la FAQ est la grille de tri : symptôme à gauche,
   cause et suite à droite. */
body[data-page="services/depannage-climatisation"] .faq__liste {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 2px solid var(--filet);
}
body[data-page="services/depannage-climatisation"] .faq__item {
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 0 34px;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: transparent;
  padding: 20px 0;
}
body[data-page="services/depannage-climatisation"] .faq__item dt {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 1.02rem;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
body[data-page="services/depannage-climatisation"] .faq__item dt::before {
  content: "";
  width: 14px;
  height: 8px;
  background: var(--primary);
  margin-top: .42em;
}

/* --- Formulaire ---------------------------------------------------------- */

.bande--demande { padding-block: 60px; }
.demande-grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 44px;
  align-items: start;
}
.demande-grille::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 38%;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(212, 220, 225, .09) 0 2px, transparent 2px 16px);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .9));
}

.demande {
  position: relative;
  border: 1px solid var(--filet);
  background: rgba(8, 12, 16, .42);
  padding: 30px 32px 32px;
}
.demande > h2 {
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--primary);
  font-size: 1.72rem;
  color: var(--z10);
}

.formulaire { display: grid; gap: 15px; }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.champ label {
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--z8);
}
.champ input, .champ textarea {
  width: 100%;
  font-family: var(--font-corps);
  font-size: 1rem;
  color: var(--z10);
  background: rgba(212, 220, 225, .07);
  border: 1px solid rgba(212, 220, 225, .55);
  border-radius: 0;
  padding: 11px 13px;
}
.champ input:focus, .champ textarea:focus {
  outline: 2px solid var(--fluide-clair);
  outline-offset: 0;
  background: rgba(212, 220, 225, .12);
}
.champ textarea { resize: vertical; min-height: 116px; }

.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.champ-case {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--filet-fin);
}
.champ-case input { width: 24px; height: 24px; margin: 0; accent-color: var(--fluide-clair); }
.champ-case label { font-size: .88rem; line-height: 1.45; color: var(--z8); }
.champ-case a { color: var(--fluide-clair); }

/* Choix facultatifs (urgence, demandeur) : titre au style des étiquettes,
   options encadrées comme les champs. */
.champ-choix { min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-choix__titre {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-titres);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--z8);
}
.champ-choix__options { display: flex; flex-wrap: wrap; gap: 8px; }
.champ-choix__option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-family: var(--font-corps);
  font-size: .95rem;
  color: var(--z10);
  background: rgba(212, 220, 225, .07);
  border: 1px solid rgba(212, 220, 225, .55);
  cursor: pointer;
}
.champ-choix__option input { width: 17px; height: 17px; margin: 0; accent-color: var(--fluide-clair); }
.champ-choix__option:has(input:checked) { border-color: var(--fluide-clair); background: rgba(212, 220, 225, .12); }
.champ-choix__option:has(input:focus-visible) { outline: 2px solid var(--fluide-clair); outline-offset: 0; }

.formulaire .bouton { justify-self: start; margin-top: 6px; }

.formulaire__message {
  margin: 0;
  min-height: 1.4em;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .85rem;
}
.formulaire__message--erreur { color: var(--fluide-clair); }
.formulaire__message--ok {
  color: var(--z0);
  background: var(--fluide-clair);
  padding: 4px 12px;
  justify-self: start;
}
.formulaire__noscript { font-size: .9rem; color: var(--z8); }

.demande-panneau {
  border: 1px solid var(--filet);
  background: rgba(8, 12, 16, .34);
  background-image: var(--hachure-sombre);
  padding: 24px;
}
.demande-panneau__image {
  aspect-ratio: 3 / 2;
  margin: -24px -24px 22px;
  border-bottom: 1px solid var(--filet);
  background: var(--z0) url(../../assets/theme/demande.webp) center / cover no-repeat;
}
.demande-panneau .panneau__titre { color: var(--z8); }
.demande-panneau .panneau__villes li {
  background: rgba(212, 220, 225, .07);
  border-color: rgba(212, 220, 225, .2);
  color: var(--z9);
}
.demande-panneau__tel, .demande-panneau__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--filet-fin);
  color: var(--z10);
  text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .95rem;
  word-break: break-word;
}
.demande-panneau__tel { font-size: 1.16rem; border-top: 2px solid var(--filet); }
.demande-panneau__tel .icone, .demande-panneau__mail .icone { color: var(--fluide-clair); width: 1.05em; height: 1.05em; }
.demande-panneau__tel:hover, .demande-panneau__mail:hover { color: var(--fluide-clair); }

/* --- Pied ---------------------------------------------------------------- */

.pied {
  background-color: var(--z0);
  background-image:
    linear-gradient(90deg,
      var(--z1) 0 9.09%, var(--z2) 9.09% 18.18%, var(--z3) 18.18% 27.27%,
      var(--z4) 27.27% 36.36%, var(--z5) 36.36% 45.45%, var(--z6) 45.45% 54.54%,
      var(--z7) 54.54% 63.63%, var(--z8) 63.63% 72.72%, var(--z9) 72.72% 81.81%,
      var(--z10) 81.81% 90.9%, var(--primary) 90.9% 100%),
    var(--hachure-sombre),
    var(--grain);
  background-size: 100% 4px, auto, 180px 180px;
  background-position: top left, center, center;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--z8);
  padding: 50px var(--gouttiere) 40px;
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr;
  gap: 34px;
  max-width: calc(var(--large) + 0px);
  margin-inline: auto;
  font-size: .9rem;
}
.pied__marque {
  margin: 0 0 12px;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--z10);
}
.pied__role {
  margin: 0;
  max-width: 52ch;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--z8);
  padding-left: 16px;
  border-left: 2px solid var(--primary);
}
.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { border-top: 1px solid rgba(212, 220, 225, .13); }
.pied__liste li:first-child { border-top: 0; }
.pied__liste a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  color: var(--z8);
  text-decoration: none;
}
.pied__liste a:hover { color: var(--z10); text-decoration: underline; }
.pied__liste .icone { color: var(--primary); }

/* --- Adaptation ---------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --gouttiere: 28px; }
  .tete { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tete__planche { max-width: 720px; }
  .duo { --col-panneau: 320px; gap: 36px; }
  .bloc { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; }
  .demande-grille { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
  .cartes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .panneau--collant { top: 126px; }
}

@media (max-width: 900px) {
  .duo, .demande-grille, .colonnes-2 { grid-template-columns: minmax(0, 1fr); }
  .duo::after { display: none; }
  .panneau--collant { position: static; }
  .prose--deux { column-count: 1; }
  .faq__liste { grid-template-columns: minmax(0, 1fr); }
  .chemin li { width: 74%; margin-left: calc(var(--i, 0) * 4%); }
  .chemin li::after { width: 5.4%; }
  .pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demande-grille::before { display: none; }
}

@media (max-width: 680px) {
  :root { --gouttiere: 16px; }
  body { font-size: 16px; }
  .bande { padding-block: 38px; }
  .bande--tete { padding-bottom: 28px; }
  .tete { padding-block: 32px 26px; gap: 26px; }
  h1 { font-size: 2rem; }
  .entete__grille { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-block: 10px; }
  .entete__marque { border-right: 0; padding-right: 0; }
  .entete__nav { grid-column: 1 / -1; }
  .entete__nav ul { gap: 2px 0; }
  .entete__nav a { padding: 7px 10px; font-size: .74rem; border-bottom-width: 2px; }
  .entete__tel { margin-block: 0; padding: 9px 13px; font-size: .84rem; }
  .entete { position: static; }
  .cartes ul { grid-template-columns: minmax(0, 1fr); }
  .bloc { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bloc > h2 { text-align: left; }
  .bloc > .prose, .bloc > .plaque { grid-column: 1; }
  .chemin li { width: 100%; margin-left: 0; padding-left: 54px; }
  .chemin li::before { width: 40px; }
  .chemin li::after { left: 19px; width: 0; height: 20px; border-bottom: 0; }
  .champ-duo { grid-template-columns: minmax(0, 1fr); }
  .demande { padding: 22px 18px 24px; }
  .bloc--feuille, .panneau, .demande-panneau, .faq__item { padding: 20px 18px; }
  .plaque { padding: 12px; }
  .pied { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 16px 32px; }
  body[data-page="services/depannage-climatisation"] .faq__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sources li { grid-template-columns: 26px minmax(0, 1fr); }
  .rampe { margin-top: 24px; }
}

@media (max-width: 680px) {
  .planche text { font-size: 22px; letter-spacing: .05em; }
  .planche .pl-long { transform-box: view-box; transform: translate(-80px, 0); }
  .planche--charge .pl-legende text { font-size: 20px; }
  .planche--charge .pl-chiffre text { font-size: 44px; }
  .planche--pac .pl-etiquette { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}