:root {
    /* --- Palette "Navigator Blue" : alignee sur le logo officiel (bouclier
       bleu sur fond marine/noir) - remplace l'ancien accent "Ember" (orange)
       qui avait ete choisi avant que le logo definitif n'existe. Fond marine
       tres sombre pour le site public et les elements "badge" (cartes
       QR/code-barre, scanner) ; fond clair a dominante froide pour l'espace
       admin (lisibilite des donnees). --- */
    --navigator-bg: #0a0e1a;
    --navigator-bg-elevated: #10182a;
    --navigator-primary: #1a56db;
    --navigator-primary-light: #4d7ff0;
    /* --navigator-primary sur blanc = 2,80:1 (sous les 3:1 AA grand texte).
       -strong est reservee aux fonds qui portent du texte/icone blanc statique
       (lien nav actif, avatar, bouton principal...) et a tout texte lisible ;
       -primary/-light restent pour les accents et icones seuls. */
    --navigator-primary-strong: #0a2f7a;
    /* Etat survol de -strong (bouton principal) : assombri plutot qu'eclairci
       pour rester au-dessus de 4,5:1 tout en gardant un retour visuel au survol. */
    --navigator-primary-strong-hover: #082463;
    --navigator-primary-bg: #dbe7fb;
    --navigator-accent: #e8a33d;
    --navigator-white: #ffffff;
    --navigator-gray: #94a3b8;
    --navigator-gray-dark: #475569;
    --navigator-border: rgba(255, 255, 255, 0.08);
    --navigator-success: #15803d;
    --navigator-success-bg: #e7f6ec;
    --navigator-warning: #b45309;
    --navigator-warning-bg: #fdf3e2;
    --navigator-info: #0e7490;
    --navigator-info-bg: #e3f4f7;
    --navigator-danger: #be123c;
    --navigator-danger-bg: #fce7ec;
    --navigator-paper: #f7f9fc;
    --navigator-paper-dim: #eef1f6;
    --navigator-slate: #1a2540;
}

/* --- Mode nuit (admin uniquement) : bascule via data-bs-theme="dark" sur
   <html>, applique seulement dans layouts/app.blade.php (jamais sur le
   site public/la page de connexion, qui n'incluent pas ce script) - voir
   assets/js/theme-toggle.js. Les composants Bootstrap (cartes, formulaires,
   tableaux...) suivent deja nativement cet attribut depuis Bootstrap 5.3 ;
   ce bloc n'adapte que nos propres tokens. --------------------------------- */
html[data-bs-theme="dark"] {
    --navigator-paper: var(--navigator-bg-elevated);
    --navigator-paper-dim: var(--navigator-slate);
    --navigator-gray-dark: var(--navigator-gray);
}

body {
    background-color: var(--navigator-paper);
    font-family: 'Inter', system-ui, sans-serif;
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================
   Navbar admin : remplace la sidebar + le mobile-topbar + l'app-topbar
   (fusionnes en une seule barre horizontale fixe). Menus deroulants au
   survol sur pointeur fin (voir assets/js/admin-navbar.js) ; sur tactile,
   Bootstrap gere nativement l'ouverture/fermeture au clic dans le panneau
   mobile-collapse, sans JS supplementaire. ------------------------------ */
.admin-navbar {
    background: var(--navigator-bg);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.5rem 1rem;
}

.admin-navbar .navbar-brand {
    display: flex;
    align-items: center;
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--navigator-white);
}

.navbar-brand-logo {
    height: 32px;
    width: 32px;
    object-fit: contain;
    margin-right: 0.45rem;
    flex-shrink: 0;
}

.admin-navbar .navbar-brand .wordmark-accent {
    color: var(--navigator-accent);
}

.admin-navbar .navbar-toggler {
    border-color: var(--navigator-border);
    padding: 0.35rem 0.55rem;
}

