/* ==========================================================================
   FEMDH — Design system « La fenêtre » (piste A)
   Fichier de référence : chaque valeur sera reprise dans le theme.json du
   thème WordPress (couleurs, typos, espacements) et dans les blocs.
   Contrastes vérifiés WCAG 2.2 AA (voir design-system.html).
   ========================================================================== */

:root {
  /* --- Couleurs de base --- */
  --creme: #FBF4EC;          /* fond principal */
  --blanc: #FFFFFF;          /* surfaces (cartes, champs) */
  --sable: #F3E6D8;          /* fond alterné de section */
  --nuit: #2B2C4F;           /* texte, boutons principaux — 12,2:1 sur crème */
  --nuit-survol: #3D3E6B;
  --encre-douce: #5A5B7A;    /* texte secondaire — 6,0:1 sur crème */
  --brique: #B4503A;         /* accent, CTA « soutenir » — 5,1:1 avec blanc */
  --brique-fonce: #9A4330;   /* liens, survol accent — 6,0:1 sur crème */
  --surtitre: #6E3628;
  --bordure: #E3D6C8;
  --bordure-forte: #2B2C4F;

  /* --- Couleurs de l'illustration (aplats, jamais sous du texte clair) --- */
  --peche: #F2C6A0;
  --lavande: #C8BCE6;
  --sauge: #6F9A7A;
  --or: #F2B65A;

  /* --- Couleurs des profils, reprises du logo et adoucies --- */
  --parent: #D9577E;      --parent-clair: #FCE3EA;       /* rose du logo */
  --enseignant: #1F5FA8;  --enseignant-clair: #E1ECF8;   /* bleu du logo */
  --association: #3E8E4E; --association-clair: #E3F1E6;  /* vert du logo */
  --partenaire: #B07A00;  --partenaire-clair: #FDF0CF;   /* jaune du logo */

  /* --- États --- */
  --erreur: #B42318;  --erreur-clair: #FDECEA;
  --succes: #1F6B3A;  --succes-clair: #E6F4EA;
  --info: #2B2C4F;    --info-clair: #ECE7F7;
  --desactive: #8C8DA6;
  --focus: #B4503A;          /* anneau de focus sur fond clair */
  --focus-sombre: #F2B65A;   /* anneau de focus sur fond nuit */

  /* --- Typographie --- */
  --police-titre: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --police-texte: 'Nunito Sans', 'Segoe UI', sans-serif;
  --t-xs: 0.875rem;                          /* 14 px — mentions */
  --t-s: 1rem;                               /* 16 px — petits textes */
  --t-m: 1.125rem;                           /* 18 px — corps */
  --t-l: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);    /* 19 → 22 px — chapô */
  --t-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20 → 24 */
  --t-h3: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);    /* 24 → 30 */
  --t-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);  /* 30 → 44 */
  --t-h1: clamp(2.375rem, 1.5rem + 3.6vw, 4.875rem); /* 38 → 78 */
  --interligne: 1.6;
  --interligne-titre: 1.08;

  /* --- Espacements (base 4 px) --- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --marge-page: clamp(16px, 4vw, 64px);
  --section: clamp(56px, 8vw, 112px);
  --largeur-max: 1240px;
  --largeur-texte: 68ch;

  /* --- Formes --- */
  --r-s: 8px; --r-m: 14px; --r-l: 24px; --r-xl: 32px; --r-pilule: 999px;
  --ombre: 0 12px 32px rgba(43, 44, 79, 0.10);
  --ombre-survol: 0 16px 40px rgba(43, 44, 79, 0.16);
  --duree: 180ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--nuit); font-family: var(--police-texte); font-size: var(--t-m); line-height: var(--interligne); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 700; line-height: var(--interligne-titre); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--brique-fonce); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--nuit); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sur-sombre :focus-visible { outline-color: var(--focus-sombre); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: var(--e-4); top: -100px; z-index: 100; padding: var(--e-3) var(--e-4); background: var(--nuit); color: var(--blanc); border-radius: var(--r-s); font-weight: 700; }
