/* =============================================================================
   BizConnect — système de design
   -----------------------------------------------------------------------------
   Palette issue du logo :
     navy   #082950  (le « B », les titres, la barre de navigation)
     bleu   #007AFD  (le « C », les actions principales)
     cyan   #34A9FF  (dégradé du « C », accents)

   Aucune dépendance, aucun CDN : la politique de sécurité de contenu interdit
   toute ressource externe. Un seul fichier, servi compressé et mis en cache un
   an grâce à l'empreinte ajoutée par View::asset().

   Organisation :
     1. Réinitialisation et bases
     2. Jetons de design (variables)
     3. Thèmes (§ 13 : clair, sombre, bleu, vert, violet)
     4. Mise en page
     5. Composants
     6. Utilitaires
     7. Impression et accessibilité
   ========================================================================== */

/* 1. RÉINITIALISATION -------------------------------------------------------*/

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; color: var(--heading); }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); }
h4 { font-size: 1.075rem; }

p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.35em; }
li { margin-bottom: .35em; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }

/* Le focus visible est indispensable à la navigation au clavier : il n'est
   jamais supprimé, seulement stylé. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--brand-200); color: var(--navy-900); }

/* 2. JETONS DE DESIGN -------------------------------------------------------*/

:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    /* Palette du logo */
    --navy-900: #061B3C;
    --navy-800: #082950;
    --navy-700: #0D3567;
    --navy-600: #12417E;

    --brand-700: #005FC9;
    --brand-600: #007AFD;
    --brand-500: #1E90FF;
    --brand-400: #34A9FF;
    --brand-200: #B9DCFF;
    --brand-100: #E3F0FF;
    --brand-50:  #F2F8FF;

    /* Sémantique */
    --success:   #0F9D6E;
    --success-bg:#E6F7F1;
    --warning:   #B76E00;
    --warning-bg:#FFF4E0;
    --danger:    #D32F2F;
    --danger-bg: #FDECEC;
    --info:      #0D6EFD;
    --info-bg:   #E7F1FF;

    /* Rayons, ombres, espacements */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    --shadow-xs: 0 1px 2px rgba(6, 27, 60, .06);
    --shadow-sm: 0 1px 3px rgba(6, 27, 60, .08), 0 1px 2px rgba(6, 27, 60, .04);
    --shadow:    0 4px 12px rgba(6, 27, 60, .08), 0 1px 3px rgba(6, 27, 60, .05);
    --shadow-lg: 0 12px 32px rgba(6, 27, 60, .12), 0 4px 8px rgba(6, 27, 60, .06);

    --header-height: 68px;
    --container: 1200px;
    --container-narrow: 780px;

    --transition: 160ms cubic-bezier(.2, 0, .2, 1);
}

/* 3. THÈMES (§ 13) ----------------------------------------------------------
   Chaque thème ne redéfinit que les variables sémantiques. Ajouter un thème
   revient à copier un de ces blocs et à déclarer son entrée dans config/app.php
   — aucune modification de composant n'est nécessaire.                       */

/* Clair (défaut) */
:root, [data-theme="light"] {
    --bg:            #F5F8FC;
    --surface:       #FFFFFF;
    --surface-2:     #F8FAFD;
    --surface-hover: #F1F6FC;
    --border:        #DFE7F1;
    --border-strong: #C3D2E4;

    --text:        #1B2A41;
    --text-muted:  #5B6F8A;
    --text-subtle: #7E8FA6;
    --heading:     var(--navy-800);

    --link:        var(--brand-700);
    --primary:     var(--brand-600);
    --primary-hover: var(--brand-700);
    --primary-text:  #FFFFFF;
    --accent:      var(--navy-800);
    --focus:       var(--brand-600);

    --header-bg:   rgba(255, 255, 255, .92);
    --header-text: var(--navy-800);
    --hero-gradient: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 45%, var(--brand-700) 100%);

    color-scheme: light;
}

