/* Limpide, nettoyage de vitres et de textiles à Strasbourg. Ciel lavé, verre, bleu nuit, bleu eau
   et jaune haute visibilité (le manche de la raclette). Bricolage Grotesque (titres, condensée,
   grasse) + Onest (texte). Les formes viennent du métier : la raclette (barre + lame de
   caoutchouc), le carreau de verre et son reflet, le bon d'intervention, le badge d'intervenant,
   la tournée. Chaque section a son mécanisme (voir site.js). Mobile d'abord, points de rupture
   720 / 1000 / 1280. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.ecbeb05e3a92.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest.fd7dbbcb3633.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
    --cuivre: #0e63d6;          /* bleu eau : accent, liens, lame */
    --cuivre-fonce: #0a4aa3;
    --cuivre-clair: #a9d8f2;    /* eau claire */
    --creme: #e9f1f7;           /* ciel lavé : fond du site */
    --sable: #f7fafd;           /* verre : panneaux clairs */
    --nuit: #0d2136;            /* bleu nuit : sections sombres */
    --encre: #0d2136;
    --fluo: #d9f23b;            /* haute visibilité : le manche, les boutons */
    --serif: "Bricolage Grotesque", "Arial Narrow", sans-serif;
    --sans: "Onest", "Helvetica Neue", Arial, sans-serif;
    --rayon: 4px;

    --blanc: #ffffff;
    --gris: color-mix(in srgb, var(--encre) 62%, var(--creme));
    --ligne: color-mix(in srgb, var(--encre) 14%, transparent);
    --ligne-forte: color-mix(in srgb, var(--encre) 34%, transparent);
    --reflet: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 44%, rgba(255, 255, 255, 0.12) 52%, transparent 58%);
    --marge: clamp(18px, 4.5vw, 72px);
    --largeur: 1340px;
    --entete: 72px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --ombre: 0 24px 48px -28px color-mix(in srgb, var(--nuit) 55%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--encre); background: var(--creme); overflow-x: clip; }
body.menu-ouvert { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--fluo); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--nuit); color: var(--fluo); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- typographie ---------- */
.titre-page, .titre-section, .titre-bloc, .tb-titre { font-family: var(--serif); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 87; line-height: 0.96; letter-spacing: -0.02em; text-wrap: balance; }
.titre-page { font-size: clamp(42px, 7vw, 104px); }
.titre-section { font-size: clamp(34px, 4.8vw, 68px); }
.titre-bloc { font-size: clamp(22px, 2.4vw, 32px); font-variation-settings: "opsz" 40, "wdth" 92; }
.titre-page em, .titre-section em, .titre-bloc em { font-style: normal; color: var(--cuivre); }
.fond-nuit .titre-section em, .fond-nuit .titre-page em { color: var(--fluo); }
.surtitre { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cuivre-fonce); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 22px; height: 4px; background: var(--cuivre); box-shadow: 0 4px 0 var(--nuit); }
.fond-nuit .surtitre { color: var(--cuivre-clair); }
.fond-nuit .surtitre::before { background: var(--fluo); box-shadow: 0 4px 0 var(--cuivre-clair); }
.texte-grand { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 60ch; }
.texte-doux { color: var(--gris); }
.fond-nuit .texte-doux { color: color-mix(in srgb, var(--creme) 70%, transparent); }
.petit { font-size: 13px; }
.lien-souligne { text-decoration: none; background: linear-gradient(var(--cuivre), var(--cuivre)) no-repeat 0 100% / 100% 2px; transition: background-size 400ms var(--sortie); padding-bottom: 1px; }
.lien-souligne:hover { background-size: 0 2px; }
.sep { display: inline-block; width: 4px; height: 4px; background: currentColor; margin: 0 10px; vertical-align: middle; opacity: 0.5; }
.etiquette { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); color: var(--gris); }
.etiquette-pro { background: var(--nuit); color: var(--fluo); border-color: var(--nuit); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }

/* les titres mot à mot */
.mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.04em 0.2em; margin: -0.08em -0.04em -0.2em; }
.mot > span { display: inline-block; transform: translateY(110%); transition: transform 1000ms var(--sortie); transition-delay: calc(var(--m, 0) * 55ms); }
.mots-visibles .mot > span { transform: none; }

/* apparitions */
[data-apparition] { opacity: 0; transition: opacity 1000ms var(--sortie), transform 1200ms var(--sortie); transition-delay: calc(var(--i, 0) * 90ms); }
[data-apparition="haut"] { transform: translateY(28px); }
[data-apparition="gauche"] { transform: translateX(-32px); }
[data-apparition="droite"] { transform: translateX(32px); }
[data-apparition="echelle"] { transform: scale(0.94); }
[data-apparition].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-apparition] { opacity: 1; transform: none; transition: none; }
    .mot > span { transform: none; transition: none; }
}

