/* Mon petit électricien · démo Vixya
   Le plan de la maison qui s'allume. Bleu #004AAD et orange #F49516 de son logo, rouge #AF2131 de son flyer. */

@font-face { font-family: "Sora"; src: url("polices/sora.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("polices/atkinson.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bleu: #004AAD;
  --bleu-fonce: #00337A;
  --nuit: #001A45;
  --orange: #F49516;
  --orange-post: #EF9A2B;
  --lumiere: #FFC46B;
  --platre: #F3F6FB;
  --pale: #DDE7F7;
  --rouge: #AF2131;
  --encre: #0E1E3A;
  --gris: #4E5E78;
  --titres: "Sora", "Segoe UI", system-ui, sans-serif;
  --texte: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --entete-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--entete-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); font-size: 17px; line-height: 1.55; color: var(--encre); background: var(--nuit); overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cadre { width: min(100% - 32px, 1200px); margin-inline: auto; }

/* ———————————— boutons ———————————— */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--titres); font-weight: 700; font-size: 16px; line-height: 1.15; text-align: center; text-decoration: none;
  transition: transform 0.25s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton:active { transform: scale(0.97); }
@media (hover: hover) { .bouton:hover { transform: translateY(-2px); } }
.bouton:focus-visible { outline: 3px solid var(--lumiere); outline-offset: 3px; }
.bouton-orange { background: var(--orange); color: var(--nuit); box-shadow: 0 12px 26px -12px rgba(244, 149, 22, 0.85); }
@media (hover: hover) { .bouton-orange:hover { box-shadow: 0 16px 32px -12px rgba(255, 196, 107, 0.95); } }
.bouton-ligne { border-color: rgba(255, 255, 255, 0.8); color: #fff; }
.bouton-nuit { background: var(--nuit); color: #fff; }
.bouton-ligne-nuit { border-color: var(--nuit); color: var(--nuit); }
.bouton-rouge { background: var(--rouge); color: #fff; }
.bouton-blanc { background: #fff; color: var(--bleu); border-color: var(--bleu); }
.bouton-bleu { background: var(--bleu); color: #fff; }
.bouton-ligne-bleu { border-color: var(--bleu); color: var(--bleu); }

.surtitre { margin: 0 0 12px; font-family: var(--titres); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
h2 { margin: 0 0 16px; font-family: var(--titres); font-weight: 700; font-size: clamp(27px, 6.6vw, 50px); line-height: 1.12; letter-spacing: -0.022em; }
.chapo { margin: 0; font-size: 18px; max-width: 36em; }

/* ———————————— en-tête ———————————— */
.entete {
  --logo-trait: #fff; --logo-fond: var(--bleu);
  position: sticky; top: 0; z-index: 40; height: var(--entete-h);
  display: flex; align-items: center; gap: 10px; padding: 0 max(16px, env(safe-area-inset-left, 0px));
  background: var(--bleu); color: #fff;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.entete.clair { --logo-trait: var(--bleu); --logo-fond: #fff; background: rgba(255, 255, 255, 0.96); color: var(--nuit); box-shadow: 0 10px 30px -18px rgba(0, 26, 69, 0.5); }
@supports (backdrop-filter: blur(8px)) { .entete.clair { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px) saturate(1.4); } }
.marque { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.marque-logo { width: 42px; height: 42px; flex: none; }
.marque-nom { display: flex; flex-direction: column; font-family: var(--titres); font-weight: 800; font-size: 12.5px; letter-spacing: 0.07em; line-height: 1.12; text-transform: uppercase; white-space: nowrap; }
.apercu { flex: none; font-family: var(--titres); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 8px; opacity: 0.85; cursor: help; }
.nav { display: none; }
.entete-tel {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--orange); color: var(--nuit); font-family: var(--titres); font-weight: 700; font-size: 15px; text-decoration: none;
}
.entete-tel svg { width: 18px; height: 18px; }
.entete-tel .long { display: none; }
@media (min-width: 420px) { .entete-tel .long { display: inline; } .entete-tel .court { display: none; } }
@media (max-width: 389px) { .entete { gap: 8px; } .marque { gap: 6px; } .marque-logo { width: 36px; height: 36px; } .marque-nom { font-size: 11px; letter-spacing: 0.05em; } .apercu { font-size: 10px; padding: 3px 6px; } .entete-tel { padding: 0 12px; } }

/* ———————————— 1. haut de page : le plan bleu ———————————— */
.haut {
  position: relative; overflow: hidden; color: #fff; padding: 6px 16px 44px;
  background-color: var(--bleu);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #0051BC 0%, #004AAD 45%, #003F98 100%);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
}
/* la lumière de la maison qui déborde sur le plan, une fois allumée */
.haut::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: 760px; height: 560px; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 107, 0.26), rgba(255, 196, 107, 0.08) 55%, transparent);
}
.haut-grille { position: relative; }
/* le premier écran tient entre l'en-tête et la barre d'appel : la maison prend la place qui reste,
   la note, ouvert ou fermé et le bouton d'appel restent entiers au-dessus de la barre */
.haut-ecran {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--entete-h) - var(--barre-h, 0px) - 6px);
  min-height: calc(100svh - var(--entete-h) - var(--barre-h, 0px) - 6px);
}
.haut-texte { position: relative; z-index: 1; flex: none; }
.haut-visuel { position: relative; flex: 1 1 0; min-height: 150px; margin: 2px -16px 8px; }
.haut-visuel .maison { position: absolute; inset: 0; width: 100%; height: 100%; }
.haut-suite { position: relative; z-index: 1; flex: none; padding-bottom: 12px; }
@media (max-width: 959px) and (max-height: 720px) { .haut .surtitre { display: none; } }
.haut .surtitre { color: var(--lumiere); margin-bottom: 10px; }
.haut h1 { margin: 0; font-family: var(--titres); font-weight: 700; font-size: clamp(28px, 7.5vw, 66px); line-height: 1.08; letter-spacing: -0.028em; }
.haut h1 em { font-style: normal; color: var(--lumiere); }
.haut-infos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.haut-infos li { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 13px; border-radius: 999px; background: rgba(0, 26, 69, 0.42); border: 1px solid rgba(255, 255, 255, 0.2); }
.haut-infos b { font-family: var(--titres); }
.haut-infos li[hidden] { display: none; }
.etoiles { display: inline-flex; gap: 1px; color: var(--lumiere); }
.etoiles svg { width: 14px; height: 14px; }
.point { width: 9px; height: 9px; border-radius: 50%; background: #9FB2CF; flex: none; }
.ouvert .point { background: #5BE08C; box-shadow: 0 0 0 4px rgba(91, 224, 140, 0.22); }
.haut .actions .bouton { flex: 1 1 100%; }
.haut-intro { margin: 8px 0 0; font-size: 17px; color: rgba(255, 255, 255, 0.9); max-width: 34em; }

/* la maison en coupe */
.maison { width: 100%; height: auto; overflow: visible; }
.plan { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.plan .toit { stroke-width: 6.5; }
.plan .cote { stroke-width: 1.2; stroke: rgba(255, 255, 255, 0.5); }
.meubles { fill: none; stroke: rgba(255, 255, 255, 0.94); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cables { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.3; stroke-dasharray: 3 4; }
.courants { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.courant { filter: drop-shadow(0 0 2.5px rgba(255, 196, 107, 0.95)); }
.piece { fill: rgba(255, 196, 107, 0.15); }
.piece-faible { fill: rgba(255, 196, 107, 0.08); }
.cones path { fill: url(#g-cone); }
.spot { fill: rgba(255, 255, 255, 0.92); }
.spot-allume { fill: #FFF1D2; filter: drop-shadow(0 0 4px #FFC46B); }
.halo { fill: url(#g-halo); }
.halo-ecran { fill: url(#g-ecran); fill-opacity: 0.75; }
.ampoule { fill: #FFF4DC; stroke: none; }
.ecran { fill: #D4E9FF; }
.voyant { fill: var(--orange); }
.voyant-alarme { fill: #FF6B5E; }
.levier-general { fill: var(--orange); }
.recharge { fill: var(--orange); stroke: var(--bleu); stroke-width: 1.6; paint-order: stroke; stroke-linejoin: round; }
.legendes text { font-family: var(--titres); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; fill: rgba(255, 255, 255, 0.62); text-anchor: middle; }
.lanterne { transform-box: view-box; }
.lanterne-1 { transform-origin: 338px 269px; }
.lanterne-2 { transform-origin: 378px 276px; }

/* l'allumage, une seule fois, en CSS (il ne dépend d'aucun script ; sans animation, tout est déjà allumé) */
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes pose { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes allume { 0% { opacity: 0; } 14% { opacity: 0.85; } 24% { opacity: 0.1; } 40% { opacity: 1; } 52% { opacity: 0.45; } 66%, 100% { opacity: 1; } }
@keyframes leve { from { transform: translateY(7px); } to { transform: none; } }
@keyframes balance { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
@keyframes recharge { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes clignote { 0%, 86%, 100% { opacity: 1; } 92% { opacity: 0.15; } }
@keyframes halo-haut { from { opacity: 0; } to { opacity: 1; } }

.js:not(.calme) .maison .trace { stroke-dasharray: 100 110; stroke-dashoffset: 105; animation: trace 0.95s cubic-bezier(.65, 0, .25, 1) var(--d) forwards; }
.js:not(.calme) .maison .courant { stroke-dasharray: 100 110; stroke-dashoffset: 105; animation: trace var(--t) cubic-bezier(.4, 0, .6, 1) var(--d) forwards; }
.js:not(.calme) .maison .meuble { opacity: 0; animation: pose 0.6s ease-out var(--d) forwards; }
.js:not(.calme) .maison .meuble.lanterne { animation: pose 0.6s ease-out var(--d) forwards, balance 3.4s ease-in-out 3.1s infinite alternate; }
.js:not(.calme) .maison .lanterne:not(.meuble) { animation: balance 3.4s ease-in-out 3.1s infinite alternate; }
.js:not(.calme) .maison .lumiere { opacity: 0; animation: allume 0.7s linear var(--d) forwards; }
.js:not(.calme) .maison .recharge { animation: allume 0.7s linear var(--d) forwards, recharge 2.4s ease-in-out 3.2s infinite; }
.js:not(.calme) .maison .voyant-alarme { animation: allume 0.7s linear var(--d) forwards, clignote 3s linear 3.4s infinite; }
.js:not(.calme) .maison .cables, .js:not(.calme) .maison .legendes { opacity: 0; animation: apparait 0.6s ease 1s forwards; }
.js:not(.calme) .maison .levier-general { opacity: 0; transform: translateY(7px); animation: apparait 0.3s ease 1.08s forwards, leve 0.28s cubic-bezier(.3, 1.6, .5, 1) 1.42s forwards; }
.js:not(.calme) .maison .spot { opacity: 0; animation: apparait 0.4s ease 1.15s forwards; }
.js:not(.calme) .haut::before { opacity: 0; animation: halo-haut 1.2s ease 2.2s forwards; }
.haut.hors-ecran .lanterne, .haut.hors-ecran .recharge, .haut.hors-ecran .voyant-alarme { animation-play-state: paused; }

/* ———————————— 2. travaux : le tableau électrique ———————————— */
.travaux {
  position: relative; padding: 76px 0 84px; color: var(--encre);
  background:
    radial-gradient(ellipse 72% 420px at 50% 0%, rgba(255, 196, 107, 0.34), rgba(255, 196, 107, 0) 72%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(0, 74, 173, 0.1), transparent 70%),
    linear-gradient(180deg, #F8FAFD 0%, #E7EDF6 100%);
}
.travaux .surtitre { color: var(--bleu); }
.travaux .chapo { color: var(--gris); }
.tableau {
  margin-top: 34px; background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid #D3DCE8; box-shadow: 0 34px 70px -36px rgba(0, 26, 69, 0.45), 0 0 0 7px rgba(255, 255, 255, 0.65);
}
.tableau-bandeau { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px; padding: 18px; background: linear-gradient(180deg, #FBFCFE, #EDF1F7); border-bottom: 1px solid #D3DCE8; }
.tableau-logo { width: 46px; height: 46px; }
.tableau-nom { margin: 0; font-family: var(--titres); font-weight: 800; font-size: 15px; letter-spacing: 0.07em; line-height: 1.2; text-transform: uppercase; color: var(--bleu); }
.tableau-nom span { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: 0.32em; font-weight: 700; }
.tableau-labels { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tableau-labels li { padding: 6px 12px; border-radius: 7px; font-family: var(--titres); font-size: 14.5px; font-weight: 700; line-height: 1.2; background: var(--bleu); color: #fff; }
.tableau-labels li:nth-child(2) { background: var(--orange); color: var(--nuit); }
.tableau-labels li:nth-child(3) { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px #C2CDDC; }
.circuits { list-style: none; margin: 0; padding: 0; }
.circuit { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; padding: 28px 18px 26px; }
/* le rail entre deux rangées du tableau */
.circuit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: repeating-linear-gradient(90deg, #DCE3EC 0 12px, #C9D2DE 12px 14px); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #BFC9D6; }
.circuit-module { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.disj { width: 44px; height: 84px; overflow: visible; }
.levier { fill: #25324A; transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.voyant-disj { fill: var(--orange); transition: fill 0.3s ease 0.2s; filter: drop-shadow(0 0 3px rgba(244, 149, 22, 0.8)); }
.circuit.eteint .levier { transform: translateY(18px); }
.circuit.eteint .voyant-disj { fill: #CCD4DF; filter: none; }
.circuit-num { font-family: var(--titres); font-weight: 800; font-size: 13px; letter-spacing: 0.12em; color: var(--gris); }
.etiquette {
  display: inline-block; margin: 0 0 10px; padding: 7px 13px 7px 12px; border-radius: 5px;
  font-family: var(--titres); font-size: 19px; font-weight: 700; line-height: 1.28; color: var(--nuit);
  background: #fff; border: 1.5px solid #F3C27E; border-left: 7px solid var(--orange);
  box-shadow: 0 0 0 5px rgba(244, 149, 22, 0.13), 0 8px 16px -12px rgba(0, 26, 69, 0.45);
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.circuit.eteint .etiquette { border-color: #CBD5E3; border-left-color: #B3C0D2; box-shadow: 0 8px 16px -12px rgba(0, 26, 69, 0.3); }
.circuit-corps p { margin: 0; color: #2E3F5C; }
.circuit-urgence .etiquette { color: var(--rouge); border-color: #E3A2AA; border-left-color: var(--rouge); box-shadow: 0 0 0 5px rgba(175, 33, 49, 0.1), 0 8px 16px -12px rgba(0, 26, 69, 0.45); }
.circuit-urgence.eteint .etiquette { border-color: #CBD5E3; border-left-color: #B3C0D2; box-shadow: 0 8px 16px -12px rgba(0, 26, 69, 0.3); }
.circuit-urgence .voyant-disj { fill: var(--rouge); filter: drop-shadow(0 0 3px rgba(175, 33, 49, 0.7)); }
.circuit-action { grid-column: 1 / -1; margin-top: 20px; }
.circuit-action .bouton { width: 100%; }

/* ———————————— 3. chantiers : l'orange à rayons de ses publications ———————————— */
.chantiers { position: relative; overflow: clip; padding: 76px 0 84px; background: var(--orange-post); color: var(--nuit); }
.chantiers .surtitre { color: var(--nuit); }
.chantiers h2 { max-width: 18em; }
.planches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 52px; width: min(100% - 32px, 1200px); margin: 34px auto 0; }
.planche { position: relative; margin: 0; padding-top: 14px; }
/* les rayons bleus de ses publications, derrière chaque planche */
.planche::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; translate: -50% -50%; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 3deg, rgba(0, 74, 173, 0.9) 0deg 0.9deg, transparent 0.9deg 8deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 62%, transparent 92%);
  mask: radial-gradient(closest-side, transparent 38%, #000 62%, transparent 92%);
  opacity: 0.5;
}
.tirages { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; }
.tirage { position: relative; background: #fff; padding: 7px 7px 9px; rotate: var(--r, 0deg); box-shadow: 0 20px 34px -16px rgba(0, 26, 69, 0.6), 0 2px 4px rgba(0, 26, 69, 0.15); }
.tirage img { width: 100%; height: auto; }
.planche-tableau, .planche-visio, .chantiers-action { grid-column: 1 / -1; }
.planche-tableau { order: -1; }
/* l'avant-après du tableau : le moment fort, sur le bleu quadrillé du plan, relié par le courant orange */
.aa {
  position: relative; z-index: 1; display: grid; justify-content: center; align-items: center;
  grid-template-columns: minmax(0, 260px) clamp(40px, 9vw, 120px) minmax(0, 266px);
  grid-template-areas: "mot1 . mot2" "photo1 trait photo2";
  padding: 20px 14px 28px; border-radius: 24px; color: #fff;
  background-color: var(--bleu);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(180deg, #0051BC, #003F98);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 34px 60px -30px rgba(0, 26, 69, 0.75), 0 0 0 6px rgba(255, 255, 255, 0.18);
}
.aa-mot { margin: 0 0 14px; font-family: var(--titres); font-weight: 800; font-size: clamp(30px, 8.6vw, 62px); line-height: 1; letter-spacing: -0.025em; text-align: center; }
.aa-mot-avant { grid-area: mot1; color: rgba(255, 255, 255, 0.78); }
.aa-mot-apres { grid-area: mot2; color: var(--lumiere); text-shadow: 0 0 24px rgba(255, 196, 107, 0.6); }
.aa .tirage { z-index: 1; width: 100%; }
.aa .tirage-avant { grid-area: photo1; max-width: 260px; justify-self: end; --r: -3deg; }
.aa .tirage-apres { grid-area: photo2; max-width: 266px; justify-self: start; --r: 2.5deg; }
.aa-trait { grid-area: trait; position: relative; z-index: 0; height: 5px; margin: 0 -12px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 12px rgba(255, 196, 107, 0.95), 0 0 3px #FFE3A6; transform-origin: left center; }
.aa-trait::after { content: ""; position: absolute; right: 13px; top: 50%; translate: 0 -50%; border-left: 14px solid var(--orange); border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(0 0 5px rgba(255, 196, 107, 0.9)); }
.tirage-grand { width: min(90%, 200px); --r: -2.5deg; }
.planche-chantier .tirage-grand { --r: 2.5deg; }
.planche-petite figcaption { max-width: 100%; padding: 6px 10px; font-size: 15px; }
.planche-visio .tirage { width: min(46%, 220px); }
.tirage-ecran { --r: 4deg; margin: 20px -3% 0 0; z-index: 2; }
.tirage-platine { --r: -4deg; }
.planche figcaption { position: relative; z-index: 1; width: fit-content; max-width: 92%; margin: 22px auto 0; padding: 7px 14px; background: #fff; rotate: -1.2deg; font-family: var(--titres); font-weight: 700; font-size: 16.5px; line-height: 1.3; text-align: center; box-shadow: 0 8px 18px -10px rgba(0, 26, 69, 0.55); }
.chantiers-action { position: relative; z-index: 1; text-align: center; }
.chantiers-action p { max-width: 28em; margin: 0 auto 18px; font-family: var(--titres); font-weight: 700; font-size: 19px; line-height: 1.35; }
.chantiers-action .actions { justify-content: center; }
.chantiers-action .bouton { flex: 1 1 100%; }

/* ———————————— 4. avis : la nuit sur le papier du plan, les mots qui s'allument ————————————
   La note en grand, la phrase d'Elodie en très grand avec ses mots allumés, l'avis de Jean-Marie sous le cône
   d'une suspension dessinée au trait comme le plan du haut, puis les autres avis en cartouches de plan
   dans une bande qui glisse au doigt. */
.avis {
  position: relative; overflow: hidden; padding: 80px 0 88px; color: #fff;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(0, 74, 173, 0.6), transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 100%, rgba(244, 149, 22, 0.16), transparent 65%),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 140px 140px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 140px 140px,
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--nuit);
}
.avis .surtitre { color: var(--lumiere); }
.avis-tete { display: grid; gap: 26px; }
.note-grande { margin: 0; font-family: var(--titres); font-weight: 800; font-size: 104px; line-height: 0.9; letter-spacing: -0.04em; color: var(--lumiere); text-shadow: 0 0 34px rgba(255, 196, 107, 0.5); }
.note-etoiles { display: flex; gap: 4px; margin: 10px 0 0; color: var(--lumiere); }
.note-etoiles svg { width: 26px; height: 26px; }
.note-texte { margin: 8px 0 0; color: rgba(255, 255, 255, 0.82); }
.avis-bloc { margin: 0; }
.avis-bloc p { margin: 0; font-family: var(--titres); }
.avis-bloc footer { margin-top: 14px; font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, 0.66); }
.avis mark { background: none; color: var(--lumiere); text-shadow: 0 0 16px rgba(255, 196, 107, 0.6); transition: color 0.4s ease, text-shadow 0.4s ease; }
.avis mark.eteint { color: inherit; text-shadow: none; }
.avis mark.allume { animation: neon 0.7s linear; }
@keyframes neon { 0% { color: inherit; text-shadow: none; } 18% { color: var(--lumiere); } 28% { color: rgba(255, 255, 255, 0.85); text-shadow: none; } 48%, 100% { color: var(--lumiere); text-shadow: 0 0 16px rgba(255, 196, 107, 0.6); } }

.avis-scene { display: grid; gap: 40px; margin-top: 48px; }
/* la phrase d'Elodie, en très grand */
.avis-geant p { font-weight: 700; font-size: clamp(31px, 8.6vw, 62px); line-height: 1.12; letter-spacing: -0.03em; }
.avis-geant mark { text-shadow: 0 0 26px rgba(255, 196, 107, 0.65); }

/* l'avis de Jean-Marie, sous le cône d'une suspension dessinée au trait */
.avis-lampe { position: relative; margin: 0; padding-top: 118px; }
.lampe { position: absolute; left: 50%; top: -6px; width: 110px; margin-left: -55px; overflow: visible; }
.lampe-fil, .lampe-douille, .lampe-abat, .lampe-bas { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.lampe-abat { fill: rgba(0, 74, 173, 0.55); }
.lampe-bas { stroke: var(--lumiere); }
.lampe-ampoule { fill: var(--lumiere); filter: drop-shadow(0 0 10px rgba(255, 196, 107, 0.95)) drop-shadow(0 0 26px rgba(244, 149, 22, 0.7)); }
.lampe-cone {
  position: absolute; left: 50%; top: 96px; bottom: -14px; width: 120%; max-width: 560px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 196, 107, 0.34), rgba(255, 196, 107, 0.12) 55%, rgba(255, 196, 107, 0) 80%);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
}
.avis-eclaire { position: relative; padding: 26px 22px 24px; text-align: center; border-bottom: 2px solid rgba(255, 196, 107, 0.55); }
.avis-eclaire p { font-weight: 600; font-size: 22px; line-height: 1.42; letter-spacing: -0.012em; color: #FFF6E6; text-wrap: balance; }
.avis-eclaire footer { color: rgba(255, 233, 199, 0.8); }
.lampe-ampoule, .lampe-cone { transition: opacity 0.6s ease, fill 0.3s ease; }
.avis-lampe.eteinte .lampe-cone { opacity: 0; }
.avis-lampe.eteinte .lampe-ampoule { fill: rgba(255, 255, 255, 0.22); filter: none; }

/* la bande des cartouches */
.avis-bande-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; }
.avis-bande-titre { margin: 0; font-family: var(--titres); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.avis-glisser, .avis-defiler { color: var(--lumiere); }
.avis-defiler { display: none; }
.avis-fleches { display: none; gap: 10px; }
.avis-fleche {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.7); background: transparent; color: #fff; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.avis-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.avis-fleche:hover:not(:disabled) { background: var(--lumiere); border-color: var(--lumiere); color: var(--nuit); }
.avis-fleche:disabled { opacity: 0.3; cursor: default; }
.avis-bande {
  list-style: none; display: flex; align-items: flex-start; gap: 14px; margin: 18px 0 0; padding: 4px max(16px, (100% - 1200px) / 2) 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, (100% - 1200px) / 2); scrollbar-width: none;
}
.avis-bande::-webkit-scrollbar { display: none; }
.avis-bande:focus-visible { outline: 2px solid var(--lumiere); outline-offset: -4px; }
.cartouche {
  flex: none; width: min(80vw, 320px); scroll-snap-align: start; border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 51, 122, 0.55); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.8);
}
.cartouche:nth-child(3n+2) { width: min(84vw, 360px); }
.cartouche-haut {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 8px 14px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55); font-family: var(--titres); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}
.cartouche-etoiles { color: var(--lumiere); letter-spacing: 0.08em; font-size: 14px; }
.cartouche .avis-petit { margin: 0; padding: 0; border: 0; }
.cartouche .avis-petit p { margin: 0; padding: 16px 14px 18px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.cartouche .avis-petit footer {
  display: grid; grid-template-columns: auto 1fr; margin: 0; border-top: 1.5px solid rgba(255, 255, 255, 0.55);
  font-family: var(--titres); font-weight: 700; font-size: 15px; color: #fff;
}
.cartouche .avis-petit footer span { padding: 8px 12px; border-right: 1.5px solid rgba(255, 255, 255, 0.55); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; }
.cartouche .avis-petit footer b { padding: 8px 12px; font-weight: 700; }
.avis-actions { margin-top: 26px; }
.avis-actions .bouton { flex: 1 1 100%; }

/* ———————————— 5. devis : le bleu du logo ———————————— */
.devis {
  position: relative; overflow: clip; padding: 80px 0 88px; color: #fff;
  background: linear-gradient(160deg, #0053C2 0%, var(--bleu) 40%, var(--bleu-fonce) 100%);
  --logo-trait: rgba(255, 255, 255, 0.08); --logo-orange: rgba(255, 196, 107, 0.12); --logo-fond: transparent;
}
.devis-fond { position: absolute; width: 620px; height: 620px; right: -260px; top: 30px; pointer-events: none; }
.devis .surtitre { color: var(--lumiere); }
.devis .chapo { color: rgba(255, 255, 255, 0.88); }
.devis-grille { position: relative; display: grid; gap: 34px; }
.devis-tel { display: inline-block; margin-top: 26px; font-family: var(--titres); font-weight: 800; font-size: clamp(34px, 10.4vw, 58px); line-height: 1.1; color: #fff; text-decoration: none; white-space: nowrap; border-bottom: 3px solid var(--orange); padding-bottom: 4px; }
.devis-tel:focus-visible { outline: 3px solid var(--lumiere); outline-offset: 5px; }
.devis-message { align-self: start; background: #fff; color: var(--encre); border-radius: 24px; padding: 20px; box-shadow: 0 34px 70px -28px rgba(0, 10, 40, 0.75); }
.message-tete { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--titres); font-weight: 700; font-size: 16px; line-height: 1.3; }
.message-tete svg { width: 44px; height: 44px; flex: none; --logo-trait: var(--bleu); --logo-orange: var(--orange); --logo-fond: #fff; }
.message-tete small { display: block; font-family: var(--texte); font-weight: 400; font-size: 15px; color: var(--gris); }
.bulle { position: relative; margin: 0 0 20px; padding: 15px 17px; border-radius: 20px 20px 20px 6px; background: #E9F1FD; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.devis-envoi { display: grid; gap: 10px; }
.devis-message .bouton-ligne { border-color: var(--bleu); color: var(--bleu); }
.devis-note { margin: 14px 0 0; font-size: 15px; color: var(--gris); overflow-wrap: anywhere; }

/* ———————————— 6. horaires : le programmateur ———————————— */
.horaires {
  padding: 80px 0 88px; color: var(--encre);
  background:
    radial-gradient(ellipse 60% 50% at 18% 40%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(244, 149, 22, 0.14), transparent 70%),
    radial-gradient(rgba(0, 74, 173, 0.13) 1.3px, transparent 1.8px) 0 0 / 20px 20px,
    linear-gradient(180deg, #E3ECF9, #D2DEF2);
}
.horaires .surtitre { color: var(--bleu); }
.horaires-grille { display: grid; gap: 34px; }
.programmateur { display: grid; justify-items: center; gap: 18px; }
.prog-module {
  position: relative; width: min(100%, 330px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 30px;
  background: linear-gradient(160deg, #FFFFFF, #EEF2F8); box-shadow: 0 28px 54px -28px rgba(0, 26, 69, 0.55), inset 0 0 0 1px #CDD7E5, inset 0 -6px 0 rgba(0, 26, 69, 0.05);
}
.prog-cadran { position: absolute; inset: 5%; width: 90%; height: 90%; }
.prog-cadran .cran { transition: fill 0.35s ease, transform 0.35s cubic-bezier(.3, 1.5, .5, 1); }
.prog-cadran .heure { font-family: var(--titres); font-size: 13px; font-weight: 700; fill: var(--gris); text-anchor: middle; dominant-baseline: middle; }
.prog-centre { position: relative; text-align: center; }
.prog-jour { margin: 0; font-family: var(--titres); font-weight: 800; font-size: 22px; color: var(--bleu); }
.prog-heures { margin: 2px 0 0; font-weight: 700; font-size: 18px; }
.prog-jours { display: flex; gap: 6px; }
.prog-jours button { position: relative; width: clamp(36px, 11vw, 46px); height: 46px; border-radius: 12px; border: 1.5px solid #B4C3D8; background: #fff; color: var(--encre); font-family: var(--titres); font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.prog-jours button[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.prog-jours button.aujourdhui::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--orange); }
.prog-jours button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.prog-legende { margin: 0; max-width: 28em; text-align: center; font-size: 16px; color: var(--gris); }
.cran-on { display: inline-block; width: 9px; height: 15px; border-radius: 2px; background: var(--orange); vertical-align: -2px; margin-right: 4px; }
.prog-legende [data-prog-maintenant] { display: block; margin-top: 4px; font-weight: 700; color: var(--encre); }
.semaine { margin: 0 0 30px; }
.semaine div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid rgba(0, 26, 69, 0.13); }
.semaine dt { font-weight: 700; }
.semaine dd { margin: 0; }
.semaine .aujourdhui { color: var(--bleu); }
.semaine .aujourdhui dt::after { content: " · aujourd'hui"; font-weight: 400; }
.adresse-titre { display: flex; gap: 10px; margin: 0 0 10px; font-family: var(--titres); font-weight: 700; font-size: 20px; line-height: 1.3; }
.adresse-titre svg { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--bleu); }
.adresse p { margin: 0 0 18px; }
.lien { color: var(--bleu); font-weight: 700; overflow-wrap: anywhere; }
.adresse .bouton { flex: 1 1 100%; }

/* ———————————— pied de page ———————————— */
.pied { padding: 64px 0 44px; background: var(--nuit); color: rgba(255, 255, 255, 0.86); --logo-trait: #fff; --logo-fond: var(--nuit); }
.pied-nom { margin: 0 0 34px; font-family: var(--titres); font-weight: 800; font-size: clamp(30px, 12.4vw, 148px); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; color: #fff; }
.pied-nom span { display: block; }
.pied-nom span:last-child { color: var(--orange); }
.pied-grille { display: grid; gap: 24px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pied-marque { display: flex; align-items: center; gap: 14px; }
.pied-marque svg { width: 58px; height: 58px; flex: none; }
.pied-marque p { margin: 0; }
.pied a { color: var(--lumiere); font-weight: 700; }
.pied-mention { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.68); }

/* ———————————— apparitions (posées par le script, jamais par le CSS seul) ———————————— */
.js [data-titre-decoupe]:not(.pret) { visibility: hidden; animation: td-secours 0s linear 3s forwards; }
@keyframes td-secours { to { visibility: visible; } }
[data-titre-decoupe] > div[style*="clip"] { padding-block: 0.14em; margin-block: -0.14em; }
.calme [data-titre-decoupe]:not(.pret) { visibility: visible; animation: none; }

/* ———————————— barre d'appel (procédé), téléphone seulement ———————————— */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-template-columns: 1.4fr 1fr; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--nuit); border-top: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 -10px 26px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .barre-appel a {
    display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 12px; border-radius: 999px;
    border: 2px solid var(--orange); background: var(--orange); color: var(--nuit);
    font-family: var(--titres); font-size: 16px; font-weight: 700; line-height: 1.1; text-decoration: none;
  }
  .barre-appel a:not(:first-child) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
  .barre-appel svg { width: 1.25em; height: 1.25em; flex: none; }
  .haut .actions .bouton-ligne { display: none; }
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
  html:has(.barre-appel) { scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px) + 16px); }
  body:has(:is(input:not([type=checkbox], [type=radio]), textarea, select):focus) .barre-appel { transform: translateY(105%); visibility: hidden; }
}

/* ———————————— tablette ———————————— */
@media (min-width: 640px) {
  .haut .actions .bouton, .avis-actions .bouton, .chantiers-action .bouton, .adresse .bouton { flex: 0 1 auto; }
  .planches { column-gap: 40px; }
  .circuit-action .bouton { width: auto; }
}

/* ———————————— ordinateur ———————————— */
@media (min-width: 960px) {
  :root { --entete-h: 76px; }
  .entete { padding: 0 max(32px, calc((100vw - 1280px) / 2)); gap: 14px; }
  .marque-logo { width: 48px; height: 48px; }
  .marque-nom { font-size: 14px; }
  .nav { display: flex; gap: 26px; margin-left: auto; }
  .nav a { font-weight: 700; font-size: 16px; text-decoration: none; opacity: 0.86; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s ease, opacity 0.2s; }
  .nav a:hover { opacity: 1; background-size: 100% 2px; }
  .entete-tel { margin-left: 10px; min-height: 48px; padding: 0 20px; font-size: 16px; }

  .haut { padding: 20px 32px 80px; }
  .haut-grille { display: grid; max-width: 1280px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: 1fr auto 1fr; grid-template-areas: "texte visuel" "suite visuel" "intro visuel"; column-gap: 56px; min-height: min(calc(100svh - var(--entete-h) - 20px), 800px); }
  .haut-ecran { display: contents; }
  .haut-texte { grid-area: texte; align-self: end; padding-bottom: 26px; }
  .haut-suite { grid-area: suite; align-self: start; padding-bottom: 0; }
  .haut-intro { grid-area: intro; align-self: start; margin-top: 18px; }
  .haut-visuel { grid-area: visuel; position: static; min-height: 0; margin: 0; align-self: center; }
  .haut-visuel .maison { position: static; height: auto; }
  .haut::before { left: 74%; top: 50%; width: 900px; height: 700px; }
  .haut-intro { font-size: 18px; }

  .travaux-tete { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .travaux-tete .surtitre { grid-column: 1 / -1; }
  .travaux-tete h2 { margin: 0; }
  .tableau { margin-top: 48px; }
  .tableau-bandeau { grid-template-columns: auto auto 1fr; padding: 20px 32px; }
  .tableau-labels { grid-column: auto; justify-content: flex-end; }
  .circuit { grid-template-columns: 64px minmax(0, 1fr); gap: 0 34px; align-items: center; padding: 30px 32px 28px; }
  .circuit-corps { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 34px; align-items: center; }
  .circuit-corps .etiquette { justify-self: start; margin: 0; }
  .circuit-action { grid-column: 2 / -1; margin-top: 22px; }
  .etiquette { font-size: 21px; }

  .chantiers h2 { max-width: 20em; }
  .planches { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: start; margin-top: 44px; }
  .planche-spots { grid-column: 1 / span 2; grid-row: 1; align-self: center; }
  .planche-tableau { grid-column: 3 / span 8; grid-row: 1; }
  .aa { padding: 30px 36px 38px; }
  .planche-chantier { grid-column: 11 / span 2; grid-row: 1; align-self: center; }
  .planche-visio { grid-column: 2 / span 5; grid-row: 2; }
  .chantiers-action { grid-column: 8 / span 5; grid-row: 2; align-self: center; text-align: left; }
  .chantiers-action p { margin-left: 0; }
  .chantiers-action .actions { justify-content: flex-start; }
  .planche-petite .tirage-grand { width: 100%; }

  .avis-tete { grid-template-columns: 280px minmax(0, 1fr); align-items: end; column-gap: 60px; }
  .avis-tete h2 { margin: 0; }
  .note-grande { font-size: 140px; }
  .avis-scene { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 64px; margin-top: 72px; }
  .avis-geant p { font-size: 54px; }
  .avis-lampe { padding-top: 150px; }
  .lampe { width: 130px; margin-left: -65px; }
  .lampe-cone { top: 120px; }
  .avis-eclaire { padding: 34px 30px 30px; }
  .avis-eclaire p { font-size: 24px; }
  .avis-bande-tete { margin-top: 76px; }
  .avis-bande-titre { font-size: 24px; }
  .avis-glisser { display: none; }
  .avis-defiler { display: inline; }
  .avis-fleches { display: flex; }
  .avis-bande { gap: 18px; }
  .cartouche { width: 320px; }
  .cartouche:nth-child(3n+2) { width: 380px; }

  .devis-grille { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-areas: "tete message"; column-gap: 60px; align-items: center; }
  .devis-tete { grid-area: tete; max-width: 860px; }
  .devis-message { grid-area: message; padding: 26px; }
  .devis-fond { width: 900px; height: 900px; right: -300px; top: -60px; }

  .horaires-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tete tete" "prog coord"; column-gap: 72px; align-items: center; }
  .horaires-tete { grid-area: tete; max-width: 900px; }
  .programmateur { grid-area: prog; }
  .coordonnees { grid-area: coord; }
  .prog-module { width: 380px; }

  .pied-nom span { display: inline; }
  .pied-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bouton, .levier, .voyant-disj, .etiquette, .barre-appel, .entete, .prog-cadran .cran { transition: none; }
}
@media print { .barre-appel, .entete { display: none; } }