.admin-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.admin-navbar-links .nav-link {
    color: var(--navigator-gray);
    border-radius: 0.5rem;
    padding: 0.55rem 0.55rem !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* --- Bande "etroite" entre le point de rupture xl (1200px) et la largeur ou
   la barre retrouve assez d'air (1440px) : neuf entrees de premier niveau
   plus le wordmark et les actions ne tiennent pas a la densite normale sur
   les resolutions de portable courantes (1280, 1366px). On resserre la
   densite plutot que de retirer des liens ou de masquer des libelles :
   aucune perte de fonctionnalite ou de decouvrabilite. Mesure Playwright a
   l'appui (voir progress.md, revue finale). ---------------------------------- */
@media (min-width: 1200px) and (max-width: 1479.98px) {
    .admin-navbar-links .nav-link {
        padding: 0.4rem 0.3rem !important;
        gap: 0.2rem;
        font-size: 0.75rem;
    }

    .admin-navbar-links .dropdown-toggle::after {
        margin-left: 0.15rem;
    }

    .admin-navbar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .admin-navbar .navbar-brand {
        font-size: 1rem;
    }

    .admin-navbar-actions {
        gap: 0.2rem;
    }

    .theme-toggle-btn,
    .notification-bell .btn,
    .admin-account-avatar {
        width: 2.15rem;
        height: 2.15rem;
    }
}

.admin-navbar-links .nav-link.active,
.admin-navbar-links .nav-link:hover,
.admin-navbar-links .nav-link:focus-visible {
    background: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

.admin-navbar .dropdown-menu {
    background: var(--navigator-bg-elevated);
    border: 1px solid var(--navigator-border);
    border-radius: 0.65rem;
    padding: 0.4rem;
    margin-top: 0.35rem;
}

.admin-navbar .dropdown-item {
    color: var(--navigator-gray);
    border-radius: 0.45rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-navbar .dropdown-item:hover,
.admin-navbar .dropdown-item:focus-visible,
.admin-navbar .dropdown-item.active {
    background: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

.admin-navbar .dropdown-item-text {
    color: var(--navigator-white);
}

.admin-navbar .dropdown-menu .text-muted {
    /* .text-muted de Bootstrap force `color` en !important (couleur pensee
       pour un fond clair) ; sans ce contre-override, le role du compte et
       les notifications lues seraient illisibles sur le panneau sombre de
       la navbar (cloche + menu compte, desormais alignes sur le meme habillage
       que les dropdowns de navigation). */
    color: var(--navigator-gray) !important;
}

.admin-navbar .dropdown-item.text-center {
    /* .dropdown-item est en display:flex (icone + libelle alignes) ; le
       text-align de Bootstrap n'a alors plus prise sur son seul contenu
       textuel (cas du lien "Voir tout" de la cloche), il faut centrer via
       le flex lui-meme. */
    justify-content: center;
}

.admin-navbar .dropdown-menu hr,
.admin-navbar .dropdown-divider {
    /* Couleurs par defaut de Bootstrap pensees pour un panneau clair :
       invisibles sur le fond sombre partage par les trois panneaux de la
       navbar (nav, cloche, compte). */
    border-color: var(--navigator-border);
    opacity: 1;
}

.admin-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-account-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: 0;
    padding: 0.35rem 0.6rem;
    border-radius: 0.65rem;
    color: var(--navigator-white);
    text-align: left;
}

.admin-account-toggle:hover,
.admin-account-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.admin-account-avatar {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--navigator-primary-strong);
    color: var(--navigator-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

/* --- Bouton mode nuit : meme traitement rond que les autres actions de la
   navbar (cloche, compte). Une seule des deux icones est affichee, selon
   data-bs-theme sur <html> (voir assets/js/theme-toggle.js). ---------------- */
.theme-toggle-btn {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--navigator-border);
    background: transparent;
    color: var(--navigator-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

.theme-toggle-icon-dark {
    display: none;
}

html[data-bs-theme="dark"] .theme-toggle-icon-light {
    display: none;
}

html[data-bs-theme="dark"] .theme-toggle-icon-dark {
    display: inline;
}

/* Ouverture au survol : uniquement sur pointeur fin avec support du hover
   (souris/trackpad). Le tactile garde le comportement clic natif de
   Bootstrap (deja fonctionnel dans le panneau mobile-collapse). Bootstrap
   ne bascule que "display" sur .show (non transitionnable) : une regle
   "transition" ici ne jouerait jamais. On anime donc l'apparition via une
   keyframe one-shot sur .show plutot qu'une transition classique. */
@media (hover: hover) and (pointer: fine) {
    .admin-navbar .dropdown-menu.show {
        animation: dropdownIn 0.15s ease both;
    }
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-navbar .dropdown-menu.show {
        animation: none;
    }
}

@media (max-width: 1199.98px) {
    .admin-navbar-links {
        padding: 0.5rem 0;
    }

    .admin-navbar-links .dropdown-menu {
        position: static;
        background: transparent;
        border: none;
        padding-left: 1rem;
        margin-top: 0;
        box-shadow: none;
    }

    .admin-navbar-actions {
        border-top: 1px solid var(--navigator-border);
        padding-top: 0.75rem;
        margin-top: 0.5rem;
    }
}

.main-content {
    flex: 1;
    max-width: 1600px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.main-content-inner {
    padding: 1.5rem 2rem 2rem;
}

@media (max-width: 1199.98px) {
    .main-content-inner {
        padding: 1.25rem;
    }
}

/* --- Cartes : l'app en amont (login) utilise deja un traitement carte/ombre
   genereux ; ceci l'etend aux .card Bootstrap par defaut du reste de
   l'application, qui restaient plates (bordure fine, pas d'ombre). ---------- */
.card {
    border-color: rgba(15, 23, 42, 0.07);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px -16px rgba(15, 23, 42, 0.16);
}

html[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 24px -16px rgba(0, 0, 0, 0.55);
}

/* --- Cartes stat (tableaux de bord admin + client) : icone coloree qui
   encode le type de donnee (volume neutre / signal positif / urgence). ------ */
.stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.stat-icon {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-icon.is-primary { background: var(--navigator-primary-bg); color: var(--navigator-primary); }
.stat-icon.is-success { background: var(--navigator-success-bg); color: var(--navigator-success); }
.stat-icon.is-warning { background: var(--navigator-warning-bg); color: var(--navigator-warning); }
.stat-icon.is-info { background: var(--navigator-info-bg); color: var(--navigator-info); }
.stat-icon.is-danger { background: var(--navigator-danger-bg); color: var(--navigator-danger); }

.stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--navigator-gray-dark);
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.stat-card .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

html[data-bs-theme="dark"] .stat-card .stat-value {
    color: var(--navigator-white);
}

/* --- Suivi physique : une carte par indicateur mesure (poids, IMC...), avec
   sa propre mini-courbe - vue d'ensemble en un coup d'oeil plutot qu'un menu
   deroulant + un seul grand graphique a la fois. --------------------------- */
.metric-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.metric-card {
    background: var(--navigator-paper-dim);
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.metric-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navigator-gray-dark);
}

.metric-card-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-card-value .metric-card-unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--navigator-gray-dark);
}

.chart-donut-wrap {
    position: relative;
    height: 200px;
}

.metric-card-badge {
    margin: 0.3rem 0 0.1rem;
}

.metric-card-delta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--navigator-gray-dark);
}

.metric-card-sparkline-wrap {
    margin-top: 0.35rem;
    height: 34px;
}

/* --- Objectif (poids/masse grasse) : remplace la fine barre Bootstrap par
   une piste qui situe la valeur actuelle entre le depart et la cible, plutot
   qu'un seul pourcentage abstrait. ------------------------------------------ */
.goal-track {
    height: 0.45rem;
    background: var(--navigator-paper-dim);
    border-radius: 1rem;
    overflow: hidden;
    margin: 0.5rem 0 0.3rem;
}

.goal-track-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--navigator-accent), var(--navigator-primary));
    border-radius: 1rem;
}

