/* AidFacile - Professionnels : habillage des pages
   En-tête, pied de page, mise en page de la recherche et du formulaire.
   Va toujours avec aidfacile-pros.css, qui contient les composants. */

/* AidFacile - Professionnels référencés
   Toute la mise en forme des professionnels vit ici : page de recherche,
   cartes, fiche détaillée. Reprend la palette et le pied de page de l'accueil. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --accent:#457857;--accent-light:#A8CDB6;--accent-pale:#E8F3EC;
  --warm:#F1F5F1;--text:#252F28;--text-soft:#566060;
  --white:#F8FBF8;--border:rgba(100,140,110,0.14);
  --shadow-sm:0 2px 12px rgba(30,50,35,0.06);
  --shadow-md:0 6px 32px rgba(30,50,35,0.10);
}

/* overflow-x:clip et non hidden : hidden fabrique une zone de défilement
   invisible qui empêche tout élément collant de suivre la page. C'est ce qui
   bloquait l'aperçu du formulaire. clip coupe le débordement sans cet effet. */
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}

body{font-family:'DM Sans',sans-serif;background:var(--warm);color:var(--text);min-height:100vh;overflow-x:clip;-webkit-tap-highlight-color:transparent}

button,a{-webkit-tap-highlight-color:transparent}

body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(circle at 15% 15%,rgba(107,160,122,0.11) 0%,transparent 45%),radial-gradient(circle at 85% 85%,rgba(107,160,122,0.07) 0%,transparent 45%);pointer-events:none;z-index:0}

a{color:inherit}


/* En-tête, repris de la page d'accueil */
header{position:sticky;top:0;z-index:100;padding:12px 32px;padding-top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(248,251,248,0.95);backdrop-filter:blur(10px)}

.header-left{display:flex;align-items:center;gap:2px;cursor:pointer;min-width:0}

.logo-img{width:72px;height:72px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply;border-radius:4px}

.logo{font-family:'Fraunces',serif;font-size:1.38rem;font-weight:600;color:var(--text);letter-spacing:-0.03em;line-height:1;min-width:0}

.logo span{color:#6BA07A}

.logo-tagline{font-family:'DM Sans',sans-serif;font-size:0.875rem;font-weight:400;color:var(--text-soft);letter-spacing:0.07em;text-transform:uppercase;display:block;margin-top:2px;white-space:nowrap}

.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.btn-faq,.btn-apropos{font-size:0.875rem;font-weight:500;color:var(--accent);background:none;border:1.5px solid var(--accent-light);border-radius:100px;padding:5px 13px;cursor:pointer;transition:background 0.2s;font-family:'DM Sans',sans-serif}

.btn-faq:hover,.btn-apropos:hover{background:var(--accent-pale)}


.top-back-wrap{position:relative;z-index:5;max-width:1060px;margin:0 auto;padding:14px 22px 0}

.top-back-btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--accent-light);background:var(--white);color:var(--accent);border-radius:999px;padding:8px 14px;font:600 .8rem 'DM Sans',sans-serif;cursor:pointer;transition:.18s}

.top-back-btn:hover{background:var(--accent-pale);border-color:var(--accent)}


main{position:relative;z-index:5;max-width:1060px;margin:0 auto;padding:6px 22px 60px}

.hero{text-align:center;max-width:780px;margin:0 auto 18px}

.hero h1{font-family:'Fraunces',serif;font-size:clamp(1.8rem,4.6vw,2.6rem);font-weight:400;line-height:1.15;letter-spacing:-.035em;margin-bottom:10px}

.hero h1 em{font-style:italic;color:var(--accent)}

.hero p{max-width:680px;margin:0 auto 10px;color:var(--text-soft);font-size:.94rem;line-height:1.7}

.hero p:last-child{margin-bottom:0}


.location-card{position:relative;max-width:760px;margin:18px auto 24px;padding:22px;border:1px solid var(--border);border-radius:20px;background:var(--white);box-shadow:var(--shadow-md)}

.location-title{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;margin-bottom:5px}

.location-sub{color:var(--text-soft);font-size:.8rem;line-height:1.5;margin-bottom:10px}

.af-location-widget,.ville-simple{position:relative}

.af-location-help{display:none}

.af-location-form input,.ville-simple input{width:100%;border:1.5px solid var(--border);background:#fff;border-radius:12px;padding:12px 13px;font:500 .9rem 'DM Sans',sans-serif;color:var(--text);outline:0;transition:.18s}

.af-location-form input:focus,.ville-simple input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(69,120,87,.12)}

.af-location-form input.af-location-selected{border-color:var(--accent-light);background:var(--accent-pale)}

.af-location-status,.ville-status{font-size:.73rem;color:var(--text-soft);margin-top:6px;line-height:1.35}

.af-location-results,.ville-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 7px);display:flex;flex-direction:column;gap:5px;padding:6px;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(30,50,35,.14)}

.af-location-results:empty,.ville-results:empty{display:none}

.af-location-result,.ville-result{width:100%;text-align:left;border:1px solid transparent;background:var(--white);border-radius:9px;padding:9px 10px;color:var(--text);font:500 .78rem 'DM Sans',sans-serif;cursor:pointer;line-height:1.35}

.af-location-result:hover,.ville-result:hover{border-color:var(--accent-light);background:var(--accent-pale)}


.directory-head{margin:24px 0 14px}

.dh-ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.dh-gauche{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}

.top-back-wrap--deux{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.report-error-link{border:1.5px solid var(--border);background:var(--white);color:var(--text-soft);border-radius:999px;padding:8px 14px;font:600 .75rem 'DM Sans',sans-serif;cursor:pointer;transition:.16s}

.report-error-link:hover{border-color:var(--accent-light);color:var(--accent);background:var(--accent-pale)}

.directory-head h2{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600}

.directory-head p{font-size:.78rem;color:var(--text-soft);margin-top:5px}

.count-pill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:var(--accent-pale);border:1px solid var(--accent-light);color:var(--accent);font:700 .75rem 'DM Sans',sans-serif;white-space:nowrap}

.count-pill:empty{display:none}

