/* =============================================================================
   Starklub - système de design
   -----------------------------------------------------------------------------
   Palette issue du logo :
     navy  #000B29  (l'étoile et le « S », les titres, la barre de navigation)
     or    #A56100  (l'étoile et « .biz », les actions principales)
     ambre #D99A3A  (variante claire de l'or, accents en thème sombre)

   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é
     8. Habillage des pages intérieures (tout sauf l'accueil, body.skin) -
        placé avant la section 7 pour que l'impression garde le dernier mot
   ========================================================================== */

/* 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;
    }
    .hero__video { display: none; }
}

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;
    /* Garde-fou pour les sections plein cadre (.hero, .page-banner--dark…) :
       calc(50% - 50vw) peut déborder de quelques pixels selon la largeur de
       la barre de défilement verticale du navigateur. */
    overflow-x: hidden;
}

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: #000B29;
    --navy-800: #082950;
    --navy-700: #0D3567;
    --navy-600: #12417E;

    --brand-700: #8A5300;
    --brand-600: #A56100;
    --brand-500: #B36B00;
    --brand-400: #D99A3A;
    --brand-200: #F0D9AE;
    --brand-100: #F5E6C8;
    --brand-50:  #FBF2E1;

    /* 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, #000B29 0%, #0D3567 50%, #8A5300 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 - variante alternative indépendante de la palette de marque (or) */
[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:        #005FC9;
    --primary:     #007AFD;
    --primary-hover: var(--navy-700);
    --primary-text:  #FFFFFF;
    --accent:      #007AFD;
    --focus:       #005FC9;

    --header-bg:   rgba(237, 244, 253, .94);
    --header-text: var(--navy-800);
    --hero-gradient: linear-gradient(135deg, var(--navy-800) 0%, #007AFD 60%, #34A9FF 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: #D99A3A; --accent: #D99A3A; --focus: #D99A3A;
        --header-bg: rgba(10, 22, 40, .92); --header-text: #F2F7FF;
        --hero-gradient: linear-gradient(135deg, #000B29 0%, #0D3567 50%, #8A5300 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; }
}

@media (max-width: 900px) {
    .sticky-sidebar { position: static; }
}

/* Menu horizontal (Mon compte, Mon profil) : onglets défilables au lieu d'un
   menu latéral - voir partials/account_nav.php. */
.tab-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-nav__link {
    padding: .75rem 1rem;
    color: var(--text-muted);
    font-weight: 500;
    font-size: .92rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab-nav__link:hover { color: var(--text); text-decoration: none; }
.tab-nav__link[aria-current="page"] { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

/* 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; }
/* Repasse en une colonne sur mobile : à spécificité égale, cette règle doit
   suivre les variantes ci-dessus, sinon la colonne de 300px s'impose et écrase
   le contenu principal en une bande de quelques pixels. */
@media (max-width: 900px) {
    .layout-sidebar--r300, .layout-sidebar--r320 { grid-template-columns: 1fr; }
}

.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);
    transition: background var(--transition), border-color var(--transition);
}

/* Tant que le fond du hero (§ accueil) occupe l'espace sous l'en-tête, celui-ci
   devient transparent pour se fondre avec lui ; dès que la page défile et que
   le hero sort du cadre, JS (cf. app.js, IntersectionObserver) retire ce
   modificateur et l'en-tête retrouve son fond opaque habituel. Les teintes du
   hero étant fixes (dégradé marine, cf. .hero), le texte passe en blanc plutôt
   que d'utiliser les jetons de thème --header-text, qui varient. */
.site-header--overlay {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
}
.site-header--overlay .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .4); }
.site-header--overlay .brand img { filter: brightness(0) invert(1); }

/* Uniquement au-delà du seuil § 4 (980px) : en dessous, .nav devient un panneau
   déroulant à fond opaque (cf. media query ci-dessus) où le texte doit garder
   les couleurs de thème habituelles, pas le blanc de l'en-tête transparent. */
@media (min-width: 981px) {
    .site-header--overlay .nav__link { color: #fff; }
    .site-header--overlay .nav__link:hover { background: rgba(255, 255, 255, .15); }
    .site-header--overlay .nav__link[aria-current="page"] { color: var(--brand-400); }
}

.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: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;
    /* Hérite sinon le line-height:1.6 du body : sur « Tableau de bord », qui
       peut passer sur deux lignes dans le menu, l'écart vertical devient
       disproportionné par rapport au padding du lien. */
    line-height: 1.05;
    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; }
}

/* --- Espace connecté (menu vertical) ---------------------------------------
   Remplace l'en-tête horizontal ci-dessus pour tout utilisateur connecté, sur
   toutes les pages sauf l'accueil du site (bascule dans layouts/app.php). */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.app-sidebar {
    width: 264px;
    flex-shrink: 0;
    background: var(--navy-900);
    color: #C6D5E8;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    z-index: 60;
}

.app-sidebar__brand {
    display: flex;
    padding: 1.4rem;
    flex-shrink: 0;
}
.app-sidebar__brand:hover { text-decoration: none; }
/* Étoile animée + mot-symbole réunis sur une seule ligne, dans un seul cadre blanc. */
.app-sidebar__brand-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    background: #fff;
    border-radius: var(--radius);
    padding: .4rem .65rem;
}
.app-sidebar__brand-mark {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    perspective: 220px;
}
.app-sidebar__brand-mark img {
    display: block;
    width: 26px;
    height: 26px;
    /* rotation « horizontale » : autour de l'axe vertical, comme une pièce qui tourne */
    animation: sidebar-brand-star 8s linear infinite;
}
.app-sidebar__brand-word {
    flex: 0 1 auto;
    display: block;
    width: auto;
    height: 22px;
    max-width: 100%;
}
@keyframes sidebar-brand-star { to { transform: rotateY(1turn); } }

.app-sidebar__nav { flex: 1; padding: .5rem .9rem; }
.app-sidebar__group + .app-sidebar__group { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.app-sidebar__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6E88AA;
    padding: 0 .7rem .4rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--radius);
    color: #C6D5E8;
    font-size: .92rem;
    font-weight: 500;
    margin-bottom: .15rem;
    position: relative;
    transition: background var(--transition), color var(--transition);
}
.app-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.app-nav-link[aria-current="page"] { background: rgba(217, 154, 58, .18); color: #fff; font-weight: 600; }
.app-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -.9rem;
    top: .3rem;
    bottom: .3rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-400);
}
.app-nav-link__icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    color: #93A9C6;
}
.app-nav-link__icon svg { width: 100%; height: 100%; display: block; }
.app-nav-link:hover .app-nav-link__icon,
.app-nav-link[aria-current="page"] .app-nav-link__icon { color: var(--brand-400); }
.app-nav-link__badge {
    margin-left: auto;
    background: var(--brand-600);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    padding: .3em .5em;
    border-radius: 999px;
}

.app-sidebar__foot { padding: .9rem .9rem 1.4rem; border-top: 1px solid rgba(255, 255, 255, .1); flex-shrink: 0; }
.app-sidebar__foot form { margin: 0; }
.app-sidebar__foot .app-nav-link { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font: inherit; }

.app-sidebar-backdrop { display: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-height);
    padding-inline: 1.5rem;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.app-sidebar-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--header-text);
    cursor: pointer;
    flex-shrink: 0;
}
/* 24px dans une zone tactile de 44px (recommandation WCAG 2.5.5). */
.app-sidebar-toggle svg { display: block; width: 24px; height: 24px; margin: auto; }

.app-search { flex: 1; max-width: 420px; position: relative; }
.app-search input {
    width: 100%;
    padding: .55rem .9rem .55rem 2.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font: inherit;
    font-size: .9rem;
    color: var(--text);
}
.app-search input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.app-search__icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; font-size: .9em; }

.app-topbar__actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }

.app-content { flex: 1; padding-block: 2rem 3rem; }

.app-footer {
    border-top: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    font-size: .82rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
}
.app-footer a { color: var(--text-muted); }
.app-footer a:hover { color: var(--text); }

@media (max-width: 980px) {
    .app-sidebar-toggle { display: grid; place-items: center; }
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: var(--shadow-lg);
    }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-sidebar-backdrop {
        display: none;
        position: fixed; inset: 0; background: rgba(0, 11, 41, .5); z-index: 55;
    }
    .app-sidebar-backdrop.is-open { display: block; }
    .app-search { display: none; }
}

@media (max-width: 620px) {
    .app-topbar { padding-inline: 1rem; }
}

