/* =========================================================
   EIKO CRÉATION — « MUR DE NUIT »
   ---------------------------------------------------------
   Refonte complète de l'apparence : le site passe du papier
   clair au mur de nuit. Fond quasi noir, néons, lueurs,
   grille qui dérive, typographie cinétique.

   Ce fichier est chargé APRÈS site.css et theme.css, et il les
   surcharge volontairement. La structure HTML ne change pas :
   seuls l'habillage et les animations changent.

   Contrainte tenue : tout le texte reste au-dessus de 4,5:1
   (WCAG AA). Les néons purs sont réservés aux traits, aux
   bordures et aux titres, jamais au texte courant.
   ========================================================= */

:root {
  /* Surfaces */
  --night: #07060c;
  --night-2: #0d0b16;
  --surface: #14111f;
  --surface-2: #1b1729;
  --line: #2b2440;

  /* Néons */
  --neon-magenta: #ff3ad4;
  --neon-green: #a6ff1f;
  --neon-cyan: #35e6ff;
  --neon-yellow: #ffe94a;

  /* Texte — les seules valeurs utilisées pour du contenu */
  --tx: #f2eefb;          /* 17,4:1 sur --night */
  --tx-soft: #c9c2de;     /* 10,6:1 */
  --tx-mute: #a49cbd;     /*  7,0:1 */
  --tx-on-neon: #0a0810;
  --accent-soft: linear-gradient(180deg, rgba(255, 233, 74, .14), rgba(166, 255, 31, .08));

  --glow-m: 0 0 18px rgba(255, 58, 212, .45), 0 0 46px rgba(255, 58, 212, .22);
  --glow-g: 0 0 18px rgba(166, 255, 31, .40), 0 0 46px rgba(166, 255, 31, .18);
  --nav-h: 92px;

  /* On réécrit les variables héritées : site.css les utilise partout
     (ombres, bordures, `mark`, dégradés). */
  --paper: var(--night);
  --white: var(--surface);
  --ink: var(--tx);
  --magenta: var(--neon-magenta);
  --green: var(--neon-green);
  --yellow: var(--neon-yellow);
  --green-2: #7fd400;
  --green-dk: #8fdc1c;
  --magenta-dk: #ff5fdd;
  --brown: #8a5a2b;
}

/* Le sol est clippé horizontalement.
   Les bandeaux défilants contiennent une piste de ~3 700 px : leurs enfants
   sortent volontairement du cadre et `.band` les rogne. Sur mobile, ce
   rognage ne suffisait pas à empêcher le document de s'élargir (mesuré :
   +311 px de défilement horizontal). `overflow-x: clip` ferme le document
   sans créer de conteneur de défilement, donc sans casser les éléments
   `position: fixed` — c'est la solution déjà retenue pour `main`. */
html, body { max-width: 100%; overflow-x: clip; }

/* ---------------------------------------------------------
   1. SOL
   --------------------------------------------------------- */
html { background: var(--night); }
body {
  background: var(--night);
  background-image: none;
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--neon-green); color: var(--tx-on-neon); }

/* Le grain de papier devient un grain de mur, plus discret. */
body::after { opacity: .05; mix-blend-mode: overlay; }

/* ---------------------------------------------------------
   2. GRILLE QUI DÉRIVE + HALOS
   Deux couches fixes sous tout le contenu : une grille
   technique qui glisse lentement, et deux halos de couleur.
   Purement décoratif, jamais au-dessus du contenu.
   --------------------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sky::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255, 58, 212, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 230, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px, 68px 68px;
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift {
  from { transform: translate3d(0, 0, 0) rotate(0.001deg); }
  to   { transform: translate3d(-68px, -68px, 0) rotate(0.001deg); }
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 420px at 12% 8%, rgba(255, 58, 212, .17), transparent 70%),
    radial-gradient(620px 420px at 88% 22%, rgba(53, 230, 255, .13), transparent 72%),
    radial-gradient(720px 520px at 50% 108%, rgba(166, 255, 31, .12), transparent 70%);
  animation: hazePulse 14s ease-in-out infinite alternate;
}
@keyframes hazePulse {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}
/* Tout le contenu passe au-dessus du décor.
   Attention : cette règle a la priorité la plus haute du fichier
   (chaque :not(#…) ajoute un ID). Elle écrasait donc le
   `position: fixed` de la barre de navigation, de la barre de
   progression, du bouton devis flottant et de la vignette — qui
   défilaient avec la page, et laissaient un vide de 92px en haut
   de chaque page (le `padding-top` de la barre était compté deux
   fois). On exclut explicitement ces éléments : ils gardent leur
   position d'origine, définie dans site.css et ci-dessus. */
