/* ============================================================================
   Compléments propres à WordPress. site.css reste la copie de la maquette :
   tout écart d'intégration vit ici, pour garder la comparaison lisible.
   ========================================================================== */

.admin-bar .entete{top:32px}
@media (max-width:782px){.admin-bar .entete{top:0}}

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Photo voilée (héros, tête de fiche) : le voile partait d'un aplat vert profond uni alors que
   la bande dessous porte la matière (reflet + grain) ; la jonction dessinait un trait vertical.
   La photo s'efface désormais vers la bande au lieu d'y être raccordée par un aplat. */
@media (min-width:861px){
  .hero-photo,.fiche-tete-photo{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 38%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 38%);
  }
  .hero-photo::after,.fiche-tete-photo::after{
    background:
      var(--grain),
      linear-gradient(90deg, rgba(15,90,69,.80) 0%, rgba(15,90,69,.32) 52%, rgba(15,90,69,.10) 100%),
      linear-gradient(0deg, rgba(10,61,47,.55) 0%, rgba(10,61,47,0) 42%);
  }
}

/* Catalogue : les jetons sont des liens (la page marche sans JS) */
.jeton a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(22,32,26,.07);
}
.jeton a:hover{background:var(--rouge-voile)}
.jeton a:hover .i{stroke:var(--rouge)}
.js .sans-js{display:none}
html:not(.js) .avec-js{display:none}

/* Retour du formulaire de rappel */
.retour-demande{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; border-radius:var(--r-3); margin:0 0 22px;
  background:var(--vif-voile); border:1px solid var(--vif-trait);
}
.retour-demande p{margin:0}
.retour-demande.est-erreur{background:var(--rouge-voile); border-color:var(--rouge)}
.retour-demande .i{flex:none; margin-top:2px}
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Pages éditoriales (pages, actualités) */
.contenu-page{max-width:72ch}
.contenu-page > * + *{margin-top:1em}
.contenu-page h2{margin-top:1.8em}
.contenu-page img{max-width:100%; height:auto; border-radius:var(--r-3)}
.contenu-page a{color:var(--vert-txt); text-decoration:underline; text-underline-offset:3px}
.tete-page{padding:clamp(40px,2rem + 3vw,88px) 0 clamp(24px,1rem + 2vw,48px)}
.tete-page h1{margin:0; max-width:24ch}
.tete-page p{max-width:60ch; color:var(--encre-2); margin-top:14px}

.deux-colonnes h2:not(.mt-0){margin-top:1.6em}

/* Liste des établissements */
.grille-etablissements{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}

/* ============================================================================
   Robustesse et petits écrans
   ========================================================================== */

/* Surfaces du navigateur aux couleurs du réseau */
:root{accent-color:var(--foret); scrollbar-color:var(--filet-fonce) var(--papier)}
.saisie{caret-color:var(--foret)}

/* Une colonne en 1fr se laisse élargir par son contenu (tableau, adresse e-mail,
   mot long) et fait déborder la page sur mobile : minmax(0,1fr) la tient. */
