/* [hors-planning 2026-10-07 · B-4-57] Refonte RIF — couche propre à RIF de la maquette du client, ADAPTÉE au
   balisage du site. La maquette réécrivait la grille de Bootstrap 4 (.row en flex avec écart, .col-* à 100 %,
   .mx-auto, .mt-*, .mb-*, .text-center aligné à gauche) pour des pages copiées de l'ancien site : le site sert
   Bootstrap 5, dont la grille porte l'espace personnel et les données publiques ; ces règles sont donc RETIRÉES
   (laissées en commentaire à leur place) et les règles d'apparence des anciennes classes (cartes, listes,
   pastilles, boutons, champs, tableaux) sont limitées au cadre des pages, .source-content.
   tests/Unit/Twig/RefonteRifFeuillesTest.php tombe si une règle de grille revient hors de ce cadre.
   Les ajouts propres au site (fil d'Ariane, menu en liste de liens, cases à cocher…) sont en fin de feuille. */
.brand{flex:initial}
.brand img{width:150px;height:75px;object-fit:contain}
.brand-purpose strong{font-size:19px}
.institutional-nav{flex-wrap:wrap}
.institutional-nav>a{font-size:16px;padding:15px 13px}
.rif-main{max-width:1120px;margin:0 auto;padding:40px 24px 64px}
.rif-main>.source-content{max-width:940px;margin:0 auto}
.page-intro{padding:38px 0 22px;border-bottom:1px solid var(--line);margin-bottom:32px}
.page-intro p{max-width:760px}
.rif-home-title{font-size:clamp(36px,4.5vw,58px);line-height:1.08;max-width:730px}
.hero-visual img{width:100%;max-height:340px;object-fit:contain}
.hero{padding:40px 0}
.hero-grid{gap:40px}
.rif-paths{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:38px}
.rif-path{border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:12px;padding:23px;background:#fff;text-decoration:none}
.rif-path strong{display:block;font-size:21px;margin-bottom:8px;line-height:1.2}
.rif-path span{color:var(--muted);font-size:16px}
.source-content h1{font-size:clamp(28px,3vw,40px);max-width:900px;margin:30px 0 24px}
.source-content h2{font-size:29px}
.source-content h5{font-size:22px}
.source-content .container{width:100%;max-width:none;padding:0}
/* retiré : .row (grille Bootstrap 5 gardée) */
/* retiré : .row>* (grille Bootstrap 5 gardée) */
/* retiré : .col-12,.col-lg-11,.col-md-12,.col-sm-9,.col-md-7,.col-lg-5 (grille Bootstrap 5 gardée) */
/* retiré : .col-md-10 (grille Bootstrap 5 gardée) */
/* retiré : .col-md-2 (grille Bootstrap 5 gardée) */
/* retiré : .col-md-6,.col-sm-6 (grille Bootstrap 5 gardée) */
/* retiré : .mx-auto (grille Bootstrap 5 gardée) */
/* retiré : .mt-2,.mt-3,.mt-4 (grille Bootstrap 5 gardée) */
/* retiré : .mt-5 (grille Bootstrap 5 gardée) */
/* retiré : .mb-2,.mb-3,.mb-5 (grille Bootstrap 5 gardée) */
.source-content .text-primary{color:var(--blue)!important}
.source-content .text-dark{color:var(--ink)!important}
.source-content .text-muted{color:var(--muted)!important}
/* retiré : .text-center (grille Bootstrap 5 gardée) */
.source-content .lead{font-size:18px;line-height:1.6}
.source-content .card-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.source-content .card-columns>a{text-decoration:none}
.source-content .card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.source-content .card-body{padding:26px}
.source-content .card-footer{background:var(--pale);padding:12px 26px;font-size:15px}
.source-content .card-footer p{margin:0}
.source-content .card-img-top{height:160px;width:100%;object-fit:contain;background:var(--pale);padding:24px}
.source-content .list-group{list-style:none;margin:22px 0;padding:0}
.source-content .list-group-item{display:block;border:1px solid var(--line);border-radius:10px;padding:22px;text-decoration:none;margin:12px 0}
.source-content .badge{background:var(--pale);color:var(--blue);border-radius:6px;padding:6px 10px;display:inline-block;font-size:15px}
.source-content .badge-pill a{color:var(--blue)!important}
.source-content .badge-pill:has(a){background:var(--pale);margin:8px;display:inline-block;padding:8px 13px}
.source-content .btn,.source-content button[type=submit]{background:var(--blue);color:white;border-radius:8px;padding:12px 20px;min-height:48px;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
.source-content .form-control,.source-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.source-content textarea,.source-content select{border:1px solid #aab9cc;border-radius:8px;padding:12px;width:100%;min-height:48px;background:#fff;color:var(--ink);font:inherit}
.source-content label{display:block;font-weight:600;margin:12px 0 6px}
.source-content label:has(+input[type=checkbox]),.source-content .custom-control-label{display:inline-block}
.source-content input[type=checkbox]{width:20px;height:20px;margin-right:8px;vertical-align:middle}
.source-content .form-label-group{margin-bottom:22px}
.source-content .card-signin{max-width:540px;margin:auto}
.source-content .card-signin .card-title{font-size:32px}
.source-content .form-signin .btn:not(.mdp-bascule){width:100%;justify-content:center}
.source-content .form-note{padding:14px 18px;background:var(--pale);border-radius:8px;font-size:16px}
.source-content .table-wrap{overflow:auto}
.source-content iframe,.source-content video{max-width:100%;border:0}
.source-content article{margin:24px 0}
.rif-footer a{color:#fff}
.rif-footer h2{font-size:18px;letter-spacing:0;margin-bottom:16px}
.footer-bottom{border-top:1px solid #ffffff30;margin-top:30px;padding:20px 0;font-size:15px}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 24px}
.prototype-note{margin:20px auto;max-width:940px}
.crumb{font-size:15px;margin-bottom:22px}
.page-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.page-list a{display:block;border:1px solid var(--line);border-radius:10px;padding:18px}
.preview-strip{background:#eff4f9;color:#334d6c;padding:8px 24px;text-align:center;font-size:14px}
.source-content>img,.source-content>.row:first-child:has(#projet){display:none}
.source-content .line{height:1px;background:var(--line);margin:38px 0}
.source-content ul:not(.list-group){padding-left:24px}
.source-content p{line-height:1.7}
.legacy-anchor{display:block;height:0}
.missing-note{border-left:4px solid var(--red);padding:24px;background:var(--pale)}
.password-toggle{margin:6px 0 16px;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--blue)}

@media(max-width:900px){.rif-paths{grid-template-columns:repeat(2,1fr)}
.institutional-nav>a{font-size:16px}
.page-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){.rif-paths,.source-content .card-columns,.page-list{grid-template-columns:1fr}
.brand-purpose{display:none}
.rif-main{padding:24px 20px 40px}
.hero{padding:28px 0}
.hero-visual{display:none}
.rif-main h1{font-size:30px}
.source-content .card-body{padding:20px}
.institutional-nav>a{padding:12px}
.wrap{width:calc(100% - 40px)}
/* retiré : .row (grille Bootstrap 5 gardée) */
/* retiré : .col-md-2 (grille Bootstrap 5 gardée) */
.preview-strip{font-size:13px}
.masthead{gap:12px}
.source-content .table-wrap{max-width:100%}
}


@media(max-width:760px){.js #rif-navigation{display:none}
.js #rif-navigation.is-open{display:flex;flex-direction:column;align-items:stretch}
.js #rif-menu-toggle{display:block}
}

.rif-support{padding:30px;background:var(--navy);color:#fff;border-radius:14px}
.rif-support h3{font-size:28px}
.rif-support a{color:#fff}
.rif-support p{font-size:18px}
.mission-focus{padding:30px;background:var(--pale);border-left:4px solid var(--red);margin-bottom:32px}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 40px}
.role-grid article{border:1px solid var(--line);border-radius:12px;padding:24px}
.role-grid h3{font-size:23px}
@media(max-width:760px){.role-grid{grid-template-columns:1fr}
}

:root{--blue:#245B80;--navy:#17324D;--red:#A63D4B;--ink:#243746;--muted:#526574;--pale:#F3F6F8;--line:#D8E1E7;--radius:10px}

body{font-size:18px;line-height:1.65;background:#fff;color:var(--ink)}

h1,h2,h3{letter-spacing:-.012em;line-height:1.25;font-weight:600}

.site-header{border-top:3px solid var(--blue);box-shadow:none}
.masthead{min-height:94px}

.brand-purpose strong{font-size:18px}
.brand-purpose span{font-size:15px;color:var(--muted)}

.nav-band{background:#fff}
.institutional-nav{gap:4px}
.institutional-nav>a{font-size:16px;font-weight:600;border-bottom:3px solid transparent;padding:13px 12px}

.institutional-nav>a[aria-current]{background:var(--pale);border-bottom-color:var(--blue);color:var(--navy)}

.institutional-nav>a:hover{background:var(--pale);color:var(--blue)}

.utility-nav a{font-size:16px}
.utility-nav .login{background:var(--blue);border-color:var(--blue);color:white}

.hero{background:#F3F6F8;padding:38px 0 40px;border-bottom:1px solid var(--line)}

.hero-grid{grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr);gap:48px}

.rif-home-title{font-size:clamp(30px,3.4vw,43px);line-height:1.22;max-width:700px;margin-bottom:18px}

.hero-description{font-size:19px;line-height:1.6;max-width:650px}

.eyebrow{font-size:15px;letter-spacing:0;text-transform:none;font-weight:600;margin-bottom:16px;color:var(--blue)}

.eyebrow:before{display:none}
.hero-actions{gap:14px}
.button,.secondary-button{font-size:17px;min-height:48px;padding:12px 20px;border-radius:7px}

.secondary-button{background:white;border-color:#AABCC9;color:var(--blue)}

.rif-support{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:24px;color:var(--ink)}

.rif-support h3{font-size:23px;color:var(--navy);margin-bottom:12px}
.rif-support p{font-size:17px;line-height:1.6;margin-bottom:14px}
.rif-support a{color:var(--blue);font-size:17px}

.rif-main{max-width:1120px;padding-top:34px}
.rif-paths{gap:16px;margin-bottom:40px;scroll-margin-top:190px}

.rif-path{border:1px solid var(--line);border-radius:8px;padding:23px 20px;box-shadow:none;background:#fff;transition:background .15s,border-color .15s}

.rif-path:hover{background:var(--pale);border-color:var(--blue)}
.rif-path strong{font-size:21px;color:var(--navy)}
.rif-path span{font-size:17px;line-height:1.55}

.mission-focus{background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;margin-bottom:34px}

.mission-focus h2,.rif-main>section>h2{font-size:29px}
.mission-focus p{max-width:900px;margin-bottom:0}

.role-grid{gap:28px;margin-top:22px}
.role-grid article{border:0;border-top:2px solid var(--line);border-radius:0;padding:20px 0}
.role-grid h3{font-size:23px;color:var(--navy)}
.role-grid p{font-size:18px}
.role-grid a{font-size:17px}

.source-content h1{font-size:clamp(27px,3vw,35px);line-height:1.3;margin-top:26px}
.source-content h2{font-size:28px}
.source-content h3{font-size:23px}

.page-intro{padding:8px 0 22px}
.page-intro p{font-size:18px;line-height:1.65;margin-bottom:12px}

.source-content .card,.source-content .list-group-item{border-radius:8px;box-shadow:none}
.source-content .list-group-item:hover{background:var(--pale);border-color:var(--blue)}

.source-content .card-img-top{height:115px;padding:18px}
.source-content .card-body{padding:24px}
.source-content .card-footer{background:#F3F6F8;border-top:1px solid var(--line)}

.step{background:transparent;box-shadow:none;border:0;border-top:2px solid var(--line);border-radius:0;padding:22px 0}
.step h2{font-size:24px}
.step h3{font-size:23px}

.faq{border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;padding:20px 0}
.faq summary{font-size:20px}
.faq p{font-size:18px;line-height:1.65}

.source-content .card-signin{border:1px solid var(--line);border-radius:10px}
.source-content .card-signin .card-title{font-size:30px}

.source-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.source-content select,.source-content textarea{border-color:#91A6B5;font-size:18px}
.source-content label{font-size:17px}

.source-content .form-note{background:var(--pale);border-left:3px solid var(--blue);border-radius:5px;color:var(--ink)}

.footer.rif-footer{background:#EAF0F4;color:var(--ink);border-top:1px solid var(--line);padding-top:38px}

.rif-footer h2,.rif-footer h3,.rif-footer strong{color:var(--navy)}
.rif-footer h2{font-size:18px}

.rif-footer a{color:var(--blue)}
.rif-footer a:hover{color:var(--navy)}
.rif-footer p,.rif-footer li,.rif-footer address{font-size:16px;line-height:1.65;color:var(--ink)}

.rif-footer .footer-bottom{border-top:1px solid #C7D5DF;color:var(--muted);font-size:16px}
.rif-footer summary{color:var(--blue)}

.prototype-note{font-size:15px;background:#fff;border:1px solid var(--line);box-shadow:none}
.prototype-note p{font-size:15px}

.preview-strip{font-size:14px;background:#EAF0F4;color:#3F5668}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

@media(max-width:760px){.hero-grid{grid-template-columns:1fr;gap:24px}
.hero{padding:26px 0}
.rif-home-title{font-size:31px}
.hero-description{font-size:18px}
.hero-actions{align-items:stretch;flex-direction:column}
.hero-actions a{width:100%;text-align:center}
.rif-support{padding:21px}
.rif-main{padding-top:26px}
.rif-paths{scroll-margin-top:115px}
.mission-focus h2,.rif-main>section>h2{font-size:26px}
.role-grid{gap:10px}
.institutional-nav>a[aria-current]{border-bottom:0;border-left-color:var(--blue)}
.footer.rif-footer p,.footer.rif-footer li{font-size:16px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.rif-path{transition:none}
}



/* ── Ajouts B-4-57 : adaptations au balisage de RIF ───────────────────────────────────────────────── */

/* Les règles input{width:100%;height:53px} de la maquette agrandiraient cases à cocher et boutons radio,
   y compris hors du cadre (espace personnel, filtres des tableaux). */
input[type=checkbox],input[type=radio]{width:auto;height:auto;min-height:0;padding:0}
.form-check-input[type=checkbox],.form-check-input[type=radio]{width:1em;height:1em}

/* Le cadre des pages : large pour les pages de données et l'espace personnel (tableaux, graphiques). */
.rif-main>.source-content.source-content--large{max-width:none}

/* Fil d'Ariane : celui du site (G7, construit sur l'URL) prend l'apparence de .crumb de la maquette. */
.crumb .breadcrumb{background:none;padding:0;margin:0;font-size:15px;flex-wrap:wrap}
.crumb .breadcrumb-item+.breadcrumb-item::before{content:'/';color:var(--muted)}
.crumb .breadcrumb-item.active{color:var(--ink)}

/* Zone pratique : bouton de connexion (identifiant btn_connexion gardé). */
.utility-nav .login span{color:inherit}

/* Messages flash du site au-dessus du contenu. */
.rif-main>.messages-du-site:empty{display:none}

/* Pied de page : titres gardés (« Nous contacter »), coordonnées. */
.rif-footer .footer-contact{margin-top:14px}
.rif-footer address{font-style:normal}

/* Contact : coordonnées de la maquette au-dessus du formulaire. */
.contact-coordonnees{margin-bottom:28px}

/* Cartes des pages (accueil « Les derniers arrivés ») : rendu de la maquette — bordure fine, titre à gauche en
   bleu, aucun soulignement hérité du lien qui enveloppe la carte. */
.source-content a:has(>.card){text-decoration:none;color:inherit}
.source-content .card.border-primary{border-color:var(--line)!important}
.source-content a:has(>.card):hover .card{border-color:var(--blue)!important;background:var(--pale)}
.source-content .card-title{text-align:left!important;color:var(--blue)}
.source-content .card .text-muted{text-decoration:none}

/* Titres de taille h1 posés sur un h2 (B-4-2, classe rif-titre) : taille des titres de la maquette. */
.source-content .rif-titre.h1{font-size:clamp(27px,3vw,35px);line-height:1.3;margin-top:26px}

/* Pastilles de filtre et compteurs : fond pâle et texte bleu, comme la maquette. */
.source-content .badge:has(a),.source-content .list-group-item .badge{background:var(--pale)!important;color:var(--blue)!important;border-radius:6px}
.source-content .badge a{color:var(--blue)!important}

/* Pages de données et espace personnel (sans maquette) : le cadre de lecture de 940 px de la maquette serrerait
   tableaux, graphiques et cartes ; il prend toute la largeur du cadre (1120 px) dès que la page en porte. */
.rif-main>.source-content:has(table,canvas,.leaflet-container,#carte,nav[aria-label="Espace personnel"]){max-width:none}

/* [hors-planning ABC-4-59 · G0 ABC-4-19] Photo de profil (ou pastille d'initiales) dans l'en-tête. */
.entete-avatar{display:inline-flex;align-items:center;flex:0 0 36px;width:36px;height:36px}
.entete-avatar-photo,.entete-avatar-pastille{width:36px;height:36px;border-radius:50%}
.entete-avatar-photo{object-fit:cover;border:1px solid var(--line)}
.entete-avatar-pastille{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:14px;font-weight:600;line-height:1}
/* [hors-planning ABC-4-59 · G0 ABC-4-19] Téléphone : la zone pratique est repliée dans le menu (Aide, Déconnexion y sont repris), mais la photo
   (ou les initiales) reste visible dans l'en-tête, à côté du bouton « Menu » — constaté au navigateur : elle disparaissait avec la zone. */
@media(max-width:760px){.utility-nav{display:flex;margin-left:auto}.utility-nav>a{display:none}}

/* [B-4-136 2026-10-12] Menu principal regroupé (comme EUSEP, même rendu que C-4-134 pour EPE) : rubriques déroulantes
   dans le bandeau, menu centré, bouton « Adhésion » à la suite. Bureau : le sous-menu s'ouvre sous la rubrique ; mobile
   (≤ 760 px) : il se déplie dans la colonne du menu. Sans JS (.js absent), les liens restent affichés à la suite.
   La rubrique active garde le soulignement rouge de la maquette. */
.institutional-nav{justify-content:center;align-items:center}
.institutional-nav .nav-group{position:relative;display:flex;align-items:stretch;align-self:stretch}
.institutional-nav .nav-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:13px 17px;color:var(--navy);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.institutional-nav .nav-toggle:hover,.institutional-nav .nav-group.is-open .nav-toggle{background:var(--pale);color:var(--blue)}
.institutional-nav .nav-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.institutional-nav .nav-group.is-active .nav-toggle{border-color:var(--red);background:#f0f5fa;color:var(--blue)}
.institutional-nav .nav-submenu{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:260px;background:#fff;border:1px solid var(--line);border-top:0;box-shadow:0 9px 25px #12365b1a;padding:6px 0}
.institutional-nav .nav-group.is-open .nav-submenu{display:block}
.institutional-nav .nav-submenu a{display:block;margin:0;border:0;padding:10px 19px;font-weight:500;font-size:15px}
.institutional-nav .nav-submenu a[aria-current]{border-left:3px solid var(--red);background:#f0f5fa}
html:not(.js) .institutional-nav .nav-submenu{display:block;position:static;border:0;box-shadow:none}
@media(max-width:760px){
  .institutional-nav .nav-group{display:block}
  .institutional-nav .nav-toggle{width:100%;justify-content:space-between;border-bottom:0;border-left:3px solid transparent;padding:12px 15px;margin:0}
  .institutional-nav .nav-group.is-active .nav-toggle{border-left-color:var(--red)}
  .institutional-nav .nav-submenu{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 6px 18px}
}

/* [ABC-4-152] Pages du second facteur : carte compacte, centrée, champ de code en avant, actions secondaires discrètes. */
.source-content .carte-2fa{max-width:460px;margin:8px auto 40px;padding:26px 28px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 14px rgba(16,44,82,.07)}
.source-content .carte-2fa h1{font-size:28px;line-height:1.2;margin:0 0 8px}
.source-content .carte-2fa h2{font-size:17px;line-height:1.3;margin:0 0 8px}
.source-content .carte-2fa p{font-size:16px;line-height:1.5;margin:0 0 14px}
.source-content .carte-2fa .carte-2fa__intro{color:var(--muted)}
.source-content .carte-2fa .carte-2fa__note{font-size:14px;color:var(--muted)}
.source-content .carte-2fa .form-label-group{margin-bottom:12px}
.source-content .carte-2fa label{font-size:15px;margin:0 0 6px}
.source-content .carte-2fa input.code-2fa{font-size:26px;letter-spacing:.3em;text-align:center;padding:10px 12px;min-height:56px}
.source-content .carte-2fa .carte-2fa__confiance{display:flex;align-items:center;gap:8px;font-weight:400;font-size:15px;margin:0 0 14px}
.source-content .carte-2fa .carte-2fa__confiance input{flex:none;margin:0}
.source-content .carte-2fa .carte-2fa__principal{display:flex;width:100%;justify-content:center;text-decoration:none}
.source-content .carte-2fa .carte-2fa__qr{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);text-align:center}
.source-content .carte-2fa .carte-2fa__renvoi{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.source-content .carte-2fa .carte-2fa__renvoi .carte-2fa__note{margin-bottom:10px}
.source-content .carte-2fa .carte-2fa__qr [data-qr-image] svg{width:150px;height:150px}
.source-content .carte-2fa .carte-2fa__qr p{font-size:14px;color:var(--muted);margin:6px 0 0}
.source-content .carte-2fa .carte-2fa__actions{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:16px;font-size:14px}
.source-content .carte-2fa .carte-2fa__actions form{margin:0}
.source-content .carte-2fa .lien-discret,.source-content .carte-2fa .lien-discret[type=submit]{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--blue);font-size:14px;font-weight:400;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.source-content .carte-2fa .lien-discret:hover{color:var(--red)}
.source-content .carte-2fa .carte-2fa__contexte{margin:0 0 14px;padding:12px 14px;background:var(--pale);border-radius:8px;font-size:15px}
.source-content .carte-2fa .carte-2fa__contexte dt{font-weight:600;font-size:13px;color:var(--muted)}
.source-content .carte-2fa .carte-2fa__contexte dd{margin:0 0 6px}
.source-content .carte-2fa .carte-2fa__codes{columns:2;margin:0 0 16px;padding:12px 14px 12px 36px;background:var(--pale);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px}
.source-content .carte-2fa .carte-2fa__etapes{margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.5}
.source-content .carte-2fa .carte-2fa__etapes li{margin-bottom:6px}
.source-content .carte-2fa .carte-2fa__principal+.carte-2fa__note{margin-top:14px}
.source-content .carte-2fa .alert{font-size:15px;padding:10px 14px;margin:0 0 14px}
@media(max-width:650px){.source-content .carte-2fa{padding:20px 16px;margin-bottom:24px}.source-content .carte-2fa h1{font-size:24px}.source-content .carte-2fa .carte-2fa__qr [data-qr-image] svg{width:130px;height:130px}}
@media print{.source-content .carte-2fa .carte-2fa__actions{display:none}}

/* [B-4-155 2026-10-13] /donnees-publiques en cartes, sur le modèle d'EPE (.cartes-donnees / .carte-donnee) : une
   colonne au téléphone, deux à partir de 768 px, trois à partir de 992 px ; le lien du titre est étiré (Bootstrap
   .stretched-link) : toute la carte mène à la page de données, le focus clavier se voit sur la carte entière. */
.cartes-donnees { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 1.5rem; }
@media (min-width: 48em) { .cartes-donnees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .cartes-donnees { grid-template-columns: repeat(3, 1fr); } }
.carte-donnee { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 10px; background: #fff; padding: 20px 22px; box-shadow: 0 1px 2px rgba(16, 38, 90, .06); transition: box-shadow .15s ease, border-color .15s ease; }
.carte-donnee:hover { box-shadow: 0 6px 18px rgba(16, 38, 90, .12); border-top-color: var(--navy); }
.carte-donnee:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.carte-donnee h2 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.carte-donnee h2 a { text-decoration: none; color: var(--blue); }
.carte-donnee h2 a:hover { text-decoration: underline; }
.carte-donnee h2 a:focus-visible { outline: none; }
.carte-donnee__description { margin: 0; color: var(--ink); font-size: .95rem; }

/* [B-R-133] Page d'une action « Agir » : texte explicatif et étapes numérotées lisibles (titre en gras, texte sur sa ligne). */
.action-explication h2 { margin-top: 1.25rem; color: var(--blue); }
.action-explication ul { padding-left: 1.25rem; }
.action-explication li { margin-bottom: .4rem; }
.schema-etapes { list-style: none; counter-reset: etape; margin: 0 0 1rem; padding: 0; display: grid; gap: 12px; }
.schema-etapes > li { counter-increment: etape; position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px 12px 60px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; background: #fff; overflow-wrap: anywhere; }
.schema-etapes > li::before { content: counter(etape); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.schema-etapes__titre { font-weight: 700; color: var(--ink); }
.schema-etapes__texte { color: var(--ink); }