.goal-track-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--navigator-gray-dark);
}

.goal-track-current {
    font-weight: 700;
    color: var(--navigator-primary-strong);
}

.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navigator-gray-dark);
    margin-bottom: 0.65rem;
}

/* --- Barres de progression (resultats de sondage) : bleu de la marque plutot
   que le bleu Bootstrap par defaut (--bs-primary, jamais harmonise avec
   --navigator-primary ailleurs dans l'app). ---------------------------------- */
.progress-bar {
    background-color: var(--navigator-primary-strong);
}

/* --- Badge de type de question (sondages) : meme langage visuel que les
   icones stat (cercle colore), a plus petite echelle pour une ligne de liste. */
.question-type-badge {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.question-type-badge.is-primary { background: var(--navigator-primary-bg); color: var(--navigator-primary); }
.question-type-badge.is-warning { background: var(--navigator-warning-bg); color: var(--navigator-warning); }
.question-type-badge.is-info { background: var(--navigator-info-bg); color: var(--navigator-info); }

/* --- Vignettes bandeau/phototheque (admin) : apercu carre coherent, que ce
   soit une image ou une video (pas de generation de miniature serveur). ---- */
.media-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #eef1f8;
}

html[data-bs-theme="dark"] .media-thumb {
    background: var(--navigator-slate);
}