.info-btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--accent-light);background:var(--white);color:var(--accent);border-radius:999px;padding:5px 13px 5px 7px;font:600 .75rem 'DM Sans',sans-serif;cursor:pointer;transition:.16s}

.info-btn span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font:700 .72rem 'Fraunces',serif}

.info-btn:hover{background:var(--accent-pale);border-color:var(--accent)}

.pro-search{display:block;flex:0 1 340px;min-width:220px}

.pro-search input{width:100%;height:42px;border:1.5px solid var(--accent-light);background:var(--white);border-radius:999px;padding:9px 16px;color:var(--text);font:500 .82rem 'DM Sans',sans-serif;outline:0;transition:.16s}

.pro-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(69,120,87,.12)}

.pro-search input::placeholder{color:#8a938c}


/* Bouton Aide : le style vient normalement de aidfacile-aide.css,
   celui-ci sert de secours si cette feuille n'est pas chargée. */
.btn-aide{font-size:0.875rem;font-weight:500;color:var(--accent);background:none;border:1.5px solid var(--accent-light);border-radius:100px;padding:5px 13px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .2s}

.btn-aide:hover{background:var(--accent-pale)}


/* Filtres : boutons quand il y a peu de services, liste déroulante au-delà */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;align-items:center}

.filter-btn{border:1px solid var(--border);background:var(--white);color:var(--text-soft);border-radius:999px;padding:8px 12px;font:600 .75rem 'DM Sans',sans-serif;cursor:pointer;transition:.16s}

.filter-btn:hover{border-color:var(--accent-light);background:var(--accent-pale);color:var(--accent)}

.filter-btn.active{border-color:var(--accent);background:var(--accent-pale);color:var(--accent)}

.filtre-liste{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}

.filtre-liste span{font:600 .75rem 'DM Sans',sans-serif;color:var(--text-soft)}

.filtre-liste select{min-width:250px;max-width:100%;border:1.5px solid var(--border);background:var(--white);border-radius:999px;padding:9px 14px;font:600 .75rem 'DM Sans',sans-serif;color:var(--text);cursor:pointer;outline:0}

.filtre-liste select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(69,120,87,.10)}

/* Les deux intitulés du menu doivent sauter aux yeux : c'est eux qui disent
   au visiteur ce qui existe près de chez lui et ce qui manque encore. */
.filtre-liste optgroup{font:700 .8rem 'DM Sans',sans-serif;color:var(--accent);background:var(--accent-pale);text-transform:uppercase;letter-spacing:.05em;padding:6px 0}

.filtre-liste optgroup:nth-of-type(2){color:#8a6a2f;background:#FBF3E4}

.filtre-liste option{font:500 .8rem 'DM Sans',sans-serif;color:var(--text);background:var(--white);text-transform:none;letter-spacing:0;padding:5px 0}


.source-note{margin-top:18px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.65);font-size:.71rem;line-height:1.55;color:var(--text-soft)}

.source-note strong{color:var(--text)}

.pro-debug{margin-top:14px;padding:12px 14px;border:1px dashed var(--accent-light);border-radius:12px;background:#fff;font:400 .7rem/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--text-soft);white-space:pre-wrap;overflow-x:auto}

.pro-debug[hidden]{display:none}


.bloc-pro{max-width:780px;margin:34px auto 0;padding:22px;border:1px solid var(--border);border-radius:20px;background:var(--white);box-shadow:var(--shadow-sm)}

.bloc-pro h2{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;margin-bottom:9px}

.bloc-pro p{font-size:.82rem;line-height:1.7;color:var(--text-soft);margin-bottom:9px}

.bloc-pro p:last-child{margin-bottom:0}
.bloc-pro-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:14px;padding:11px 20px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font:700 .84rem 'DM Sans',sans-serif;transition:.16s}
.bloc-pro-btn:hover{opacity:.9}
.bloc-pro-note{font-size:.74rem;color:var(--text-soft);margin-top:9px!important}


.page-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}

.page-action{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--accent-light);background:var(--white);color:var(--accent);font:600 .8rem 'DM Sans',sans-serif;text-decoration:none;cursor:pointer}

.page-action.primary{background:var(--accent);color:#fff;border-color:var(--accent)}


/* Pied de page, repris de la page d'accueil */
footer{position:relative;z-index:5;text-align:center;background:#F1F5F1;border-top:1px solid #DCE5DE;padding:25px 46px 30px;font-size:0.875rem;color:var(--text-soft);font-weight:300}

.footer-top{margin-bottom:10px}

.footer-disclaimer{font-size:12px;line-height:1.6;color:#566060}

.social-links{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}

.social-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--white);color:var(--text-soft);transition:.18s}

.social-link:hover{color:var(--accent);border-color:var(--accent-light);background:var(--accent-pale)}

.social-link svg{width:16px;height:16px;fill:currentColor}

.footer-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}

.footer-link{background:none;border:none;color:var(--accent);font-family:'DM Sans',sans-serif;font-size:0.78rem;cursor:pointer;text-decoration:underline;padding:2px 4px}

