/* ==========================================================================
   FORMA INTERIM — thème « Nuit »
   Chargé APRÈS site.css : il ne remplace rien, il habille.

   Parti pris
   ----------
   Un noir profond légèrement bleuté plutôt qu'un noir pur, qui écrase tout.
   Le bleu et l'orange de la marque n'y sont plus des aplats mais des LUMIÈRES :
   un liseré, une lueur derrière un titre, un mot qui passe du bleu à l'orange.
   Le luxe tient ici à la retenue — des filets d'un pixel, beaucoup d'air, une
   seule couleur forte par écran — et à une matière : un grain très léger qui
   évite l'aplat numérique.

   ⚠ Pas d'or : le noir et or est la charte Form@cademy, une autre marque.

   Pour revenir à l'ancien thème : retirer la ligne <link … luxe.css> des pages.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* La nuit, du plus profond au plus clair */
  --nuit-0: #030509;
  --nuit-1: #05080d;
  --nuit-2: #080c13;
  --nuit-3: #0c121b;
  --nuit-4: #121a26;

  /* Lumières de marque. Le bleu de la marque sert aux aplats ; en texte sur
     fond noir on l'éclaircit, sinon il manque de lisibilité. */
  --bleu-clair: #4fb3f0;
  --orange-clair: #ffb547;

  --filet: rgba(255, 255, 255, .08);
  --filet-fort: rgba(255, 255, 255, .15);
  --lueur-bleue: 0 24px 60px -28px rgba(6, 143, 221, .55);
  --lueur-orange: 0 18px 44px -18px rgba(252, 164, 39, .55);

  /* Réaffectation des jetons d'origine.
     --navy servait surtout de COULEUR DE TEXTE (39 emplois) : il devient clair.
     Ses 18 emplois en fond sont repris un à un plus bas. --navy-900 reste
     sombre : c'est le texte posé sur les boutons orange. */
  --navy: #eef2f7;
  --navy-700: #b9c5d4;
  --navy-900: #05080d;
  --ink: #e6ebf2;
  --muted: #8f9cae;
  --line: var(--filet);
  --line-soft: rgba(255, 255, 255, .05);
  --surface: var(--nuit-3);
  --white: var(--nuit-1);
  --blue-100: rgba(6, 143, 221, .14);
  --blue-050: rgba(6, 143, 221, .08);
  --orange-100: rgba(252, 164, 39, .11);

  --sh-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --sh: 0 18px 44px -20px rgba(0, 0, 0, .75);
  --sh-lg: 0 34px 80px -30px rgba(0, 0, 0, .85);
  --sh-orange: var(--lueur-orange);
  --sh-blue: var(--lueur-bleue);

  /* Plus d'air : l'espace est la première marque du haut de gamme. */
  --sec-y: clamp(64px, 8vw, 118px);

  --grad-marque: linear-gradient(100deg, #4fb3f0 0%, #6fb8e8 30%, #fca427 100%);
  --grad-filet: linear-gradient(90deg, transparent 0%, rgba(6, 143, 221, .9) 22%, rgba(252, 164, 39, .9) 78%, transparent 100%);
}

/* ── Matière ───────────────────────────────────────────────────────────── */
body {
  background: var(--nuit-1);
  color: var(--ink);
}
/* Grain : un bruit à peine perceptible, qui donne de la matière au noir. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
::selection { background: rgba(252, 164, 39, .35); color: #fff; }

h1, h2, h3, h4 { color: var(--navy); font-weight: 700; letter-spacing: -.028em; }
/* Des lignes de titre équilibrées : jamais un mot seul en bout de titre. */
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline-color: var(--orange); }

.skip-link { background: var(--orange); color: var(--navy-900); }

/* ── Sections ──────────────────────────────────────────────────────────── */
.section--tint { background: var(--nuit-2); }
.section--navy {
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(6, 143, 221, .16), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(252, 164, 39, .08), transparent 60%),
    var(--nuit-0);
  color: #b9c5d4;
  border-block: 1px solid var(--filet);
}
.section--navy .sec-head p, .section--navy .step p { color: var(--muted); }

.eyebrow { color: var(--bleu-clair); }
.section--navy .eyebrow { color: var(--orange-clair); }

/* La bande « chantier » à rayures devient un filet de lumière bleu → orange. */
.hazard, .hazard--thin {
  height: 1px;
  background: var(--grad-filet);
  opacity: .8;
}

.blueprint::before {
  background-image:
    linear-gradient(to right, rgba(79, 179, 240, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 179, 240, .055) 1px, transparent 1px);
}

