/* ============================================================
   Association Joséphine — charte web
   Palette issue du logo : marine, teal, orange, vert, magenta
   Typo : Bricolage Grotesque (titres) + Figtree (texte)
   Signature : « l'arche » — le toit du logo, décliné en motif
   ============================================================ */

:root{
  --marine:#052862;
  --marine-fonce:#031d4a;
  --teal:#14b2a2;
  --teal-fonce:#0e8a7e;
  --orange:#e64307;
  --orange-fonce:#b93504;
  --vert:#74ad1b;
  --vert-fonce:#5c8a14;
  --magenta:#d20265;
  --magenta-fonce:#a80150;
  --se:#246bab;
  --se-fonce:#1b5488;
  --se-jaune:#fdb507;
  --encre:#0b2352;
  --texte:#3a3f56;
  --texte-doux:#6b7086;
  --papier:#fbf8f2;
  --blanc:#ffffff;
  --ligne:#e8e3d8;
  --rayon:18px;
  --ombre:0 10px 30px rgba(38,45,136,.08);
  --transition:180ms ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Empeche le navigateur de « rattraper » la position de defilement quand on
   masque puis affiche une page : sans cela, changer de page pouvait replacer
   l'utilisateur au milieu du contenu. */
.page-demo{overflow-anchor:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;line-height:1.65;
  color:var(--texte);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Figtree",sans-serif;
  color:var(--encre);line-height:1.15;font-weight:700;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem}
p+p{margin-top:.9em}
a{color:var(--marine)}
img{max-width:100%;display:block}
ul{padding-left:1.2em}

.conteneur{max-width:1100px;margin:0 auto;padding:0 24px}
.conteneur--etroit{max-width:820px}

/* ---------- Motif signature : l'arche ---------- */
.arche{display:inline-block;width:56px;height:22px;margin-bottom:10px}
.arche svg{width:100%;height:100%;display:block}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ligne);
}
.entete__barre{display:flex;align-items:center;gap:20px;min-height:78px}
.entete__logo img{height:52px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  text-decoration:none;color:var(--encre);font-weight:600;font-size:.97rem;
  padding:10px 13px;border-radius:12px;transition:background var(--transition);
}
/* Raccourci « background » evite : il remettrait « background-image » a none
   et effacerait le reflet du bouton « Adresser une situation ». */
.nav a:hover{background-color:var(--papier)}

/* Page en cours : uniquement un liseré teal, sans fond colore. */
.nav a[aria-current="page"],
.nav__groupe>button.actif{
  background-color:transparent;color:var(--marine);
  box-shadow:inset 0 -3px 0 var(--teal);
}
/* Le survol garde son fond habituel, le liseré reste visible. */
.nav a[aria-current="page"]:hover,.nav__groupe>button.actif:hover{
  background-color:var(--papier);
}
.nav__menu a[aria-current="page"]{
  background-color:transparent;font-weight:700;box-shadow:inset 3px 0 0 var(--teal);
}
.nav__menu a[aria-current="page"]:hover{background-color:var(--papier)}
@media (max-width:720px){
  /* Dans le menu deroulant du telephone, un liseré a gauche est plus lisible. */
  .nav a[aria-current="page"],.nav__groupe>button.actif{
    box-shadow:inset 3px 0 0 var(--teal);
  }
}
/* Regle d'origine : elle repeignait le fond en papier et annulait donc le
   rendu « liseré seul » defini plus haut. On ne garde que la couleur. */
.nav a[aria-current="page"]{color:var(--marine)}
.nav__groupe{position:relative}
.nav__groupe>button{
  font:inherit;font-weight:600;font-size:.97rem;color:var(--encre);
  background:none;border:0;padding:10px 13px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.nav__groupe>button:hover{background:var(--papier)}
.nav__groupe>button::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav__menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:290px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;
  box-shadow:var(--ombre);padding:8px;display:none;
}
.nav__groupe.ouvert .nav__menu{display:block}
.nav__menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:500}
.pastille{width:10px;height:10px;border-radius:50%;flex:none}
.pastille--teal{background:var(--teal)}
.pastille--magenta{background:var(--magenta)}
.pastille--orange{background:var(--orange)}
.pastille--vert{background:var(--vert)}
.pastille--marine{background:var(--marine)}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;font-weight:700;font-size:1rem;
  padding:13px 22px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;font-family:inherit;
  transition:transform .38s cubic-bezier(.34,1.28,.5,1),
             box-shadow .38s ease,
             background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* Tous les boutons : simple agrandissement au survol. */
.btn:hover,.btn:focus-visible{
  transform:translateY(-3px) scale(1.035);
  box-shadow:0 14px 30px rgba(5,40,98,.22);
}
/* Reflet lumineux traversant : reserve aux appels a l'action « Adresser une
   situation ». Il est peint comme un CALQUE DE FOND (et non via un
   pseudo-element), ce qui evite « overflow:hidden » — celui-ci decalerait la
   ligne de base des boutons places dans un paragraphe. */
