/* [B-4-160 2026-10-13] Couche d'identité de RIF (docs/refonte/DIRECTION-RIF.md) — liée APRÈS rif-style.css (maquette,
   intouchée) et rif-pages.css (adaptations) : elle a le dernier mot. Motif : le « bulletin » — fiche blanche aux angles
   de 16 px, ombre douce plutôt que filet, bande latérale de 4 px qui dit sa nature (bleu : information, rouge : alerte,
   vert : fait accompli), posée sur un fond ivoire dans l'espace personnel. Aucune classe de grille Bootstrap n'est
   réécrite sur tout le site : chaque règle est limitée à .rif-main, .source-content, à l'espace ou à un composant RIF. */

:root{
    --rif-bleu:#075ea8;
    --rif-encre:#102c52;
    --rif-texte:#172b45;
    --rif-doux:#52647a;
    --rif-rouge:#bc283b;
    --rif-vert:#1f7a4d;
    --rif-ivoire:#f6f4ef;
    --rif-surface:#fff;
    --rif-bleu-pale:#e8f1fa;
    --rif-trait:#dfe5ec;
    --rif-espace-1:4px;
    --rif-espace-2:8px;
    --rif-espace-3:12px;
    --rif-espace-4:16px;
    --rif-espace-5:24px;
    --rif-espace-6:32px;
    --rif-espace-7:48px;
    --rif-rayon:16px;
    --rif-rayon-petit:10px;
    --rif-rayon-pastille:999px;
    --rif-ombre-1:0 1px 2px rgba(16,44,82,.06),0 6px 18px rgba(16,44,82,.06);
    --rif-ombre-2:0 2px 4px rgba(16,44,82,.08),0 14px 32px rgba(16,44,82,.12);
    --rif-cible:44px;
    --rif-entete:150px;
}

/* ---------------------------------------------------------------- site entier : titres, cartes, boutons, alertes */

.source-content h1{color:var(--rif-encre);font-size:clamp(30px,3.2vw,42px);font-weight:600;letter-spacing:-.02em}
.source-content h2{color:var(--rif-encre)}
.source-content .lead{color:var(--rif-doux)}

.source-content .card{border:0;border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1);background:var(--rif-surface)}
.source-content .card:has(.stretched-link){transition:box-shadow .2s ease,transform .2s ease}
.source-content .card:has(.stretched-link):hover{box-shadow:var(--rif-ombre-2);transform:translateY(-2px)}