body > *:not(.sky):not(.vignette):not(#wipe):not(.cursor-dot):not(.cursor-ring):not(nav.topnav):not(#prog):not(.fab-devis):not(.skip):not(dialog):not(.paint-blob):not(.splash-dot):not(.xmas-spark) {
  position: relative;
  z-index: 1;
}

/* Vignette de bord : referme l'image comme un mur éclairé au centre. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(7, 6, 12, .78) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sky::before, .sky::after { animation: none; }
}

/* ---------------------------------------------------------
   3. NAVIGATION : verre + néon
   --------------------------------------------------------- */
nav.topnav {
  background: rgba(13, 11, 22, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 2px solid rgba(255, 58, 212, .38);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 10px 40px rgba(0, 0, 0, .5);
}
nav.topnav.scrolled {
  background: rgba(10, 8, 18, .9);
  border-bottom-color: var(--neon-green);
  box-shadow: 0 1px 0 rgba(166, 255, 31, .35), 0 14px 50px rgba(0, 0, 0, .62);
}
.brand { color: var(--tx); }
.brand b { color: var(--neon-magenta); -webkit-text-stroke: 0; text-shadow: var(--glow-m); }
.navlogo { filter: drop-shadow(0 0 14px rgba(255, 58, 212, .5)); }

.nav-links a { color: var(--tx-soft); }
.nav-links a:not(.nav-cta)::after {
  background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
  box-shadow: 0 0 10px rgba(166, 255, 31, .8);
  height: 3px;
}
.nav-links a:hover { color: var(--tx); text-shadow: 0 0 14px rgba(166, 255, 31, .55); }

.nav-cta {
  background: transparent;
  color: var(--neon-green) !important;
  border: 2px solid var(--neon-green);
  box-shadow: 0 0 14px rgba(166, 255, 31, .35), inset 0 0 14px rgba(166, 255, 31, .12);
  animation: ctaPulse 3.4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(166, 255, 31, .32), inset 0 0 14px rgba(166, 255, 31, .10); }
  50%      { box-shadow: 0 0 26px rgba(166, 255, 31, .6), inset 0 0 20px rgba(166, 255, 31, .2); }
}
.burger { background: var(--surface); border-color: var(--line); box-shadow: none; }
.burger span { background: var(--neon-green); }
.nav-links {
  border-left-color: var(--line);
  background: rgba(13, 11, 22, .97);
}
@media (max-width: 960px) {
  .nav-links { background: rgba(10, 8, 18, .98); border-left: 2px solid rgba(255, 58, 212, .4); }
}

#prog {
  height: 3px;
  border-bottom: 0;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan) 50%, var(--neon-green));
  box-shadow: 0 0 16px rgba(255, 58, 212, .85);
}

/* ---------------------------------------------------------
   4. HERO
   --------------------------------------------------------- */
.hero { padding: 150px 0 70px; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(53, 230, 255, .10), transparent 70%),
    radial-gradient(50% 60% at 10% 80%, rgba(255, 58, 212, .12), transparent 72%);
}
.eyebrow {
  background: rgba(255, 58, 212, .14);
  color: var(--neon-magenta);
  border: 1px solid rgba(255, 58, 212, .5);
  box-shadow: 0 0 22px rgba(255, 58, 212, .3), inset 0 0 18px rgba(255, 58, 212, .1);
}
.hero h1 {
  color: var(--tx);
  text-shadow:
    0 0 26px rgba(242, 238, 251, .25),
    0 0 60px rgba(53, 230, 255, .18);
}
.hero h1 .hl {
  color: var(--neon-green);
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 18px rgba(166, 255, 31, .75),
    0 0 52px rgba(166, 255, 31, .4),
    0 0 96px rgba(166, 255, 31, .2);
}
.scribble path { stroke: var(--neon-magenta); filter: drop-shadow(0 0 10px rgba(255, 58, 212, .9)); }
.hero p.lead { color: var(--tx-soft); }
.hero p.lead strong { color: var(--tx); }