/* ---------- boutons : la raclette (barre + lame de caoutchouc) ---------- */
.bouton {
    --fond: transparent; --texte: var(--encre); --bord: var(--encre);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 22px; border: 2px solid var(--bord); border-radius: var(--rayon); background: var(--fond); color: var(--texte);
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
    position: relative; isolation: isolate; overflow: hidden; transition: color 300ms, background 300ms, border-color 300ms, transform 500ms var(--sortie), box-shadow 300ms;
}
.bouton::before { content: ""; position: absolute; inset: 0; background: var(--encre); transform: translateY(101%); transition: transform 500ms var(--sortie); z-index: -1; }
.bouton:hover::before { transform: none; }
.bouton:hover { color: var(--creme); }
.bouton:active { transform: translateY(2px); }
.bouton-plein { --fond: var(--encre); --texte: var(--creme); }
.bouton-plein::before { background: var(--cuivre); }
.bouton-fluo { --fond: var(--fluo); --texte: var(--nuit); --bord: var(--nuit); box-shadow: inset 0 -4px 0 var(--nuit); padding-bottom: 16px; }
.bouton-fluo::before { background: var(--nuit); }
.bouton-fluo:hover { color: var(--fluo); }
.bouton-clair { --fond: var(--blanc); --texte: var(--nuit); --bord: var(--blanc); }
.bouton-clair::before { background: var(--fluo); }
.bouton-clair:hover { color: var(--nuit); }
.bouton-petit { padding: 9px 14px; font-size: 11px; }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; }
.bouton[disabled]::before { display: none; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- en-tête : une barre de verre qui se teinte en descendant ---------- */
.entete {
    position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--entete);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
    padding: 0 var(--marge); color: var(--encre);
    transition: background 400ms, color 400ms, transform 500ms var(--sortie), box-shadow 400ms;
}
.entete::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--sable) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ligne); z-index: -1; opacity: 0; transition: opacity 400ms; }
.entete.compacte::before, .entete.menu-ouvert::before { opacity: 1; }
.entete::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 3px; width: calc(var(--defile, 0) * 100%); background: var(--cuivre); transition: width 120ms linear; }
.entete.cachee { transform: translateY(-100%); }
body.accueil .entete:not(.compacte):not(.menu-ouvert) { color: var(--blanc); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 800; font-variation-settings: "opsz" 40, "wdth" 85; font-size: 26px; letter-spacing: -0.02em; }
.marque-logo { height: 34px; width: auto; }
.marque-raclette { display: inline-grid; width: 30px; height: 22px; grid-template-rows: 8px 4px 10px; justify-items: center; }
.marque-raclette::before { content: ""; width: 30px; height: 8px; background: currentColor; border-radius: 2px; }
.marque-raclette::after { content: ""; width: 30px; height: 4px; background: var(--cuivre); grid-row: 2; }
.marque-raclette i { grid-row: 3; width: 6px; height: 10px; background: var(--fluo); border-radius: 0 0 2px 2px; }
.navigation { display: none; justify-content: center; gap: 4px; }
.navigation a { text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: var(--rayon); position: relative; transition: background 300ms; }
.navigation a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.navigation a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; background: var(--cuivre); }
.entete-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.entete-tel { display: none; text-decoration: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bouton-reserver { display: none; }
.burger { width: 44px; height: 44px; border: 2px solid currentColor; border-radius: var(--rayon); background: transparent; display: grid; place-items: center; gap: 5px; cursor: pointer; padding: 0; grid-template-rows: auto auto; align-content: center; }
.burger span { width: 20px; height: 3px; background: currentColor; transition: transform 500ms var(--sortie); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu-mobile { position: fixed; inset: 0; z-index: 90; background: var(--nuit); color: var(--creme); padding: calc(var(--entete) + 24px) var(--marge) 32px; display: grid; grid-template-rows: 1fr auto; overflow: auto; }
.menu-mobile nav { display: grid; gap: 4px; align-content: center; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 85; font-size: clamp(38px, 9vw, 84px); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--creme) 14%, transparent); animation: menu-entree 700ms var(--sortie) both; animation-delay: calc(var(--m, 0) * 60ms); }
.menu-mobile nav a small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--fluo); font-variation-settings: normal; }
.menu-mobile nav a:hover { color: var(--fluo); }
.menu-mobile-reserver { color: var(--fluo); }
.menu-mobile-pied { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: color-mix(in srgb, var(--creme) 70%, transparent); }
.menu-mobile-pied a { text-decoration: none; color: var(--creme); }
@keyframes menu-entree { from { opacity: 0; transform: translateX(-24px); } }