.source-content .btn{min-height:var(--rif-cible);border-radius:var(--rif-rayon-petit);font-weight:600}
.source-content .btn-primary{background:var(--rif-bleu);border-color:var(--rif-bleu);color:#fff}
.source-content .btn-primary:hover,.source-content .btn-primary:focus-visible{background:var(--rif-encre);border-color:var(--rif-encre);color:#fff}
.source-content .btn-outline-primary{background:var(--rif-surface);color:var(--rif-bleu);border:1px solid var(--rif-bleu)}
.source-content .btn-outline-secondary{background:var(--rif-surface);color:var(--rif-encre);border:1px solid #9aabbf}
.source-content .btn-outline-secondary:hover{background:var(--rif-bleu-pale);color:var(--rif-encre)}
.source-content .btn-outline-primary:hover{background:var(--rif-bleu);color:#fff}
.source-content .btn-danger{background:var(--rif-rouge);border-color:var(--rif-rouge)}

.source-content .alert{border:0;border-left:4px solid var(--rif-bleu);border-radius:var(--rif-rayon-petit);background:var(--rif-bleu-pale);color:var(--rif-texte)}
.source-content .alert-success{border-left-color:var(--rif-vert);background:#e9f5ee}
.source-content .alert-danger{border-left-color:var(--rif-rouge);background:#fbecee}
.source-content .alert-warning{border-left-color:#a3640b;background:#fdf4e3}

.source-content .form-control:focus,.source-content .form-select:focus{border-color:var(--rif-bleu);box-shadow:0 0 0 3px rgba(7,94,168,.18)}


/* État vide (composant _vide) : un bulletin pointillé, lisible sans couleur. */
.source-content .vide--bloc{border:1px dashed #b9c6d4;border-radius:var(--rif-rayon);background:var(--rif-surface);padding:var(--rif-espace-5);color:var(--rif-doux)}

/* État de chargement générique : toute zone marquée aria-busy="true" s'atténue et porte un indicateur animé. */
[aria-busy="true"]{position:relative;opacity:.65;pointer-events:none}
[aria-busy="true"]::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid var(--rif-bleu-pale);border-top-color:var(--rif-bleu);border-radius:50%;animation:rif-tourne .8s linear infinite}
@keyframes rif-tourne{to{transform:rotate(360deg)}}

/* Pied de page : fond ivoire et liseré bleu, la marque RIF en bas de chaque page. */
.footer.rif-footer{background:var(--rif-ivoire);border-top:4px solid var(--rif-bleu)}

/* Pastille de l'en-tête (initiales) aux couleurs de RIF. */
.entete-avatar-pastille{background:var(--rif-encre);color:#fff}

/* ---------------------------------------------------------------- espace personnel : cadre en deux colonnes */

body:has(.espace-rail){background:var(--rif-ivoire)}
.rif-main:has(.espace-rail){max-width:1320px}
.rif-main>.source-content:has(.espace-rail){max-width:none}

main:has(>.espace-rail){display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:var(--rif-espace-6);align-items:start;max-width:none;margin:0;padding:0}
main:has(>.espace-rail)>*{grid-column:2;min-width:0}
main:has(>.espace-rail)>.espace-rail{grid-column:1;grid-row:1 / span 40}

.espace-rail{position:sticky;top:calc(var(--rif-entete) + var(--rif-espace-4));background:var(--rif-surface);border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1);padding:var(--rif-espace-4) var(--rif-espace-3);margin:0}
.espace-rail__titre{margin:0 0 var(--rif-espace-2);padding:0 var(--rif-espace-3);font-size:14px;font-weight:600;color:var(--rif-doux)}
.espace-rail__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.source-content .espace-rail__liste{padding:0;margin:0}
.espace-rail__entree{position:relative;padding:var(--rif-espace-2) var(--rif-espace-3);border-radius:var(--rif-rayon-petit);border-left:4px solid transparent}
.espace-rail__entree:hover{background:var(--rif-bleu-pale)}
.espace-rail__entree.is-active{background:var(--rif-bleu-pale);border-left-color:var(--rif-bleu)}
.espace-rail__lien{position:static;display:flex;gap:var(--rif-espace-3);align-items:center;min-height:var(--rif-cible);color:var(--rif-texte);text-decoration:none}
.espace-rail__lien::after{content:"";position:absolute;inset:0;border-radius:inherit}
.espace-rail__lien:hover,.espace-rail__lien[aria-current="page"]{color:var(--rif-encre)}
.espace-rail__icone{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--rif-ivoire);color:var(--rif-bleu)}
.espace-rail__lien[aria-current="page"] .espace-rail__icone{background:var(--rif-bleu);color:#fff}
.espace-rail__intitule{font-size:16px;font-weight:600;line-height:1.3}
.espace-rail__phrase{margin:-6px 0 0 40px;font-size:13px;line-height:1.35;color:var(--rif-doux)}
.source-content .espace-rail__phrase{margin:-6px 0 0 40px;font-size:13px}

/* Le contenu de l'espace : chaque section devient un bulletin blanc sur le fond ivoire. */
main:has(>.espace-rail)>h1{margin-top:0}
main:has(>.espace-rail) .tdb-section,main:has(>.espace-rail) .carte,main:has(>.espace-rail) section.border.rounded,main:has(>.espace-rail)>.espace-page__bloc{border:0;background:var(--rif-surface);border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1);padding:var(--rif-espace-5);margin:0 0 var(--rif-espace-5)}
main:has(>.espace-rail) .tdb-titre{border-bottom:0;padding-bottom:0;color:var(--rif-encre)}
main:has(>.espace-rail) .tdb-carte{border:0;border-left:4px solid var(--rif-bleu);border-radius:var(--rif-rayon-petit);box-shadow:none;background:var(--rif-ivoire)}
main:has(>.espace-rail) .tdb-carte .card-text strong,main:has(>.espace-rail) .tdb-carte .display-6{font-size:34px;font-weight:600;color:var(--rif-encre);line-height:1.1}
main:has(>.espace-rail) [data-testid="espace-carte-alertes"]{border-left-color:var(--rif-rouge)}
main:has(>.espace-rail) [data-testid="espace-carte-donnees"]{border-left-color:var(--rif-vert)}

/* Bandeau personnel du tableau de bord. */
.espace-bandeau{display:flex;gap:var(--rif-espace-5);align-items:center;padding:var(--rif-espace-5) var(--rif-espace-6);margin:0 0 var(--rif-espace-5);border-radius:var(--rif-rayon);background:linear-gradient(120deg,var(--rif-encre) 0%,#0b4580 60%,var(--rif-bleu) 100%);color:#fff;box-shadow:var(--rif-ombre-2)}
.espace-bandeau__avatar{flex:0 0 72px;width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.14);border:3px solid rgba(255,255,255,.55);font-size:26px;font-weight:600}
.espace-bandeau__avatar img{width:100%;height:100%;object-fit:cover}
.espace-bandeau__salut{font-size:clamp(22px,2.4vw,30px);font-weight:600;margin:0 0 var(--rif-espace-1);color:#fff}
.espace-bandeau__periode{margin:0 0 var(--rif-espace-3);font-size:16px;color:#dbe7f4}
.espace-bandeau__pastilles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--rif-espace-2)}
.source-content .espace-bandeau__pastilles{padding:0;margin:0}
.pastille-rif{display:inline-flex;align-items:center;gap:6px;min-height:var(--rif-cible);padding:0 var(--rif-espace-4);border-radius:var(--rif-rayon-pastille);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:15px;line-height:1.2}
.pastille-rif--ok::before{content:"";width:9px;height:9px;border-radius:50%;background:#7ee2a8}
a.pastille-rif--action{background:#fff;color:var(--rif-encre);font-weight:600;text-decoration:none}
a.pastille-rif--action:hover{background:var(--rif-bleu-pale);color:var(--rif-encre)}
.espace-bandeau a:focus-visible{outline-color:#fff}

/* « Mes accès » : une carte par section réelle, le lien du titre couvre la carte. */
.espace-acces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--rif-espace-4)}
.source-content .espace-acces{padding:0;margin:0}
.espace-acces__carte{position:relative;background:var(--rif-ivoire);border-radius:var(--rif-rayon-petit);border-left:4px solid var(--rif-bleu);padding:var(--rif-espace-4);transition:box-shadow .2s ease,transform .2s ease}
.espace-acces__carte:hover,.espace-acces__carte:focus-within{background:var(--rif-surface);box-shadow:var(--rif-ombre-2);transform:translateY(-2px)}
.espace-acces__carte--securite{border-left-color:var(--rif-rouge)}
.espace-acces__carte--adhesion{border-left-color:var(--rif-vert)}
.espace-acces__intitule{font-size:18px;margin:0 0 var(--rif-espace-1)}
.espace-acces__intitule a{color:var(--rif-encre);text-decoration:none}
.espace-acces__intitule a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.espace-acces__phrase{margin:0;font-size:15px;color:var(--rif-doux)}

/* ---------------------------------------------------------------- lot 4 : pages de compte, de données et publiques */

/* Pages de compte : un « guichet » — le bulletin seul (connexion, mot de passe oublié, second facteur) au centre
   du fond ivoire ; bande bleue, titre de premier niveau à la taille d'un titre de carte. */
body:has(.card-signin),body:has(.carte-2fa){background:var(--rif-ivoire)}
.source-content .card-signin,.source-content .carte-2fa{border:0;border-left:4px solid var(--rif-bleu);border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1);background:var(--rif-surface)}
.source-content .card-signin h1{font-size:clamp(26px,2.4vw,32px);margin:0 0 var(--rif-espace-5);color:var(--rif-encre)}
.source-content .card-signin .card-body{padding:var(--rif-espace-6)}

/* Pages de données : le cadre s'élargit (tableaux plus lisibles), le filtre devient un bulletin, les cartes du
   catalogue et les cartes de catégorie (ABC-4-157) portent la bande latérale. */
.rif-main:has(.liste-donnees),.rif-main:has(.cartes-donnees){max-width:1320px}
.rif-main>.source-content:has(.liste-donnees),.rif-main>.source-content:has(.cartes-donnees){max-width:none}
.source-content .barre-filtres{background:var(--rif-surface);border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1);padding:var(--rif-espace-4) var(--rif-espace-5);margin-left:0;margin-right:0}
.carte-donnee{border:0;border-left:4px solid var(--rif-bleu);border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1)}
.carte-donnee:hover{box-shadow:var(--rif-ombre-2);border-left-color:var(--rif-encre)}
.source-content .cartes-categorie .carte-categorie{min-height:var(--rif-cible);border:0;border-left:4px solid var(--rif-bleu);border-radius:var(--rif-rayon-petit);background:var(--rif-surface);box-shadow:var(--rif-ombre-1);color:var(--rif-encre)}
.source-content .cartes-categorie .carte-categorie:hover{background:var(--rif-bleu-pale);color:var(--rif-encre)}
.source-content .cartes-categorie .carte-categorie--active,.source-content .cartes-categorie .carte-categorie--active:hover{background:var(--rif-encre);border-left-color:var(--rif-rouge);color:#fff}
.liste-donnees .table-responsive{background:var(--rif-surface);border-radius:var(--rif-rayon);box-shadow:var(--rif-ombre-1)}

/* Pages publiques : les listes de liens et les grilles de cartes deviennent des bulletins. */
.source-content .list-group-item{border:0;border-left:4px solid var(--rif-bleu);border-radius:var(--rif-rayon-petit);box-shadow:var(--rif-ombre-1);background:var(--rif-surface)}
.source-content .card-columns .card{border-left:4px solid var(--rif-bleu)}

/* ---------------------------------------------------------------- tablette et téléphone */

@media (max-width: 991.98px){
    main:has(>.espace-rail){display:block;min-width:0;max-width:100%}
    .espace-rail{contain:inline-size;min-width:0;max-width:100%;position:static;padding:var(--rif-espace-2);margin:0 0 var(--rif-espace-5)}
    .espace-rail__titre{display:none}
    .espace-rail__liste{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;gap:var(--rif-espace-2);padding-bottom:2px;-webkit-overflow-scrolling:touch}
    .espace-rail__entree{flex:0 0 auto;scroll-snap-align:start}
    .espace-rail__entree{border-left:0;border-bottom:3px solid transparent;padding:0 var(--rif-espace-3)}
    .espace-rail__entree.is-active{border-bottom-color:var(--rif-bleu)}
    .espace-rail__lien{white-space:nowrap}
    .espace-rail__phrase,.source-content .espace-rail__phrase{display:none}
}

@media (max-width: 640px){
    .espace-bandeau{flex-direction:column;align-items:flex-start;padding:var(--rif-espace-5)}
    main:has(>.espace-rail) .tdb-section,main:has(>.espace-rail) .carte,main:has(>.espace-rail) section.border.rounded,main:has(>.espace-rail)>.espace-page__bloc{padding:var(--rif-espace-4);border-radius:var(--rif-rayon-petit)}
    .espace-acces{grid-template-columns:1fr}
    .source-content .card-signin .card-body{padding:var(--rif-espace-5)}
}

@media (prefers-reduced-motion: reduce){
    [aria-busy="true"]::after{animation:none}
    .espace-acces__carte,.source-content .card:has(.stretched-link){transition:none}
}

/* [B-4-227] Connexion compacte : formulaire et création de compte côte à côte, marges verticales réduites. */
.connexion-grille{display:grid;grid-template-columns:1fr;gap:var(--rif-espace-4);max-width:920px;margin:var(--rif-espace-4) auto var(--rif-espace-5);align-items:start}
.source-content .connexion-grille .card-signin{max-width:none;margin:0}
.source-content .connexion-grille .connexion-creer-compte{margin:0;border:1px solid var(--trait);border-radius:var(--rif-rayon);background:var(--rif-surface);box-shadow:var(--rif-ombre-1)}
.source-content .connexion-grille .connexion-creer-compte .card-body{padding:var(--rif-espace-6)}
/* [B-4-241] Texte du bouton « Créer mon compte » centré horizontalement. */
.source-content .connexion-grille .connexion-creer-compte .btn{justify-content:center;text-align:center}
@media (min-width:992px){
    .connexion-grille{grid-template-columns:1fr 1fr;gap:var(--rif-espace-5)}
}
@media (max-width:991.98px){
    .source-content .connexion-grille .connexion-creer-compte .card-body{padding:var(--rif-espace-5)}
}