/* ============================================================
   HireKazi — Motif « réseau de nœuds » (le matching IA, en écho aux points verts du logo)
   Un seul motif décoratif pour tout le site : heros clairs et blocs bleu marine.
   Jamais derrière du texte long, pas dans l'espace connecté.
   Chargé après les autres feuilles (accueil, pages publiques, tarifs).
   ============================================================ */
:root {
    --hk-net-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cg stroke='%23003A60' stroke-opacity='.06' stroke-width='1'%3E%3Cline x1='10' y1='15' x2='60' y2='40'/%3E%3Cline x1='60' y1='40' x2='105' y2='20'/%3E%3Cline x1='60' y1='40' x2='45' y2='80'/%3E%3Cline x1='105' y1='20' x2='110' y2='70'/%3E%3C/g%3E%3Ccircle cx='10' cy='15' r='2.5' fill='%23003A60' fill-opacity='.10'/%3E%3Ccircle cx='60' cy='40' r='3.5' fill='%2300C16E' fill-opacity='.22'/%3E%3Ccircle cx='105' cy='20' r='2.5' fill='%23003A60' fill-opacity='.10'/%3E%3Ccircle cx='45' cy='80' r='2.5' fill='%23003A60' fill-opacity='.10'/%3E%3Ccircle cx='110' cy='70' r='3' fill='%2300C16E' fill-opacity='.22'/%3E%3C/svg%3E");
    --hk-net-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cg stroke='%23FFFFFF' stroke-opacity='.035' stroke-width='1'%3E%3Cline x1='10' y1='15' x2='60' y2='40'/%3E%3Cline x1='60' y1='40' x2='105' y2='20'/%3E%3Cline x1='60' y1='40' x2='45' y2='80'/%3E%3Cline x1='105' y1='20' x2='110' y2='70'/%3E%3C/g%3E%3Ccircle cx='10' cy='15' r='2.5' fill='%23FFFFFF' fill-opacity='.07'/%3E%3Ccircle cx='60' cy='40' r='3.5' fill='%2300C16E' fill-opacity='.18'/%3E%3Ccircle cx='105' cy='20' r='2.5' fill='%23FFFFFF' fill-opacity='.07'/%3E%3Ccircle cx='45' cy='80' r='2.5' fill='%23FFFFFF' fill-opacity='.07'/%3E%3Ccircle cx='110' cy='70' r='3' fill='%2300C16E' fill-opacity='.18'/%3E%3C/svg%3E");
    --hk-net-size:  120px 90px;
}

/* ── Accueil ── */
/* Hero : remplace la grille de points ; plus présent à droite (illustration) qu'à gauche (texte) */
.l-hero::after {
    background-image: var(--hk-net-light); background-size: var(--hk-net-size);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 35%, #000 70%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 35%, #000 70%);
}
/* Sections bleu nuit : remplace les rayures et la grille de points */
.l-section--dark::before, .l-section--dark-2::before { background-image: var(--hk-net-dark); background-size: var(--hk-net-size); }
/* Bandeau final : remplace les cercles concentriques */
.l-cta-final::after {
    inset: 0; top: 0; left: 0; width: auto; height: auto; transform: none;
    background: var(--hk-net-dark); background-size: var(--hk-net-size);
}
/* Bande tarifs */
.l-price-band { position: relative; }
.l-price-band::before { content: ''; position: absolute; inset: 0; background-image: var(--hk-net-dark); background-size: var(--hk-net-size); pointer-events: none; }
.l-price-band > * { position: relative; }

/* ── Pages publiques ── */
/* Heros clairs (/analyse-cv, guide CV) : motif estompé côté texte */
.acv-page .acv-intro { position: relative; }
.acv-page .acv-intro::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--hk-net-light); background-size: var(--hk-net-size);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 40%, #000 75%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 40%, #000 75%);
}
.acv-page .acv-intro > .acv-wrap { position: relative; }
/* Bandeaux bleus de fin de page */
.acv-page .acv-final { background-image: var(--hk-net-dark); background-size: var(--hk-net-size); }

/* Page tri de CV : sections pleine largeur obtenues par box-shadow + clip-path,
   le motif passe donc par un pseudo-élément de la largeur de l'écran.
   overflow-x: clip sur la page absorbe l'écart de la barre de défilement (100vw l'inclut sous Windows). */
body:has(.tci-hero) { overflow-x: clip; } /* sur body et non .public-main, qui couperait le motif au-delà de 1280 px */
.tci-hero, .tci-section--dark, .tci-final { position: relative; }
.tci-hero::before, .tci-section--dark::before, .tci-final::before {
    /* largeur de l'écran, centrée sur la section (centrée dans la page) : pas de débordement horizontal */
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
    background-size: var(--hk-net-size);
}
.tci-hero::before { background-image: var(--hk-net-light); opacity: .8; }
.tci-section--dark::before, .tci-final::before { background-image: var(--hk-net-dark); }
.tci-hero > *, .tci-section--dark > *, .tci-final > * { position: relative; }

/* Tarifs : encadré de l'offre de lancement */
.l-launch-box { background-image: var(--hk-net-dark); background-size: var(--hk-net-size); }

/* Mobile : le texte occupe toute la largeur du hero, le motif s'efface davantage */
@media (max-width: 860px) {
    .l-hero::after, .acv-page .acv-intro::before, .tci-hero::before { opacity: .4; }
}