.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-thumb-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navigator-bg);
    color: var(--navigator-white);
    font-size: 1.5rem;
}

.min-width-0 {
    min-width: 0;
}

/* --- Code QR : encadre comme une carte d'acces plutot qu'un SVG pose brut. - */
.qr-frame {
    display: inline-block;
    padding: 1rem;
    background: var(--navigator-white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
}

/* --- Cloche de notification : bouton rond plutot qu'un bouton rectangulaire
   isole dans l'espace vide en haut de page. --------------------------------- */
.notification-bell .btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-bs-theme="dark"] .notification-bell .btn {
    border-color: rgba(255, 255, 255, 0.15);
}

/* --- Etats vides : une icone atténuée accompagne le texte plutot qu'une
   simple ligne muette. ------------------------------------------------------- */
.empty-state {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navigator-gray-dark);
}

/* #scan-placeholder (page Accès) : aligne sa hauteur sur la colonne camera
   voisine UNIQUEMENT quand les deux colonnes sont cote a cote (>= md). En
   dessous de md, les colonnes Bootstrap s'empilent sur des lignes flex
   separees ; un h-100 permanent y calculait une hauteur de colonne trop
   petite pour son propre contenu (empty-state + alerte camera), qui
   debordait alors sur la section "Historique du jour" suivante. */
@media (min-width: 768px) {
    #scan-placeholder {
        height: 100%;
    }
}

.empty-state i {
    font-size: 1.05rem;
    opacity: 0.55;
}

/* --- Entree douce du contenu principal a chaque navigation.
   margin-top (pas transform) : un transform "both" reste applique en
   permanence apres l'animation et cree un stacking context sur .page-enter,
   ce qui piegeait les modales Bootstrap (rendues dans @yield('content'),
   donc a l'interieur) sous le .modal-backdrop ajoute au <body> — visible
   mais impossible a cliquer. -------------------------------------------- */
@keyframes fadeInUp {
    from { opacity: 0; margin-top: 10px; }
    to { opacity: 1; margin-top: 0; }
}

.page-enter {
    animation: fadeInUp 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .page-enter {
        animation: none;
    }
}

/* --- Le .modal-backdrop de Bootstrap (ajoute en fin de <body>, z-index:1050)
   gagnait quand meme le hit-test face au contenu de la modale (z-index:1055)
   sur cette page en particulier, malgre un z-index verifie correct et sans
   stacking context parasite sur aucun ancetre : reproductible uniquement en
   contexte reel (une page isolee minimale ne le reproduit pas), la cause
   exacte reste incertaine. pointer-events:none, verifie empiriquement,
   corrige le clic — la modale actuelle (#scanResultModal) utilise de toute
   facon backdrop:'static' (cliquer dessus ne doit pas la fermer), donc perdre
   l'effet "secousse" au clic sur le fond est un compromis mineur. A revoir si
   une future modale non-statique a besoin du clic sur son fond pour se fermer. */
.modal-backdrop {
    pointer-events: none;
}

.login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.28), transparent 42%),
        radial-gradient(circle at 85% 75%, rgba(96, 165, 250, 0.2), transparent 46%),
        linear-gradient(160deg, #05070d 0%, var(--navigator-bg) 45%, var(--navigator-bg-elevated) 100%);
    padding: 1.5rem;
    overflow: hidden;
}

.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
    animation: loginBlobDrift 16s ease-in-out infinite alternate;
}

.login-page::before {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, var(--navigator-primary) 0%, transparent 70%);
}

.login-page::after {
    width: 480px;
    height: 480px;
    bottom: -160px;
    right: -120px;
    background: radial-gradient(circle, var(--navigator-accent) 0%, transparent 70%);
    animation-delay: -8s;
}

