/* © 2026 DRAK Infinity (NEQ 2281240509), Montréal (Québec), Canada. Tous droits réservés.
   Composants des pages générées de la V3 (mission 18, lots B2 et B3) : page « Serveur maison (home lab) », formulaire, documents,
   conditions légales, page 404, encart Gumroad, notes de chaque outil, vignette « Facturier monde ».
   Chargé après /site.css par outils/construire-site.mjs. Aucune couleur écrite en dur hors des pictogrammes : tout passe par les variables de /site.css
   (le thème clair de l'accueil les redéfinit), pour que le contraste reste mesurable par outils/tester-contraste.mjs. */

.hl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Héros ── */
.hl-heros .hl-places{margin-top:18px;color:var(--gold2);font-size:16px}
.hl-heros .hl-places strong{font-weight:600}
.hl-heros-fig{margin:0}
.hl-heros-fig picture{display:block}
.hl-legende{margin:10px 2px 0;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
@media (max-width:720px){.hl-heros-fig{order:-1;max-width:260px;margin:0 auto}.hl-heros-fig .heros-mascotte{order:0;max-width:none;margin:0}}

/* ── Cartes, icônes, formats ── */
.hl-carte .corps{padding:24px 24px 26px}
.hl-icone{display:block;width:48px;height:48px;margin:0 0 14px;border-radius:12px;border:1px solid var(--line)}
.hl-carte h3 .etiquette{margin:0 0 0 8px;vertical-align:middle;font-size:11px}
.hl-carte .etiquette{margin-bottom:12px}
.hl-format-corps .hl-format{display:block;width:100%;max-width:260px;height:auto;margin:0 0 14px;border-radius:14px;border:1px solid var(--line)}
.hl-refrain{margin-top:30px;max-width:62ch;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,26px);line-height:1.3;color:var(--gold2)}
.hl-sous-titre{margin:44px 0 16px;font-size:clamp(24px,3vw,30px)}
.hl-exclus{margin-top:26px;max-width:72ch;padding:16px 20px;background:var(--verre);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;color:var(--ink);font-size:16px}