.messages { position: fixed; top: calc(var(--entete) + 10px); left: 50%; transform: translateX(-50%); z-index: 80; display: grid; gap: 6px; width: min(92vw, 560px); }
.message { padding: 12px 18px; border-radius: var(--rayon); background: var(--nuit); color: var(--creme); font-size: 14px; box-shadow: var(--ombre); border-left: 6px solid var(--fluo); }
.message-error { border-left-color: #e0562f; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 130px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.fond-nuit { background: var(--nuit); color: var(--creme); }
.fond-sable { background: var(--sable); }
.entete-section { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
.entete-section-ligne { align-items: end; }
.tete-page { padding: calc(var(--entete) + clamp(48px, 8vw, 110px)) var(--marge) clamp(36px, 5vw, 64px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 24px; align-items: end; }

/* ---------- le carreau : un cadre de verre avec son reflet ---------- */
.carreau-verre, .bon, .badge-carte, .trace, .contrat, .prix-carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); position: relative; }
.reflet::after { content: ""; position: absolute; inset: 0; background: var(--reflet); pointer-events: none; border-radius: inherit; }

/* ---------- accueil : la vitre (le hero qu'on nettoie à la raclette) ---------- */
.vitre { position: relative; min-height: min(100svh, 1040px); display: grid; align-items: end; overflow: hidden; background: var(--nuit); color: var(--blanc); cursor: none; touch-action: pan-y; }
.vitre-fond { position: absolute; inset: 0; }
.vitre-fond img { width: 100%; height: 100%; object-fit: cover; }
.vitre-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 33, 54, 0.25), rgba(13, 33, 54, 0.05) 40%, rgba(13, 33, 54, 0.78) 100%); }
.vitre-buee { position: absolute; inset: 0; width: 100%; height: 100%; }
.vitre-texte { position: relative; z-index: 2; padding: calc(var(--entete) + 76px) var(--marge) clamp(32px, 5vw, 64px); max-width: var(--largeur); margin: 0 auto; width: 100%; display: grid; gap: 20px; pointer-events: none; }
.vitre-texte .bouton, .vitre-texte a { pointer-events: auto; }
.vitre-texte .surtitre { color: var(--fluo); }
.vitre-texte .surtitre::before { background: var(--fluo); box-shadow: 0 4px 0 var(--blanc); }
.vitre-titre { font-size: clamp(44px, 8vw, 116px); max-width: 12ch; line-height: 1.06; padding-bottom: 0.1em; text-shadow: 0 2px 30px rgba(13, 33, 54, 0.4); }
.vitre-titre em { color: var(--fluo); }
.vitre-offre { font-size: clamp(16px, 1.5vw, 20px); max-width: 58ch; color: color-mix(in srgb, var(--blanc) 88%, transparent); }
.vitre-offre strong { color: var(--blanc); }
.vitre-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.prochaine { display: grid; gap: 2px; font-size: 13px; }
.prochaine span { display: inline-flex; align-items: center; gap: 8px; opacity: 0.8; }
.prochaine strong { font-size: 15px; }
.temoin { width: 8px; height: 8px; border-radius: 50%; background: var(--fluo); box-shadow: 0 0 0 0 var(--fluo); animation: temoin 2s infinite; }
@keyframes temoin { 70% { box-shadow: 0 0 0 8px transparent; } }
.vitre-indice, .vitre-compteur { position: absolute; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--rayon); background: rgba(13, 33, 54, 0.55); backdrop-filter: blur(6px); pointer-events: none; }
.vitre-indice { left: var(--marge); top: calc(var(--entete) + 18px); opacity: 0; transition: opacity 600ms; }
.vitre.prete .vitre-indice { opacity: 1; }
.vitre.touchee .vitre-indice { opacity: 0; }
.vitre-compteur { right: var(--marge); top: calc(var(--entete) + 18px); font-variant-numeric: tabular-nums; }
.vitre-compteur b { color: var(--fluo); }
/* la raclette qui suit le pointeur : manche fluo, barre, lame bleue */
.raclette { position: absolute; z-index: 4; width: 150px; height: 90px; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; transform-origin: 50% 20px; will-change: transform; }
.raclette-barre { position: absolute; left: 0; top: 10px; width: 150px; height: 14px; background: var(--nuit); border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.raclette-lame { position: absolute; left: 4px; top: 24px; width: 142px; height: 6px; background: var(--cuivre); border-radius: 0 0 3px 3px; }
.raclette-manche { position: absolute; left: 63px; top: 24px; width: 24px; height: 66px; background: var(--fluo); border-radius: 0 0 6px 6px; box-shadow: inset -6px 0 0 rgba(13, 33, 54, 0.18); }
.vitre.pointeur .raclette { opacity: 1; }
@media (hover: none) { .vitre { cursor: auto; } .raclette, .vitre-indice { display: none; } }
@media (prefers-reduced-motion: reduce) { .vitre-buee { display: none; } }

/* ---------- le chiffrage : comptez vos fenêtres, le bon d'intervention se remplit ---------- */
.chiffrage { padding: clamp(64px, 9vw, 130px) var(--marge); }
.chiffrage-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.chiffrage-texte { display: grid; gap: 18px; align-content: start; }
.pourquoi { display: grid; gap: 12px; }
.pas { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.pas b { width: 34px; height: 34px; display: grid; place-items: center; background: var(--nuit); color: var(--fluo); font-family: var(--serif); font-weight: 800; font-size: 16px; border-radius: var(--rayon); }
.pas div { display: grid; gap: 2px; }
.pas strong { font-size: 16px; }
.pas span { font-size: 14px; color: var(--gris); }
.chiffrage-note { font-size: 13px; color: var(--gris); max-width: 44ch; }
.bon { padding: 0; box-shadow: var(--ombre); overflow: hidden; }
.bon-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: var(--nuit); color: var(--creme); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.bon-tete b { color: var(--fluo); font-variant-numeric: tabular-nums; }
.bon-lignes { display: grid; }
.bon-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--ligne); }
.bon-ligne.active { background: color-mix(in srgb, var(--fluo) 18%, var(--blanc)); }
.bon-nom { font-weight: 600; font-size: 15px; }
.bon-unite { font-size: 12px; color: var(--gris); display: block; font-variant-numeric: tabular-nums; }
.bon-montant { font-family: var(--serif); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; color: var(--gris); }
.bon-ligne.active .bon-montant { color: var(--encre); }
.stepper { grid-column: 1 / -1; display: inline-flex; align-items: center; border: 2px solid var(--nuit); border-radius: var(--rayon); overflow: hidden; width: max-content; }
.stepper button { width: 38px; height: 36px; border: 0; background: var(--sable); cursor: pointer; font-size: 20px; font-weight: 700; line-height: 1; transition: background 200ms, color 200ms; }
.stepper button:hover { background: var(--nuit); color: var(--fluo); }
.stepper button:disabled { opacity: 0.35; cursor: default; background: var(--sable); color: inherit; }
.stepper input { width: 58px; height: 36px; border: 0; border-left: 2px solid var(--nuit); border-right: 2px solid var(--nuit); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; background: var(--blanc); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bon-total { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 22px; background: var(--sable); border-top: 2px dashed var(--ligne-forte); }
.bon-total div { display: grid; gap: 2px; font-size: 12px; color: var(--gris); }
.bon-total strong { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums; }
.bon-minimum { grid-column: 1 / -1; font-size: 12px; color: var(--gris); }
.bon-minimum[hidden] { display: none; }
.bon-actions { padding: 18px 22px 22px; display: grid; gap: 12px; }
.bon-actions .prochaine { color: var(--gris); }
.bon-actions .prochaine strong { color: var(--encre); }

/* ---------- les carreaux : une famille de prestations par carreau, la buée part au survol ---------- */
.carreaux { padding: 0 var(--marge) clamp(64px, 9vw, 130px); }
.carreaux-interieur { max-width: var(--largeur); margin: 0 auto; }
.carreaux-grille { display: grid; gap: 14px; }
.carreau { display: grid; grid-template-rows: 1fr auto; text-decoration: none; overflow: hidden; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); min-height: 380px; position: relative; isolation: isolate; transition: transform 600ms var(--sortie), box-shadow 600ms; }
.carreau:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carreau-verre { border: 0; border-radius: 0; overflow: hidden; }
.carreau-verre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1200ms var(--sortie); }
.carreau:hover .carreau-verre img { transform: none; }
.carreau-buee { position: absolute; inset: 0; background: color-mix(in srgb, var(--creme) 55%, transparent); backdrop-filter: blur(14px) saturate(0.8); -webkit-backdrop-filter: blur(14px) saturate(0.8); transition: opacity 900ms var(--sortie); }
.carreau-buee::after { content: ""; position: absolute; inset: 0; background: var(--reflet); opacity: 0.8; }
.carreau:hover .carreau-buee, .carreau.visible.touche .carreau-buee { opacity: 0; }
.carreau-num { position: absolute; left: 16px; top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 8px; background: var(--nuit); color: var(--fluo); border-radius: var(--rayon); }
.carreau-public { position: absolute; right: 16px; top: 14px; }
.carreau-legende { padding: 18px 18px 20px; display: grid; gap: 6px; border-top: 4px solid var(--cuivre); }
.carreau-nom { font-family: var(--serif); font-weight: 800; font-size: 26px; line-height: 1; font-variation-settings: "opsz" 60, "wdth" 88; }
.carreau-texte { font-size: 13px; color: var(--gris); }
.carreau-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--gris); padding-top: 8px; }
.carreau-bas strong { font-family: var(--serif); font-size: 20px; color: var(--encre); font-weight: 700; }