/* Sombre */
[data-theme="dark"] {
    --bg:            #0A1628;
    --surface:       #10203A;
    --surface-2:     #142948;
    --surface-hover: #1A3255;
    --border:        #1F3A5F;
    --border-strong: #2C4C77;

    --text:        #E8EEF7;
    --text-muted:  #9FB2CC;
    --text-subtle: #7B8EA9;
    --heading:     #F2F7FF;

    --link:        var(--brand-400);
    --primary:     var(--brand-600);
    --primary-hover: var(--brand-500);
    --primary-text:  #FFFFFF;
    --accent:      var(--brand-400);
    --focus:       var(--brand-400);

    --header-bg:   rgba(10, 22, 40, .92);
    --header-text: #F2F7FF;
    --hero-gradient: linear-gradient(135deg, #061B3C 0%, #0D3567 50%, #005FC9 100%);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow:    0 4px 14px rgba(0, 0, 0, .4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

/* Bleu — la teinte du logo poussée sur l'ensemble de l'interface */
[data-theme="blue"] {
    --bg:            #EDF4FD;
    --surface:       #FFFFFF;
    --surface-2:     #F3F8FF;
    --surface-hover: #E3EFFC;
    --border:        #CFE0F5;
    --border-strong: #A9C8EC;

    --text:        #10233F;
    --text-muted:  #4A678C;
    --text-subtle: #6E88AA;
    --heading:     var(--navy-800);

    --link:        var(--brand-700);
    --primary:     var(--brand-600);
    --primary-hover: var(--navy-700);
    --primary-text:  #FFFFFF;
    --accent:      var(--brand-600);
    --focus:       var(--brand-700);

    --header-bg:   rgba(237, 244, 253, .94);
    --header-text: var(--navy-800);
    --hero-gradient: linear-gradient(135deg, var(--navy-800) 0%, var(--brand-600) 60%, var(--brand-400) 100%);

    color-scheme: light;
}

/* Vert */
[data-theme="green"] {
    --bg:            #F1F8F4;
    --surface:       #FFFFFF;
    --surface-2:     #F5FBF7;
    --surface-hover: #E7F4EC;
    --border:        #D2E7DA;
    --border-strong: #AFD3BC;

    --text:        #14332A;
    --text-muted:  #4B6E5E;
    --text-subtle: #6E8C7E;
    --heading:     #0B4A36;

    --link:        #0B7D57;
    --primary:     #0F9D6E;
    --primary-hover: #0B7D57;
    --primary-text:  #FFFFFF;
    --accent:      #0F9D6E;
    --focus:       #0B7D57;

    --header-bg:   rgba(241, 248, 244, .94);
    --header-text: #0B4A36;
    --hero-gradient: linear-gradient(135deg, #062E22 0%, #0B7D57 55%, #17B682 100%);

    color-scheme: light;
}

/* Violet */
[data-theme="purple"] {
    --bg:            #F5F2FD;
    --surface:       #FFFFFF;
    --surface-2:     #FAF7FF;
    --surface-hover: #EFE9FB;
    --border:        #E0D7F5;
    --border-strong: #C6B5EC;

    --text:        #241A3D;
    --text-muted:  #61537F;
    --text-subtle: #82749E;
    --heading:     #38215F;

    --link:        #6234C9;
    --primary:     #7B4BE0;
    --primary-hover: #6234C9;
    --primary-text:  #FFFFFF;
    --accent:      #7B4BE0;
    --focus:       #6234C9;

    --header-bg:   rgba(245, 242, 253, .94);
    --header-text: #38215F;
    --hero-gradient: linear-gradient(135deg, #241A3D 0%, #6234C9 55%, #9B72F0 100%);

    color-scheme: light;
}

/* Respect de la préférence système quand aucun thème n'a été choisi. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0A1628; --surface: #10203A; --surface-2: #142948; --surface-hover: #1A3255;
        --border: #1F3A5F; --border-strong: #2C4C77;
        --text: #E8EEF7; --text-muted: #9FB2CC; --text-subtle: #7B8EA9; --heading: #F2F7FF;
        --link: #34A9FF; --accent: #34A9FF; --focus: #34A9FF;
        --header-bg: rgba(10, 22, 40, .92); --header-text: #F2F7FF;
        --hero-gradient: linear-gradient(135deg, #061B3C 0%, #0D3567 50%, #005FC9 100%);
        color-scheme: dark;
    }
}

/* 4. MISE EN PAGE -----------------------------------------------------------*/

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

.container--narrow { max-width: var(--container-narrow); }

.page { min-height: calc(100vh - var(--header-height)); padding-block: 2.5rem 4rem; }
.page--tight { padding-block: 1.5rem 3rem; }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.layout-sidebar {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .layout-sidebar { grid-template-columns: 1fr; }
}

/* Variantes « contenu d'abord, colonne étroite à droite » (fiches communauté,
   opportunité, événement) — inverse de la disposition par défaut ci-dessus. */
.layout-sidebar--r300 { grid-template-columns: minmax(0, 1fr) 300px; }
.layout-sidebar--r320 { grid-template-columns: minmax(0, 1fr) 320px; }

.cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

/* Lien d'évitement : première tabulation de la page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--primary);
    color: var(--primary-text);
    border-radius: 0 0 var(--radius) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* 5. COMPOSANTS -------------------------------------------------------------*/

/* --- En-tête ------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand__text { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--header-text); }
.brand__text b { color: var(--brand-600); font-weight: 800; }
.brand:hover { text-decoration: none; }

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }

.nav__link {
    padding: .5rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--header-text);
    font-weight: 500;
    font-size: .95rem;
    transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: var(--surface-hover); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--primary); font-weight: 600; }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .7rem;
    color: var(--header-text);
    cursor: pointer;
}

@media (max-width: 980px) {
    .nav-toggle { display: block; }
    .nav {
        position: fixed;
        inset: var(--header-height) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: .75rem 1rem 1.25rem;
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }
    .nav[hidden] { display: none; }
    .nav__link { padding: .75rem .5rem; }
}

/* --- Boutons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition), border-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary {
    background: var(--primary);
    color: var(--primary-text);
    box-shadow: 0 1px 2px rgba(0, 122, 253, .25);
}
.btn--primary:hover { background: var(--primary-hover); box-shadow: 0 4px 14px rgba(0, 122, 253, .3); }

.btn--secondary {
    background: var(--surface);
    color: var(--heading);
    border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-hover); border-color: var(--primary); }

.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-900); }

.btn--ghost { background: transparent; color: var(--link); }
.btn--ghost:hover { background: var(--surface-hover); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(.92); }

/* Boutons sur fond sombre (bandeau d'appel à l'action de l'accueil). */
.btn--white { background: #fff; color: var(--navy-800); }
.btn--white:hover { background: #f0f4f9; }
.btn--ghost-light { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .22); }

.btn--sm { padding: .45rem .85rem; font-size: .875rem; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* --- Cartes ---------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.card--interactive:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
    transform: translateY(-2px);
    text-decoration: none;
}
a.card--interactive:hover { text-decoration: none; }
.card__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.card__title { margin: 0 0 .2rem; font-size: 1.075rem; }
.card__meta { color: var(--text-muted); font-size: .875rem; }
.card__body > :last-child { margin-bottom: 0; }
.card__footer {
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* --- Formulaires ----------------------------------------------------------- */
.field { margin-bottom: 1.15rem; }

.field__label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 600;
    font-size: .925rem;
    color: var(--heading);
}
.field__label .required { color: var(--danger); margin-left: .15rem; }
.field__hint { display: block; margin-top: .35rem; font-size: .825rem; color: var(--text-muted); }
.field__error { display: block; margin-top: .35rem; font-size: .85rem; color: var(--danger); font-weight: 500; }

.input, .select, .textarea {
    width: 100%;
    padding: .7rem .85rem;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--primary); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
    border-color: var(--danger);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }

.textarea { min-height: 140px; resize: vertical; }

.select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235B6F8A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
}

.checkbox, .radio { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; cursor: pointer; }
.checkbox input, .radio input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--primary); flex-shrink: 0; }
.checkbox span, .radio span { font-size: .93rem; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }

/* Champ leurre anti-robots : invisible pour l'humain, sans display:none que
   certains robots savent détecter. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- Badges et pastilles ---------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .6rem;
    border-radius: var(--radius-full);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.badge--verified { background: var(--success-bg); color: var(--success); }
.badge--premium  { background: linear-gradient(120deg, var(--navy-800), var(--brand-600)); color: #fff; }
.badge--info     { background: var(--info-bg); color: var(--info); }
.badge--warning  { background: var(--warning-bg); color: var(--warning); }
.badge--danger   { background: var(--danger-bg); color: var(--danger); }
.badge--neutral  { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

.tag {
    display: inline-block;
    padding: .25rem .65rem;
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-full);
    font-size: .82rem;
    font-weight: 500;
}
[data-theme="dark"] .tag { background: rgba(0, 122, 253, .14); border-color: rgba(0, 122, 253, .3); color: var(--brand-400); }

.dot {
    display: inline-block;
    width: .55rem; height: .55rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot--available   { background: var(--success); }
.dot--partial     { background: var(--warning); }
.dot--unavailable { background: var(--text-subtle); }

.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

/* --- Avatars --------------------------------------------------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--navy-800);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 34px; height: 34px; font-size: .8rem; }
.avatar--lg { width: 84px; height: 84px; font-size: 1.6rem; }
.avatar--square { border-radius: var(--radius); }

/* Nom sur la fiche publique freelance/entreprise : évite le débordement hors
   de la colonne latérale sur un nom long. En classe plutôt qu'en style="" —
   voir la note sur .theme-swatch--* : la CSP du site bloque les styles en
   ligne, avec ou sans nonce. */
.profile-name {
    font-size: .9rem;
    margin-top: .75rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Messages d'état -------------------------------------------------------- */
.alert {
    display: flex;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
    font-size: .93rem;
}
.alert--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: #0B6A4B; }
.alert--error   { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 30%, transparent);  color: #9B1C1C; }
.alert--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: #8A5300; }
.alert--info    { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 30%, transparent);    color: #0A4FB8; }
.alert > :last-child { margin-bottom: 0; }

[data-theme="dark"] .alert--success { color: #6EE7B7; }
[data-theme="dark"] .alert--error   { color: #FCA5A5; }
[data-theme="dark"] .alert--warning { color: #FCD34D; }
[data-theme="dark"] .alert--info    { color: #93C5FD; }

/* --- Bandeau d'appel à l'action (bas de l'accueil) --------------------------- */
.cta-banner { background: var(--hero-gradient); border: 0; color: #fff; padding: 3rem 1.5rem; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255, 255, 255, .88); max-width: 56ch; margin-inline: auto; }

/* --- Section d'accroche ----------------------------------------------------- */
.hero {
    background: var(--hero-gradient);
    color: #fff;
    padding: clamp(4.5rem, 10vw, 7.5rem) 0 clamp(3.5rem, 9vw, 6.5rem);
    position: relative;
    overflow: hidden;
    /* Débordement plein cadre : la section ignore le conteneur centré du
       gabarit et s'étend jusqu'aux bords de la fenêtre. */
    margin: -2.5rem calc(50% - 50vw) 3rem;
    padding-inline: calc(50vw - 50% + 20px);
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -60% auto;
    width: 55vw; height: 55vw;
    max-width: 720px; max-height: 720px;
    background: radial-gradient(circle, rgba(52, 169, 255, .28), transparent 62%);
    pointer-events: none;
}
.hero h1, .hero h2 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .88); font-size: 1.1rem; max-width: 62ch; margin-inline: auto; }
.hero__eyebrow { position: absolute; z-index: 2; top: clamp(1.25rem, 4vw, 2rem); left: clamp(1.25rem, 4vw, 2rem); text-align: left; }
.hero__eyebrow .hero__eyebrow-badge { background: #fff; color: #000; }
.hero__content { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; text-align: center; }
.hero__logo {
    display: inline-block;
    max-width: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(1rem, 4vw, 1.5rem) clamp(1.25rem, 6vw, 2.75rem);
    margin-bottom: 1rem;
}
.hero__logo img { display: block; width: clamp(170px, 46vw, 440px); max-width: 100%; height: auto; }

/* Les deux parcours du § 4 */
.path-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 2.25rem; }
.path-card {
    display: block;
    padding: 1.75rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    color: #fff;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.path-card:hover {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .45);
    transform: translateY(-3px);
    text-decoration: none;
}
.path-card__title { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; color: #fff; }
.path-card__desc  { color: rgba(255, 255, 255, .82); font-size: .95rem; margin: 0 0 1rem; }
.path-card__cta   { font-weight: 600; color: #fff; }

/* --- Compteurs (§ 5.1) ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat { text-align: center; padding: 1.25rem 1rem; }
.stat__value {
    display: block;
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary);
    letter-spacing: -.02em;
}
.stat__label { font-size: .875rem; color: var(--text-muted); }

/* --- Indice de confiance ----------------------------------------------------- */
.trust {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
}
.trust__bar {
    width: 64px; height: 6px;
    border-radius: var(--radius-full);
    background: var(--border);
    overflow: hidden;
}
.trust__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); }
.trust--high  .trust__fill { background: linear-gradient(90deg, var(--success), #35C79A); }
.trust--low   .trust__fill { background: linear-gradient(90deg, var(--warning), #E5A24A); }

/* --- Barre de progression ----------------------------------------------------- */
.progress { height: 8px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
.progress__fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); transition: width 400ms ease; }

/* --- Tableaux ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { background: var(--surface-2); font-weight: 600; color: var(--heading); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-hover); }

/* --- Pagination ----------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: 2rem; }
.pagination a, .pagination span {
    padding: .5rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }

/* --- Messagerie ------------------------------------------------------------------ */
.thread { display: flex; flex-direction: column; gap: .85rem; padding: 1rem 0; }
.message { display: flex; gap: .75rem; max-width: 78%; }
.message--own { flex-direction: row-reverse; margin-left: auto; }
.message__bubble {
    padding: .75rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .94rem;
    overflow-wrap: anywhere;
}
.message--own .message__bubble { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.message__meta { font-size: .75rem; color: var(--text-subtle); margin-top: .3rem; }
.message--own .message__meta { text-align: right; }

.conversation-item { display: flex; gap: .85rem; padding: 1rem; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.conversation-item:hover { background: var(--surface-hover); text-decoration: none; }
.conversation-item--unread { background: var(--brand-50); }
[data-theme="dark"] .conversation-item--unread { background: rgba(0, 122, 253, .1); }

/* --- Carte de recherche ------------------------------------------------------------ */
.search-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
@media (max-width: 1000px) { .search-layout { grid-template-columns: 1fr; } }

.filters { position: sticky; top: calc(var(--header-height) + 1rem); }
@media (max-width: 1000px) { .filters { position: static; } }

.map {
    height: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: .9rem;
    overflow: hidden;
}

/* --- Tarifs (§ 8) ------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan { display: flex; flex-direction: column; position: relative; }
.plan--highlight { border-color: var(--primary); box-shadow: 0 8px 28px rgba(0, 122, 253, .16); }
.plan--highlight::before {
    content: "Le plus choisi";
    position: absolute;
    top: -.75rem; left: 50%;
    transform: translateX(-50%);
    padding: .2rem .75rem;
    background: var(--primary);
    color: var(--primary-text);
    border-radius: var(--radius-full);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.plan__price { font-size: 2.1rem; font-weight: 800; color: var(--heading); letter-spacing: -.02em; }
.plan__price small { font-size: .95rem; font-weight: 500; color: var(--text-muted); }
.plan__features { list-style: none; padding: 0; margin: 1.25rem 0; flex: 1; }
.plan__features li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; margin-bottom: .55rem; }
.plan__features li::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* --- Bandeau cookies -------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    inset: auto 1rem 1rem 1rem;
    z-index: 90;
    max-width: 680px;
    margin-inline: auto;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
/* Refuser doit être aussi simple qu'accepter (doctrine CNIL) : même niveau
   visuel, pas de bouton « refuser » discret ou grisé. */
.cookie-banner__actions .btn { flex: 1 1 160px; }

/* --- Pied de page ------------------------------------------------------------------ */
.site-footer {
    background: var(--navy-900);
    color: #C6D5E8;
    padding: 3rem 0 1.75rem;
    margin-top: 4rem;
}
.site-footer h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9rem; }
.site-footer a { color: #C6D5E8; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer__lede { color: #93A9C4; }
.site-footer form.cluster { gap: .35rem; }
.site-footer select {
    padding: .35rem 2rem .35rem .6rem;
    font-size: .85rem;
    background-color: transparent;
    color: #C6D5E8;
    border-color: rgba(255, 255, 255, .2);
}
.site-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    color: #93A9C4;
}

/* --- Sélecteurs de thème et de langue ------------------------------------------------ */
.theme-picker { display: flex; gap: .4rem; }
.theme-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition), border-color var(--transition);
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface); }

/* Couleurs des pastilles : une classe par thème plutôt qu'un style en ligne —
   la CSP du site (style-src sans 'unsafe-inline') bloque silencieusement tout
   attribut style="", nonce ou pas ; seul un <style> avec nonce ou une feuille
   de styles externe comme celle-ci passe. Garder ces valeurs synchronisées
   avec config/app.php ('themes'). */
.theme-swatch--light  { background: #F5F8FC; }
.theme-swatch--dark   { background: #0A1628; }
.theme-swatch--blue   { background: #007AFD; }
.theme-swatch--green  { background: #0F9D6E; }
.theme-swatch--purple { background: #7B4BE0; }

/* --- Divers -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--text-muted); }
.empty-state h3 { color: var(--heading); }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.section-title h2 { margin: 0; }

.breadcrumb { font-size: .85rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: var(--text-subtle); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { margin-bottom: 1.25rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: .6rem .8rem; text-align: left; }
.prose th { background: var(--surface-2); }

/* 6. UTILITAIRES ----------------------------------------------------------------------- */

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

.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-small  { font-size: .875rem; }
.text-xs     { font-size: .78rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-bold   { font-weight: 700; }
.text-danger { color: var(--danger); }
.text-success{ color: var(--success); }

.mt-0 { margin-top: 0; }    .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }.mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2.5rem; } .mb-4 { margin-bottom: 2.5rem; }

.flex-1 { flex: 1; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.hidden { display: none !important; }

/* --- Remplacement des style="" en ligne --------------------------------------------
   La CSP (style-src sans 'unsafe-inline', voir SecurityHeaders) bloque tout attribut
   style="" du HTML, nonce ou pas — seule une feuille externe ou un <style nonce> passe.
   Classes atomiques ci-dessous : nommées d'après la valeur qu'elles portent, pas
   d'après un usage particulier, pour rester réutilisables comme .mt-*/.mb-* ci-dessus.
   Échelle de tailles de texte (rem × 100 — .fs-110 = 1.1rem) : */
.fs-85  { font-size: .85rem; }
.fs-90  { font-size: .9rem; }
.fs-95  { font-size: .95rem; }
.fs-100 { font-size: 1rem; }
.fs-105 { font-size: 1.05rem; }
.fs-110 { font-size: 1.1rem; }
.fs-115 { font-size: 1.15rem; }
.fs-120 { font-size: 1.2rem; }
.fs-125 { font-size: 1.25rem; }
.fs-130 { font-size: 1.3rem; }
.fs-135 { font-size: 1.35rem; }
.fs-140 { font-size: 1.4rem; }
.fs-150 { font-size: 1.5rem; }
.fs-160 { font-size: 1.6rem; }
.fs-200 { font-size: 2rem; }
.fs-350 { font-size: 3.5rem; }

/* Espacements hors échelle .mt-0..4/.mb-0..4 (valeurs ≥ 20 : rem × 100, aucune
   collision possible avec les index 0-4 de l'échelle existante). */
.mt-75  { margin-top: .75rem; }
.mb-20  { margin-bottom: .2rem; }
.mb-25  { margin-bottom: .25rem; }
.mb-40  { margin-bottom: .4rem; }
.mb-75  { margin-bottom: .75rem; }
.mr-100 { margin-right: 1rem; }
.pb-100 { padding-bottom: 1rem; }
.p-0    { padding: 0; }
.p-100  { padding: 1rem; }
.m-0    { margin: 0; }
.mi-auto { margin-inline: auto; }

/* Largeurs maximales (px), pour les colonnes de contenu centrées. */
.mxw-200 { max-width: 200px; }
.mxw-320 { max-width: 320px; }
.mxw-340 { max-width: 340px; }
.mxw-420 { max-width: 420px; }
.mxw-440 { max-width: 440px; }
.mxw-460 { max-width: 460px; }
.mxw-520 { max-width: 520px; }
.mxw-560 { max-width: 560px; }
.mxw-640 { max-width: 640px; }
.mxw-720 { max-width: 720px; }
.mxw-760 { max-width: 760px; }
.related-articles { max-width: 760px; margin: 3rem auto 0; }
.mxw-820 { max-width: 820px; }
.mxw-840 { max-width: 840px; }
.mxw-56ch { max-width: 56ch; }
.w-340 { width: 340px; }
.mono-spaced { font-family: var(--font-mono); letter-spacing: .1em; }
.narrow { margin-inline: auto; } /* combiner avec .mxw-* : <div class="narrow mxw-640"> */

.cursor-pointer { cursor: pointer; }
.border-0 { border: 0; }
.list-reset { list-style: none; padding: 0; margin: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0; }
.d-block { display: block; }
.d-flex { display: flex; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.max-h-60vh { max-height: 60vh; }

/* Saisie du code de vérification à la connexion (double authentification). */
.otp-input { letter-spacing: .35em; text-align: center; font-size: 1.25rem; }

/* Mini graphique en barres (statistiques de consultation). */
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 1rem; }
.chart-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.border-b { border-bottom: 1px solid var(--border); }
.border-danger { border-color: var(--danger); }

.select-compact { padding: .35rem 1.8rem .35rem .5rem; font-size: .85rem; }
.select-inline { width: auto; padding: .4rem 2rem .4rem .6rem; }
.bg-surface-2 { background: var(--surface-2); }

/* Clé secrète TOTP formatée (double authentification). */
.word-break-all { word-break: break-all; }

/* Liste des codes de secours (double authentification) : deux colonnes. */
.backup-codes { columns: 2; font-family: var(--font-mono); font-size: .9rem; }

/* Saisie du code à six chiffres (double authentification). */
.code-input { letter-spacing: .3em; text-align: center; max-width: 200px; }

/* Gros chiffre de statut sur une page d'erreur (404, 500…). */
.error-status-number { font-size: 3.5rem; font-weight: 800; line-height: 1; margin-bottom: .5rem; }

/* Bloc de trace technique (mode débogage uniquement). */
.trace-block { overflow: auto; font-size: .78rem; background: var(--surface-2); padding: 1rem; border-radius: var(--radius); }

.totp-secret {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: .1em;
    background: var(--surface-2);
    padding: .75rem;
    border-radius: var(--radius);
    word-break: break-all;
}
.min-h-80  { min-height: 80px; }
.min-h-90  { min-height: 90px; }
.min-h-100 { min-height: 100px; }
.min-h-110 { min-height: 110px; }
.min-h-180 { min-height: 180px; }
.min-h-200 { min-height: 200px; }

/* Colonne latérale collante des fiches profil (sidebar de carte). */
.sticky-sidebar { position: sticky; top: calc(var(--header-height) + 1rem); }

/* Ligne de liste avec séparateur bas — historique/candidatures/notifications. */
.list-row { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.list-row--tight { padding: .5rem 0; border-bottom: 1px solid var(--border); }

.fieldset-reset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.link-plain { text-decoration: none; color: inherit; }

/* 7. IMPRESSION ------------------------------------------------------------------------ */

@media print {
    .site-header, .site-footer, .cookie-banner, .btn, .nav, .filters, .no-print { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
    .page { padding: 0; }
}

/* Contraste renforcé pour les utilisateurs qui le demandent. */
@media (prefers-contrast: more) {
    :root { --border: var(--border-strong); --text-muted: var(--text); }
    .btn { border-width: 2px; }
}