@keyframes loginBlobDrift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(40px, 30px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .login-page::before,
    .login-page::after {
        animation: none;
    }
}

.login-card {
    position: relative;
    z-index: 1;
    background: var(--navigator-white);
    border-radius: 1.1rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.5s ease both;
    transition: max-width 0.3s ease;
}

.login-card.is-wide {
    max-width: 620px;
}

.login-card-body {
    padding: 2.25rem;
}

.login-logo {
    display: block;
    margin: 0 auto 1rem;
    width: 140px;
    height: 140px;
    object-fit: contain;
}

/* --- Bascule connexion / inscription sur la meme page (pas de navigation). - */
.auth-toggle {
    display: flex;
    background: #eef1f8;
    border-radius: 0.65rem;
    padding: 0.25rem;
    margin-bottom: 1.75rem;
    gap: 0.25rem;
}

.auth-toggle-btn {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navigator-gray-dark);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-toggle-btn.active {
    background: var(--navigator-white);
    color: var(--navigator-primary-strong);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.auth-pane {
    animation: fadeInUp 0.35s ease both;
}

/* --- Choix de formule (inscription publique) : boutons a cocher plutot
   qu'un <select>, aucun coche par defaut - le client doit faire un choix
   actif et visible, pas laisser une option presélectionnée passer inapercue. */
.plan-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
}

.plan-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 1rem 0.65rem;
    border: 2px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.85rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.plan-choice:hover {
    border-color: var(--navigator-primary-strong);
}

.plan-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.plan-choice-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.plan-choice-price {
    font-size: 0.8rem;
    color: var(--navigator-gray-dark);
}