/* --- 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 > svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.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(165, 97, 0, .25);
}
.btn--primary:hover { background: var(--primary-hover); box-shadow: 0 4px 14px rgba(165, 97, 0, .3); }

.btn--secondary {
    background: var(--surface);
    color: var(--heading);
    border-color: var(--accent);
}
.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); }

/* Champ mot de passe avec bouton « œil » pour afficher la saisie. */
.password-field { position: relative; }
.password-field .input { padding-right: 2.9rem; }
.password-field__toggle {
    position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0;
    color: var(--text-muted); background: none; border: 0; border-radius: var(--radius);
    cursor: pointer;
}
.password-field__toggle:hover { color: var(--text); }
.password-field__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.password-field__toggle[hidden], .password-field__toggle [hidden] { display: none; }
/* Masque l'œil natif d'Edge, qui ferait doublon. */
.password-field .input::-ms-reveal { display: none; }

.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; }

/* Interrupteur : case à cocher native restylée, garde le comportement du formulaire. */
.switch { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; cursor: pointer; }
.switch input {
    appearance: none; flex-shrink: 0; position: relative; margin: .1rem 0 0;
    width: 2.6rem; height: 1.45rem; border-radius: 999px; cursor: pointer;
    background: var(--border-strong); transition: background-color .15s ease;
}
.switch input::after {
    content: ""; position: absolute; top: .15rem; left: .15rem;
    width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(1.15rem); }
.switch input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch span { font-size: .93rem; }
@media (prefers-reduced-motion: reduce) { .switch input, .switch input::after { transition: none; } }

.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(165, 97, 0, .14); border-color: rgba(165, 97, 0, .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); }
.dot--blue        { background: #2563EB; }
.dot--red         { background: #DC2626; }

.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; }

/* Section plein cadre à fond bleu marine, pour un message qui doit dominer
   toute la page (ex. profil pas encore visible, tant que l'e-mail n'est pas
   confirmé) - mêmes teintes que le thème sombre (§ 13) et que la page de
   secours minimale d'Application::emergencyPage(). Débordement plein cadre
   comme .hero ci-dessous : ignore le conteneur centré du gabarit. */
.page-banner--dark {
    background: #0A1628;
    color: #E8EEF7;
    margin: -2.5rem calc(50% - 50vw) 0;
    padding-inline: calc(50vw - 50% + 20px);
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-banner--dark h1 { color: #fff; }
.page-banner--dark .text-muted { color: #93A4BC; }

/* --- 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; }

/* --- Page « À propos » : sections numérotées façon plaquette de présentation */
.about-banner {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--hero-gradient);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 3rem 1.5rem 5rem;
}
.about-banner::before {
    /* Même filigrane du logo que le hero de l'accueil (cf. .hero::before) :
       cohérence visuelle entre les deux pages plutôt qu'une photo de stock. */
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/favicon-512.png") no-repeat center / min(60vw, 520px) auto;
    opacity: .16;
    pointer-events: none;
    animation: hero-logo-drift 16s linear infinite;
}
.about-banner__logo { position: relative; width: clamp(120px, 20vw, 160px); height: auto; margin-bottom: 1.25rem; }
.about-banner h1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
}
.about-banner h1::before,
.about-banner h1::after {
    content: "";
    flex: 1 1 auto;
    max-width: 80px;
    height: 2px;
    background: var(--brand-400);
}
.about-banner p { position: relative; color: rgba(255, 255, 255, .88); margin-top: .4rem; }

/* Cartes « flottantes » à cheval sur le bas du bandeau, comme les vignettes
   posées sur la photo dans la plaquette de présentation. */
.about-features {
    position: relative;
    z-index: 1;
    margin-top: -3.5rem;
    margin-bottom: 3.5rem;
}

.about-section { margin-bottom: 3.5rem; }
.about-section__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.about-section__head h2 { margin: 0; }
.about-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--hero-gradient);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.about-feature { display: flex; gap: .9rem; align-items: flex-start; box-shadow: var(--shadow-lg); }
.about-feature h3 { margin: 0 0 .25rem; font-size: 1rem; }
.about-feature p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.about-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    background: var(--brand-50);
    font-size: 1.2rem;
}
[data-theme="dark"] .about-feature__icon { background: rgba(165, 97, 0, .16); }