.btn--reflet{
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 34%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.14) 66%,
    rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;
  background-size:55% 100%;
  background-position:-140% 50%;
  transition:background-position .75s cubic-bezier(.32,.06,.24,1),
             transform .38s cubic-bezier(.34,1.28,.5,1),
             box-shadow .38s ease,
             background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn--reflet:hover,.btn--reflet:focus-visible{background-position:240% 50%}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover,.btn:focus-visible{transform:none}
}
.btn--famo{background-color:var(--magenta);color:#fff}
.btn--famo:hover,.btn--famo:focus-visible{
  background-color:var(--magenta);box-shadow:0 14px 30px rgba(210,2,101,.42);
}
/* Dans la navigation, « .nav a » l'emportait en specificite sur « .btn--famo » :
   le libelle passait en bleu encre sur fond rose, et le survol virait au papier
   (effet « bouton transparent »). On force donc le rendu du bouton. */
/* Le bouton de l'en-tete reprend simplement l'animation commune a tous les
   boutons ; on ne force ici que la couleur (car « .nav a » est plus specifique
   que « .btn--famo ») et l'ecart avec le lien precedent. */
.nav a.btn--famo{
  color:#fff;background-color:var(--magenta);margin-left:10px;
  /* « .nav a » impose une transition de 180 ms a tous les liens du menu :
     on redonne ici la temporisation complete du reflet. Ce bouton fait partie
     des deux seuls elements du site a conserver le reflet traversant. */
  transition:background-position .75s cubic-bezier(.32,.06,.24,1),
             transform .38s cubic-bezier(.34,1.28,.5,1),
             box-shadow .38s ease, background-color .3s ease;
}
.nav a.btn--famo:hover,.nav a.btn--famo:focus-visible{
  color:#fff;background-color:var(--magenta);
}
@media (max-width:900px){.nav a.btn--famo{margin-left:0}}
.btn--marine{background-color:var(--marine);color:#fff}
.btn--marine:hover,.btn--marine:focus-visible{
  background-color:var(--marine);box-shadow:0 14px 30px rgba(5,40,98,.34);
}
/* Bouton au contour : il se remplit au survol, le reflet devient alors visible. */
.btn--contour{border-color:var(--marine);color:var(--marine);background-color:transparent}
.btn--contour:hover,.btn--contour:focus-visible{
  background-color:var(--marine);color:#fff;box-shadow:0 14px 30px rgba(5,40,98,.3);
}
.btn--teal{background-color:var(--teal);color:#fff}
.btn--teal:hover,.btn--teal:focus-visible{
  background-color:var(--teal);box-shadow:0 14px 30px rgba(20,178,162,.4);
}
.entete .btn{padding:10px 18px;font-size:.93rem}

.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:3px;background:var(--encre);border-radius:2px;margin:5px 0}

/* ---------- Héros ---------- */
.heros{position:relative;overflow:hidden;background:var(--blanc)}
.heros::before{
  content:"";position:absolute;inset:auto -20% -55% -20%;height:120%;
  background:var(--papier);
  clip-path:polygon(0 100%,0 62%,50% 18%,100% 62%,100% 100%);
}
/* On utilise padding-top / padding-bottom et NON le raccourci « padding » :
   celui-ci remettait le padding lateral a 0 et annulait donc les 24 px de
   « .conteneur ». Sur telephone, le texte et les boutons du hero touchaient
   les bords de l'ecran. */
.heros__int{position:relative;padding-top:84px;padding-bottom:96px;text-align:center}
.heros .arche{width:74px;height:30px}
/* 21ch imposait 4 lignes, 30ch etait trop large. 29ch est la largeur la plus
   sobre qui tienne encore sur 3 lignes (le seuil mesure est a 28ch, on garde
   une marge). « text-wrap:balance » repartit les 3 lignes de facon egale. */
.heros h1{max-width:29ch;margin:0 auto 18px;text-wrap:balance}
.heros p{max-width:56ch;margin:0 auto;font-size:1.15rem;color:var(--texte-doux)}
/* Les boutons d'appel a l'action sont nettement detaches des dispositifs. */
.heros__cta{margin-top:70px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Phrase d'accroche : « appelez-nous ». */
.heros__accroche{
  max-width:60ch;margin:20px auto 0;padding:18px 26px;
  background:var(--papier);border:1px solid var(--ligne);border-radius:18px;
  font-size:1.06rem;line-height:1.65;color:var(--texte);
}
.heros__accroche strong{color:var(--encre)}

/* Recapitulatif du FAMO : champs verrouilles, un crayon par bloc.
   En lecture seule les champs se fondent dans la page ; des qu'un bloc passe
   en edition, ils prennent l'apparence de vrais champs de saisie. */
.recap__outils{position:absolute;top:14px;right:16px;display:flex;gap:8px;flex-wrap:wrap}
.recap__outils .recap__modifier{position:static;top:auto;right:auto}
.recap__crayon{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blanc);border:1.5px solid var(--ligne);border-radius:999px;
  padding:6px 13px 6px 11px;font:inherit;font-size:.83rem;font-weight:700;
  color:var(--marine);cursor:pointer;transition:all .15s;
}
.recap__crayon svg{width:15px;height:15px;flex:0 0 auto}
.recap__crayon:hover{background:var(--marine);border-color:var(--marine);color:#fff}
.recap__crayon[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.recap h4{padding-right:0}
.recap__champ[readonly]{
  background:transparent;border-color:transparent;color:var(--encre);
  padding-left:0;cursor:default;
}
.recap__champ[readonly]:hover{border-color:transparent}
.recap--edition{background:#f4fbfa;box-shadow:0 0 0 2px rgba(20,178,162,.22)}
.recap--edition .recap__champ{background:var(--blanc);border-color:var(--ligne);padding-left:10px}
@media (max-width:640px){
  .recap__outils{position:static;margin-bottom:12px}
}

/* Legende des couches, placee SOUS la carte et tenant sur une seule ligne. */
.couches-legende--ligne{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.couches-legende--ligne>div{
  display:block;background:var(--blanc);border:1px solid var(--ligne);
  border-radius:14px;padding:14px 16px;
}
.couches-legende--ligne .pastille{margin-bottom:9px}
.couches-legende--ligne b{display:block;color:var(--encre);font-size:.98rem;margin-bottom:4px}
.couches-legende--ligne>div>span:last-child{
  display:block;font-size:.85rem;line-height:1.5;color:var(--texte-doux);text-align:left;
}
@media (max-width:900px){.couches-legende--ligne{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.couches-legende--ligne{grid-template-columns:1fr}}

/* Panneau bleu clair de la structure evaluatrice. */
.appel--se{background:linear-gradient(120deg,var(--se-fonce),var(--se))}
.appel--se .appel__note{border-top-color:rgba(255,255,255,.34)}

/* Surbrillance de l'encadre du formulaire apres un clic sur l'appel. */
.cerfa{transition:background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.cerfa.mis-en-avant-se{
  border-color:var(--se);background:#f2f8fd;
  box-shadow:0 0 0 4px rgba(36,107,171,.18),0 14px 34px rgba(36,107,171,.22);
}

/* Encadre de telechargement du formulaire Cerfa. */
.cerfa{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  background:var(--blanc);border:1px solid #bcd9ef;border-left:5px solid var(--se);
  border-radius:18px;padding:20px 24px;box-shadow:var(--ombre);
}
.cerfa__txt{flex:1 1 300px;min-width:0}
.cerfa b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.08rem;
  color:var(--encre);margin-bottom:6px;
}
.cerfa p{margin:0;font-size:.92rem;line-height:1.6;color:var(--texte);text-align:left}
.btn--se{background-color:var(--se);color:#fff}
.btn--se:hover,.btn--se:focus-visible{background-color:var(--se);box-shadow:0 14px 30px rgba(36,107,171,.4)}
@media (max-width:640px){.cerfa .btn{width:100%;justify-content:center}}

/* Fiches de poste : un intitule bien detache, la mission repliee en deux
   lignes, et un liseré de couleur reprenant celle du dispositif concerne.
   Un clic (ou le bouton +) deplie la description. Les quatre fiches d'un
   groupe tiennent ainsi sur une seule ligne. */
.postes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;align-items:start}
.poste{
  position:relative;cursor:pointer;
  background:var(--blanc);border:1px solid var(--ligne);border-left:4px solid var(--marine);
  border-radius:14px;padding:16px 18px;box-shadow:0 4px 14px rgba(38,45,136,.06);
  transition:box-shadow var(--transition),transform var(--transition);
}
.poste:hover{box-shadow:0 10px 24px rgba(38,45,136,.12);transform:translateY(-2px)}
.poste b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.02rem;
  color:var(--encre);line-height:1.3;margin-bottom:6px;padding-right:30px;
}
.poste p{
  margin:0;font-size:.92rem;line-height:1.6;color:var(--texte);text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.poste.deplie p{-webkit-line-clamp:unset;overflow:visible}
.poste::after{
  content:"+";position:absolute;top:13px;right:14px;
  width:24px;height:24px;border-radius:50%;background:var(--papier);border:1px solid var(--ligne);
  color:var(--marine);font-weight:800;font-size:1rem;line-height:22px;text-align:center;
  transition:background var(--transition),color var(--transition);
}
.poste:hover::after{background:var(--marine);color:#fff;border-color:var(--marine)}
.poste.deplie::after{content:"–"}
@media (prefers-reduced-motion:reduce){.poste{transition:none}}
.poste--teal{border-left-color:var(--teal)}
.poste--magenta{border-left-color:var(--magenta)}
.poste--orange{border-left-color:var(--orange)}
.poste--se{border-left-color:var(--se)}
.poste--marine{border-left-color:var(--marine)}
@media (max-width:520px){.poste{padding:14px 15px}}

/* Sous-titre des groupes de l'equipe. */
.titre-equipe{
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem;color:var(--teal-fonce);
  text-transform:uppercase;letter-spacing:.08em;
}

/* Deux encadres d'appel qui se suivent : on supprime l'espace en trop.
   Selecteurs qualifies par « section » : plusieurs regles « .section{padding} »
   apparaissent plus loin dans la feuille et l'emporteraient sinon. */
section.section--serree{padding-bottom:0}
section.section--serree+section.section{padding-top:26px}

/* Infobulle explicative : au survol ou au clavier, elle deroule la definition
   d'une situation complexe. Le mot souligne en pointilles signale qu'il y a
   quelque chose a lire. */
.infobulle{
  position:relative;display:inline;cursor:help;
  /* Simplement souligne en pointilles : pas de gras, pour ne pas concurrencer
     les vraies mises en valeur du paragraphe. */
  border-bottom:1.5px dotted var(--teal-fonce);color:inherit;font-weight:inherit;
}
.infobulle__marque{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:5px;border-radius:50%;
  background:var(--teal);color:#fff;font-size:.75rem;font-weight:800;
  vertical-align:.18em;line-height:1;
}
.infobulle__bulle{
  position:absolute;z-index:60;left:50%;top:calc(100% + 12px);
  transform:translateX(-50%) translateY(-6px);
  width:min(420px,calc(100vw - 40px));
  background:var(--blanc);color:var(--texte);
  border:1px solid var(--ligne);border-left:4px solid var(--teal);
  border-radius:14px;padding:16px 18px;
  box-shadow:0 18px 44px rgba(38,45,136,.22);
  font-size:.88rem;font-weight:400;line-height:1.55;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.infobulle__bulle b{display:block;color:var(--encre);font-size:.95rem;margin-bottom:8px}
.infobulle__bulle em{
  display:block;margin-top:9px;font-style:normal;font-weight:700;
  color:var(--teal-fonce);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
}
.infobulle:hover .infobulle__bulle,
.infobulle:focus .infobulle__bulle,
.infobulle:focus-within .infobulle__bulle{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.infobulle:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
@media (max-width:720px){
  /* Sur telephone la bulle est centree sur l'ecran plutot que sur le mot. */
  .infobulle__bulle{
    position:fixed;left:50%;top:auto;bottom:16px;
    transform:translateX(-50%) translateY(8px);
    width:calc(100vw - 32px);max-height:60vh;overflow:auto;
  }
  .infobulle:hover .infobulle__bulle,
  .infobulle:focus .infobulle__bulle,
  .infobulle:focus-within .infobulle__bulle{transform:translateX(-50%) translateY(0)}
}
@media (prefers-reduced-motion:reduce){.infobulle__bulle{transition:none}}

/* « Appelez-nous » : rose, EN GRAS, aucune trace de bouton au repos.
   Au survol, EXACTEMENT l'animation du bouton « Adresser une situation » :
   le fond rose se remplit de gauche a droite, un reflet lumineux traverse
   en 0,75 s, et l'ensemble se souleve en grandissant legerement.
   (« display:inline-block » est indispensable : les transformations ne
   s'appliquent pas a un element en ligne.) */
.lien-appel{
  display:inline-block;vertical-align:baseline;
  text-decoration:none;color:var(--magenta);font-weight:700;
  border-radius:999px;padding:1px 9px;box-shadow:none;
  /* DEUX calques de fond : le reflet lumineux par-dessus, le remplissage rose
     en dessous. Un fond est toujours rogne par la bordure, on n'a donc pas
     besoin d'« overflow:hidden » — or c'est justement lui qui decalait le mot :
     pour un inline-block dont « overflow » n'est pas « visible », CSS impose
     que la ligne de base devienne le bord INFERIEUR de la boite. */
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.14) 34%,
      rgba(255,255,255,.48) 50%,
      rgba(255,255,255,.14) 66%,
      rgba(255,255,255,0) 100%),
    linear-gradient(var(--magenta),var(--magenta));
  background-repeat:no-repeat,no-repeat;
  background-size:55% 100%,0% 100%;
  background-position:-140% 50%,left center;
  transition:background-size .24s cubic-bezier(.42,0,.58,1),
             background-position .75s cubic-bezier(.32,.06,.24,1),
             color .12s linear .1s,
             transform .38s cubic-bezier(.34,1.28,.5,1),
             box-shadow .38s ease;
}
.lien-appel strong{color:inherit;font-weight:700}
.lien-appel:hover,.lien-appel:focus-visible{
  color:#fff;
  background-size:55% 100%,100% 100%;
  background-position:240% 50%,left center;   /* le reflet traverse en 0,75 s */
  transform:translateY(-3px) scale(1.035);
  box-shadow:0 14px 30px rgba(210,2,101,.42);
}
@media (prefers-reduced-motion:reduce){
  .lien-appel{transition:none}
  .lien-appel:hover{transform:none}
  .lien-appel:hover,.lien-appel:focus-visible{background-size:55% 100%,100% 100%}
}

/* Bloc « Les dispositifs que nous portons » : titre manuscrit + cartes resserrees,
   de facon a pouvoir accueillir un quatrieme dispositif sans allonger la page. */
.dispositifs{margin-top:52px}
.titre-manuscrit{
  font-family:"Aurography","Caveat","Bricolage Grotesque",cursive;
  /* Graisse la plus legere disponible : en 700 puis 500, la police manuscrite
     faisait encore trop « cartoon ». */
  font-size:2.6rem;font-weight:400;line-height:1.1;
  color:var(--marine);margin:0 0 6px;
}
/* Grille a lignes egales : quel que soit le nombre de lignes de texte,
   les trois (bientot quatre) cartes ont exactement la meme hauteur. */
.dispositifs .identites{
  display:grid;grid-auto-rows:1fr;gap:9px;margin-top:12px;
  justify-items:center;align-items:stretch;
}
.dispositifs .carte-identite{
  margin:0;padding:14px 26px;gap:20px;width:100%;max-width:760px;height:100%;
  box-shadow:0 8px 24px rgba(38,45,136,.09);
}
.dispositifs .carte-identite img{height:84px}
/* Cartes de dispositifs cliquables : elles menent a la page du dispositif. */
.carte-identite--lien{
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.carte-identite--lien:hover,.carte-identite--lien:focus-visible{
  transform:translateY(-3px);box-shadow:0 16px 34px rgba(38,45,136,.18);
}
.carte-identite--lien:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.carte-identite--lien::after{
  content:"→";margin-left:auto;font-size:1.3rem;font-weight:700;color:var(--marine);
  opacity:.35;transition:opacity var(--transition),transform var(--transition);
}
.carte-identite--lien:hover::after{opacity:1;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.carte-identite--lien{transition:none}}
.dispositifs .carte-identite b{font-size:1.18rem}
.dispositifs .carte-identite>div>span{font-size:.95rem}
@media (max-width:720px){
  .titre-manuscrit{font-size:2.1rem}
  .dispositifs .carte-identite{padding:16px 20px;gap:12px}
  .dispositifs .carte-identite img{height:66px}
  .heros__cta{margin-top:44px}
  .heros__accroche{padding:16px 18px;font-size:1rem}
}
/* « p.heros__note » et non « .heros__note » : sinon « .heros p{margin:0 auto} »
   plus specifique remet la marge haute a zero et la ligne reste collee aux
   boutons. On garde en revanche la taille de « .heros p » (1.15rem), qui etait
   celle affichee jusqu'ici. */
p.heros__note{margin-top:20px;font-size:1.15rem;color:var(--texte-doux)}

/* ---------- Sections ---------- */
.section{padding:72px 0}
.section--blanc{background:var(--blanc)}
.section__tete{max-width:640px;margin-bottom:40px}
.section__tete--centre{margin-left:auto;margin-right:auto;text-align:center}
.surtitre{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-fonce);margin-bottom:8px;
}

/* ---------- Cartes activités ---------- */
.grille{display:grid;gap:22px}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--2{grid-template-columns:repeat(2,1fr)}
.carte{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:28px;position:relative;
  display:flex;flex-direction:column;gap:12px;
}
.carte--lien{transition:transform var(--transition),box-shadow var(--transition);text-decoration:none;color:inherit}
.carte--lien:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.carte__toit{
  width:52px;height:20px;margin-bottom:2px;
}
.carte h3{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.carte p{font-size:.98rem;color:var(--texte-doux)}
.carte .lien-suite{margin-top:auto;font-weight:700;font-size:.95rem;text-decoration:none}
.carte--teal .lien-suite{color:var(--teal-fonce)}
.carte--magenta .lien-suite{color:var(--magenta-fonce)}
.carte--orange .lien-suite{color:var(--orange-fonce)}
.carte--se .lien-suite{color:var(--se-fonce)}

/* ---------- Bande chiffres (style V1 : plat, épuré) ---------- */
.chiffres{background:var(--marine);color:#fff;border-radius:26px;padding:44px 36px}
.chiffres .grille{align-items:start}
.chiffre{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}
.chiffres.est-visible .chiffre{opacity:1;transform:translateY(0)}
.chiffre b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:2.4rem;font-weight:700;
  display:block;line-height:1;
}
.chiffre span{opacity:.85;font-size:.95rem}
.chiffre--teal b{color:#7de4d8}
.chiffre--orange b{color:#ffc46b}
.chiffre--vert b{color:#c2e88e}
.chiffre--magenta b{color:#ff8ec6}
@media (prefers-reduced-motion: reduce){
  .chiffre{opacity:1;transform:none;transition:none}
}

/* ---------- Bandeaux d'appel ---------- */
.appel{
  border-radius:26px;padding:44px 40px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.appel--magenta{background:linear-gradient(120deg,var(--magenta),#ff4d9e)}
.appel--teal{background:linear-gradient(120deg,var(--teal-fonce),var(--teal))}
/* « appel--vert » n'est plus utilise : l'encadre des particuliers reprend le
   teal de l'encadre « Une question, un doute sur qui contacter ? » de l'accueil. */
/* Panneau colore cliquable : il mene au formulaire situe juste en dessous. */
.appel--lien{text-decoration:none;cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition)}
.appel--lien:hover,.appel--lien:focus-visible{
  transform:translateY(-2px);box-shadow:0 16px 34px rgba(20,178,162,.34);
}
.appel--lien h3,.appel--lien p{color:#fff}
/* Fleche invitant a descendre vers le formulaire : petit va-et-vient discret. */
.appel__fleche{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.5);
  animation:fleche-bas 1.8s ease-in-out infinite;
}
.appel__fleche svg{width:24px;height:24px}
.appel--lien:hover .appel__fleche{background:rgba(255,255,255,.3)}
@keyframes fleche-bas{
  0%,100%{transform:translateY(-3px)}
  50%{transform:translateY(4px)}
}
@media (prefers-reduced-motion:reduce){
  .appel__fleche{animation:none}
  .appel--lien{transition:none}
}

/* Cadre autour du formulaire de contact. Au repos il est invisible : sa
   bordure est transparente et son padding est annule par une marge negative
   de meme valeur, la mise en page est donc exactement la meme qu'avant.
   Il sert de support a la surbrillance verte. */
.cadre-form{
  margin:-18px;padding:18px;border:1px solid transparent;border-radius:20px;
  transition:background var(--transition),border-color var(--transition),
             box-shadow var(--transition);
}
/* Surbrillance : meme rendu que la mise en avant d'une carte de contact
   (Arthur Buchard, Luana Mazzardi), dans le teal de l'encadre qui y renvoie. */
.cadre-form.mis-en-avant-vert{
  border-color:var(--teal);background:#f1faf9;
  box-shadow:0 0 0 4px rgba(20,178,162,.18),0 14px 34px rgba(20,178,162,.22);
}
@media (max-width:640px){.cadre-form{margin:-14px;padding:14px}}
@media (prefers-reduced-motion:reduce){.cadre-form{transition:none}}
/* Transition courte : le fondu reste doux pour la surbrillance verte, sans
   retarder le signalement rose d'un champ oublie. */
.champ input{transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}

/* Version courte des encadres d'appel : uniquement sur telephone. */
.appel__court{display:none}

/* Mention discrete a l'interieur d'un panneau colore. */
.appel__note{
  margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.32);
  font-size:.82rem;opacity:.9;max-width:46ch;
}
.appel h2{color:#fff;max-width:24ch}
.appel p{opacity:.92;max-width:52ch}
.appel .btn{background-color:#fff;color:var(--encre)}
/* Bouton blanc pose sur un aplat colore : un reflet blanc y serait invisible,
   on utilise donc un reflet sombre. */
.appel .btn--reflet{
  background-image:linear-gradient(100deg,
    rgba(5,40,98,0) 0%,
    rgba(5,40,98,.05) 34%,
    rgba(5,40,98,.14) 50%,
    rgba(5,40,98,.05) 66%,
    rgba(5,40,98,0) 100%);
}
.appel .btn:hover,.appel .btn:focus-visible{
  background-color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Page interne : bannière ---------- */
.banniere{background:var(--blanc);border-bottom:1px solid var(--ligne);padding:56px 0 46px}
.banniere--teal{box-shadow:inset 0 -6px 0 var(--teal)}
.banniere--magenta{box-shadow:inset 0 -6px 0 var(--magenta)}
.banniere--orange{box-shadow:inset 0 -6px 0 var(--orange)}
.banniere--se{box-shadow:inset 0 -6px 0 var(--vert)}
.banniere--marine{box-shadow:inset 0 -6px 0 var(--marine)}
.banniere p.chapeau{max-width:62ch;margin-top:12px;font-size:1.12rem;color:var(--texte-doux)}
.fil{font-size:.88rem;color:var(--texte-doux);margin-bottom:14px}
.fil a{color:inherit;text-decoration:none}
.fil a:hover{text-decoration:underline}

/* ---------- Listes missions ---------- */
.missions{list-style:none;padding:0;display:grid;gap:14px}
.missions li{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;
  padding:16px 18px 16px 50px;position:relative;
}
.missions li::before{
  content:"";position:absolute;left:18px;top:22px;width:16px;height:8px;
  border-radius:8px 8px 0 0;
}
.missions--teal li::before{background:var(--teal)}
.missions--magenta li::before{background:var(--magenta)}
.missions--orange li::before{background:var(--orange)}
.missions--se li::before{background:var(--vert)}

/* ---------- Équipe ---------- */
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.membre{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;
  padding:18px;display:flex;gap:12px;align-items:flex-start;
}
.membre .pastille{margin-top:7px}
.membre b{display:block;color:var(--encre);line-height:1.3}
.membre span{font-size:.9rem;color:var(--texte-doux)}

/* ---------- Frise historique ---------- */
.frise{list-style:none;padding:0;position:relative;display:grid;gap:26px}
.frise::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(var(--orange),var(--teal),var(--marine))}
.frise li{padding-left:44px;position:relative;
  opacity:0;transform:translateX(-18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1)}
.frise li.est-visible{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion: reduce){.frise li{opacity:1;transform:none;transition:none}}
.frise li::before{content:"";position:absolute;left:2px;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--blanc);border:4px solid var(--marine)}
/* Chaque pastille reprend exactement la couleur du degrade du trait a sa hauteur
   (orange -> teal -> marine), pour que la frise reste lisible et homogene. */
.frise li:nth-child(1)::before{border-color:#e64307}
.frise li:nth-child(2)::before{border-color:#aa6333}
.frise li:nth-child(3)::before{border-color:#6e8260}
.frise li:nth-child(4)::before{border-color:#32a28c}
.frise li:nth-child(5)::before{border-color:#129e99}
.frise li:nth-child(6)::before{border-color:#0e7787}
.frise li:nth-child(7)::before{border-color:#094f74}
.frise li:nth-child(8)::before{border-color:#052862}
.frise b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;color:var(--encre);display:block}

/* ---------- Territoire ---------- */
.carte-cadre{
  border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;
  background:var(--blanc);box-shadow:var(--ombre);
}
.carte-cadre iframe{display:block;width:100%;height:520px;border:0}
.communes{columns:3;column-gap:34px;list-style:none;padding:0;font-size:.98rem}
.communes li{padding:5px 0;border-bottom:1px dashed var(--ligne);break-inside:avoid}
.dac-fiches .carte h3{font-size:1.1rem}
/* Fiches des trois DAC : cartes entierement cliquables. */
.carte--lien{
  display:block;text-decoration:none;color:inherit;
  transition:transform var(--transition),box-shadow var(--transition);
}
.carte--lien:hover,.carte--lien:focus-visible{transform:translateY(-4px);box-shadow:0 18px 38px rgba(38,45,136,.18)}
.carte--lien:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.carte--lien h3::after{content:" →";color:var(--marine);opacity:.4}
.carte--lien:hover h3::after{opacity:1}
/* Dans une carte cliquable on ne peut pas imbriquer un second lien :
   le numero est donc affiche en texte, mis en valeur. */
.dac-tel{color:var(--marine);font-weight:800}
@media (prefers-reduced-motion:reduce){.carte--lien{transition:none}}
/* Logos des trois DAC : meme boite pour les trois, quel que soit le format
   du fichier d'origine (Joséphine 1,5:1, Opalia 1,9:1, Coordinov 4,7:1).
   « object-fit:contain » fait tenir chaque logo dans la boite sans le deformer. */
.dac-logo{
  display:flex;align-items:center;justify-content:center;
  height:78px;width:200px;margin:0 auto 14px;
}
.dac-logo img{max-height:78px;max-width:200px;width:auto;height:auto;object-fit:contain}
/* Ajustement optique : le logo Opalia comporte une grande sphere claire qui
   remplit toute la boite ; a hauteur egale il paraissait plus gros que les
   deux autres. On le ramene donc a la meme surface percue. */
.dac-logo--opalia img{max-height:68px}
@media (max-width:720px){
  .dac-logo{height:64px;width:170px;margin:0 auto 14px}
  .dac-logo img{max-height:64px;max-width:170px}
}
.dac-fiches .carte p{font-size:.93rem}

/* ---------- Formulaires ---------- */
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;
  /* Reserve la hauteur de l'en-tete collant lors d'un defilement automatique
     (signalement d'un champ oublie, validation du navigateur, ancre...) :
     sans cela le champ vise se retrouve cache derriere l'en-tete. */
  scroll-margin-top:104px;scroll-margin-bottom:32px}
fieldset,.famo-etape,.recap{scroll-margin-top:104px}
@media (max-width:720px){
  .champ,fieldset,.famo-etape,.recap{scroll-margin-top:88px}
}
.champ label{font-weight:600;color:var(--encre);font-size:.97rem}
.champ .aide{font-size:.85rem;color:var(--texte-doux)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  font:inherit;padding:12px 14px;border:1.5px solid var(--ligne);border-radius:12px;
  background:var(--blanc);color:var(--texte);width:100%;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(20,178,162,.35);border-color:var(--teal);
}
textarea{min-height:120px;resize:vertical}
.champ--ligne{display:grid;grid-template-columns:1fr 1fr;gap:16px}
fieldset{border:1px solid var(--ligne);border-radius:14px;padding:18px 20px;margin-bottom:20px;background:var(--blanc)}
legend{font-weight:700;color:var(--encre);padding:0 8px;font-family:"Bricolage Grotesque",sans-serif}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.case{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;font-size:.97rem}
.case:hover{background:var(--papier)}
.case input{margin-top:4px;width:17px;height:17px;flex:none;accent-color:var(--marine)}
.radios{display:flex;gap:18px;flex-wrap:wrap}
.radios label{display:flex;gap:8px;align-items:center;font-size:.98rem}
.radios input{accent-color:var(--marine);width:17px;height:17px}

/* --- Champs obligatoires : asterisque rose + signalement des oublis --- */
.oblig{color:#D11865;font-weight:700}
.case .aide{display:block;font-size:.85rem;color:var(--texte-doux);margin-top:3px;font-weight:400}
/* Signalement d'un oubli : meme rose/violet que la mise en avant d'une carte
   de contact (« Pas encore de compte Santelien ? » -> Arthur Buchard), pour
   garder un seul code couleur d'attention sur tout le site. */
.champ-invalide input,.champ-invalide select,.champ-invalide textarea,
.champ-invalide input:focus-visible,.champ-invalide select:focus-visible,
.champ-invalide textarea:focus-visible{
  border-color:var(--magenta);background:#fff5fa;
  outline-color:rgba(210,2,101,.45);
  box-shadow:0 0 0 3px rgba(210,2,101,.16);
}
.champ-invalide>label,.champ-invalide>legend{color:var(--magenta-fonce)}
fieldset.champ-invalide{
  border-color:var(--magenta);background:#fff5fa;
  box-shadow:0 0 0 3px rgba(210,2,101,.14);
}
.champ-invalide .case input,.champ-invalide .radios input{accent-color:var(--magenta)}

.avert{
  border-radius:14px;padding:16px 18px 16px 52px;position:relative;
  background:#fff4e3;border:1px solid #f4d29a;color:#7a5200;font-size:.97rem;
}
.avert::before{content:"!";position:absolute;left:18px;top:14px;width:24px;height:24px;border-radius:50%;
  background:var(--orange);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.avert--rgpd{background:#eef7ff;border-color:#bcd9f2;color:#1c4d75}
.avert--rgpd::before{content:"i";background:var(--marine)}

/* ---------- Assistant FAMO ---------- */
.famo-progression{display:flex;gap:6px;margin:26px 0 30px;flex-wrap:wrap}
.famo-progression span{
  flex:1;min-width:70px;height:8px;border-radius:8px;background:var(--ligne);
  position:relative;
}
.famo-progression span.fait{background:var(--teal)}
.famo-progression span.actif{background:var(--marine)}
.famo-etape{display:none;animation:apparait .25s ease}
.famo-etape.actif{display:block}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.famo-nav{display:flex;justify-content:space-between;gap:14px;margin-top:26px;flex-wrap:wrap}
.famo-titre-etape{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.famo-titre-etape .numero{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  width:38px;height:38px;border-radius:50%;background:var(--marine);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.famo-sous{color:var(--texte-doux);margin-bottom:22px}
.filiere{border:1.5px solid var(--ligne);border-radius:14px;margin-bottom:12px;background:var(--blanc);overflow:hidden}
.filiere>label{
  display:flex;gap:10px;align-items:center;padding:14px 16px;font-weight:700;color:var(--encre);cursor:pointer;
}
.filiere>label input{width:18px;height:18px;accent-color:var(--magenta)}
.filiere .filiere__options{display:none;padding:4px 16px 14px;border-top:1px dashed var(--ligne)}
.filiere.ouverte .filiere__options{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.recap{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;padding:20px;margin-bottom:16px}
.recap h4{margin-bottom:8px}
.recap dl{display:grid;grid-template-columns:220px 1fr;gap:6px 14px;font-size:.95rem}
.recap dt{color:var(--texte-doux)}
.recap dd{color:var(--encre)}
.famo-succes{text-align:center;padding:60px 20px}
/* « .section p{text-align:justify} » apparait plus loin dans la feuille et
   l'emportait a specificite egale : il decalait le texte ET les boutons de
   fin. On qualifie donc le selecteur par « .section » pour reprendre la main. */
.section .famo-succes p{text-align:center}
.section .famo-succes .fin-contacts p,.famo-succes .envoi-carte span{text-align:left}
/* Une fois le FAMO telecharge, le chapeau de la banniere disparait pour que la
   confirmation soit visible tout de suite. */
.famo-termine .banniere .chapeau{display:none}
.famo-succes .rond{
  width:74px;height:74px;border-radius:50%;background:var(--vert);color:#fff;
  font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}

/* ---------- Tableau cercle de soins ---------- */
.tableau-pros{width:100%;border-collapse:collapse;background:var(--blanc);border-radius:14px;overflow:hidden;border:1px solid var(--ligne)}
.tableau-pros th{background:var(--papier);text-align:left;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-doux);padding:10px 12px}
.tableau-pros td{padding:8px;border-top:1px solid var(--ligne)}
.tableau-pros td:first-child{font-weight:600;color:var(--encre);white-space:nowrap;padding:8px 12px}
.tableau-pros input{padding:9px 10px;border-radius:9px;font-size:.93rem}

/* ---------- Pied de page ---------- */
.pied{background:var(--marine-fonce);color:#c9cdee;margin-top:80px}
.pied a{color:#fff}
.pied__haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:56px 0 40px}
.pied h4{color:#fff;margin-bottom:14px;font-size:1.05rem}
.pied ul{list-style:none;padding:0;display:grid;gap:8px;font-size:.95rem}
.pied__logo{background:#fff;padding:10px 14px;border-radius:12px;height:64px;width:auto;margin-bottom:16px}

/* LinkedIn : deux petits boutons, avec le reflet traversant commun a tous
   les boutons du site. Format compact pour ne pas alourdir le pied de page. */
.pied__social{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px}
.btn--li{
  padding:8px 15px 8px 11px;gap:8px;font-size:.9rem;
  background-color:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.26);
}
.btn--li img{width:20px;height:20px;border-radius:4px;flex:0 0 auto}
.btn--li:hover,.btn--li:focus-visible{
  background-color:rgba(255,255,255,.2);color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}
/* Meme rendu que le bouton principal : un simple grisage donnait
   l'impression d'un bouton desactive. */
.btn--li-second{font-size:.9rem}
@media (max-width:400px){.pied__social{gap:7px}.btn--li{width:100%;justify-content:flex-start}}
.pied__bas{border-top:1px solid rgba(255,255,255,.15);padding:18px 0;font-size:.85rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied__bas a{color:#c9cdee;text-decoration:none;margin-left:18px}
.pied__bas a:hover{color:#fff;text-decoration:underline}

/* ---------- Utilitaires ---------- */
.mt-40{margin-top:40px}
.mt-24{margin-top:24px}
.centre{text-align:center}
.masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grille--3{grid-template-columns:1fr 1fr}
  .communes{columns:2}
  .pied__haut{grid-template-columns:1fr 1fr}
  .recap dl{grid-template-columns:1fr}
}
@media (max-width:720px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;top:78px;left:0;right:0;
    background:var(--blanc);border-bottom:1px solid var(--ligne);
    flex-direction:column;align-items:stretch;padding:14px 20px 22px;gap:2px;
  }
  .nav.ouvert{display:flex}
  .nav__menu{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 16px}
  .nav__groupe>button{width:100%;justify-content:space-between}
  .entete .btn{margin-top:10px;justify-content:center}
  .grille--3,.grille--2{grid-template-columns:1fr}
  .champ--ligne{grid-template-columns:1fr}
  .communes{columns:1}
  .pied__haut{grid-template-columns:1fr}
  .heros__int{padding-top:60px;padding-bottom:70px}
  .carte-cadre iframe{height:420px}
}

/* ---------- V3 : identité DAC, compteurs, stats par pôle, partenaires ---------- */
.entete__logo img{height:42px;width:auto}
@media (max-width:720px){.entete__logo img{height:32px}}

.badge-dac{
  display:inline-flex;align-items:center;gap:16px;margin-top:26px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:999px;
  padding:10px 26px 10px 12px;box-shadow:var(--ombre);text-align:left;
}
.badge-dac img{height:56px;width:auto}
.badge-dac span{font-size:.98rem;color:var(--texte);max-width:44ch}

.note-chiffres{margin-top:22px;font-size:.82rem;opacity:.75;text-align:center}
.note-demo{font-size:.82rem;color:var(--texte-doux);margin-top:10px}

/* Alerte « hors secteur » sous le code postal du FAMO : informative,
   jamais bloquante. */
.alerte-secteur{
  margin:8px 0 0;padding:11px 14px;font-size:.88rem;line-height:1.5;
  background:#fff8f3;border:1px solid #f3c9a8;border-left:4px solid var(--orange);
  border-radius:10px;color:#7a3b06;
}
.alerte-secteur b{color:#5c2c04}
.alerte-secteur a{color:var(--orange-fonce);font-weight:700}

/* ---------- Page Contact ----------
   Trois acces rapides en haut, puis formulaire large + coordonnees. */
.grille--contact{grid-template-columns:1.6fr 1fr;gap:26px}
@media (max-width:900px){.grille--contact{grid-template-columns:1fr}}

.acces__carte{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  background:var(--blanc);border:1px solid var(--ligne);border-top:4px solid var(--marine);
  border-radius:18px;padding:22px 24px;box-shadow:var(--ombre);
}
.acces__carte--teal{border-top-color:var(--teal)}
.acces__carte--magenta{border-top-color:var(--magenta)}
.acces__carte--bleu{border-top-color:#3981c2}
.acces__tag{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-doux);
}
.acces__carte b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.1rem;color:var(--encre);line-height:1.25;
}
.acces__carte p{margin:0;font-size:.92rem;line-height:1.55;color:var(--texte)}
.acces__carte > a:not(.btn){color:var(--marine);font-weight:700;font-size:.92rem;word-break:break-all}
.acces__carte .btn{margin-top:6px}
/* Numero de telephone de la fiche de coordonnees. */
.coord-tel{
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.45rem;font-weight:800;
  color:var(--teal-fonce);text-decoration:none;line-height:1.2;
}
.coord-tel:hover{text-decoration:underline}
.coord-horaires{font-size:.9rem;color:var(--texte-doux)}
.acces__logo{height:34px;width:auto;max-width:160px;object-fit:contain;margin-bottom:2px}
@media (max-width:900px){.acces{grid-template-columns:1fr}}

/* Deux adresses, presentees en liste serree. */
.coord-mails{margin:16px 0 0;display:grid;gap:2px}
.coord-mails dt{
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--texte-doux);margin-top:10px;
}
.coord-mails dd{margin:0}
.coord-mails dd a{font-weight:700;word-break:break-all}

/* Avertissement en version discrete, a l'interieur du formulaire. */
.avert--fin{font-size:.88rem;padding:12px 15px}

/* Encadre Santelien de la page Contact : creation de compte accompagnee. */
.carte-santelien{
  background:var(--blanc);border:1px solid var(--ligne);border-left:5px solid #3981c2;
  border-radius:18px;padding:22px 24px;box-shadow:var(--ombre);
}
.carte-santelien .logo-santelien{height:52px;margin:0 0 12px}
.carte-santelien b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.08rem;color:var(--encre);margin-bottom:8px;
}
.carte-santelien p{margin:0 0 12px;font-size:.94rem;line-height:1.6;color:var(--texte)}
.carte-santelien p:last-of-type{margin-bottom:0}
.carte-santelien a:not(.btn){color:#2f6ea8;font-weight:700}
.carte-santelien .btn{margin-top:18px}
@media (max-width:720px){.carte-santelien .btn{width:100%;justify-content:center}}

/* Bloc de contact place en bas des pages de dispositif : coordonnees
   directes + renvoi vers le formulaire de contact. */
.bloc-contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;
  padding:24px 28px;box-shadow:var(--ombre);
}
.bloc-contact__txt{flex:1 1 320px;min-width:0}
.bloc-contact b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.15rem;color:var(--encre);margin-bottom:8px;
}
.bloc-contact p{margin:0;font-size:.97rem;line-height:1.6;color:var(--texte)}
.bloc-contact a:not(.btn){color:var(--marine);font-weight:700}
.bloc-contact__actions{display:flex;flex-wrap:wrap;gap:10px}
.bloc-contact--teal{border-left:5px solid var(--teal)}
.bloc-contact--orange{border-left:5px solid var(--orange)}
.bloc-contact--se{border-left:5px solid var(--se)}
.bloc-contact--magenta{border-left:5px solid var(--magenta)}
@media (max-width:720px){
  .bloc-contact{padding:20px}
  .bloc-contact__actions{width:100%}
  .bloc-contact__actions .btn{width:100%;justify-content:center}
}

/* Destinataire du formulaire de contact, affiche en direct. */
.destinataire{
  margin:10px 0 0;padding:11px 14px;border-radius:10px;font-size:.9rem;line-height:1.5;
  background:#eef7f6;border:1px solid #b9e0dc;color:#0d5f58;
}
.destinataire b{color:#083f3a}

.destinataire a{color:var(--teal-fonce);font-weight:700}

/* Liste de suggestions d'adresses (Base Adresse Nationale). */
.auto{position:relative}
.auto__liste{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:6px;list-style:none;max-height:260px;overflow:auto;
  background:var(--blanc);border:1.5px solid var(--ligne);border-radius:12px;
  box-shadow:0 14px 34px rgba(38,45,136,.16);
}
.auto__liste li{
  padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.95rem;line-height:1.35;
}
.auto__liste li b{display:block;color:var(--encre);font-weight:700}
.auto__liste li span{color:var(--texte-doux);font-size:.85rem}
.auto__liste li:hover,.auto__liste li[aria-selected="true"]{background:var(--papier)}
.auto__liste li.auto__vide{cursor:default;color:var(--texte-doux)}
.auto__liste li.auto__vide:hover{background:none}

/* Encadre explicatif — sert a formuler en langage clair, pour les habitants
   et les aidants, ce qu'un texte institutionnel dit en langage professionnel. */
.encadre{
  background:var(--blanc);border:1px solid var(--ligne);border-left:5px solid var(--marine);
  border-radius:16px;padding:20px 24px;box-shadow:var(--ombre);
}
.encadre>b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.08rem;
  color:var(--encre);margin-bottom:10px;
}
.encadre ul{margin:0;padding-left:20px;display:grid;gap:7px}
/* Deroule numerote d'un accompagnement. */
.etapes-dac{margin:0;padding-left:22px;display:grid;gap:10px}
.etapes-dac li{line-height:1.55;padding-left:4px}
.etapes-dac li::marker{color:var(--teal-fonce);font-weight:800}
.etapes-dac b{color:var(--encre)}
.encadre li{line-height:1.55}
.encadre--teal{border-left-color:var(--teal)}
.encadre--magenta{border-left-color:var(--magenta)}
.encadre--orange{border-left-color:var(--orange)}
.encadre--se{border-left-color:var(--se)}
.encadre .etapes-dac li::marker{color:var(--se-fonce)}
.encadre em{font-style:normal;color:var(--texte-doux)}

.stats-pole{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;
  padding:26px 24px;text-align:center;
}
.stats-pole b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:2.1rem;font-weight:700;
  display:block;line-height:1.05;
}
.stats-pole span{font-size:.88rem;color:var(--texte-doux)}
.stats-pole--teal b{color:var(--teal-fonce)}
.stats-pole--orange b{color:var(--orange-fonce)}
.stats-pole--se b{color:var(--vert-fonce)}
.stats-pole--magenta b{color:var(--magenta-fonce)}
@media (max-width:720px){.stats-pole{grid-template-columns:1fr;gap:20px}}

.banniere__flex{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.banniere__logo-dac{
  height:88px;width:auto;background:var(--blanc);border:1px solid var(--ligne);
  border-radius:16px;padding:10px 16px;box-shadow:var(--ombre);
}
@media (max-width:720px){.banniere__logo-dac{height:64px}}

.contact-carte h3{color:var(--encre)}
.contact-carte a{color:var(--magenta-fonce);text-decoration:none}
.contact-carte a:hover{text-decoration:underline}

.pied__partenaires{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:6px}
.pied__partenaires img{
  height:52px;width:auto;background:#fff;border-radius:10px;padding:6px 10px;flex:none;
}
/* Le logo de l'association renvoie a l'accueil. */
.pied__logos a{display:inline-block;border-radius:12px;transition:transform var(--transition)}
.pied__logos a:hover{transform:translateY(-2px)}

/* Le logo de l'ARS est cliquable : il mene au site de l'agence. */
.pied__partenaires a{display:inline-flex;border-radius:10px;transition:transform var(--transition),box-shadow var(--transition)}
.pied__partenaires a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
/* La mention de soutien prend toute la largeur : elle passe donc
   SOUS la rangee de logos, et non a cote. */
.pied__partenaires span{flex:1 0 100%;font-size:.88rem;line-height:1.5;margin-top:2px}

/* ---------- V4 : refonte pro — identité, stats colorées, structures ---------- */

/* Carte d'identité DAC dans le héros : grande, structurée, nette */
.badge-dac{display:none}
.carte-identite{
  display:flex;align-items:center;gap:26px;margin:34px auto 0;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:22px;
  padding:22px 34px;box-shadow:0 14px 40px rgba(38,45,136,.12);
  max-width:740px;text-align:left;
}
.carte-identite img{height:104px;width:auto;flex:none}
.carte-identite__sep{width:1px;align-self:stretch;background:var(--ligne);flex:none}
.carte-identite b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.3rem;color:var(--encre);line-height:1.2;margin-bottom:4px;
}
.carte-identite>div>span{font-size:1rem;color:var(--texte-doux)}
@media (max-width:720px){
  .carte-identite{flex-direction:column;text-align:center;gap:14px;padding:22px}
  .carte-identite__sep{display:none}
  .carte-identite img{height:78px}
}

/* Stats par pôle : bandeaux dégradés colorés, gros chiffres blancs — cohérents avec les appels */
.stats-pole{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  border-radius:26px;padding:40px 30px;text-align:center;color:#fff;
  border:0;background:var(--marine);
}
.stats-pole--4{grid-template-columns:repeat(4,1fr)}
.stats-pole--teal{background:linear-gradient(120deg,var(--teal-fonce),var(--teal))}
.stats-pole--orange{background:linear-gradient(120deg,#cf7d00,var(--orange))}
.stats-pole--se{background:linear-gradient(120deg,var(--vert-fonce),var(--vert))}
.stats-pole--magenta{background:linear-gradient(120deg,var(--magenta-fonce),#ff4d9e)}
.stats-pole b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:3rem;font-weight:800;
  display:block;line-height:1;color:#fff;letter-spacing:-.02em;
  /* « 30 ans », « 40 a 60 »… restent d'un seul tenant. */
  white-space:nowrap;
}
.stats-pole--teal b,.stats-pole--orange b,.stats-pole--se b,.stats-pole--magenta b{color:#fff}
.stats-pole span{font-size:.92rem;opacity:.94;display:inline-block;margin-top:8px}
@media (max-width:900px){.stats-pole--4{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.stats-pole,.stats-pole--4{grid-template-columns:1fr;gap:26px;padding:34px 24px}}
@media (max-width:420px){.stats-pole b{font-size:2.5rem}}

/* Chiffres de l'accueil : plus grands */
.chiffre b{font-size:2.9rem;white-space:nowrap}
/* « 9h - 17h30 » compte plus de caracteres que les autres chiffres :
   on reduit un peu pour qu'il tienne sur une seule ligne. */
.chiffre--horaires b{font-size:2.1rem}
@media (max-width:1180px){.chiffre--horaires b{font-size:1.8rem}}

/* Logo Santelien : en bloc pour ouvrir la rubrique, en ligne dans les titres
   et intitules de cartes ou le service est nomme. */
.logo-santelien{display:block;height:66px;width:auto;margin:0 0 14px}
.logo-sl{height:30px;width:auto;vertical-align:-.42em;margin:0 2px}
h2 .logo-sl,h3 .logo-sl{height:1.5em;vertical-align:-.42em}
.envoi-carte b .logo-sl,.carte-outil b .logo-sl{height:26px;vertical-align:-.38em}
@media (max-width:720px){
  .logo-santelien{height:52px}
  .logo-sl{height:26px}
}

/* Grille des structures Santélien */
.structures{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.structure{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
}
.structure b{color:var(--encre);font-size:1rem;line-height:1.3}
.structure span{font-size:.85rem;color:var(--texte-doux);line-height:1.45}
.structure .tag{
  font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px;
}
.tag--marine{color:var(--marine)}
.tag--teal{color:var(--teal-fonce)}
.tag--orange{color:var(--orange-fonce)}
.tag--vert{color:var(--vert-fonce)}
.tag--magenta{color:var(--magenta-fonce)}
.structure--plus{
  background:var(--marine);border-color:var(--marine);justify-content:center;
}
.structure--plus b{color:#fff;font-size:1.08rem}
.structure--plus span{color:#c9cdee}
.structure--plus span strong{color:#fff}
/* Intitule clair sur les cartes d'appel a l'action (fond marine). */
.tag--clair{color:#8fa4d8}

/* Cartes « + … » cliquables : elles renvoient vers le bon interlocuteur. */
.structure--lien{text-decoration:none;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition)}
.structure--lien:hover,.structure--lien:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(5,40,98,.28)}
.structure--lien::after{content:"→";color:#fff;font-size:1.1rem;margin-top:8px}

/* Carte de contact mise en avant apres un clic depuis les structures ou les projets. */
.contact-carte{transition:box-shadow var(--transition),border-color var(--transition),background var(--transition)}
.contact-carte.mis-en-avant{
  border-color:var(--magenta);background:#fff5fa;
  box-shadow:0 0 0 4px rgba(210,2,101,.18),0 14px 34px rgba(210,2,101,.2);
}
.contact-carte.mis-en-avant h3{color:var(--magenta-fonce)}
@media (prefers-reduced-motion:reduce){.structure--lien{transition:none}}

/* Pied de page : double identité Joséphine + DAC */
.pied__logos{display:flex;gap:12px;align-items:stretch;margin-bottom:16px;flex-wrap:wrap}
.pied__logos .pied__logo{margin-bottom:0}
.pied__logo--dac{height:64px;width:auto}

/* Le bandeau de demonstration a ete retire ; la regle est conservee au cas ou
   il faudrait le remettre pour une relecture interne. */
.bandeau-demo{background:#fff4e3;border-bottom:1px solid #f4d29a;color:#7a5200;font-size:.85rem;text-align:center;padding:8px 16px}

/* ---------- CORRECTIF V1 : proportions des nombres + uniformisation des bandes ---------- */
/* Les nombres animés sont dans des <span> ; on les force à hériter de la taille/couleur du <b>
   (sinon ils héritent de la petite taille des libellés .chiffre span / .stats-pole span). */
.chiffre b span,
.stats-pole b span{font:inherit;color:inherit;opacity:1;letter-spacing:inherit;
  /* Les compteurs restent EN LIGNE dans le <b> : sans cela la regle generale
     « .stats-pole span{display:block} » plus bas les empilait, et « 30 ans »
     ou « 40 a 60 » se coupaient en plusieurs lignes. */
  display:inline;margin:0;vertical-align:baseline}

/* Toutes les bandes de stats internes reprennent le rendu de la bande chiffres V1 :
   fond marine plat, gros chiffres colorés, libellés blancs. Fini les dégradés. */
.stats-pole{
  background:var(--marine)!important;color:#fff;border-radius:26px;
  padding:44px 36px;box-shadow:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px;text-align:left;
}
.stats-pole.stats-pole--4{grid-template-columns:repeat(4,1fr)}
.stats-pole b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:2.4rem;font-weight:700;
  display:block;line-height:1;margin:0;
}
.stats-pole--teal b{color:#7de4d8}
.stats-pole--orange b{color:#ffc46b}
.stats-pole--se b{color:#c2e88e}
.stats-pole--magenta b{color:#ff8ec6}
.stats-pole span{opacity:.85;font-size:.95rem;color:#fff;display:block;margin-top:8px}
@media (max-width:720px){
  .stats-pole,.stats-pole.stats-pole--4{grid-template-columns:1fr;gap:26px}
}
/* Un peu d'air entre les deux boutons du hero et la ligne téléphone */
p.heros__note{margin-top:20px}
.envoi-guide{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin:28px auto 0;text-align:left}
/* Logos des encadres de fin de FAMO : meme boite pour les deux. */
.fin-logo{display:block;height:44px;width:auto;max-width:190px;object-fit:contain;margin:0 auto 14px}
/* Le logo DAC est presque carre (1,87:1), Santelien tres allonge (3,48:1) :
   a hauteur egale le DAC occupait deux fois moins de surface. On egalise. */
.fin-logo--dac{height:60px}
@media (max-width:720px){
  .fin-logo{height:38px;max-width:160px}
  .fin-logo--dac{height:52px}
}

/* Logos des encadres « comment envoyer le FAMO » : meme boite pour les deux,
   quel que soit le format du fichier d'origine. */
.envoi-logo{display:block;height:38px;width:auto;max-width:150px;object-fit:contain;margin:0 auto 12px}
@media (max-width:720px){.envoi-logo{height:32px;max-width:130px}}

.envoi-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;padding:20px}
.envoi-carte b{display:block;font-family:"Bricolage Grotesque",sans-serif;color:var(--encre);font-size:1.05rem;margin-bottom:8px}
.envoi-carte span{display:block;font-size:.92rem;color:var(--texte-doux);margin-bottom:10px}
.envoi-carte code{display:block;background:var(--papier);border:1px solid var(--ligne);border-radius:8px;padding:8px 10px;font-size:.9rem;color:var(--marine);word-break:break-all}
.carte-cadre{position:relative}
.carte-repli{position:absolute;inset:0;background:var(--papier);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px}
.carte-repli b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;color:var(--encre)}
.carte-repli span{color:var(--texte-doux);font-size:.95rem;max-width:44ch}
@media (max-width:640px){.envoi-guide{grid-template-columns:1fr}}

.carte-outil{border:1px solid var(--ligne);border-radius:18px;overflow:hidden;background:var(--blanc);box-shadow:var(--ombre)}
.carte-outil iframe{display:block;width:100%;height:640px;border:0}
@media (max-width:720px){.carte-outil iframe{height:520px}}

.couches-legende{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.couches-legende>div{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.couches-legende b{color:var(--encre);font-size:.98rem}
.couches-legende>div>span:last-child{font-size:.85rem;color:var(--texte-doux);line-height:1.4}
.couches-legende .pastille{width:12px;height:12px;border-radius:4px;margin-bottom:4px}

.carte-attente{padding:26px;text-align:center;color:var(--texte-doux);font-size:.95rem}

/* ============================================================
   RESPONSIVE — tablette et téléphone
   ============================================================ */

/* --- Tablette (jusqu'à 1024px) --- */
@media (max-width:1024px){
  .conteneur{padding:0 20px}
  .section{padding:56px 0}
  .heros__int{padding-top:64px;padding-bottom:72px}
  .chiffres{padding:34px 26px}
  .appel{padding:34px 28px}
  .carte-identite{gap:18px;padding:18px 24px}
  .carte-identite img{height:70px}
}

/* --- Le menu passe en burger plus tôt (évite l'écrasement en tablette) --- */
@media (max-width:900px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--blanc);border-bottom:1px solid var(--ligne);
    flex-direction:column;align-items:stretch;padding:14px 20px 22px;gap:2px;
    max-height:calc(100vh - 78px);overflow-y:auto;box-shadow:var(--ombre);
  }
  .nav.ouvert{display:flex}
  /* Le sous-menu reste ferme tant qu'on n'a pas touche « Nous connaitre » :
     sinon le menu s'ouvre deja deroule et parait interminable. */
  .nav__menu{position:static;display:none;box-shadow:none;border:0;padding:2px 0 6px 16px}
  .nav__groupe.ouvert .nav__menu{display:block}
  .nav__groupe>button{width:100%;justify-content:space-between}
  .entete .btn{margin-top:10px;justify-content:center}
  .entete__barre{position:relative}
}

/* --- Grilles de chiffres : le style en dur est neutralisé --- */
@media (max-width:900px){
  .chiffres .grille,
  .chiffres .grille--3{grid-template-columns:repeat(2,1fr)!important;gap:26px}
  .stats-pole--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .chiffres .grille,
  .chiffres .grille--3{grid-template-columns:1fr!important;gap:22px}
  .stats-pole,.stats-pole--4{grid-template-columns:1fr!important;gap:22px}
  .chiffre b,.stats-pole b{font-size:2.4rem}
}

/* --- Téléphone --- */
@media (max-width:640px){
  body{font-size:1rem}
  .conteneur{padding:0 16px}
  .section{padding:44px 0}
  h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  h2{font-size:clamp(1.3rem,5.5vw,1.7rem)}
  .heros__int{padding-top:44px;padding-bottom:54px}
  .heros__cta{flex-direction:column;gap:10px}
  .heros__cta .btn{width:100%;justify-content:center}
  .btn{padding:13px 18px;font-size:.97rem}

  /* Zones tactiles confortables */
  .nav a,.nav__groupe>button{padding:13px}
  .case{padding:11px 10px}
  .case input{width:20px;height:20px}
  .radios label{padding:6px 0}
  .radios input{width:20px;height:20px}

  /* Formulaires : une colonne, et pas de zoom iOS (16px minimum) */
  .champ--ligne{grid-template-columns:1fr!important;gap:0}
  input[type=text],input[type=email],input[type=tel],input[type=date],
  input[type=time],input[type=number],select,textarea{font-size:16px;padding:13px 14px}
  fieldset{padding:14px 14px}
  legend{font-size:.95rem}

  /* Récapitulatif et cartes */
  .recap dl{grid-template-columns:1fr;gap:2px 0}
  .recap dt{margin-top:8px}
  .appel{padding:26px 20px;text-align:left}
  .appel .btn{width:100%;justify-content:center}
  .chiffres{padding:28px 20px;border-radius:20px}
  .carte{padding:22px}

  /* Tableau du cercle de soins : défilement horizontal maîtrisé */
  .tableau-pros{min-width:520px}
  .famo-nav{flex-direction:column-reverse;gap:10px}
  .famo-nav .btn{width:100%;justify-content:center}
  .famo-progression span{min-width:0}

  /* Pied de page */
  .pied__haut{gap:26px;padding:40px 0 30px}
  .pied__bas{flex-direction:column;gap:10px}
  .pied__bas a{margin-left:0;margin-right:16px}
  .pied__logos{gap:10px}
}

/* --- Carte du territoire --- */
.carte-outil iframe{height:min(70vh,640px)}
@media (max-width:640px){
  .carte-outil iframe{height:min(78vh,560px)}
  .couches-legende{grid-template-columns:1fr}
}

/* --- Images et médias jamais débordants --- */
img,iframe,video,table{max-width:100%}

/* --- Carte du territoire : large sur ordinateur, sans manger toute la page --- */
/* La carte a besoin de largeur, mais le texte doit rester aligne sur le reste
   du site (conteneur a 1100px). On garde donc le conteneur standard et c'est
   la carte seule qui s'elargit, centree sur la page. */
.section--carte .conteneur{max-width:1100px}
.section--carte .carte-outil{
  width:min(1340px, calc(100vw - 56px));
  margin-left:50%;transform:translateX(-50%);
}
@media (max-width:1180px){
  .section--carte .carte-outil{width:auto;margin-left:0;transform:none}
}
.carte-outil iframe{height:clamp(460px,72vh,760px)}
@media (max-width:1024px){.carte-outil iframe{height:clamp(440px,66vh,620px)}}
@media (max-width:640px){.carte-outil iframe{height:clamp(380px,72vh,520px)}}

.alerte-non-informee{margin-top:14px;background:#fdeaea;border:1px solid #f3b6b6;
  border-left:5px solid #d92d2d;border-radius:12px;padding:14px 16px;color:#8f1d1d}
.alerte-non-informee strong{color:#a31616}
.alerte-non-informee p{margin-top:8px;font-size:.93rem;line-height:1.55}
.alerte-non-informee a{color:#a31616}

.recap{position:relative}
.recap h4{padding-right:96px}
.recap__modifier{position:absolute;top:16px;right:16px;background:var(--blanc);
  border:1.5px solid var(--ligne);border-radius:999px;padding:6px 14px;font:inherit;
  font-size:.83rem;font-weight:700;color:var(--marine);cursor:pointer;transition:all .15s}
.recap__modifier:hover{background:var(--marine);border-color:var(--marine);color:#fff}

.fin-contacts{margin-top:28px;text-align:left;max-width:640px;margin-left:auto;margin-right:auto}
.fin-contacts>p{text-align:center;font-size:.95rem;color:var(--texte-doux);margin-bottom:14px}
.fin-contacts__grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fin-contacts__grille>div{background:var(--blanc);border:1px solid var(--ligne);
  border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.fin-contacts b{color:var(--encre);font-size:1rem}
.fin-contacts span{font-size:.85rem;color:var(--texte-doux)}
.fin-contacts a{color:var(--marine);text-decoration:none;font-weight:600;font-size:.93rem;word-break:break-all}
.fin-contacts a:hover{text-decoration:underline}
@media (max-width:640px){.fin-contacts__grille{grid-template-columns:1fr}}

/* --- Cartes d'identité (DAC, CLIC, structure évaluatrice) --- */
.identites{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:30px}
.carte-identite__embleme{display:flex;align-items:center;justify-content:center;
  width:auto;min-width:118px;flex:0 0 auto}
.carte-identite__embleme img{height:104px;width:auto;max-width:210px;object-fit:contain}
.carte-identite__embleme svg{display:none;width:56px;height:22px}
.carte-identite__embleme.sans-logo svg{display:block}
/* Le logo DAC est pose directement dans la carte (sans .carte-identite__embleme) :
   on lui applique explicitement le meme calibrage que les deux autres. */
.carte-identite--dac>img{height:104px;width:auto;max-width:210px;object-fit:contain;flex:none}
.carte-identite--clic{border-color:#f4d0b8}
.carte-identite--se{border-color:#d6e7b8}
.banniere .carte-identite{margin:22px 0 0;box-shadow:none;background:var(--papier)}
@media (max-width:720px){
  .carte-identite__embleme{width:auto;min-width:0}
  .carte-identite__embleme img{height:78px;max-width:200px}
  .carte-identite--dac>img{height:78px;max-width:200px}
}

/* --- Structure évaluatrice : bleu clair et jaune (nouvelle identité) --- */
.banniere--se{box-shadow:inset 0 -6px 0 var(--se)}
.missions--se li::before{background:var(--se)}
.stats-pole--se{background:var(--marine)}
.stats-pole--se > div:nth-child(3n+1) b{color:#9ecbf0}
.stats-pole--se > div:nth-child(3n+2) b{color:var(--se-jaune)}
.stats-pole--se > div:nth-child(3n+3) b{color:#c9e3f7}

/* Chiffres Santelien : fond blanc et couleurs reprises du logo Santelien
   (bleu, jaune, vert). Le fond marine general est pose en !important,
   il faut donc le neutraliser de la meme facon. */
.stats-pole--santelien{
  background:var(--blanc)!important;color:var(--encre);
  border:1px solid var(--ligne);box-shadow:var(--ombre);
}
.stats-pole--santelien > div:nth-child(3n+1) b{color:#3981c2}
.stats-pole--santelien > div:nth-child(3n+2) b{color:#c8860f}
.stats-pole--santelien > div:nth-child(3n+3) b{color:#46898e}
.stats-pole--santelien span{color:var(--texte-doux);opacity:1}
.pastille--se{background:var(--se)}
.carte--se .lien-suite{color:var(--se-fonce)}
.carte-identite--se{border-color:#bcd9ef}
.tag--se{color:var(--se-fonce)}

.recap__champ{width:100%;font:inherit;font-size:.95rem;color:var(--encre);
  background:var(--papier);border:1.5px solid var(--ligne);border-radius:9px;padding:7px 10px;
  transition:border-color .15s,background .15s}
.recap__champ:hover{border-color:#bcc2d8}
.recap__champ:focus{outline:none;border-color:var(--teal);background:var(--blanc);
  box-shadow:0 0 0 3px rgba(20,178,162,.16)}
.recap__champ.modifie{border-color:var(--teal);background:var(--blanc)}
.recap dl{grid-template-columns:230px 1fr;align-items:center;gap:9px 14px}
.recap dt{padding-top:0}
.recap textarea.recap__champ{resize:vertical;min-height:62px}
@media (max-width:640px){.recap dl{grid-template-columns:1fr;gap:2px 0}
  .recap dd{margin-bottom:10px}}
/* ================================================================
   CONFORT SUR PETITS ECRANS ET TABLETTES
   ================================================================ */

/* --- Cibles tactiles ---
   Sur ecran tactile, les liens telephone et courriel places au fil du texte
   ne mesuraient que 18 a 21 px de haut. Le padding vertical d'un element EN
   LIGNE agrandit la zone cliquable sans modifier l'interlignage. */
@media (max-width:900px){
  /* Tous les liens au fil du texte, pas seulement telephone et courriel. */
  p a:not(.btn),li a:not(.btn),.case a,.aide a{padding-top:9px;padding-bottom:9px}
  .communes a,.fil a,.pied a{padding-top:0;padding-bottom:0}
  /* Une adresse longue ne doit jamais depasser de son bloc. */
  a[href^="mailto:"]{overflow-wrap:anywhere}
  /* Cases a cocher et boutons radio : 17 px, c'est trop peu au doigt. */
  .case input,.radios input{width:22px;height:22px}
  .case{padding:11px 10px}
  .radios{gap:14px 22px}
  .radios label{min-height:34px}
}

/* --- Tablette : on garde deux colonnes tant que c'est lisible --- */
@media (min-width:641px) and (max-width:900px){
  .conteneur{padding:0 28px}
  .equipe{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* --- Telephone --- */
@media (max-width:640px){
  /* Les boutons d'un groupe passent pleine largeur : plus faciles a viser
     et alignes les uns sous les autres. */
  .heros__cta{flex-direction:column;align-items:stretch;gap:10px}
  .heros__cta .btn{width:100%;justify-content:center;text-align:center}
  .bloc-contact__actions .btn,.appel .btn{width:100%;justify-content:center}
  /* Cartes de dispositifs : moins de hauteur perdue. */
  .dispositifs .carte-identite{padding:14px 16px;gap:10px}
  .dispositifs .carte-identite b{font-size:1.05rem}
  .dispositifs .carte-identite>div>span{font-size:.9rem}
  /* Le titre manuscrit reste sous le h1 dans la hierarchie. */
  .titre-manuscrit{font-size:1.68rem}
  /* Listes de communes : une colonne, et des lignes bien separees. */
  .communes{columns:1}
  .communes li{padding:8px 0}
}

/* --- Utilitaires d'affichage selon la taille d'ecran ---
   « sur-telephone » n'apparait qu'en dessous de 640 px, « sur-grand-ecran »
   uniquement au-dessus. On s'en sert pour retirer du telephone ce qui fait
   doublon avec une autre page (listes de communes) ou ce qui alourdit
   inutilement la lecture. */
.sur-telephone{display:none}
@media (max-width:640px){
  .sur-telephone{display:block}
  span.sur-telephone{display:inline}
  .sur-grand-ecran{display:none!important}

  .note-repli{
    background:var(--papier);border:1px solid var(--ligne);border-radius:12px;
    padding:12px 14px;font-size:.92rem;line-height:1.55;
  }

  /* Notes de bas de bloc et mentions de source : repliees en plus discret. */
  .note-demo{font-size:.76rem;line-height:1.45}

  /* Frise chronologique : lignes plus serrees. */
  .frise li{margin-bottom:18px}

  /* Cartes de structures et de projets : un peu moins hautes. */
  .structure{padding:14px 16px}
  .structure span{font-size:.9rem}

  /* Encadres explicatifs : moins de rembourrage. */
  .encadre{padding:16px 18px}
  .etapes-dac{gap:8px}
}

/* --- Tres petits ecrans (iPhone SE et assimiles) --- */
@media (max-width:400px){
  .conteneur{padding:0 18px}
  .heros__cta .btn,.appel .btn{font-size:.95rem;padding:13px 16px}
  .heros__accroche{padding:14px 16px;font-size:.97rem}
  .section{padding:44px 0}
  .carte,.encadre,.bloc-contact,.carte-santelien{padding:18px 16px}
  .appel{padding:24px 18px}
  .chiffres{padding:30px 20px}
  .dispositifs .carte-identite img{height:56px}
  .frise li{padding-left:36px}
  .fil{font-size:.82rem}
}

/* ================================================================
   JUSTIFICATION DU TEXTE
   Les paragraphes de contenu sont justifies, avec cesure automatique
   pour eviter les « rivieres » de blanc dans les colonnes etroites.
   Sont volontairement EXCLUS : les titres, les libelles de formulaire,
   les chiffres, les boutons, les listes de communes et tout ce qui est
   centre — la justification y serait contre-productive.
   ================================================================ */
.section p,
.banniere .chapeau,
.encadre li,.missions li,.frise li,.etapes-dac li,
.carte p,.structure span,.bloc-contact p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}
/* Paragraphes explicitement non justifies (alignes a gauche). */
.section p.non-justifie{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* Exceptions : rien de tout cela ne se justifie. */
/* Le hero est centre par « .heros__int{text-align:center} » : on ne force
   surtout pas « left » ici, on se contente de neutraliser la justification. */
.heros p,p.heros__accroche,p.heros__note,.section__tete--centre p{
  text-align:center;hyphens:manual;-webkit-hyphens:manual;
}
.chiffre span,.stats-pole span,p.note-demo,.note-demo,
.appel p,p.appel__note,.appel__note,p.destinataire,p.alerte-secteur,
p.aide,.aide,.avert,div.avert,.fil,.pied p,.pied span,.pied li,
.communes li,.recap dd,.recap dt,
.famo-etape p,.envoi-carte span,.carte-outil span,
.acces__carte p,.carte-santelien p,.membre span,
.infobulle__bulle,.dac-fiches p,.couches-legende span{
  text-align:left;
  hyphens:manual;
  -webkit-hyphens:manual;
}
/* Sur telephone, une colonne etroite justifiee devient illisible. */
@media (max-width:640px){
  .section p,.banniere .chapeau,
  .encadre li,.missions li,.frise li,.etapes-dac li,
  .carte p,.structure span,.bloc-contact p{
    text-align:left;hyphens:manual;-webkit-hyphens:manual;
  }
}

/* ================================================================
   TELEPHONE — mise en page repensee (rien ne change au-dessus de 640px)
   ================================================================ */
@media (max-width:640px){

  /* --- Respiration generale : moins de vide vertical --- */
  .section{padding:52px 0}
  .banniere{padding:34px 0 40px}
  /* Le chapeau collait au titre. */
  .banniere p.chapeau{margin-top:16px;font-size:1rem;line-height:1.62}
  .banniere .carte-identite{margin-top:20px}
  .fil{margin-bottom:12px}
  .mt-40{margin-top:34px}
  .mt-24{margin-top:20px}
  /* Les deux colonnes d'une grille ne doivent pas se toucher une fois empilees. */
  .grille{gap:44px}
  .grille--2,.grille--3,.grille--contact{gap:44px}
  /* Territoire et actualite ont besoin d'une vraie separation visuelle. */
  #page-index .grille--2>div+div{padding-top:26px;border-top:1px solid var(--ligne)}
  h2{margin-top:4px}
  /* Ecart net entre les titres et le corps de texte : sans cela tout se
     ressemble et la page devient illisible. */
  h1{font-size:1.95rem;line-height:1.18;letter-spacing:-.02em}
  h2{font-size:1.5rem;line-height:1.22;letter-spacing:-.01em}
  h3{font-size:1.18rem;line-height:1.3}
  .section p,.carte p,.encadre li,.missions li,.frise li,.etapes-dac li{font-size:.94rem}
  .surtitre{font-size:.78rem}   /* 12,5px : en dessous, le surtitre devient illisible */
  /* Un mot trop long ne doit jamais depasser de son titre. */
  h1,h2,h3,h4,.poste b,.structure b{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}

  /* Sur une colonne aussi etroite, la justification cree des espaces
     irreguliers : on revient a un alignement a gauche, avec cesure. */
  .section p,.banniere .chapeau,.encadre li,.missions li,.frise li,.etapes-dac li,
  .carte p,.bloc-contact p{
    text-align:left;hyphens:auto;-webkit-hyphens:auto;
  }
  .section p.non-justifie,.heros p,p.heros__accroche,p.heros__note{text-align:center}
  .section .famo-succes p{text-align:center}

  /* --- Hero : moins imposant, et il ne colle plus a l'en-tete --- */
  .heros__int{padding-top:26px;padding-bottom:40px}
  .heros h1{font-size:1.95rem;max-width:none}
  .heros__accroche{
    margin-top:16px;padding:15px 16px;font-size:.95rem;line-height:1.6;
    border-radius:14px;
  }
  /* La ligne « Ou par telephone » etait plus grosse que les boutons. */
  p.heros__note{font-size:.92rem;margin-top:16px;line-height:1.6}
  .heros__cta{margin-top:34px}
  .arche svg{width:38px}

  /* --- Cartes de dispositifs : plus de hauteurs egales, donc plus de vide --- */
  .dispositifs{margin-top:34px}
  .dispositifs .identites{grid-auto-rows:auto;gap:10px}
  .dispositifs .carte-identite{flex-direction:column;text-align:center;padding:16px 16px 14px}
  .dispositifs .carte-identite img{height:52px}
  .dispositifs .carte-identite__sep{display:none}
  .dispositifs .carte-identite b{font-size:1rem}
  .dispositifs .carte-identite>div>span{font-size:.88rem;line-height:1.5}
  /* Les fleches prennent de la place pour rien sur un petit ecran. */
  .carte-identite--lien::after{display:none}
  .appel__fleche{display:none}
  .structure--lien::after{margin-top:4px}

  /* --- Chiffres : centres --- */
  .chiffres,.stats-pole{padding:26px 18px;gap:22px}
  .chiffre,.stats-pole>div{text-align:center}
  .chiffre b,.stats-pole b{font-size:2.3rem}
  .chiffre span,.stats-pole span{font-size:.9rem}

  /* --- Encadres et listes : moins de rembourrage --- */
  .encadre{padding:15px 16px}
  .encadre>b{font-size:1rem}
  .encadre li,.etapes-dac li{font-size:.92rem;line-height:1.5}
  .etapes-dac{gap:9px;padding-left:19px}
  .missions li{font-size:.94rem;line-height:1.55}
  /* Encadres d'appel : format compact, avec une phrase courte a la place du
     paragraphe complet. Sans texte du tout ils faisaient des paves vides. */
  .appel{padding:20px 18px;gap:10px;align-items:stretch}
  .appel h2{font-size:1.12rem;line-height:1.28}
  .appel p{font-size:.9rem;line-height:1.5}
  #page-index .appel>div>p:not(.appel__court){display:none}
  #page-index .appel .appel__court{display:block;opacity:.92}
  .appel .btn{width:100%;justify-content:center;padding:12px 18px;font-size:.95rem}

  /* --- Fiches de poste et structures : titre visible, detail au tap --- */
  .postes{gap:10px;grid-template-columns:1fr}
  .poste{padding:13px 15px}
  .poste b{font-size:.98rem}
  .poste p{font-size:.9rem;line-height:1.5}
  .poste::after{top:11px;right:13px;width:22px;height:22px;font-size:.95rem;line-height:20px}

  .structures{gap:10px}
  .structure{padding:13px 15px;cursor:pointer;position:relative}
  .structure span{font-size:.88rem;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .structure.deplie span{-webkit-line-clamp:unset;overflow:visible}
  .structure--plus span,.structure--lien span{-webkit-line-clamp:unset;overflow:visible}

  /* --- Equipes et cartes : textes un peu plus compacts --- */
  .carte{padding:17px 17px}
  .carte p{font-size:.93rem;line-height:1.55}
  .membre span:last-child{font-size:.88rem}

  /* --- Frise --- */
  .frise li{margin-bottom:16px;font-size:.93rem}
  .frise li b{font-size:.98rem}

  /* --- Pied de page : de 1008 px a un format raisonnable --- */
  .pied{padding:34px 0 20px}
  .pied__haut{gap:22px}
  .pied__logo{height:48px;margin-bottom:10px}
  .pied h4{font-size:.84rem;margin-bottom:7px}
  .pied ul{gap:5px}
  .pied li,.pied p{font-size:.88rem;line-height:1.45}
  /* Les listes de liens passent sur deux colonnes : deux fois moins haut.
     Le bloc des logos partenaires, lui, occupe toute la largeur. */
  .pied__haut>div:nth-child(2) ul,.pied__haut>div:nth-child(3) ul{
    display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
  }
  .pied__partenaires{grid-column:1 / -1;margin-top:6px}
  .pied__social{grid-column:1 / -1}
  .pied__social{gap:7px;margin-top:8px}
  .btn--li{padding:7px 12px 7px 9px;font-size:.84rem;width:auto}
  .btn--li img{width:17px;height:17px}
  .pied__partenaires{gap:10px;flex-wrap:wrap}
  .pied__partenaires img{height:38px;padding:5px 8px}
  .pied__partenaires span{flex:1 0 100%;font-size:.82rem;line-height:1.45}
  .pied__bas{gap:8px;font-size:.82rem;padding-top:14px}

  /* --- Carte du territoire : un peu moins haute --- */
  .section--carte .carte-outil{padding:12px}
  .couches-legende--ligne{gap:10px}
  .couches-legende--ligne>div{padding:12px 13px}

  /* --- FAMO --- */
  .famo-succes{padding:34px 12px}
  .famo-succes .rond{width:58px;height:58px;font-size:1.6rem;margin-bottom:14px}
  .recap{padding:16px}
  .recap h4{font-size:1rem}
  .envoi-guide{gap:12px}
  .envoi-carte{padding:15px}
}

/* Sur iOS, un champ dont la police fait moins de 16px declenche un zoom
   automatique de la page des qu'on le touche — et il est ensuite penible d'en
   sortir. On force donc 16px sur tous les champs des petits ecrans. */
@media (max-width:820px){
  input[type=text],input[type=email],input[type=tel],input[type=date],
  input[type=number],input[type=search],select,textarea{font-size:16px}
}

/* Menu ouvert : on empeche le defilement de la page. ATTENTION, il ne faut
   SURTOUT PAS utiliser « overflow:hidden » sur <html> : cela casse le
   « position:sticky » de l'en-tete, qui repart alors en haut du document — et
   le menu devient invisible quand on l'ouvre en bas de page. Le blocage est
   donc fait en JavaScript, sur les evenements de defilement. */
body.menu-ouvert{overscroll-behavior:contain}

/* ======================================================================
   V60 — 1. EQUIPES : lecture directe sur ordinateur
   ----------------------------------------------------------------------
   Le depliage au « + » etait concu pour tenir les 4 fiches sur une ligne.
   Sur ordinateur la place ne manque pas : on affiche le texte en entier,
   on retire le « + » et on force la meme hauteur pour toutes les fiches
   d'une ligne (align-items:stretch) — c'est le decalage entre une fiche
   depliee et ses voisines repliees qui faisait brouillon.
   Le depliage reste actif sur telephone, ou il est utile.
   ====================================================================== */
@media (min-width:721px){
  .postes{align-items:stretch}
  .poste{cursor:default}
  .poste p{display:block;-webkit-line-clamp:unset;overflow:visible}
  .poste::after{display:none}
  .poste b{padding-right:0;margin-bottom:9px}
  .poste:hover{transform:none;box-shadow:0 4px 14px rgba(38,45,136,.06)}
}

/* ======================================================================
   V60 — 2. RESPIRATION
   ----------------------------------------------------------------------
   Le reset « *{margin:0} » colle les titres a leur paragraphe et les
   blocs entre eux. On redonne de l'air, sans toucher aux utilitaires
   generiques (.mt-40 / .mt-24 servent partout) : on qualifie chaque
   regle par le type de bloc concerne.
   ====================================================================== */

/* --- Rupture entre deux grands blocs d'une meme page (« Comment ca se
       passe ? », « Ce que le plan d'aide OSCAR peut contenir »,
       « Le formulaire de demande », « L'equipe »…). --- */
h2.mt-40,h3.mt-40{margin-top:64px}

/* --- Blocs autonomes qui se suivent (encadres colores, chiffres,
       avertissements, bloc de contact). --- */
.appel.mt-40,.avert.mt-40,.bloc-contact.mt-40,
.stats-pole.mt-40,.postes.mt-40,.cerfa.mt-40{margin-top:56px}

/* --- Un titre et le bloc qu'il introduit : un cran au-dessus de 24px. --- */
.encadre.mt-24,.missions.mt-24,.postes.mt-24,
.cerfa.mt-24,.stats-pole.mt-24{margin-top:30px}

/* --- Interieur des encadres colores : le titre ne touche plus le texte. --- */
.appel h2{margin-bottom:14px}
.appel h3{margin-bottom:12px}
.appel p+p{margin-top:1em}

/* --- Listes et etapes : un peu plus d'air entre les puces. --- */
.missions{gap:18px}
.etapes-dac{gap:14px}
.encadre{padding:24px 26px}

/* --- Note sous les chiffres : elle appartient aux chiffres, pas au bloc
       suivant ; on la rapproche du haut et on laisse le h2 suivant
       creuser l'ecart. --- */
.note-demo{margin-top:12px}

/* --- Fiches d'equipe : un peu plus genereuses maintenant qu'elles
       affichent tout leur texte. --- */
.postes{gap:18px}
.poste{padding:18px 20px}
/* La justification (« .section p{text-align:justify} ») est faite pour des
   lignes longues. Dans une colonne de 150 px elle creuse des rivieres
   blanches enormes : on l'annule dans les colonnes etroites. */
.poste p,.cerfa__txt p{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* --- Telephone : on garde des ecarts plus serres, l'ecran est etroit. --- */
@media (max-width:720px){
  h2.mt-40,h3.mt-40{margin-top:44px}
  .appel.mt-40,.avert.mt-40,.bloc-contact.mt-40,
  .stats-pole.mt-40,.postes.mt-40,.cerfa.mt-40{margin-top:38px}
  .encadre.mt-24,.missions.mt-24,.postes.mt-24,
  .cerfa.mt-24,.stats-pole.mt-24{margin-top:24px}
  .missions{gap:14px}
  .encadre{padding:20px 22px}
}