/* welia.io, feuille de style commune. Version « nuit et signal ».

   Une police variable auto-hébergée, deux couleurs qui comptent : le bleu nuit
   et le jaune signal. Le reste est neutre. Les ombres et les dégradés servent à
   donner du relief aux maquettes d'interface, jamais à décorer du texte.
   Les classes conservées de la version précédente gardent leur nom : site.js,
   la frise et les gabarits de génération s'y accrochent. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --police: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fond: #F4F6F7;
  --blanc: #FFFFFF;
  --encre: #14233A;
  --nuit: #1D3557;
  --nuit-fonce: #0E1B2F;
  --nuit-carte: #243F66;
  --couvert: #DCE3EA;
  --ferme: #8C99A7;
  --signal: #F2A900;
  --signal-doux: #FFF3CF;
  --ok: #3DD68C;
  /* Les fautes de saisie du formulaire de commande. La feuille n'en
     avait pas : rien n'affichait d'erreur avant lui. 7,0 de contraste
     sur blanc, et le texte dit toujours ce qui ne va pas — la couleur
     ne porte jamais l'information seule. */
  --alerte: #B3261E;
  --texte2: #3B4A5B;
  --texte2-nuit: #C9D3DE;
  --texte3-nuit: #AEBBC8;
  --filet: #D9E0E6;
  --filet-fort: #C5CFD8;
  --filet-nuit: rgba(255, 255, 255, 0.12);
  --bord-inactif: #9AA8B6;
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre: 0 1px 2px rgba(20, 35, 58, 0.05), 0 24px 56px -28px rgba(20, 35, 58, 0.28);
  --ombre-nuit: 0 2px 4px rgba(0, 0, 0, 0.2), 0 40px 80px -36px rgba(0, 0, 0, 0.7);
  --large: 1180px;
  --gouttiere: 32px;
}

/* ---------- socle ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; }
p, h1, h2, h3, h4, ul, ol, dl, figure { margin: 0; }
button { font-family: inherit; }
[hidden] { display: none !important; }

h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 16ch;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}
h2.h2-petit { font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h3, h4 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }

.texte { font-size: 1.1rem; line-height: 1.55; color: var(--texte2); max-width: 60ch; }
.chapeau { font-size: 1.25rem; line-height: 1.5; color: var(--texte2); max-width: 56ch; }
.second { color: var(--texte2); }
.apres-titre { margin-top: 14px; }
.apres-titre-large { margin-top: 18px; }
.sur-nuit .texte, .sur-nuit .chapeau, .sur-nuit .second,
.section-nuit .texte, .section-nuit .chapeau, .section-nuit .second,
.section-encre .texte, .heros .texte, .heros .chapeau, .heros .second { color: var(--texte2-nuit); }

.oeil {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texte2);
}
.oeil::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.section-nuit .oeil, .section-encre .oeil, .heros .oeil { color: var(--texte3-nuit); }
.pastille {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--filet-nuit);
  color: var(--texte2-nuit); font-size: 0.9rem; font-weight: 500;
}
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.18); }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saute {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 14px; background: var(--encre); color: var(--fond); border-radius: 8px;
}
.saute:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- mise en page ---------- */

.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: 104px 0; }
.section-serree { padding: 72px 0; }
.section-blanc { background: var(--blanc); }
.section-nuit { background: var(--nuit); color: var(--fond); }
.section-encre { background: var(--encre); color: var(--fond); }
.section-tete { max-width: 760px; }
.section-tete .texte, .section-tete .chapeau { margin-top: 18px; }
.section-tete-centre { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.section-tete-centre .texte, .section-tete-centre .chapeau { margin-left: auto; margin-right: auto; }
.section-tete-centre h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }

.deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 64px;
  align-items: start;
}
.deux-serre { gap: 48px; }
.deux-large { gap: 56px; }
.quatre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px;
}
.quatre > div {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 24px;
}
.section-nuit .quatre > div, .section-encre .quatre > div {
  background: rgba(255, 255, 255, 0.05); border-color: var(--filet-nuit);
}
.quatre h3, .quatre h4 {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte2);
}
.section-nuit .quatre h3, .section-nuit .quatre h4 { color: var(--texte3-nuit); }
.quatre p { margin-top: 10px; line-height: 1.55; color: var(--encre); }
.section-nuit .quatre p { color: var(--fond); }
.quatre .benefice { background: var(--signal-doux); border-color: #F3D98A; }
.quatre .benefice h3, .quatre .benefice h4 { color: #7A5400; }
.quatre .benefice p { color: var(--encre); font-weight: 600; }
.regle-haute { border-top: 0; padding-top: 0; }

/* ---------- en-tête et pied ---------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 247, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--filet);
}
.entete-nuit {
  background: rgba(14, 27, 47, 0.78); border-bottom-color: var(--filet-nuit);
}
.entete-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em;
  color: var(--encre); text-decoration: none;
}
.marque::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.2);
}
.entete-nuit .marque { color: var(--fond); }
.nav { display: flex; align-items: center; gap: 6px 28px; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.entete-nuit .nav a { color: var(--texte2-nuit); }
.nav a:hover { color: var(--encre); text-decoration: underline; }
.entete-nuit .nav a:hover { color: var(--fond); }
.nav a[aria-current="page"] { font-weight: 700; }
.entete-nuit .nav a[aria-current="page"] { color: var(--fond); }
.nav .bouton { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.nav .bouton:hover { text-decoration: none; }
.nav .bouton-appel, .entete-nuit .nav .bouton-appel { color: var(--encre); font-weight: 700; }
.entete-nuit .nav .bouton-appel:hover { color: var(--encre); background: #FFB81C; }
@media (max-width: 760px) {
  .entete-in { flex-wrap: wrap; min-height: 0; padding-top: 12px; }
  .nav { flex-basis: 100%; overflow-x: auto; scrollbar-width: none; gap: 22px; padding: 10px 0 12px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: 0.95rem; }
  .nav .bouton { display: none; }
}

/* La barre des grilles tarifaires et la barre des métiers : des liens vers de
   vraies pages, qui passent à la ligne plutôt que de défiler. */
.sous-nav { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.sous-nav-in { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.sous-nav a {
  color: var(--texte2); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 7px 14px; border-radius: 999px; border: 1px solid transparent;
}
.sous-nav a:hover { color: var(--encre); background: var(--fond); }
/* TREIZE SECTEURS NE TIENNENT PAS SUR UN TÉLÉPHONE (02/11/2026). En retour
   à la ligne, la barre prenait six lignes et deux cent cinquante pixels : le
   titre de la page commençait sous le pli. Sous 760 px elle défile donc à
   l'horizontale, sur une seule ligne — le secteur courant est amené dans le
   champ par `scroll-margin`, et la barre garde son ombre de bord pour qu'on
   voie qu'il y a autre chose à droite. */
@media (max-width: 760px) {
  .sous-nav-in {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .sous-nav-in::-webkit-scrollbar { display: none; }
  .sous-nav a { white-space: nowrap; scroll-snap-align: start; scroll-margin-left: 16px; }
}
.sous-nav a[aria-current="page"] { color: var(--fond); background: var(--encre); font-weight: 700; }
.entete-nuit + .sous-nav { background: var(--nuit-fonce); border-bottom-color: var(--filet-nuit); }
.entete-nuit + .sous-nav a { color: var(--texte2-nuit); }
.entete-nuit + .sous-nav a:hover { color: var(--fond); background: rgba(255, 255, 255, 0.08); }
.entete-nuit + .sous-nav a[aria-current="page"] { color: var(--encre); background: var(--signal); }

.pied { background: var(--nuit-fonce); color: var(--texte2-nuit); }
.pied-in { padding-top: 64px; padding-bottom: 40px; }
.pied-colonnes {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--filet-nuit);
}
@media (max-width: 900px) { .pied-colonnes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-colonnes { grid-template-columns: 1fr; } }
.pied .marque { color: var(--fond); }
.pied-colonnes p { margin-top: 14px; max-width: 34ch; line-height: 1.55; font-size: 0.95rem; }
.pied h3 { color: var(--fond); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pied ul { margin-top: 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pied a { color: var(--texte2-nuit); text-decoration: none; }
.pied a:hover { color: var(--fond); text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 0.9rem; color: var(--texte3-nuit); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 20px; }
.pied strong { color: var(--fond); }

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-size: 1.02rem; font-weight: 700; line-height: 1.2;
  color: var(--encre); background: var(--blanc);
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton svg { flex-shrink: 0; }
.bouton-appel {
  background: var(--signal); color: var(--encre); min-height: 54px; padding: 0 26px;
  box-shadow: 0 10px 30px -10px rgba(242, 169, 0, 0.7);
}
.bouton-appel:hover { background: #FFB81C; }
.bouton-encre { background: var(--encre); color: var(--fond); }
.bouton-encre:hover { background: var(--nuit); }
.bouton-clair { background: var(--fond); color: var(--encre); }
.bouton-contour { background: transparent; border-color: var(--bord-inactif); font-weight: 600; min-height: 54px; }
.bouton-contour:hover { border-color: var(--encre); }
.heros .bouton-contour, .section-nuit .bouton-contour, .section-encre .bouton-contour {
  color: var(--fond); border-color: rgba(255, 255, 255, 0.35);
}
.heros .bouton-contour:hover, .section-nuit .bouton-contour:hover { border-color: var(--fond); background: rgba(255, 255, 255, 0.06); }
.bouton-lien {
  background: transparent; border: 0; padding: 0 8px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px;
}
.bouton:disabled { cursor: default; opacity: 0.55; transform: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lien-clair { color: var(--fond); font-weight: 600; text-underline-offset: 4px; }
.lien-fleche { font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- premier écran ---------- */

.heros {
  background: var(--nuit-fonce);
  background-image: radial-gradient(1200px 600px at 85% -10%, rgba(39, 70, 111, 0.9), transparent 60%),
                    radial-gradient(800px 500px at -10% 110%, rgba(242, 169, 0, 0.12), transparent 60%);
  color: var(--fond);
  padding: 72px 0 88px;
  overflow: hidden;
}
.heros-grille {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px; align-items: center;
}
@media (max-width: 960px) { .heros-grille { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
.heros h1 { margin-top: 24px; color: var(--fond); }
.heros .chapeau { margin-top: 24px; font-size: 1.2rem; max-width: 52ch; }
.heros .demo-bloc { margin-top: 32px; }
.heros .demo-repos { gap: 12px 18px; }
/* Les autres démonstrations, sous le bouton d'appel d'une page métier. La
   barre du haut mène aux secteurs ; cette ligne répond à la question d'après,
   quand on vient d'écouter un appel et qu'on en veut un deuxième. */
.autres-demos {
  margin-top: 18px; font-size: 0.95rem; color: var(--texte2-nuit);
}
.autres-demos a { color: var(--fond); text-decoration: underline; text-underline-offset: 3px; }
.autres-demos a:hover { text-decoration-thickness: 2px; }

.garanties {
  margin-top: 28px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  font-size: 0.92rem; color: var(--texte2-nuit);
}
.garanties li { display: inline-flex; align-items: center; gap: 8px; }
.garanties li::before { content: "✓"; color: var(--signal); font-weight: 800; }
.note-urgence {
  margin-top: 28px; max-width: 60ch; padding: 14px 16px 14px 18px;
  border-left: 3px solid var(--signal); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.97rem; line-height: 1.5; color: var(--texte2-nuit);
}
.note-urgence strong { color: var(--fond); }
/* La même note sur fond clair : la page de contact dit le métier d'où vient
   le visiteur, et le texte blanc de la version nuit y serait invisible. */
.note-urgence-clair {
  margin-top: 20px; background: var(--signal-doux); color: var(--encre);
}
.note-urgence-clair strong { color: var(--encre); }
.premier { padding: 80px 0 32px; }
.premier .chapeau { margin-top: 28px; }
.premier .demo-bloc { margin-top: 36px; }
.fil { margin-bottom: 18px; font-weight: 500; color: var(--texte2); font-size: 0.95rem; }
.fil a { color: var(--texte2); }
.heros .fil, .heros .fil a { color: var(--texte3-nuit); }

/* ---------- maquette d'appel ---------- */

.appel-carte {
  position: relative;
  background: linear-gradient(180deg, #27466F 0%, #1D3557 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px; padding: 22px 22px 24px;
  box-shadow: var(--ombre-nuit);
  color: var(--fond);
}
.appel-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appel-carte-tete strong { font-size: 0.95rem; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.appel-carte-tete strong::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.18); animation: battement 2s ease-in-out infinite; }
.appel-carte-tete span { font-size: 0.85rem; color: var(--texte3-nuit); }
@keyframes battement { 0%, 100% { box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(61, 214, 140, 0.06); } }
.ondes { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin-top: 18px; }
.ondes i { display: block; width: 4px; border-radius: 2px; background: var(--signal); height: 10px; animation: onde 1.2s ease-in-out infinite; }
.ondes i:nth-child(2n) { animation-delay: 0.15s; }
.ondes i:nth-child(3n) { animation-delay: 0.3s; height: 16px; }
.ondes i:nth-child(5n) { animation-delay: 0.45s; }
.ondes i:nth-child(7n) { animation-delay: 0.6s; height: 22px; }
@keyframes onde { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1.6); } }
.appel-fil { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.appel-fil p {
  max-width: 88%; padding: 10px 14px; border-radius: 14px;
  font-size: 0.95rem; line-height: 1.45;
  opacity: 0; transform: translateY(6px); animation: apparait 0.5s ease forwards;
}
.appel-fil .agent { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 4px; }
.appel-fil .appelant { align-self: flex-end; background: var(--signal); color: var(--encre); border-bottom-right-radius: 4px; }
.appel-fil .verif { align-self: stretch; max-width: none; background: rgba(14, 27, 47, 0.55); border: 1px dashed rgba(255, 255, 255, 0.25); font-size: 0.85rem; color: var(--texte2-nuit); border-radius: 10px; }
.appel-fil .verif b { color: var(--fond); font-weight: 700; }
.appel-fil p:nth-child(1) { animation-delay: 0.3s; }
.appel-fil p:nth-child(2) { animation-delay: 1.2s; }
.appel-fil p:nth-child(3) { animation-delay: 2.2s; }
.appel-fil p:nth-child(4) { animation-delay: 3.2s; }
.appel-fil p:nth-child(5) { animation-delay: 4.2s; }
.appel-fil p:nth-child(6) { animation-delay: 5.2s; }
@keyframes apparait { to { opacity: 1; transform: none; } }
.appel-carte-pied { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet-nuit); font-size: 0.85rem; color: var(--texte3-nuit); }
@media (prefers-reduced-motion: reduce) { .appel-fil p { opacity: 1; transform: none; } .ondes i { transform: none; } }

/* ---------- démonstration vocale (hooks de site.js) ---------- */

.demo-bloc { display: flex; flex-direction: column; gap: 14px; }
.demo { display: flex; flex-direction: column; gap: 14px; }
.demo-repos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.demo-repos .second { font-size: 0.95rem; }
.demo-etat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 10px 10px 10px 20px; border-radius: 999px;
  background: var(--encre); color: var(--fond); border: 1px solid var(--filet-nuit);
}
.heros .demo-etat, .section-nuit .demo-etat { background: rgba(255, 255, 255, 0.08); }
.demo-etat .point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.2); }
.demo-etat .point-attente { background: var(--signal); box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.2); animation: battement 1.2s ease-in-out infinite; }
.demo-etat .principal { font-weight: 600; }
.demo-etat .second { color: var(--texte3-nuit); }
.demo-etat .bouton { min-height: 42px; padding: 0 18px; background: var(--fond); color: var(--encre); margin-left: auto; }
.demo-erreur {
  max-width: 62ch; padding: 14px 18px; border-radius: var(--rayon-petit);
  background: var(--blanc); border: 1px solid var(--filet-fort); line-height: 1.5; color: var(--encre);
}
.demo-erreur a { font-weight: 700; }

/* lecture d'un appel enregistré */
.ecoute {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 640px;
  padding: 18px 20px; border-radius: var(--rayon); background: var(--blanc); color: var(--encre);
  border: 1px solid var(--filet); box-shadow: var(--ombre);
}
.ecoute-ligne { display: flex; align-items: center; gap: 14px; }
.ecoute-bouton {
  width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--encre); color: var(--fond); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ecoute-bouton .si-lecture, .ecoute-bouton[data-en-lecture="true"] .si-pause { display: none; }
.ecoute-bouton[data-en-lecture="true"] .si-lecture { display: block; }
.ecoute-barre { flex-grow: 1; height: 6px; border-radius: 3px; background: var(--couvert); overflow: hidden; }
.ecoute-barre span { display: block; width: 0; height: 6px; border-radius: 3px; background: var(--signal); }
.ecoute-temps { color: var(--texte2); white-space: nowrap; }
.ecoute-texte { font-size: 1.05rem; line-height: 1.5; min-height: 1.5em; }
.ecoute-note { color: var(--texte2); font-size: 0.95rem; }

/* ---------- cartes d'atouts ---------- */

.atouts { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.atout {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 28px; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 14px;
}
.atout-icone {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--signal-doux); color: var(--encre);
  display: inline-flex; align-items: center; justify-content: center;
}
.atout h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.atout p { line-height: 1.55; color: var(--texte2); }
.atout-nuit { background: var(--nuit-carte); border-color: var(--filet-nuit); box-shadow: var(--ombre-nuit); color: var(--fond); }
.atout-nuit p { color: var(--texte2-nuit); }
.atout-nuit .atout-icone { background: rgba(242, 169, 0, 0.16); color: var(--signal); }

/* ---------- écran de validation (maquette) ---------- */

.ecran {
  margin-top: 48px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px;
  box-shadow: var(--ombre); overflow: hidden;
}
.section-nuit .ecran { border-color: var(--filet-nuit); box-shadow: var(--ombre-nuit); }
.ecran-barre {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--fond); border-bottom: 1px solid var(--filet);
}
.ecran-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--filet-fort); }
.ecran-barre span { margin-left: auto; font-size: 0.82rem; color: var(--texte2); }
.ecran-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 860px) { .ecran-corps { grid-template-columns: minmax(0, 1fr); } }
.ecran-liste { border-right: 1px solid var(--filet); }
@media (max-width: 860px) { .ecran-liste { border-right: 0; border-bottom: 1px solid var(--filet); } }
.ecran-liste h3 { padding: 16px 20px 10px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte2); }
.ecran-liste ul { list-style: none; padding: 0 12px 12px; margin: 0; display: grid; gap: 6px; }
.ecran-liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 12px 12px; border-radius: var(--rayon-petit); color: var(--encre);
}
.ecran-liste li.courant { background: var(--signal-doux); }
.ecran-liste li strong { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 0.98rem; }
.ecran-liste li span:not(.etiquette) { grid-column: 1; grid-row: 2; font-size: 0.88rem; color: var(--texte2); }
.etiquette {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  background: var(--couvert); color: var(--encre);
}
.etiquette-ok { background: #DDF5E7; color: #0E6B3A; }
.etiquette-attente { background: var(--signal-doux); color: #7A5400; }
.etiquette-transfert { background: #FBE3E0; color: #9A2E24; }
.ecran-fiche { padding: 20px 24px 24px; }
.fiche { background: var(--blanc); color: var(--encre); border-radius: var(--rayon); padding: 0; }
.fiche-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--filet); }
.fiche-tete strong { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; }
.fiche-tete span { color: var(--texte2); font-size: 0.92rem; }
.fiche dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); row-gap: 12px; column-gap: 16px; padding-top: 16px; line-height: 1.45; font-size: 0.98rem; }
.fiche dt { color: var(--texte2); }
.fiche dd { margin: 0; font-weight: 600; }
.fiche-etat { margin-top: 20px; padding: 12px 14px; border-radius: var(--rayon-petit); background: #DDF5E7; color: #0E6B3A; font-weight: 600; font-size: 0.95rem; }
.fiche-note { margin-top: 14px; color: var(--texte2-nuit); font-size: 0.95rem; }
figure.fiche-seule .fiche { padding: 26px; border: 1px solid var(--filet); box-shadow: var(--ombre); }

/* ---------- frises ---------- */

.frise-bloc { background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--ombre); }
.frise-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.frise-titre { max-width: 560px; }
.frise-titre p { margin-top: 10px; line-height: 1.5; color: var(--texte2); }
.frise-chiffre { max-width: 460px; font-size: 1.35rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.frise { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
.frise-ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.frise-jour { font-size: 0.9rem; font-weight: 500; color: var(--texte2); }
.frise-cases { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.case { height: 30px; border-radius: 4px; background: var(--nuit); display: flex; align-items: center; justify-content: center; }
.case-couvert { background: var(--couvert); }
.case-ferme { background: var(--ferme); }
.appel-pris { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--encre); }
.appel-perdu { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px var(--nuit); }
.case-couvert .appel-perdu { box-shadow: 0 0 0 2px var(--encre); }
.case-ferme .appel-perdu { box-shadow: 0 0 0 2px var(--ferme); }
.frise-heures { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; margin-top: 6px; }
.frise-heures div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 0.85rem; color: var(--texte2); }
.frise-journee .frise-cases { gap: 3px; }
.frise-journee .case { height: 40px; }
.frise-heures.frise-journee { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.legende { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 0.92rem; color: var(--texte2); }
.legende span { display: inline-flex; align-items: center; gap: 10px; }
.legende i { display: inline-block; width: 22px; height: 14px; border-radius: 4px; }
.legende .appel-pris { width: 7px; height: 7px; border-radius: 50%; box-shadow: none; }
.legende .appel-perdu { width: 10px; height: 10px; border-radius: 50%; box-shadow: none; }

/* ---------- étapes ---------- */

.etapes { margin-top: 44px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px; counter-reset: etape; }
.etape {
  display: block; position: relative;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--filet-nuit); border-radius: var(--rayon);
  padding: 24px;
}
.section-blanc .etape, .section:not(.section-nuit) .etape { background: var(--blanc); border-color: var(--filet); }
.etape-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--signal); color: var(--encre);
  font-size: 1rem; font-weight: 800; margin-bottom: 16px;
}
.etape h3 { font-size: 1.15rem; }
.etape p { margin-top: 8px; line-height: 1.55; color: var(--texte2-nuit); }
.section:not(.section-nuit) .etape p { color: var(--texte2); }

