/* [B-4-199 2026-10-14] Variante A « Sarcelle et ambre », choisie par le client (Q-123, close le 14/10) — maquette :
   recette/captures/B-4-199/variante-a-*.png et maquettes/maquette.css. Structure de service-public.fr aux couleurs PROPRES
   à RIF : ni Marianne, ni bleu France, ni rouge Marianne, et distinctes d'EUSEP. Couche liée EN DERNIER par le layout
   public (après la maquette B-4-57, ses adaptations et l'identité B-4-160) : elle a le dernier mot.
   1. Jetons posés sur html:root (plus prioritaire que les :root des couches plus anciennes, jetons.css compris, même
      quand une page lie sa feuille après le layout) et REPORTÉS sur les jetons de ces couches : --blue/--navy… de la
      maquette, --rif-* de l'identité, --ds-* du système de design, --bs-* de Bootstrap.
   2. En-tête (barre du haut, recherche, icônes du téléphone), menu sur deux lignes, accueil, listes, fiches, formulaires,
      pied de page. Aucune classe de grille Bootstrap réécrite.
   3. Trois largeurs : ordinateur (1280), tablette (≤ 991,98 px : menu derrière l'icône), téléphone (≤ 575,98 px).
   Contrastes (tests/Unit/Twig/PaletteSarcelleTest.php) : tout texte ≥ 4,5:1 sur son fond. */

/* Police de RIF (déjà servie par le site, licence dans fonts/) : le nom de famille est CITÉ — non cité, « Source Sans 3 »
   n'est pas un nom valide et la police n'était jamais chargée (le site tombait sur Arial). */
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-Regular.ttf-vkD7ITA.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-Semibold.ttf-DpZ6roK.woff2") format('woff2');font-weight:600 800;font-display:swap}

html:root{
    --sarcelle:#0b5a61;
    --sarcelle-fonce:#063a3f;
    --sarcelle-pale:#e5f1f1;
    --ambre:#f0a93b;
    --ambre-texte:#8a4b00;
    --encre:#13262b;
    --doux:#4f6266;
    --trait:#d6dfdf;
    --fond:#f5f6f3;
    --erreur:#b3261e;

    --blue:var(--sarcelle);
    --navy:var(--sarcelle-fonce);
    --red:var(--ambre-texte);
    --ink:var(--encre);
    --muted:var(--doux);
    --pale:var(--sarcelle-pale);
    --line:var(--trait);

    --rif-bleu:var(--sarcelle);
    --rif-encre:var(--sarcelle-fonce);
    --rif-texte:var(--encre);
    --rif-doux:var(--doux);
    --rif-rouge:var(--erreur);
    --rif-ivoire:var(--fond);
    --rif-bleu-pale:var(--sarcelle-pale);
    --rif-trait:var(--trait);
    --rif-rayon:8px;
    --rif-rayon-petit:6px;
    --rif-ombre-1:0 1px 2px rgba(6,58,63,.06),0 4px 14px rgba(6,58,63,.06);
    --rif-ombre-2:0 2px 4px rgba(6,58,63,.08),0 12px 28px rgba(6,58,63,.12);

    --ds-couleur-primaire:var(--sarcelle);
    --ds-couleur-primaire-fonce:var(--sarcelle-fonce);
    --ds-couleur-accent:var(--ambre-texte);
    --ds-couleur-texte:var(--encre);
    --ds-couleur-texte-doux:var(--doux);
    --ds-couleur-surface-douce:var(--fond);
    --ds-couleur-trait:var(--trait);
    --ds-couleur-info-texte:var(--sarcelle-fonce);
    --ds-couleur-info-fond:var(--sarcelle-pale);

    --bs-primary:var(--sarcelle);
    --bs-primary-rgb:11,90,97;
    --bs-link-color:var(--sarcelle);
    --bs-link-color-rgb:11,90,97;
    --bs-link-hover-color:var(--sarcelle-fonce);
    --bs-link-hover-color-rgb:6,58,63;
    --bs-body-color:var(--encre);
    --bs-body-font-family:"Source Sans 3",Arial,sans-serif;
    --bs-border-color:var(--trait);
    --bs-focus-ring-color:rgba(240,169,59,.5);
}

/* ---------------------------------------------------------------- socle : texte, liens, focus, titres */