/* ── Listes et colonnes ── */
.hl-deux-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,56px)}
@media (max-width:720px){.hl-deux-col{grid-template-columns:1fr}}
.hl-liste{list-style:none;margin:10px 0 0;padding:0}
.hl-liste li{position:relative;margin:0 0 12px;padding-left:22px;color:var(--ink);font-size:16.5px}
.hl-liste li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold2)}
.hl-honnete{margin-top:20px;max-width:62ch;padding:14px 18px;background:var(--verre);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;color:var(--ink);font-size:16px}
.hl-poste li strong{color:var(--gold2);font-weight:600}
.hl-hors-canada{margin:6px 0 22px;max-width:70ch;padding:14px 18px;background:var(--verre);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;color:var(--ink);font-size:16px}
.hl-pour-qui{margin:12px 0 0}
.hl-pour-qui li{white-space:normal}
.hl-pour-qui .hl-bientot{background:transparent;border:1px dashed var(--muted);color:var(--muted);cursor:default}
.hl-pour-qui .hl-bientot span{margin-left:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ── Photos ── */
.hl-galerie{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px;padding:0}
.hl-galerie li{flex:var(--r) 1 0;min-width:140px}
.hl-galerie figure{margin:0}
.hl-galerie-img{position:relative;aspect-ratio:var(--r);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.hl-galerie picture,.hl-galerie img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl-galerie .hl-legende{margin:8px 2px 0;text-align:left}
.hl-legende-bati{display:block;margin-top:6px}
@media (max-width:720px){.hl-galerie li{flex:1 1 100%}.hl-galerie li.hl-portrait{max-width:280px;margin:0 auto}}

/* ── Schéma ── */
.hl-schema-cadre{border-radius:20px;overflow:hidden;border:1px solid var(--line);max-width:920px}
.hl-schema{display:block;width:100%;height:auto}
.hl-schema text{font-family:inherit}

/* ── Étapes, matériel, règles ── */
.hl-etapes .etape p{color:var(--muted)}
.hl-obligatoire{max-width:70ch;padding:16px 20px;background:var(--verre);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;color:var(--ink)}
.hl-regles{display:grid;gap:22px;max-width:860px}
.hl-regle{padding:20px 24px;background:var(--verre);border:1px solid var(--line);border-radius:14px}
.hl-regle h3{font-size:24px;margin-bottom:6px}
.hl-regle p{color:var(--ink);font-size:16.5px}
.hl-resume{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:14px 26px;max-width:900px;margin:0 0 26px}
.hl-resume dt{font-family:var(--serif);font-size:21px;color:var(--gold2)}
.hl-resume dd{color:var(--ink);font-size:16.5px;margin:0}
@media (max-width:720px){.hl-resume{grid-template-columns:1fr;gap:4px}.hl-resume dd{margin-bottom:14px}}

/* ── Tableau des forfaits ── */
.hl-table-cadre{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--verre)}
.hl-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:0}
.hl-table th,.hl-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink)}
.hl-table thead th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold2);background:rgba(200,150,43,.1)}
.hl-table tbody th{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--gold2);white-space:nowrap}
.hl-table tbody tr:last-child th,.hl-table tbody tr:last-child td{border-bottom:0}
.hl-table td:nth-child(3),.hl-table td:nth-child(4){white-space:nowrap}
.hl-note-tarifs{max-width:78ch;font-size:15px;color:var(--muted)}
.hl-details{margin-top:22px;max-width:78ch;padding:14px 20px;background:var(--verre);border:1px solid var(--line);border-radius:12px}
.hl-details summary{cursor:pointer;font-weight:600;color:var(--gold2)}
.hl-details p{margin-top:12px;color:var(--ink);font-size:16px}
@media (max-width:860px){
  .hl-table-cadre{overflow:visible;border:0;background:none}
  .hl-table,.hl-table tbody,.hl-table tr,.hl-table th,.hl-table td{display:block;width:100%}
  .hl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hl-table tbody tr{margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--verre);overflow:hidden}
  .hl-table tbody th{border-bottom:1px solid var(--line);background:rgba(200,150,43,.1)}
  .hl-table td{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:10px;border-bottom:1px solid var(--line);white-space:normal!important}
  .hl-table td::before{content:attr(data-label);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold2)}
  .hl-table td:empty,.hl-table td:last-child:has(>span[aria-hidden]){display:none}
}

/* ── Formulaire de demande de devis (mission 31-BIS, lot A, fait 198 : mise en page seulement, aucun champ changé) ── */
.hl-form{max-width:none}
.hl-form .fac{font-weight:400;color:var(--muted)}
/* Mentions (consentement, 2 000 caractères, téléphone, aide de champ) : 11 px, sous le champ concerné (fait 198). */
.hl-form .note{margin:6px 0 0;font-size:11px;color:var(--muted)}
.hl-usages{border:0;padding:0;margin:0 0 18px}
.hl-usages legend{font-weight:600;font-size:14.5px;letter-spacing:.02em;margin-bottom:8px;padding:0}
/* 12 px d'espace entre les cases (fait 198) : rangées ET colonnes. */
.hl-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 18px}
.hl-case{display:flex;align-items:flex-start;gap:10px;margin:0;font-weight:400;font-size:15.5px;cursor:pointer}
.hl-case input{margin-top:5px;flex:0 0 auto}
.hl-consent .hl-case{font-weight:500}
.hl-form .hl-avis{margin-top:18px;font-size:11px}
.hl-form .hl-repli{margin-top:10px;font-size:11px}