.about-stats-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    background: var(--hero-gradient);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
}
.about-stats-panel .stats { flex: 1 1 320px; gap: 1.5rem; }
.about-stats-panel .stat { padding-inline: 0; }
.about-stats-panel .stat__value,
.about-stats-panel .stat:nth-child(even) .stat__value { color: #fff; }
.about-stats-panel .stat__label { color: rgba(255, 255, 255, .8); }

/* Donut de répartition entreprises / freelances : tracé en SVG à partir des
   vrais compteurs (cf. pages/about.php), pas de graphique fictif. Les arcs
   utilisent des attributs de présentation SVG (stroke-dasharray…), jamais
   style="", que la CSP bloque (§ 1). */
.about-donut { display: flex; align-items: center; gap: 1.25rem; flex: 0 0 auto; }
.about-donut__chart { width: 110px; height: 110px; flex-shrink: 0; }
.about-donut__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; color: #fff; font-size: .9rem; font-weight: 600; }
.about-donut__legend li { display: flex; align-items: center; gap: .5rem; }
.about-donut__dot { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
.about-donut__dot--companies { background: #fff; }
.about-donut__dot--freelances { background: var(--brand-400); }

@media (max-width: 640px) {
    .about-features { margin-top: -2rem; }
    .about-stats-panel { justify-content: center; }
}

/* --- Section d'accroche ----------------------------------------------------- */
.hero {
    background: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Tient dans la fenêtre au chargement : la hauteur est bornée à l'écran,
       contenu centré verticalement plutôt qu'un padding fixe qui déborderait
       sur les petits écrans. */
    min-height: 100vh;
    /* Le fond remonte sous l'en-tête (position: sticky, donc transparent mais
       sans contenu propre derrière lui, cf. .site-header--overlay) : sans ce
       padding-top additionnel, le titre se retrouverait caché dessous. */
    padding-block: calc(var(--header-height) + clamp(1.5rem, 4vw, 2.5rem)) clamp(1.5rem, 4vw, 2.5rem);
    /* Débordement plein cadre : la section ignore le conteneur centré du
       gabarit et s'étend jusqu'aux bords de la fenêtre, en remontant aussi
       sous l'en-tête pour que celui-ci, transparent en haut de page, montre
       ce fond plutôt que celui, blanc, de la page. */
    margin: calc(-2.5rem - var(--header-height)) 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(217, 154, 58, .28), transparent 62%);
    pointer-events: none;
}
.hero__video {
    /* Fond vidéo en boucle : la vidéo est masquée au chargement (le filigrane
       du logo animé, .hero::before, occupe le fond seul quelques secondes),
       puis pilotée en JS via timeupdate - fondu à l'entrée et à la sortie de
       chaque lecture, cf. app.js. Le filtre assombrit l'image pour garder le
       texte du hero lisible par-dessus. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: brightness(.35) saturate(1.05);
    transition: opacity .15s linear;
    pointer-events: none;
}

/* Échantillonnage fin (8 segments) d'une vraie sinusoïde, interpolé en
   linéaire : plus fluide qu'un keyframe à 4 points avec ease-in-out, dont les
   paliers créent de petits à-coups à chaque pourcentage. */
@keyframes hero-logo-drift {
    0%    { transform: translateY(0)     rotate(-7deg)  scale(1.00); }
    12.5% { transform: translateY(-9.9px) rotate(-4.9deg) scale(1.02); }
    25%   { transform: translateY(-14px) rotate(0deg)   scale(1.07); }
    37.5% { transform: translateY(-9.9px) rotate(4.9deg)  scale(1.12); }
    50%   { transform: translateY(0)     rotate(7deg)   scale(1.14); }
    62.5% { transform: translateY(9.9px) rotate(4.9deg)  scale(1.12); }
    75%   { transform: translateY(14px)  rotate(0deg)   scale(1.07); }
    87.5% { transform: translateY(9.9px) rotate(-4.9deg) scale(1.02); }
    100%  { transform: translateY(0)     rotate(-7deg)  scale(1.00); }
}
.hero h1, .hero h2 { color: #fff; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem); text-shadow: 0 2px 16px rgba(0, 11, 41, .45); }
.hero p { color: rgba(255, 255, 255, .88); font-size: 1.05rem; max-width: 62ch; margin: .6rem auto 0; text-shadow: 0 1px 10px rgba(0, 11, 41, .4); }
.hero .link-light { color: var(--brand-400); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.hero .link-light:hover { color: #fff; }
.hero__content { position: relative; z-index: 1; width: 100%; max-width: 760px; margin-inline: auto; text-align: center; }
.hero__logo {
    display: inline-block;
    max-width: 100%;
    background: rgba(255, 255, 255, .3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(.6rem, 2vw, 1rem) clamp(1rem, 4vw, 1.75rem);
    margin-bottom: .75rem;
}
.hero__logo img { display: block; width: clamp(160px, 32vw, 280px); max-width: 100%; height: auto; }

/* Animation d'entrée : les éléments du hero apparaissent en fondu-décalage,
   avec un léger décalage entre chacun pour guider l'œil du logo vers les
   boutons d'action. Neutralisée globalement par prefers-reduced-motion (§ 1). */
.hero__logo   { animation: hero-in 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.hero h1      { animation: hero-in 1.3s cubic-bezier(.2, .8, .2, 1) .35s both; }
.hero p       { animation: hero-in 1.3s cubic-bezier(.2, .8, .2, 1) .7s both; }
.hero .path-cards { animation: hero-in 1.3s cubic-bezier(.2, .8, .2, 1) 1.05s both; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Les deux parcours du § 4 : un seul bloc arrondi, bordé de la même couleur
   que le lien « Pour en savoir plus » ci-dessus, les deux liens séparés par
   un trait. */
.path-cards {
    display: inline-flex;
    align-items: stretch;
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, .08);
    border: 2px solid var(--brand-400);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.path-card {
    display: flex;
    align-items: center;
    padding: .9rem 1.75rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    transition: background var(--transition);
}
.path-card:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.path-cards__divider { width: 2px; align-self: stretch; background: var(--brand-400); }

/* --- 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:nth-child(even) .stat__value { color: var(--accent); }
.stat__label { font-size: .875rem; color: var(--text-muted); }

/* --- Cartes indicateurs (tableaux de bord entreprise / freelance) ----------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.kpi-card { display: flex; align-items: flex-start; gap: .9rem; }
.kpi-card__icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    font-size: 1.15rem;
    background: var(--brand-50);
    color: var(--brand-700);
}
.kpi-card__icon--accent { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.kpi-card__icon svg { width: 1.35rem; height: 1.35rem; display: block; }
.kpi-card__body { min-width: 0; }
.kpi-card__label { font-size: .82rem; color: var(--text-muted); margin-bottom: .2rem; }
.kpi-card__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--heading); line-height: 1.15; }
[data-theme="dark"] .kpi-card__icon { background: rgba(217, 154, 58, .16); }
[data-theme="dark"] .kpi-card__icon--accent { background: rgba(255, 255, 255, .08); }

/* --- Bloc « projets réalisés » (tableaux de bord) --------------------------- */
.achievement-card {
    background: var(--hero-gradient);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 1.75rem;
}
.achievement-card__title { font-size: .95rem; font-weight: 700; margin: 0 0 .2rem; color: #fff; flex-basis: 100%; }
.achievement-card__item { min-width: 140px; }
.achievement-card__value { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.achievement-card__label { font-size: .82rem; color: rgba(255, 255, 255, .82); }
.achievement-card__note { flex-basis: 100%; font-size: .78rem; color: rgba(255, 255, 255, .68); margin: 0; }

/* --- 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); }

/* --- Vidéos du hero (administration) ------------------------------------------ */
.hero-videos { margin: 1rem 0 1.5rem; }
.hero-videos__item {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.hero-videos__item + .hero-videos__item { margin-top: .6rem; }
.hero-videos__preview {
    flex: 0 0 auto; width: 160px; aspect-ratio: 16 / 9;
    object-fit: cover; border-radius: var(--radius-sm); background: #000;
}
.hero-videos__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .hero-videos__item { flex-wrap: wrap; }
    .hero-videos__preview { width: 100%; }
}

/* --- 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; }

/* Pièces jointes (opportunités, messages) */
.attachment-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .35rem; }
.attachment-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; min-width: 0; }
.attachment-list a { overflow-wrap: anywhere; }
.attachment-list a::before { content: "📎"; margin-right: .3rem; }
.attachment-list .checkbox { margin: 0 0 0 .5rem; }
.message__attachments { margin-top: .35rem; }
.message--own .message__attachments .attachment-list li { justify-content: flex-end; }

/* Commentaires des Klubs Business */
.comment { display: flex; gap: .6rem; padding: .75rem 0; border-top: 1px solid var(--border); }
.comment:first-child { border-top: 0; }
.comment__body { min-width: 0; flex: 1; }
.comment__body p { overflow-wrap: anywhere; }
.comment--reply { margin-left: 2.6rem; padding-left: .9rem; border-top: 0; border-left: 2px solid var(--border); }
.comment__reply { display: inline-block; margin-top: .35rem; font-size: .78rem; font-weight: 600; }
.comment-replying { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; border-radius: var(--radius); background: var(--surface-2); }
.comment-replying[hidden] { display: none; }
@media (max-width: 620px) { .comment--reply { margin-left: 1.2rem; } }

/* Administration des Klubs : publication ciblée depuis un signalement */
.admin-post { padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.admin-post:last-child { border-bottom: 0; }
.admin-post.is-highlighted { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

.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(165, 97, 0, .1); }

/* --- Signalement (partials/report_form.php) : bouton qui déplie le formulaire */
.report-form__toggle { list-style: none; cursor: pointer; color: var(--text-muted); }
.report-form__toggle::-webkit-details-marker { display: none; }
.report-form[open] .report-form__toggle { color: var(--danger); }
.report-form__body { margin-top: .75rem; padding: .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.report-form__body .field { margin-bottom: .75rem; }

/* --- 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; } }

/* Filtres en barre horizontale (recherche d'opportunités) : mêmes champs que
   .filters, disposés en ligne au-dessus des résultats plutôt qu'en colonne. */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem 1rem;
    margin-bottom: 1.75rem;
}
.filters-bar .field { margin-bottom: 0; flex: 1 1 160px; min-width: 140px; }
.filters-bar .checkbox { flex: 0 0 auto; margin-bottom: 0; padding-bottom: .7rem; }
.filters-bar__actions { display: flex; gap: .5rem; flex: 0 0 auto; }

.map {
    height: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.map-popup { display: flex; gap: .55rem; align-items: flex-start; }
.map-popup__photo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}
.map-popup__title { display: block; font-weight: 700; }
.map-popup__subtitle { margin: .15rem 0 0; font-size: .82rem; color: var(--text-muted); }
.map-popup__available {
    display: inline-block;
    margin-top: .3rem;
    padding: .1rem .45rem;
    border-radius: var(--radius-full);
    font-size: .72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--success) 20%, transparent);
    color: var(--success);
}
.map-pin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.map-pin--blue { background: #2563EB; }
.map-pin--red  { background: #DC2626; }
.map-pin--grey { background: #64748B; }

/* --- 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(165, 97, 0, .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);
}
/* La liste déroulante elle-même s'affiche dans une fenêtre native du
   navigateur, avec un fond blanc - jamais transparent ni sombre comme le
   champ fermé. Sans cette règle, les options héritent du texte clair pensé
   pour le fond sombre du pied de page et deviennent illisibles (gris clair
   sur blanc). */
.site-footer select option {
    color: #1B2A41;
    background: #fff;
}
.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;
    border-left: 4px solid var(--accent);
    padding-left: .8rem;
}
.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); }

/* Sections illustrées des pages de présentation (/pour-les-freelances, /pour-les-entreprises) */
.feature-list { display: flex; flex-direction: column; gap: 2.75rem; margin: 2.5rem 0; }
.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2.75rem;
    align-items: center;
}
.feature-row:nth-child(even) .feature-row__media { order: 2; }
.feature-row__media {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    background: var(--surface-2);
}
.feature-row__media img { display: block; width: 100%; height: auto; }
.feature-row__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--brand-100);
    color: var(--brand-700);
    font-weight: 700;
    margin-bottom: .6rem;
}
.feature-row__body h2,
.feature-row__body h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.feature-row__body p { margin: 0; color: var(--text-muted); }
@media (max-width: 820px) {
    .feature-row { grid-template-columns: 1fr; gap: 1rem; }
    .feature-row:nth-child(even) .feature-row__media { order: 0; }
}

/* Variante « fun » (/pour-les-freelances) : visuels en médaillons ronds qui
   remplissent tout le disque ; tailles, ombres portées « autocollant » et
   décalages alternés pour casser volontairement l'alignement de la grille. */
.feature-list--fun { gap: 4.25rem; }
.feature-list--fun .feature-row {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: center;
}
.feature-list--fun .feature-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 15rem; }

.feature-list--fun .feature-row__media {
    width: 15rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 6px solid var(--surface);
    box-shadow: -12px 12px 0 color-mix(in srgb, var(--brand-400) 85%, transparent);
}
.feature-list--fun .feature-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* Chaque médaillon : taille, sens de l'ombre et calage vertical différents. */
.feature-list--fun .feature-row:nth-child(1) .feature-row__media { margin-top: -1.5rem; }
.feature-list--fun .feature-row:nth-child(2) {
    grid-template-columns: minmax(0, 1fr) 12.5rem;
}
.feature-list--fun .feature-row:nth-child(2) .feature-row__media {
    width: 12.5rem;
    margin-bottom: -2rem;
    box-shadow: 14px 12px 0 color-mix(in srgb, var(--navy-700) 80%, transparent);
}
.feature-list--fun .feature-row:nth-child(3) {
    grid-template-columns: 17.5rem minmax(0, 1fr);
}
.feature-list--fun .feature-row:nth-child(3) .feature-row__media {
    width: 17.5rem;
    box-shadow: -14px 14px 0 color-mix(in srgb, var(--brand-600) 85%, transparent);
}
.feature-list--fun .feature-row:nth-child(4) .feature-row__media {
    margin-top: -2rem;
    box-shadow: 14px 14px 0 color-mix(in srgb, var(--brand-400) 85%, transparent);
}
.feature-list--fun .feature-row:nth-child(5) {
    grid-template-columns: 16rem minmax(0, 1fr);
}
.feature-list--fun .feature-row:nth-child(5) .feature-row__media {
    width: 16rem;
    margin-bottom: -1.5rem;
    box-shadow: -12px 14px 0 color-mix(in srgb, var(--navy-700) 80%, transparent);
}

/* Lignes poussées alternativement à gauche / à droite. */
.feature-list--fun .feature-row:nth-child(odd)  { margin-left: clamp(0px, 6vw, 5rem); }
.feature-list--fun .feature-row:nth-child(even) { margin-right: clamp(0px, 6vw, 5rem); }

/* Blocs de texte et pastille de numéro légèrement de travers. */
.feature-list--fun .feature-row__step {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
    transform: rotate(-10deg);
    box-shadow: var(--shadow-sm);
}
.feature-list--fun .feature-row__body { transform: rotate(-1.4deg); }
.feature-list--fun .feature-row:nth-child(even) .feature-row__body { transform: rotate(1.6deg); }
.feature-list--fun .feature-row__body h2 { font-size: 1.35rem; }

@media (max-width: 820px) {
    .feature-list--fun .feature-row:nth-child(odd),
    .feature-list--fun .feature-row:nth-child(even) {
        grid-template-columns: 1fr;
        margin-left: 0;
        margin-right: 0;
    }
    .feature-list--fun .feature-row:nth-child(odd) .feature-row__media,
    .feature-list--fun .feature-row:nth-child(even) .feature-row__media {
        width: 13rem;
        margin-top: 0;
        margin-bottom: 0;
        justify-self: center;
    }
    .feature-list--fun .feature-row:nth-child(odd) .feature-row__body,
    .feature-list--fun .feature-row:nth-child(even) .feature-row__body { transform: none; }
}

/* Pages de présentation (/pour-les-freelances, /pour-les-entreprises, Klubs
   Business) : bandeaux à fonds dégradés aux couleurs du thème + animation
   d'entrée décalée. Tout est neutralisé par prefers-reduced-motion (§ 1). */
.promo-hero {
    position: relative;
    margin: -2.5rem calc(50% - 50vw) 0;
    padding: 3.25rem calc(50vw - 50% + 20px);
    background: var(--hero-gradient);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
/* Filigrane de l'étoile de la marque en fond de bandeau : même animation
   (respiration + dérive lente) que le hero de l'accueil, cf. .hero::before. */
.promo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/favicon-512.png") no-repeat center / min(70vw, 460px) auto;
    opacity: .3;
    pointer-events: none;
    animation: hero-logo-drift 16s linear infinite;
}
.promo-hero > * { position: relative; z-index: 1; }
.promo-hero h1 {
    color: #fff;
    animation: hero-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.promo-hero p { animation: hero-in .7s cubic-bezier(.2, .8, .2, 1) .12s both; }
.promo-hero .text-muted { color: rgba(255, 255, 255, .82); }

.promo-body {
    margin: 0 calc(50% - 50vw) -4rem;
    padding: 2.5rem calc(50vw - 50% + 20px) 4rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-400) 16%, transparent) 0%,
            color-mix(in srgb, var(--brand-400) 5%, transparent) 22%,
            transparent 50%),
        radial-gradient(90% 60% at 90% 100%,
            color-mix(in srgb, var(--navy-700) 10%, transparent), transparent 70%),
        var(--bg);
}
.promo-body > .feature-list { margin-top: 0; }

.feature-list--animated .feature-row {
    animation: promo-row-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
.feature-list--animated .feature-row:nth-child(1) { animation-delay: .06s; }
.feature-list--animated .feature-row:nth-child(2) { animation-delay: .16s; }
.feature-list--animated .feature-row:nth-child(3) { animation-delay: .26s; }
.feature-list--animated .feature-row:nth-child(4) { animation-delay: .36s; }
.feature-list--animated .feature-row:nth-child(5) { animation-delay: .46s; }

@keyframes promo-row-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Révélation au défilement (accueil…) : pilotée par app.js, qui pose
   .reveal-ready sur <html> puis .is-visible sur chaque bloc entrant dans la
   fenêtre. Sans JS ou en prefers-reduced-motion, rien n'est masqué. */
.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1.1s cubic-bezier(.2, .8, .2, 1),
                transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 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; }

/* Camemberts (partials/donut_chart.php). Palette catégorielle à ordre fixe,
   contrôlée pour le daltonisme sur parts voisines ; teintes plus claires ou
   plus sombres en thème sombre, pas une simple inversion. La valeur et le
   pourcentage figurent toujours en légende : la couleur n'est jamais seule. */
.donut {
    --series-1: #2A78D6; --series-2: #EB6834; --series-3: #1BAF7A;
    --series-4: #EDA100; --series-5: #E87BA4; --series-6: #008300;
}
[data-theme="dark"] .donut {
    --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70;
    --series-4: #C98500; --series-5: #D55181; --series-6: #008300;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .donut {
        --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70;
        --series-4: #C98500; --series-5: #D55181; --series-6: #008300;
    }
}
.donut { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.donut__figure { position: relative; flex: 0 0 auto; width: 148px; height: 148px; }
.donut__svg { display: block; width: 100%; height: 100%; }
.donut__track { stroke: var(--border); }
.donut__slice { transition: stroke-width var(--transition); cursor: default; }
.donut__slice:hover { stroke-width: 7.5; }
.donut__center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.donut__total { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--heading); }
.donut__caption { font-size: .72rem; color: var(--text-muted); max-width: 84px; line-height: 1.2; }
.donut__legend { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; min-width: 0; }
.donut__item {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.2em; align-items: center;
    gap: .5rem; padding: .28rem 0; font-size: .875rem;
}
.donut__item + .donut__item { border-top: 1px solid var(--border); }
.donut__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut__value { font-weight: 700; color: var(--text); }
.donut__pct { text-align: right; color: var(--text-muted); font-size: .8rem; }
.donut__swatch { width: 10px; height: 10px; border-radius: 3px; }
.donut__slice--1 { stroke: var(--series-1); } .donut__swatch--1 { background: var(--series-1); }
.donut__slice--2 { stroke: var(--series-2); } .donut__swatch--2 { background: var(--series-2); }
.donut__slice--3 { stroke: var(--series-3); } .donut__swatch--3 { background: var(--series-3); }
.donut__slice--4 { stroke: var(--series-4); } .donut__swatch--4 { background: var(--series-4); }
.donut__slice--5 { stroke: var(--series-5); } .donut__swatch--5 { background: var(--series-5); }
.donut__slice--6 { stroke: var(--series-6); } .donut__swatch--6 { background: var(--series-6); }
@media (forced-colors: active) {
    .donut__swatch { forced-color-adjust: none; }
}
.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; }