body{font-family:"Source Sans 3",Arial,sans-serif;font-size:1.0625rem;line-height:1.55;color:var(--encre);background:#fff}
a{color:var(--sarcelle);text-underline-offset:3px}
a:hover{color:var(--sarcelle-fonce)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ambre);outline-offset:2px;box-shadow:none}
.lien-d-evitement:focus{background:var(--sarcelle-fonce);color:#fff}
.ico{width:1.2em;height:1.2em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.rif-main h1,.source-content h1,.source-content .rif-titre.h1{color:var(--sarcelle-fonce);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.rif-main h2,.source-content h2,.rif-main .rif-titre{color:var(--sarcelle-fonce)}
.source-content .lead,.chapo{color:var(--doux)}
.text-primary{color:var(--sarcelle)!important}
.border-primary{border-color:var(--trait)!important}
.text-bg-primary,.badge.bg-primary{background:var(--sarcelle-pale)!important;color:var(--sarcelle-fonce)!important}
.etiquette{display:inline-block;font-size:.82rem;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--sarcelle-pale);color:var(--sarcelle-fonce)}
.date{font-size:.9rem;color:var(--doux)}

/* Chiffres clés de l'accueil : accent et en-têtes de tableaux à la couleur principale (les palettes des graphiques restent celles
   de la visualisation, ABC-4-46). */
html:root #chiffres-cles:not([data-theme="dark"]){--cc-accent:var(--sarcelle);--cc-entete:var(--sarcelle-fonce);--cc-bord:var(--trait)}

/* ---------------------------------------------------------------- boutons (partout, comme la maquette : 44 px, 6 px) */

.btn{min-height:44px;border-radius:6px;font-weight:600}
.btn-primary,.source-content .btn-primary{--bs-btn-bg:var(--sarcelle);--bs-btn-border-color:var(--sarcelle);--bs-btn-hover-bg:var(--sarcelle-fonce);--bs-btn-hover-border-color:var(--sarcelle-fonce);--bs-btn-active-bg:var(--sarcelle-fonce);--bs-btn-active-border-color:var(--sarcelle-fonce);--bs-btn-disabled-bg:var(--sarcelle);--bs-btn-disabled-border-color:var(--sarcelle);background:var(--sarcelle);border-color:var(--sarcelle);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible,.source-content .btn-primary:hover{background:var(--sarcelle-fonce);border-color:var(--sarcelle-fonce);color:#fff}
.btn-outline-primary,.source-content .btn-outline-primary{--bs-btn-color:var(--sarcelle);--bs-btn-border-color:var(--sarcelle);--bs-btn-hover-bg:var(--sarcelle);--bs-btn-hover-border-color:var(--sarcelle);background:#fff;color:var(--sarcelle);border:2px solid var(--sarcelle)}
.btn-outline-primary:hover,.source-content .btn-outline-primary:hover{background:var(--sarcelle);color:#fff}
.btn-secondary,.source-content .btn-secondary{background:#fff;color:var(--sarcelle);border:2px solid var(--sarcelle)}
.btn-secondary:hover,.source-content .btn-secondary:hover{background:var(--sarcelle-pale);color:var(--sarcelle-fonce);border-color:var(--sarcelle)}
/* [ABC-4-258] Bouton « Retour » (class="btn btn-secondary text-white") : fond blanc + .text-white (!important de Bootstrap) = texte
   invisible. Le texte reprend la sarcelle (7,6:1 sur blanc) et le survol la sarcelle foncée (11:1 sur le fond pâle). */
.btn-secondary.text-white,.source-content .btn-secondary.text-white{
    color: var(--sarcelle) !important;
}
.btn-secondary.text-white:hover,.btn-secondary.text-white:focus-visible,.source-content .btn-secondary.text-white:hover{
    color: var(--sarcelle-fonce) !important;
}
.button,.hero-actions .button{background:var(--sarcelle);border-color:var(--sarcelle);color:#fff}
.button:hover{background:var(--sarcelle-fonce);color:#fff}
.secondary-button{color:var(--sarcelle);border-color:var(--sarcelle)}

/* ---------------------------------------------------------------- en-tête : barre du haut (structure service-public) */

.site-header{position:static;background:#fff;border-top:0;border-bottom:1px solid var(--trait);box-shadow:none;z-index:30}
.site-header .wrap{max-width:1200px;width:calc(100% - 48px);margin:0 auto}
.entete-haut{display:flex;align-items:center;gap:24px;padding:14px 0;min-height:0}
.site-header .brand-block{display:flex;align-items:center;gap:14px}
.site-header .brand{flex:none;display:block}
.site-header .brand img{width:auto;height:56px;object-fit:contain}
.site-header .brand-purpose{display:flex;flex-direction:column;border-left:3px solid var(--ambre);padding-left:12px;max-width:300px;line-height:1.2;color:var(--sarcelle-fonce)}
.site-header .brand-purpose strong{font-size:1.15rem;font-weight:600;color:var(--sarcelle-fonce)}
.site-header .brand-purpose span{font-size:.92rem;color:var(--doux);margin-top:2px}
.entete-outils{margin-left:auto;display:flex;align-items:center;gap:8px}
.recherche-site{display:flex;border:2px solid var(--sarcelle);border-radius:6px;overflow:hidden;height:44px;background:#fff}
.recherche-site input{border:0;padding:0 14px;font:inherit;width:260px;min-width:0;background:#fff;color:var(--encre)}
.recherche-site input::placeholder{color:var(--doux);opacity:1}
.entete-outils .recherche-site input{height:100%;min-height:0;align-self:stretch;line-height:normal;border-radius:0}
.entete-outils .recherche-site input:focus-visible{outline:0}
.entete-outils .recherche-site:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.recherche-site button{border:0;background:var(--sarcelle);color:#fff;width:48px;display:flex;align-items:center;justify-content:center}
.recherche-site button:hover{background:var(--sarcelle-fonce)}
.lien-outil{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:var(--sarcelle);text-decoration:none;font-weight:600;white-space:nowrap}
.lien-outil:hover{color:var(--sarcelle-fonce);text-decoration:underline}
.lien-outil #btn_connexion{margin-left:0!important}
/* [BC-4-217] sans « Créer mon compte », recherche, Aide et Se connecter se décalent vers la droite : le dernier lien finit sur le bord du contenu. */
.entete-outils{padding-left:8px}
.entete-outils > .lien-outil.login:last-of-type{padding-right:0}
.connexion-creer-compte{border-top:1px solid var(--trait)}
.site-header .entete-avatar{display:inline-flex;align-items:center}
.icone-btn{display:none;min-width:44px;min-height:44px;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:var(--sarcelle);font:inherit;font-size:.78rem;font-weight:600;line-height:1.1;text-decoration:none;padding:2px 4px;border-radius:6px}
.icone-btn .ico{width:1.5em;height:1.5em}
.site-header #rif-menu-toggle{display:none}
.icone-btn:hover,.icone-btn[aria-expanded="true"]{background:var(--sarcelle-pale);color:var(--sarcelle-fonce)}

/* ---------------------------------------------------------------- menu principal : icône d'accueil + entrées sur deux lignes */

.menu-bande{background:#fff;border-top:1px solid var(--trait)}
.menu-principal{display:flex;align-items:stretch;justify-content:center;flex-wrap:nowrap;gap:0;min-height:0}/* [BC-4-217] menu centré, de l'accueil à Aide */
.menu-principal .nav-accueil{display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--sarcelle);text-decoration:none;border-bottom:4px solid transparent;min-height:64px}
.menu-principal .nav-accueil .ico{width:1.35em;height:1.35em}
.menu-principal .nav-accueil-texte{display:none}
.menu-principal .nav-accueil[aria-current],.menu-principal .nav-accueil:hover{border-bottom-color:var(--ambre);background:none}
.menu-principal .nav-group{position:relative;display:flex}
.menu-principal .nav-toggle{display:flex;align-items:center;gap:8px;min-height:64px;padding:0 18px;background:none;border:0;border-bottom:4px solid transparent;color:var(--encre);font:inherit;font-weight:600;font-size:1rem;line-height:1.15;text-align:left;cursor:pointer}
.menu-principal .nav-libelle{display:flex;flex-direction:column}
.menu-principal .nav-sous-titre{font-weight:400;color:var(--doux);font-size:.85rem}
.menu-principal .nav-chevron{color:var(--sarcelle);transition:transform .15s ease}
.menu-principal .nav-toggle:hover,.menu-principal .nav-group.is-active .nav-toggle{border-bottom-color:var(--ambre);color:var(--sarcelle);background:none}
.menu-principal .nav-group.is-open .nav-toggle{background:var(--sarcelle-pale);border-bottom-color:var(--sarcelle)}
.menu-principal .nav-group.is-open .nav-chevron{transform:rotate(180deg)}
.menu-principal .nav-toggle:focus-visible{outline:3px solid var(--ambre);outline-offset:-3px}
.menu-principal .nav-submenu{display:none;position:absolute;top:100%;left:0;z-index:40;width:max-content;min-width:320px;max-width:620px;background:#fff;border:1px solid var(--trait);border-top:4px solid var(--sarcelle);box-shadow:0 12px 28px rgba(0,0,0,.12);padding:14px 24px 18px}
.menu-principal .nav-group:nth-last-child(-n+2) .nav-submenu{left:auto;right:0}
.menu-principal .nav-group.is-open .nav-submenu{display:block}
.menu-principal .nav-submenu a{display:block;padding:9px 0;border-bottom:1px solid var(--trait);color:var(--sarcelle);font-weight:600;text-decoration:none}
.menu-principal .nav-submenu a::after{content:attr(title);display:block;font-weight:400;color:var(--doux);font-size:.92rem}
.menu-principal .nav-submenu a:hover{text-decoration:underline}
.menu-principal .nav-submenu a[aria-current]{border-left:4px solid var(--ambre);padding-left:10px;background:var(--sarcelle-pale)}
.menu-principal .mobile-utilities{display:none}
html:not(.js) .menu-principal{flex-wrap:wrap}
html:not(.js) .menu-principal .nav-submenu{display:block;position:static;box-shadow:none;border:0;min-width:0;padding:0 18px 12px}

/* ---------------------------------------------------------------- fil d'Ariane, cadre */

.crumb{font-size:.92rem;color:var(--doux)}
.crumb a{color:var(--doux)}
.crumb .breadcrumb-item.active{color:var(--encre)}

/* ---------------------------------------------------------------- accueil : bandeau sombre et grande recherche */

.heros{background:var(--sarcelle-fonce);color:#fff;padding:48px 0 56px;position:relative;overflow:hidden}
.heros::after{content:"";position:absolute;right:-80px;top:-60px;width:360px;height:360px;border-radius:50%;border:40px solid var(--ambre);opacity:.18;pointer-events:none}
.heros .wrap{max-width:1200px;width:calc(100% - 48px);margin:0 auto;position:relative;z-index:1}
.heros .eyebrow{color:#f6d8a6;font-weight:600;margin:0 0 8px;font-size:.98rem}
.heros .rif-home-title{color:#fff;font-size:2.6rem;line-height:1.15;max-width:760px;margin:0 0 16px;font-weight:600}
.heros .hero-description{font-size:1.2rem;max-width:720px;color:#e9f0f0;margin:0 0 24px}
.recherche-grande{display:flex;max-width:720px;background:#fff;border-radius:8px;overflow:hidden;min-height:60px}
.recherche-grande input{flex:1;min-width:0;border:0;padding:0 20px;font:inherit;font-size:1.15rem;color:var(--encre)}
.recherche-grande input::placeholder{color:var(--doux);opacity:1}
.recherche-grande input{height:auto;min-height:0;align-self:stretch;line-height:normal;border-radius:0}
.recherche-grande input:focus-visible{outline:0}
.recherche-grande:focus-within{outline:3px solid var(--ambre);outline-offset:3px}
.recherche-grande button{border:0;background:var(--ambre);color:#1b1b1b;font:inherit;font-weight:700;padding:0 24px}
.recherche-grande button:hover{background:#f5bd63}
.heros .suggestions{margin:14px 0 0;font-size:.98rem;color:#dfe9ea}
.heros .suggestions a{color:#fff;margin-left:10px}

.rif-main #que-faire{margin:8px 0 18px;font-size:1.6rem}
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.intro-agir{max-width:60rem;margin:0 0 18px;font-size:1.08rem;color:var(--doux)}
.cartes-agir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.carte-agir{background:#fff;border:1px solid var(--trait);border-bottom:4px solid var(--ambre-texte);border-radius:8px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.carte-agir__icone{width:52px;height:52px;border-radius:50%;background:var(--sarcelle-pale);color:var(--sarcelle);display:flex;align-items:center;justify-content:center}
.carte-agir h3{font-size:1.2rem;margin:4px 0 0}
.carte-agir h3 a{color:var(--sarcelle-fonce);text-decoration:none}
.carte-agir h3 a:hover,.carte-agir h3 a:focus{text-decoration:underline}
.carte-agir p{margin:0;color:var(--doux);font-size:.98rem}
.tuile{background:#fff;border:1px solid var(--trait);border-bottom:4px solid var(--sarcelle);border-radius:8px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:6px}
.tuile .pictos{width:48px;height:48px;border-radius:50%;background:var(--sarcelle-pale);color:var(--sarcelle);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.tuile h3{font-size:1.2rem;margin:4px 0 0}
.tuile h3 a{color:var(--sarcelle-fonce);text-decoration:none}
.tuile h3 a:hover{text-decoration:underline}
.tuile p{margin:0;color:var(--doux);font-size:.98rem}
.tuile ul{margin:6px 0 0;padding:0;list-style:none;font-size:.95rem}
.tuile li{padding:3px 0}
.tuile li::before{content:"› ";color:var(--ambre-texte);font-weight:700}

/* [B-4-270 point 7] Les douze cartes de l'accueil : trois colonnes, deux sur tablette, une sur mobile ; le titre est étiré sur toute la carte. */
.rif-main #ressources,.source-content #ressources{margin:8px 0 28px;font-size:1.6rem}
.cartes-ressources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 32px}
.carte-ressource{position:relative;background:#fff;border:1px solid var(--trait);border-top:4px solid var(--sarcelle);border-radius:8px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.carte-ressource:hover,.carte-ressource:focus-within{border-top-color:var(--ambre)}
.carte-ressource h3{font-size:1.15rem;margin:0}
.carte-ressource h3 a{color:var(--sarcelle-fonce);text-decoration:none}
.carte-ressource h3 a:hover{text-decoration:underline}
.carte-ressource__resume{margin:0;color:var(--doux);font-size:.97rem}
.carte-ressource__indicateur{margin:auto 0 0;padding-top:8px;border-top:1px solid var(--trait);font-size:.95rem}
.carte-ressource__indicateur p{margin:0}

/* [B-4-270] Pages éditoriales : encadré des limites et pied de vérification. */
.page-editoriale .limites{background:var(--fond);border-left:4px solid var(--ambre);border-radius:4px;padding:12px 18px;margin:24px 0}
.page-editoriale .limites h2{margin-top:0;font-size:1.2rem}
.page-editoriale .verification{margin-top:32px;padding-top:12px;border-top:1px solid var(--trait)}
.page-editoriale .actualite{border-bottom:1px solid var(--trait);padding-bottom:12px;margin-bottom:16px}

.bande-pale{background:var(--fond);border-radius:8px;padding:8px 28px 32px;margin:40px 0}
.deux-colonnes{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start}
.deux-colonnes--seule{grid-template-columns:1fr}
.bande-pale h2{font-size:1.6rem;margin:1.2em 0 .6em}
.liste-utiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.liste-utiles a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--trait);border-radius:8px;padding:14px 16px;font-weight:600;text-decoration:none;min-height:60px;color:var(--sarcelle-fonce)}
.liste-utiles a:hover{border-color:var(--sarcelle);text-decoration:underline}
.liste-utiles .fleche{color:var(--ambre-texte)}
.encadre-adhesion{background:#fff;border:1px solid var(--trait);border-top:6px solid var(--ambre);border-radius:8px;padding:22px;margin-top:32px}
.encadre-adhesion h2{margin:0 0 .5em;font-size:1.35rem}
.encadre-adhesion__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0}
.encadre-adhesion__actions a:not(.btn){font-weight:600}
/* [B-4-212] « Un rôle pour chaque acteur » : cartes avec marge intérieure, repère par acteur, lien d'action aligné en bas
   des trois cartes, survol et focus visibles (ligne des maquettes B-4-199). */
.role-grid{align-items:stretch}
.role-grid article{display:flex;flex-direction:column;border:1px solid var(--trait);border-top:4px solid var(--sarcelle);border-radius:8px;background:#fff;padding:24px;box-shadow:var(--rif-ombre-1);transition:border-color .15s,box-shadow .15s}
.role-grid article:hover,.role-grid article:focus-within{border-color:var(--sarcelle);box-shadow:0 6px 18px rgba(6,58,63,.16)}
.role-grid .role-icone{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:14px;border-radius:50%;background:var(--sarcelle-pale);color:var(--sarcelle-fonce)}
.role-grid .role-icone .ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.role-grid h3{margin-top:0}
.role-grid article>a{margin-top:auto;padding-top:6px;font-weight:600}
.role-grid article>a:hover{text-decoration:underline}
.role-grid article>a:focus-visible{outline:3px solid var(--sarcelle);outline-offset:3px;border-radius:3px}

/* ---------------------------------------------------------------- listes et fiches */

.source-content .card{border:1px solid var(--trait);border-radius:8px;box-shadow:none}
.source-content .card:has(.stretched-link):hover{box-shadow:var(--rif-ombre-1);transform:none;border-color:var(--sarcelle)}
.source-content .card-footer{background:var(--fond);border-top:1px solid var(--trait)}
.source-content .card-title,.source-content .card .rif-titre{color:var(--sarcelle-fonce)}
.list-group-item{border-color:var(--trait)}
a.list-group-item:hover,.list-group-item-action:hover{background:var(--sarcelle-pale);color:var(--sarcelle-fonce)}
.list-group-item.active{background:var(--sarcelle);border-color:var(--sarcelle)}
.rif-bandeau{background:var(--sarcelle-fonce)!important;color:#fff}
.rif-element__libelle{color:var(--sarcelle-fonce)}
.pagination{--bs-pagination-color:var(--sarcelle);--bs-pagination-hover-color:var(--sarcelle-fonce);--bs-pagination-hover-bg:var(--sarcelle-pale);--bs-pagination-active-bg:var(--sarcelle);--bs-pagination-active-border-color:var(--sarcelle);--bs-pagination-focus-box-shadow:0 0 0 3px rgba(240,169,59,.5);gap:6px}
.page-link{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:6px!important;color:var(--sarcelle)}
.page-item.active .page-link{background:var(--sarcelle);border-color:var(--sarcelle);color:#fff}
.source-content .alert{border-left-color:var(--sarcelle);background:var(--sarcelle-pale);color:var(--encre)}
.source-content .alert-warning{border-left-color:var(--ambre-texte);background:#fdf3e2}
.source-content .alert-danger{border-left-color:var(--erreur);background:#fbeceb}
.source-content details>summary{color:var(--sarcelle-fonce);font-weight:700}
.source-content blockquote,.a-savoir{background:var(--fond);border-left:4px solid var(--ambre-texte);padding:14px 18px;border-radius:0 8px 8px 0}

/* ---------------------------------------------------------------- formulaires : libellé gras, champ souligné, erreur en clair */

.source-content label,.source-content legend,.source-content .form-label{font-weight:700;color:var(--encre)}
.form-control,.form-select{min-height:44px;border:1px solid #8a9a9d;border-bottom:2px solid var(--encre);border-radius:6px 6px 0 0;color:var(--encre)}
textarea.form-control{min-height:88px}
.form-control:focus,.form-select:focus,.source-content .form-control:focus,.source-content .form-select:focus{border-color:var(--sarcelle);border-bottom-color:var(--sarcelle);box-shadow:0 0 0 3px rgba(11,90,97,.18)}
.form-text,.source-content .help-text,.source-content small.text-muted{color:var(--doux)!important}
.form-check-input{width:1.25em;height:1.25em;accent-color:var(--sarcelle)}
.form-check-input:checked{background-color:var(--sarcelle);border-color:var(--sarcelle)}
/* [B-4-286] Cases à cocher et boutons radio : la case s'aligne sur la PREMIÈRE ligne du libellé, un libellé long se replie sous le
   texte (jamais sous la case), espacement régulier, focus et erreur visibles. Les choix en ligne (civilité) restent côte à côte. */
.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.625rem;padding-left:0;margin-bottom:.5rem;min-height:0}
.form-check-inline{display:inline-flex;margin-right:1.25rem}
.form-check .form-check-input[type=checkbox],.form-check .form-check-input[type=radio]{float:none;flex:0 0 1.25em;width:1.25em;height:1.25em;margin:.125em 0 0}
.form-check .form-check-label{flex:1 1 0;min-width:0;margin:0;line-height:1.5}
.form-check .invalid-feedback,.form-check .form-error-message{flex:0 0 100%;padding-left:calc(1.25em + .625rem);margin:.25rem 0 0}
.form-check-input:focus-visible{outline:3px solid var(--sarcelle);outline-offset:2px;box-shadow:none}
.form-check-input.is-invalid{border-color:var(--erreur)}
.form-check-input.is-invalid~.form-check-label{color:var(--erreur)}
/* [B-4-286] Sous-sections de l'inscription (un fieldset + titre par type de données). */
.sous-section{border:0;border-top:1px solid var(--trait);margin:1.25rem 0 0;padding:1rem 0 0;min-width:0}
.sous-section>legend{float:none;width:auto;padding:0;margin-bottom:.75rem;color:var(--encre)}
.is-invalid,.form-control.is-invalid,.form-select.is-invalid{border-color:var(--erreur)!important}
.invalid-feedback,.form-error-message{color:var(--erreur);font-weight:600}
.source-content fieldset{border-color:var(--trait)}
.recherche-du-site .recherche-site-page{max-width:640px;height:auto;margin:8px 0 24px;border:0;gap:8px}
.recherche-du-site .recherche-site-page input{flex:1;border:2px solid var(--sarcelle);border-radius:6px;min-height:48px}
.recherche-du-site .recherche-site-page button{width:auto;padding:0 20px;border-radius:6px}
/* [B-R-109 · G17] Résultats en cartes : une colonne, puis 2 cartes par ligne dès 992 px ; une carte seule garde une demi-ligne. */
.recherche-site-cartes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-espace-5,20px);align-items:start}
.recherche-site-groupe h2{font-size:1.25rem;overflow-wrap:anywhere}
.recherche-site-groupe li{overflow-wrap:anywhere}
@media(min-width:992px){.recherche-site-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.recherche-site-groupe ul{list-style:none;padding:0;margin:0}
.recherche-site-groupe li{padding:14px 0;border-bottom:1px solid var(--trait)}
.recherche-site-groupe li a{font-weight:600;font-size:1.1rem}
.recherche-site-groupe li p{margin:4px 0 0;color:var(--doux)}
/* [ABC-4-268] Fiche de la commune : sections identifiables (identité, géographie, démographie, collectivités), source sous chacune */
.commune-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:12px 0 20px}
.commune-fiche:empty{display:none}
.commune-section{padding:14px 16px;border:1px solid var(--trait);border-radius:8px;background:#fff}
.commune-section h3{font-size:1.05rem;margin:0 0 8px;color:var(--sarcelle-fonce)}
.commune-section dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 8px}
.commune-section dt{font-weight:600}
.commune-section dd{margin:0;overflow-wrap:anywhere}
.commune-section .source{margin:0}
/* [ABC-4-235, ABC-4-259] Bloc « Notre Circuit » (_composants/_passerelles.html.twig) : cartes côte à côte, une colonne sur mobile */
.passerelles{margin:24px 0 16px;padding:18px 20px;border:1px solid var(--trait);border-top:4px solid var(--sarcelle);border-radius:8px;background:#fff}
.passerelles .passerelles-titre{font-size:1.15rem;margin:0 0 12px;color:var(--sarcelle-fonce)}
.passerelles .passerelles-liste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.passerelles .passerelles-liste li{padding:0;border-bottom:0}
.passerelles .passerelle-carte{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 40px 14px 16px;border:1px solid var(--trait);border-radius:8px;background:#f6fbfb;text-decoration:none;color:inherit;overflow-wrap:anywhere}
.passerelles .passerelle-carte:hover,.passerelles .passerelle-carte:focus-visible{border-color:var(--sarcelle);background:#eaf6f6;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.passerelles .passerelle-site{font-size:.8rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--sarcelle-fonce)}
.passerelles .passerelle-externe{font-weight:400;text-transform:none;color:var(--doux)}
.passerelles .passerelle-libelle{font-weight:600;font-size:1.05rem;color:var(--sarcelle-fonce);text-decoration:underline}
.passerelles .passerelle-phrase{font-size:.95rem;color:var(--doux)}
.passerelles .passerelle-fleche{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--sarcelle-fonce)}

/* ---------------------------------------------------------------- pied de page sombre */

.footer.rif-footer{background:var(--sarcelle-fonce);color:#e6eeee;border-top:0;padding:36px 0 8px;font-size:.95rem}
.rif-footer .wrap{max-width:1200px;width:calc(100% - 48px);margin:0 auto}
.rif-footer .institution-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:28px}
/* [B-R-34] Une colonne du pied de page de 8 liens ou plus (« S’informer », ou toute colonne où l’on range des pages) se répartit sur deux colonnes, et la colonne « S’informer » longue reçoit la place : le pied reste équilibré à chaque page ajoutée. */
.rif-footer .institution-footer-grid:has(> section:nth-child(3) > ul > li:nth-child(8)){grid-template-columns:1.4fr 1fr 2fr 1.2fr}
/* [B-R-38] Idem quand c'est la 4e colonne (« L’association ») qui devient longue, ou les deux : sinon ses 8 liens restaient sur une seule colonne étroite à 1280 px. */
.rif-footer .institution-footer-grid:has(> section:nth-child(4) > ul > li:nth-child(8)){grid-template-columns:1.4fr 1fr 1fr 2fr}
.rif-footer .institution-footer-grid:has(> section:nth-child(3) > ul > li:nth-child(8)):has(> section:nth-child(4) > ul > li:nth-child(8)){grid-template-columns:1.1fr .9fr 2.5fr 2.5fr}
.rif-footer section > ul:has(> li:nth-child(8)){columns:170px 2;column-gap:24px}
.rif-footer section > ul:has(> li:nth-child(8)) li{break-inside:avoid}
.rif-footer .footer-identity{border-left:3px solid var(--ambre);padding-left:12px;align-self:start}
.rif-footer .footer-identity strong{color:#fff;font-size:1.1rem}
.rif-footer h2,.rif-footer h3,.rif-footer strong,.rif-footer .pied-de-page__titre{color:#fff;font-size:1.05rem}
.rif-footer p,.rif-footer li,.rif-footer address,.footer.rif-footer p,.footer.rif-footer li{color:#e6eeee;font-size:.95rem}
.rif-footer a,.rif-footer summary{color:#fff}
.rif-footer a:hover{color:#f6d8a6}
.rif-footer ul{list-style:none;padding:0}
.rif-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.2);color:#d5e0e0;font-size:.92rem}
.rif-footer .small-copy{color:#d5e0e0}

/* ---------------------------------------------------------------- tablette (820 px) : menu et recherche derrière les icônes */

@media(max-width:991.98px){
    .entete-haut{gap:12px;padding:10px 0}
    .site-header .brand img{height:48px}
    .site-header .brand-purpose{display:none}
    .bureau-seul{display:none!important}
    .icone-btn,.site-header #rif-menu-toggle{display:inline-flex}
    .entete-outils{gap:4px}
    /* [B-R-67] En-tête mobile sur deux lignes : ligne 1 = logo, cloche, initiales (ou Connexion), burger ; ligne 2 = recherche toujours visible. */
    .entete-haut{flex-wrap:wrap}
    .site-header .brand-block{flex:1 1 0;min-width:0}
    .entete-outils{display:contents}
    .recherche-site{order:10;flex:1 1 100%;height:44px;margin:0}
    .site-header{position:relative}
    .recherche-site input{width:auto;flex:1}
    .js .menu-principal{display:none}
    .js .menu-principal.is-open{display:flex}
    .menu-principal{flex-direction:column;justify-content:flex-start;padding:6px 0 10px;max-height:calc(100dvh - 80px);overflow-y:auto}
    .menu-principal .nav-accueil{min-height:52px;border-bottom:0;border-left:4px solid transparent;padding:0 14px}
    .menu-principal .nav-accueil-texte{display:inline;font-weight:600}
    .menu-principal .nav-accueil[aria-current]{border-left-color:var(--ambre)}
    .menu-principal .nav-group{display:block}
    .menu-principal .nav-toggle{width:100%;justify-content:space-between;min-height:56px;border-bottom:0;border-left:4px solid transparent;padding:6px 14px}
    .menu-principal .nav-group.is-active .nav-toggle{border-left-color:var(--ambre)}
    .menu-principal .nav-submenu,.menu-principal .nav-group:nth-last-child(-n+2) .nav-submenu{position:static;width:auto;min-width:0;max-width:none;box-shadow:none;border:0;border-left:4px solid var(--sarcelle);margin:0 0 6px 14px;padding:0 14px}
    .menu-principal .nav-submenu a::after{display:none}
    .menu-principal .mobile-utilities{display:block;margin:8px 0 0;padding:10px 14px 0;border-top:1px solid var(--trait)}
    .menu-principal .mobile-utilities a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--sarcelle)}
    .tuiles,.cartes-agir,.cartes-ressources{grid-template-columns:repeat(2,minmax(0,1fr))}
    .deux-colonnes{grid-template-columns:1fr;gap:0}
    .rif-footer .institution-footer-grid{grid-template-columns:1fr 1fr}
    .rif-footer .institution-footer-grid:has(> section:nth-child(3) > ul > li:nth-child(8)){grid-template-columns:1fr 1fr}
    .rif-footer .institution-footer-grid:has(> section:nth-child(4) > ul > li:nth-child(8)),.rif-footer .institution-footer-grid:has(> section:nth-child(3) > ul > li:nth-child(8)):has(> section:nth-child(4) > ul > li:nth-child(8)){grid-template-columns:1fr 1fr}
    .rif-footer section:has(> ul > li:nth-child(8)){grid-column:1/-1}
    .heros .rif-home-title{font-size:2.2rem}
}

/* ---------------------------------------------------------------- téléphone (375 px) : une colonne */

@media(max-width:575.98px){
    .site-header .wrap,.heros .wrap,.rif-footer .wrap{width:calc(100% - 32px)}
    .site-header .brand img{height:42px}
    .icone-btn{min-width:44px;padding:2px}
    .heros{padding:28px 0 32px}
    .heros::after{width:220px;height:220px;border-width:28px;right:-90px;top:-70px}
    .heros .rif-home-title{font-size:1.9rem}
    .heros .hero-description{font-size:1.05rem}
    .recherche-grande{min-height:54px}
    .recherche-grande input{font-size:1rem;padding:0 14px}
    .recherche-grande button{padding:0 14px}
    .heros .suggestions a{display:inline-block;margin:4px 12px 0 0}
    .rif-main h1,.source-content h1{font-size:1.85rem}
    .tuiles,.cartes-agir,.cartes-ressources,.liste-utiles,.rif-footer .institution-footer-grid{grid-template-columns:1fr}
    .rif-footer .institution-footer-grid:has(> section:nth-child(3) > ul > li:nth-child(8)){grid-template-columns:1fr}
    .rif-footer .institution-footer-grid:has(> section:nth-child(4) > ul > li:nth-child(8)),.rif-footer .institution-footer-grid:has(> section:nth-child(3) > ul > li:nth-child(8)):has(> section:nth-child(4) > ul > li:nth-child(8)){grid-template-columns:1fr}
    .rif-footer section > ul:has(> li:nth-child(8)){columns:1}
    .bande-pale{padding:4px 16px 24px;margin:28px 0}
    .page-link{min-width:40px}
}

@media(prefers-reduced-motion:reduce){.menu-principal .nav-chevron{transition:none}}

/* ---------------------------------------------------------------- [B-4-212] page de contact : disposition d'EUSEP */

.contact-page .contact-bandeau{background:var(--sarcelle-pale);padding:28px 0 26px;margin-bottom:36px;border-bottom:1px solid var(--trait)}
.contact-page .contact-bandeau .eyebrow{margin:0 0 6px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sarcelle)}
.contact-page .contact-bandeau h1{margin:0 0 8px}
.contact-page .contact-bandeau__texte{margin:0;font-size:1.1rem}
.contact-disposition{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;margin-bottom:56px}
.contact-infos h2{font-size:1.7rem;margin:0 0 .6em}
.contact-coordonnees-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.contact-coordonnees-liste li{display:grid;grid-template-columns:5.5rem 1fr;gap:12px;align-items:baseline}
.contact-etiquette{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sarcelle)}
.contact-carte{background:#fff;border:1px solid var(--trait);border-top:4px solid var(--sarcelle);border-radius:8px;box-shadow:var(--rif-ombre-1);padding:28px 32px}
.contact-carte h2{font-size:1.5rem;margin:0 0 .5em}
.contact-carte .lead{font-size:1rem;color:var(--muted)}
.contact-carte .legende-obligatoire{font-size:.8rem;margin:0 0 12px}
.contact-carte .adresse-ligne-double{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.contact-carte .contact-aide-message{margin:-8px 0 16px}
.contact-carte .contact-envoyer{display:block;width:100%;padding:12px 16px;font-weight:700}
@media(max-width:860px){
.contact-disposition{grid-template-columns:1fr;gap:24px}
.contact-carte{padding:20px 16px}
.contact-carte .adresse-ligne-double{grid-template-columns:1fr}
}

/* [B-4-213 2026-10-15] Fiche d'une publication (front/publication/show.html.twig), à la maquette de B-4-199 (fiche.html) :
   deux colonnes à l'ordinateur (article, encadré de la source), une seule au téléphone. */
.fiche-mise{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;margin:8px 0 48px}
.fiche-mise h1{font-size:2.2rem;margin:12px 0 14px}
.meta-fiche{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--doux);font-size:.95rem;border-left:4px solid var(--ambre);padding:4px 0 4px 14px;margin-bottom:20px}
.fiche-mise .chapo{font-size:1.2rem;max-width:780px;margin-bottom:24px}
.fiche-contenu{font-size:1.08rem;line-height:1.7;max-width:780px}
.fiche-contenu h2,.fiche-contenu h3{margin-top:1.6em}
.fiche-contenu img{max-width:100%;height:auto}
.fiche-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px;padding-top:20px;border-top:1px solid var(--trait)}
.encadre-source{background:#fff;border:1px solid var(--trait);border-top:6px solid var(--sarcelle);border-radius:8px;padding:22px}
.encadre-source h2{font-size:1.25rem;margin:0 0 8px}
.voir-aussi{margin-top:22px}
.voir-aussi h2{font-size:1.1rem}
.voir-aussi ul{padding-left:18px}
@media (max-width:991.98px){
  .fiche-mise{grid-template-columns:1fr;gap:24px}
}
@media (max-width:575.98px){
  .fiche-mise h1{font-size:1.7rem}
}

/* [ABC-4-269] Cloche des notifications et alertes en direct. */
.cloche-notifications{position:relative}
.cloche-compteur{position:absolute;top:-.1rem;right:-.1rem;min-width:1.15rem;padding:0 .3rem;border-radius:999px;background:#b3261e;color:#fff;font-size:.72rem;line-height:1.15rem;font-weight:700;text-align:center}
.cloche-compteur[hidden]{display:none}
.alertes-notifications{position:fixed;top:16px;right:16px;z-index:1080;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px));pointer-events:none}
.alerte-notification{position:relative;pointer-events:auto;padding:12px 40px 12px 14px;background:#fff;color:#1b2b2f;border:1px solid var(--sarcelle);border-left-width:6px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.alerte-notification-corps{margin:4px 0 6px;font-size:.9rem}
.alerte-notification-lien{font-weight:600;color:var(--sarcelle-fonce)}
.alerte-notification-fermer{position:absolute;top:2px;right:2px;min-width:44px;min-height:44px;border:0;background:transparent;font-size:1.4rem;line-height:1;color:#1b2b2f;cursor:pointer}

/* [B-R-132] Page « Agir » : présentation, barre d'ancrage (.page-nav des fiches d'élus), une section par action. */
.presentation-agir{max-width:62rem;margin:0 0 20px}
.presentation-agir p{margin:0 0 10px}
.presentation-agir__adherer{margin-top:14px}
#rubrique .page-nav{margin-bottom:28px}
.section-action{scroll-margin-top:90px;background:#fff;border:1px solid var(--trait);border-left:4px solid var(--ambre-texte);border-radius:8px;padding:20px 22px;margin:0 0 20px;max-width:62rem}
.section-action h2{display:flex;align-items:center;gap:12px;font-size:1.4rem;margin:0 0 10px}
.section-action h2 a{color:var(--sarcelle-fonce);text-decoration:none}
.section-action h2 a:hover,.section-action h2 a:focus{text-decoration:underline}
.section-action__icone{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--sarcelle-pale);color:var(--sarcelle);display:flex;align-items:center;justify-content:center}
.section-action ol{padding-left:1.3rem;margin:0 0 12px}
.section-action .en-savoir-plus{display:inline-block;margin-top:6px;padding:9px 16px;border-radius:8px;background:var(--sarcelle-fonce);color:#fff;font-weight:600;text-decoration:none}
.section-action .en-savoir-plus:hover,.section-action .en-savoir-plus:focus{text-decoration:underline}

/* [B-R-192] Quatre cartes d'agents publics + l'association : 2 colonnes, l'association sur toute la largeur dessous ; liens alignés en bas */
.role-grid{grid-template-columns:repeat(2,1fr)}
.role-actions{margin:12px 0;text-align:center}
.role-grid article:last-child{grid-column:1/-1}
.role-grid .role-liens{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px;font-weight:600}
@media(max-width:760px){.role-grid{grid-template-columns:1fr}}

/* [B-R-192] Bouton « J'ai besoin d'aide maintenant » : texte centré verticalement et horizontalement (min-height 44 px, le texte restait en haut) */
.bandeau-urgence .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}