.fiche{grid-template-columns:minmax(0,1fr) 384px}
.deux-colonnes,.centre-tete-grille{grid-template-columns:minmax(0,1fr) 340px}
.catalogue{grid-template-columns:290px minmax(0,1fr)}
.centres-bloc{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media (max-width:1020px){.fiche{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.catalogue{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.deux-colonnes,.centre-tete-grille,.centres-bloc{grid-template-columns:minmax(0,1fr)}}
h1,h2,h3,.centre-ligne b,.carte-centre-tete b{overflow-wrap:break-word}
.coordonnees a,.equipe a,.pied-contact a{overflow-wrap:anywhere}

/* Colonnes collantes : sous la barre d'administration quand on est connecté,
   et jamais plus hautes que l'écran (sinon leur bas devient inatteignable). */
.admin-bar .facettes,.admin-bar .aside-contact{top:132px}
@media (min-width:981px){
  .facettes{max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-width:thin}
  .admin-bar .facettes{max-height:calc(100vh - 148px)}
}
@media (min-width:1021px) and (max-height:760px){.aside-contact{position:static}}

/* Tiroirs fermés : hors de l'écran ET hors du parcours clavier. */
.tiroir{visibility:hidden; transition:transform 280ms var(--sortie), visibility 0s linear 280ms}
.tiroir[data-ouvert="true"]{visibility:visible; transition:transform 280ms var(--sortie), visibility 0s}

/* Catalogue : facettes sans résultat, chargement, validation des filtres sur mobile */
.case-vide,.case-vide input{cursor:not-allowed}
.vide h2{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); margin-bottom:.4em}
.est-en-cours #resultats,.est-en-cours #vide{opacity:.45; pointer-events:none; transition:opacity 150ms ease}
.facettes-valider{display:none}
@media (max-width:980px){
  .facettes-panneau{visibility:hidden; transition:transform 280ms var(--sortie), visibility 0s linear 280ms}
  .facettes-panneau[data-ouvert="true"]{visibility:visible; transition:transform 280ms var(--sortie), visibility 0s}
  .facettes-panneau{padding-bottom:0}
  .facettes .sans-js,.resultats-tete .tri{display:none}
  .facettes-valider{
    display:block; position:sticky; bottom:0; z-index:2; margin-top:12px;
    padding:14px 0 calc(16px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid var(--filet);
  }
}

/* Libellés de champ : lisibles sans plisser les yeux */
.champ label{font-size:.84rem}

/* Sans la navigation (masquée sous 1024 px), plus rien ne poussait le bouton
   menu à droite : il restait collé au logo. */
@media (max-width:1023px){.entete-actions{margin-left:auto}}

/* En-tête plus bas sur téléphone : l'écran appartient au contenu */
@media (max-width:700px){
  .entete .page{min-height:66px}
  .marque img{height:44px}
  .utilitaire-liens{gap:0 16px}
  .utilitaire a{padding-block:7px}
}

/* Doigts : les liens serrés gagnent une zone de toucher sans changer la mise en page */
@media (pointer:coarse){
  .univers-filieres{gap:0 14px}
  .univers-filieres a{display:inline-block; padding-block:7px}
  .ariane ol{padding-block:1px}
  .ariane a{display:inline-block; padding-block:11px}
  .coordonnees a{display:inline-block; padding-block:5px; margin-block:-5px}
  .pied li{margin-bottom:2px}
  .pied li a{display:inline-block; padding-block:7px}
}

/* Tableaux de la fiche : en lignes empilées sur téléphone, plutôt qu'un
   défilement horizontal où la dernière colonne se perd. */
@media (max-width:620px){
  .tableau-empile thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tableau-empile,.tableau-empile tbody,.tableau-empile tr{display:block; width:100%}
  .tableau-empile tr{padding:12px 0; border-bottom:1px solid var(--filet-clair)}
  .tableau-empile tbody tr:hover{background:none}
  .tableau-empile td{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:12px; padding:5px 0; border:0}
  .tableau-empile td::before{
    content:attr(data-label); padding-top:3px;
    font-family:"Montserrat",sans-serif; font-weight:600; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.07em; color:var(--encre-3);
  }
  .tableau-empile td:first-child{color:var(--encre); font-weight:500}
}

/* Barre d'action mobile : s'efface quand le formulaire est à l'écran */
.barre-action{transition:transform 240ms var(--sortie)}
.barre-action.est-masquee{transform:translateY(110%)}

/* ============================================================================
   Questions fréquentes
   ========================================================================== */
.surtitre{
  margin:0 0 10px; font:600 .78rem/1.3 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:.08em; color:var(--vert-txt);
}
.faq-sommaire{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.faq-sommaire .puce{padding:8px 14px}
.faq-sommaire .i{stroke:var(--foret)}
.faq-filtre{max-width:560px; margin-bottom:12px}
.faq-filtre-vide{margin:0 0 24px}
.faq-theme{margin-top:36px; scroll-margin-top:120px}
.faq-theme h2{display:flex; align-items:center; gap:12px; font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); margin:0 0 10px}
.faq-theme h2 .i{flex:none; stroke:var(--foret)}
.faq-q{border-top:1px solid var(--filet); scroll-margin-top:120px}
.faq-q:last-child{border-bottom:1px solid var(--filet)}
.faq-q summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 4px; cursor:pointer; list-style:none;
  font-family:"Montserrat",sans-serif; font-weight:600; font-size:1rem; line-height:1.4; color:var(--encre);
  transition:color var(--etat);
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary:hover{color:var(--vert-txt)}
.faq-q summary .i{flex:none; stroke:var(--encre-3); transition:transform 200ms var(--sortie)}
.faq-q[open] summary .i{transform:rotate(180deg)}
.faq-r{padding:0 4px 22px}
.faq-r p{color:var(--encre-2)}
.faq-lien{font-size:.86rem}
.faq-q.est-masquee,.faq-theme.est-masquee{display:none}
.faq-voisines{margin-top:40px; padding-top:28px; border-top:1px solid var(--filet)}
.faq-voisines h2{font-size:1.15rem; margin:0 0 12px}
.faq-voisines ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.encart-vert{background:var(--vif-voile); border-color:var(--vif-trait)}
.encart-vert h3 .i{stroke:var(--foret)}
.financement-suite{margin:clamp(28px,2vw + 1rem,44px) 0 0}

/* ============================================================================
   Carte interactive (Leaflet, fond Plan IGN)
   ========================================================================== */
.carte-interactive{position:relative}
.carte-interactive-zone{
  height:clamp(320px,26vw + 120px,460px); border-radius:var(--r-2);
  background:var(--papier); z-index:0; font-family:"Roboto",sans-serif;
}
.carte-interactive.est-chargee .carte-interactive-repli{display:none}
.centre-plan .carte-interactive-zone{height:300px; border-radius:0}
.carte-pin{background:none; border:0}
.carte-pin span{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg);
  background:var(--vif); border:3px solid var(--vert-profond); box-shadow:var(--ombre-2);
  font:700 .82rem/1 "Montserrat",sans-serif; color:var(--vert-nuit);
  transition:transform var(--etat), background var(--etat);
}
.carte-pin b{transform:rotate(45deg); font-weight:700}
.leaflet-marker-icon.carte-pin:hover span,.leaflet-marker-icon.carte-pin:focus-visible span{background:var(--vif-clair); transform:rotate(-45deg) scale(1.08)}
.leaflet-marker-icon.carte-pin:focus-visible{outline:3px solid var(--foret); outline-offset:4px; border-radius:50%}
.carte-interactive .leaflet-popup-content-wrapper{border-radius:var(--r-2); box-shadow:var(--ombre-3)}
.carte-interactive .leaflet-popup-content{margin:14px 18px; font-size:.9rem; line-height:1.45; display:grid; gap:2px}
.carte-interactive .leaflet-popup-content b{font-family:"Montserrat",sans-serif; font-size:.95rem; color:var(--encre)}
.carte-interactive .leaflet-popup-content span{color:var(--encre-3)}
.carte-interactive .leaflet-popup-content a{margin-top:6px; color:var(--vert-txt); font-weight:600}
.carte-interactive .leaflet-control-attribution{font-size:.7rem}
.carte-interactive .leaflet-control-zoom a{color:var(--encre)}

/* Catalogue : volet « Voir sur la carte » */
.catalogue-carte{margin:0 0 22px; border:1px solid var(--filet); border-radius:var(--r-3); background:#fff}
.catalogue-carte summary{
  display:flex; align-items:center; gap:10px; padding:14px 18px; cursor:pointer; list-style:none;
  font-family:"Montserrat",sans-serif; font-weight:600; font-size:.95rem;
}
.catalogue-carte summary::-webkit-details-marker{display:none}
.catalogue-carte summary .i:first-child{stroke:var(--foret)}
.catalogue-carte summary span{font-family:"Roboto",sans-serif; font-weight:400; font-size:.86rem; color:var(--encre-3)}
.catalogue-carte summary .i:last-child{margin-left:auto; stroke:var(--encre-3); transition:transform 200ms var(--sortie)}
.catalogue-carte[open] summary .i:last-child{transform:rotate(180deg)}
.catalogue-carte .carte-interactive{padding:0 12px 12px}

[hidden]{display:none!important}

/* ============================================================================
   Recherche guidée et entrées par situation
   ========================================================================== */
.profils-bloc{margin-top:clamp(28px,1.5rem + 1.5vw,44px)}
.profils-titre{font-size:1.05rem; margin:0 0 14px; color:var(--encre-2)}
.profils{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.profil{
  display:flex; flex-direction:column; gap:12px; padding:18px;
  border:1px solid var(--filet); border-radius:var(--r-3); background:#fff;
  color:var(--encre); text-decoration:none; box-shadow:var(--ombre-1);
  transition:border-color var(--etat), background var(--etat), transform var(--etat), box-shadow var(--etat);
}
.profil .i{stroke:var(--foret)}
.profil b{display:block; font-family:"Montserrat",sans-serif; font-weight:600; font-size:.98rem; line-height:1.3}
.profil small{display:block; margin-top:4px; font-size:.84rem; color:var(--encre-3); line-height:1.4}
.profil:hover{border-color:var(--vif); background:var(--vif-voile); transform:translateY(-2px); box-shadow:var(--ombre-2); color:var(--encre)}
@media (max-width:1100px){.profils{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .profils{grid-template-columns:minmax(0,1fr); gap:8px}
  .profil{flex-direction:row; align-items:center; padding:14px 16px}
  .profil small{display:none}
}

.orienteur{max-width:900px}
.orienteur-etape{border:0; padding:0; margin:0 0 34px; min-width:0}
.orienteur-etape legend{
  display:flex; align-items:center; gap:12px; padding:0; margin-bottom:16px;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem); color:var(--encre);
}
.orienteur-etape legend:focus{outline:0}
.orienteur-etape legend span{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:50%; background:var(--vert-profond); color:#fff; font-size:.9rem;
}
.choix-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.choix{
  position:relative; display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
  border:1px solid var(--filet-fonce); border-radius:var(--r-3); background:#fff; cursor:pointer;
  transition:border-color var(--etat), background var(--etat), box-shadow var(--etat);
}
.choix input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.choix .i{flex:none; stroke:var(--foret); margin-top:1px}
.choix b{display:block; font-family:"Montserrat",sans-serif; font-weight:600; font-size:.97rem; line-height:1.3}
.choix small{display:block; margin-top:3px; font-size:.84rem; color:var(--encre-3); line-height:1.4}
.choix:hover{border-color:var(--vif); background:var(--vif-voile)}
.choix:has(input:checked){border-color:var(--vif-fonce); background:var(--vif-voile); box-shadow:inset 0 0 0 1px var(--vif-fonce)}
.choix:has(input:focus-visible){outline:3px solid var(--foret); outline-offset:2px}
.orienteur-lieu{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px}
.orienteur-lieu .champ{flex:0 1 340px; min-width:240px}
.orienteur-lieu .btn{min-height:52px}
.orienteur-lieu + .aide{margin-top:12px}
.orienteur-actions{display:flex; flex-wrap:wrap; gap:10px}
.orienteur-progression{margin:0 0 16px; font:600 .78rem/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--vert-txt)}
.orienteur-progression:empty{display:none}
.orienteur-replie{margin-top:56px; padding-top:40px; border-top:1px solid var(--filet)}
.orienteur-replie > h2{font-size:1.3rem; margin:0 0 24px}

.orienteur-recap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  padding:14px 18px; margin-bottom:28px; border-radius:var(--r-3);
  background:var(--vif-voile); border:1px solid var(--vif-trait);
}
.orienteur-recap p{margin:0}
.orienteur-resultats > h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem); margin:0 0 6px}
.orienteur-precision{margin:0 0 22px; color:var(--encre-2)}
.orienteur-precision .i{stroke:var(--or-txt); vertical-align:-3px}
.orienteur-carte{display:flex; flex-direction:column; gap:6px}
.orienteur-carte .carte-f{flex:1}
.orienteur-km{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:.84rem; font-weight:600; color:var(--vert-txt)}
.orienteur-km .i{stroke:var(--foret)}
.orienteur-resultats .catalogue-carte{margin-top:24px}
.orienteur-suite{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.orienteur-entreprise{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:36px}
@media (max-width:800px){.orienteur-entreprise{grid-template-columns:minmax(0,1fr)}}
.carte-lien{
  display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
  border:1px solid var(--filet); border-radius:var(--r-3); background:#fff; color:var(--encre); text-decoration:none;
  transition:border-color var(--etat), background var(--etat);
}
.carte-lien .i{flex:none; stroke:var(--foret)}
.carte-lien b{display:block; font-family:"Montserrat",sans-serif; font-weight:600}
.carte-lien small{display:block; margin-top:3px; color:var(--encre-3); font-size:.85rem}
.carte-lien:hover{border-color:var(--vif); background:var(--vif-voile); color:var(--encre)}

/* ============================================================================
   Assistant (bouton flottant et panneau de discussion)
   ========================================================================== */
.assistant{position:fixed; right:20px; bottom:20px; z-index:70; font-family:"Roboto",sans-serif}
.assistant-bouton{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 20px 0 16px;
  border:0; border-radius:var(--r-pilule); cursor:pointer;
  background:var(--vert-profond); color:#fff; box-shadow:var(--ombre-3);
  font:600 .95rem/1 "Montserrat",sans-serif; transition:background var(--etat), transform var(--etat);
}
.assistant-bouton{padding-left:8px}
.assistant-bouton .uvi{box-shadow:0 0 0 2px rgba(241,245,236,.28)}
.assistant-bouton:hover{background:var(--vert-nuit); transform:translateY(-2px)}
.assistant.est-ouvert .assistant-bouton{display:none}
.assistant-panneau{
  position:absolute; right:0; bottom:0; width:min(400px,calc(100vw - 40px));
  height:min(640px,calc(100vh - 120px)); display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--filet); border-radius:var(--r-3); box-shadow:var(--ombre-3); overflow:hidden;
}
.assistant-tete{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 14px 20px;
  background:var(--matiere-verte), var(--vert-profond); color:#fff;
}
.assistant-tete > div{flex:1; min-width:0; align-self:center}
.assistant-tete .uvi{box-shadow:0 0 0 2px rgba(241,245,236,.28)}
.assistant-tete h2{margin:0; color:#fff; font-size:1.1rem}
.assistant-tete p{margin:2px 0 0; font-size:.82rem; color:var(--sur-vert-2)}
.assistant-tete .ferme{color:#fff; background:transparent; border:0; cursor:pointer; padding:4px; border-radius:var(--r-2)}
.assistant-tete .ferme .i{stroke:#fff}
.assistant-tete .ferme:hover{background:rgba(255,255,255,.12)}
.assistant-fil{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; background:var(--papier); overscroll-behavior:contain}
.assistant-msg{max-width:90%; padding:12px 14px; border-radius:14px; font-size:.92rem; line-height:1.5}
.assistant-msg p{margin:0}
.assistant-msg p + p,.assistant-msg ul{margin-top:8px}
.assistant-msg ul{padding-left:18px; margin-bottom:0}
.assistant-msg-bot{align-self:flex-start; background:#fff; border:1px solid var(--filet); border-bottom-left-radius:4px; color:var(--encre)}
.assistant-msg-moi{align-self:flex-end; background:var(--vert-profond); color:#fff; border-bottom-right-radius:4px}
.assistant-msg.est-erreur{background:var(--rouge-voile); border-color:var(--rouge)}
.assistant-suggestions{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.assistant-suggestions .puce{border:1px solid var(--filet); cursor:pointer; text-align:left; font-family:inherit}
.assistant-liens-titre{margin-top:12px!important; font:600 .72rem/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.07em; color:var(--encre-3)}
.assistant-liens{list-style:none; padding:0!important; margin:6px 0 0!important; display:grid; gap:6px}
.assistant-liens a{color:var(--vert-txt); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.assistant-liens span{display:block; font-size:.8rem; color:var(--encre-3)}
.assistant-ia{margin-top:10px!important; font-size:.76rem; color:var(--encre-3)}
.assistant-attente{display:flex; gap:5px; padding:16px}
.assistant-attente span{width:7px; height:7px; border-radius:50%; background:var(--filet-fonce); animation:assistant-point 1s infinite ease-in-out}
.assistant-attente span:nth-child(2){animation-delay:.15s}
.assistant-attente span:nth-child(3){animation-delay:.3s}
@keyframes assistant-point{0%,80%,100%{opacity:.35; transform:none} 40%{opacity:1; transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.assistant-attente span{animation:none}}
.assistant-saisie{display:flex; gap:8px; align-items:flex-end; padding:12px; border-top:1px solid var(--filet); background:#fff}
.assistant-saisie textarea{
  flex:1; min-height:46px; max-height:120px; resize:none; padding:12px 14px;
  border:1px solid var(--filet-fonce); border-radius:var(--r-2); font:inherit; font-size:.95rem; color:var(--encre);
}
.assistant-saisie textarea:focus{outline:3px solid var(--foret); outline-offset:1px; border-color:var(--foret)}
.assistant-saisie .btn{min-height:46px; padding-inline:14px}
.assistant-mention{margin:0; padding:0 14px 12px; background:#fff; font-size:.74rem; color:var(--encre-3)}
.assistant-mention a{color:var(--encre-2)}
/* Fiche formation sur mobile : au-dessus de la barre « Appeler / Être recontacté » */
@media (max-width:1020px){
  body:has(.barre-action) .assistant{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .assistant{right:12px}
  .assistant-bouton span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .assistant-bouton{padding:0; width:56px; height:56px; justify-content:center}
  .assistant.est-ouvert{left:0; right:0; bottom:0!important}
  .assistant-panneau{position:fixed; left:0; right:0; bottom:0; width:100%; height:min(88vh,640px); border-radius:var(--r-3) var(--r-3) 0 0}
}
.orienteur-recap .btn-lien{display:inline-flex; align-items:center; gap:6px}

/* Fiche formation : volet « Vous êtes employeur ? » */
.bloc-employeur{margin:28px 0; border:1px solid var(--filet); border-radius:var(--r-3); background:#fff}
.bloc-employeur summary{display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; list-style:none}
.bloc-employeur summary::-webkit-details-marker{display:none}
.bloc-employeur summary > .i:first-child{flex:none; stroke:var(--foret)}
.bloc-employeur summary span{flex:1; min-width:0}
.bloc-employeur summary b{display:block; font-family:"Montserrat",sans-serif; font-weight:600}
.bloc-employeur summary small{display:block; margin-top:3px; color:var(--encre-3); font-size:.86rem}
.bloc-employeur summary > .i:last-child{flex:none; transition:transform var(--etat)}
.bloc-employeur[open] summary > .i:last-child{transform:rotate(180deg)}
.bloc-employeur summary:hover{background:var(--vif-voile)}
.bloc-employeur summary:focus-visible{outline:3px solid var(--foret); outline-offset:2px}
.bloc-employeur-texte{padding:4px 20px 20px; border-top:1px solid var(--filet-clair)}
.bloc-employeur-texte p,.bloc-employeur-texte ul{margin:12px 0 0}
.bloc-employeur-texte h3{margin:24px 0 0; font-size:1rem}

/* ============================================================================
   Uvi, l'assistant : son visage et ses bulles dans la recherche guidée
   ========================================================================== */
.uvi{display:block; flex:none; border-radius:50%}
.uvi-24{width:24px; height:24px}
.uvi-32{width:36px; height:36px}
.uvi-40{width:40px; height:40px}
.uvi-dit{display:flex; align-items:flex-end; gap:12px; max-width:720px; margin:0 0 20px}
.uvi-bulle{
  position:relative; flex:1; min-width:0; padding:14px 18px;
  background:#fff; border:1px solid var(--vif-trait); border-radius:var(--r-3) var(--r-3) var(--r-3) 4px;
  color:var(--encre); font-size:.95rem; line-height:1.55;
}
.uvi-bulle p{margin:0}
.uvi-bulle p + p{margin-top:8px}
.uvi-dit-etape{margin:-4px 0 18px}
.uvi-dit-etape .uvi{width:32px; height:32px}
.uvi-dit-etape .uvi-bulle{padding:10px 14px; font-size:.9rem; background:var(--vif-voile); color:var(--encre-2)}
.orienteur:not(.est-pas-a-pas) .uvi-dit-etape{display:none} /* sans JS, toutes les questions à la suite : Uvi se tait */
.uvi-dit-resultats{margin-bottom:16px}
.uvi-dit-suite{margin:36px 0 0; max-width:none}
.uvi-questions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px!important}
.uvi-questions .puce{border:1px solid var(--filet); cursor:pointer; font-family:inherit; text-align:left}
.uvi-questions .puce:hover{border-color:var(--vif); background:var(--vif-voile)}
.uvi-questions .puce-uvi{background:var(--vert-profond); color:#fff; border-color:var(--vert-profond)}
.uvi-questions .puce-uvi .i{stroke:var(--vif-clair)}
.uvi-questions .puce-uvi:hover{background:var(--vert-nuit); border-color:var(--vert-nuit); color:#fff}

.uvi-phrase{max-width:900px; margin:0 0 40px; padding:24px; border-radius:var(--r-3); background:var(--vif-voile); border:1px solid var(--vif-trait)}
.uvi-phrase .uvi-dit{margin-bottom:16px}
.uvi-phrase-form{display:flex; flex-wrap:wrap; gap:10px; margin-left:52px}
.uvi-phrase-form .saisie{flex:1 1 320px; min-width:0}
.uvi-phrase-form .btn{min-height:52px}
.uvi-ou{
  display:flex; align-items:center; gap:14px; margin:22px 0 0;
  font:600 .78rem/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--encre-3);
}
.uvi-ou::before,.uvi-ou::after{content:""; flex:1; height:1px; background:var(--vif-trait)}
@media (max-width:600px){
  .uvi-phrase{padding:18px 16px}
  .uvi-phrase-form{margin-left:0}
  .uvi-phrase-form .btn{width:100%; justify-content:center}
}

/* ============================================================================
   Plateforme de recherche : suggestions, lieu, sélection, comparatif,
   témoignages, financements
   ========================================================================== */

/* Barre du catalogue : mot-clé, lieu, distance, bouton */
.barre-catalogue-lieu{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(150px,auto) auto}
.barre-catalogue-lieu .select:disabled{opacity:.55; cursor:not-allowed}
@media (max-width:980px){
  .barre-catalogue-lieu{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .barre-catalogue-lieu .champ:first-child,.barre-catalogue-lieu .btn{grid-column:1/-1}
}
@media (max-width:560px){
  .barre-catalogue-lieu{grid-template-columns:minmax(0,1fr) auto; gap:10px}
  .barre-catalogue-lieu .champ-suggestions{grid-column:1/-1}
  .barre-catalogue-lieu .btn{grid-column:auto; align-self:end}
  .tete-catalogue > .page > p{font-size:.95rem}
}

.resultats-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px}
.resultats-lieu{color:var(--encre-3); font-weight:400}
.resultats-tri{flex-direction:row; align-items:center; gap:10px; margin:0}
.resultats-tri label{margin:0; white-space:nowrap; color:var(--encre-3)}
.select-compact{min-height:42px; padding-block:8px; font-size:.9rem}

/* Suggestions à la frappe */
.champ-suggestions{position:relative}
.suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  margin:0; padding:6px; list-style:none; max-height:min(380px,60vh); overflow-y:auto;
  background:#fff; border:1px solid var(--filet); border-radius:var(--r-3); box-shadow:var(--ombre-3);
  text-align:left;
}
.suggestions-groupe{
  padding:10px 12px 4px; font:600 .7rem/1.3 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:.08em; color:var(--encre-3);
}
.suggestion{display:grid; gap:1px; padding:9px 12px; border-radius:var(--r-2); cursor:pointer; color:var(--encre)}
.suggestion span{font-weight:500; line-height:1.35}
.suggestion small{font-size:.8rem; color:var(--encre-3); line-height:1.35}
.suggestion:hover,.suggestion.est-active{background:var(--vif-voile)}
.suggestion.est-active{box-shadow:inset 3px 0 0 var(--vif-fonce)}

/* Distance sur la carte de formation */
.carte-f-lignes .carte-f-km{color:var(--vert-txt)}
.carte-f-lignes .carte-f-km .i{stroke:var(--foret)}
.carte-f-lignes .carte-f-km b{color:var(--vert-txt); font-weight:600}

/* Bouton « Sélectionner » */
.selection-bouton{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:600 .86rem/1 "Montserrat",sans-serif; color:var(--encre);
  transition:background var(--etat), border-color var(--etat), color var(--etat), transform var(--etat);
}
.selection-bouton .i{width:18px; height:18px; stroke:currentColor; transition:fill var(--etat), transform var(--etat)}
.selection-bouton.est-selectionne .i{fill:currentColor}
.selection-bouton:active .i{transform:scale(.88)}
.selection-carte{
  position:absolute; top:14px; right:14px; z-index:2;
  width:42px; height:42px; justify-content:center; padding:0;
  background:#fff; border:1px solid var(--filet); border-radius:50%; box-shadow:var(--ombre-1); color:var(--encre-3);
}
.selection-carte span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.selection-carte:hover{border-color:var(--vif); color:var(--vert-txt)}
.selection-carte.est-selectionne{background:var(--vif-voile); border-color:var(--vif-trait); color:var(--vert-txt)}
.carte-f h3{padding-right:44px}

/* Outils de la fiche : sélection, partage */
.fiche-outils{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; position:relative}
.selection-fiche,.fiche-outil{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid var(--sur-vert-filet); border-radius:var(--r-pilule);
  font:600 .88rem/1 "Montserrat",sans-serif; color:#fff;
}
.fiche-outil .i{width:18px; height:18px; stroke:#fff}
.selection-fiche:hover,.fiche-outil:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5)}
.selection-fiche.est-selectionne{background:var(--vif); border-color:var(--vif); color:var(--encre)}

/* Lien « Ma sélection » de l'en-tête */
.entete-selection{
  position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px;
  border-radius:var(--r-2); color:var(--encre); text-decoration:none; font:600 .92rem/1 "Montserrat",sans-serif;
  transition:background var(--etat), color var(--etat);
}
.entete-selection .i{stroke:var(--foret)}
.entete-selection:hover{background:var(--vif-voile); color:var(--encre)}
.entete-selection-compte,.tiroir-compte{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--r-pilule); background:var(--vif); color:var(--encre); font:700 .72rem/1 "Montserrat",sans-serif;
}
/* Grand écran : le lien vit dans la barre utilitaire, l'en-tête est plein. Téléphone : un cœur à côté du menu. */
.entete-selection{display:none}
.utilitaire-selection{position:relative}
.utilitaire-selection .entete-selection-compte{position:static; margin-left:6px; min-width:18px; height:18px; font-size:.68rem}
@media (max-width:1023px){.utilitaire-selection{display:none!important}}
@media (max-width:1023px){
  .entete-selection{display:inline-flex; width:42px; padding:0; justify-content:center}
  .entete-selection .entete-selection-compte{position:absolute; right:-4px; top:-2px}
}

/* Annonce brève (ajout à la sélection, lien copié) */
.annonce{
  position:fixed; left:50%; bottom:24px; z-index:90; transform:translate(-50%,24px);
  display:flex; align-items:center; gap:14px; width:max-content; max-width:min(560px,calc(100vw - 32px)); padding:14px 18px;
  background:var(--vert-nuit); color:#fff; border-radius:var(--r-3); box-shadow:var(--ombre-3);
  font-size:.92rem; opacity:0; pointer-events:none; transition:opacity 200ms ease, transform 240ms var(--sortie);
}
.annonce p{margin:0}
.annonce a{flex:none; color:var(--vif-clair); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.annonce.est-visible{opacity:1; transform:translate(-50%,0); pointer-events:auto}
@media (max-width:1020px){body:has(.barre-action) .annonce{bottom:calc(92px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.annonce{transition:none}}

/* Financements de la fiche */
.financements{list-style:none; padding:0; margin:14px 0 8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.financements li{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin:0;
  background:var(--papier); border:1px solid var(--filet); border-radius:var(--r-3);
}
.financements li::before{display:none}
.financements .i{flex:none; stroke:var(--foret); margin-top:2px}
.financements b{display:block; font-family:"Montserrat",sans-serif; font-weight:600; font-size:.95rem; line-height:1.35}
.financements span{display:block; margin-top:3px; font-size:.86rem; color:var(--encre-2); line-height:1.45}

/* Témoignages */
.temoignages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.temoignages-fiche{grid-template-columns:minmax(0,1fr); margin-top:14px}
@media (max-width:980px){.temoignages{grid-template-columns:minmax(0,1fr)}}
.temoignage{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; margin:0;
  padding:28px 26px 22px; background:#fff; border:1px solid var(--filet); border-radius:var(--r-3); box-shadow:var(--ombre-1);
}
.temoignage blockquote{margin:0; padding:0; border:0}
.temoignage blockquote p{margin:0; font-size:1.02rem; line-height:1.6; color:var(--encre)}
.temoignage blockquote p::before{
  content:"\201C"; display:block; height:.55em; margin-bottom:6px;
  font:700 3rem/1 "Montserrat",sans-serif; color:var(--vif);
}
.temoignage figcaption{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--filet-clair)}
.temoignage figcaption img,.temoignage-initiale{flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover}
.temoignage-initiale{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--vert-profond); color:#fff; font:700 1.1rem/1 "Montserrat",sans-serif;
}
.temoignage figcaption > span{display:grid; gap:2px; min-width:0}
.temoignage figcaption b{font-family:"Montserrat",sans-serif; font-weight:600}
.temoignage figcaption span span{font-size:.85rem; color:var(--encre-3); line-height:1.4}
.temoignage figcaption a{font-size:.85rem; font-weight:600; color:var(--vert-txt); text-decoration:underline; text-underline-offset:3px}
.temoignage-exemple{position:absolute; top:-11px; right:18px; font-size:.72rem}

/* Ma sélection : comparatif */
.selection-page{padding-bottom:clamp(48px,3rem + 3vw,96px)}
.selection-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:18px}
.selection-actions .resultats-compte{margin:0}
.selection-actions-boutons{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.comparatif-cadre{overflow-x:auto; border:1px solid var(--filet); border-radius:var(--r-3); background:#fff; -webkit-overflow-scrolling:touch}
.comparatif-cadre:focus-visible{outline:3px solid var(--foret); outline-offset:2px}
.comparatif{width:100%; border-collapse:separate; border-spacing:0; font-size:.93rem}
.comparatif th,.comparatif td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--filet-clair); min-width:210px}
.comparatif thead th{background:var(--papier); border-bottom:1px solid var(--filet)}
.comparatif tbody th{
  position:sticky; left:0; z-index:1; min-width:150px; width:170px; background:#fff;
  font:600 .76rem/1.35 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--encre-3);
  box-shadow:1px 0 0 var(--filet-clair);
}
.comparatif thead td{position:sticky; left:0; z-index:1; background:var(--papier); min-width:150px; border-bottom:1px solid var(--filet)}
.comparatif-titre{display:block; margin-bottom:12px; font:700 1.02rem/1.3 "Montserrat",sans-serif; color:var(--encre); text-decoration:none}
.comparatif-titre:hover{color:var(--vert-txt)}
.comparatif ul{margin:0; padding-left:18px}
.comparatif a:not(.btn):not(.comparatif-titre){color:var(--vert-txt)}
.comparatif-actions td,.comparatif-actions th{border-bottom:0}
.comparatif-actions .btn{margin-bottom:10px}
.comparatif-actions .lien-fleche{display:flex}
.selection-retirer{padding:6px 12px; background:#fff; border:1px solid var(--filet-fonce); border-radius:var(--r-pilule); font-size:.8rem; color:var(--encre-2)}
.selection-retirer:hover{border-color:var(--rouge); color:var(--rouge)}
.selection-retirer.est-selectionne .i{fill:none}
@media (max-width:620px){
  .comparatif th,.comparatif td{min-width:180px; padding:12px}
  .comparatif tbody th,.comparatif thead td{min-width:110px; width:110px; font-size:.68rem}
}

/* Impression du comparatif ou d'une fiche */
@media print{
  .bandeau-demo,.utilitaire,.entete,.tiroir,.voile,.ariane,.pied,.assistant,.barre-action,.annonce,
  .selection-actions-boutons,.selection-bouton,.fiche-outils,.formulaire,.comparatif-actions{display:none!important}
  .comparatif-cadre{overflow:visible; border:0}
  .comparatif th,.comparatif td{min-width:0}
  .comparatif tbody th{position:static}
}

/* Liens fléchés dans le texte : ils passent à la ligne sur téléphone au lieu de déborder. */
@media (max-width:600px){.fiche-corps .lien-fleche,.contenu-page .lien-fleche,.faq-r .lien-fleche{white-space:normal; display:inline}}
@media (max-width:600px){
  .financements{gap:8px}
  .financements li{padding:11px 13px; gap:10px}
  .financements b{font-size:.9rem}
  .financements span{font-size:.82rem}
}
/* Formulaire de rappel à l'écran sur téléphone : la bulle de l'assistant ne masque plus les champs. */
@media (max-width:1020px){body:has(.barre-action.est-masquee) .assistant:not(.est-ouvert){opacity:0; pointer-events:none; transition:opacity 200ms ease}}

/* De 1160 à 1365 px, le nom du réseau à côté du logo poussait « Trouver ma formation » hors de l'écran (1280 px : 21 px de trop). */
@media (min-width:1160px) and (max-width:1365px){.marque-texte{display:none!important}}

/* ---------------------------------------------------------------------------
   Une formation, plusieurs établissements : « Aussi à … », « Où suivre cette formation »
   --------------------------------------------------------------------------- */
.carte-f-lignes .carte-f-aussi{color:var(--vert-txt)}
.carte-f-lignes .carte-f-aussi .i{stroke:var(--foret)}
.fiche-aussi{display:flex; align-items:center; gap:10px; margin:14px 0 0; color:var(--sur-vert); font-size:.95rem}
.fiche-aussi .i{flex:none; stroke:var(--vif)}
.fiche-aussi a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--vif)}
.fiche-aussi a:hover{text-decoration-thickness:2px}
.lieux-formation{list-style:none; padding:0; margin:14px 0 12px; display:grid; gap:8px}
.lieux-formation li{
  display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin:0;
  padding:14px 16px; background:var(--papier); border:1px solid var(--filet); border-radius:var(--r-3);
}
.lieux-formation li::before{display:none}
.lieux-formation li.est-ici{border-color:var(--foret); box-shadow:inset 3px 0 0 var(--foret)}
.lieux-formation b{display:block; font-family:"Montserrat",sans-serif; font-weight:600; font-size:.95rem; line-height:1.35}
.lieux-formation span:not(.etiquette){display:block; margin-top:3px; font-size:.86rem; color:var(--encre-2); line-height:1.45}
.lieux-formation .lien-fleche{white-space:nowrap}