/* ---------- le protocole : cinq gestes, et le tissu qui sèche avec la page ---------- */
.protocole-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.protocole-tete { display: grid; gap: 16px; }
.gestes { display: grid; gap: 18px; counter-reset: geste; }
.geste { display: grid; gap: 8px; padding: 18px 0 18px 54px; border-top: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); position: relative; counter-increment: geste; transition: opacity 600ms; }
.geste::before { content: counter(geste, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--serif); font-weight: 800; font-size: 28px; line-height: 1; color: color-mix(in srgb, var(--creme) 30%, transparent); transition: color 500ms; }
.geste.passe::before { color: var(--fluo); }
.geste-temp { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cuivre-clair); }
.geste strong { font-size: 19px; }
.geste p { font-size: 14px; color: color-mix(in srgb, var(--creme) 72%, transparent); max-width: 40ch; }
.sechage { display: grid; gap: 10px; }
.sechage-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cuivre-clair); }
.sechage-tete b { font-family: var(--serif); font-size: 26px; color: var(--fluo); font-variant-numeric: tabular-nums; }
.sechage-tissu { height: 34px; border-radius: var(--rayon); background: repeating-linear-gradient(90deg, #163a5c 0 6px, #1b4670 6px 12px); position: relative; overflow: hidden; }
.sechage-tissu::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #d9e6ef 0 6px, #e9f1f7 6px 12px); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); transition: clip-path 300ms linear; }
.sechage-tissu::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 3px; background: var(--fluo); transform: translateX(-50%); transition: left 300ms linear; }
.sechage-legende { display: flex; justify-content: space-between; font-size: 12px; color: color-mix(in srgb, var(--creme) 60%, transparent); }

/* ---------- les badges : l'équipe sur un rail, chaque badge se balance ---------- */
.badges { padding: clamp(64px, 9vw, 130px) var(--marge); }
.badges-interieur { max-width: var(--largeur); margin: 0 auto; }
.badges-rail { border-top: 8px solid var(--nuit); border-radius: 3px; display: grid; gap: 28px 18px; padding-top: 0; }
.badge { display: block; text-decoration: none; padding-top: 22px; position: relative; transform-origin: 50% 0; }
.badge::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 24px; background: var(--nuit); transform: translateX(-50%); }
.badge-clip { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 46px; height: 16px; background: var(--nuit); border-radius: 2px 2px 0 0; z-index: 2; }
.badge-clip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 22px; height: 5px; background: var(--creme); border-radius: 3px; transform: translateX(-50%); }
.badge-carte { display: grid; gap: 12px; padding: 26px 18px 18px; overflow: hidden; transition: box-shadow 500ms; }
.badge:hover .badge-carte { box-shadow: var(--ombre); }
.badge-carte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--c, var(--cuivre)); }
.badge-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--sable); position: relative; }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 1200ms var(--sortie); }
.badge:hover .badge-photo img { transform: scale(1.04); }
.badge-photo::after { content: ""; position: absolute; inset: 0; background: var(--reflet); opacity: 0.6; }
.badge-nom { font-family: var(--serif); font-weight: 800; font-size: 28px; line-height: 1; font-variation-settings: "opsz" 60, "wdth" 88; }
.badge-titre { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, var(--cuivre)); }
.badge-domaines { font-size: 13px; color: var(--gris); }
.badge-bas { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--ligne-forte); }
.jours { display: flex; gap: 3px; }
.jours i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; border: 1px solid var(--ligne); border-radius: 3px; color: var(--gris); }
.jours i.present { background: var(--nuit); color: var(--fluo); border-color: var(--nuit); }
.jours i.aujourd-hui { outline: 2px solid var(--cuivre); outline-offset: 1px; }
.prochain { font-size: 12px; color: var(--gris); display: grid; gap: 1px; }
.prochain strong { color: var(--encre); font-size: 13px; }
.badge.visible .badge-carte, .badge.visible .badge-clip { animation: balance 2200ms var(--sortie) 1; }
.badge:hover .badge-carte, .badge:hover .badge-clip { animation: balance 1800ms var(--sortie) infinite; }
.badge-carte, .badge-clip { transform-origin: 50% -22px; }
@keyframes balance { 0% { transform: rotate(0); } 20% { transform: rotate(3deg); } 50% { transform: rotate(-2.2deg); } 75% { transform: rotate(1.2deg); } 100% { transform: rotate(0); } }
.badge-clip { transform-origin: 50% 0; }
@keyframes balance-clip { 0%, 100% { transform: translateX(-50%) rotate(0); } }
.badge.visible .badge-clip, .badge:hover .badge-clip { animation: none; }
@media (prefers-reduced-motion: reduce) { .badge .badge-carte { animation: none !important; } }