.hero-frame {
  border: 2px solid rgba(53, 230, 255, .55);
  box-shadow:
    0 0 0 1px rgba(53, 230, 255, .25),
    0 0 40px rgba(53, 230, 255, .28),
    0 24px 70px rgba(0, 0, 0, .7);
  background: var(--surface);
}
.hero-frame.fx-ready {
  box-shadow:
    0 0 0 1px rgba(53, 230, 255, .3),
    0 0 44px rgba(53, 230, 255, .34),
    0 0 90px rgba(255, 58, 212, .22),
    0 24px 70px rgba(0, 0, 0, .7);
}
.hero-cap {
  background: rgba(7, 6, 12, .9);
  color: var(--neon-cyan);
  border: 1px solid rgba(53, 230, 255, .5);
  box-shadow: 0 0 18px rgba(53, 230, 255, .3);
}
.trust li {
  background: rgba(20, 17, 31, .86);
  border: 1px solid var(--line);
  color: var(--tx-soft);
  box-shadow: 0 0 0 1px rgba(255, 58, 212, .12), 0 8px 26px rgba(0, 0, 0, .5);
}
.trust b { color: var(--neon-green); }

/* ---------------------------------------------------------
   5. BOUTONS
   --------------------------------------------------------- */
.btn {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--tx);
  box-shadow: none;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s, border-color .22s, background .22s;
}
.btn-primary {
  background: linear-gradient(120deg, rgba(255, 58, 212, .18), rgba(53, 230, 255, .14));
  border-color: var(--neon-magenta);
  color: var(--tx);
  box-shadow: 0 0 20px rgba(255, 58, 212, .4), inset 0 0 22px rgba(255, 58, 212, .12);
}
.btn-primary:hover {
  transform: translateY(-3px);
  border-color: var(--neon-green);
  box-shadow: 0 0 30px rgba(166, 255, 31, .55), inset 0 0 26px rgba(166, 255, 31, .16);
}
.btn-ghost {
  background: rgba(20, 17, 31, .7);
  border-color: rgba(53, 230, 255, .45);
  color: var(--tx-soft);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  color: var(--tx);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 26px rgba(53, 230, 255, .42);
}
/* L'ancien reflet blanc devient un reflet néon. */
.btn-primary::before {
  background: linear-gradient(105deg,
    rgba(166, 255, 31, 0) 35%,
    rgba(166, 255, 31, .45) 50%,
    rgba(166, 255, 31, 0) 65%) !important;
}

/* ---------------------------------------------------------
   6. BANDEAUX DÉFILANTS : texte cinétique
   --------------------------------------------------------- */
.band {
  background: rgba(10, 8, 18, .9);
  border-block: 2px solid;
  border-image: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan), var(--neon-green)) 1;
  transform: rotate(-1.2deg) scale(1.03);
}
.band.reverse { transform: rotate(1.2deg) scale(1.03); }
.seq span {
  text-shadow: 0 0 16px currentColor;
  font-size: 1.7rem;
}
.seq span:nth-child(4n+1) { color: var(--neon-green); }
.seq span:nth-child(4n+2) { color: var(--tx); }
.seq span:nth-child(4n+3) { color: var(--neon-yellow); }
.seq span:nth-child(4n+4) { color: var(--neon-magenta); }

/* Onglets : l'état actif utilisait un fond jaune plein avec le texte
   `--ink`, ce qui donnait 1,08:1 (mesuré). On garde le jaune comme
   signal, mais uniquement en bordure et en lueur : le texte reste clair
   sur le fond sombre, donc lisible. */
.tab {
  background: rgba(20, 17, 31, .9);
  border: 1px solid var(--line);
  color: var(--tx-soft);
  box-shadow: none;
}
.tab:hover { color: var(--tx); border-color: rgba(53, 230, 255, .5); transform: translateY(-2px); box-shadow: 0 0 22px rgba(53, 230, 255, .25); }
.tab[aria-selected="true"] {
  background: rgba(255, 233, 74, .12);
  border-color: var(--neon-yellow);
  color: var(--tx);
  box-shadow: 0 0 24px rgba(255, 233, 74, .3), inset 0 0 20px rgba(255, 233, 74, .08);
}