/* 8. HABILLAGE DES PAGES INTÉRIEURES ---------------------------------------------------
   Toutes les pages sauf l'accueil portent body.skin (layouts/app.php). Style
   inspiré des maquettes produit : surfaces blanches aérées sur fond bleuté très
   clair, grands rayons, ombres diffuses, pastilles d'icônes pleines, badges en
   pilule - dans la palette du logo (marine et or). Les couleurs passent par les
   variables des thèmes : sombre, bleu, vert et violet restent cohérents.      */

[data-theme="light"] .skin {
    --bg:            #F3F5FA;
    --surface-2:     #F8F9FC;
    --surface-hover: #F2F5FA;
    --border:        #E4E9F2;
    --border-strong: #CCD6E4;
    --text-muted:    #5A6B85;
}

.skin {
    --skin-radius:    14px;
    --skin-radius-lg: 20px;
    --skin-shadow:    0 1px 2px rgba(10, 25, 60, .04), 0 8px 24px rgba(10, 25, 60, .06);
    --skin-shadow-lg: 0 2px 6px rgba(10, 25, 60, .05), 0 18px 48px rgba(10, 25, 60, .10);
    --tile-bg:        linear-gradient(145deg, var(--navy-700) 0%, var(--navy-900) 100%);
    --tile-soft-bg:   color-mix(in srgb, var(--accent) 10%, var(--surface));
    background:
        radial-gradient(1200px 480px at 85% -10%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%),
        radial-gradient(900px 420px at -10% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
        var(--bg);
    background-attachment: fixed;
}

.skin h1 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.15rem); letter-spacing: -.025em; }
.skin h2 { letter-spacing: -.02em; }