.footer-link:hover{color:#1a4f30}

.footer-sep{color:var(--border);font-size:0.78rem}

.footer-bottom{font-size:0.71rem;color:#566060;opacity:.85;margin-top:6px}


:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:760px){
  
  header{padding:15px 18px}
  
  .logo-img{width:42px;height:42px}
  
  .logo{font-size:1.12rem}
  
  .logo-tagline{display:none}
  
  main{padding:6px 16px 50px}
  
  footer{padding:20px 16px 23px}
  
  .filtre-liste select{min-width:0;width:100%}
  
  .info-btn-txt{display:none}
  
  .pro-search{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}


/* ===== Formulaire d'inscription des professionnels ===== */
/* Avis de phase pilote : volontairement à part du reste de la page.
   C'est une note temporaire, pas un élément du site : cadre net, étiquette,
   aucune ombre ni dégradé, pour qu'on voie tout de suite qu'elle est provisoire. */
.encart-ordre{padding:20px 22px;border-radius:18px;margin-bottom:16px;border:1px solid var(--border);background:var(--white);box-shadow:var(--shadow-sm)}

.encart-ordre h2{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;margin-bottom:11px}

.encart-ordre strong{color:var(--text)}


.avis-pilote{position:relative;margin:26px 0 20px;padding:24px 20px 18px;border:2px solid #C0574A;border-radius:6px;background:#fff}

.avis-etiquette{position:absolute;top:-11px;left:16px;display:inline-block;padding:3px 10px;background:#C0574A;color:#fff;font:700 .7rem 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.08em}

.avis-pilote h2{font-family:'DM Sans',sans-serif;font-size:1.05rem;font-weight:700;color:#C0574A;margin-bottom:12px;text-transform:none}

.avis-pilote p{font-size:.85rem;line-height:1.7;color:var(--text);margin-bottom:11px}

.avis-pilote p:last-child{margin-bottom:0}

.avis-pilote strong{font-weight:700;color:#252F28}
@media (max-width:640px){
  
  .avis-pilote{padding:22px 15px 16px}
  
  .avis-etiquette{left:12px;font-size:.66rem}
}

.encart-ordre p{font-size:.82rem;line-height:1.7;color:var(--text-soft);margin-bottom:9px}

.encart-ordre p:last-child{margin-bottom:0}

#proForm{margin-top:22px}

#proForm fieldset{border:1px solid var(--border);border-radius:18px;background:var(--white);padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}

#proForm legend{display:flex;align-items:center;gap:9px;font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;color:var(--text);padding:0 8px}

.etape-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font:700 .8rem 'DM Sans',sans-serif}

#proForm .form-field{margin-bottom:16px}

#proForm .form-field:last-child{margin-bottom:0}

#proForm label,#proForm .label-groupe{display:block;font:600 .82rem 'DM Sans',sans-serif;color:var(--text);margin-bottom:6px}

#proForm .sous-label{font-weight:500;font-size:.78rem;color:var(--text-soft);margin-top:10px}

#proForm input[type=text],#proForm input[type=email],#proForm input[type=tel],#proForm input[type=url],#proForm select,#proForm textarea{width:100%;border:1.5px solid var(--border);background:#fff;border-radius:12px;padding:11px 13px;font:500 .85rem 'DM Sans',sans-serif;color:var(--text);outline:0;transition:.16s}

#proForm input:focus,#proForm select:focus,#proForm textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(69,120,87,.12)}

#proForm textarea{resize:vertical;min-height:96px;line-height:1.6}

.obl{color:#B0453A}

.aide-champ{font-size:.75rem;line-height:1.5;color:var(--text-soft);margin-top:6px}
.encadre-rayon{margin-top:11px;padding:12px 14px;border-radius:12px;background:var(--accent-pale);border:1px solid var(--accent-light);font-size:.78rem;line-height:1.6;color:var(--text-soft)}
.encadre-rayon strong{display:block;color:var(--text);margin-bottom:4px}
.encadre-rayon em{font-style:normal;font-weight:700;color:var(--text)}

.cases{display:flex;flex-direction:column;gap:8px}

.case{display:flex!important;align-items:flex-start;gap:10px;padding:11px 13px;border:1.5px solid var(--border);border-radius:12px;background:var(--white);cursor:pointer;font-weight:500!important;transition:.16s}

.case:hover{border-color:var(--accent-light);background:var(--accent-pale)}

.case input{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--accent)}

.case span{font-size:.82rem;line-height:1.55;color:var(--text)}

.case--accord{margin-bottom:9px}

.case--accord span{font-size:.8rem;color:var(--text-soft)}

.ville-status.ok{color:var(--accent);font-weight:600}

.form-erreur{padding:12px 14px;border-radius:12px;background:#FBEDEB;border:1px solid #E4BDB6;color:#8C3227;font-size:.82rem;line-height:1.55;margin-bottom:14px}

.form-erreur[hidden]{display:none}

#proForm .btn-submit{width:100%;min-height:48px;border:none;border-radius:999px;background:var(--accent);color:#fff;font:700 .9rem 'DM Sans',sans-serif;cursor:pointer;transition:.16s}

#proForm .btn-submit:hover{opacity:.9}

#proForm .btn-submit:disabled{opacity:.6;cursor:default}

.apres-envoi{font-size:.75rem;line-height:1.6;color:var(--text-soft);text-align:center;margin-top:12px}

.form-success[hidden]{display:none}
@media (max-width:760px){
  #proForm fieldset{padding:17px 15px}
  .encart-pilote,.encart-ordre{padding:17px 16px}
}


/* Aperçu en direct, palette et panneau de détails du formulaire */
.ligne-details{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}

.btn-details{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--accent);background:var(--white);color:var(--accent);border-radius:999px;padding:9px 16px 9px 9px;font:700 .82rem 'DM Sans',sans-serif;cursor:pointer;transition:.16s}

.btn-details span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font:700 .78rem 'Fraunces',serif}

.btn-details:hover{background:var(--accent-pale)}

.details-sous{font-size:.75rem;color:var(--text-soft)}

.pd-titre2{font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;color:var(--text);margin:18px 0 8px}

.pd-texte{font-size:.82rem;line-height:1.7;color:var(--text-soft);margin-bottom:9px}

.pd-texte strong{color:var(--text)}

/* Une seule ligne, quitte à défiler sur les petits écrans. */
.palette{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:3px 2px 6px;-webkit-overflow-scrolling:touch}

.pastille{margin:0!important;cursor:pointer;flex:0 0 auto;position:relative}

.pastille input{position:absolute;opacity:0;width:0;height:0}

.pastille>span:first-of-type{display:block;width:30px;height:30px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px rgba(80,100,85,.35);transition:.16s}

.pastille input:checked+span{border-color:#fff;box-shadow:0 0 0 2px var(--text)}

.pastille input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

.sr-seulement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Deux colonnes : le formulaire à gauche, l'aperçu à droite qui suit le défilement */
.inscription{max-width:1060px}

.inscription-grille{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}

.inscription-grille #proForm{grid-column:1;grid-row:1;margin-top:0}

.apercu-zone{grid-column:2;grid-row:1;position:sticky;top:92px;padding:18px 16px;text-align:center;border:1.5px dashed var(--accent-light);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm)}

.apercu-bascule{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:0 0 10px;cursor:default;text-align:left}

.apercu-titre{font:700 .78rem 'DM Sans',sans-serif;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}

.apercu-note{font-size:.72rem;color:var(--text-soft);margin-top:9px;line-height:1.5}

#apercuCorps[hidden]{display:none}

/* Deux colonnes dès que la fenêtre le permet. En dessous, l'aperçu repasse
   au-dessus du formulaire : une colonne de 300 pixels prise sur 700 rendrait
   le formulaire illisible. */
@media (max-width:800px){
  .inscription-grille{grid-template-columns:1fr}
  /* Sur téléphone, l'aperçu reste à sa place en haut du formulaire : une carte
     qui suivrait le défilement mangerait la moitié de l'écran. */
  .apercu-zone{grid-column:1;grid-row:1;position:static;margin-bottom:16px}
  .inscription-grille #proForm{grid-row:2}
}


/* Choix du logo */
.logo-zone{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.logo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

.logo-bouton{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--accent-light);background:var(--white);color:var(--accent);border-radius:999px;padding:10px 16px;font:700 .8rem 'DM Sans',sans-serif;cursor:pointer;margin-bottom:0!important;transition:.16s}

.logo-bouton:hover{background:var(--accent-pale);border-color:var(--accent)}

.logo-input:focus-visible+.logo-bouton{outline:3px solid var(--accent);outline-offset:2px}

.logo-retirer{display:inline-flex;align-items:center;text-decoration:none;border:1px solid var(--border);background:var(--warm);color:var(--text-soft);border-radius:999px;padding:9px 14px;font:600 .78rem 'DM Sans',sans-serif;cursor:pointer}

.logo-retirer:hover{color:var(--accent);border-color:var(--accent-light)}

.logo-retirer[hidden]{display:none}


#proFormSuccess p[hidden]{display:none}

#successLogo{margin-top:10px;padding:11px 13px;border-radius:12px;background:#FBF3E4;border:1px solid #E4D3B0;color:#7A5E23;font-size:.8rem;line-height:1.6}

/* Bandeau d'arrivée depuis une fiche pratique : on annonce le filtre appliqué
   et on laisse une sortie visible vers tous les métiers. */
.pro-bandeau-parcours{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--accent-light,#9BC3A8);border-radius:12px;background:var(--accent-pale,#EDF5EF)}
.pro-bandeau-parcours p{margin:0;flex:1 1 240px;font-size:.86rem;line-height:1.5;color:var(--text,#25302B)}
.pro-bandeau-sortie{flex:0 0 auto;border:1.5px solid var(--accent,#6BA07A);background:#fff;color:var(--accent,#6BA07A);border-radius:9px;padding:8px 13px;font:700 .8rem 'DM Sans',sans-serif;cursor:pointer;transition:background .15s,color .15s}
.pro-bandeau-sortie:hover,.pro-bandeau-sortie:focus-visible{background:var(--accent,#6BA07A);color:#fff}
@media(max-width:600px){.pro-bandeau-parcours{padding:11px 12px}.pro-bandeau-sortie{width:100%}}


/* ===== Téléphone : que rien ne dépasse ni ne soit coupé =====
   Ces trois pages n'avaient presque aucune règle pour les petits écrans.
   Sur 375 px, l'en-tête, les cadres du formulaire et l'aperçu débordaient. */
@media (max-width:600px){

  main,.inscription{max-width:100%}

  /* En-tête : une seule ligne, comme sur l'accueil.
     Cette règle faisait passer le logo sur une ligne et les boutons sur la
     suivante. Elle datait de l'époque où l'en-tête portait trois boutons en
     toutes lettres ; depuis, il n'y a plus qu'une loupe et un menu, qui
     tiennent largement à côté du logo. Sur ordinateur, où les libellés
     reviennent, le retour à la ligne reste autorisé. */
  header{flex-wrap:nowrap;gap:8px;padding:12px 14px}
  .header-left{flex:1 1 auto;min-width:0}
  .header-right{flex:0 0 auto;justify-content:flex-end;flex-wrap:nowrap;gap:6px}
  .logo{font-size:1.05rem}
  .logo-img{width:38px;height:38px}

  /* Marges de page : 14 px au lieu de 22, c'est autant de gagné
     pour le contenu sans que ça paraisse serré. */
  main{padding:6px 14px 46px}
  .top-back-wrap{padding:12px 14px 0}
  footer{padding:20px 14px 22px}

  /* Formulaire : cadres, champs et boutons à la largeur de l'écran. */
  #proForm fieldset{padding:16px 13px;border-radius:14px}
  #proForm input,#proForm select,#proForm textarea{font-size:16px}
  .encart-pilote,.encart-ordre,.bloc-pro,.location-card{padding:16px 13px;border-radius:14px}

  /* Douze pastilles sur une seule ligne font 460 px de large : sur un
     téléphone, ça déborde et le défilement de côté se manie mal au doigt.
     On les fait passer à la ligne : tout est visible d'un coup. */
  .palette{flex-wrap:wrap;overflow-x:visible;max-width:100%;gap:10px}
  .pastille>span:first-of-type{width:34px;height:34px}

  /* Choix du logo : le bouton et le nom du fichier l'un sous l'autre. */
  .logo-zone{gap:8px}
  .logo-zone>*{max-width:100%}

  /* Aperçu de la fiche : sur téléphone il occupe toute la largeur. */
  .apercu-zone{padding:13px;border-radius:14px}
  .inscription-grille{gap:14px}

  /* Titres : évite qu'un mot long comme « Professionnels » déborde. */
  .hero h1,.hero h2{overflow-wrap:break-word;hyphens:auto}
}

/* La feuille tactile du site agrandit toutes les cases à cocher et met leurs
   étiquettes en ligne. Deux endroits de ce formulaire ne le supportent pas :
   les pastilles de couleur, dont la case est volontairement invisible, et les
   engagements, dont le texte tient sur plusieurs lignes. */
@media (max-width:760px){
  .pastille{display:block!important;min-height:0!important}
  .pastille input{min-width:0!important;min-height:0!important;transform:none!important}
  #proForm .accords label,#proForm label:has(input[type="checkbox"]){
    display:flex!important;align-items:flex-start!important;min-height:0!important
  }
  #proForm label:has(input[type="checkbox"]) input{margin-top:2px}
}

/* Un champ sous 16 px fait zoomer l'écran tout seul sur iPhone, et le
   formulaire se retrouve alors coupé sur les côtés. Vaut à toute taille. */
@media (max-width:900px){
  #proForm input,#proForm select,#proForm textarea,
  .af-location-form input,.ville-simple input,.pro-search input{font-size:16px}
}


/* ===== Rien ne doit sortir de l'écran =====
   La cause d'un texte qui déborde à droite est presque toujours un mot que
   le navigateur refuse de couper : une adresse de site, un email, un numéro,
   un nom composé. Par défaut il préfère dépasser plutôt que couper un mot.
   On l'autorise à couper, partout sur ces pages. */
.hero p,.hero h1,.hero h2,
#proForm,#proForm label,#proForm p,#proForm li,#proForm .aide-champ,
.encart-pilote,.encart-ordre,.bloc-pro,.location-card,
.apercu-zone,.pro-card,.fiche-boite,.form-success,.form-erreur,
.source-note,.empty-state,.pro-bandeau-parcours,
footer,.footer-links{
  overflow-wrap:break-word;
  word-break:break-word;
  min-width:0;
}

/* Une adresse de site ou un email peut faire cinquante caractères d'un bloc :
   là, on autorise la coupure n'importe où plutôt que de laisser dépasser. */
.pro-action,.pro-lien,.apercu-zone a,.pro-card a,
#proForm input,#proForm textarea,
.fiche-rang dd,.fiche-contacts a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Rien de plus large que son contenant, jamais. */
img,svg,video,iframe,table{max-width:100%}
.pro-card,.apercu-zone,.fiche-boite,#proForm fieldset{max-width:100%}


/* ===== Bouton « Voir ma fiche » du formulaire, sur téléphone =====
   L'aperçu est en haut de la page et disparaît dès qu'on descend. Ce bouton
   le rappelle à l'écran quand on veut, sans occuper la place en permanence.
   Posé par aidfacile-pros-mobile.js. */
@media (max-width:760px){
  .af-voir-fiche{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:70;
    display:inline-flex;align-items:center;gap:8px;
    min-height:46px;padding:11px 20px;
    border:none;border-radius:999px;
    background:var(--accent);color:#fff;
    font:700 .86rem 'DM Sans',sans-serif;cursor:pointer;
    box-shadow:0 6px 20px rgba(30,50,35,.24)
  }
  .af-voir-fiche[hidden]{display:none!important}
  .af-voir-fiche.actif{background:var(--text)}

  /* Sur téléphone, l'aperçu quitte le fil du formulaire. Il s'affichait tout
     en haut, titre compris, à un moment où la fiche est encore vide : on
     annonçait « votre fiche telle qu'elle apparaîtra » devant un cadre sans
     rien dedans. Il ne vit plus que dans le panneau, où le titre est enfin
     à sa place. */
  .apercu-zone{display:none}
  .apercu-zone.af-apercu-flottant{
    display:block;
    position:fixed;inset:auto 12px calc(70px + env(safe-area-inset-bottom,0px)) 12px;
    z-index:65;max-height:66vh;max-height:66dvh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--white);border-style:solid;
    box-shadow:0 14px 40px rgba(30,50,35,.22)
  }

  /* La grille du formulaire n'a plus qu'une colonne utile. */
  .inscription-grille{grid-template-columns:minmax(0,1fr);gap:0}
  .apercu-zone.af-apercu-flottant{grid-column:auto}
}

/* ===========================================================================
   ÉCRAN 2 DU PARCOURS PROFESSIONNEL

   La présentation, avant le formulaire. Elle doit tenir sur un seul écran,
   sans avoir à descendre : à gauche ce qu'il faut comprendre, à droite la
   décision à prendre.

   Le bleu #4A86B8 est celui du profil aidant, déjà présent sur le site. Il
   accompagne le professionnel de la carte d'accueil jusqu'à la confirmation,
   pour qu'il sache à chaque écran qu'il est chez lui.

   L'ancienne présentation était un encadré rouge de quatre paragraphes suivi
   du formulaire complet. Elle disait des choses justes, mais elle les disait
   toutes en même temps, et le formulaire arrivait sans prévenir.
   =========================================================================== */

.pro-ecran2{display:grid;grid-template-columns:1fr 340px;gap:40px;
  align-items:start;margin:8px 0 0;}

.pro-ecran2-gauche h1{font-family:'Fraunces',Georgia,serif;font-size:2.1rem;
  line-height:1.15;font-weight:600;color:#252F28;margin:0 0 14px;}
.pro-ecran2-gauche h1 em{font-style:italic;color:#4A86B8;}
.pro-ecran2-chapo{font-size:1rem;line-height:1.65;color:var(--text-soft,#566060);
  margin:0 0 24px;}

.pro-ecran2-points{display:flex;flex-direction:column;gap:14px;
  border-top:1px solid #DCE5DE;padding-top:20px;}
.pro-point{display:flex;flex-direction:column;gap:3px;}
.pro-point-cle{font-size:.95rem;font-weight:600;color:#1F4A6B;}
.pro-point-txt{font-size:.875rem;line-height:1.6;color:var(--text-soft,#566060);}

.pro-ecran2-honnete{margin:22px 0 0;font-size:.8rem;line-height:1.6;
  color:#7A827C;font-style:italic;}

/* L'encadré suit le défilement, mais il ne doit jamais dépasser la fenêtre :
   au-delà, son bas devenait inatteignable, on ne voyait plus que le haut du
   bouton. Il se limite donc à la hauteur visible et défile à l'intérieur si
   besoin. align-self évite qu'il s'étire sur toute la colonne. */
.pro-ecran2-droite{position:sticky;top:24px;align-self:start;
  max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;
  background:#F3F9FD;border:1.5px solid #C3DCEC;border-radius:18px;
  padding:24px 22px;}
.pro-ecran2-duree{margin:0 0 12px;font-size:.78rem;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:#4A86B8;}
.pro-ecran2-cta{display:block;width:100%;padding:15px 18px;border:0;
  border-radius:12px;background:#4A86B8;color:#fff;font-family:'DM Sans',sans-serif;
  font-size:1rem;font-weight:600;cursor:pointer;
  transition:background .15s,transform .15s,box-shadow .15s;}
.pro-ecran2-cta:hover,.pro-ecran2-cta:focus-visible{background:#3B6F9B;
  transform:translateY(-1px);box-shadow:0 6px 20px rgba(74,134,184,.26);}
.pro-ecran2-etapes{margin:12px 0 0;font-size:.8rem;line-height:1.55;
  color:var(--text-soft,#566060);}

.pro-ecran2-reperes{margin-top:20px;border-top:1px solid #C3DCEC;padding-top:16px;
  display:flex;flex-direction:column;gap:8px;}
.pro-reperes-titre{margin:0 0 2px;font-size:.8rem;font-weight:600;color:#1F4A6B;}
.pro-repere{display:block;width:100%;text-align:left;padding:10px 12px;
  border:1px solid #C3DCEC;border-radius:10px;background:#fff;
  font-family:'DM Sans',sans-serif;font-size:.85rem;color:#1F4A6B;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s;}
.pro-repere:hover,.pro-repere:focus-visible{background:#E9F3FA;border-color:#4A86B8;}

/* Sur téléphone, la décision passe sous l'explication et le bloc cesse de
   coller en haut : sur un petit écran, un encadré qui suit le défilement
   mange la moitié de la place utile. */
@media (max-width:900px){
  .pro-ecran2{grid-template-columns:1fr;gap:24px;}
  .pro-ecran2-droite{position:static;max-height:none;overflow:visible;}
}
@media (max-width:600px){
  .pro-ecran2-gauche h1{font-size:1.66rem;}
  .pro-ecran2-chapo{font-size:.95rem;margin-bottom:20px;}
  .pro-ecran2-droite{padding:20px 17px;border-radius:16px;}
  .pro-ecran2-cta{padding:14px 16px;font-size:.95rem;}
}


/* ===========================================================================
   ÉCRANS 3 À 7 : le formulaire, une partie par écran

   Le bleu #4A86B8 est celui du parcours professionnel, depuis la carte de
   l'accueil. Il continue ici : le professionnel doit savoir à chaque écran
   qu'il est toujours au même endroit.
   =========================================================================== */

.pro-etape[hidden]{display:none}

/* Le fil des cinq étapes. Il tient sur une ligne et dit trois choses à la
   fois : où l'on est, ce qui est fait, ce qui reste. */
.pro-fil{display:flex;gap:6px;margin:0 0 6px;flex-wrap:nowrap}

.pro-fil-etape{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:7px;
  padding:9px 10px;border:1px solid #DCE5DE;border-radius:11px;
  background:var(--white,#F8FBF8);cursor:pointer;text-align:left;
  font:600 .76rem 'DM Sans',sans-serif;color:var(--text-soft,#566060);
  transition:.16s}

.pro-fil-num{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:22px;height:22px;border-radius:50%;
  background:#DCE5DE;color:#566060;font:700 .72rem 'DM Sans',sans-serif}

.pro-fil-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pro-fil-etape:hover:not(:disabled),
.pro-fil-etape:focus-visible:not(:disabled){border-color:#4A86B8;background:#E9F3FA}

/* L'étape en cours : pleine, lisible du premier coup d'œil. */
.pro-fil-etape.est-courante{border-color:#4A86B8;background:#E9F3FA;color:#252F28}
.pro-fil-etape.est-courante .pro-fil-num{background:#4A86B8;color:#fff}

/* Une étape déjà remplie reste cliquable : on doit toujours pouvoir revenir. */
.pro-fil-etape.est-faite{color:#3B6F9B}
.pro-fil-etape.est-faite .pro-fil-num{background:#A9C9E1;color:#1F3B52}

/* Une étape pas encore atteinte est verrouillée, pas seulement grisée : sans
   ça on saute aux cases d'accord et on envoie un dossier à moitié vide. */
.pro-fil-etape:disabled{cursor:default;opacity:.55}

.pro-fil-compteur{margin:0 0 14px;font:600 .78rem 'DM Sans',sans-serif;
  color:#4A86B8}

/* Le bas de chaque écran : le message d'erreur s'il y en a un, puis les
   boutons. Ils sont toujours au même endroit, d'un écran à l'autre. */
.pro-etape-pied{margin-top:4px}

.pro-etape-boutons{display:flex;gap:10px;align-items:center}

.pro-btn-continuer{flex:1 1 auto;min-height:48px;padding:13px 20px;border:0;
  border-radius:999px;background:#4A86B8;color:#fff;
  font:700 .9rem 'DM Sans',sans-serif;cursor:pointer;transition:.16s}
.pro-btn-continuer:hover,.pro-btn-continuer:focus-visible{background:#3B6F9B}

.pro-btn-revenir{flex:0 0 auto;min-height:48px;padding:13px 18px;
  border:1px solid #DCE5DE;border-radius:999px;background:transparent;
  color:var(--text-soft,#566060);font:600 .86rem 'DM Sans',sans-serif;
  cursor:pointer;transition:.16s}
.pro-btn-revenir:hover,.pro-btn-revenir:focus-visible{border-color:#4A86B8;
  color:#3B6F9B;background:#E9F3FA}

/* Le bouton d'envoi vient prendre la place de « Continuer » sur le dernier
   écran : même rangée, même hauteur, il ne doit pas s'étirer tout seul. */
.pro-etape-boutons .btn-submit{flex:1 1 auto;width:auto;margin:0}

.pro-etape-pied .form-erreur{margin:0 0 12px}
.pro-etape-pied .apres-envoi{margin-top:12px}

/* ===========================================================================
   ÉCRAN 8 : la confirmation
   =========================================================================== */

.pro-ecran8{display:flex;justify-content:center;margin:8px 0 0}
.pro-ecran8[hidden]{display:none}

.pro-ecran8-carte{max-width:620px;width:100%;padding:34px 32px;
  border:1px solid #C9DEEE;border-radius:20px;background:var(--white,#F8FBF8);
  box-shadow:0 6px 22px rgba(30,50,35,.07);text-align:center}

.pro-ecran8-carte .success-icon{font-size:2.1rem;line-height:1;margin-bottom:12px}

.pro-ecran8-carte h2{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;
  line-height:1.2;font-weight:600;color:#252F28;margin:0 0 16px}

.pro-ecran8-carte p{font-size:.94rem;line-height:1.7;
  color:var(--text-soft,#566060);margin:0 0 13px;text-align:left}

.pro-ecran8-contact{text-align:center!important;font-size:.86rem!important;
  margin-top:18px!important}

.pro-ecran8-actions{display:flex;flex-direction:column;align-items:center;
  gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid #DCE5DE}

.pro-ecran8-cta{display:inline-block;padding:14px 26px;border-radius:999px;
  background:#4A86B8;color:#fff!important;text-decoration:none;
  font:700 .9rem 'DM Sans',sans-serif;transition:.16s}
.pro-ecran8-cta:hover,.pro-ecran8-cta:focus-visible{background:#3B6F9B}

.pro-ecran8-lien{font:600 .84rem 'DM Sans',sans-serif;color:#3B6F9B}

/* Sur téléphone, le fil garde les numéros et perd les libellés : cinq titres
   côte à côte sur 360 pixels ne se lisent pas. Le compteur juste en dessous
   dit en toutes lettres où l'on en est. */
@media (max-width:640px){
  .pro-fil{gap:5px}
  .pro-fil-etape{flex:1 1 0;justify-content:center;padding:9px 4px}
  .pro-fil-txt{display:none}
  .pro-etape-boutons{flex-wrap:wrap}
  .pro-btn-revenir,.pro-btn-continuer{flex:1 1 100%}
  .pro-etape-boutons .btn-submit{flex:1 1 100%}
  .pro-btn-revenir{order:2}
  .pro-btn-continuer,.pro-etape-boutons .btn-submit{order:1}
  .pro-ecran8-carte{padding:26px 18px;border-radius:16px}
  .pro-ecran8-carte h2{font-size:1.4rem}
}


/* ===========================================================================
   ÉCRAN 2, VERSION COURTE

   L'écran disait tout : un chapô de trois lignes, trois blocs de deux phrases,
   une durée, une liste des cinq étapes. Le professionnel avait neuf blocs de
   texte à lire avant de savoir s'il voulait commencer. Il en reste trois, et
   le bouton n'a plus rien autour de lui.
   =========================================================================== */

/* La phase pilote est ce qu'il faut comprendre en premier : elle est annoncée
   avant le titre, pas cachée dans un paragraphe. */
.pro-pilote{display:inline-flex;align-items:center;margin:0 0 14px;
  padding:6px 13px;border-radius:999px;background:#E9F3FA;
  border:1px solid #C3DCEC;color:#3B6F9B;
  font:700 .74rem 'DM Sans',sans-serif;letter-spacing:.02em}

.pro-ecran2-cases{list-style:none;margin:0 0 22px;padding:20px 0 0;
  border-top:1px solid #DCE5DE;display:flex;flex-direction:column;gap:13px}

.pro-ecran2-cases li{position:relative;padding-left:28px;font-size:.94rem;
  line-height:1.6;color:var(--text,#252F28)}

.pro-ecran2-cases li::before{content:'\2713';position:absolute;left:0;top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:#E9F3FA;color:#4A86B8;
  font-size:.7rem;font-weight:700}

/* Le bouton est la seule action de l'écran : il doit se voir comme tel. */
.pro-ecran2-droite .pro-ecran2-cta{padding:20px 22px;font-size:1.08rem;
  border-radius:14px;margin-bottom:26px}

@media (max-width:760px){
  .pro-ecran2-cases{padding-top:16px;gap:11px}
  .pro-ecran2-cases li{font-size:.9rem}
  .pro-ecran2-droite .pro-ecran2-cta{padding:18px 18px;font-size:1.02rem;
    margin-bottom:20px}
}


/* ===========================================================================
   LE BLEU DU PARCOURS PROFESSIONNEL

   Le professionnel entre par une carte bleue sur l'accueil, et se retrouvait
   ensuite dans le vert du site : la couleur changeait sans raison au milieu
   du chemin. Les pages du parcours portent donc la classe pro-parcours, qui
   remplace le vert par le bleu du profil aidant, déjà présent sur le site.

   Rien n'est réécrit règle par règle : les trois variables suffisent, tout ce
   qui s'appuie dessus suit. Les couleurs de priorité (rouge, ambre, vert des
   démarches) ne sont pas concernées, elles ont leurs propres variables.
   =========================================================================== */

body.pro-parcours{
  --accent:#4A86B8;
  --accent-light:#96BDD8;
  --accent-pale:#E4EFF7;
}


/* ===========================================================================
   LE PARCOURS PROFESSIONNEL SUR TÉLÉPHONE

   Écrit après avoir cherché ce qui casse réellement d'un modèle à l'autre.
   Trois pièges, tous vérifiables :

   1. vh sur iPhone compte la barre d'adresse comme si elle n'existait pas.
      Un bloc en 100vh dépasse donc l'écran, et son bas devient inatteignable.
      dvh mesure la hauteur réellement visible. On écrit les deux à la suite :
      les navigateurs anciens gardent vh, les autres retiennent dvh.

   2. Les modèles à encoche réservent une bande en bas pour la barre
      d'accueil. Sans env(safe-area-inset-bottom), un bouton fixé en bas se
      glisse dessous et ne se touche plus.

   3. Un élément vide dans une colonne flex est étiré par Chrome et réduit à
      zéro par Safari. C'est ce qui donnait un carré blanc sans traits sur
      l'iPhone. Aucun trait n'est plus dessiné par un élément vide ici.
   =========================================================================== */

@media (max-width:640px){

  /* Le fil des étapes : cinq pastilles rondes, sans libellé, alignées.
     Elles restent au-dessus du formulaire pendant qu'on remplit, sinon on
     perd le compte des étapes dès qu'on descend d'un champ. */
  .pro-fil{position:sticky;top:0;z-index:20;gap:6px;
    padding:10px 0 8px;margin-bottom:0;
    background:var(--warm,#F1F5F1)}

  .pro-fil-etape{flex:0 0 auto;width:34px;height:34px;padding:0;
    justify-content:center;border-radius:50%}

  .pro-fil-num{width:100%;height:100%;font-size:.82rem;background:transparent}
  .pro-fil-etape .pro-fil-num{border-radius:50%}
  .pro-fil-etape.est-courante .pro-fil-num,
  .pro-fil-etape.est-faite .pro-fil-num{border-radius:50%}

  .pro-fil-compteur{margin:0 0 14px;font-size:.82rem}

  /* Les boutons de bas d'écran : « Continuer » d'abord, en pleine largeur,
     parce que c'est ce qu'on cherche neuf fois sur dix. « Revenir » en
     dessous, présent mais discret. */
  .pro-etape-boutons{flex-direction:column;gap:9px}
  /* Portée volontairement limitée aux boutons du formulaire : « Revenir »
     sert aussi ailleurs, notamment au changement de ville de l'annuaire, où
     il n'a aucune raison de prendre toute la largeur. */
  .pro-etape-boutons .pro-btn-continuer,
  .pro-etape-boutons .pro-btn-revenir,
  .pro-etape-boutons .btn-submit{width:100%;min-height:50px}

  /* De la place sous le dernier bouton : le bouton flottant « Voir ma
     fiche » occupe le bas de l'écran en permanence pendant le formulaire. */
  .pro-etape-pied{padding-bottom:72px}

  /* L'écran 8 : la carte prend toute la largeur, le texte reste lisible. */
  .pro-ecran8{margin-top:4px}
  .pro-ecran8-carte{padding:24px 16px}
  .pro-ecran8-carte h2{font-size:1.32rem}
  .pro-ecran8-carte p{font-size:.92rem}
  .pro-ecran8-actions{gap:10px;margin-top:22px;padding-top:18px}
  .pro-ecran8-cta{width:100%;text-align:center;padding:15px 18px}

  /* L'écran 2 : une seule colonne, la décision sous l'explication. */
  .pro-ecran2{margin-top:2px}
  .pro-ecran2-gauche h1{font-size:1.5rem}
  .pro-pilote{font-size:.72rem;padding:5px 11px}
}


/* ===========================================================================
   L'ANNUAIRE, EN UNE SEULE PAGE

   Il avait été coupé en deux écrans, la ville puis les résultats. Sur
   téléphone, changer de commune obligeait à revenir en arrière. La page des
   organismes, elle, garde son champ à portée de main : les deux posent la
   même question, elles répondent maintenant de la même façon.
   =========================================================================== */

.pro-annuaire-ville{margin:12px 0 0;padding-top:12px;
  border-top:1px solid #DCE5DE;font-size:.9rem;color:var(--text-soft,#566060)}
.pro-annuaire-ville:empty{display:none}
.pro-annuaire-ville strong{color:var(--text,#252F28)}

/* La mention professionnelle : une ligne, pas une carte. Cette page existe
   d'abord pour qu'une famille trouve quelqu'un ; se référencer est une
   autre intention, elle ne doit pas lui passer devant. */
.pro-annuaire-inscription{margin:30px 0 0;padding-top:20px;
  border-top:1px solid #DCE5DE;text-align:center;font-size:.88rem;
  color:var(--text-soft,#566060)}
.pro-annuaire-inscription a{font-weight:600;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor}

/* ---------------------------------------------------------------------------
   Les activités référencées : une phrase, pas un tableau.
   --------------------------------------------------------------------------- */

.pro-metiers{max-width:560px;margin:16px auto 0;text-align:center;
  font-size:.82rem;line-height:1.65;color:var(--text-soft,#566060)}

.pro-metiers strong{color:var(--text,#252F28);font-weight:600}

.pro-metiers-autre{display:block;margin-top:8px}

@media (max-width:640px){
  .af-pro-porte{margin-top:26px;padding-top:24px}
  .af-pro-carte{min-height:96px;padding:15px;column-gap:12px}
  .af-pro-carte-icone{width:46px;height:46px;border-radius:13px}
  .af-pro-carte-icone svg{width:27px;height:27px}
  .af-pro-carte-titre{font-size:1.02rem}
  .pro-metiers{font-size:.78rem;margin-top:14px}
}


/* ═════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE : L'ÉCRAN 2 DU PARCOURS PROFESSIONNEL

   L'encadré « Commencer l'inscription » se retrouvait sous une colonne de
   texte, donc hors de l'écran. Un professionnel qui arrive ici a déjà
   décidé de se renseigner : la porte doit être devant lui, pas après trois
   paragraphes. On inverse l'ordre d'affichage sans toucher à la page.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width:760px){
  .pro-ecran2{display:flex!important;flex-direction:column!important;gap:18px!important}
  .pro-ecran2-droite{order:-1!important;padding:16px 15px!important;border-radius:15px!important}
  .pro-ecran2-gauche{order:1!important}

  .pro-ecran2-gauche h1{font-size:1.42rem!important;line-height:1.25!important}
  .pro-ecran2-chapo{font-size:.9rem!important;line-height:1.55!important;
    margin-bottom:16px!important}
  .pro-pilote{margin-bottom:10px!important}

  /* Les trois repères passent sous le bouton, en lignes serrées. */
  .pro-ecran2-reperes{margin-top:14px!important;padding-top:12px!important}
  .pro-repere{min-height:44px!important;padding:10px 12px!important;
    font-size:.86rem!important}
  .pro-reperes-titre{margin-bottom:6px!important;font-size:.76rem!important}
  .pro-ecran2-droite .pro-ecran2-cta{padding:16px 18px!important;
    font-size:1.02rem!important;margin-bottom:0!important}
}