.lien-evitement:focus { top: var(--e-4); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* ---------- Mise en page ---------- */
.conteneur { width: 100%; max-width: calc(var(--largeur-max) + 2 * var(--marge-page)); margin-inline: auto; padding-inline: var(--marge-page); }
.section { padding-block: var(--section); }
.section--sable { background: var(--sable); }
.section--nuit { background: var(--nuit); color: var(--creme); }
.grille { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pile { display: flex; flex-direction: column; gap: var(--e-4); }

/* ---------- En-tête de section ---------- */
.entete-section { display: flex; flex-direction: column; gap: var(--e-3); max-width: 760px; margin-bottom: var(--e-7); }
.entete-section--centre { margin-inline: auto; text-align: center; align-items: center; }
.surtitre { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--surtitre); }
.section--nuit .surtitre { color: var(--or); }
.chapo { font-size: var(--t-l); color: var(--encre-douce); }
.section--nuit .chapo { color: #D9D6EA; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5); border: 2px solid transparent; border-radius: var(--r-m); font: inherit; font-size: var(--t-s); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--duree), color var(--duree), border-color var(--duree), transform var(--duree); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn--principal { background: var(--nuit); color: var(--blanc); }
.btn--principal:hover { background: var(--nuit-survol); color: var(--blanc); }
.btn--secondaire { background: transparent; color: var(--nuit); border-color: var(--nuit); }
.btn--secondaire:hover { background: var(--nuit); color: var(--blanc); }
.btn--accent { background: var(--brique); color: var(--blanc); }
.btn--accent:hover { background: var(--brique-fonce); color: var(--blanc); }
.btn--clair { background: var(--creme); color: var(--nuit); }
.btn--clair:hover { background: var(--blanc); color: var(--nuit); }
.btn--grand { min-height: 56px; padding: 0 var(--e-6); font-size: 1.0625rem; }
.btn--petit { min-height: 40px; padding: 0 var(--e-4); font-size: var(--t-xs); }
.btn[disabled], .btn[aria-disabled="true"] { background: #E7E3EC; color: var(--desactive); border-color: transparent; cursor: not-allowed; transform: none; }
.lien-fleche { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; color: var(--nuit); text-decoration: none; }
.lien-fleche::after { content: "→"; transition: transform var(--duree); }
.lien-fleche:hover { color: var(--brique-fonce); }
.lien-fleche:hover::after { transform: translateX(4px); }
.section--nuit .lien-fleche, .bandeau .lien-fleche, .pied .lien-fleche { color: var(--creme); }
.section--nuit .lien-fleche:hover, .bandeau .lien-fleche:hover { color: var(--or); }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ label, .legende { font-weight: 700; font-size: var(--t-s); }
.champ .facultatif { font-weight: 400; color: var(--encre-douce); }
.saisie, .liste { width: 100%; min-height: 52px; padding: 0 var(--e-4); border: 2px solid var(--nuit); border-radius: var(--r-m); background: var(--blanc); color: var(--nuit); font: inherit; font-size: 1.0625rem; transition: box-shadow var(--duree); }
textarea.saisie { min-height: 140px; padding: var(--e-3) var(--e-4); resize: vertical; }
.liste { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2C4F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 48px; }
.saisie::placeholder { color: #7E7F99; }
.saisie:hover, .liste:hover { box-shadow: 0 0 0 4px rgba(43, 44, 79, 0.08); }
.saisie:focus-visible, .liste:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.saisie[aria-invalid="true"] { border-color: var(--erreur); }
.saisie:disabled { border-color: #CFCBD8; background: #F4F1F6; color: var(--desactive); cursor: not-allowed; }
.aide { font-size: var(--t-xs); color: var(--encre-douce); }
.message-champ { display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-xs); font-weight: 700; color: var(--erreur); }
.choix { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-s); cursor: pointer; }
.choix input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--nuit); flex-shrink: 0; }
fieldset.groupe { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.recherche { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: flex-end; }
.recherche .champ { flex: 1 1 260px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--e-1); padding: 3px var(--e-3); border-radius: var(--r-pilule); font-size: var(--t-xs); font-weight: 700; background: var(--info-clair); color: var(--nuit); }
.badge--parent { background: var(--parent-clair); }
.badge--enseignant { background: var(--enseignant-clair); }
.badge--association { background: var(--association-clair); }
.badge--partenaire { background: var(--partenaire-clair); }
.badge--contour { background: transparent; border: 1.5px solid var(--bordure); }
a.badge { min-height: 36px; padding-inline: var(--e-4); color: var(--nuit); text-decoration: none; transition: border-color var(--duree), background var(--duree); }
a.badge:hover { border-color: var(--nuit); background: var(--blanc); color: var(--nuit); }

/* ---------- Messages ---------- */
.message { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4) var(--e-5); border-radius: var(--r-m); background: var(--info-clair); font-size: var(--t-s); }
.message svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.message strong { display: block; }
.message--succes { background: var(--succes-clair); color: #15482A; }
.message--erreur { background: var(--erreur-clair); color: #7A1810; }

/* ---------- Cartes ---------- */
.carte { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border-radius: var(--r-l); background: var(--blanc); box-shadow: var(--ombre); transition: box-shadow var(--duree), transform var(--duree); }
.carte h3 { font-size: var(--t-h4); }
.carte--lien:hover { box-shadow: var(--ombre-survol); transform: translateY(-2px); }
.carte--lien h3 a { color: inherit; text-decoration: none; }
.carte--lien h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toute la carte est cliquable, un seul lien */
.carte--lien h3 a:focus-visible { outline: none; }
.carte--lien:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.carte .meta { font-size: var(--t-xs); color: var(--encre-douce); }
.carte .actions { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--e-2); position: relative; z-index: 1; }

/* Profil (« Vous êtes… ») */
.profil { box-shadow: none; padding: var(--e-5) var(--e-5) var(--e-6); }
.profil .pastille { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blanc); }
.profil .pastille svg { width: 28px; height: 28px; fill: none; stroke: var(--nuit); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profil--parent { background: var(--parent-clair); }
.profil--enseignant { background: var(--enseignant-clair); }
.profil--association { background: var(--association-clair); }
.profil--partenaire { background: var(--partenaire-clair); }
.profil p { color: #3E3F60; }

/* Association */
.carte-asso .lieu { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.carte-asso dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-3); margin: 0; font-size: var(--t-s); }
.carte-asso dt { color: var(--encre-douce); }
.carte-asso dd { margin: 0; }

/* Actualité */
.carte-actu { padding: 0; overflow: hidden; }
.carte-actu .visuel { aspect-ratio: 16 / 9; background: var(--sable); display: grid; place-items: center; color: var(--encre-douce); font-size: var(--t-xs); }
.carte-actu .corps { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); }