/* --- Cartes -------------------------------------------------------------------------- */
.skin .card {
    border-color: var(--border);
    border-radius: var(--skin-radius-lg);
    padding: 1.6rem;
    box-shadow: var(--skin-shadow);
}
.skin .card--interactive:hover { box-shadow: var(--skin-shadow-lg); transform: translateY(-3px); }
.skin .card__footer { border-top-color: var(--border); }

/* --- Boutons ------------------------------------------------------------------------- */
.skin .btn { border-radius: 12px; padding: .75rem 1.4rem; letter-spacing: -.005em; }
.skin .btn--sm { padding: .48rem .9rem; border-radius: 10px; }
.skin .btn--lg { padding: 1rem 2rem; }
.skin .btn--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff) 0%, var(--primary) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent);
}
.skin .btn--primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px color-mix(in srgb, var(--primary) 34%, transparent);
    transform: translateY(-1px);
}
.skin .btn--secondary { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.skin .btn--secondary:hover { border-color: var(--accent); background: var(--surface); }
.skin .btn--dark { background: var(--tile-bg); }

/* --- Formulaires --------------------------------------------------------------------- */
.skin .field__label { font-size: .86rem; margin-bottom: .45rem; }
.skin .input, .skin .select, .skin .textarea {
    padding: .78rem .95rem;
    border-color: var(--border);
    border-radius: 12px;
    background-color: var(--surface-2);
}
.skin .input:hover, .skin .select:hover, .skin .textarea:hover { border-color: var(--border-strong); }
.skin .input:focus, .skin .select:focus, .skin .textarea:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.skin .select { background-position: right 1rem center; }
.skin fieldset legend, .skin .form-section-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 1rem;
}
.skin .checkbox input, .skin .radio input { accent-color: var(--accent); }

/* --- Badges, étiquettes, alertes ----------------------------------------------------- */
.skin .badge { padding: .25rem .7rem; font-size: .76rem; }
.skin .tag { border-radius: 8px; }
.skin .alert { border-radius: var(--skin-radius); padding: 1rem 1.2rem; }

/* --- Pastilles d'icônes -------------------------------------------------------------- */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--navy-700) 0%, var(--navy-900) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 11, 41, .22);
}
.icon-tile svg { width: 22px; height: 22px; display: block; }
.icon-tile--gold { background: linear-gradient(145deg, var(--brand-400) 0%, var(--brand-700) 100%); box-shadow: 0 6px 16px rgba(165, 97, 0, .25); }
.icon-tile--soft { background: var(--surface); color: var(--accent); box-shadow: 0 4px 14px rgba(10, 25, 60, .10); border-radius: 50%; }
.icon-tile--sm { width: 38px; height: 38px; border-radius: 11px; }
.icon-tile--sm svg { width: 18px; height: 18px; }
.icon-tile--lg { width: 60px; height: 60px; border-radius: 18px; }
.icon-tile--lg svg { width: 28px; height: 28px; }
[data-theme="dark"] .icon-tile--soft { background: var(--surface-2); color: var(--brand-400); }

/* --- Indicateurs (tableaux de bord) ------------------------------------------------- */
.skin .kpi-grid { gap: 1.1rem; }
.skin .kpi-card { flex-direction: column; gap: 1rem; padding: 1.35rem 1.4rem; }
.skin .kpi-card__icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    background: var(--tile-bg);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 11, 41, .18);
}
.skin .kpi-card__icon--accent {
    background: linear-gradient(145deg, var(--brand-400) 0%, var(--brand-700) 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(165, 97, 0, .22);
}
.skin .kpi-card__icon svg { width: 1.3rem; height: 1.3rem; }
.skin .kpi-card__body { display: flex; flex-direction: column-reverse; }
.skin .kpi-card__label { font-size: .82rem; font-weight: 500; margin: 0 0 .25rem; }
.skin .kpi-card__value { font-size: 1.75rem; }
.skin .achievement-card { border: 0; border-radius: var(--skin-radius-lg); box-shadow: var(--skin-shadow-lg); padding: 1.6rem 1.9rem; }

.skin .progress { height: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--border)); }

/* --- Tableaux ------------------------------------------------------------------------ */
.skin .table-wrap { border-radius: var(--skin-radius-lg); box-shadow: var(--skin-shadow); }
.skin .table th {
    background: transparent;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding-block: .9rem;
}
.skin .table td { padding-block: .95rem; }
.skin .table tbody tr { transition: background var(--transition); }

/* --- Onglets, pagination, fil d'Ariane ----------------------------------------------- */
.skin .tab-nav { gap: .35rem; border-bottom: 1px solid var(--border); }
.skin .tab-nav__link { border-radius: 10px 10px 0 0; font-weight: 600; }
.skin .pagination a, .skin .pagination span { border-radius: 10px; min-width: 2.4rem; text-align: center; }
.skin .breadcrumb { font-size: .82rem; }

.skin .section-title h2 { font-size: 1.2rem; }
.skin .empty-state { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--skin-radius-lg); }

/* --- Tarifs -------------------------------------------------------------------------- */
.skin .plan { border-radius: var(--skin-radius-lg); }
.skin .plan--highlight {
    border: 2px solid var(--primary);
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--surface)) 0%, var(--surface) 55%);
    box-shadow: var(--skin-shadow-lg);
}
.skin .plan__features li::before {
    content: "✓";
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; margin-top: .15rem;
    border-radius: 50%;
    background: var(--success-bg);
    font-size: .7rem;
}

/* --- Messagerie ---------------------------------------------------------------------- */
.skin .message__bubble { border-radius: 16px; }

/* --- Espace connecté : menu latéral clair, élément actif en pilule ------------------- */
.skin .app-sidebar {
    background: var(--surface);
    color: var(--text-muted);
    border-right: 1px solid var(--border);
}
.skin .app-sidebar__brand-box { box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
.skin .app-sidebar__group + .app-sidebar__group { border-top-color: var(--border); }
.skin .app-sidebar__label { color: var(--text-subtle); }
.skin .app-nav-link { color: var(--text-muted); border-radius: 12px; padding: .62rem .8rem; }
.skin .app-nav-link__icon { color: var(--text-subtle); }
.skin .app-nav-link:hover { background: var(--surface-hover); color: var(--heading); }
.skin .app-nav-link:hover .app-nav-link__icon { color: var(--accent); }
.skin .app-nav-link[aria-current="page"] {
    background: var(--tile-bg);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 11, 41, .20);
}
.skin .app-nav-link[aria-current="page"] .app-nav-link__icon { color: var(--brand-400); }
.skin .app-nav-link[aria-current="page"]::before { display: none; }
.skin .app-sidebar__foot { border-top-color: var(--border); }
.skin .app-topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom-color: var(--border); }
.skin .app-search input { border-radius: 12px; }
[data-theme="dark"] .skin .app-nav-link[aria-current="page"] { background: rgba(217, 154, 58, .18); box-shadow: none; }

/* --- Connexion et inscription : argumentaire à gauche, formulaire à droite --------- */
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    max-width: 1160px;
    margin-inline: auto;
}
.auth-split--compact { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); max-width: 1020px; }