/* ---------- la zone : l'anneau des communes tourne, le code postal répond ---------- */
.zone-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 32px; align-items: center; }
.anneau { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourner 90s linear infinite; }
.anneau svg text { font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--cuivre-fonce); }
.anneau svg .anneau-trace { fill: none; stroke: var(--ligne-forte); stroke-width: 1; stroke-dasharray: 2 6; }
.anneau svg .anneau-int { fill: none; stroke: var(--cuivre); stroke-width: 6; }
.anneau-centre { position: relative; z-index: 1; width: 62%; display: grid; gap: 10px; text-align: center; justify-items: center; }
.anneau-centre .titre-bloc { font-size: clamp(22px, 3vw, 30px); }
.zone-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; width: 100%; max-width: 280px; }
.zone-form input { width: 100%; padding: 12px 14px; border: 2px solid var(--nuit); border-radius: var(--rayon); font-weight: 700; font-size: 18px; text-align: center; letter-spacing: 0.1em; background: var(--blanc); font-variant-numeric: tabular-nums; }
.zone-reponse { min-height: 44px; font-size: 14px; display: grid; gap: 2px; }
.zone-reponse strong { font-family: var(--serif); font-weight: 800; font-size: 22px; line-height: 1; }
.zone-reponse.oui strong { color: var(--cuivre); }
.zone-reponse.non strong { color: #c24a22; }
.zone-texte { display: grid; gap: 18px; }
.zone-communes { display: flex; flex-wrap: wrap; gap: 6px; }
.zone-communes span { font-size: 12px; padding: 5px 9px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anneau svg { animation: none; } }

/* ---------- professionnels : un contrat, une fréquence ---------- */
.pro-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.pro-texte { display: grid; gap: 18px; align-content: start; }
.pro-liste { display: grid; gap: 10px; }
.pro-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: color-mix(in srgb, var(--creme) 85%, transparent); }
.pro-liste li::before { content: ""; width: 22px; height: 6px; margin-top: 9px; background: var(--fluo); box-shadow: 0 6px 0 var(--cuivre); }
.contrat { color: var(--encre); padding: 22px; display: grid; gap: 18px; box-shadow: var(--ombre); }
.contrat-tete { display: grid; gap: 4px; }
.contrat-tete strong { font-family: var(--serif); font-size: 22px; font-weight: 800; }
.contrat-ligne { display: grid; gap: 8px; }
.contrat-ligne label, .contrat-ligne .libelle { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.frequences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--nuit); border-radius: var(--rayon); overflow: hidden; }
.frequences button { border: 0; background: var(--blanc); padding: 10px 6px; font-size: 12px; font-weight: 700; cursor: pointer; display: grid; gap: 2px; transition: background 200ms, color 200ms; }
.frequences button small { font-weight: 500; color: var(--gris); font-size: 11px; }
.frequences button + button { border-left: 2px solid var(--nuit); }
.frequences button[aria-pressed="true"] { background: var(--nuit); color: var(--fluo); }
.frequences button[aria-pressed="true"] small { color: var(--cuivre-clair); }
.contrat-resultat { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding-top: 14px; border-top: 2px dashed var(--ligne-forte); }
.contrat-resultat strong { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.contrat-resultat span { font-size: 12px; color: var(--gris); }
.contrat-economie { font-size: 12px; color: var(--cuivre-fonce); font-weight: 700; }

/* ---------- les traces : ce qu'ils en disent ---------- */
.traces-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 14px; }
.trace { padding: 24px; display: grid; gap: 14px; align-content: start; }
.trace::before { content: ""; height: 6px; width: 60px; background: var(--fluo); box-shadow: 0 6px 0 var(--nuit); margin-bottom: 8px; }
.trace-texte { font-size: 17px; line-height: 1.45; font-weight: 500; }
.trace-qui { font-size: 13px; color: var(--gris); }
.trace-qui strong { color: var(--encre); }