/* Filet de sécurité : un lien sans style dans une carte hérite de la
   couleur du navigateur (bleu #0000EE, mesuré à 2,15:1 sur le fond nuit).
   On force la couleur du thème pour tout lien de contenu. */
.prose a, .aside-card a, .legal a, .review a, .faq-a a, main p a, main li a {
  color: var(--neon-cyan);
}
.aside-card a { text-decoration: underline; text-underline-offset: 3px; }
.aside-card a:hover, .prose a:hover { color: var(--neon-green); }

/* ---------------------------------------------------------
   7. SECTIONS
   --------------------------------------------------------- */
section.block { padding: 96px 0; }
.sec-kicker {
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid rgba(53, 230, 255, .5);
  box-shadow: 0 0 18px rgba(53, 230, 255, .25), inset 0 0 16px rgba(53, 230, 255, .08);
}
.sec-title { color: var(--tx); text-shadow: 0 0 40px rgba(53, 230, 255, .18); }
/* `mark` : le surlignage jaune devient un soulignement néon.
   Le texte reste clair, donc le contraste ne dépend plus du fond. */
.sec-title mark {
  background: none !important;
  color: inherit;
  padding: 0 2px;
  position: relative;
  text-shadow: 0 0 26px rgba(166, 255, 31, .5);
}
.sec-title mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: .12em;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
  box-shadow: 0 0 18px rgba(166, 255, 31, .8);
  transform-origin: left;
  animation: markerSweep 4.5s ease-in-out infinite;
}
@keyframes markerSweep {
  0%, 12%  { transform: scaleX(0); }
  38%, 78% { transform: scaleX(1); }
  100%     { transform: scaleX(1); }
}
.sec-sub { color: var(--tx-soft); }
.gallery-note { color: var(--tx-mute); }
.gallery-note a { color: var(--neon-cyan); }

/* Brume de bombe : plus lumineuse sur fond sombre. */
.sec-head::before { filter: blur(8px); opacity: 1.5; }
#services .sec-head { --spray: rgba(166, 255, 31, .22); }
#methode .sec-head { --spray: rgba(255, 233, 74, .2); }
#about .sec-head { --spray: rgba(53, 230, 255, .2); }