.auth-aside { padding-top: 1.5rem; position: sticky; top: calc(var(--header-height) + 1.5rem); }
.auth-aside__title {
    font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--heading);
    margin: 0 0 1rem;
}
.auth-aside__title span { display: block; color: var(--primary); }
.auth-aside__lede { font-size: 1.05rem; color: var(--text-muted); max-width: 46ch; margin-bottom: 1.75rem; }
.auth-aside__preview {
    border-radius: var(--skin-radius-lg);
    overflow: hidden;
    box-shadow: var(--skin-shadow-lg);
    border: 1px solid var(--border);
    margin-bottom: 2rem;
    background: var(--surface);
}
.auth-aside__preview img { width: 100%; height: auto; }
.auth-features { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 1.2rem; }
.auth-features li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.auth-features strong { display: block; color: var(--heading); font-size: .98rem; }
.auth-features p { margin: .15rem 0 0; font-size: .9rem; color: var(--text-muted); }

.auth-card { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); }
.auth-card__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.6rem; }
.auth-card__head h1 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); margin: 0 0 .15rem; }
.auth-card__head p { margin: 0; color: var(--text-muted); font-size: .93rem; }
.auth-card__divider {
    display: flex; align-items: center; gap: .9rem;
    color: var(--text-subtle); font-size: .82rem; margin: 1.4rem 0;
}
.auth-card__divider::before, .auth-card__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-card__secure {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin: 1.25rem 0 0; font-size: .8rem; color: var(--text-subtle);
}
.auth-card__secure svg { width: 14px; height: 14px; }
.auth-card__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: -.4rem; margin-bottom: 1rem; }

/* Carte centrée seule (mot de passe oublié, réinitialisation). */
.auth-solo { max-width: 480px; margin-inline: auto; }
.auth-solo .auth-card__head { flex-direction: column; text-align: center; }

/* Choix du parcours. */
.path-choice { max-width: 980px; margin-inline: auto; }
.path-choice__head { text-align: center; margin-bottom: 2.5rem; }
.path-choice__head p { color: var(--text-muted); font-size: 1.05rem; }
.path-choice .card { display: flex; flex-direction: column; padding: 2rem; }
.path-choice .card .btn { margin-top: auto; }
.path-choice__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.path-choice__top h2 { margin: 0; font-size: 1.3rem; }
.check-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.check-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--text); margin-bottom: .6rem; }
.check-list li::before {
    content: "✓";
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; margin-top: .12rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: .7rem; font-weight: 800;
}

@media (max-width: 980px) {
    .auth-split, .auth-split--compact { grid-template-columns: 1fr; max-width: 640px; }
    .auth-aside { position: static; padding-top: 0; }
    .auth-aside__preview, .auth-features { display: none; }
    .auth-aside__lede { margin-bottom: 0; }
}

/* --- Tableau de bord freelance (dashboard/freelance.php) ---------------------------
   Maquettes images/connexion.png (bureau) et images/connexion_mobile.png (≤ 720px) :
   même balisage, la bascule se fait ici. .fdash-desktop / .fdash-mobile masquent
   les éléments propres à l'une des deux mises en page.                              */
.fdash { display: flex; flex-direction: column; gap: 1.25rem; }
.fdash > * { margin: 0; }
.fdash .fdash-mobile { display: none; }

.fdash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.fdash-head__title { margin: 0 0 .3rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.fdash-head__sub { margin: 0; color: var(--text-muted); font-size: .92rem; }

/* Pastilles d'icônes teintées (activité, raccourcis). */
.fdash-tone--green  { --tone: var(--success); }
.fdash-tone--blue   { --tone: var(--info); }
.fdash-tone--violet { --tone: #7C3AED; }
.fdash-tone--gold   { --tone: var(--brand-500); }
.fdash-tone--red    { --tone: var(--danger); }

/* Indicateurs : libellé en haut, icône discrète à droite, tendance en dessous. */
.fdash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fdash-kpi,
.fdash-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--skin-radius, 14px);
    box-shadow: var(--skin-shadow, var(--shadow-sm));
}
.fdash-kpi { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem; min-width: 0; }
.fdash-kpi__icon {
    position: absolute; top: 1rem; right: 1rem;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--accent);
}
.fdash-kpi__icon svg { width: 16px; height: 16px; }
.fdash-kpi__label { font-size: .84rem; font-weight: 500; color: var(--text-muted); padding-right: 2.4rem; }
.fdash-kpi__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--heading); white-space: nowrap; }
.fdash-kpi__trend { font-size: .78rem; color: var(--text-muted); }
.fdash-kpi__trend--up   { color: var(--success); }
.fdash-kpi__trend--down { color: var(--danger); }

/* Trois blocs : Klubs, activité, opportunités recommandées. */
.fdash-panels { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1rem; align-items: start; }
.fdash-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.fdash-panel { padding: 1.25rem 1.3rem; min-width: 0; }
.fdash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.fdash-section-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.fdash-section-head a { font-size: .8rem; font-weight: 600; color: var(--heading); white-space: nowrap; }

.fdash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fdash-list > li { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; min-width: 0; }
.fdash-list > li + li { border-top: 1px solid var(--border); }

.fdash-club__logo {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: .8rem; font-weight: 800; color: #fff;
    background: linear-gradient(145deg, var(--navy-700), var(--navy-900));
}
.fdash-club__logo--1 { background: linear-gradient(145deg, #6D5DF5, #4338CA); }
.fdash-club__logo--2 { background: linear-gradient(145deg, var(--brand-400), var(--brand-700)); }
.fdash-club__body, .fdash-deal__body, .fdash-application__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.fdash-club__name, .fdash-deal__title, .fdash-application__title {
    font-size: .9rem; font-weight: 700; color: var(--heading);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fdash-club__meta, .fdash-deal__meta, .fdash-application__meta { font-size: .78rem; color: var(--text-muted); }

.fdash-activity__icon,
.fdash-quick__icon {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--tone, var(--accent)) 13%, transparent);
    color: var(--tone, var(--accent));
}
.fdash-activity__icon svg { width: 15px; height: 15px; }
.fdash-activity__text { flex: 1; min-width: 0; font-size: .84rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fdash-activity__text:hover { color: var(--heading); }
.fdash-activity--unread .fdash-activity__text { font-weight: 600; color: var(--heading); }
.fdash-activity__time { flex-shrink: 0; font-size: .74rem; color: var(--text-subtle); }

.fdash-deal__thumb {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 64px; height: 56px;
    border-radius: 10px;
    overflow: hidden;
    font-weight: 800; color: #fff;
    background: linear-gradient(145deg, var(--navy-600), var(--navy-900));
}
.fdash-deal__thumb img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.fdash-deal__save {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0; border-radius: 9px;
    background: none;
    color: var(--heading);
    cursor: pointer;
}
.fdash-deal__save:hover { background: var(--surface-hover); }
.fdash-deal__save svg { width: 18px; height: 18px; }
.fdash-deal__save[aria-pressed="true"] svg { fill: currentColor; }

.fdash-application { justify-content: space-between; }
.fdash-completeness { padding: 1.1rem 1.3rem; }
.fdash-teaser h2 { margin-top: 0; }

@media (max-width: 1240px) {
    .fdash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fdash-panels { grid-template-columns: 1fr 1fr; }
    .fdash-panel--recommended { grid-column: 1 / -1; }
}

/* --- Mobile : maquette connexion_mobile.png ---------------------------------------- */
@media (max-width: 720px) {
    .fdash .fdash-desktop { display: none; }
    .fdash .fdash-mobile { display: block; }
    .fdash { gap: 1.1rem; }

    .fdash-head__title { font-size: 2rem; line-height: 1.15; letter-spacing: -.03em; }
    .fdash-head__sub { font-size: .95rem; }

    .fdash-search { position: relative; }
    .fdash-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-subtle); pointer-events: none; }
    .fdash-search__icon svg { width: 18px; height: 18px; }
    .fdash-search input {
        width: 100%;
        padding: .9rem 1rem .9rem 2.8rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: var(--skin-shadow, var(--shadow-sm));
        font: inherit; font-size: .9rem; color: var(--text);
    }
    .fdash-search input:focus { outline: none; border-color: var(--accent); }

    .fdash .fdash-quick.fdash-mobile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
    .fdash-quick__item {
        display: flex; flex-direction: column; align-items: center; gap: .5rem;
        padding: .85rem .15rem .75rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--skin-shadow, var(--shadow-sm));
        /* Libellé sur une seule ligne : la taille suit la largeur de l'écran
           (« Opportunités », « Gelegenheiten »… tiennent dès 320px) ; les points
           de suspension ne servent que de garde-fou. */
        font-size: clamp(.56rem, 2.7vw, .78rem); font-weight: 600; color: var(--heading);
        letter-spacing: -.01em;
        text-align: center;
        white-space: nowrap;
        min-width: 0;
    }
    .fdash-quick__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .fdash-quick__item:hover { text-decoration: none; border-color: var(--border-strong); }
    .fdash-quick__icon { width: 40px; height: 40px; border-radius: 12px; }
    .fdash-quick__icon svg { width: 20px; height: 20px; }

    /* Sections « à plat » : le titre est posé sur le fond, chaque ligne est une carte. */
    .fdash .fdash-section-head.fdash-mobile { display: flex; }
    .fdash-section-head { margin-bottom: .7rem; }
    .fdash-section-head h2 { font-size: 1.05rem; }
    .fdash-section-head a { color: var(--primary); font-size: .85rem; }

    .fdash-kpis {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(118px, 31%);
        gap: .6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: -20px;
        padding: 0 20px .2rem;
        scroll-padding-inline: 20px;
    }
    .fdash-kpis::-webkit-scrollbar { display: none; }
    .fdash-kpi { scroll-snap-align: start; padding: .9rem .85rem; gap: .5rem; }
    .fdash-kpi__icon, .fdash-kpi__trend { display: none; }
    .fdash-kpi__label { font-size: .74rem; padding-right: 0; }
    .fdash-kpi__value { font-size: 1.3rem; }

    .fdash-panels, .fdash-secondary { grid-template-columns: 1fr; gap: 1.1rem; }
    .fdash-panel--recommended { grid-column: auto; }
    .fdash-panel--activity    { order: -1; }

    .fdash-panels .fdash-panel { background: none; border: 0; box-shadow: none; padding: 0; }
    .fdash-panels .fdash-list { gap: .5rem; }
    .fdash-panels .fdash-list > li {
        padding: .8rem .9rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--skin-shadow, var(--shadow-sm));
    }
    .fdash-panels .fdash-list > li + li { border-top: 1px solid var(--border); }
    .fdash-activity__text { white-space: normal; }
}