/* Ressource */
.carte-ressource { flex-direction: row; align-items: flex-start; gap: var(--e-4); }
.carte-ressource .icone-fichier { display: grid; place-items: center; width: 48px; height: 56px; border-radius: 10px; background: var(--info-clair); font-size: 12px; font-weight: 800; flex-shrink: 0; }

/* Témoignage */
.temoignage { margin: 0; padding: var(--e-6); border-radius: var(--r-l); background: var(--sable); display: flex; flex-direction: column; gap: var(--e-4); }
.temoignage blockquote { margin: 0; font-family: var(--police-titre); font-size: var(--t-h3); line-height: 1.25; text-wrap: pretty; }
.temoignage blockquote::before { content: "«\00a0"; color: var(--brique); } /* espaces insécables : la ponctuation ne part jamais seule à la ligne */
.temoignage blockquote::after { content: "\00a0»"; color: var(--brique); }
.temoignage figcaption { font-weight: 700; }
.temoignage figcaption span { display: block; font-weight: 400; color: var(--encre-douce); font-size: var(--t-s); }

/* ---------- Chiffres clés ---------- */
.chiffres { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; }
.chiffre { display: flex; flex-direction: column; gap: var(--e-1); padding-top: var(--e-4); border-top: 3px solid var(--or); }
.chiffre dd { margin: 0; order: -1; font-family: var(--police-titre); font-size: var(--t-h2); font-weight: 700; line-height: 1; }
.chiffre dt { font-weight: 700; }
.chiffre .source { font-size: var(--t-xs); color: var(--encre-douce); }
.section--nuit .chiffre .source { color: #B9B6D0; }

/* ---------- Étapes (« Comment ça marche ») ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: etape; }
.etape { counter-increment: etape; display: flex; flex-direction: column; gap: var(--e-3); }
.etape::before { content: counter(etape); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--nuit); color: var(--creme); font-family: var(--police-titre); font-size: 1.375rem; font-weight: 700; }
.etape h3 { font-size: var(--t-h4); }
.etape p { color: var(--encre-douce); font-size: var(--t-s); }

/* ---------- Accordéon (FAQ) : details/summary natifs, accessibles sans script ---------- */
.accordeon { border-top: 1.5px solid var(--bordure); }
.accordeon details { border-bottom: 1.5px solid var(--bordure); }
.accordeon summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-5) var(--e-1); font-weight: 700; font-size: var(--t-m); cursor: pointer; list-style: none; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: "+"; font-family: var(--police-titre); font-size: 1.75rem; line-height: 1; transition: transform var(--duree); }
.accordeon details[open] summary::after { transform: rotate(45deg); }
.accordeon .reponse { padding: 0 var(--e-1) var(--e-5); max-width: var(--largeur-texte); color: #3E3F60; }

/* ---------- Fil d'Ariane ---------- */
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; font-size: var(--t-xs); }
.fil-ariane li + li::before { content: "/"; margin-right: var(--e-2); color: var(--encre-douce); }
.fil-ariane a { color: var(--nuit); }
.fil-ariane [aria-current="page"] { color: var(--encre-douce); }