/* Le mot fort d'un titre passe du bleu à l'orange : la signature Forma.
   inline-block + petite marge : sinon le dégradé rogne les jambages. */
.hero__title em, .home-hero h1 em {
  background: var(--grad-marque);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  display: inline-block;
  padding: 0 .12em .06em 0; margin-right: -.12em;
}
.hero__title em::after { display: none; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn--primary {
  background: linear-gradient(180deg, #ffb547 0%, #fca427 100%);
  color: var(--navy-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--lueur-orange);
}
.btn--primary:hover { background: linear-gradient(180deg, #ffc266 0%, #ffad38 100%); }
.btn--blue { background: linear-gradient(180deg, #1c9be6 0%, #068fdd 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--lueur-bleue); }
.btn--navy { background: var(--nuit-4); color: var(--navy); border: 1px solid var(--filet-fort); }
.btn--navy:hover { background: var(--nuit-3); }
.btn--ghost, .home-hero__actions .btn--ghost {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--filet-fort);
  color: var(--navy);
}
.btn--ghost:hover { border-color: var(--bleu-clair); color: #fff; background: rgba(79, 179, 240, .08); }
.btn--white { background: #f3f6fa; color: var(--navy-900); }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.topbar { background: var(--nuit-0); color: #8f9cae; border-bottom: 1px solid var(--line-soft); }
.hdr {
  background: rgba(5, 8, 13, .74);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--filet);
}
/* Un filet de lumière sous l'en-tête, qui apparaît quand on fait défiler. */
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--grad-filet); opacity: 0; transition: opacity .4s;
}
.hdr.is-stuck { box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .9); }
.hdr.is-stuck::after { opacity: .55; }

.nav a { color: #b9c5d4; }
.nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav a.is-active { background: rgba(6, 143, 221, .14); color: #fff; }

.burger { background: var(--nuit-4); border: 1px solid var(--filet-fort); color: #fff; }
.mobnav {
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(6, 143, 221, .16), transparent 60%),
    var(--nuit-0);
}
.mobnav a.mobnav__link { border-bottom-color: var(--filet); }

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero, .phero {
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(6, 143, 221, .20), transparent 62%),
    radial-gradient(720px 460px at 0% 115%, rgba(252, 164, 39, .10), transparent 60%),
    var(--nuit-1);
  border-bottom: 1px solid var(--filet);
}
.hero__lead, .phero p { color: #a9b6c6; }

.home-hero {
  background:
    radial-gradient(1000px 560px at 95% -10%, rgba(6, 143, 221, .22), transparent 62%),
    radial-gradient(700px 480px at -5% 110%, rgba(252, 164, 39, .10), transparent 60%),
    var(--nuit-1);
  border-bottom: 1px solid var(--filet);
}
.home-hero__lead { color: #a9b6c6; }
.home-hero__lead strong { color: #fff; }
.home-hero__proof { color: #b9c5d4; }
.home-hero__proof svg { color: var(--bleu-clair); }
.home-hero__contact > svg { background: var(--nuit-3); border-color: var(--filet-fort); color: var(--orange); }
.home-hero__contact:hover strong { color: var(--orange-clair); }
.home-hero__visual {
  background: var(--nuit-3);
  border: 1px solid var(--filet);
  border-radius: 22px;
  box-shadow: var(--sh-lg), var(--lueur-bleue);
}
.home-hero__visual::after { background: linear-gradient(180deg, rgba(3, 5, 9, .20), transparent 38%, rgba(3, 5, 9, .92)); }
.home-hero__locations a {
  background: rgba(5, 8, 13, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; border: 1px solid var(--filet-fort);
}
.home-hero__locations a:hover { background: var(--orange); color: var(--navy-900); border-color: var(--orange); }
.home-hero__stamp {
  background: linear-gradient(160deg, #ffb547, #fca427);
  color: var(--navy-900);
  box-shadow: var(--lueur-orange);
}
/* Visuel du héros : la constellation des secteurs (SVG dans la page).
   Elle remplace la photo d'ouvrier : l'humain au centre, le BTP allumé
   parce qu'il est actif, les autres secteurs en préparation autour.
   Tout tourne très lentement ; rien ne bouge si l'appareil le demande. */
.hero-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-art .ha-tourne,
.hero-art .ha-lent { transform-box: view-box; transform-origin: 500px 415px; }
.hero-art .ha-tourne { animation: ha-tour 26s linear infinite; }
.hero-art .ha-lent { animation: ha-tour 90s linear infinite reverse; }
.hero-art .ha-logo,
.hero-art .ha-pouls { transform-box: fill-box; transform-origin: center; }
.hero-art .ha-logo { animation: ha-tour 40s linear infinite; }
.hero-art .ha-pouls { animation: ha-pouls 3.4s ease-in-out infinite; }
@keyframes ha-tour { to { transform: rotate(360deg); } }
@keyframes ha-pouls {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
.hero-art .ha-noeud text {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  letter-spacing: .16em; fill: #b9c5d4;
}
.hero-art .ha-noeud--actif text { fill: var(--orange-clair); }
/* Le rond « 100 % » n'est plus là : la légende reprend toute la largeur
   (sinon elle passe sur trois lignes et recouvre la constellation). */
.home-hero__visual figcaption { right: 28px; }
/* Petit écran : un cadre plus haut pour loger la scène entre les pastilles de
   ville et la légende ; les libellés, illisibles à cette taille, disparaissent. */
@media (max-width: 760px) {
  .home-hero__visual { min-height: 420px; }
  .hero-art .ha-scene {
    transform-box: view-box; transform-origin: 500px 415px;
    transform: translateY(-16px) scale(.9);
  }
  .hero-art .ha-noeud text { display: none; }
}
@media (max-width: 400px) {
  .home-hero__visual { min-height: 400px; }
  .home-hero__visual figcaption { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art * { animation: none !important; }
}

/* Les deux portes (candidat / entreprise) */
.door--cand { background: linear-gradient(140deg, #0b76b8 0%, #064a73 100%); border: 1px solid rgba(79, 179, 240, .35); }
.door--ent { background: linear-gradient(140deg, var(--nuit-4) 0%, var(--nuit-2) 100%); border: 1px solid var(--filet-fort); }

/* Parcours sous le héros */
.pathways { background: var(--nuit-1); border-bottom: 1px solid var(--filet); }
.pathway + .pathway { border-left-color: var(--filet); }
.pathway__icon { background: var(--orange-100); color: var(--orange-clair); }
.pathway + .pathway .pathway__icon { background: var(--blue-100); color: var(--bleu-clair); }
.pathway__label { color: var(--bleu-clair); }
.pathway:hover strong { color: #fff; }
.pathway:hover .pathway__arrow { color: var(--orange); }

/* Bandeau des postes */
.marquee { background: var(--nuit-0); border-block: 1px solid var(--filet); }
.marquee__track { scrollbar-color: #33404f var(--nuit-0); }
.mchip { color: #b9c5d4; border-color: var(--filet-fort); }
.mchip:hover, .mchip:focus-visible,
.mchip--hot:hover, .mchip--hot:focus-visible { background: #f3f6fa; color: var(--navy-900); border-color: #f3f6fa; }
.mchip--hot { background: transparent; color: var(--orange-clair); border-color: rgba(252, 164, 39, .55); }

/* ── Surfaces : cartes, tuiles, blocs ──────────────────────────────────── */
.card, .metier, .trade, .sector, .partner, .agency, .qa, .formcard, .info-card, .stat {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    var(--nuit-3);
  border-color: var(--filet);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.card:hover, .metier:hover, .trade:hover, .sector:hover, .partner:hover {
  border-color: rgba(79, 179, 240, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--lueur-bleue);
}
.card__icon, .trade__ic, .filezone__ic, .info-list .ic, .filepick__ic { background: var(--blue-100); color: var(--bleu-clair); }

/* État d'un secteur sur une carte (page Entreprises) : actif ou en préparation. */
.card { position: relative; }
.card__etat {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
  background: var(--orange-100); color: var(--orange-clair);
}
.card__etat--actif { background: rgba(6, 143, 221, .16); color: var(--bleu-clair); }

.stats { background: var(--filet); }
.section--tint .stat { background: var(--nuit-3); }
/* Chiffres : bleu et orange en alternance. Un dégradé posé sur un nombre étroit
   n'en montre qu'une teinte intermédiaire — d'une case à l'autre, ça jurait. */
.stat__num, .home .stat__num { color: var(--bleu-clair); }
.stat:nth-child(even) .stat__num,
.home .stat:nth-child(even) .stat__num { color: var(--orange-clair); }
.home .stats { background: transparent; }
.home .stat { background: transparent; box-shadow: none; }

.metier li, .sector__chips li, .ville { background: rgba(255, 255, 255, .05); color: #b9c5d4; border: 1px solid var(--filet); }
.metier__head svg { color: var(--orange-clair); }

.trade__tag { background: var(--orange-100); color: var(--orange-clair); }
.trade--other {
  background:
    radial-gradient(420px 240px at 100% 0%, rgba(252, 164, 39, .16), transparent 60%),
    linear-gradient(150deg, var(--nuit-4) 0%, var(--nuit-2) 100%);
  border: 1px solid rgba(252, 164, 39, .30);
}
.trade--other p { color: var(--muted); }
.trade-search { background: var(--nuit-3); border-color: var(--filet-fort); }
.trades__empty { background: var(--nuit-3); }
.trade__actions a, .trades__empty a { color: var(--bleu-clair); }
.trade__actions a:hover { color: #fff; }

/* Secteurs : l'actif s'allume, l'« en développement » reste en retrait. */
.sector--live { border-color: rgba(79, 179, 240, .45); }
.sector--live::before { height: 2px; background: var(--grad-filet); }
.sector--live .sector__ic { background: linear-gradient(160deg, #1c9be6, #0668a3); }
.sector--live .sector__state { background: rgba(6, 143, 221, .16); color: var(--bleu-clair); }
.sector--soon { background: var(--nuit-2); border-style: dashed; border-color: var(--filet-fort); }
.sector--soon .sector__ic { background: rgba(255, 255, 255, .04); color: var(--muted); border-color: var(--filet-fort); }
.sector--soon .sector__state { background: var(--orange-100); color: var(--orange-clair); }
.sector--soon h3 { color: #d7dee8; }
.sector--soon .sector__chips li { background: transparent; }
/* Six pôles sur l'accueil : trois colonnes, deux rangées. */
.home .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .home .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home .sectors { grid-template-columns: 1fr; } }
.sector-note { background: var(--nuit-3); border-left-color: var(--orange); color: var(--muted); }
.sector-note strong { color: #fff; }
.sector-note a { color: var(--bleu-clair); }

/* Partenaires : les logos sont sombres ; on les pose sur un cartouche clair
   plutôt que de les inverser, ce qui abîmerait les écussons pleins. */
.partner__logo {
  background: linear-gradient(180deg, #f5f7fa, #e7ecf2);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  /* La marge intérieure est prise DANS la hauteur : le logo doit tenir dans
     ce qui reste, sinon il déborde par le bas du cartouche. */
  box-sizing: border-box;
  height: 104px;
  padding: 12px 14px;
  overflow: hidden;
}
/* Gris mais lisible : à .72, les logos au trait fin (TPCT) disparaissaient. */
.partner__logo img { max-height: 80px; opacity: .9; }
@media (max-width: 640px) {
  .partner__logo { height: 84px; padding: 9px 10px; }
  .partner__logo img { max-height: 66px; }
}
.partner__cat { color: var(--muted); }
.partner__link { color: var(--bleu-clair); }
.partner:hover .partner__link { color: var(--orange-clair); }
.partner__mono { background: linear-gradient(140deg, #068fdd 0%, #0b1622 100%); }

/* Étapes */
.step::before { background: linear-gradient(90deg, #068fdd, rgba(6, 143, 221, .08)); height: 2px; }
.step:nth-child(even)::before { background: linear-gradient(90deg, #fca427, rgba(252, 164, 39, .08)); }
.step__n { color: var(--bleu-clair); }
.step:nth-child(even) .step__n { color: var(--orange-clair); }

/* Panneaux et photos */
.panel {
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(6, 143, 221, .22), transparent 60%),
    linear-gradient(160deg, var(--nuit-4) 0%, var(--nuit-2) 100%);
  border: 1px solid var(--filet-fort);
}
.panel::before { display: none; }
.panel__list .ic { background: rgba(252, 164, 39, .10); border: 1px solid rgba(252, 164, 39, .25); }
.panel__list span { color: var(--muted); }
.checklist svg { color: var(--bleu-clair); }
.shot { background-color: var(--nuit-3); background-image: linear-gradient(150deg, var(--nuit-4) 0%, #0b3552 100%); border: 1px solid var(--filet); }
.shot::after { background: linear-gradient(200deg, transparent 30%, rgba(3, 5, 9, .75) 100%); }
.shot__badge { background: rgba(5, 8, 13, .72); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--filet-fort); }
.shot__badge span { color: var(--muted); }

.agency::before { height: 2px; background: var(--grad-filet); }
.agency__dept { color: var(--bleu-clair); }
.agency__contact a:hover { color: var(--orange-clair); }
.agency__contact svg { color: var(--bleu-clair); }

/* FAQ */
.qa[open] { border-color: rgba(79, 179, 240, .45); box-shadow: var(--lueur-bleue); }
.qa summary::after { color: var(--orange); }
.qa__body { color: #a9b6c6; }

/* Bandeaux d'appel */
.cta-band, .ask {
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(6, 143, 221, .26), transparent 60%),
    radial-gradient(520px 320px at 0% 100%, rgba(252, 164, 39, .12), transparent 60%),
    linear-gradient(135deg, var(--nuit-4) 0%, var(--nuit-0) 100%);
  border: 1px solid var(--filet-fort);
}
/* Plus de rayures de chantier : un filet de lumière sur l'arête haute. */
.cta-band::before, .ask::before {
  inset: 0 0 auto 0; height: 1px;
  background: var(--grad-filet);
  opacity: .9;
}
.cta-band p, .ask__lead { color: #a9b6c6; }
.ask__note { color: var(--muted); }
.ask__seg input:checked + span { background: #f3f6fa; color: var(--navy-900); }
.ask__form input[type="text"], .ask__form input[type="tel"] { background: rgba(0, 0, 0, .35); }

/* ── Formulaires ───────────────────────────────────────────────────────── */
.tabs { background: var(--nuit-1); border: 1px solid var(--filet); }
.tab.is-active { background: var(--nuit-4); color: #fff; box-shadow: inset 0 0 0 1px var(--filet-fort); }
.field label { color: #d7dee8; }
.field label span { color: var(--orange-clair); }
.field input, .field select, .field textarea {
  background: var(--nuit-1);
  border-color: var(--filet-fort);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bleu-clair);
  box-shadow: 0 0 0 4px rgba(79, 179, 240, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #5f6d7f; }
.field select option { background: var(--nuit-3); color: var(--ink); }
.field__error { color: #ff9a92; }
.form__local { color: #d7dee8; }
.filezone { background: var(--nuit-1); border-color: var(--filet-fort); }
.filezone.is-err { background: rgba(224, 87, 79, .10); }
.filepick { background: var(--nuit-1); border-color: var(--bleu-clair); }
.filepick__x { background: rgba(255, 255, 255, .06); }
.filepick__x:hover { background: rgba(224, 87, 79, .18); color: #ff9a92; }
.form__note a, .info-list a:hover { color: var(--bleu-clair); }
.form__status.is-ok { background: rgba(6, 143, 221, .14); color: #d7ecfb; }
.form__status.is-err { background: rgba(224, 87, 79, .16); color: #ffb4ad; }
.info-list strong { color: var(--muted); }
/* « Uniquement 14 h – 18 h » puis « Du lundi au vendredi » : deux lignes, pas une. */
.info-list .insc-uniquement { display: block; }

/* ── Pages internes et mentions ────────────────────────────────────────── */
.crumb { color: var(--bleu-clair); }
.crumb a:hover { color: var(--orange-clair); }
.prose strong { color: #fff; }
.prose a { color: var(--bleu-clair); }
.todo { background: var(--orange-100); color: #ffd592; }
.prose mark { background: var(--orange-100); color: #ffd592; }

/* ── Pied de page et barre d'appel ─────────────────────────────────────── */
.ftr {
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(6, 143, 221, .10), transparent 70%),
    var(--nuit-0);
  border-top: 1px solid var(--filet);
  color: #8f9cae;
}
.ftr__bottom { border-top-color: var(--filet); }
.ftr__social a { background: rgba(255, 255, 255, .05); border: 1px solid var(--filet); }

/* Le numéro d'une agence, sous son adresse, reste dans le flux du texte. */
.ftr ul span.ftr__agence a { display: inline; min-height: 0; }

.callbar { background: var(--nuit-0); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .9); }
.callbar__mail { background: var(--nuit-4); color: #fff; }

/* ── Rappels « 14h – 18h » et signature ────────────────────────────────── */
/* L'orange foncé choisi pour un fond crème devient illisible sur la nuit :
   on passe à l'orange lumineux. */
.insc-alerte {
  background: linear-gradient(90deg, rgba(252, 164, 39, .12), rgba(252, 164, 39, .04));
  border-color: rgba(252, 164, 39, .32);
}
.insc-alerte svg, .insc-alerte strong em { color: var(--orange-clair); }
.insc-alerte strong { color: #fff; }
.insc-uniquement { color: var(--orange-clair) !important; }
.topbar__insc { background: rgba(252, 164, 39, .12); border: 1px solid rgba(252, 164, 39, .28); }

@media (max-width: 760px) {
  .pathway + .pathway { border-top-color: var(--filet); }
}
@media (max-width: 640px) {
  .callbar { background: var(--nuit-0); }
}
@media print {
  body { background: #fff; color: #000; }
  body::after { display: none; }
}