/* ---------- onglets ---------- */

.onglets { margin-top: 36px; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--couvert); }
html:not(.js) .onglets { display: none; }
.onglet {
  min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 0.98rem; cursor: pointer;
  background: transparent; color: var(--encre); border: 0; font-weight: 600;
}
.onglet[aria-selected="true"] { background: var(--encre); color: var(--fond); }
.panneau { margin-top: 24px; }
.panneau-titre { font-size: 1.3rem; margin-bottom: 20px; }
html.js .panneau-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }

/* ---------- données ---------- */

.donnees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.donnees > div { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px; }
.donnees dt { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.donnees dd { margin: 10px 0 0; line-height: 1.55; color: var(--texte2); font-size: 0.98rem; }

/* ---------- métiers ---------- */

.metiers-grille { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.metier-carte {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 24px; text-decoration: none; color: var(--encre);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.metier-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--filet-fort); }
.metier-carte .atout-icone { width: 44px; height: 44px; }
.metier-carte h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.metier-carte p { line-height: 1.5; color: var(--texte2); font-size: 0.97rem; flex-grow: 1; }
.metier-carte .lien-fleche { color: var(--encre); }
.metier-carte-phare { grid-column: 1 / -1; background: var(--nuit); color: var(--fond); border-color: var(--nuit); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.metier-carte-phare > div { flex: 1 1 360px; }
.metier-carte-phare p { color: var(--texte2-nuit); }
.metier-carte-phare .lien-fleche { color: var(--fond); }
.metier-carte-phare .atout-icone { background: rgba(242, 169, 0, 0.16); color: var(--signal); }

/* liste de l'aiguillage /metiers.html et des sections générées */
.metiers { margin-top: 40px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.metiers-grille + .metiers { margin-top: 18px; }
.metiers li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 26px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.metiers li:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--filet-fort); }
.metiers div { max-width: 60ch; }
.metiers h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.metiers p { margin-top: 8px; line-height: 1.55; color: var(--texte2); font-size: 0.97rem; }
.metiers a { font-weight: 700; text-decoration: none; color: var(--encre); }
.metiers a::after { content: " →"; }
.metiers a:hover { text-decoration: underline; }
.metiers .prix-ligne { margin-top: 10px; color: var(--encre); font-weight: 700; }

/* ---------- ce que ça change ---------- */

.publics { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.public { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 26px; }
.public h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte2); }
.public-titre { margin-top: 12px; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; }
.public p:last-child { margin-top: 12px; line-height: 1.55; color: var(--texte2); }