/* --- Barre d'onglets mobile (partials/app_tabbar.php) ----------------------------------
   Espace freelance, ≤ 720px : navigation du pouce façon application (maquette
   images/connexion_mobile.png). Au-delà, le menu vertical suffit.                       */
.app-tabbar { display: none; }

@media (max-width: 720px) {
    .app-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
        padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 24px rgba(10, 25, 60, .08);
    }
    .app-main:has(.app-tabbar) { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
    /* Le bandeau cookies passe au-dessus de la barre plutôt que de la masquer. */
    body:has(.app-tabbar) .cookie-banner { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
    .app-tabbar__item {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: .2rem;
        padding: .25rem 0;
        font-size: .68rem; font-weight: 600;
        color: var(--text-muted);
    }
    .app-tabbar__item:hover { text-decoration: none; color: var(--heading); }
    .app-tabbar__item svg { width: 22px; height: 22px; }
    .app-tabbar__item[aria-current="page"] { color: var(--primary); }
    .app-tabbar__add {
        justify-self: center;
        display: grid; place-items: center;
        width: 52px; height: 52px;
        margin-top: -1.4rem;
        border-radius: 50%;
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 85%, #fff), var(--primary));
        color: #fff;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 40%, transparent);
    }
    .app-tabbar__add svg { width: 24px; height: 24px; }
    .app-tabbar__badge {
        position: absolute; top: -.1rem; left: calc(50% + .45rem);
        min-width: 1.1rem; padding: .15em .35em;
        border-radius: 999px;
        background: var(--danger); color: #fff;
        font-size: .6rem; font-weight: 700; line-height: 1.2; text-align: center;
    }
}

/* --- Mon calendrier (calendar/index.php) : grille mensuelle façon Outlook ------------
   Couleurs par classe (.cal-tone--*) : la CSP du site bloque les styles en ligne.
   Vert = rendez-vous accepté, gris = rendez-vous en attente de réponse.            */
.cal-tone--blue   { --tone: var(--info); }
.cal-tone--green  { --tone: var(--success); }
.cal-tone--gold   { --tone: var(--brand-500); }
.cal-tone--violet { --tone: #7C3AED; }
.cal-tone--red    { --tone: var(--danger); }
.cal-tone--grey   { --tone: #8A97AB; }

.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .9rem; }
.cal-toolbar__title { margin: 0; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.cal-toolbar__nav { display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; }
.cal-toolbar__arrow {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.5rem; line-height: 1;
    color: var(--heading);
}
.cal-toolbar__arrow:hover { background: var(--surface-hover); text-decoration: none; }
.cal-toolbar__month { margin: 0 0 0 .35rem; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }

.cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .8rem; color: var(--text-muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tone, var(--info)); flex-shrink: 0; }

.cal-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--skin-radius, 14px);
    overflow: hidden;
    box-shadow: var(--skin-shadow, var(--shadow-sm));
}
.cal-grid th {
    padding: .55rem .5rem;
    font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.cal-grid__wd-short { display: none; }
.cal-cell {
    height: 118px;
    padding: .3rem .35rem .4rem;
    vertical-align: top;
    border: 1px solid var(--border);
    border-width: 0 1px 1px 0;
}
.cal-cell:last-child { border-right: 0; }
.cal-cell--weekend { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-cell--outside { background: var(--surface-2); }
.cal-cell--outside .cal-cell__day { color: var(--text-subtle); }
.cal-cell__day {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 26px; padding: 0 .3rem;
    border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    color: var(--heading);
}
.cal-cell__day:hover { background: var(--surface-hover); text-decoration: none; }
.cal-cell--today .cal-cell__day { background: var(--primary); color: #fff; }
.cal-cell__items { display: flex; flex-direction: column; gap: 2px; margin-top: .2rem; }
.cal-cell__dots { display: none; }

.cal-chip {
    display: block;
    padding: .15rem .4rem;
    border-radius: 5px;
    border-left: 3px solid var(--tone, var(--info));
    background: color-mix(in srgb, var(--tone, var(--info)) 14%, var(--surface));
    font-size: .74rem; line-height: 1.35;
    color: var(--heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { background: color-mix(in srgb, var(--tone, var(--info)) 24%, var(--surface)); text-decoration: none; }
.cal-chip__time { font-weight: 700; }
/* Rendez-vous en attente : grisé, en pointillés. */
.cal-tone--grey.cal-chip, .cal-tone--grey.cal-agenda__item { color: var(--text-muted); border-left-style: dashed; }
.cal-more summary { list-style: none; cursor: pointer; font-size: .72rem; font-weight: 600; color: var(--text-muted); padding: .05rem .4rem; }
.cal-more summary::-webkit-details-marker { display: none; }
.cal-more[open] summary { display: none; }
.cal-more .cal-chip { margin-top: 2px; }

.cal-agenda { display: none; }

/* Formulaire : « Journée entière » masque les heures (sans JavaScript). */
.cal-form:has([data-all-day]:checked) .cal-form__time { display: none; }
.cal-swatch { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: .85rem; }
.cal-swatch input { accent-color: var(--accent); }
.cal-swatch:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }

@media (max-width: 720px) {
    .cal-toolbar__nav { order: 3; flex-basis: 100%; }
    .cal-grid__wd-long { display: none; }
    .cal-grid__wd-short { display: inline; }
    .cal-grid th { text-align: center; padding: .45rem 0; }
    .cal-cell { height: 52px; padding: .2rem 0; text-align: center; }
    .cal-cell__items { display: none; }
    .cal-cell__dots { display: flex; justify-content: center; gap: 3px; margin-top: 2px; }
    .cal-cell__dots .cal-dot { width: 6px; height: 6px; }

    .cal-agenda { display: block; margin-top: 1.1rem; }
    .cal-agenda__day { margin-bottom: .9rem; }
    .cal-agenda__date { margin: 0 0 .35rem; font-size: .82rem; font-weight: 700; color: var(--heading); }
    .cal-agenda__day--today .cal-agenda__date { color: var(--primary); }
    .cal-agenda__item {
        display: block;
        margin-bottom: .35rem;
        padding: .6rem .75rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-left: 4px solid var(--tone, var(--info));
        border-radius: 10px;
        font-size: .88rem;
        color: var(--heading);
    }
    .cal-agenda__item:hover { text-decoration: none; }
}

/* Modale de rendez-vous (<dialog>, calendar/index.php). */
.cal-modal {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--skin-radius-lg, 20px);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.cal-modal::backdrop { background: rgba(0, 11, 41, .45); backdrop-filter: blur(2px); }
.cal-modal__panel { padding: 1.4rem 1.5rem 1.2rem; }
.cal-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cal-modal__title { margin: 0; font-size: 1.2rem; }
.cal-modal__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.cal-modal__close:hover { background: var(--surface-hover); color: var(--heading); }
.cal-modal__foot { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.cal-modal__foot .btn { white-space: nowrap; }
.cal-modal__spacer { flex: 1; }
/* .btn impose son display : sans cette règle, « Supprimer » resterait visible à la création. */
.cal-modal [hidden] { display: none; }
/* Date, début, fin sur une ligne : la modale reste compacte. */
.cal-modal .field-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .75rem; }
.cal-modal .field-row > .field { min-width: 0; margin-bottom: 0; }
.cal-modal:has([data-all-day]:checked) .field-row { grid-template-columns: 1fr; }
.cal-modal .cal-form .field { margin-bottom: .85rem; }
.cal-modal textarea { min-height: 0; }
@media (max-width: 620px) {
    /* Téléphone : la modale occupe l'écran, comme une feuille. */
    .cal-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .cal-modal__panel { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
    .cal-modal .field-row { grid-template-columns: 1fr 1fr; }
    .cal-modal .field-row > .field:first-child { grid-column: 1 / -1; }
    /* Téléphone : Supprimer sur sa ligne, Annuler / Enregistrer en dessous. */
    .cal-modal__foot { flex-wrap: wrap; }
    .cal-modal__foot [data-cal-delete] { flex-basis: 100%; justify-content: flex-start; padding-inline: 0; }
}

/* --- Rendez-vous d'affaires (meetings/*.php, company/applications.php) ------------- */
.meeting-strip { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .5rem; font-size: .88rem; font-weight: 600; }
.meeting-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.meeting-mode {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .8rem .5rem;
    border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; text-align: center;
}
.meeting-mode input { position: absolute; opacity: 0; pointer-events: none; }
.meeting-mode:has(input:checked) { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.meeting-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.meeting-fieldset { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.meeting-mode__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.meeting-mode__icon svg { width: 20px; height: 20px; }
.meeting-mode:has(input:checked) .meeting-mode__icon { background: var(--accent); color: #fff; }
.meeting-mode__label { font-size: .85rem; font-weight: 600; }
.meeting-facts { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.2rem; margin: 1rem 0 0; }
.meeting-facts dt { color: var(--text-muted); font-size: .88rem; }
.meeting-facts dd { margin: 0; overflow-wrap: anywhere; }
.meeting-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.meeting-panel { flex-basis: auto; }
.meeting-panel[open] { flex-basis: 100%; }
.meeting-panel summary { list-style: none; }
.meeting-panel summary::-webkit-details-marker { display: none; }
.meeting-panel__body { margin-top: .75rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
@media (max-width: 620px) {
    .meeting-facts { grid-template-columns: 1fr; gap: .15rem; }
    .meeting-facts dd { margin-bottom: .55rem; }
}

/* Inscription freelance : étapes de profil (auth/onboarding) ---------------------------- */
.onboarding { max-width: 760px; margin-inline: auto; }
.onboarding-steps { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.onboarding-steps__item { font-size: .82rem; }
.onboarding-steps__item > a,
.onboarding-steps__item > span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-muted); text-decoration: none; }
.onboarding-steps__item svg { width: 14px; height: 14px; flex-shrink: 0; }
.onboarding-steps__item.is-done > a { border-color: var(--success); color: var(--success); }
.onboarding-steps__item.is-current > span { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
[data-theme="dark"] .onboarding-steps__item.is-current > span { background: rgba(165, 97, 0, .14); color: var(--brand-400); }
.onboarding-nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.onboarding-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .2rem 1rem; }
/* Pictogramme devant le libellé d'un champ */
.field__label--icon { display: flex; align-items: center; gap: .45rem; }
legend.field__label--icon { margin-bottom: .5rem; padding: 0; }
.field__icon { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; flex-shrink: 0; border-radius: 8px; background: var(--brand-50); color: var(--brand-700); }
.field__icon svg { width: 15px; height: 15px; }
[data-theme="dark"] .field__icon { background: rgba(165, 97, 0, .14); color: var(--brand-400); }
/* Choix (radio, case à cocher) présentés en cartes cliquables */
.onboarding-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.onboarding-option { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; margin-bottom: .5rem; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.onboarding-options .onboarding-option, .onboarding-choices .onboarding-option { margin-bottom: 0; }
.onboarding-option:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
[data-theme="dark"] .onboarding-option:has(input:checked) { background: rgba(165, 97, 0, .14); }
.onboarding-option input { flex-shrink: 0; accent-color: var(--brand-600); }
.onboarding-option__code { display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.onboarding-choices { gap: .5rem; }
/* Étape Portfolio */
.onboarding-empty { display: flex; align-items: center; gap: .6rem; padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); }
.onboarding-empty svg { width: 22px; height: 22px; flex-shrink: 0; }
.onboarding-portfolio { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.onboarding-portfolio__item { display: flex; align-items: center; gap: .75rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.onboarding-portfolio__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.onboarding-portfolio__thumb--empty { display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); }
.onboarding-portfolio__thumb--empty svg { width: 22px; height: 22px; }
.onboarding-portfolio__text { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow-wrap: break-word; }
.onboarding-subform { margin-top: 1rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
@media (max-width: 620px) {
    /* Sur mobile, seule l'étape en cours reste visible ; la barre donne la progression. */
    .onboarding-steps__item:not(.is-current) { display: none; }
    .onboarding-nav .btn--ghost { white-space: nowrap; padding-inline: .6rem; }
    .onboarding-nav .btn--primary { flex: 1; min-width: 0; }
    .onboarding-option { gap: .5rem; padding-inline: .65rem; }
    .onboarding-option__code { display: none; }
    .onboarding .auth-card__head { align-items: flex-start; gap: .8rem; }
    .onboarding .auth-card__head .icon-tile--lg { width: 46px; height: 46px; border-radius: 14px; }
    .onboarding .auth-card__head .icon-tile--lg svg { width: 22px; height: 22px; }
}

/* Compétences en pastilles (data-skill-picker, app.js) */
.skill-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 2.9rem; padding: .4rem .55rem; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius); background: var(--surface); cursor: text; }
.skill-picker:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.skill-picker__chips { display: contents; list-style: none; }
.skill-chip { display: inline-flex; align-items: center; gap: .3rem; padding-right: .3rem; }
.skill-chip__remove { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.skill-chip__remove:hover, .skill-chip__remove:focus-visible { background: var(--brand-100); }
.skill-picker__input { flex: 1 1 10rem; min-width: 8rem; padding: .3rem .2rem; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.skill-picker__suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.skill-suggestion { padding: .3rem .75rem; border: 1px dashed var(--border); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; min-height: 2rem; }
.skill-suggestion:hover, .skill-suggestion:focus-visible { border-style: solid; border-color: var(--brand-600); color: var(--brand-700); }

/* Publication d'une opportunité : titre à pictogramme, sections, métiers suggérés */
.page-head-icon { display: flex; align-items: center; gap: .9rem; }
.form-section-title { display: flex; align-items: center; gap: .5rem; margin: 1.8rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: 1.1rem; }
.form-section-title .field__icon { width: 2rem; height: 2rem; }
.headline-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.skill-suggestion:disabled { border-style: solid; border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); cursor: default; opacity: .75; }
@media (max-width: 620px) {
    .page-head-icon .icon-tile--lg { width: 46px; height: 46px; border-radius: 14px; }
    .page-head-icon .icon-tile--lg svg { width: 22px; height: 22px; }
}

/* Communes proposées à la saisie du code postal (app.js) */
.postal-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.postal-choices__hint { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--text-muted); }
.postal-choice { min-height: 2rem; padding: .3rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.postal-choice:hover, .postal-choice:focus-visible { border-color: var(--brand-600); color: var(--brand-700); }
.postal-choice[aria-pressed="true"] { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
[data-theme="dark"] .postal-choice[aria-pressed="true"] { background: rgba(165, 97, 0, .14); color: var(--brand-400); }

/* Salle de visio Jitsi (video/room) : l'iframe occupe la hauteur utile de l'écran. */
.video-room { position: relative; height: calc(100vh - 14rem); min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #111; }
.video-room__frame { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 620px) {
    .video-room { height: calc(100dvh - 11rem); min-height: 360px; }
}

/* 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; }
}
.card--danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }