/*
 * ============================================================================
 * AVYGEO V2 — CSS refactoré (public, tous visiteurs)
 * ============================================================================
 * Remplace progressivement migration.css + avygeo.css + avygeonew.css.
 *
 * Structure :
 *   1. :root           Charte graphique : variables CSS (couleurs, typo, spacing, …).
 *   2. Composants V2   Règles UNLAYERED — doivent rester unlayered pour battre
 *                      le legacy (migration.css / avygeo.css sont également unlayered ;
 *                      règle CSS : "tout unlayered bat tout layered", peu importe
 *                      la spécificité). On gagne donc par spécificité de sélecteur.
 *                      Chaque règle V2 est scopée par son container (ex. `.ah-header
 *                      .ah-link` — spécificité 0,2,0 — bat `a { color:xxx }` (0,0,1)
 *                      d'avygeo.css).
 *   3. @layer          Réservé aux composants V2 NOUVEAUX sans équivalent legacy
 *                      (pas de conflit possible). Exemples : nouveaux design tokens
 *                      UI internes, utilitaires expérimentaux.
 *
 * Règles d'or :
 *   - Zéro valeur hardcodée dans les composants : toujours var(--x).
 *   - Classes nommées par rendu visuel, pas par contexte métier.
 *   - Chaque composant partagé est factorisé (card, button, badge, …).
 *   - Sélecteurs V2 toujours scopés par parent V2 (`.ah-*`, `.ac-*`, …) pour
 *     battre les sélecteurs génériques legacy (ex. `a {}`) par spécificité.
 *   - Tant que legacy coexiste, ne PAS wrapper dans @layer un composant qui
 *     doit surcharger du legacy — on perdrait la bataille de cascade.
 *
 * Chargé AVANT migration.css dans base.html.twig, mais comme les deux sont
 * unlayered, c'est la spécificité qui décide (le fichier V2 load order ne
 * compte que pour les égalités de spécificité).
 * ============================================================================
 */

@layer tokens, base, components, page, utilities;

:root {

    /* ========================================================================
       COULEURS — palette Avygeo
       ======================================================================== */

    /* Identité : vert Avygeo */
    --c-primary: #00a799;
    --c-primary-dark: #0d8a7e;   /* hover, gradient bas */
    --c-primary-darker: #0d4a45; /* titres, fond tooltip */
    --c-primary-light: #7dd3c6;  /* accents clairs, tooltip row pos */
    --c-primary-bg: #eefbf6;     /* fond doux (cards, hover) */

    /* Identité : bleu nuit du mot "Avygeo" dans le logo */
    --c-brand: #00293d;

    /* État négatif : rouge */
    --c-negative: #d9534f;
    --c-negative-dark: #c0392b;
    --c-negative-light: #f5a8a4;
    --c-negative-bg: #fdecec;

    /* Accent : or/jaune (mentions spéciales, niveau max) */
    --c-accent: #f4b53d;
    --c-accent-dark: #d9901a;

    /* Texte */
    --c-text: #334045;         /* texte principal */
    --c-text-strong: #222;     /* texte fort (titres bold) */
    --c-text-muted: #6a7a80;   /* texte secondaire */
    --c-text-subtle: #8a979d;  /* caption, meta, desactivé */

    /* Surfaces et bordures */
    --c-bg: #fff;
    --c-bg-alt: #f4f7f9;       /* fond gris très léger */
    --c-bg-muted: #f8f9fa;     /* fond de section alterné */
    --c-border: #e0e6e8;
    --c-border-light: #e9eef0;

    /* Overlay (modales, slideshow) */
    --c-overlay: rgba(0, 0, 0, 0.55);


    /* ========================================================================
       TYPOGRAPHIE
       ======================================================================== */

    --font-sans: 'Poppins', sans-serif;
    --font-serif: 'Playfair Display', serif;

    /* Échelle de tailles — basée sur les font-sizes les plus utilisées en BDD */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-body-sm: 13px;
    --fs-body: 14px;            /* taille de base */
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;
    --fs-4xl: 28px;
    --fs-5xl: 32px;
    --fs-6xl: 42px;

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-loose: 1.7;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;


    /* ========================================================================
       ESPACEMENTS — grille de 4px
       ======================================================================== */

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;
    --sp-10: 64px;
    --sp-11: 80px;


    /* ========================================================================
       RAYONS DE BORDURE
       ======================================================================== */

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;   /* badges, boutons pill */
    --r-full: 50%;     /* cercle (avatars, icônes rondes) */


    /* ========================================================================
       OMBRES
       ======================================================================== */

    --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --sh-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sh-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --sh-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    --sh-focus: 0 0 0 3px rgba(0, 167, 153, 0.25);


    /* ========================================================================
       TRANSITIONS
       ======================================================================== */

    --t-fast: 120ms ease;
    --t-med: 200ms ease;
    --t-slow: 350ms ease;


    /* ========================================================================
       Z-INDEX
       ======================================================================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-tooltip: 1100;
    --z-toast: 1200;


    /* ========================================================================
       BREAKPOINTS (référence — à utiliser dans les @media)
       ======================================================================== */
    /*
        --bp-sm: 576px   (mobile large / petite tablette)
        --bp-md: 768px   (tablette)
        --bp-lg: 992px   (desktop)
        --bp-xl: 1200px  (desktop large)

        Note : les variables CSS ne fonctionnent pas dans les `@media`.
        Valeurs documentées ici pour cohérence, utiliser les pixels directs
        dans les media queries.
    */
}


/* ============================================================================
   HEADER — top bar, nav desktop, burger menu mobile, user dropdown
   ----------------------------------------------------------------------------
   Règles UNLAYERED — chaque sélecteur scopé par `.ah-header` ou `.ah-mobile-*`
   pour battre les sélecteurs génériques legacy d'avygeo.css (`a{}`, `ul{}`, …)
   par spécificité. Ne PAS envelopper dans @layer, sinon le legacy unlayered
   gagne systématiquement.
   ============================================================================ */

/* --- Top bar --- */
/* box-sizing: border-box forcé sur le scope V2 pour obtenir le même rendu
   que le CSS legacy (Bootstrap universal *{box-sizing:border-box}) sur les
   pages qui n'ont PAS Bootstrap chargé (baseV2). Évite la différence de
   hauteur 56px (border-box) vs 72px (content-box) entre HP V2 et legacy. */
.ah-header,
.ah-header *,
.ah-header *::before,
.ah-header *::after,
.ah-mobile-overlay,
.ah-mobile-panel,
.ah-mobile-panel *,
.ah-mobile-panel *::before,
.ah-mobile-panel *::after {
    box-sizing: border-box;
}

.ah-header {
    background: var(--c-bg);
    box-shadow: var(--sh-sm);
    font-family: var(--font-sans);
}

.ah-header .ah-header-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-4);
    min-height: 72px;
}

.ah-header .ah-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.ah-header .ah-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ah-header .ah-logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* --- Nav desktop --- */
.ah-header .ah-nav {
    flex: 1;
    min-width: 0;
}

.ah-header .ah-nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ah-header .ah-link {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-brand);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-radius: var(--r-md);
    transition: background var(--t-fast);
    white-space: nowrap;
}

.ah-header .ah-link:hover,
.ah-header .ah-link:focus-visible {
    color: var(--c-brand);
    background: var(--c-primary-bg);
    text-decoration: none;
    outline: none;
}

.ah-header .ah-link.is-active {
    color: var(--c-primary);
    font-weight: var(--fw-semibold);
}

/* --- Actions zone (search + avatar ou login) --- */
.ah-header .ah-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Bouton icône neutre (search, burger) */
.ah-header .ah-icon-btn,
.ah-header .ah-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--c-brand);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}

.ah-header .ah-icon-btn:hover,
.ah-header .ah-icon-btn:focus-visible,
.ah-header .ah-burger:hover,
.ah-header .ah-burger:focus-visible {
    color: var(--c-brand);
    background: var(--c-primary-bg);
    outline: none;
}

.ah-header .ah-icon {
    display: block;
}

/* Bouton CTA plein (connexion) */
.ah-header .ah-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2) var(--sp-5);
    background: var(--c-primary);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast);
}

.ah-header .ah-btn:hover,
.ah-header .ah-btn:focus-visible {
    background: var(--c-primary-dark);
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* --- Sélecteur de langue (dropdown natif <details>) --- */
.ah-header .ah-lang {
    position: relative;
}

.ah-header .ah-lang-toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 40px;
    padding: 0 var(--sp-2);
    background: transparent;
    border: none;
    color: var(--c-brand);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: color var(--t-fast), background var(--t-fast);
}

.ah-header .ah-lang-toggle::-webkit-details-marker { display: none; }

.ah-header .ah-lang-toggle:hover,
.ah-header .ah-lang[open] > .ah-lang-toggle {
    color: var(--c-primary);
    background: var(--c-primary-bg);
}

.ah-header .ah-lang-current {
    letter-spacing: .04em;
}

.ah-header .ah-lang-menu {
    position: absolute;
    top: calc(100% + var(--sp-1));
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: var(--sp-1) 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    z-index: var(--z-dropdown);
}

.ah-header .ah-lang-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background var(--t-fast);
}

.ah-header .ah-lang-item:hover,
.ah-header .ah-lang-item:focus-visible {
    background: var(--c-primary-bg);
    color: var(--c-primary);
    text-decoration: none;
    outline: none;
}

.ah-header .ah-lang-item.is-active {
    font-weight: var(--fw-semibold);
    color: var(--c-primary);
}

.ah-header .ah-lang-iso {
    min-width: 24px;
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
}

.ah-header .ah-lang-name {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-transform: capitalize;
}

/* Marqueur visuel discret tant que le sélecteur est en mode admin (i18n pas publique) */
.ah-header .ah-lang-admin > .ah-lang-toggle::after {
    content: 'ADMIN';
    margin-left: var(--sp-1);
    padding: 1px 4px;
    font-size: 9px;
    letter-spacing: .06em;
    color: #fff;
    background: var(--c-text-muted);
    border-radius: 3px;
}

/* --- Burger + panel mobile --- */
.ah-header .ah-burger {
    display: none; /* masqué sur desktop */
}

.ah-mobile-overlay {
    position: fixed;
    inset: 0;
    background: var(--c-overlay);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med), visibility var(--t-med);
}

.ah-mobile-overlay.mh-mobile-menu-active,
.ah-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ah-mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80vw;
    max-width: 320px;
    background: var(--c-bg);
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(-100%);
    transition: transform var(--t-med);
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-xl);
}

.ah-mobile-panel.mh-mobile-menu-active,
.ah-mobile-panel.is-open {
    transform: translateX(0);
}

.ah-mobile-panel .ah-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--c-border-light);
}

.ah-mobile-panel .ah-mobile-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}

.ah-mobile-panel .ah-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--c-text-muted);
    border-radius: var(--r-md);
    cursor: pointer;
}

.ah-mobile-panel .ah-mobile-close:hover,
.ah-mobile-panel .ah-mobile-close:focus-visible {
    background: var(--c-bg-alt);
    color: var(--c-text);
    outline: none;
}

.ah-mobile-panel .ah-mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2) 0;
}

.ah-mobile-panel .ah-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ah-mobile-panel .ah-mobile-link {
    display: block;
    padding: var(--sp-3) var(--sp-5);
    color: #000;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--t-fast);
}

.ah-mobile-panel .ah-mobile-link:hover,
.ah-mobile-panel .ah-mobile-link:focus-visible {
    color: #000;
    background: var(--c-primary-bg);
    text-decoration: none;
    outline: none;
}

.ah-mobile-panel .ah-mobile-link.is-active {
    color: var(--c-primary);
    font-weight: var(--fw-semibold);
    background: var(--c-primary-bg);
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .ah-header .ah-nav {
        display: none; /* nav desktop cachée sous 992px */
    }
    .ah-header .ah-burger {
        display: inline-flex; /* burger affiché en tablette/mobile */
        width: 44px;
        height: 44px;
    }
    /* Burger légèrement plus grand sur mobile : override la taille 22 posée dans le template */
    .ah-header .ah-burger .ah-icon {
        width: 28px;
        height: 28px;
    }
    /* Pousse les actions (search + langue + avatar/login) à droite : la nav desktop
       étant masquée, sans ça .ah-actions collerait à .ah-brand sur la gauche. */
    .ah-header .ah-actions {
        margin-left: auto;
    }
}

@media (max-width: 575px) {
    .ah-header .ah-header-row {
        padding: var(--sp-1) var(--sp-3);
        gap: var(--sp-2);
    }
    .ah-header .ah-logo img {
        height: 28px;
    }
    .ah-header .ah-btn {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-body);
    }
}


/* ============================================================================
   BASE V2 — body reset pour pages étendant baseV2.html.twig
   ----------------------------------------------------------------------------
   Scope large (`body.ap-v2` optionnel) ou appliqué via `html body` pour battre
   le legacy sur les pages qui le chargent. Sur les pages V2 (baseV2.html.twig),
   aucun CSS legacy → ces règles suffisent.
   ============================================================================ */

html, body {
    margin: 0;
    padding: 0;
}

/* A11y : cache un élément visuellement tout en le gardant accessible aux lecteurs d'écran */
.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;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    display: block;
}


/* ============================================================================
   HERO FULLSCREEN (.ap-hero)
   ============================================================================ */

/* Hauteur unifiée pour tous les heros full-width V2 (voir feedback_hero_v2_rules).
   Alignée sur .cover_dossier de prod : 350 / 300 / 250. H1 centré verticalement.
   3 zones de texte max : breadcrumb, title, credit. */
.ap-hero {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 350px;
    padding: 0 var(--sp-4);
    overflow: hidden;
    background: var(--c-primary-darker);
    color: #fff;
    text-align: center;
}

.ap-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.ap-hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}

.ap-hero-breadcrumb {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-4);
    z-index: 3;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    max-width: calc(100% - 2 * var(--sp-4));
    text-align: left;
}

.ap-hero-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.ap-hero-breadcrumb a:hover {
    text-decoration: underline;
}

.ap-hero-content {
    position: relative;
    z-index: 3;
    max-width: 860px;
}

.ap-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 4.2vw, 48px);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.ap-hero-credit {
    position: absolute;
    bottom: var(--sp-3);
    right: var(--sp-4);
    z-index: 3;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.85);
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.ap-hero-credit a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Chapô sous le hero (.ap-hero-intro) — 2 variantes combinables :
   - fond : blanc (défaut) ou gris (.ap-hero-intro-gray)
   - trait décoratif de séparation : absent (défaut) ou présent (.ap-hero-intro-bordered) */
.ap-hero-intro {
    position: relative;
    background: var(--c-bg);
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
}

.ap-hero-intro-gray {
    background: var(--c-bg-muted);
}

/* Trait décoratif centré en bas (60px × 2px), pas une bordure pleine largeur —
   pattern aligné sur .guide-chapo-wrapper::after de la prod. */
.ap-hero-intro-bordered::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--c-text-subtle);
}

.ap-hero-intro-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
}

.ap-hero-intro-lead {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: var(--lh-normal);
    color: var(--c-text);
    margin: 0;
}

.ap-hero-intro-lead a {
    color: var(--c-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================================
   BOUTONS CTA (.ap-btn-*)
   ============================================================================ */

.ap-btn-primary,
.ap-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.ap-btn-primary {
    background: var(--c-primary);
    color: #fff;
    box-shadow: var(--sh-md);
}

.ap-btn-primary:hover,
.ap-btn-primary:focus-visible {
    background: var(--c-primary-dark);
    color: #fff;
    box-shadow: var(--sh-lg);
    text-decoration: none;
    outline: none;
}

.ap-btn-secondary {
    background: var(--c-bg);
    color: var(--c-primary);
    border: 1.5px solid var(--c-primary);
}

.ap-btn-secondary:hover,
.ap-btn-secondary:focus-visible {
    background: var(--c-primary-bg);
    color: var(--c-primary-dark);
    text-decoration: none;
    outline: none;
}

.ap-btn-lg {
    padding: var(--sp-4) var(--sp-8);
    font-size: var(--fs-lg);
    border-radius: var(--r-lg);
}


/* ============================================================================
   SECTIONS (.ap-section)
   ============================================================================ */

.ap-section {
    padding: var(--sp-10) var(--sp-4);
}

.ap-section-alt {
    background: var(--c-bg-muted);
}

.ap-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.ap-section-header {
    text-align: center;
    margin-bottom: var(--sp-8);
}

.ap-section-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: var(--fw-bold);
    color: var(--c-text-strong);
    margin: 0 0 var(--sp-3);
    line-height: var(--lh-tight);
}

.ap-section-lead {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    max-width: 640px;
    margin: 0 auto;
}

.ap-section-footer {
    text-align: center;
    margin-top: var(--sp-7);
}


/* ============================================================================
   CARD GRID SQUARE (.ap-card-grid)
   ============================================================================ */

.ap-card-grid {
    display: grid;
    gap: var(--sp-5);
}

.ap-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .ap-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ap-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ap-card {
    display: block;
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--c-bg-alt);
    box-shadow: var(--sh-sm);
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.ap-card:hover,
.ap-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sh-lg);
    outline: none;
    text-decoration: none;
    color: #fff;
}

.ap-card-media {
    position: relative;
    width: 100%;
    padding-top: 100%; /* aspect-ratio 1:1 via padding-hack, compatible partout */
    overflow: hidden;
}

.ap-card-grid-landscape .ap-card-media {
    padding-top: 66.67%; /* 3:2 */
}

.ap-card-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.ap-card:hover .ap-card-media > img {
    transform: scale(1.04);
}

.ap-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%);
}

.ap-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.ap-card-title {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: #fff;
    margin: 0;
    line-height: var(--lh-tight);
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.ap-card-meta {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.ap-card-rank {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sp-2);
    background: rgba(255,255,255,0.95);
    color: var(--c-text-strong);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
}


/* ============================================================================
   FILTER PILLS (.ap-filter-bar)
   ============================================================================ */

.ap-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0 auto var(--sp-6);
    padding: var(--sp-3) 0;
    max-width: 840px;
}

.ap-filter-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    margin-right: var(--sp-2);
}

/* Filtres de feed : style unique pour <a> et <button> (pill). Les pills AJAX de
   la HP sont des <button> (pas d'URL crawlable), d'où le reset border/cursor/font. */
.ap-filter-link {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-bg-alt);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.ap-filter-link:hover,
.ap-filter-link:focus-visible {
    background: var(--c-primary-bg);
    color: var(--c-primary);
    text-decoration: none;
    outline: none;
}

.ap-filter-link.is-active {
    background: var(--c-primary);
    color: #fff;
}

.ap-filter-link.is-active:hover,
.ap-filter-link.is-active:focus-visible {
    background: var(--c-primary-dark);
    color: #fff;
}


/* ============================================================================
   CTA BLOCK (.ap-cta-block) — bandeau gradient pour inscription non-loggés
   ============================================================================ */

.ap-cta-block {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    border-radius: var(--r-xl);
    padding: var(--sp-9) var(--sp-5);
    text-align: center;
}

.ap-cta-block-title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-4);
    color: #fff;
}

.ap-cta-block-lead {
    font-size: var(--fs-lg);
    color: rgba(255,255,255,0.92);
    max-width: 640px;
    margin: 0 auto var(--sp-6);
    line-height: var(--lh-normal);
}

.ap-cta-block .ap-btn-primary {
    background: #fff;
    color: var(--c-primary-dark);
}

.ap-cta-block .ap-btn-primary:hover,
.ap-cta-block .ap-btn-primary:focus-visible {
    background: var(--c-primary-bg);
    color: var(--c-primary-dark);
}

.ap-cta-pillars {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--sp-5);
    margin: 0 0 var(--sp-7);
    padding: 0;
    list-style: none;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .ap-cta-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ap-cta-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: rgba(255,255,255,0.95);
}

.ap-cta-pillar img {
    width: 56px;
    height: 56px;
    margin-bottom: var(--sp-2);
}


/* ============================================================================
   SEARCH BAR INLINE (hero logged)
   ============================================================================ */

.ap-searchbar {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.ap-searchbar-input {
    flex: 1;
    min-width: 0;
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    color: var(--c-text);
    background: transparent;
    border: none;
    outline: none;
}

.ap-searchbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-5);
    background: var(--c-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background var(--t-fast);
}

.ap-searchbar-btn:hover,
.ap-searchbar-btn:focus-visible {
    background: var(--c-primary-dark);
    outline: none;
}


/* ============================================================================
   POST CARDS — feed (.ap-post)
   Layout : col gauche (avatar + username + niveau + Suivre), col droite (contenu).
   ============================================================================ */

.ap-feed {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    max-width: 800px;
    margin: 0 auto;
}

.ap-post {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--sh-sm);
    transition: box-shadow var(--t-med);
}

.ap-post:hover {
    box-shadow: var(--sh-md);
}

/* Col gauche : bloc identité auteur empilé. Pas de gap global — marges ciblées pour
   séparer visuellement l'avatar du bloc texte (username/niveau collés) et du bouton. */
.ap-post-author-col {
    flex-shrink: 0;
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ap-post-avatar {
    display: inline-flex;
    margin-bottom: var(--sp-2);
}

.ap-post-avatar-img {
    width: 56px;
    height: 56px;
    border-radius: var(--r-full);
    object-fit: cover;
    display: block;
}

/* Username : clamp à 2 lignes max avec ellipsis. Le display -webkit-box override
   le inline-flex de .ap-user-trigger pour ce cas précis (clamp natif). */
.ap-post-author {
    font-weight: var(--fw-semibold);
    color: var(--c-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.ap-post-level {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    white-space: nowrap;
    line-height: var(--lh-tight);
    margin-top: 2px;
}

/* Bouton Suivre en col gauche : pleine largeur de la colonne, padding compact. */
.ap-post-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-primary);
    background: transparent;
    border: 1px solid var(--c-primary);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    margin-top: var(--sp-2);
}

.ap-post-follow-btn:hover,
.ap-post-follow-btn:focus-visible {
    background: var(--c-primary);
    color: #fff;
    outline: none;
}

.ap-post-follow-btn[aria-pressed="true"] {
    background: var(--c-primary);
    color: #fff;
}

/* Col droite : contenu du post. */
.ap-post-main {
    flex: 1;
    min-width: 0;
}

.ap-post-title {
    font-family: var(--font-sans);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--c-primary);
    margin: 0 0 var(--sp-2);
}

.ap-post-title a {
    color: inherit;
    text-decoration: none;
}

.ap-post-title a:hover {
    color: var(--c-primary-dark);
}

/* Ancienneté : toujours affichée dans le footer à droite. */
.ap-post-date {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    display: inline-flex;
    align-items: center;
}

/* Ligne éval (avis uniquement) : thumb + étoiles + hashtag entité. */
.ap-post-eval {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-body);
}

.ap-post-thumb {
    display: inline-flex;
    align-items: center;
}

.ap-post-thumb.is-up { color: var(--c-primary); }
.ap-post-thumb.is-down { color: var(--c-negative); }

.ap-post-tag {
    color: var(--c-primary);
    text-decoration: none;
    font-weight: var(--fw-medium);
}

.ap-post-tag:hover {
    text-decoration: underline;
}

.ap-post-excerpt {
    font-size: var(--fs-md);
    color: var(--c-text);
    margin: 0 0 var(--sp-3);
    line-height: var(--lh-normal);
}

/* Avis long avec accordion : preview → bouton "Voir la suite" → full (ou lien externe si très long).
   Le texte full est dans le DOM dès le rendu (indexable SEO), juste [hidden] par défaut. */
.ap-post-review {
    margin: 0 0 var(--sp-3);
}

.ap-post-review-preview,
.ap-post-review-full > p {
    font-size: var(--fs-md);
    color: var(--c-text);
    line-height: var(--lh-normal);
    margin: 0 0 var(--sp-2);
}

.ap-post-review-full > p:last-child {
    margin-bottom: 0;
}

.ap-post-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--c-primary);
    cursor: pointer;
    margin-top: var(--sp-1);
}

.ap-post-readmore-btn:hover,
.ap-post-readmore-btn:focus-visible {
    color: var(--c-primary-dark);
    text-decoration: underline;
    outline: none;
}

.ap-post-readmore-icon {
    transition: transform var(--t-fast);
}

.ap-post-readmore-btn[aria-expanded="true"] .ap-post-readmore-icon {
    transform: rotate(180deg);
}

.ap-post-review-more-link {
    color: var(--c-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.ap-post-review-more-link:hover {
    color: var(--c-primary-dark);
    text-decoration: underline;
}

.ap-post-more {
    color: var(--c-primary);
    text-decoration: none;
    font-weight: var(--fw-medium);
}

.ap-post-more:hover {
    text-decoration: underline;
}

.ap-post-media {
    position: relative;
    display: block;
    width: 100%;
    margin-top: var(--sp-3);
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.ap-post-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-post-nbphotos {
    position: absolute;
    bottom: var(--sp-2);
    left: var(--sp-2);
    padding: 2px var(--sp-2);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
}

/* Footer universel : stats (likes/comments) à gauche, ancienneté toujours à droite. */
.ap-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border-light);
}

.ap-post-stats {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.ap-post-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-body);
    color: var(--c-text-muted);
    font-weight: var(--fw-medium);
}

.ap-post-stat-icon {
    flex-shrink: 0;
}

/* Mobile : stack vertical (pattern Twitter/Instagram). La col auteur devient un header
   horizontal pleine largeur, bordure du bas comme séparateur, puis contenu pleine largeur.
   Gain ~80px de largeur utile sur le contenu vs le layout 2 colonnes mobile. */
@media (max-width: 575px) {
    .ap-post {
        flex-direction: column;
        padding: var(--sp-4);
        gap: 0;
    }

    /* Row 1 : bandeau auteur. Grid 3 colonnes (avatar | username/niveau | Suivre) pour
       empiler username et niveau sur 2 lignes, avec avatar et bouton qui spannent. */
    .ap-post-author-col {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: var(--sp-3);
        row-gap: 2px;
        align-items: center;
        width: 100%;
        text-align: left;
        padding-bottom: var(--sp-3);
        margin-bottom: var(--sp-3);
        border-bottom: 1px solid var(--c-border-light);
    }

    .ap-post-avatar {
        margin-bottom: 0;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .ap-post-avatar-img {
        width: 44px;
        height: 44px;
    }

    /* Username ligne 1, niveau ligne 2. Username avec ellipsis 1 ligne. */
    .ap-post-author {
        font-size: var(--fs-body);
        display: inline-block;
        -webkit-line-clamp: initial;
        line-clamp: initial;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
        grid-column: 2;
        grid-row: 1;
    }

    .ap-post-level {
        margin-top: 0;
        grid-column: 2;
        grid-row: 2;
    }

    /* Bouton Suivre à droite, spanne les 2 lignes pour rester centré verticalement. */
    .ap-post-follow-btn {
        margin-top: 0;
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }

    /* Row 2 : contenu pleine largeur. */
    .ap-post-title {
        font-size: var(--fs-xl);
    }

    /* Ratio image mobile : 4:3 — image plus présente, moins de crop vertical. */
    .ap-post-media {
        aspect-ratio: 4 / 3;
    }
}

/* Rating — étoiles V2 */
.ar-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--c-accent);
    vertical-align: middle;
}

.ar-star-empty {
    color: var(--c-border);
}

/* Pub insérée dans le feed — contient de l'AdSense : juste un espacement propre */
.pub_area {
    margin: 0 auto;
    max-width: 840px;
    text-align: center;
}


/* ============================================================================
   ALBUM GRID (.ap-album-grid) — grille adaptative multi-photos dans une card feed
   ----------------------------------------------------------------------------
   Layouts par nombre de tuiles : 1 (full) / 2 (2 cols) / 3+ (mosaïque 2fr|1fr).
   Au clic sur une tuile : ouverture de la lightbox singleton (.ap-lightbox).
   ============================================================================ */

.ap-album-grid {
    display: grid;
    gap: 2px;
    margin-top: var(--sp-3);
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

@media (max-width: 575px) {
    .ap-album-grid { aspect-ratio: 4 / 3; }
}

.ap-album-grid--1 { grid-template-columns: 1fr; }

.ap-album-grid--2 { grid-template-columns: 1fr 1fr; }

.ap-album-grid--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.ap-album-grid--3 .ap-album-tile:nth-child(1) { grid-row: 1 / span 2; }

/* Tuile cliquable : <button> styleless pour conserver l'accessibilité clavier. */
.ap-album-tile {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    background: none;
    overflow: hidden;
    cursor: pointer;
}

.ap-album-tile > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-med);
}

.ap-album-tile:hover > img,
.ap-album-tile:focus-visible > img {
    transform: scale(1.03);
}

.ap-album-tile:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: -2px;
}

/* Overlay +N sur la dernière tuile quand totalCount > 3. */
.ap-album-tile-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    pointer-events: none;
    transition: background var(--t-fast);
}

.ap-album-tile--more:hover .ap-album-tile-more,
.ap-album-tile--more:focus-visible .ap-album-tile-more {
    background: rgba(0, 0, 0, 0.35);
}


/* ============================================================================
   LIGHTBOX (.ap-lightbox) — singleton full-screen photo viewer
   ----------------------------------------------------------------------------
   Instancié par migration-v2.js au clic sur une .ap-album-tile. Images chargées
   uniquement au clic (pas de preload à l'init HP), n+1/n-1 préchargés au fil.
   ============================================================================ */

.ap-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t-med);
}

/* L'attribut HTML [hidden] doit l'emporter sur display:flex — sinon l'overlay transparent
   intercepte tous les clics de la page au repos. Pattern aligné sur .al-modal[hidden]. */
.ap-lightbox[hidden] {
    display: none;
}

.ap-lightbox[aria-hidden="false"] {
    opacity: 1;
}

.ap-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.ap-lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
}

.ap-lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    border-radius: var(--r-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Boutons close/nav : style glassy sur fond sombre. */
.ap-lightbox-close,
.ap-lightbox-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: background var(--t-fast);
}

.ap-lightbox-close:hover,
.ap-lightbox-close:focus-visible,
.ap-lightbox-nav:hover,
.ap-lightbox-nav:focus-visible {
    background: rgba(255, 255, 255, 0.25);
    outline: none;
}

.ap-lightbox-close { top: var(--sp-4); right: var(--sp-4); }
.ap-lightbox-nav--prev { left: var(--sp-4); }
.ap-lightbox-nav--next { right: var(--sp-4); }

/* Desktop ≥ 900px : la sidebar occupe les 380px de droite — on décale close et next
   pour qu'ils restent bien sur la zone image. +sp-7 (32px) pour couvrir la scrollbar
   potentielle du panel (Windows/Linux) + gap visuel propre.
   Le bouton info-toggle reste masqué (la sidebar est toujours visible). */
@media (min-width: 901px) {
    .ap-lightbox-close,
    .ap-lightbox-nav--next {
        right: calc(380px + var(--sp-7));
    }
}

.ap-lightbox-nav[hidden] { display: none; }

.ap-lightbox-counter {
    position: absolute;
    bottom: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px var(--sp-3);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: var(--fs-body-sm);
    border-radius: var(--r-full);
}

/* ----------------------------------------------------------------------------
   Panneau droit — infos photo + likes + commentaires. Sidebar desktop, drawer mobile.
   Contenu injecté en AJAX par le JS via l'endpoint photo_lightbox_content.
   Layout interne : header (titre + like, toujours visible) + scroll (description, tags,
   comments, form). Sur mobile, tap header expand le panel en slide-up.
   ---------------------------------------------------------------------------- */

.ap-lightbox-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
}

.ap-lightbox-panel-loading {
    padding: var(--sp-5);
    color: var(--c-text-muted);
    font-size: var(--fs-body-sm);
}

.ap-lightbox-panel-loading[hidden] { display: none; }

.ap-lightbox-panel-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

/* Header : titre + like — toujours visible même quand le panel est collapsed (mobile). */
.ap-lightbox-panel-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border-light);
    flex-shrink: 0;
}

.ap-lightbox-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
}

/* Décale l'image pour ne pas passer sous la sidebar. */
.ap-lightbox-content {
    padding-right: calc(380px + var(--sp-5));
}

.ap-lightbox-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    margin: 0;
    line-height: var(--lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ap-lightbox-desc {
    font-size: var(--fs-md);
    color: var(--c-text);
    line-height: var(--lh-normal);
    margin: 0 0 var(--sp-3);
}

.ap-lightbox-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
}

/* Bouton like : minimaliste (pas de pill). Charte projet : liké → rouge (--c-negative). */
.ap-lightbox-like {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--c-text-muted);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: color var(--t-fast);
    flex-shrink: 0;
}

.ap-lightbox-like:hover,
.ap-lightbox-like:focus-visible {
    color: var(--c-negative);
    outline: none;
}

.ap-lightbox-like.is-liked {
    color: var(--c-negative);
}

.ap-lightbox-like.is-liked .ap-lightbox-like-icon {
    fill: currentColor;
}

.ap-lightbox-comments-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    margin: 0 0 var(--sp-2);
}

.ap-lightbox-comments {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Card commentaire : avatar cliquable (user modal) à gauche, contenu à droite.
   Username cliquable aussi (modal). Aligné sur le pattern feed. */
.ap-lightbox-comment {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
}

.ap-lightbox-comment-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.ap-lightbox-comment-content {
    flex: 1;
    min-width: 0;
}

.ap-lightbox-comment-author {
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    display: block;
    margin-bottom: 2px;
}

.ap-lightbox-comment-body {
    color: var(--c-text);
    word-wrap: break-word;
}

.ap-lightbox-comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ap-lightbox-comment-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-body);
    resize: vertical;
}

.ap-lightbox-comment-input:focus-visible {
    border-color: var(--c-primary);
    outline: none;
}

.ap-lightbox-comment-submit {
    align-self: flex-end;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--t-fast);
}

.ap-lightbox-comment-submit:hover:not(:disabled),
.ap-lightbox-comment-submit:focus-visible:not(:disabled) {
    background: var(--c-primary-dark);
    outline: none;
}

.ap-lightbox-comment-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ap-lightbox-comment-placeholder {
    width: 100%;
    padding: var(--sp-3);
    background: var(--c-bg-alt);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text-muted);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    cursor: pointer;
    text-align: center;
    transition: background var(--t-fast), color var(--t-fast);
}

.ap-lightbox-comment-placeholder:hover,
.ap-lightbox-comment-placeholder:focus-visible {
    background: var(--c-primary-bg);
    color: var(--c-primary);
    outline: none;
}

@media (max-width: 900px) {
    /* Photo plein écran. Le panel devient un bottom sheet : header (titre+like) toujours
       visible en bas de l'écran, tap sur header → expand à 80vh (scroll interne). */
    .ap-lightbox-content { padding-right: var(--sp-5); }

    .ap-lightbox-panel {
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 80vh;
        border-top: 1px solid var(--c-border-light);
        transition: max-height var(--t-med);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    }

    /* Collapsed : on fixe une hauteur égale au header (titre + like) ~72px,
       le scroll body est masqué via flex:0 + overflow hidden. */
    .ap-lightbox-panel-header {
        cursor: pointer;
    }
    .ap-lightbox-panel-header::after {
        content: '▲';
        font-size: 10px;
        color: var(--c-text-muted);
        transition: transform var(--t-med);
    }
    .ap-lightbox.is-panel-open .ap-lightbox-panel-header::after {
        transform: rotate(180deg);
    }

    .ap-lightbox:not(.is-panel-open) .ap-lightbox-panel-scroll {
        display: none;
    }

    /* Image : occupe la zone au-dessus du header (~100vh - hauteur header). */
    .ap-lightbox-img {
        max-height: calc(100vh - 180px);
    }
}

@media (max-width: 575px) {
    .ap-lightbox-content { padding: var(--sp-3); }
    .ap-lightbox-close,
    .ap-lightbox-nav { width: 40px; height: 40px; }

    /* Flèches en bas d'écran (coins inférieurs) AU-DESSUS du bandeau header panel. */
    .ap-lightbox-nav--prev,
    .ap-lightbox-nav--next {
        top: auto;
        bottom: calc(72px + var(--sp-3));
    }
    .ap-lightbox-counter {
        bottom: calc(72px + var(--sp-3) + 48px);
    }
    .ap-lightbox-img {
        max-height: calc(100vh - 200px);
    }
    .ap-lightbox-panel-header { padding: var(--sp-3) var(--sp-4); }
    .ap-lightbox-panel-scroll { padding: var(--sp-3) var(--sp-4); }
}


/* ============================================================================
   USER TRIGGER (.ap-user-trigger) — avatar + username cliquables dans le feed
   ============================================================================ */

.ap-user-trigger {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ap-user-trigger:hover,
.ap-user-trigger:focus-visible {
    color: var(--c-primary);
    text-decoration: none;
    outline: none;
}

.ap-user-trigger.ap-post-avatar {
    border-radius: var(--r-full);
    transition: transform var(--t-fast);
}

.ap-user-trigger.ap-post-avatar:hover,
.ap-user-trigger.ap-post-avatar:focus-visible {
    transform: scale(1.05);
}

/* Overrides contextuels de couleur (spécificité 0,2,0 > .ap-user-trigger 0,1,0). */
.ap-user-trigger.ap-post-author { color: var(--c-primary); }
.ap-user-trigger.ap-lightbox-comment-author { color: var(--c-text-strong); }


/* ============================================================================
   MODAL GÉNÉRIQUE (.ap-modal) + fiche user (.ap-user-card)
   ============================================================================ */

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

.ap-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med);
}

.ap-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ap-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
}

.ap-modal-panel {
    position: relative;
    width: calc(100% - 2 * var(--sp-5));
    max-width: 400px;
    background: var(--c-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    padding: var(--sp-6) var(--sp-5);
}

/* Bouton close partagé : mêmes dimensions/position sur .ap-modal et .as-modal.
   La couleur de hover varie par modal (défini plus bas). */
.ap-modal-close,
.as-modal-close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--c-text-muted);
    border-radius: var(--r-full);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.ap-modal-close:hover,
.ap-modal-close:focus-visible {
    background: var(--c-bg-alt);
    color: var(--c-text);
    outline: none;
}

/* ----------------------------------------------------------------------------
   LEVEL PROGRESS BAR (.ap-level-progress) — réutilisable sur fond clair.
   Variante V2 du pattern .pts-hero-progress (qui reste en migration-logged.css,
   stylé pour fond sombre sur /fr/points). Ici : rectangle légèrement arrondi.
   ---------------------------------------------------------------------------- */

.ap-level-progress-header {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    margin: 0 0 var(--sp-1);
    width: 100%;
    text-align: center;
}

.ap-level-progress {
    position: relative;
    height: 8px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.ap-level-progress-bar {
    height: 100%;
    background: var(--c-primary);
    border-radius: var(--r-sm);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
}

.ap-level-progress-text {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    text-align: center;
    margin: var(--sp-2) 0 var(--sp-4);
}


/* ----------------------------------------------------------------------------
   USER MODAL (.ap-user-modal) — contenu injecté en AJAX par migration-v2.js.
   Layout : avatar + nom + date + bio + barre progression + compteurs + top pays + CTAs.
   ---------------------------------------------------------------------------- */

.ap-user-modal .ap-modal-panel {
    max-width: 460px;
    width: 100%;
    padding: var(--sp-6);
}

.ap-user-modal-loading {
    padding: var(--sp-5) 0;
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-body-sm);
}

.ap-user-modal-loading[hidden] { display: none; }

.ap-user-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
}

.ap-user-modal-avatar {
    width: 96px;
    height: 96px;
    border-radius: var(--r-full);
    object-fit: cover;
    border: 3px solid var(--c-primary-bg);
}

.ap-user-modal-name {
    font-family: var(--font-sans);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    margin: 0;
    line-height: var(--lh-tight);
}

.ap-user-modal-joined {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    margin: 0 0 var(--sp-2);
}

.ap-user-modal-bio {
    font-size: var(--fs-body);
    color: var(--c-text);
    line-height: var(--lh-normal);
    margin: 0 0 var(--sp-3);
    padding: 0 var(--sp-3);
    font-style: italic;
}

/* Progression barre alignée sur la largeur utile du modal. */
.ap-user-modal-body .ap-level-progress { width: 100%; }

/* Compteurs : 3 pilules horizontales (abonnés / suivis / publications). */
.ap-user-modal-counts {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: flex;
    justify-content: center;
    gap: var(--sp-5);
    width: 100%;
}

.ap-user-modal-counts > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ap-user-modal-count-value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    line-height: 1;
}

.ap-user-modal-count-label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Top 3 pays d'expertise : picto à gauche, meta (nom + barre + points) à droite. */
.ap-user-modal-expertise-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    margin: 0 0 var(--sp-2);
    align-self: flex-start;
}

.ap-user-modal-expertise {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 100%;
}

.ap-user-modal-expertise-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.ap-user-modal-expertise-picto {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.ap-user-modal-expertise-picto-empty {
    display: block;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border-light);
}

.ap-user-modal-expertise-meta {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px var(--sp-2);
    align-items: center;
    text-align: left;
}

.ap-user-modal-expertise-name {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-strong);
}

.ap-user-modal-expertise-points {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
}

.ap-user-modal-expertise-bar-wrap {
    grid-column: 1 / span 2;
    grid-row: 2;
    height: 6px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.ap-user-modal-expertise-bar {
    height: 100%;
    background: var(--c-primary);
    border-radius: var(--r-sm);
    transition: width var(--t-med);
}

/* CTAs : follow + contact + profil — boutons égaux horizontalement. */
.ap-user-modal-actions {
    display: flex;
    gap: var(--sp-2);
    width: 100%;
    margin-top: var(--sp-2);
}

.ap-user-modal-follow,
.ap-user-modal-contact,
.ap-user-modal-profile {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--c-primary);
    border-radius: var(--r-md);
    color: var(--c-primary);
    background: var(--c-bg);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    text-align: center;
}

.ap-user-modal-follow:hover,
.ap-user-modal-follow:focus-visible,
.ap-user-modal-contact:hover,
.ap-user-modal-contact:focus-visible,
.ap-user-modal-profile:hover,
.ap-user-modal-profile:focus-visible {
    background: var(--c-primary-bg);
    outline: none;
    text-decoration: none;
}

.ap-user-modal-follow.is-following {
    background: var(--c-primary);
    color: #fff;
}

/* Reset visuel pour <button.ap-user-trigger> (ex <a>). color: laissé aux classes
   contextuelles (.ap-post-author en primary, .ap-lightbox-comment-author en noir…). */
button.ap-user-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}


/* ============================================================================
   SEARCH MODAL (.as-modal)
   Overlay centrée haut, form GET vers unified_search. Ouverture : JS intercepte
   le clic sur #mh-search-trigger. Fermeture : backdrop, X, Escape.
   ============================================================================ */

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

.as-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh var(--sp-4) var(--sp-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med);
}

.as-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.as-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
}

.as-modal-panel {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: var(--c-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    transform: translateY(-12px);
    transition: transform var(--t-med);
}

.as-modal.is-open .as-modal-panel {
    transform: translateY(0);
}

/* Hover .as-modal-close — dimensions/position dans le sélecteur groupé plus haut */
.as-modal-close:hover,
.as-modal-close:focus-visible {
    background: var(--c-primary-bg);
    color: var(--c-brand);
    outline: none;
}

.as-title {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--c-brand);
    padding-right: var(--sp-8);
}

.as-form {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
}

.as-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.as-input-icon {
    position: absolute;
    left: var(--sp-3);
    display: inline-flex;
    align-items: center;
    color: var(--c-text-muted);
    pointer-events: none;
}

.as-input {
    width: 100%;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 20px + var(--sp-2));
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--c-text);
    background: var(--c-bg);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.as-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-bg);
}

.as-input::placeholder {
    color: var(--c-text-muted);
}

.as-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--t-fast);
    white-space: nowrap;
}

.as-submit:hover,
.as-submit:focus-visible {
    background: var(--c-primary-hover);
    outline: none;
}

/* Utility accessibilité — cache visuellement un élément sans le cacher aux
   lecteurs d'écran. Réutilisable partout dans le scope V2. */
.v2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile : input pleine largeur, submit en iconique seul */
@media (max-width: 575px) {
    .as-modal {
        padding: 6vh var(--sp-3) var(--sp-3);
    }
    .as-modal-panel {
        padding: var(--sp-5) var(--sp-4) var(--sp-4);
    }
    .as-title {
        font-size: var(--fs-h4);
    }
    .as-submit span {
        display: none;
    }
    .as-submit {
        padding: 0 var(--sp-3);
    }
}


/* ============================================================================
   FOOTER (.af-footer)
   ============================================================================ */

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

.af-footer {
    background: var(--c-primary-darker);
    color: rgba(255,255,255,0.88);
    padding: var(--sp-10) var(--sp-4) var(--sp-5);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
}

.af-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7);
    max-width: 1200px;
    margin: 0 auto var(--sp-7);
}

@media (min-width: 768px) {
    .af-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.af-footer-col {
    min-width: 0;
}

.af-footer-heading {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: #fff;
    margin: 0 0 var(--sp-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.af-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.af-footer-list a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: var(--fs-body-sm);
    transition: color var(--t-fast);
}

.af-footer-list a:hover,
.af-footer-list a:focus-visible {
    color: #fff;
    text-decoration: underline;
    outline: none;
}

.af-footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,0.12);
}

@media (min-width: 768px) {
    .af-footer-bar {
        flex-direction: row;
        justify-content: space-between;
    }
}

.af-footer-copyright {
    font-size: var(--fs-body-sm);
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.af-footer-social {
    display: flex;
    gap: var(--sp-3);
}

.af-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: var(--r-full);
    transition: background var(--t-fast), color var(--t-fast);
}

.af-footer-social a:hover,
.af-footer-social a:focus-visible {
    background: var(--c-primary);
    color: #fff;
    outline: none;
}

.af-social-icon {
    display: block;
}


/* ============================================================================
   RESPONSIVE — ajustements HP V2
   ============================================================================ */

@media (max-width: 767px) {
    .ap-section {
        padding: var(--sp-7) var(--sp-4);
    }
    .ap-hero {
        height: 300px;
    }
    .ap-hero-intro {
        padding: var(--sp-6) var(--sp-4);
    }
}

@media (max-width: 520px) {
    .ap-hero {
        height: 250px;
    }
    .ap-hero-title {
        font-size: 24px;
    }
    .ap-hero-breadcrumb {
        font-size: 12px;
    }
    .ap-hero-credit {
        font-size: 10px;
    }
}

@media (max-width: 575px) {
    .ap-btn-lg {
        padding: var(--sp-3) var(--sp-5);
        font-size: var(--fs-md);
    }
    .ap-cta-block {
        padding: var(--sp-7) var(--sp-4);
    }
    .ap-searchbar-input {
        padding: var(--sp-3) var(--sp-4);
        font-size: 16px; /* évite le zoom iOS au focus */
    }
    .ap-searchbar-btn {
        padding: 0 var(--sp-4);
    }
}


/* ============================================================================
   UTILITIES — .is-gated (lien d'entité non indexable, ouvre modal auth)
   ----------------------------------------------------------------------------
   Visuellement souligné en tirets pour signaler que ce n'est pas une vraie nav.
   Posé par la macro entityLink (macro/link.html.twig) sur les <button> qui
   pointent vers une page d'entité jugée trop pauvre en contenu.
   ============================================================================ */

.is-gated {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dashed;
    text-underline-offset: 2px;
}

.is-gated:hover,
.is-gated:focus-visible {
    text-decoration-style: solid;
    outline: none;
}


/* ============================================================================
   AUTH MODAL (.al-*) — modal connexion/inscription, 2 onglets
   ----------------------------------------------------------------------------
   Règles UNLAYERED scopées par .al-modal, conforme à la stratégie cascade V2
   (cf. tête de fichier). Mobile first : fullscreen ≤575px, card centrée au-delà.
   Inputs en font-size:16px sur mobile pour éviter le zoom iOS.
   ============================================================================ */

/* Reset box-sizing scopé — sans ça width:100% + padding des inputs/boutons
   déborde (le CSS V2 global est encore en content-box par défaut). */
.al-modal,
.al-modal *,
.al-modal *::before,
.al-modal *::after {
    box-sizing: border-box;
}

.al-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: al-fade-in var(--t-fast) ease-out;
}

.al-modal[hidden] {
    display: none;
}

@keyframes al-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Variante "standalone" : la même structure HTML que le modal auth, mais
   rendue inline dans le flux d'une page dédiée (page de reset password).
   On réutilise ainsi toutes les règles .al-modal .al-* (form, input, bouton…)
   sans duplication CSS. L'overlay / backdrop / z-index sont désactivés. */
.al-modal.al-modal-standalone {
    position: static;
    inset: auto;
    z-index: auto;
    padding: var(--sp-8) var(--sp-4);
    animation: none;
    min-height: calc(100vh - 72px);
}

.al-modal.al-modal-standalone .al-backdrop {
    display: none;
}

.al-modal.al-modal-standalone .al-panel {
    animation: none;
}

.al-modal .al-backdrop {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
}

.al-modal .al-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    margin: var(--sp-4);
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    background: var(--c-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    overflow-y: auto;
    animation: al-scale-in var(--t-fast) ease-out;
}

@keyframes al-scale-in {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.al-modal .al-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--r-full);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.al-modal .al-close:hover,
.al-modal .al-close:focus-visible {
    background: var(--c-bg-alt);
    color: var(--c-text);
    outline: none;
}

.al-modal .al-title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-serif);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--c-brand);
    text-align: center;
}

.al-modal .al-subtitle {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-body);
    color: var(--c-text-muted);
    text-align: center;
}

/* Onglets */
.al-modal .al-tabs {
    display: flex;
    gap: var(--sp-1);
    margin: var(--sp-5) 0 var(--sp-5);
    padding: 4px;
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
}

.al-modal .al-tab {
    flex: 1;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: none;
    border-radius: calc(var(--r-md) - 2px);
    color: var(--c-text-muted);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.al-modal .al-tab.is-active {
    background: var(--c-bg);
    color: var(--c-brand);
    font-weight: var(--fw-semibold);
    box-shadow: var(--sh-sm);
}

/* Bouton Google + bouton Submit : style commun "outlined primary" pour mettre les deux
   parcours auth (SSO Google et email/mdp) sur le même niveau de valorisation. */
.al-modal .al-btn-google,
.al-modal .al-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 56px;
    padding: var(--sp-4);
    background: var(--c-bg);
    color: var(--c-text-strong);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    border: 2px solid var(--c-primary);
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.al-modal .al-btn-google:hover,
.al-modal .al-btn-google:focus-visible,
.al-modal .al-btn-submit:hover:not(:disabled),
.al-modal .al-btn-submit:focus-visible:not(:disabled) {
    background: var(--c-primary-bg);
    border-color: var(--c-primary-dark);
    text-decoration: none;
    outline: none;
}

/* Le bouton Google est la première action CTA après les tabs — on aère franchement
   pour bien le détacher du contexte "onglets" et affirmer son statut de parcours principal. */
.al-modal .al-btn-google {
    margin-top: var(--sp-8);
}

/* Séparateur "ou" — volontairement visible : les deux CTA auth sont équivalents,
   le "ou" affirme le choix (pas un simple fallback entre primaire et secondaire). */
.al-modal .al-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-7) 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text-strong);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.al-modal .al-divider::before,
.al-modal .al-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

/* Form */
.al-modal .al-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.al-modal .al-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.al-modal .al-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text);
}

.al-modal .al-input {
    width: 100%;
    min-height: 40px;
    padding: var(--sp-1) var(--sp-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font-size: var(--fs-md);
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.al-modal .al-input:focus-visible {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 167, 153, .15);
    outline: none;
}

.al-modal .al-input:invalid:not(:placeholder-shown) {
    border-color: var(--c-negative);
}

/* Input + bouton toggle password */
.al-modal .al-input-group {
    position: relative;
}

.al-modal .al-input-group .al-input {
    padding-right: 44px;
}

.al-modal .al-pw-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.al-modal .al-pw-toggle:hover,
.al-modal .al-pw-toggle:focus-visible {
    background: var(--c-bg-alt);
    color: var(--c-text);
    outline: none;
}

/* L'œil barré est visible quand le mot de passe est affiché (classe is-shown posée par le JS) */
.al-modal .al-pw-icon-hide { display: none; }
.al-modal .al-pw-toggle.is-shown .al-pw-icon-show { display: none; }
.al-modal .al-pw-toggle.is-shown .al-pw-icon-hide { display: block; }

.al-modal .al-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-subtle);
}

.al-modal .al-hint.is-ok {
    color: var(--c-primary);
}

.al-modal .al-hint.is-error {
    color: var(--c-negative);
}

/* Turnstile */
.al-modal .al-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin-top: var(--sp-1);
}

.al-modal .al-turnstile:empty {
    min-height: 0;
}

/* Bloc d'erreurs */
.al-modal .al-errors {
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-negative-bg);
    border: 1px solid var(--c-negative-light);
    border-radius: var(--r-md);
    color: var(--c-negative-dark);
    font-size: var(--fs-body-sm);
}

.al-modal .al-errors[hidden] {
    display: none;
}

/* Bouton submit : style "outlined primary" commun avec le bouton Google (cf. plus haut).
   États spécifiques au submit (disabled, loading) définis ici. */
.al-modal .al-btn-submit {
    margin-top: var(--sp-2);
}

.al-modal .al-btn-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.al-modal .al-btn-submit.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.al-modal .al-btn-submit.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(0, 167, 153, .25);
    border-top-color: var(--c-primary);
    border-radius: var(--r-full);
    animation: al-spin 700ms linear infinite;
}

@keyframes al-spin {
    to { transform: rotate(360deg); }
}

/* Lien secondaire (mot de passe oublié) */
.al-modal .al-secondary {
    margin: var(--sp-3) 0 0;
    text-align: center;
    font-size: var(--fs-body-sm);
}

.al-modal .al-secondary a {
    color: var(--c-primary);
    text-decoration: none;
}

.al-modal .al-secondary a:hover {
    text-decoration: underline;
}

/* Vue succès */
.al-modal .al-success {
    text-align: center;
}

.al-modal .al-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: var(--sp-2) auto var(--sp-4);
    background: var(--c-primary-bg);
    border-radius: var(--r-full);
    color: var(--c-primary);
}

.al-modal .al-view[hidden] {
    display: none;
}

.al-modal .al-tabpanel[hidden] {
    display: none;
}

/* Responsive — fullscreen ≤575px */
@media (max-width: 575px) {
    .al-modal .al-panel {
        max-width: none;
        max-height: 100vh;
        margin: 0;
        padding: var(--sp-7) var(--sp-5) var(--sp-5);
        border-radius: 0;
    }
    .al-modal .al-title {
        font-size: var(--fs-2xl);
    }
    /* font-size 16px sur les inputs : iOS ne zoom pas sur focus à 16px+ */
    .al-modal .al-input {
        font-size: 16px;
    }
}