/* ---------- Bandeau d'appel (soutien) ---------- */
.bandeau { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); background: var(--nuit); color: var(--creme); }
.bandeau .chapo { color: #D9D6EA; }
.bandeau .actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: var(--creme); padding-block: var(--e-8) var(--e-6); font-size: var(--t-s); }
.pied a { color: var(--creme); text-decoration: none; }
.pied a:hover { text-decoration: underline; color: var(--blanc); }
.pied :focus-visible { outline-color: var(--focus-sombre); }
.pied .colonnes { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pied h2 { font-size: var(--t-s); font-family: var(--police-texte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--or); margin-bottom: var(--e-3); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
/* ---------- Marque : logo + nom en toutes lettres sur 3 lignes ---------- */
.marque { display: inline-flex; align-items: center; gap: 14px; color: #0061AF; text-decoration: none; }
.marque img { height: 72px; width: auto; flex-shrink: 0; }
.marque-nom { display: flex; flex-direction: column; justify-content: center; font-family: 'Comfortaa', var(--police-texte); font-weight: 700; font-size: 19px; line-height: 1.18; letter-spacing: -0.01em; color: #0061AF; flex-shrink: 0; }
.marque-nom span { white-space: nowrap; } /* bleu du logo : 5,9:1 sur crème */
.marque:hover { color: #0061AF; }
.marque picture { display: contents; }
@media (max-width: 760px) { .marque img { height: 48px; } .marque { gap: 10px; } .marque-nom { font-size: 12.5px; } }
.pied .marque--pied { align-self: flex-start; padding: var(--e-3) var(--e-5) var(--e-3) var(--e-3); border-radius: var(--r-l); background: var(--creme); }
.pied .marque--pied img { height: 60px; }
.pied .marque--pied .marque-nom { font-size: 16px; }
@media (min-width: 1000px) { .pied .colonnes { grid-template-columns: minmax(470px, 2fr) repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pied .marque--pied img { height: 50px; } .pied .marque--pied .marque-nom { font-size: 12.5px; } }
.pied .marque--pied:hover { text-decoration: none; }
.pied .ministere { display: inline-block; align-self: flex-start; padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--blanc); line-height: 0; }
.pied .ministere img { height: 64px; width: auto; }
.pied .bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid rgba(251, 244, 236, 0.2); font-size: var(--t-xs); color: #C9C6DE; }
.pied .bas ul { flex-direction: row; flex-wrap: wrap; gap: var(--e-4); }