/* Informatique Compiegne - feuille de style unique.
   Polices auto-hebergees (assets/fonts/), aucune ressource externe :
   le CSP du .htaccess est en 'self' partout. */

/* ════════════ POLICES ════════════ */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo.woff2") format("woff2");
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ════════════ TOKENS ════════════ */
:root {
  /* Bleu du logo, en trois profondeurs */
  --navy: oklch(0.27 0.085 262);
  --navy-2: oklch(0.33 0.1 262);
  --blue: oklch(0.47 0.16 262);
  --blue-soft: oklch(0.945 0.022 262);
  /* Orange : reserve aux actions (appeler, envoyer) */
  --orange: oklch(0.74 0.165 52);
  --orange-hover: oklch(0.79 0.15 58);
  /* Neutres teintes vers le bleu de marque */
  --bg: oklch(0.985 0.003 262);
  --surface: oklch(1 0 0);
  --ink: oklch(0.23 0.035 262);
  --ink-2: oklch(0.43 0.03 262);
  --line: oklch(0.89 0.012 262);
  --on-dark: oklch(0.97 0.01 262);
  --on-dark-2: oklch(0.84 0.03 262);
  /* Etoiles des avis Google : or, distinct de l'orange des actions */
  --etoile: oklch(0.8 0.16 85);
  --ok: oklch(0.52 0.12 150);
  --err: oklch(0.52 0.18 27);

  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --radius: 12px;
  --radius-s: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1180px;
  --section: clamp(4rem, 9vw, 7.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}

/* ════════════ BASE ════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
h4 { font-size: 1.125rem; font-stretch: 105%; }

.lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.prose { max-width: 68ch; text-wrap: pretty; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-skip);
  background: var(--navy); color: var(--on-dark); padding: 10px 16px; border-radius: var(--radius-s);
}
.skip:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Nom de la marque dans le texte courant : gras, bleu du logo
   (habitude de l'ancien site). Variante claire sur fond sombre. */
.ic { font-weight: 700; color: var(--blue); }
.band-dark .ic, .offer.is-main .ic, .site-footer .ic { color: oklch(0.83 0.09 258); }

/* ════════════ BOUTONS ════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 52px; padding: 0.7em 1.4em;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-call { background: var(--orange); color: var(--navy); }
.btn-call:hover { background: var(--orange-hover); }
.btn-ghost { border-color: currentColor; color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.on-dark .btn-ghost, .btn-ghost.light { color: var(--on-dark); }
.on-dark .btn-ghost:hover, .btn-ghost.light:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-stretch: 108%; font-weight: 700;
  color: var(--blue); text-decoration: none;
}
.link-arrow .icon { transition: transform 0.25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; }

/* ════════════ HEADER ════════════ */
/* Deux bandeaux, repris du site Gambier-Brick : le premier (marque,
   coordonnees, actions) reste toujours visible ; le second (navigation
   centree) se replie au defilement vers le bas et revient vers le haut
   (classe .nav-hidden posee par app.js).
   Fluidite (retour client du 2026-09-30) : la barre est HORS du flux et
   glisse par transform, sans jamais changer la hauteur de la page. L'ancienne
   animation de height relancait la mise en page et le repeint de toute la
   page a chaque image (micro-saccades sur Accueil et Depannage, photos en
   fondu). margin-bottom reserve sa place en haut de page. Pas de
   backdrop-filter : fond a 95 %, flou invisible et couteux. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  margin-bottom: 55px;
}
.header-top {
  position: relative; z-index: 1;
  background: color-mix(in oklch, var(--bg) 97%, transparent);
  border-bottom: 1px solid var(--line);
}
.header-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: color-mix(in oklch, var(--bg) 97%, transparent);
  border-bottom: 1px solid var(--line);
  transition: transform 0.32s var(--ease), opacity 0.22s var(--ease);
}
.site-header.nav-hidden .header-nav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* Navigation au clavier : un lien qui recoit le focus fait revenir la barre. */
.site-header.nav-hidden .header-nav:focus-within { transform: none; opacity: 1; pointer-events: auto; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 78px; }

.brand { display: flex; align-items: center; gap: 0.85rem; color: var(--navy); text-decoration: none; flex: none; }
.brand img { width: 64px; height: auto; }
.brand-text { display: flex; flex-direction: column; gap: 0.2rem; }
.brand-name {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 760;
  font-size: 1.12rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
}
.brand-sub { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

.top-right { display: flex; align-items: center; gap: 1.8rem; }
.top-contacts { display: flex; align-items: center; gap: 1.6rem; }
.top-contact { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.top-contact .icon { width: 1.15rem; height: 1.15rem; color: var(--blue); }
.tc-text { display: flex; flex-direction: column; line-height: 1.2; }
.tc-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.tc-value { font-size: 0.98rem; font-weight: 600; color: var(--ink); transition: color 0.2s var(--ease); }
.top-contact:hover .tc-value { color: var(--blue); }

.top-cta { display: flex; align-items: center; gap: 0.6rem; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 42px; padding: 0 1.05rem;
  border-radius: var(--radius-s); text-decoration: none; white-space: nowrap;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tb-btn:hover { transform: translateY(-1px); }
.tb-btn .icon { width: 1.05em; height: 1.05em; }
.tb-btn-outline { color: var(--navy); border: 1px solid color-mix(in oklch, var(--navy) 40%, transparent); background: var(--surface); }
.tb-btn-outline:hover { border-color: var(--navy); }
.tb-btn-solid { color: var(--navy); background: var(--orange); }
.tb-btn-solid:hover { background: var(--orange-hover); }

.nav-inner { display: flex; align-items: center; justify-content: center; height: 54px; }
.site-nav ul { display: flex; list-style: none; gap: 2.2rem; }
.site-nav a {
  position: relative; display: block; padding: 0.9rem 0;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem;
  transition: color 0.2s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.site-nav a:hover { color: var(--blue); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--navy); }

.top-call, .menu-toggle {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--radius-s); cursor: pointer;
}
.top-call { background: var(--orange); color: var(--navy); }
.menu-toggle { border: 1px solid color-mix(in oklch, var(--navy) 30%, transparent); background: var(--surface); color: var(--navy); }
.top-call .icon, .menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

/* ════════════ HERO ACCUEIL ════════════ */
/* Fond --blue-soft fondu sur une photo (comme le bandeau "missions" de
   Gambier-Brick) : opaque sous le texte, la photo apparait a droite derriere
   la fiche contact. La photo est portee par ::before, limite a la 1re ligne
   de la grille : sans cela, "cover" la dimensionne sur toute la hauteur,
   bandeau de chiffres compris, et la grossit pour rien (le navy la masque). */
.hero {
  --hero-voile: var(--blue-soft);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--hero-voile);
  color: var(--ink);
}
.hero::before {
  content: ""; grid-area: 1 / 1; z-index: -1;
  background:
    linear-gradient(100deg,
      var(--hero-voile) 0%,
      color-mix(in oklch, var(--hero-voile) 96%, transparent) 38%,
      color-mix(in oklch, var(--hero-voile) 70%, transparent) 58%,
      color-mix(in oklch, var(--hero-voile) 25%, transparent) 80%,
      color-mix(in oklch, var(--hero-voile) 10%, transparent) 100%),
    var(--navy) url("assets/img/hero-low-poly-1600.webp") center center / cover no-repeat;
}
.hero > .hero-inner { grid-area: 1 / 1; }
/* Une colonne : la fiche passe sous le texte, voile presque opaque partout. */
@media (max-width: 980px) {
  .hero::before {
    background:
      linear-gradient(180deg,
        var(--hero-voile) 0%,
        color-mix(in oklch, var(--hero-voile) 92%, transparent) 55%,
        color-mix(in oklch, var(--hero-voile) 60%, transparent) 100%),
      var(--navy) url("assets/img/hero-low-poly-900.webp") center center / cover no-repeat;
  }
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem) calc(clamp(2.5rem, 5vw, 4rem) + clamp(2.5rem, 6vw, 4.5rem));
}
.hero-kicker {
  display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
}
.hero-kicker::before { content: ""; width: 2.8rem; height: 2px; background: var(--blue); }
.hero h1 { max-width: 21ch; margin-bottom: 0; font-size: clamp(2.1rem, 4.2vw, 3.6rem); color: var(--navy); }
/* "7 jours sur 7" sur sa propre ligne, separe des services. */
.hero h1 em { display: block; margin-top: 0.15em; font-style: normal; color: var(--blue); }
.hero-rule { display: block; width: 2.8rem; height: 2px; margin: 1.6rem 0; background: var(--orange); }
.hero .lead { color: var(--ink-2); max-width: 58ch; margin-bottom: 2rem; }

.hero-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.hero-card-logo { width: 110px; height: auto; margin-bottom: 1rem; }
.hero-card h2 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.hero-card-tel {
  display: inline-flex; align-items: center; gap: 0.4em; margin-bottom: 0.8rem;
  font-family: var(--font-display); font-stretch: 115%; font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.hero-card-tel .icon { color: var(--blue); width: 0.8em; height: 0.8em; }
.hero-card-tel:hover { color: var(--blue); }
.hero-card .hours { margin-bottom: 1rem; }
.hero-card-addr { display: flex; gap: 0.6rem; margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.hero-card-addr .icon { color: var(--blue); margin-top: 0.15em; }

/* Bande de chiffres en pied de hero (reprise du site ELESTA) : pleine largeur,
   voile navy flouté sur la photo, quatre colonnes séparées d'un filet. */
.hero-chiffres {
  border-top: 1px solid color-mix(in oklch, var(--on-dark) 16%, transparent);
  background: var(--navy);
}
.hero-chiffres-grille {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}
.hero-chiffres-grille li {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1rem, 2vw, 1.6rem);
  border-left: 1px solid color-mix(in oklch, var(--on-dark) 12%, transparent);
}
.hero-chiffres-grille li:first-child { border-left: 0; padding-left: 0; }
/* Trait orange qui coiffe chaque chiffre, comme un repère d'atelier. */
.hero-chiffres-grille li::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 2.2rem; height: 3px; background: var(--orange);
}
.hero-chiffres-grille li:not(:first-child)::before { left: clamp(1rem, 2vw, 1.6rem); }
.hero-chiffres strong {
  display: block; margin-bottom: 0.35rem;
  font-family: var(--font-display); font-stretch: 118%; font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.hero-chiffres span { display: block; max-width: 24ch; font-size: 0.95rem; line-height: 1.4; color: var(--on-dark-2); }

/* Entree de la page d'accueil : le contenu est visible par defaut,
   l'animation ne fait que l'accompagner. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: rise 0.9s var(--ease) both; }
  .hero-text > :nth-child(2) { animation-delay: 0.06s; }
  .hero-text > :nth-child(4) { animation-delay: 0.12s; }
  .hero-text > :nth-child(5) { animation-delay: 0.18s; }
  .hero-card { animation: rise 0.9s var(--ease) 0.2s both; }
  .hero-chiffres { animation: rise 0.9s var(--ease) 0.26s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ════════════ HERO PAGES INTERIEURES ════════════ */
.page-hero { background: var(--navy); color: var(--on-dark); overflow: hidden; }
.page-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.page-hero .crumbs { font-size: 0.95rem; color: var(--on-dark-2); margin-bottom: 1.2rem; }
.page-hero .crumbs a { color: var(--on-dark); }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
.page-hero .lead { color: var(--on-dark-2); }
/* Variante claire (pages Depannage et Creation, 2026-09-29) : meme fondu que
   le hero de l'accueil, sur une photo propre a chaque page (--photo grand
   ecran, --photo-s <= 980 px) ; fiche blanche .hero-card a droite. */
.page-hero-photo {
  --photo: url("assets/img/hero-portable-nuit-1600.webp");
  --photo-s: url("assets/img/hero-portable-nuit-900.webp");
  color: var(--ink);
  background:
    linear-gradient(100deg,
      var(--blue-soft) 0%,
      color-mix(in oklch, var(--blue-soft) 96%, transparent) 38%,
      color-mix(in oklch, var(--blue-soft) 70%, transparent) 58%,
      color-mix(in oklch, var(--blue-soft) 25%, transparent) 80%,
      color-mix(in oklch, var(--blue-soft) 10%, transparent) 100%),
    var(--navy) var(--photo) right center / cover no-repeat;
}
/* Page Creation : le portable est une vraie image dans la colonne de droite
   (.ecran-portable) et la fiche est posee sur son ecran blanc, a toutes les
   largeurs. Fond noir (--nuit, celui de la photo) et, par-dessus le portable
   mais sous les textes, le meme voile --blue-soft en fondu long que le hero
   de l'accueil (::after) : pas de coupure nette clair / noir.
   Empilement : image 0, voile 1, textes et fiche 2 (section isolee). */
.page-hero-photo.photo-creation {
  --photo: none;
  --photo-s: none;
  --nuit: color-mix(in oklch, var(--navy) 6%, black);
  position: relative; isolation: isolate;
  background: var(--nuit);
}
.photo-creation::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    var(--blue-soft) 0%,
    var(--blue-soft) 42%,
    color-mix(in oklch, var(--blue-soft) 78%, transparent) 55%,
    color-mix(in oklch, var(--blue-soft) 30%, transparent) 66%,
    color-mix(in oklch, var(--blue-soft) 8%, transparent) 82%,
    transparent 100%);
}
.photo-creation .page-hero-grid > div:first-child { position: relative; z-index: 2; }
/* La boite = l'ecran blanc de la photo (x 4445-7320, y 745-2365 de l'original,
   recadre en 4480 x 3428 depuis x 3675, y 145). L'image deborde de la boite :
   largeur 100 / 0.6417, decalages -17.19 % et -17.50 % de l'image.
   Pas de z-index sur la boite : l'image passe sous le voile, la fiche dessus. */
.ecran-portable { position: relative; aspect-ratio: 2875 / 1620; container-type: inline-size; }
.ecran-portable-img {
  position: absolute; z-index: 0; max-width: none;
  width: 155.84%; left: -26.79%; top: -37.04%;
  clip-path: inset(1px 1px 1px 9%); /* evite un liseré au bord, sous le masque */
  /* Fondus droits sur les 4 bords, hors de l'ecran (x 17-81 %, y 17-65 %). */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 10%, #000 14%, #000 92%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 8%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, transparent 10%, #000 14%, #000 92%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 8%, #000 80%, transparent 100%);
          mask-composite: intersect;
}
/* Fiche centree dans l'ecran ; tailles en cqi (largeur de l'ecran) : le
   contenu grandit avec l'ecran et y tient toujours (~50 cqi pour 56 de haut). */
.ecran-portable .hero-card {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  background: none; border: 0; border-radius: 0;
  padding: 3cqi 4cqi;
}
.ecran-portable .hero-card h2 { font-size: 6cqi; margin-bottom: 0.6cqi; }
.ecran-portable .hero-card p { margin: 0; font-size: 4.3cqi; }
.ecran-portable .checks {
  gap: 1.1cqi; margin: 2.4cqi 0 0; font-size: 4.3cqi; line-height: 1.35; text-align: left;
}
/* Une colonne : le portable passe sous le texte, voile vertical. */
@media (max-width: 980px) {
  .photo-creation::after {
    background: linear-gradient(180deg,
      var(--blue-soft) 0%,
      var(--blue-soft) 50%,
      color-mix(in oklch, var(--blue-soft) 60%, transparent) 64%,
      color-mix(in oklch, var(--blue-soft) 25%, transparent) 82%,
      color-mix(in oklch, var(--blue-soft) 12%, transparent) 100%);
  }
  /* L'image deborde de 21 % de la largeur au-dessus de l'ecran : place reservee. */
  .photo-creation .ecran-portable {
    max-width: 520px; width: 100%; margin: min(21%, 110px) auto 0;
  }
}
/* Trop petit pour tenir dans l'ecran : fiche blanche classique, sans portable. */
@media (max-width: 680px) {
  .page-hero-photo.photo-creation { background: var(--blue-soft); }
  .photo-creation::after { display: none; }
  .ecran-portable { aspect-ratio: auto; container-type: normal; }
  .photo-creation .ecran-portable { margin-top: 0; }
  .ecran-portable-img { display: none; }
  .ecran-portable .hero-card {
    position: static; align-items: stretch; text-align: left; padding: 1.4rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  }
  .ecran-portable .hero-card h2 { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .ecran-portable .hero-card p, .ecran-portable .checks { font-size: 1rem; }
  .ecran-portable .checks { gap: 0.6rem; margin-top: 1rem; }
}
.page-hero-photo .crumbs { color: var(--ink-2); }
.page-hero-photo .crumbs a { color: var(--blue); }
.page-hero-photo h1 { color: var(--navy); }
.page-hero-photo .lead { color: var(--ink-2); }
.page-hero-photo .price-list { margin: 0; }
.page-hero-photo .hero-card p { color: var(--ink-2); }
.page-hero-photo .hero-card .checks { margin: 1rem 0 0; }
@media (max-width: 980px) {
  .page-hero-photo {
    background:
      linear-gradient(180deg,
        var(--blue-soft) 0%,
        color-mix(in oklch, var(--blue-soft) 92%, transparent) 55%,
        color-mix(in oklch, var(--blue-soft) 60%, transparent) 100%),
      var(--navy) var(--photo-s) right center / cover no-repeat;
  }
}
.page-hero-media { position: relative; }
.page-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
/* Image deja cadree (ecrans du site web) : format d origine, rien de coupe. */
.page-hero-media img.ratio-libre { aspect-ratio: auto; }
.page-hero-media .tag {
  position: absolute; left: -14px; bottom: 22px;
  background: var(--orange); color: var(--navy);
  padding: 0.55em 1em; border-radius: var(--radius-s);
  font-family: var(--font-display); font-stretch: 110%; font-weight: 760; font-size: 1.05rem; line-height: 1.2;
}
.page-hero-media .tag small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; }

/* ════════════ SERVICES (ACCUEIL) ════════════ */
/* En-tete empile : surtitre a trait, titre court, texte de lecture dessous. */
.section-intro { max-width: 920px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-intro h2 { margin-bottom: 0.45em; }
.section-intro .lead { margin: 0; max-width: 64ch; color: var(--ink-2); }
.kicker {
  display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
}
.kicker::before { content: ""; width: 2.8rem; height: 2px; background: currentColor; }

.svc-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.svc-main-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.svc-main-body { padding: clamp(1.6rem, 4vw, 3rem); display: flex; flex-direction: column; }
.svc-main-body h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.svc-main-body .link-arrow { margin-top: auto; padding-top: 1.2rem; }

.svc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(1rem, 2.5vw, 1.75rem); }
.svc {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.svc > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.svc-body { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; flex: 1; }
.svc-body p { color: var(--ink-2); }
.svc-body .link-arrow { margin-top: auto; }
.svc-from { font-family: var(--font-display); font-stretch: 110%; font-weight: 700; color: var(--navy); margin-bottom: 1rem; }
.svc-from span { color: var(--ink-2); font-family: var(--font-body); font-weight: 400; }

/* ════════════ AVIS GOOGLE (accueil) ════════════ */
/* Remplis par app.js depuis avis.php. Pas de photo d'auteur (CSP 'self') :
   une initiale a la place. */
.avis { background: var(--blue-soft); }
.avis-resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.avis-resume[hidden], .avis-liste[hidden] { display: none; }
.avis-note { margin: 0; font-family: var(--font-display); font-stretch: 110%; color: var(--navy); }
.avis-note strong { font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.avis-note span { font-size: 1.2rem; font-weight: 600; color: var(--ink-2); }
.avis-total { margin: 0; color: var(--ink-2); }
.etoiles { display: inline-flex; gap: 2px; }
.etoiles .icon { stroke: var(--etoile); stroke-width: 1.5; }
.etoiles .icon.pleine { fill: var(--etoile); }
.avis-resume .etoiles .icon { width: 1.7rem; height: 1.7rem; }

.avis-liste {
  list-style: none; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.avis-carte {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.avis-tete { display: flex; align-items: center; gap: 0.8rem; }
.avis-initiale {
  display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--navy); color: var(--on-dark); font-family: var(--font-display); font-weight: 700;
}
.avis-auteur { margin: 0; display: flex; flex-direction: column; line-height: 1.3; }
.avis-auteur a, .avis-auteur > span:first-child { font-weight: 700; color: var(--navy); }
.avis-auteur a { text-decoration: none; }
.avis-auteur a:hover { text-decoration: underline; }
.avis-quand { font-size: 0.95rem; color: var(--ink-2); }
.avis-texte { margin: 0; color: var(--ink); white-space: pre-line; text-wrap: pretty; }

.avis-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.avis-ecrire[hidden] { display: none; }
.avis-source { margin: 1.2rem 0 0; font-size: 0.95rem; color: var(--ink-2); }

/* ════════════ FICHE TARIFS (motif signature) ════════════ */
/* Liste de prix facon etiquette d'atelier : libelle, pointilles, montant. */
.price-list { list-style: none; margin: 0.4rem 0 0; }
.price-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0.62rem 0; border-bottom: 1px solid var(--line);
}
.price-list li:last-child { border-bottom: 0; }
.price-list .what { font-weight: 600; }
.price-list .what small { display: block; font-weight: 400; font-size: 0.92rem; color: var(--ink-2); }
.price-list .dots { flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in oklch, var(--ink-2) 45%, transparent); transform: translateY(-5px); }
.price-list .amount {
  font-family: var(--font-display); font-stretch: 108%; font-weight: 760; font-size: 1.15rem;
  color: var(--navy); white-space: nowrap; text-align: right;
}
.price-list .amount small { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--ink-2); margin-right: 4px; }

.tariff-board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.tariff-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
}
.tariff-card h3 { display: flex; align-items: center; gap: 0.5em; }
.tariff-note { margin-top: 1.2rem; font-size: 0.98rem; color: var(--ink-2); }

/* ════════════ TARIFS DANS LE TEXTE (page depannage) ════════════ */
/* Le prix est explique dans le paragraphe, puis rappele en pastilles. */
.price-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; }
.price-chips span {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.5rem 0.95rem; border-radius: var(--radius-s);
  background: var(--blue-soft); color: var(--ink); font-size: 0.98rem;
}
.price-chips strong { font-family: var(--font-display); font-stretch: 110%; font-weight: 780; color: var(--navy); }
.band-dark .price-chips span { background: color-mix(in oklch, var(--on-dark) 10%, transparent); color: var(--on-dark-2); }
.band-dark .price-chips strong { color: var(--orange); }

/* ════════════ ETAPES (sequence reelle) ════════════ */
.band-dark { background: var(--navy); color: var(--on-dark); }
.band-dark .lead, .band-dark p { color: var(--on-dark-2); }
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark a:not(.btn) { color: var(--on-dark); }
.band-dark strong { color: var(--on-dark); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1.4rem; border-top: 2px solid color-mix(in oklch, var(--on-dark) 25%, transparent); }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem;
  border-radius: 999px; background: var(--orange); color: var(--navy);
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
}
.steps h3 { font-size: 1.35rem; }
.steps p { margin: 0; }

/* ════════════ OLIVIER / POURQUOI ════════════ */
.about {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.about-media { position: relative; }
.about-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); }
/* Portrait détouré (fond transparent) : cadre bleu clair, format 3:4 sans recadrage (logo du polo en bas) */
.about-media img.portrait { width: 90%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--blue-soft); }
.about-quote {
  margin: -3.5rem 0 0 clamp(1rem, 4vw, 2.5rem); position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; max-width: 30ch; font-size: 1.02rem;
}
.about-quote strong { display: block; font-family: var(--font-display); font-stretch: 110%; color: var(--navy); }
.checks { list-style: none; display: grid; gap: 0.75rem; margin: 1.4rem 0 1.8rem; }
.checks li { display: flex; gap: 0.7em; align-items: flex-start; }
.checks .icon { color: var(--ok); margin-top: 0.2em; }
.band-dark .checks .icon { color: var(--orange); }

/* ════════════ ZONE ════════════ */
.zone { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* Accueil, "Besoin d'un depannage..." (2026-09-29) : fondu --bg -> photo
   comme le hero ; la liste passe sur une carte blanche pour rester lisible. */
.aide-photo {
  background:
    linear-gradient(100deg,
      var(--bg) 0%,
      color-mix(in oklch, var(--bg) 96%, transparent) 38%,
      color-mix(in oklch, var(--bg) 70%, transparent) 58%,
      color-mix(in oklch, var(--bg) 25%, transparent) 80%,
      color-mix(in oklch, var(--bg) 10%, transparent) 100%),
    var(--navy) url("assets/img/hero-tablette-stylet-1600.webp") 60% center / cover no-repeat;
}
.aide-photo .zone { align-items: center; }
.aide-photo .checks {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
@media (max-width: 980px) {
  .aide-photo {
    background:
      linear-gradient(180deg,
        var(--bg) 0%,
        color-mix(in oklch, var(--bg) 92%, transparent) 55%,
        color-mix(in oklch, var(--bg) 60%, transparent) 100%),
      var(--navy) url("assets/img/hero-tablette-stylet-900.webp") 60% center / cover no-repeat;
  }
}
/* Accueil, "Zone d'intervention" (2026-09-29) : meme fondu --bg -> photo que
   .aide-photo ; les pastilles des communes gardent leur fond, lisibles dessus. */
.zone-photo {
  background:
    linear-gradient(100deg,
      var(--bg) 0%,
      color-mix(in oklch, var(--bg) 96%, transparent) 36%,
      color-mix(in oklch, var(--bg) 70%, transparent) 56%,
      color-mix(in oklch, var(--bg) 25%, transparent) 80%,
      color-mix(in oklch, var(--bg) 10%, transparent) 100%),
    var(--navy) url("assets/img/zone-portable-lueur-1600.webp") right center / cover no-repeat;
}
.zone-photo .towns li { box-shadow: 0 1px 2px color-mix(in oklch, var(--navy) 18%, transparent); }
@media (max-width: 980px) {
  .zone-photo {
    background:
      linear-gradient(180deg,
        var(--bg) 0%,
        color-mix(in oklch, var(--bg) 92%, transparent) 40%,
        color-mix(in oklch, var(--bg) 55%, transparent) 100%),
      var(--navy) url("assets/img/zone-portable-lueur-900.webp") right center / cover no-repeat;
  }
}
.towns { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li {
  padding: 0.4em 0.85em; border-radius: 999px; background: var(--blue-soft);
  font-size: 0.98rem; color: var(--navy);
}
.towns li span { color: var(--ink-2); margin-left: 0.3em; font-size: 0.88rem; }
.towns li.home { background: var(--navy); color: var(--on-dark); }
.towns li.home span { color: var(--on-dark-2); }

/* ════════════ BLOC CONTACT (bas de page) ════════════ */
.call-band { background: var(--blue-soft); }
.call-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.call-number {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-display); font-stretch: 118%; font-weight: 800;
  font-size: clamp(1.75rem, 7.4vw, 4rem); letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
  color: var(--navy); text-decoration: none; margin: 0.2em 0 0.3em;
}
.call-number .icon { width: 0.75em; height: 0.75em; color: var(--blue); stroke-width: 2.2; }
.call-number:hover { color: var(--blue); }
.contact-grid .call-number { font-size: clamp(1.75rem, 7.4vw, 2.7rem); }
.info-list { list-style: none; display: grid; gap: 1.1rem; }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list .icon { color: var(--blue); margin-top: 0.2em; width: 1.4em; height: 1.4em; }
.info-list strong { display: block; font-family: var(--font-display); font-stretch: 108%; }
.info-list p { margin: 0; color: var(--ink-2); }

/* ════════════ DETAIL DES PRESTATIONS ════════════ */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.feature + .feature { margin-top: clamp(4rem, 8vw, 6.5rem); }
.feature.flip .feature-media { order: 2; }
.feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.feature-points { list-style: none; display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.feature-points li { padding-left: 1.1rem; position: relative; }
.feature-points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; background: var(--orange);
}
.feature-points strong { display: block; font-family: var(--font-display); font-stretch: 108%; color: var(--navy); }
.feature-points span { color: var(--ink-2); }
.feature-points + .prose { margin-top: 1.2rem; }
.pill-note { display: inline-block; margin-top: 1.4rem; padding: 0.5em 1em; border-radius: var(--radius-s); background: var(--blue-soft); color: var(--navy); font-weight: 600; font-size: 1rem; }

.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem 2.5rem; list-style: none; }
.topics li { display: flex; gap: 0.8em; padding: 1rem 0; border-top: 1px solid color-mix(in oklch, var(--on-dark) 20%, transparent); }
.topics .icon { color: var(--orange); margin-top: 0.2em; }

/* ════════════ INCLUS (SITE WEB) ════════════ */
.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; border-top: 1px solid var(--line); }
.included li { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--line); }
.included .icon { width: 30px; height: 30px; color: var(--blue); margin-bottom: 0.8rem; }
.included strong { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.15rem; color: var(--navy); }
.included span { color: var(--ink-2); font-size: 1rem; }

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); }
.offer.is-main { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.offer.is-main p, .offer.is-main li { color: var(--on-dark-2); }
.offer.is-main h3 { color: var(--on-dark); }
.offer p { color: var(--ink-2); }
.offer ul { list-style: none; display: grid; gap: 0.5rem; margin-top: 1rem; font-size: 1rem; }
.offer li { display: flex; gap: 0.6em; }
.offer li .icon { color: var(--ok); margin-top: 0.2em; }
.offer.is-main li .icon { color: var(--orange); }

/* Realisations (page Creation, 2026-10-06) : capture ordinateur + capture mobile en coin */
.realisations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.realisation {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.realisation-apercu { position: relative; display: block; background: var(--blue-soft); padding: 14px 14px 0; }
.realisation-ordi {
  display: block; width: 82%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: var(--radius-s) var(--radius-s) 0 0; box-shadow: 0 6px 18px color-mix(in oklch, var(--navy) 18%, transparent);
}
.realisation-mobile {
  position: absolute; right: 14px; bottom: 0; width: 24%; aspect-ratio: 1 / 2; object-fit: cover; object-position: top;
  border: 3px solid var(--navy); border-bottom: 0; border-radius: 12px 12px 0 0;
  box-shadow: 0 6px 18px color-mix(in oklch, var(--navy) 25%, transparent);
}
.realisation-texte { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.realisation-texte h3 { font-size: 1.15rem; margin: 0; }
.realisation-texte p { margin: 0; color: var(--ink-2); }
.realisation-texte .link-arrow { margin-top: auto; padding-top: 0.4rem; }
.realisation-vous { background: var(--blue-soft); border-style: dashed; border-color: color-mix(in oklch, var(--blue) 40%, transparent); justify-content: center; }
.realisation-vous .realisation-texte { justify-content: center; flex: 0; padding: clamp(1.4rem, 3vw, 2rem); }
.realisation-vous h3 { font-size: 1.4rem; }
.realisation-vous .link-arrow { margin-top: 0.4rem; }

/* ════════════ NUMERISATION ════════════ */
.media-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; }
.media-strip a { display: block; text-decoration: none; border-radius: var(--radius-s); }
.media-strip a:hover figcaption { text-decoration: underline; }
.media-strip a:hover img { transform: scale(1.03); }
.media-strip figure { margin: 0; overflow: hidden; border-radius: var(--radius-s); }
.media-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); transition: transform 0.5s var(--ease); }
.media-strip { margin-top: 1.6rem; }
.media-strip figcaption { margin-top: 0.5rem; font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1rem; color: var(--navy); }

.digit {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line);
}
.digit:first-of-type { border-top: 0; padding-top: 0; }
.digit-head h2 { margin-bottom: 0.4em; }
.digit-head .prose { color: var(--ink-2); }
.digit > div:last-child > :first-child { margin-top: 0; }
.digit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.digit-grid h3 { font-size: 1.125rem; font-stretch: 105%; line-height: 1.2; margin-bottom: 0.35em; color: var(--navy); }
.digit-grid p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.digit-grid .wide { grid-column: 1 / -1; }
.formats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.formats li { padding: 0.25em 0.7em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.95rem; background: var(--surface); }

/* Gabarit des bobines : trois cercles a l'echelle relative */
.reel-guide { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 2rem); margin-top: 0.6rem; }
.reel-guide figure { margin: 0; text-align: center; font-size: 0.95rem; }
.reel-guide svg { margin: 0 auto 0.5rem; color: var(--navy); }
.reel-guide figcaption strong { display: block; font-family: var(--font-display); font-stretch: 108%; color: var(--navy); }
.reel-guide figcaption span { color: var(--ink-2); }

/* ════════════ FAQ ════════════ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.15rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform 0.3s var(--ease); color: var(--blue); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); max-width: 66ch; }

/* ════════════ CONTACT ════════════ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hours { width: 100%; border-collapse: collapse; font-size: 1rem; margin-top: 0.4rem; }
.hours th, .hours td { padding: 0.45rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.hours th { font-weight: 600; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.notice {
  display: flex; gap: 0.8rem; padding: 1rem 1.2rem; border-radius: var(--radius-s);
  background: oklch(0.96 0.045 85); color: var(--ink); font-size: 1rem;
}
.notice .icon { color: oklch(0.5 0.13 60); margin-top: 0.15em; }

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.6rem); }
.form-grid .wide { grid-column: 1 / -1; }
.h-small { font-size: 1.3rem; margin: 2.2rem 0 0.6rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 1rem; }
.field label .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 0.9rem;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid color-mix(in oklch, var(--ink-2) 45%, transparent); border-radius: var(--radius-s);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 22%, transparent); }
/* Champ refuse : :user-invalid ne s'allume qu'apres une saisie ou un envoi
   (pas de rouge a l'ouverture de la page). .est-invalide, posee par app.js,
   couvre les navigateurs qui ne le connaissent pas. Le libelle passe aussi en
   rouge : sur deux colonnes, la bordure seule ne saute pas aux yeux. */
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid,
.field input.est-invalide, .field textarea.est-invalide, .field select.est-invalide {
  border-color: var(--err);
  background: color-mix(in oklch, var(--err) 5%, var(--surface));
}
.field input:user-invalid:focus, .field textarea:user-invalid:focus,
.field input.est-invalide:focus, .field textarea.est-invalide:focus {
  border-color: var(--err);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--err) 18%, transparent);
}
.field:has(input:user-invalid) > label, .field:has(textarea:user-invalid) > label,
.field:has(.est-invalide) > label { color: var(--err); }
.field .hint { font-size: 0.9rem; color: var(--ink-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: 1; }
.field label.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.98rem; font-weight: 400; }
.consent input { width: 22px; height: 22px; margin-top: 0.15em; accent-color: var(--blue); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.form-foot p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

/* Retours du formulaire : envoi-contact.php redirige vers contact.html#<etat>,
   affiche ici via :target, sans JavaScript. */
.form-status { display: none; margin-bottom: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--radius-s); font-weight: 600; }
.form-status:target { display: flex; gap: 0.7rem; }
.form-status.ok { background: color-mix(in oklch, var(--ok) 14%, var(--surface)); color: oklch(0.36 0.1 150); }
.form-status.ko { background: color-mix(in oklch, var(--err) 12%, var(--surface)); color: oklch(0.42 0.16 27); }
.form-status .icon { margin-top: 0.15em; }

/* ════════════ PAGES LEGALES ════════════ */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2rem; margin-bottom: 1em; }

/* ════════════ FOOTER ════════════ */
.site-footer { background: var(--navy); color: var(--on-dark-2); font-size: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--on-dark); text-decoration: none; margin-bottom: 1rem; }
.footer-brand img { width: 58px; height: auto; }
.footer-brand span { font-family: var(--font-display); font-stretch: 115%; font-weight: 780; font-size: 1.1rem; }
.site-footer .footer-title { font-family: var(--font-display); font-weight: 760; line-height: 1.08; font-size: 1rem; font-stretch: 108%; color: var(--on-dark); margin-bottom: 0.9rem; letter-spacing: 0; }
.site-footer ul { list-style: none; display: grid; gap: 0.5rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.footer-call { font-family: var(--font-display); font-stretch: 112%; font-weight: 780; font-size: 1.35rem; }
.social { display: flex; gap: 10px; margin-top: 1.2rem; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--on-dark) 30%, transparent);
}
.social a:hover { background: color-mix(in oklch, var(--on-dark) 12%, transparent); }
.social .icon { width: 20px; height: 20px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  padding-block: 1.4rem; border-top: 1px solid color-mix(in oklch, var(--on-dark) 16%, transparent);
  font-size: 0.92rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }

/* ════════════ APPARITION AU DEFILEMENT ════════════ */
/* Contenu visible par defaut : la classe .js-reveal n'est posee que par app.js,
   et seulement si l'utilisateur accepte les animations. */
.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
.js-reveal .reveal-group > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js-reveal .reveal-group.is-in > * { opacity: 1; transform: none; }
.js-reveal .reveal-group.is-in > :nth-child(2) { transition-delay: 0.08s; }
.js-reveal .reveal-group.is-in > :nth-child(3) { transition-delay: 0.16s; }
.js-reveal .reveal-group.is-in > :nth-child(4) { transition-delay: 0.24s; }
.js-reveal .reveal-group.is-in > :nth-child(5) { transition-delay: 0.32s; }
.js-reveal .reveal-group.is-in > :nth-child(n+6) { transition-delay: 0.4s; }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 1080px) {
  .top-contacts .top-contact:last-child { display: none; }
  .site-nav ul { gap: 1.5rem; }
}

@media (max-width: 980px) {
  .top-right { display: none; }
  .top-call, .menu-toggle { display: inline-flex; }
  .top-inner { gap: 0.6rem; min-height: 70px; }
  .brand { margin-right: auto; }
  /* Mobile : pas de barre repliable, le menu est un deroulant sous le bandeau. */
  .site-header { margin-bottom: 0; }
  .header-nav, .site-header.nav-hidden .header-nav {
    top: 100%; background: none; border-bottom: 0;
    transform: none; opacity: 1; pointer-events: auto; transition: none;
  }
  .nav-inner { height: 0; }
  .site-nav {
    position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-menu);
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 8px -6px color-mix(in oklch, var(--navy) 18%, transparent);
    padding: 0.5rem var(--gutter) 1rem;
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { padding: 0.95rem 0.25rem; font-size: 1.1rem; }
  .site-nav a::after { bottom: 0.5rem; right: auto; width: 2.5rem; }

  .hero-inner, .page-hero-grid, .svc-main, .tariff-board, .about, .zone, .call-grid, .feature, .contact-grid, .digit { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-media { order: 0; }
  .svc-main-media img { min-height: 0; aspect-ratio: 16 / 9; }
  .page-hero-media { max-width: 560px; }
  .page-hero-media .tag { left: 12px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .offers { grid-template-columns: minmax(0, 1fr); }
  .media-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* Chiffres du hero en 2 x 2 : filet horizontal entre les deux rangées. */
  .hero-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-chiffres-grille li:nth-child(-n + 2) { border-bottom: 1px solid color-mix(in oklch, var(--on-dark) 12%, transparent); }
  .hero-chiffres-grille li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-chiffres-grille li:nth-child(3)::before { left: 0; }
}

@media (max-width: 680px) {
  body { font-size: 1.0625rem; }
  .top-inner { min-height: 64px; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 0.6rem; }
  .brand-text { min-width: 0; }
  .brand img { width: 46px; }
  .brand-name { font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1.2; }
  .brand-sub { display: none; }
  .svc-pair { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .digit-grid { grid-template-columns: minmax(0, 1fr); }
  .media-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-row .btn { flex: 1 1 100%; }

  .about-quote { margin-left: 0.75rem; margin-right: 0.75rem; }
  .price-list .amount { font-size: 1.05rem; }
}

@media (max-width: 350px) {
  .brand-text { display: none; }
}

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

/* ════════════ IMPRESSION ════════════ */
@media print {
  .site-header, .site-footer, .btn, .menu-toggle, .top-call { display: none !important; }
  .hero, .page-hero, .band-dark { background: none; color: #000; }
}