/* ---------- garde-fous ---------- */

.gardes { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.garde { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); padding: 26px; }
.garde h3 { font-size: 1.2rem; letter-spacing: -0.02em; color: var(--fond); display: flex; align-items: center; gap: 10px; }
.garde h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }
.garde p { margin-top: 10px; line-height: 1.55; color: var(--texte2-nuit); }

/* ---------- bandeau prix et appel final ---------- */

.bandeau-in {
  padding-top: 80px; padding-bottom: 80px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px; align-items: center;
}
.bandeau-ligne { padding-top: 72px; padding-bottom: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.bandeau-ligne > div { max-width: 640px; }
.prix-bandeau { font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.prix-bandeau-petit { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.bandeau .sous { margin-top: 12px; font-size: 1.15rem; color: var(--texte2-nuit); }
.bandeau .texte { color: var(--texte2-nuit); max-width: 52ch; }
.bandeau .bouton { margin-top: 22px; }
.bandeau-ligne .bouton { margin-top: 0; }
.bandeau-signal { background: var(--signal); color: var(--encre); }
.bandeau-signal .texte, .bandeau-signal .sous { color: #5B3F00; }

/* ---------- contact ---------- */

.contact-accueil {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--ombre);
}
.contact-accueil > div { flex: 1 1 420px; }
.contact-accueil > .portrait, .contact-accueil > .portrait-attente { flex: 0 0 168px; }
.contact-accueil .texte { margin-top: 14px; max-width: 56ch; }
.contact-accueil .actions { margin-top: 24px; }
.portrait, .portrait-attente {
  width: 168px; height: 168px; flex-shrink: 0; border-radius: 50%; background: var(--couvert); object-fit: cover;
  box-shadow: 0 0 0 6px var(--signal-doux);
}
.portrait-attente { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--texte2); font-size: 0.9rem; padding: 12px; }
.portrait-petit { width: 96px; height: 96px; font-size: 0.8rem; box-shadow: 0 0 0 4px var(--signal-doux); }

.contact-grille {
  padding-top: 80px; padding-bottom: 104px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 64px; align-items: start;
}
.personne { display: flex; align-items: center; gap: 20px; }
.personne strong { display: block; font-size: 1.1rem; font-weight: 700; }
.personne span { color: var(--texte2); }
.contact-grille h1 { margin-top: 36px; max-width: 16ch; font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1.04; }
.contact-grille .chapeau { margin-top: 22px; font-size: 1.15rem; line-height: 1.55; max-width: 52ch; }
.coordonnees { margin-top: 28px; line-height: 1.55; color: var(--texte2); }
.coordonnees a { color: var(--encre); font-weight: 700; }
.coordonnees p + p { margin-top: 8px; }

.assistant {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; padding: 32px;
  box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 20px;
}
.assistant h2 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 800; }
.assistant .choix { display: flex; flex-wrap: wrap; gap: 12px; }
.assistant .confidentialite { font-size: 0.95rem; line-height: 1.55; color: var(--texte2); }
.assistant .demo-etat .bouton { margin-left: auto; }
.fil-messages { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow: auto; }
.message { font-size: 1.05rem; line-height: 1.55; }
.message strong { font-weight: 700; }
.assistant label { font-weight: 500; }
.assistant textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--bord-inactif); border-radius: var(--rayon-petit);
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--encre); background: var(--blanc); resize: vertical;
}
.assistant .envoi { display: flex; flex-wrap: wrap; gap: 12px; }
.assistant .bouton-lien { min-height: 48px; }
.zone-texte { display: flex; flex-direction: column; gap: 12px; }

/* ---------- tarifs ---------- */

