/* Feuille du site institutionnel des Maisons d'Accueil Le Phare (refonte du 13/09/2026).
   Mêmes jetons que la branche Accueil de jour : une seule identité visuelle. */
:root{
  --accent:#E94E22; --accent-fonce:#C23E18; --fond:#FFFBF7; --fond-doux:#F7EDE4;
  --encre:#2B211C; --texte-2:#4A3D35; --texte-sombre-2:#CDBFB5;
  --accent-doux:#F2A38C; --label:#8A776A; --bord:#E7DAD0;
  --serif:'Cutive',Georgia,'Times New Roman',serif;
  --sans:'Karla',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--encre);background:var(--fond);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:pretty}
/* 🔴 « d'accompagnement » en Cutive 34 px dépasse 390 px de large : un mot trop long
   ne se coupe pas tout seul et fait défiler la page de côté. */
h1,h2,h3{overflow-wrap:break-word}
/* ⚠️ Césure limitée au h1 sur téléphone : partout ailleurs elle coupait les titres
   de cartes (« Accompagne-ment ») alors que la place suffisait. */
@media (max-width:640px){h1{hyphens:auto;-webkit-hyphens:auto}}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.12}
h2{font-size:clamp(26px,3.2vw,38px);line-height:1.2}
h3{font-size:22px;line-height:1.3}
a{color:inherit}
p a,li a{color:var(--accent-fonce)}
.eyebrow{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.lead{font-size:19px;line-height:1.6;color:var(--texte-2);max-width:60ch}
section{padding:7vh 6vw}
.etroit{max-width:820px}

/* Bandeau de chantier : le site n'est pas validé par l'association */
.chantier{background:var(--encre);color:var(--fond);padding:10px 6vw;font-size:14px;text-align:center;line-height:1.5}
.chantier b{color:var(--accent-doux)}

/* En-tête */
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;padding:18px 6vw;background:var(--fond);border-bottom:1px solid var(--bord)}
.marque{display:flex;align-items:center;text-decoration:none;min-height:44px}
/* 🔴 Logo non carré (753×200) : on fixe la HAUTEUR, jamais les deux. */
.logo{height:44px;width:auto;flex:none;display:block}
header nav{display:flex;gap:6px 26px;flex-wrap:wrap}
header nav a{font-size:16px;font-weight:500;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
header nav a:hover,header nav a[aria-current="page"]{color:var(--accent-fonce);text-decoration:underline;text-underline-offset:5px}

/* Boutons */
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;min-height:44px;border-radius:999px;padding:13px 30px;font-weight:700;text-decoration:none;transition:background .15s ease,color .15s ease}
.btn-plein{background:var(--accent);color:var(--fond);border:2px solid var(--accent)}
.btn-plein:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.btn-ligne{border:2px solid var(--encre);color:var(--encre)}
.btn-ligne:hover{background:var(--encre);color:var(--fond)}

/* Accueil */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center;padding:8vh 6vw}
.chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.chiffre{background:var(--fond-doux);border-radius:20px;padding:22px 24px}
.chiffre .n{font-family:var(--serif);font-size:clamp(34px,4vw,48px);color:var(--accent);line-height:1}
.chiffre .t{font-size:15px;color:var(--texte-2);margin-top:8px;line-height:1.4}
.branche{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:center;background:var(--fond-doux)}
.photo{border-radius:24px;width:100%;height:320px;object-fit:cover;display:block;background:var(--fond)}

/* Cartes */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:34px}
.carte{background:var(--fond);border:1px solid var(--bord);border-radius:20px;padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.fond-doux .carte{border-color:transparent}
.carte .label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--label)}
.carte p{color:var(--texte-2);font-size:16px}
.carte .lieux{font-size:15px;color:var(--encre);font-weight:500}
a.carte{text-decoration:none;transition:border-color .15s ease,transform .15s ease}
a.carte:hover{border-color:var(--accent)}
a.carte .suite{color:var(--accent-fonce);font-weight:700;font-size:15px;margin-top:auto}
.fond-doux{background:var(--fond-doux)}

/* PHARE */
.sombre{background:var(--encre);color:var(--fond)}
.sombre .eyebrow{color:var(--accent-doux)}
.phare{display:flex;flex-wrap:wrap;gap:18px 44px;margin-top:30px}
.phare div{display:flex;align-items:baseline;gap:4px;font-size:22px;font-weight:700}
.phare span{font-family:var(--serif);font-weight:400;font-size:52px;color:var(--accent);line-height:1}

/* Pages de contenu */
.entete-page{padding:7vh 6vw 4vh;border-bottom:1px solid var(--bord)}
.fil{font-size:14px;color:var(--label);margin-bottom:18px}
.fil a{color:var(--label)}
.contenu{padding:5vh 6vw 9vh}
.contenu h2{margin:48px 0 14px}
.contenu h2:first-child{margin-top:0}
.contenu p,.contenu li{color:var(--texte-2);margin-bottom:14px;max-width:68ch}
.contenu ul{margin:0 0 14px 22px}
blockquote{font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);line-height:1.45;color:var(--encre);border-left:4px solid var(--accent);padding:6px 0 6px 26px;margin:28px 0;max-width:40ch}
blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:14px;color:var(--label);margin-top:12px}

/* Frise */
.frise{list-style:none;margin:30px 0 0 !important;border-left:2px solid var(--bord);padding-left:0}
.frise li{position:relative;padding:0 0 30px 30px;margin:0 !important}
.frise li::before{content:"";position:absolute;left:-8px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--fond)}
.frise .date{display:block;font-family:var(--serif);font-size:24px;color:var(--encre);line-height:1.2;margin-bottom:4px}

/* Ce qui reste à confirmer par l'association */
.a-confirmer{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9a5b12;background:#fdecd9;border-radius:999px;padding:2px 10px;vertical-align:middle;white-space:nowrap}
.note{background:var(--fond-doux);border-radius:16px;padding:18px 22px;font-size:15px;color:var(--texte-2);max-width:68ch;margin:22px 0}

/* Implantations */
.lieu h3{margin-bottom:2px}
.puces{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0 !important}
.puces li{font-size:14px;font-weight:700;background:var(--fond-doux);color:var(--encre);border-radius:999px;padding:5px 13px;margin:0 !important}

/* Pied */
footer{background:var(--encre);color:var(--texte-sombre-2);padding:6vh 6vw 5vh;text-align:center}
/* « Le Phare » rend le logo 6 fois plus large que haut : à hauteur fixe de 52 px il
   dépassait des écrans de 320 px. On borne la LARGEUR et la hauteur suit (jamais les deux). */
footer .logo{height:auto;width:min(312px,100%);margin:0 auto 16px}
footer a{color:var(--accent-doux)}
footer a:hover{color:#fff}
footer nav{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:15px}
footer nav a{min-height:44px;display:inline-flex;align-items:center}
footer .fin{margin-top:18px;font-size:14px;opacity:.75;line-height:1.7}
footer .signature{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:20px;font-size:14px;opacity:.8;border-top:1px solid rgba(205,191,181,.2)}
footer .signature a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--texte-sombre-2);text-decoration:none}
footer .signature img{display:block;border-radius:5px}

@media (max-width:640px){
  header{padding:12px 5vw}
  header nav{gap:0 18px}
  h1{font-size:30px}
  .logo{height:38px}
  section,.contenu,.entete-page{padding-left:5vw;padding-right:5vw}
  .photo{height:240px}
  .phare span{font-size:42px}
}

/* ── Étape 3 : pages services ─────────────────────────────────────────────── */
/* 🔴 a.carte est en display:flex : sans cette règle, l'attribut hidden posé par
   le filtre ne masquerait rien. */
[hidden]{display:none !important}
.contenu h3{margin:26px 0 8px}
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.filtres .label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--label);margin-right:4px}
.filtres button{font-family:inherit;font-size:15px;font-weight:700;min-height:44px;padding:9px 20px;border-radius:999px;border:2px solid var(--bord);background:var(--fond);color:var(--encre);cursor:pointer}
.filtres button:hover{border-color:var(--accent)}
.filtres button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--fond)}
.deux-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center}
.legende{list-style:none;display:grid;gap:10px;color:var(--texte-2)}
.legende b{color:var(--encre)}
.petit{font-size:14px;color:var(--label);margin-top:16px}
.schema{width:100%;max-width:520px;height:auto;justify-self:center;background:var(--fond);border-radius:24px}
.schema .pt{fill:var(--accent);fill-opacity:.85;stroke:var(--fond);stroke-width:3}
.schema .nom{font-family:var(--sans);font-size:15px;font-weight:700;fill:var(--encre)}