.plan-choice:has(input:checked) {
    background: var(--navigator-primary-strong);
    border-color: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

.plan-choice:has(input:checked) .plan-choice-price {
    color: var(--navigator-white);
}

.plan-choice:has(input:focus-visible) {
    outline: 2px solid var(--navigator-primary-strong);
    outline-offset: 2px;
}

/* --- Disciplines pratiquees (inscription publique) : choix multiple sous
   forme de puces a cocher, aucune cochee par defaut - purement informatif,
   ne bloque jamais la soumission du formulaire. */
.discipline-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.discipline-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 2px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.discipline-choice:hover {
    border-color: var(--navigator-primary-strong);
}

.discipline-choice input[type="checkbox"],
.discipline-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.discipline-choice:has(input:checked) {
    background: var(--navigator-primary-strong);
    border-color: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

.discipline-choice:has(input:focus-visible) {
    outline: 2px solid var(--navigator-primary-strong);
    outline-offset: 2px;
}

.discipline-choice-grid-sm {
    max-width: 220px;
}

.discipline-choice-grid-stack {
    flex-direction: column;
    align-items: flex-start;
}

.discipline-choice-grid-stack .discipline-choice {
    width: 100%;
}

/* --- DataTables (listes admin) : reprend le look Bootstrap 5 par defaut,
   seule la pastille de pagination active est reteintee pour eviter le bleu
   Bootstrap, absent du reste de l'appli. */
.dt-container .pagination .page-item.active .page-link {
    background-color: var(--navigator-primary-strong);
    border-color: var(--navigator-primary-strong);
}

.dt-container .pagination .page-link {
    color: var(--navigator-primary-strong);
}

.dt-container .pagination .page-item.disabled .page-link {
    color: var(--navigator-gray-dark);
}

.btn-navigator-primary {
    background: var(--navigator-primary-strong);
    border-color: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

.btn-navigator-primary:hover {
    background: var(--navigator-primary-strong-hover);
    border-color: var(--navigator-primary-strong-hover);
    color: var(--navigator-white);
}

/* --- Equivalent de .btn-navigator-primary pour un badge (bg-primary de
   Bootstrap reste le bleu par defaut, jamais harmonise avec la palette
   Ember - cf. commentaire sur .progress-bar plus haut). ------------------- */
.badge-navigator-primary {
    background-color: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

/* --- Page publique --------------------------------------------------------------- */

.public-navbar {
    background: var(--navigator-bg);
    padding: 1rem 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.has-fixed-navbar {
    padding-top: 76px;
    scroll-padding-top: 76px;
}

@media (max-width: 991.98px) {
    .has-fixed-navbar {
        padding-top: 68px;
        scroll-padding-top: 68px;
    }
}

.public-navbar .navbar-brand {
    display: flex;
    align-items: center;
    color: var(--navigator-white);
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    font-weight: 800;
}

.public-navbar .nav-link {
    color: var(--navigator-gray);
}

.public-navbar .nav-link:hover {
    color: var(--navigator-white);
}

.public-navbar .navbar-toggler {
    border-color: var(--navigator-gray);
}

@media (max-width: 991.98px) {
    .public-navbar .navbar-collapse {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .public-navbar .navbar-collapse .btn {
        width: 100%;
    }
}

.public-hero {
    background: linear-gradient(180deg, var(--navigator-bg) 0%, var(--navigator-bg-elevated) 100%);
    color: var(--navigator-white);
    padding: 5rem 0;
    padding-bottom: 9rem;
    text-align: center;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
}

.public-hero h1 {
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    font-weight: 800;
}

.public-hero .tagline {
    color: var(--navigator-accent);
    font-size: 1.25rem;
}

/* --- Entree de la page publique : le hero s'anime au chargement (au-dessus
   de la ligne de flottaison, jamais visible en scroll-reveal) ; le reste de
   la page s'anime au scroll via IntersectionObserver (voir partials/assets ou
   le stack('scripts') de public/index.blade.php), classe .reveal -> .is-visible. */
.public-hero h1,
.public-hero .tagline,
.public-hero .btn {
    opacity: 0;
    animation: fadeInUp 0.6s ease both;
}

.public-hero .tagline { animation-delay: 0.12s; }
.public-hero .btn { animation-delay: 0.24s; }

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .public-hero h1,
    .public-hero .tagline,
    .public-hero .btn {
        animation: none;
        opacity: 1;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.public-carousel {
    background: var(--navigator-bg);
}

.public-carousel .carousel-item img {
    width: 100%;
    height: 520px;
    object-fit: contain;
    object-position: center center;
    background: var(--navigator-bg);
}

/* --- Legende sous l'image plutot qu'en incrustation : les images (flyers)
   portent deja leur propre texte, une legende superposee entrerait en
   collision avec lui une fois l'image entiere visible (object-fit: contain). */
.public-carousel .carousel-caption {
    position: static;
    background: var(--navigator-bg-elevated);
    padding: 0.75rem 1rem;
    border-radius: 0;
}

.public-carousel .carousel-control-prev,
.public-carousel .carousel-control-next {
    width: 4rem;
    opacity: 0.85;
}

.public-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--navigator-accent);
}

@media (max-width: 767.98px) {
    .public-carousel .carousel-item img {
        height: 320px;
    }

    /* Boutons icone seule (reordonner/supprimer une ligne de liste) : p-0 les
       rend trop petits pour le doigt (~23px). Zone de clic elargie par du
       padding sans grossir l'icone, pour ne pas alourdir la liste desktop. */
    .btn-link.p-0 {
        padding: 0.5rem !important;
        margin: -0.5rem !important;
    }
}

.public-section {
    padding: 4rem 0;
}

/* Echo du motif signature du hero (coin coupe en diagonale), a parcimonie :
   un seul autre point d'usage, juste avant la section Services. */
#services::before {
    content: '';
    display: block;
    height: 4vw;
    margin: -4rem 0 2rem;
    background: var(--navigator-bg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
}

.public-section-title {
    font-family: 'Archivo', 'Inter', system-ui, sans-serif;
    text-align: center;
    margin-bottom: 2.5rem;
    font-weight: 700;
}

.service-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.service-card i {
    font-size: 2rem;
    color: var(--navigator-primary);
    transition: transform 0.2s ease;
}

.service-card:hover i {
    transform: scale(1.12);
}

.pricing-card {
    border: 1px solid var(--navigator-border);
    border-radius: 0.75rem;
    padding: 2rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: var(--navigator-primary-light);
}

.pricing-card .price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--navigator-primary-strong);
}

.feature-badge,
.inclusion-card {
    padding: 1.5rem 1rem;
    height: 100%;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-badge:hover,
.inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.feature-badge i,
.inclusion-card i {
    display: block;
    font-size: 1.75rem;
    color: var(--navigator-primary);
    margin-bottom: 0.5rem;
}

.inclusion-card p {
    font-weight: 600;
}

.contact-info-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 2rem;
    height: 100%;
}

.contact-form-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.btn-whatsapp:hover {
    background: #1ebe59;
    border-color: #1ebe59;
    color: #fff;
}

.public-footer {
    background: var(--navigator-bg);
    color: var(--navigator-gray);
    padding: 2rem 0;
    text-align: center;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--navigator-white);
    font-size: 1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.social-links a:hover {
    background: var(--navigator-primary-strong);
    color: var(--navigator-white);
}

/* --- Bandeau : slide video au meme format que les photos. ------------------ */
.carousel-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Phototheque : grille de vignettes carrees, photo ou video, avec un
   apercu au survol coherent avec le reste des cartes de la page publique. -- */
.gallery-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 0;
    background: var(--navigator-bg);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-tile-video-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--navigator-bg) 0%, var(--navigator-bg-elevated) 100%);
}