/* Fonds de section : plus de papier clair, des voiles de couleur. */
.tone { margin: 34px 0; }
.tone-green { --tone: #0b1410; }
.tone-yellow { --tone: #14110a; }
.tone-ink { --tone: #05040a; }
.tone::before, .tone::after { opacity: .5; }

/* ---------------------------------------------------------
   8. CARTES
   --------------------------------------------------------- */
.svc, .step, .presscard, .aside-card, .bubble, .review,
.parti-cta, .hub-card, .faq-item, .cta-band, .p404-nav, .form {
  background: linear-gradient(180deg, rgba(27, 23, 41, .92), rgba(17, 14, 27, .92));
  border: 1px solid var(--line);
  color: var(--tx);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.svc:nth-child(4n+1), .step:nth-child(4n+1) { box-shadow: 0 0 0 1px rgba(166, 255, 31, .22), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:nth-child(4n+2), .step:nth-child(4n+2) { box-shadow: 0 0 0 1px rgba(255, 58, 212, .22), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:nth-child(4n+3), .step:nth-child(4n+3) { box-shadow: 0 0 0 1px rgba(255, 233, 74, .2), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:nth-child(4n+4), .step:nth-child(4n+4) { box-shadow: 0 0 0 1px rgba(53, 230, 255, .22), 0 14px 40px rgba(0, 0, 0, .55); }
.svc:hover, .step:hover, .hub-card:hover, .presscard:hover {
  border-color: rgba(166, 255, 31, .5);
  box-shadow: 0 0 34px rgba(166, 255, 31, .28), 0 18px 50px rgba(0, 0, 0, .6);
}
.svc h3, .svc h4, .step h3, .hub-card h2, .aside-h, .faq-item summary { color: var(--tx); }
.svc p, .step p, .hub-card p, .aside-card p, .review blockquote p { color: var(--tx-soft); }
.svc .ic, .hub-ic { filter: drop-shadow(0 0 12px rgba(255, 58, 212, .55)); }
.burst::before, .burst::after { background: var(--surface-2); border-color: var(--neon-yellow); }
.burst b { color: var(--neon-yellow); }
.svc-more, .hub-more { color: var(--neon-cyan); }
.svc-link:hover::after { border-color: var(--neon-green); box-shadow: 0 0 24px rgba(166, 255, 31, .4); }

.stick, .target {
  background: rgba(27, 23, 41, .9);
  border-color: var(--line);
  color: var(--tx-soft);
  box-shadow: none;
}
.stick:nth-child(even) { background: rgba(255, 58, 212, .14); border-color: rgba(255, 58, 212, .4); }
.target { box-shadow: 0 0 0 1px rgba(166, 255, 31, .18); }

/* ---------------------------------------------------------
   9. PROJETS / GALERIE
   --------------------------------------------------------- */
.proj { border: 1px solid var(--line); box-shadow: 0 16px 44px rgba(0, 0, 0, .6); }
.proj:hover { box-shadow: 0 0 34px rgba(255, 58, 212, .3), 0 20px 54px rgba(0, 0, 0, .65); border-color: rgba(255, 58, 212, .45); }
.proj .meta { background: rgba(7, 6, 12, .94); border: 1px solid var(--line); max-width: 74%; }
/* Les libellés sont en capitales dans une police condensée : en colonne
   étroite, « CLAIRVAUX-D'AVEYRON — TERRAIN DE SPORT » se coupait sur six
   lignes et venait buter sur le bouton d'agrandissement (mesuré sur une
   capture à 390 px). Césure autorisée + boîte resserrée. */
.proj .ttl { font-size: 1.12rem; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
.proj .cat { font-size: .62rem; letter-spacing: 1px; }
@media (max-width: 660px) {
  .proj .meta { max-width: 76%; padding: 7px 10px; }
  .proj .ttl { font-size: .98rem; }
  .proj .cat { font-size: .58rem; }
}
.proj .cat { color: var(--neon-cyan); }
.proj .ttl { color: var(--tx); }
.bam { background: var(--neon-green); color: var(--tx-on-neon); border-color: transparent; box-shadow: 0 0 18px rgba(166, 255, 31, .5); }
.proj:hover .bam { background: var(--neon-yellow); }
.proj-open span { background: var(--neon-magenta); color: var(--tx-on-neon); border-color: transparent; box-shadow: 0 0 20px rgba(255, 58, 212, .6); }
.proj::after { background: var(--neon-cyan) !important; }
/* Liseré de balayage : une ligne de lumière traverse la vignette. */
.proj-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(53, 230, 255, .3) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.proj:hover .proj-img::after { transform: translateX(120%); }

/* ---------------------------------------------------------
   10. PRÉSENTATION, MÉTHODE, AVIS, PRESSE
   --------------------------------------------------------- */
.bubble strong { background: none; color: var(--neon-green); }
.about-img { border: 2px solid rgba(255, 58, 212, .5); box-shadow: 0 0 40px rgba(255, 58, 212, .28); }
.about-img-wrap .bam { background: var(--neon-cyan); color: var(--tx-on-neon); }
.review { position: relative; }
.review::before {
  content: "\\201C";
  position: absolute;
  top: -6px;
  left: 14px;
  font-family: 'Bangers', cursive;
  font-size: 4.4rem;
  line-height: 1;
  color: var(--neon-magenta);
  opacity: .5;
  text-shadow: var(--glow-m);
}
.review figcaption b { color: var(--tx); }
.review figcaption span { color: var(--tx-mute); }

.presscard { position: relative; overflow: hidden; }
.presscard::before { background: rgba(53, 230, 255, .3); border-color: rgba(53, 230, 255, .5); }
.pc-outlet { color: var(--tx); }
.pc-year { background: transparent; color: var(--neon-yellow); border-color: rgba(255, 233, 74, .5); }
.pc-desc { color: var(--tx-soft); }
.pc-link { color: var(--neon-cyan); }
.tone-ink .sec-title, .tone-ink .sec-sub, .tone-ink .gallery-note { color: var(--tx); }
.tone-ink .sec-title mark::after { box-shadow: 0 0 22px rgba(166, 255, 31, .9); }

/* ---------------------------------------------------------
   11. FAQ, FORMULAIRE, PIED DE PAGE
   --------------------------------------------------------- */
.faq-item[open] { border-color: rgba(166, 255, 31, .45); box-shadow: 0 0 28px rgba(166, 255, 31, .2); }
.faq-item summary::after { background: transparent; color: var(--neon-green); border-color: rgba(166, 255, 31, .6); }
.faq-a p { color: var(--tx-soft); }

.contact-line .ic { background: rgba(27, 23, 41, .9); border-color: var(--line); box-shadow: none; color: var(--neon-cyan); }
/* Les icônes de contact sont des SVG inline sans attribut fill/stroke :
   le noir par défaut du navigateur les rendait invisibles sur le mur
   de nuit (le rendu clair d'origine, lui, les montrait en noir). */
.contact-line .ic svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-line a { color: var(--tx); }
.contact-line a:hover { color: var(--neon-green); }
.contact-reassure li::before { background: transparent; color: var(--neon-green); border-color: rgba(166, 255, 31, .6); }
.field label { color: var(--tx-mute); }
.field input, .field textarea, .field select {
  background: rgba(7, 6, 12, .8);
  color: var(--tx);
  border: 1px solid var(--line);
}
.field input::placeholder, .field textarea::placeholder { color: #7d7595; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--neon-green);
  box-shadow: 0 0 0 1px var(--neon-green), 0 0 24px rgba(166, 255, 31, .3);
}
.form-legal { color: var(--tx-mute); }
.form-msg { color: var(--tx-on-neon); border-color: transparent; }
.form-msg.ok { background: var(--neon-green); }
.form-msg.err { background: var(--neon-yellow); }
.form .btn { background: linear-gradient(120deg, rgba(166, 255, 31, .2), rgba(53, 230, 255, .16)); border-color: var(--neon-green); }

.cta-band {
  background: linear-gradient(120deg, rgba(255, 58, 212, .12), rgba(53, 230, 255, .1));
  border: 1px solid rgba(255, 58, 212, .4);
  color: var(--tx);
  box-shadow: 0 0 40px rgba(255, 58, 212, .2), 0 20px 60px rgba(0, 0, 0, .6);
}
.cta-band h2 { color: var(--tx); }
.cta-band p { color: var(--tx-soft); }
.cta-kicker { color: var(--neon-green); }
.cta-actions .btn { box-shadow: 0 0 20px rgba(255, 58, 212, .35); }
.cta-actions .btn-ghost { box-shadow: 0 0 20px rgba(53, 230, 255, .3); }

.drip { opacity: .9; filter: drop-shadow(0 0 12px rgba(255, 58, 212, .5)); }
footer { background: #040309; border-top: 1px solid var(--line); color: var(--tx-soft); }
.foot-brand .fb { color: var(--tx); }
.foot-brand .fb b { color: var(--neon-magenta); text-shadow: var(--glow-m); }
.foot-brand p { color: var(--tx-mute); }
.foot-h { color: var(--neon-green); }
.foot-col a { color: var(--tx-soft); }
.foot-col a:hover { color: var(--neon-cyan); text-shadow: 0 0 12px rgba(53, 230, 255, .6); }
/* Cibles tactiles.
   Mesuré sur un écran de 390 px : les liens du menu tiroir faisaient 20 px de
   haut, les liens en ligne dans le texte 14 à 20 px. Le minimum confortable
   est de 24 px. On ajoute du rembourrage vertical — sans changer la densité
   visuelle, puisqu'un lien en ligne reste sur sa ligne de texte. */
@media (max-width: 960px) {
  /* position: relative sur les liens du tiroir est nécessaire : le panneau
     crée un contexte d'empilement (z-index: 800), donc l'empilement des liens
     est local et non global. */
  .nav-links a { display: block; padding: 6px 0; position: relative; }
}
@media (max-width: 700px) {
  .foot-col a { display: block; padding: 5px 0; }
  .foot-bottom a, .foot-contact a { display: inline-block; padding: 4px 0; }
  .gallery-note a, .bubble-more a, .form-legal a, .prose p a, .legal p a {
    display: inline-block;
    padding: 4px 0;
  }
}
.foot-contact a { color: var(--neon-cyan); }
.foot-bottom { color: var(--tx-mute); border-top-color: var(--line); }
.foot-bottom a { color: var(--neon-green); }

/* ---------------------------------------------------------
   12. PAGES INTÉRIEURES
   --------------------------------------------------------- */
.breadcrumb a { color: var(--neon-cyan); }
.breadcrumb li[aria-current] { color: var(--tx-mute); }
.prose h2 { color: var(--tx); }
.prose p { color: var(--tx-soft); }
.prose a { color: var(--neon-cyan); }
.page-hero h1 { color: var(--tx); text-shadow: 0 0 34px rgba(53, 230, 255, .2); }
.page-hero-media img { border: 2px solid rgba(53, 230, 255, .45); box-shadow: 0 0 40px rgba(53, 230, 255, .25); }
.check-list .i { color: var(--neon-green); }
.plain-list li + li { border-top-color: var(--line); }
.chip-list li { background: rgba(27, 23, 41, .9); border-color: var(--line); color: var(--tx-soft); }
.aside-accent { background: linear-gradient(180deg, rgba(255, 233, 74, .12), rgba(166, 255, 31, .08)); border-color: rgba(255, 233, 74, .35); }
.legal h2 { color: var(--tx); }
.legal p { color: var(--tx-soft); }
.legal a { color: var(--neon-cyan); }
.legal .updated { color: var(--tx-mute); }
.legal-header h1 { color: var(--tx); }
.page404 h1 { color: var(--neon-magenta); -webkit-text-stroke: 0; text-shadow: var(--glow-m), 0 0 90px rgba(255, 58, 212, .4); }
.page404 p { color: var(--tx-soft); }
.p404-h { color: var(--tx-mute); }
.p404-nav a { color: var(--neon-cyan); }

/* Visionneuse */
.lightbox::backdrop { background: rgba(4, 3, 9, .93); }
.lb-img { border: 2px solid rgba(53, 230, 255, .5); box-shadow: 0 0 60px rgba(53, 230, 255, .3); background: var(--night); }
.lb-cap { background: rgba(7, 6, 12, .92); color: var(--neon-green); border-color: var(--line); box-shadow: 0 0 20px rgba(166, 255, 31, .3); }
.lb-btn { background: transparent; color: var(--neon-green); border: 2px solid var(--neon-green); box-shadow: 0 0 18px rgba(166, 255, 31, .4); }
.lb-btn:hover { background: var(--neon-green); color: var(--tx-on-neon); }

.fab-devis {
  background: rgba(7, 6, 12, .92);
  color: var(--neon-green);
  border: 2px solid var(--neon-green);
  box-shadow: 0 0 22px rgba(166, 255, 31, .45);
}

/* ---------------------------------------------------------
   13. ACCESSIBILITÉ
   --------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--neon-cyan); outline-offset: 3px; }
.skip { background: var(--neon-green); color: var(--tx-on-neon); }

@media (prefers-reduced-motion: reduce) {
  .nav-cta, .sec-title mark::after, .sky::before, .sky::after { animation: none; }
  .sec-title mark::after { transform: scaleX(1); }
}

/* ---------------------------------------------------------
   14. TAP TARGETS — WCAG 2.2 SC 2.5.8 (24x24 minimum)
   Inline prose links measure only 16-17px tall on a 390px
   viewport. Padding alone cannot fix a wrapping inline box
   (it inflates only the first/last line), so raise the line
   box itself and cancel the visual shift with a matching
   negative margin: layout is untouched, hit area reaches 24px.
   Scoped to coarse pointers so desktop rhythm is unchanged.
   --------------------------------------------------------- */
@media (pointer: coarse) {
  .prose a:not(.btn):not(.card):not(.tag),
  .faq-a a:not(.btn),
  .legal a:not(.btn),
  .breadcrumb a,
  .plain-list a,
  .p404-nav a {
    display: inline-block;
    padding-block: 3.5px;
    margin-block: -3.5px;
    line-height: 1.45;
  }
}