/* ── Étape 4 : jeunes et familles, partenaires, recrutement ───────────────── */
.urgence{background:var(--encre);color:var(--fond);border-radius:24px;padding:26px 28px;margin:0 0 8px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;max-width:820px}
.urgence .num{font-family:var(--serif);font-size:clamp(52px,7vw,72px);line-height:1;color:var(--accent);grid-row:span 2}
.urgence b{font-size:19px}
.urgence p{color:var(--texte-sombre-2);font-size:16px;margin:0}
.urgence a{color:var(--accent-doux)}
.etapes{list-style:none;counter-reset:etape;margin:24px 0 0 !important;display:grid;gap:22px}
.etapes li{counter-increment:etape;position:relative;padding-left:62px;margin:0 !important}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--fond);font-family:var(--serif);font-size:22px;display:flex;align-items:center;justify-content:center}
.etapes h3{margin:4px 0 6px !important}
.ext::after{content:" ↗";font-size:.85em}
@media (max-width:640px){ .urgence{grid-template-columns:1fr} .urgence .num{grid-row:auto} }

/* 🔴 Correctifs du 13/09 (étape 4) :
   - .etapes est une grille : ses éléments ne rétrécissent pas sous la largeur de leur
     plus long mot (« l'accompagnement » en Cutive) sans min-width:0, et la page
     débordait à 320 px ;
   - dans une carte étroite, « Accompagnement » en Cutive 22 px ne tenait pas et se
     cassait sans tiret (« Accompagneme / nt ») : titre de carte ramené à 20 px. */
.etapes li{min-width:0}
.carte h3{font-size:20px}
@media (max-width:640px){ .etapes li{padding-left:54px} }

/* ── Étape 5 : menu repliable, contact, pages légales ─────────────────────── */
.menu-bouton{display:none;align-items:center;gap:10px;min-height:44px;padding:9px 18px;border:2px solid var(--encre);border-radius:999px;background:var(--fond);color:var(--encre);font:700 15px/1 var(--sans);cursor:pointer}
.menu-bouton svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
@media (max-width:640px){
  .js .menu-bouton{display:inline-flex}
  .js header nav{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--bord);padding-top:6px}
  .js header nav.ouvert{display:flex}
  .js header nav a{padding:12px 0;border-bottom:1px solid var(--bord)}
}
.lignes{list-style:none;margin:10px 0 0 !important;display:grid;gap:6px}
.lignes li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px;color:var(--texte-2);margin:0 !important;border-top:1px solid var(--bord);padding-top:8px}
.lignes a{color:var(--accent-fonce);font-weight:700;white-space:nowrap}
.plan{columns:2 260px;column-gap:40px}
.plan section{break-inside:avoid;padding:0 0 26px}
.plan h2{font-size:24px;margin:0 0 8px !important}
.plan ul{list-style:none;margin:0 !important}
.plan li{margin:0 0 6px !important}

/* Contrastes (étape 5) : l'orange #E94E22 sur #FFFBF7 ne donne que 3,7:1 et le gris
   #8A776A 4,1:1, sous le seuil de 4,5:1 pour du texte courant. L'orange reste pour
   les grands textes (chiffres, lettres PHARE), les petits textes passent au foncé. */
:root{--label:#6F6054}
.eyebrow{color:var(--accent-fonce)}
.sombre .eyebrow{color:var(--accent-doux)}
/* btn-plein (contraste) : texte clair sur #E94E22 = 3,7:1 pour 17 px gras, insuffisant.
   Fond #C23E18 = 5,1:1 ; survol encore plus foncé. */
.btn-plein{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.btn-plein:hover{background:#A33312;border-color:#A33312}