.gallery-tile-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.gallery-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.65rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    color: #fff;
    font-size: 0.78rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#galleryLightbox .gallery-lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
}

/* --- Impression : aucune regle print n'existait jusqu'ici, imprimer une
   page imprimait toute la coquille (sidebar sombre, barre superieure,
   boutons). Masque le chrome de l'app, garde uniquement le contenu utile.
   .no-print doit rester DANS @media print : place hors media query, la regle
   masquait ces boutons (Imprimer, Filtrer, recu...) en permanence a l'ecran,
   pas seulement a l'impression. ---------------------------------------------- */
@media print {
    .no-print,
    .admin-navbar,
    .btn,
    form,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
    }

    .app-wrapper {
        display: block;
    }

    .main-content {
        max-width: none;
    }

    .main-content-inner {
        padding: 0;
    }

    body {
        background: #fff;
    }

    .card {
        box-shadow: none;
        border: 1px solid #d0d5dd;
        break-inside: avoid;
    }

    a[href]::after {
        content: none;
    }
}

/* --- Carte code QR : rendue comme un badge d'acces (nom, code, marque) plutot
   qu'un QR nu au milieu de la carte. ----------------------------------------- */
.qr-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(165deg, var(--navigator-bg) 0%, var(--navigator-bg-elevated) 100%);
    color: var(--navigator-white);
    box-shadow: 0 12px 30px -12px rgba(10, 14, 26, 0.45);
}

.health-form-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.qr-badge-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.qr-badge-brand {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navigator-accent);
    margin-bottom: 0.25rem;
}

.qr-badge-brand span {
    color: var(--navigator-gray);
    font-weight: 500;
}

.qr-badge .qr-frame {
    padding: 0.85rem;
    border-radius: 0.85rem;
    border: none;
}

/* --- Cadre code-barres : le SVG Code128 est rectangulaire (pas carre comme
   le QR), il doit donc pouvoir se retrecir dans le badge sans deborder. ---- */
.barcode-frame {
    max-width: 100%;
    overflow: hidden;
}

.barcode-frame svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.qr-badge-name {
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
}

.qr-badge-code {
    font-size: 0.8rem;
    color: var(--navigator-gray);
    letter-spacing: 0.04em;
}

.qr-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Impression ciblee d'une carte QR : le bouton "Imprimer" deplace la carte
   (id="qr-print-root", fin de layouts/app.blade.php) hors du flux normal via
   qr-card.js, sans quoi la regle @media print globale imprimerait toute la
   page plutot que le seul badge. ------------------------------------------- */
#qr-print-root {
    display: none;
}

@media print {
    body.printing-qr-only > *:not(#qr-print-root) {
        display: none !important;
    }

    body.printing-qr-only #qr-print-root {
        display: flex !important;
        justify-content: center;
        padding: 3rem 0;
    }

    body.printing-qr-only #qr-print-root .qr-badge {
        box-shadow: none;
        border: 1px solid #d0d5dd;
    }

    #page-refresh-fab {
        display: none !important;
    }
}

/* --- Bouton flottant "Actualiser la page" (voir layouts/app.blade.php). --- */
#page-refresh-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1020;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}

/* --- Lecteur QR (page Scan) : cadre coherent avec le reste des cartes. ----- */
.scan-reader {
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--navigator-bg);
    min-height: 320px;
}