.forfait-tete { padding: 72px 0 40px; }
.forfait-tete h1 { max-width: 16ch; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.03; }
.forfait-tete .chapeau { margin-top: 24px; font-size: 1.2rem; }
.forfaits { padding-bottom: 80px; }
.forfait { background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; padding: clamp(24px, 3vw, 36px); box-shadow: var(--ombre); }
.forfait h2 { font-size: 0.85rem; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--texte2); }
.prix-grand { margin-top: 12px; font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: 1; letter-spacing: -0.045em; font-weight: 800; }
.prix-grand small, .total small { font-size: 1.15rem; letter-spacing: 0; font-weight: 500; color: var(--texte2); }
.forfait .inclus { margin-top: 14px; font-size: 1.1rem; line-height: 1.5; }
.promesses { margin-top: 24px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; color: var(--texte2); }
.promesses li { display: flex; gap: 8px; }
.promesses li::before { content: "✓"; color: var(--signal); font-weight: 800; }
.forfait .renvoi { margin-top: 24px; line-height: 1.55; color: var(--texte2); }

.panneau-blanc { background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; padding: clamp(24px, 3vw, 32px); box-shadow: var(--ombre); }
.panneau-blanc h2 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 800; }
.prereglages { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.prereglage {
  min-width: 64px; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 0.98rem; cursor: pointer;
  background: var(--fond); color: var(--encre); border: 1.5px solid transparent; font-weight: 600;
}
.prereglage:hover { border-color: var(--bord-inactif); }
.prereglage[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.champ { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.champ label { font-weight: 500; }
.champ input {
  width: 130px; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--bord-inactif); border-radius: var(--rayon-petit);
  font: inherit; font-size: 1.15rem; font-weight: 600; color: var(--encre); background: var(--fond);
}
.total { margin-top: 28px; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.total small { font-size: 1.1rem; }
.detail { margin-top: 12px; line-height: 1.5; color: var(--texte2); }
.estimation { margin-top: 18px; font-size: 0.92rem; line-height: 1.5; color: var(--texte2); }
html:not(.js) .simulateur-js { display: none; }
html.js .simulateur-sans-js { display: none; }

.tranches { width: 100%; border-collapse: collapse; font-size: 1.02rem; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.tranches th { text-align: left; padding: 12px 18px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte2); background: var(--fond); border-bottom: 1px solid var(--filet); }
.tranches td { padding: 13px 18px; border-bottom: 1px solid var(--filet); }
.tranches th:last-child, .tranches td:last-child { text-align: right; font-weight: 700; }
.tranches tr:last-child td { border-bottom: 0; }
/* Ce que comprend une formule, sous son nom : la ligne reste lisible d'un
   coup d'oeil, et le detail ne se lit que si on le cherche. */
.tranches td small { display: block; margin-top: 3px; font-size: 0.86rem; font-weight: 400; color: var(--texte2); }
.tranches-titre { margin-top: 48px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 800; }
.tranches-titre + p { margin-top: 8px; color: var(--texte2); line-height: 1.55; max-width: 60ch; }
.tranches-titre + p + .tranches { margin-top: 20px; }
.tranches-note { margin-top: 14px; max-width: 60ch; line-height: 1.55; color: var(--texte2); }
.deux-forfaits { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.forfait-carte { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }
.forfait-carte h3 { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte2); }
.forfait-carte .prix-moyen { font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; margin-top: 10px; }
.forfait-carte .prix-moyen small { font-size: 1.05rem; letter-spacing: 0; font-weight: 500; color: var(--texte2); }
.forfait-carte p { margin-top: 10px; line-height: 1.5; color: var(--texte2); }

/* ---------- les cinq formules ----------
   De la plus chere a la moins chere : une grille qui monte fait lire le prix
   d'appel en premier et l'offre complete en dernier, quand le lecteur a deja
   decroche. La premiere carte occupe toute la largeur sur les grands ecrans,
   parce que c'est celle qu'on veut faire lire ; les quatre autres se rangent
   dessous. Le nom est ecrit en toutes lettres et non en petites capitales :
   « Agent d'accueil telephonique seul » doit se lire, pas se dechiffrer. */
/* LES COLONNES SONT FIXEES PAR PALIERS, PAS LAISSEES A auto-fit. Avec
   auto-fit la grille tombait a trois colonnes vers 1200 px : la carte en
   avant prenait toute la largeur, trois cartes suivaient, et la cinquieme
   restait SEULE sur une ligne avec deux trous a cote. Quatre formules sous
   la grande, c'est 2 + 2 ou 4 d'un coup, jamais 3 + 1. */
.offres {
  margin-top: 28px; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .offres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.offre {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre);
}
.offre h3 {
  margin-top: 8px; font-size: 1.05rem; line-height: 1.35;
  letter-spacing: -0.01em; font-weight: 700; text-transform: none;
  max-width: 26ch;
}
.offre-prix {
  margin-top: 14px; font-size: clamp(2.1rem, 3.4vw, 2.7rem); line-height: 1;
  letter-spacing: -0.04em; font-weight: 800;
}
.offre-prix small { font-size: 1rem; letter-spacing: 0; font-weight: 500; color: var(--texte2); }
.offre-inclus {
  margin-top: 18px; padding: 0; list-style: none; display: grid; gap: 9px;
  font-size: 0.95rem; line-height: 1.45; color: var(--texte2);
}
.offre-inclus li { display: flex; gap: 9px; }
.offre-inclus li::before { content: "✓"; color: var(--signal); font-weight: 800; }
/* Le TTC sous le HT, et pas a la place : le professionnel deduit la TVA et
   raisonne en HT, le particulier paie le TTC. Discret, parce que c'est une
   precision, pas le prix d'appel. */
.offre-ttc { margin-top: 4px; font-size: 0.92rem; color: var(--texte2); }
.offre-ttc-nuit { color: var(--texte2-nuit); margin-top: 6px; }
.offre-marque {
  align-self: start; padding: 5px 12px; border-radius: 999px;
  background: var(--signal); color: var(--encre);
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
/* La plus complete : fond sombre, et toute la largeur des le premier palier
   ou la grille tient deux colonnes. */
.offre-phare {
  background: var(--nuit); border-color: transparent; color: var(--fond);
  box-shadow: var(--ombre-nuit);
}
.offre-phare h3 { color: var(--fond); }
.offre-phare .offre-prix { color: var(--fond); }
.offre-phare .offre-prix small,
.offre-phare .offre-inclus { color: var(--texte2-nuit); }
@media (min-width: 620px) { .offre-phare { grid-column: 1 / -1; } }
@media (min-width: 620px) {
  .offre-phare .offre-inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.liste-filets {
  margin-top: 32px; padding: 0; list-style: none; line-height: 1.5;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 40px;
}
.liste-filets li { padding: 12px 0 12px 22px; border-top: 1px solid var(--filet); position: relative; }
.liste-filets li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.section-nuit .liste-filets li { border-top-color: var(--filet-nuit); }

.questions { display: grid; gap: 10px; }
.questions details { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 0 22px; }
.section-nuit .questions details { background: rgba(255, 255, 255, 0.05); border-color: var(--filet-nuit); }
.questions summary {
  list-style: none; cursor: pointer; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; font-size: 1.08rem; font-weight: 700; line-height: 1.35;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 4px;
}
.questions details[open] summary::after { transform: rotate(-135deg); }
.questions details p { margin: 0 0 20px; max-width: 62ch; line-height: 1.6; color: var(--texte2); }
.section-nuit .questions details p { color: var(--texte2-nuit); }
.questions details p + p { margin-top: -8px; }

/* ---------- pages métier ---------- */

.niveaux { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.niveau { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); padding: 24px; border-top: 4px solid var(--signal); }
.niveau-2 { border-top-color: var(--texte2-nuit); }
.niveau-3 { border-top-color: #5C6F86; }
.niveau h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.niveau p { margin-top: 8px; max-width: 62ch; line-height: 1.55; color: var(--texte2-nuit); }
.niveaux-note { margin-top: 28px; padding: 16px 18px; border-radius: var(--rayon-petit); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--filet-nuit); }

/* ---------- pages de texte (mentions, partenaires) ---------- */

.prose { max-width: 66ch; }
.prose h1 { max-width: 20ch; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.prose h2 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.015em; margin-top: 44px; }
.prose h3 { font-size: 1.1rem; margin-top: 24px; }
.prose p, .prose li { margin-top: 12px; line-height: 1.6; color: var(--texte2); }
.prose p strong, .prose li strong { color: var(--encre); }
.prose ul { padding-left: 20px; }
.prose dl { margin-top: 12px; display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); column-gap: 24px; line-height: 1.55; }
.prose dt { padding: 10px 0; border-top: 1px solid var(--filet); font-weight: 700; }
.prose dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--filet); color: var(--texte2); }
.prose dt:last-of-type, .prose dd:last-of-type { border-bottom: 1px solid var(--filet); }
.a-completer { background: var(--signal-doux); padding: 1px 6px; border-radius: 3px; font-weight: 500; }

/* ---------- partenaires ---------- */

.formules { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.formule { background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; padding: clamp(24px, 3vw, 32px); box-shadow: var(--ombre); }
.formule-phare { border: 2px solid var(--signal); }
.formule h3 { font-size: 1.4rem; letter-spacing: -0.025em; }
.formule .second { margin-top: 6px; }
.formule .liste-filets { margin-top: 18px; display: block; }
.chiffres { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.chiffre { border-top: 3px solid var(--signal); padding-top: 16px; }
.chiffre strong { display: block; font-size: 1.8rem; letter-spacing: -0.03em; font-weight: 800; line-height: 1.1; }
.chiffre p { margin-top: 8px; line-height: 1.5; color: var(--texte2); }

/* ---------- écrans étroits ---------- */

@media (max-width: 720px) {
  :root { --gouttiere: 20px; }
  .section { padding: 72px 0; }
  .section-serree, .bandeau-in, .bandeau-ligne { padding-top: 56px; padding-bottom: 56px; }
  .heros { padding: 48px 0 64px; }
  .premier { padding-top: 48px; }
  .deux, .deux-large { gap: 40px; }
  .contact-grille { padding: 48px 0 72px; gap: 40px; }
  .forfait-tete { padding: 48px 0 32px; }
  .fiche dl { grid-template-columns: 110px minmax(0, 1fr); }
  .prose dl { grid-template-columns: minmax(0, 1fr); }
  .prose dd { border-top: 0; padding-top: 0; }
  .prose dt:last-of-type { border-bottom: 0; }
  .appel-carte { padding: 18px; }
}

@media (max-width: 600px) {
  :root { --gouttiere: 16px; }
  .frise-ligne, .frise-heures { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
  .frise-heures.frise-journee { grid-template-columns: minmax(0, 1fr); }
  .frise-cases { gap: 1px; }
  .case { height: 22px; border-radius: 2px; }
  .frise-journee .case { height: 32px; }
  .frise-jour { font-size: 0.8rem; }
  .appel-pris { width: 5px; height: 5px; }
  .appel-perdu { width: 7px; height: 7px; box-shadow: 0 0 0 1.5px var(--nuit); }
  .case-couvert .appel-perdu { box-shadow: 0 0 0 1.5px var(--encre); }
  .legende .appel-pris { width: 7px; height: 7px; }
  .legende .appel-perdu { width: 10px; height: 10px; }
  .frise-chiffre { font-size: 1.2rem; }
  .demo-etat { padding: 12px 14px; border-radius: var(--rayon); }
  .demo-etat .bouton, .assistant .demo-etat .bouton { margin-left: 0; }
  .panneau-blanc, .assistant { padding: 20px; }
  .promesses { grid-template-columns: minmax(0, 1fr); }
  .champ input { width: 110px; }
  .onglets { display: flex; border-radius: var(--rayon); }
  .onglet { flex: 1 1 auto; }
}

/* ---------- premier écran court (pages métier, tarifs, aiguillages) ---------- */
.heros-court { padding: 56px 0 64px; }
.heros-court h1 { margin-top: 22px; }
.heros-court .chapeau { max-width: 60ch; }
.heros-court .fil { margin-bottom: 4px; }
.heros-court .fil + .pastille { margin-top: 14px; }
.heros .pastille + h1, .heros .fil + h1 { margin-top: 22px; }

/* ---------- Premier écran : la fabrique et le choix du métier ----------

   Trois blocs dans une seule grille : le titre et le champ d'adresse en
   pleine largeur, puis la grille des secteurs à gauche et la carte d'appel à
   droite. Sous 960 px, tout se met en colonne.                             */

.heros-fabrique {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 8px 48px; align-items: start;
}
.heros-fabrique > h1, .heros-fabrique > .site-form { grid-column: 1 / -1; }
/* LE PREMIER ÉCRAN N'A PAS DE CHAPEAU, et c'est voulu : avec, la grille des
   secteurs commençait à 727 pixels — sous la ligne de flottaison d'un écran
   de portable. Ce que la page a à dire au visiteur, c'est « donnez l'adresse
   de votre site », et la phrase est dans le bloc lui-même. */
.heros-fabrique > h1 { max-width: 26ch; margin-top: 0; }
@media (max-width: 960px) { .heros-fabrique { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.site-form {
  margin: 28px 0 20px; padding: 22px 24px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--filet-nuit);
  display: grid; gap: 14px;
}
.site-titre {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.25; max-width: 44ch; color: var(--fond);
}
.site-champ {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 20px; border-radius: 999px;
  background: var(--fond); border: 2px solid transparent;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}
.site-champ:focus-within { border-color: var(--signal); }
.site-champ input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 1.05rem; color: var(--encre); outline: none;
}
.site-champ input::placeholder { color: #7A8794; }
.site-champ button {
  flex-shrink: 0; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--signal); color: var(--encre); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.site-champ button:hover { background: #FFB81C; }
.site-champ button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.site-form.en-cours .site-champ { opacity: 0.5; pointer-events: none; }
.site-form.en-cours .site-titre { color: var(--signal); }
.site-retour {
  font-size: 0.95rem; color: var(--fond); padding: 10px 14px;
  border-radius: var(--rayon-petit);
  background: rgba(61, 214, 140, 0.14); border: 1px solid rgba(61, 214, 140, 0.35);
}
.site-retour.raté {
  background: rgba(242, 169, 0, 0.14); border-color: rgba(242, 169, 0, 0.45);
}

.fiche-live { display: none; padding-top: 14px; border-top: 1px solid var(--filet-nuit); }
.fiche-live.visible { display: block; }
.fiche-live h3 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texte3-nuit);
}
.fiche-live dl {
  margin: 10px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px 24px; font-size: 0.95rem;
}
.fiche-live dt { color: var(--texte3-nuit); font-size: 0.82rem; }
.fiche-live dd { margin: 2px 0 0; color: var(--fond); min-height: 1.4em; }
.fiche-live dd.attente { color: var(--texte3-nuit); font-style: italic; }
.fiche-live dd.vide { color: var(--texte3-nuit); }

/* La grille des secteurs. Chaque tuile est un <details name="secteur"> : le
   navigateur n'en ouvre qu'un à la fois, sans JavaScript. `:has` fait que la
   tuile ouverte prend toute la largeur. */
.selecteur-titre {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texte3-nuit); margin-bottom: 12px;
}
.verticales {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.verticales > li { display: flex; flex-direction: column; min-width: 0; }
.verticales > li:has(details[open]) { grid-column: 1 / -1; }
.verticales details { display: flex; flex-direction: column; height: 100%; }
.verticale {
  display: flex; align-items: center; gap: 10px; min-height: 64px; height: 100%;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; list-style: none;
  border: 1px solid var(--filet-nuit); background: rgba(255, 255, 255, 0.05);
  color: var(--texte2-nuit); font-size: 0.95rem; font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.verticale::-webkit-details-marker { display: none; }
.verticale svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--texte3-nuit); }
.verticale span { min-width: 0; }
.verticale em {
  display: block; font-style: normal; font-size: 0.72rem; font-weight: 500;
  color: var(--texte3-nuit); margin-top: 2px;
}
.verticale em.en-ligne::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: 5px; vertical-align: middle;
}
.verticale:hover { color: var(--fond); border-color: rgba(255, 255, 255, 0.4); }
.verticale:focus-visible { outline: 3px solid var(--fond); outline-offset: 2px; }
details[open] > .verticale {
  background: var(--signal); border-color: var(--signal); color: var(--encre);
  border-radius: 12px 12px 0 0; border-bottom: 0; min-height: 56px;
}
details[open] > .verticale svg, details[open] > .verticale em { color: #5B3F00; }
details[open] > .verticale em.en-ligne::before { background: #0E6B3A; }
details[open] > .verticale::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-135deg); opacity: 0.7;
}
.detail {
  padding: 14px 14px 16px; border: 1px solid var(--signal); border-top: 0;
  border-radius: 0 0 12px 12px; background: rgba(242, 169, 0, 0.08);
}

.pastilles { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles li { display: flex; min-width: 0; }
.pastille-metier {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
  padding: 0 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22); background: transparent;
  color: var(--texte2-nuit); font-size: 0.95rem; font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pastille-metier svg { width: 18px; height: 18px; flex-shrink: 0; }
.pastille-metier:hover { border-color: var(--fond); color: var(--fond); }
.pastille-metier[aria-current="true"] {
  background: var(--fond); color: var(--encre); border-color: var(--fond);
}
.pastille-metier:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.pastille-sans { border-style: dashed; color: var(--texte3-nuit); }
.pastille-sans small {
  margin-left: 4px; font-weight: 500; font-size: 0.78em; opacity: 0.85; white-space: nowrap;
}

.appel-secteur {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.appel-secteur .demo-repos { gap: 12px 16px; }
.appel-secteur .second { font-size: 0.93rem; color: var(--texte2-nuit); max-width: 46ch; }
.ecoute-appel { margin-top: 20px; }

/* La carte de droite pendant la préparation, puis quand l'agent est prêt. */
.etapes-fabrique { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.etapes-fabrique li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px;
  align-items: center; color: var(--texte3-nuit); font-size: 0.95rem;
}
.etapes-fabrique li i {
  width: 22px; height: 22px; border-radius: 50%; font-style: normal;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800;
}
.etapes-fabrique li.cours { color: var(--fond); }
.etapes-fabrique li.cours i {
  border-color: var(--signal); border-top-color: transparent;
  animation: tourne 0.8s linear infinite;
}
.etapes-fabrique li.fait { color: var(--fond); }
.etapes-fabrique li.fait i { background: var(--ok); border-color: var(--ok); color: var(--nuit-fonce); }
.etapes-fabrique li.fait i::before { content: "✓"; }
.etapes-fabrique li small { grid-column: 2; font-size: 0.85rem; color: var(--texte3-nuit); }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .etapes-fabrique li.cours i { animation: none; } }

.agent-premier {
  margin-top: 18px; padding: 12px 14px; border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, 0.08); color: var(--fond);
  font-size: 0.97rem; line-height: 1.5;
}
.conserver, .completer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet-nuit); }
.conserver h3, .completer h3 { font-size: 1rem; color: var(--fond); }
.conserver p, .completer p { margin-top: 4px; font-size: 0.88rem; color: var(--texte3-nuit); }
.conserver .champs, .completer .champs { margin-top: 14px; display: grid; gap: 10px; }
.conserver input, .completer input {
  width: 100%; min-width: 0; min-height: 54px; padding: 14px 16px;
  border-radius: var(--rayon-petit);
  border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(14, 27, 47, 0.5);
  /* 1.02rem = 16,3 px : sous 16 px, iOS zoome la page a la prise de focus et
     le visiteur se retrouve a defiler lateralement pour voir son bouton. */
  color: var(--fond); font: inherit; font-size: 1.02rem;
}
.conserver input::placeholder, .completer input::placeholder { color: var(--texte3-nuit); }
.conserver input:focus, .completer input:focus { outline: 2px solid var(--signal); border-color: transparent; }
/* Le bouton est un engagement, pas un troisieme champ : l'ecart au-dessus de
   lui est plus grand que celui entre les deux champs, pour qu'on ne le
   remplisse pas des yeux comme la suite du formulaire. */
.conserver .champs .bouton-clair, .completer .bouton-clair {
  margin-top: 8px; min-height: 54px;
  background: var(--fond); color: var(--encre); box-shadow: none;
}
/* Le bouton de « compléter » est HORS de la grille des champs, parce que le
   bloc redessine ses champs à chaque passage et que le bouton, lui, survit.
   Il perdait donc l'étirement que la grille donne à son voisin « Garder mon
   agent » : deux boutons de largeurs différentes, l'un sous l'autre. */
.completer .bouton-clair { width: 100%; }
.conserver-retour { margin-top: 10px; font-size: 0.9rem; color: var(--fond); }

/* ---------- l'espace client (service welia-espace) ----------
   Ses pages prennent cette feuille et ses classes. Elles n'ont AUCUN
   attribut style= : leur politique de securite interdit le style en ligne,
   et l'autoriser pour s'epargner ces huit regles rouvrirait la porte que
   cette politique ferme. */
.espace-etroit { max-width: 34rem; }
.espace-large { max-width: 52rem; }
.espace-form { border-top: 0; padding-top: 0; }
.espace-apres { margin-top: 20px; }
.espace-apres-large { margin-top: 32px; }
.espace-carte { margin-top: 28px; }
.espace-blocs { margin-top: 22px; }
.espace-suite { margin-top: 40px; padding: 24px; border-radius: var(--rayon); }
.espace-bouton { margin-top: 18px; }

/* CE QUE L'AGENT REFUSE NE SE COCHE PAS EN VERT. Ces listes heritent de
   .promesses pour la mise en page, et .promesses pose une coche verte : une
   interdiction cochee en vert se lit comme une promesse tenue, et c'est
   exactement la liste que le client relit pour se rassurer. Une barre, dans
   la couleur des textes secondaires, et une seule colonne parce que ces
   lignes sont des phrases et non des etiquettes. */
.espace-interdits { grid-template-columns: minmax(0, 1fr); }
.espace-interdits li::before { content: "—"; color: var(--texte2); font-weight: 700; }

/* Le code a coller sur le site du client. UN SEUL BLOC, QU'ON SELECTIONNE
   D'UN COUP : pas de bouton « copier », qui demanderait du JavaScript que la
   politique de securite de l'espace interdit. `white-space: pre-wrap` garde
   les deux lignes separees mais laisse l'adresse se replier sur un telephone
   plutot que d'imposer un defilement horizontal. `user-select: all` fait
   prendre le bloc entier au premier clic. */
.code-a-coller {
  margin: 18px 0 8px; padding: 18px 20px; max-width: 46rem;
  background: var(--encre); color: var(--blanc);
  border-radius: var(--rayon); overflow-x: auto;
  white-space: pre-wrap; word-break: break-all;
  font-size: 0.86rem; line-height: 1.7; user-select: all;
}
.code-a-coller code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- la commande ---------- */
.commande { margin-top: 32px; max-width: 42rem; }
.commande-titre { margin-top: 40px; font-size: 1.15rem; letter-spacing: -0.01em; }
.commande-titre:first-of-type { margin-top: 0; }

.champ-bloc { margin-top: 18px; display: grid; gap: 6px; }
.champ-bloc label { font-weight: 600; font-size: 0.95rem; }
.champ-bloc input {
  width: 100%; min-width: 0; min-height: 54px; padding: 14px 16px;
  border-radius: var(--rayon-petit); border: 1.5px solid var(--filet);
  background: var(--blanc); color: var(--encre);
  /* 1.02rem = 16,3 px : sous 16 px, iOS zoome a la prise de focus et ne
     dezoome pas. Meme raison que le formulaire de conservation. */
  font: inherit; font-size: 1.02rem;
}
.champ-bloc input:focus { outline: 2px solid var(--signal); border-color: transparent; }
.champ-aide { font-size: 0.88rem; color: var(--texte2); line-height: 1.45; }
/* LA FAUTE EST SOUS SON CHAMP, pas en haut de page : un formulaire de dix
   champs avec trois erreurs en en-tete fait tout relire pour trouver
   lesquelles. Et elle n'est pas signalee par la seule couleur — le texte
   dit ce qui ne va pas, pour qui ne distingue pas le rouge. */
.champ-faute { font-size: 0.9rem; line-height: 1.45; font-weight: 600; color: var(--alerte); }
.champ-bloc input[aria-invalid="true"] { border-color: var(--alerte); }

/* Entreprise ou personne. Deux lignes, pas deux cartes : ce n'est pas un
   choix qu'on compare, c'est un etat qu'on declare. */
.choix-types { margin-top: 14px; display: grid; gap: 10px; }
.choix-type { display: flex; gap: 12px; align-items: center; cursor: pointer; line-height: 1.4; }
.choix-type input { width: 20px; height: 20px; flex: none; accent-color: var(--signal); }
.choix-type:focus-within { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 6px; }

.choix-formules { margin-top: 18px; display: grid; gap: 12px; }
.choix-formule {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  padding: 18px; border: 1.5px solid var(--filet); border-radius: var(--rayon);
  background: var(--blanc);
}
.choix-formule:focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }
.choix-formule:has(input:checked) { border-color: var(--signal); border-width: 2px; padding: 17px; }
.choix-formule input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--signal); }
.choix-corps { display: grid; gap: 4px; }
.choix-nom { font-weight: 700; line-height: 1.35; }
.choix-prix { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.choix-prix small { font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--texte2); }
.choix-resume { font-size: 0.93rem; line-height: 1.45; color: var(--texte2); }

.recap { margin-top: 28px; padding: 0; display: grid; gap: 0; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; background: var(--blanc); }
.recap-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 18px; border-bottom: 1px solid var(--filet); }
.recap-ligne:last-child { border-bottom: 0; }
.recap-ligne dt { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte2); font-weight: 700; }
.recap-ligne dd { margin: 0; line-height: 1.5; }
@media (min-width: 620px) {
  .recap-ligne { grid-template-columns: 13rem minmax(0, 1fr); gap: 18px; align-items: baseline; }
}
.recap-conditions { margin-top: 32px; padding: 20px 22px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--filet); }
.recap-conditions h2 { font-size: 1.05rem; }
.recap-conditions .promesses { margin-top: 14px; }

@media (max-width: 760px) {
  .verticales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-form { padding: 18px 16px; }
  .site-titre { font-size: 1.05rem; }
}

/* La ligne qui dit COMMENT l'agent est branché dans ce cas-là : hors
   horaires, seulement sur occupation, ou 24 h/24. C'est la question que pose
   tout le monde avant « combien ça coûte ». */
.branchement {
  margin-top: 18px; display: inline-flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 10px; padding: 8px 14px; border-radius: 999px;
  background: var(--signal-doux); color: var(--encre); font-size: 0.93rem;
}
.branchement span {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8A6400;
}
.panneau .quatre { margin-top: 20px; }


/* La rangée d'onglets de l'écran de validation vit dans une section sombre :
   la pastille claire des cas d'usage y ferait une tache. */
.section-nuit .onglets, .onglets-discrets {
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--filet-nuit);
}
.section-nuit .onglet, .onglets-discrets .onglet { color: var(--texte2-nuit); }
.section-nuit .onglet:hover, .onglets-discrets .onglet:hover { color: var(--fond); }
.section-nuit .onglet[aria-selected="true"], .onglets-discrets .onglet[aria-selected="true"] {
  background: var(--signal); color: var(--encre);
}
.onglets-discrets { margin-top: 28px; }
.onglets-discrets + .panneau, .onglets-discrets ~ .panneau { margin-top: 18px; }

/* Les métiers rangés par secteur, comme la grille du premier écran. */
.secteur-bloc { margin-top: 40px; }
.secteur-bloc + .secteur-bloc { margin-top: 36px; }
.secteur-titre {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texte2);
}
.secteur-titre svg { width: 20px; height: 20px; color: var(--signal); }
.secteur-bloc .metiers { margin-top: 16px; }
.secteur-bloc .metiers h4 { font-size: 1.2rem; letter-spacing: -0.02em; }
.secteur-bloc .metiers p { margin-top: 8px; line-height: 1.55; color: var(--texte2); font-size: 0.97rem; }
.secteur-reste { margin-top: 36px; max-width: 70ch; }
.site-retour a { color: var(--fond); font-weight: 700; text-underline-offset: 3px; }

/* L'agent du visiteur, sous sa fiche : c'est là qu'il regarde, et sur un
   téléphone la carte de droite est à deux écrans de distance. */
.agent-neuf {
  margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--filet-nuit);
}
.agent-neuf-tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 14px;
}
.agent-neuf-tete strong { font-size: 1.05rem; color: var(--fond); }
.agent-neuf-tete span { font-size: 0.85rem; color: var(--texte3-nuit); }
.agent-neuf .appel-secteur { border-top-color: var(--filet-nuit); }
.agent-neuf .agent-premier { margin-top: 14px; }