/* ---------- l'appel : la bande fluo ---------- */
.appel { background: var(--fluo); color: var(--nuit); padding: clamp(48px, 7vw, 96px) var(--marge); border-top: 10px solid var(--nuit); }
.appel-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 24px; align-items: center; }
.appel .titre-section em { color: var(--cuivre-fonce); }
.appel-actions { display: grid; gap: 14px; justify-items: start; }
.appel .prochaine { color: var(--nuit); }
.appel .temoin { background: var(--nuit); box-shadow: 0 0 0 0 var(--nuit); }

/* ---------- prestations : la grille des prix ---------- */
.pourqui { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.pourqui a { text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 14px; border: 2px solid var(--nuit); border-radius: var(--rayon); background: var(--blanc); transition: background 300ms, color 300ms; }
.pourqui a:hover, .pourqui a.actif { background: var(--nuit); color: var(--fluo); }
.famille { display: grid; gap: 20px; padding: clamp(28px, 4vw, 48px) 0; border-top: 8px solid var(--nuit); scroll-margin-top: calc(var(--entete) + 16px); }
.famille-tete { display: grid; gap: 10px; }
.famille-tete .titre-section { font-size: clamp(30px, 4vw, 52px); }
.grille-prix { display: grid; gap: 10px; }
.ligne-prix { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; padding: 18px 20px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); position: relative; overflow: hidden; }
.ligne-prix::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cuivre); }
.ligne-nom { font-family: var(--serif); font-weight: 800; font-size: 24px; line-height: 1; font-variation-settings: "opsz" 60, "wdth" 88; }
.ligne-prix .prix { font-family: var(--serif); font-weight: 800; font-size: 24px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; line-height: 1; }
.ligne-prix .prix small { display: block; font-family: var(--sans); font-weight: 600; font-size: 11px; color: var(--gris); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.ligne-desc { grid-column: 1 / -1; font-size: 14px; color: var(--gris); max-width: 70ch; }
.ligne-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--gris); align-items: center; }
.ligne-meta .bouton { margin-left: auto; }
.ligne-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.prix-note { display: grid; gap: 8px; padding: 18px 20px; background: var(--nuit); color: var(--creme); border-radius: var(--rayon); font-size: 14px; }
.prix-note strong { color: var(--fluo); }

/* ---------- fiche intervenant : le badge en grand, le planning de tournée ---------- */
.intervenant-tete { display: grid; gap: 28px; align-items: start; }
.intervenant-tete .badge { max-width: 320px; }
.intervenant-infos { display: grid; gap: 18px; }
.planning { display: grid; gap: 6px; }
.planning-jour { display: grid; grid-template-columns: 44px 1fr 92px; gap: 12px; align-items: center; font-size: 13px; }
.planning-jour b { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.planning-jour.absent { color: var(--gris); }
.planning-jour.aujourd-hui b { color: var(--cuivre); }
.planning-barre { height: 26px; position: relative; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 14 - 1px), var(--ligne) calc(100% / 14 - 1px) calc(100% / 14)); border-radius: 3px; overflow: hidden; }
.planning-barre i { position: absolute; top: 0; bottom: 0; left: var(--de); width: var(--a); background: var(--c, var(--cuivre)); border-radius: 3px; }
.planning-barre i::after { content: ""; position: absolute; inset: 0; background: var(--reflet); }
.planning-heures { display: grid; grid-template-columns: 44px 1fr 92px; gap: 12px; font-size: 11px; color: var(--gris); }
.planning-heures div { position: relative; height: 16px; }
.planning-heures div span { position: absolute; left: var(--x); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.tarifs-intervenant { display: grid; gap: 18px; }
.tarifs-categorie { padding: 18px 20px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); display: grid; gap: 10px; }
.tarifs-categorie h3 { font-family: var(--serif); font-weight: 800; font-size: 22px; font-variation-settings: "opsz" 60, "wdth" 88; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ligne); font-size: 14px; }
.tarifs-categorie li:last-child { border-bottom: 0; }
.tarifs-categorie .prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.autres-badges { display: grid; gap: 18px; }

/* ---------- l'entreprise : chiffres, matériel, horaires, formulaire ---------- */
.chiffres { display: grid; gap: 14px; }
.chiffre { padding: 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); display: grid; gap: 6px; border-top: 6px solid var(--cuivre); }
.chiffre strong { font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 13px; color: var(--gris); }
.materiel { display: grid; gap: 14px; }
.outil { display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.outil figure { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.outil figure img { width: 100%; height: 100%; object-fit: cover; }
.outil figure::after { content: ""; position: absolute; inset: 0; background: var(--reflet); opacity: 0.6; }
.outil div { padding: 16px 18px 20px; display: grid; gap: 6px; }
.outil strong { font-family: var(--serif); font-weight: 800; font-size: 22px; line-height: 1; font-variation-settings: "opsz" 60, "wdth" 88; }
.outil p { font-size: 14px; color: var(--gris); }
.horaires-liste { display: grid; gap: 0; }
.horaires-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.horaires-liste li.aujourd-hui { font-weight: 700; color: var(--cuivre-fonce); }
.ouvert { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.ouvert .temoin { background: var(--cuivre); box-shadow: 0 0 0 0 var(--cuivre); }
.entreprise-grille { display: grid; gap: 40px; }
.formulaire { display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.champ input, .champ select, .champ textarea { padding: 12px 14px; border: 2px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); width: 100%; transition: border-color 300ms; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--nuit); outline: 0; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ-case { display: flex; gap: 10px; align-items: start; font-size: 13px; }
.champ-case input { margin-top: 3px; accent-color: var(--cuivre); }
.ligne-champs { display: grid; gap: 12px; }
.public-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--nuit); border-radius: var(--rayon); overflow: hidden; width: max-content; max-width: 100%; }
.public-choix button { border: 0; background: var(--blanc); padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 200ms, color 200ms; }
.public-choix button + button { border-left: 2px solid var(--nuit); }
.public-choix button[aria-pressed="true"] { background: var(--nuit); color: var(--fluo); }

/* ---------- le formulaire de l'éditeur (devis, contact) ---------- */
.formulaire-bloc { display: grid; gap: 16px; }
.formulaire-titre { font-family: var(--serif); font-weight: 800; font-size: 22px; font-variation-settings: "opsz" 40, "wdth" 92; }
.formulaire-intro { font-size: 15px; color: var(--gris); max-width: 56ch; }
.formulaire-bloc .formulaire { gap: 14px; }
.formulaire-champ { display: grid; gap: 6px; }
.formulaire-champ > label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.formulaire-champ input:not([type="checkbox"]), .formulaire-champ select, .formulaire-champ textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); transition: border-color 300ms; }
.formulaire-champ input:focus, .formulaire-champ select:focus, .formulaire-champ textarea:focus { border-color: var(--nuit); outline: 0; }
.formulaire-champ textarea { min-height: 140px; resize: vertical; }
.formulaire-champ.en-erreur input, .formulaire-champ.en-erreur textarea { border-color: #b8462a; }
.formulaire-case { display: flex; gap: 10px; align-items: start; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.formulaire-case input { accent-color: var(--cuivre); margin-top: 3px; }
.formulaire-aide { font-size: 12px; color: var(--gris); }
.formulaire-erreur { background: #f6d9d1; color: #8a3b2a; padding: 10px 14px; border-radius: var(--rayon); font-size: 13px; }
.formulaire-merci { padding: 14px 18px; background: var(--fluo); color: var(--nuit); border-radius: var(--rayon); font-weight: 600; border-left: 6px solid var(--nuit); }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire button[type="submit"]:not(.bouton), .formulaire .formulaire-bouton { --fond: var(--fluo); --texte: var(--nuit); --bord: var(--nuit); display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px 16px; border: 2px solid var(--nuit); border-radius: var(--rayon); background: var(--fluo); color: var(--nuit); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 -4px 0 var(--nuit); justify-self: start; transition: background 300ms, color 300ms; }
.formulaire button[type="submit"]:not(.bouton):hover { background: var(--nuit); color: var(--fluo); }

/* ---------- gestion d'une intervention : le bon en deux parties ---------- */
.billet { max-width: 820px; margin: 0 auto; display: grid; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.billet-partie { padding: 28px; display: grid; gap: 14px; position: relative; }
.billet-partie + .billet-partie { border-top: 2px dashed var(--ligne-forte); }
.billet-partie .dent { display: none; }
.pastille { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--rayon); background: var(--sable); border: 1px solid var(--ligne-forte); }
.pastille-ok { background: var(--fluo); border-color: var(--nuit); }
.pastille-attente { background: #fbe6c2; border-color: #c98a2a; }
.pastille-non { background: #f6d9d1; border-color: #b8462a; }
.recap-date { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.recap-date em { font-style: normal; color: var(--cuivre); }
.recap-lignes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ligne); font-size: 14px; }
.recap-lignes .recap-total { font-weight: 700; font-size: 16px; border-bottom: 0; }
.recap-lieu { display: grid; gap: 2px; font-size: 14px; padding: 12px 14px; background: var(--sable); border-radius: var(--rayon); border-left: 6px solid var(--cuivre); }
.recap-lieu b { font-size: 15px; }
.grille-creneaux { display: grid; gap: 18px; }
.jour-creneaux { display: grid; gap: 8px; }
.jour-creneaux h3 { font-family: var(--serif); font-weight: 800; font-size: 20px; }
.heures { display: flex; flex-wrap: wrap; gap: 6px; }
.heure { padding: 9px 12px; border: 2px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); font-size: 13px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 200ms, color 200ms, border-color 200ms; }
.heure:hover { border-color: var(--nuit); }
.heure.choisie, .heure[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--fluo); }

/* ---------- pages légales ---------- */
.legal { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; font-size: 15px; line-height: 1.65; }
.legal h2 { font-family: var(--serif); font-weight: 800; font-size: 26px; margin-top: 18px; }
.legal p + p { margin-top: 0; }
.a-completer { background: var(--fluo); padding: 0 4px; }

/* ---------- pied de page ---------- */
.pied { background: var(--nuit); color: var(--creme); padding: clamp(48px, 7vw, 90px) var(--marge) 24px; border-top: 10px solid var(--fluo); }
.pied-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 36px; }
.pied-colonne { display: grid; gap: 12px; align-content: start; font-size: 14px; line-height: 1.6; }
.pied-colonne a { color: inherit; text-decoration: none; }
.pied-colonne a:hover { color: var(--fluo); }
.pied-nom { font-family: var(--serif); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.pied-nom .marque-raclette::before { background: var(--creme); }
.pied-baseline { color: color-mix(in srgb, var(--creme) 70%, transparent); max-width: 40ch; }
.pied-identite .bouton { justify-self: start; margin-top: 6px; }
.pied-titre { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fluo); }
.pied-zone { color: color-mix(in srgb, var(--creme) 80%, transparent); }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--creme) 10%, transparent); font-variant-numeric: tabular-nums; }
.pied-horaires li.aujourd-hui { color: var(--fluo); }
.pied-bas { max-width: var(--largeur); margin: 40px auto 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--creme) 14%, transparent); display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 12px; color: color-mix(in srgb, var(--creme) 60%, transparent); align-items: center; }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 14px; }
.pied-bas a { color: inherit; text-decoration: none; }
.pied-bas a:hover { color: var(--fluo); }
.pied-credit { margin-left: auto; }