/* ── Documents et pages de texte ── */
.hl-doc h1{font-size:clamp(30px,4.6vw,44px)}
.hl-doc h2{font-size:clamp(24px,3vw,30px);margin-top:36px}
.hl-doc h3{font-size:20px;margin-top:22px}
.hl-doc .hl-table-cadre{margin:16px 0}
.hl-doc-table{font-size:14.5px}
.hl-doc-pied{margin-top:30px;border-top:1px solid var(--line);padding-top:14px}
.hl-prose h2{margin-bottom:14px}
.hl-prose p{margin:0 0 16px;color:var(--ink);font-size:17px}
.hl-merci-titre{font-size:clamp(32px,5vw,48px);margin-bottom:14px;font-weight:400}

/* ── Outils : notes sous chaque outil, encart Gumroad, vignette « Facturier monde » ── */
.notes-outil{margin:2px 0 4px}
.notes-outil p{flex:0 0 auto;margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.notes-outil .ligne-remboursement{color:var(--ink)}
.notes-outil a{color:var(--gold2)}
.bouton.gumroad-button{display:inline-block!important;font-family:var(--sans)!important;font-weight:600!important;font-size:15px!important;letter-spacing:.03em!important;padding:13px 26px!important;border-radius:999px!important;color:var(--bg)!important;background:linear-gradient(135deg,var(--gold2),var(--gold))!important;border:1px solid transparent!important;text-decoration:none!important;text-transform:none!important;box-shadow:0 10px 30px rgba(200,150,43,.22)!important}
.vignette-grisee{max-width:760px;padding:22px 26px;border:1px dashed var(--muted);border-radius:16px;background:transparent;color:var(--muted);cursor:default;pointer-events:none;user-select:none}
.vignette-grisee h2{font-size:clamp(24px,3vw,30px);margin-bottom:6px;color:var(--muted)}
.vignette-grisee p{margin:0 0 10px;color:var(--muted);font-size:16px}
.vignette-grisee .lien-prevenir{pointer-events:auto;color:var(--gold2);font-weight:600;cursor:pointer}

/* ── Page 404 ── */
.page-404{padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,70px)}
.page-404 h1{font-size:clamp(34px,5vw,54px);margin:14px 0 12px;font-weight:400}
.badge-404{display:block;margin:0 auto;width:96px;height:96px;object-fit:contain}
.liens-404{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 26px}
.liens-404 a{display:inline-block;padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:var(--verre);color:var(--ink);text-decoration:none;font-weight:600}
.liens-404 a:hover,.liens-404 a:focus{border-color:var(--gold2);color:var(--gold2)}
.page-404 .mention{max-width:52ch;margin:16px auto 0}

/* ── Mentions de fin d'article ── */
.mentions-article{max-width:860px;margin:-34px auto 56px;padding:18px 24px;background:var(--verre);border:1px solid var(--line);border-radius:16px}
.mentions-article p{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.mentions-article p:last-child{margin-bottom:0}
.visuel-article svg{max-width:100%}

/* ── Fond lisible : les pages de texte de la V3 posent leur contenu sur le fond du thème (variable --bg), à 86 %, pour que chaque texte garde le contraste de 4,5:1
   sur la nébuleuse (mesure : outils/tester-contraste.mjs). Le thème clair de l'accueil redéfinit --bg : le voile suit. ── */
.fond-lisible{background:color-mix(in srgb,var(--bg) 86%,transparent)}

/* Séparateur « | » du sélecteur de langue : opacité pleine (à .5 il tombait à 2,8:1 sur la nébuleuse; mesure outils/tester-contraste.mjs). */
.langue>span{opacity:1}

.hl-bloc{display:block}

/* Fil d'Ariane des articles : sur un voile, pas directement sur la nébuleuse (2,2:1 mesuré). */
.fil{background:color-mix(in srgb,var(--bg) 88%,transparent);padding:8px 14px;border-radius:12px}
.fil,.fil a{color:var(--muted)}

/* Mission 25, fait 136 : la règle .fil de /site.css (margin:26px auto -18px;max-width:860px) est faite pour la colonne des articles ;
   dans un héros (page des kits du Serveur maison), elle centre le fil et le fait chevaucher le titre. On la neutralise ici. */
.heros .fil{margin:0 0 12px;max-width:none;padding:0;text-align:left}