/* ---------- mode édition ---------- */
body.mode-edition .vitre { cursor: auto; }
body.mode-edition .vitre-buee, body.mode-edition .raclette { display: none; }
body.mode-edition [data-apparition] { opacity: 1; transform: none; }
[data-fond-texte="clair"] { color: var(--creme); }
[data-fond-texte="sombre"] { color: var(--encre); }

/* ---------- points de rupture ---------- */
@media (min-width: 720px) {
    .carreaux-grille { grid-template-columns: 1fr 1fr; }
    .badges-rail { grid-template-columns: 1fr 1fr; }
    .traces-interieur { grid-template-columns: repeat(3, 1fr); }
    .chiffres { grid-template-columns: repeat(3, 1fr); }
    .materiel { grid-template-columns: 1fr 1fr; }
    .ligne-champs { grid-template-columns: 1fr 1fr; }
    .gestes { grid-template-columns: 1fr 1fr; }
    .autres-badges { grid-template-columns: repeat(3, 1fr); }
    .appel-interieur { grid-template-columns: 1fr auto; }
    .entete-tel { display: inline; }
}
@media (min-width: 1000px) {
    .navigation { display: flex; }
    .bouton-reserver { display: inline-flex; }
    .burger { display: none; }
    .chiffrage-interieur { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
    .bon { position: sticky; top: calc(var(--entete) + 20px); }
    .carreaux-grille { grid-template-columns: repeat(4, 1fr); }
    .protocole-interieur { grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
    .gestes { grid-template-columns: 1fr; }
    .badges-rail { grid-template-columns: repeat(4, 1fr); }
    .zone-interieur { grid-template-columns: 1fr 1fr; gap: 64px; }
    .pro-interieur { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
    .entete-section-ligne { grid-template-columns: 1fr 1fr; }
    .tete-page-interieur { grid-template-columns: 1.2fr 1fr; }
    .intervenant-tete { grid-template-columns: 320px 1fr; gap: 56px; }
    .tarifs-intervenant { grid-template-columns: 1fr 1fr; }
    .entreprise-grille { grid-template-columns: 1fr 1fr; gap: 64px; }
    .bon-ligne { grid-template-columns: 1fr auto auto; }
    .stepper { grid-column: auto; }
    .materiel { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
    .pied-interieur { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
}
@media (max-width: 719px) {
    .entete-tel { display: none; }
}