/* ÉSOPE ASBL — maquette page d'accueil
   Polices système uniquement (aucune police chargée depuis Google : pas de transfert d'IP, page plus rapide).
   Contrastes vérifiés WCAG AA : texte courant >= 4,5:1, grands titres >= 3:1. */

:root {
  --orange: #c2410c;        /* blanc sur orange : 5,2:1 */
  --orange-vif: #e8590c;    /* décoratif uniquement */
  --orange-texte: #9a3412;  /* orange foncé pour du texte sur fond clair : 7,1:1 */
  --encre: #1f1a17;
  --gris: #57504a;          /* 7,4:1 sur crème */
  --creme: #fff8f1;
  --creme-fonce: #fdeedd;
  --heros-fond: #fcebdc;    /* fond du bandeau d'accueil : nettement distinct du crème des sections */
  --prune: #3d1c2b;
  --blanc: #fff;
  --rayon: 14px;
  --ombre: 0 1px 2px rgb(61 28 43 / .06), 0 10px 30px rgb(61 28 43 / .08);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 1.0625rem/1.65 var(--police); color: var(--encre); background: var(--creme); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--orange-texte); text-underline-offset: .18em; }
a:hover { color: var(--orange); }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* Focus clavier : toujours visible, jamais supprimé */
:focus-visible { outline: 3px solid var(--orange-vif); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lien d'évitement (accessibilité clavier) */
.evitement { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--encre); color: var(--blanc);
  padding: .7rem 1rem; border-radius: 0 0 8px 8px; font-weight: 600; }
.evitement:focus { top: 0; color: var(--blanc); }

/* Bandeau d'annonce */
.annonce { background: var(--prune); color: #fde9dc; font-size: .95rem; text-align: center; }
.annonce p { margin: 0; padding: .55rem 1rem; }
.annonce a { color: #ffd8a8; font-weight: 600; margin-left: .4rem; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(61 28 43 / .08); }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.logo img { width: 150px; }
.navigation > ul { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.navigation a { display: block; padding: .5rem .8rem; border-radius: 8px; color: var(--encre); text-decoration: none; font-weight: 500; }
.navigation a:hover { background: var(--creme-fonce); color: var(--orange-texte); }
.navigation a[aria-current="page"] { color: var(--orange-texte); box-shadow: inset 0 -3px 0 var(--orange-vif); border-radius: 0; }
.bouton-menu { display: none; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.4rem;
  background: var(--orange); color: var(--blanc) !important; border: 2px solid var(--orange); border-radius: 999px;
  font-weight: 650; text-decoration: none; transition: transform .15s, background .15s; }
.bouton:hover { background: #9a3412; border-color: #9a3412; transform: translateY(-1px); }
.bouton-clair { background: transparent; border-color: currentColor; color: var(--blanc) !important; }
.bouton-clair:hover { background: rgb(255 255 255 / .14); border-color: var(--blanc); }
.navigation .bouton-petit { min-height: 40px; padding: .45rem 1.1rem; margin-left: .4rem; }
.navigation .bouton-petit:hover { background: #9a3412; color: var(--blanc); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Héros : clair, centré sur les formations (texte + mosaïque des formations) */
.heros { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60rem 30rem at 85% 10%, rgb(232 89 12 / .13), transparent 60%),
              radial-gradient(40rem 26rem at 0% 0%, rgb(255 255 255 / .55), transparent 70%), var(--heros-fond); }
.heros::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgb(61 28 43 / .12) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to right, transparent 35%, #000 75%); mask-image: linear-gradient(to right, transparent 35%, #000 75%); }
.heros-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.heros h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 780; color: var(--encre); letter-spacing: -.02em; }
.surtitre { text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; font-weight: 700; color: #ffd8a8; margin-bottom: .8rem; }
.surtitre-fonce { color: var(--orange-texte); }
.heros .surtitre { display: inline-flex; align-items: center; gap: .55rem; background: var(--blanc); padding: .4rem .9rem .4rem .5rem;
  border-radius: 999px; box-shadow: var(--ombre); letter-spacing: .08em; font-size: .78rem; }
.heros .surtitre::before { content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--orange) center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); }
.chapeau { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); max-width: 600px; }
.heros .chapeau { color: var(--gris); }
.atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; margin: 1.4rem 0 0; max-width: 620px; }
.atouts li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; line-height: 1.35; }
.atouts li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: .05rem; border-radius: 50%; background: #dcfce7 center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.bouton-contour { background: var(--blanc); border-color: var(--encre); color: var(--encre) !important; }
.bouton-contour:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc) !important; }

.heros-visuel { position: relative; }
.mosaique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mosaique li:nth-child(even) { transform: translateY(1.8rem); }
.mosaique a { display: block; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
  color: var(--encre); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.mosaique a:hover, .mosaique a:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(61 28 43 / .08), 0 18px 40px rgb(61 28 43 / .16); }
.mosaique img { width: 100%; aspect-ratio: 600 / 220; object-fit: cover; }
.mosaique span { display: block; padding: .55rem .8rem .7rem; font-weight: 650; font-size: .92rem; line-height: 1.3; }
.mosaique small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-texte); font-weight: 700; margin-bottom: .1rem; }
.pastille { position: absolute; top: -1.4rem; right: -.6rem; margin: 0; width: 104px; height: 104px; display: grid; place-items: center; text-align: center;
  padding: .6rem; border-radius: 50%; background: var(--orange); color: var(--blanc); font-weight: 800; font-size: 1.05rem; line-height: 1.1;
  box-shadow: 0 10px 25px rgb(194 65 12 / .35); transform: rotate(-10deg); border: 4px solid var(--blanc); }

/* Chiffres clés */
.chiffres { background: linear-gradient(var(--heros-fond) 0 50%, var(--creme) 50% 100%); }
.liste-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); position: relative;
  background: var(--blanc); border-radius: 18px; box-shadow: var(--ombre); border: 1px solid #f3e6da; }
.liste-chiffres li { padding: 1.3rem 1.5rem; }
.liste-chiffres li + li { border-left: 1px solid #f1e3d6; }
.liste-chiffres strong { display: block; font-family: var(--police-titre); font-size: 1.75rem; font-weight: 780; color: var(--orange-texte); line-height: 1.1; letter-spacing: -.01em; }
.liste-chiffres span { display: block; margin-top: .25rem; color: var(--gris); font-size: .95rem; line-height: 1.4; }

/* Sections */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-teintee { background: var(--creme-fonce); }
.section-blanche { background: var(--blanc); border-top: 1px solid #f3e6da; }
.section-blanche .carte { border: 1px solid #f1e3d6; }
.section-sombre { background: var(--prune); color: #fbe9e0; }
.section-sombre h2 { color: var(--blanc); }
.section-sombre a:not(.bouton) { color: #ffd8a8; }
.intro { max-width: 680px; color: var(--gris); font-size: 1.1rem; margin-bottom: 2.4rem; }

/* Cartes formations */
.grille-formations { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.carte { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s; position: relative; }
.carte:hover, .carte:focus-within { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(61 28 43 / .08), 0 18px 40px rgb(61 28 43 / .14); }
.carte img { aspect-ratio: 600 / 220; object-fit: cover; width: 100%; }
.carte-corps { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; }   /* toute la carte cliquable, un seul lien */
.carte h3 a:hover { color: var(--orange-texte); }
.carte p { color: var(--gris); }
.etiquette { display: inline-block; align-self: flex-start; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--orange-texte); background: var(--creme-fonce); padding: .2rem .65rem; border-radius: 999px; margin-bottom: .7rem; }
.infos { display: flex; gap: 1.5rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid #f1e3d6; font-size: .92rem; }
.infos dt { color: var(--gris); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.infos dd { margin: 0; font-weight: 650; }

/* Étapes d'inscription */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; position: relative; }
.etapes::before { content: ""; position: absolute; top: calc(1.6rem + 22px); left: 12%; right: 12%; border-top: 2px dashed #f0b98f; z-index: 0; }
.etapes li { background: var(--blanc); border-radius: var(--rayon); padding: 1.6rem; box-shadow: var(--ombre); position: relative; z-index: 1; }
.etape-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--blanc);
  font-weight: 750; font-size: 1.2rem; margin-bottom: 1rem; }
.etapes p { color: var(--gris); margin: 0; }
.encadre { margin: 2rem 0 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--orange); background: var(--blanc); border-radius: 0 var(--rayon) var(--rayon) 0; }

/* Deux colonnes */
.deux-colonnes { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.valeurs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.6rem; }
.valeurs li { padding: .35rem .9rem; border-radius: 999px; background: var(--creme-fonce); color: var(--orange-texte); font-weight: 600; font-size: .92rem; }
.lien-fleche { font-weight: 650; text-decoration: none; }
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { text-decoration: underline; }
.equipe-apercu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.equipe-apercu li { background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.equipe-apercu img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--creme-fonce); }
.equipe-apercu span { display: block; padding: .7rem .9rem; font-weight: 650; }
.equipe-apercu small { display: block; font-weight: 400; color: var(--gris); }

/* Contact */
.coordonnees { font-style: normal; font-size: 1.1rem; line-height: 1.8; margin: 1.2rem 0 0; }
.photo-facade { border-radius: var(--rayon); box-shadow: 0 20px 50px rgb(0 0 0 / .35); }

/* Partenaires */
.partenaires { padding-block: 3rem; }
.titre-discret { font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gris); text-align: center; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 3.5rem; }
.logos img { max-height: 64px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logos li:hover img { filter: none; opacity: 1; }

/* Pied de page */
.pied { background: #2a1420; color: #ead9d0; padding-top: 3.5rem; font-size: .95rem; }
.pied a { color: #ffd8a8; }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.pied-titre { color: var(--blanc); font-weight: 700; margin-bottom: .7rem; }
.pied ul li { margin-bottom: .4rem; }
.pied-note { margin-top: 1rem; font-size: .88rem; opacity: .85; }
.pied-copyright { border-top: 1px solid rgb(255 255 255 / .1); margin-top: 2.5rem; padding: 1.2rem 0 1.6rem; font-size: .85rem; opacity: .8; }

/* Tablette */
@media (max-width: 960px) {
  .liste-chiffres { grid-template-columns: repeat(2, 1fr); }
  .liste-chiffres li:nth-child(3) { border-left: 0; }
  .liste-chiffres li:nth-child(n+3) { border-top: 1px solid #f1e3d6; }
  .etapes { grid-template-columns: 1fr; }
  .etapes::before { display: none; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .heros-grille { grid-template-columns: 1fr; }
  .heros-visuel { max-width: 640px; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-grille > div { grid-column: 1 / -1; }
}

/* Mobile : menu repliable (seulement si JavaScript est actif ; sinon le menu reste affiché) */
@media (max-width: 860px) {
  .avec-js .bouton-menu { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1rem; border: 2px solid var(--encre);
    border-radius: 999px; background: transparent; font: inherit; font-weight: 650; color: var(--encre); cursor: pointer; }
  .bouton-menu-barres, .bouton-menu-barres::before, .bouton-menu-barres::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .bouton-menu-barres::before, .bouton-menu-barres::after { content: ""; position: absolute; }
  .bouton-menu-barres::before { top: -6px; } .bouton-menu-barres::after { top: 6px; }
  .entete-interieur { flex-wrap: wrap; }
  .avec-js .navigation { display: none; width: 100%; padding-bottom: 1rem; }
  .avec-js .navigation.ouverte { display: block; }
  .navigation > ul { flex-direction: column; align-items: stretch; }
  .navigation .bouton-petit { margin: .5rem 0 0; }
}
@media (max-width: 560px) {
  .liste-chiffres li { padding: 1rem 1.1rem; }
  .annonce { font-size: .85rem; }
  .annonce p { padding: .45rem .8rem; }
  .liste-chiffres strong { font-size: 1.35rem; }
  .grille-formations { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .actions .bouton { width: 100%; }
  .atouts { grid-template-columns: 1fr; }
  .mosaique { gap: .7rem; }
  .mosaique li:nth-child(even) { transform: none; }
  .mosaique li:nth-child(n+5) { display: none; }
  .mosaique span { font-size: .85rem; }
  .pastille { width: 84px; height: 84px; font-size: .9rem; top: -1.6rem; right: -.3rem; }
  .entete-page-visuel { display: none; }
}

/* ===================== Pages intérieures ===================== */
main:focus { outline: none; }
.entete-page { position: relative; overflow: hidden; color: var(--blanc); isolation: isolate;
  background: radial-gradient(50rem 24rem at 95% 0%, rgb(232 89 12 / .45), transparent 60%),
              radial-gradient(30rem 20rem at 0% 120%, rgb(232 89 12 / .18), transparent 60%), var(--prune); }
.entete-page::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.4px); background-size: 22px 22px; }
.entete-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--orange-vif), #f59e0b 50%, var(--orange-vif)); }
.entete-page-grille { display: grid; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(2.6rem, 5vw, 4rem); }
.entete-page-grille.avec-visuel { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.entete-page-contenu { max-width: 820px; }
.entete-page-visuel { width: 100%; border-radius: var(--rayon); border: 5px solid rgb(255 255 255 / .9); box-shadow: 0 20px 45px rgb(0 0 0 / .35); transform: rotate(1.5deg); }
.entete-page h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.entete-page .chapeau { margin: 0; color: #f6e4da; }
.fil ol { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .9rem; margin-bottom: 1.2rem; }
.fil li:not(:last-child)::after { content: "›"; margin-left: .45rem; opacity: .75; }
.fil a { color: #ffe3c2; }
.fil [aria-current] { color: var(--blanc); font-weight: 600; }

.conteneur-texte { width: min(780px, 100% - 2.5rem); }
.texte-riche h2 { font-size: 1.5rem; margin-top: 2rem; }
.texte-riche h3 { margin-top: 1.5rem; }
.texte-riche ul, .texte-riche ol { margin: 0 0 1.2em; padding-left: 1.3rem; }
.texte-riche ul { list-style: disc; } .texte-riche ol { list-style: decimal; }
.texte-riche li { margin-bottom: .35em; }
.texte-riche li::marker { color: var(--orange); }
.texte-riche blockquote { margin: 1.5rem 0; padding: .8rem 1.2rem; border-left: 4px solid var(--orange); background: var(--creme-fonce); }
.texte-riche img { border-radius: var(--rayon); margin: 1rem 0; }
.page-image { border-radius: var(--rayon); margin-bottom: 2rem; box-shadow: var(--ombre); }

/* Fiche formation */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.fiche-image { border-radius: var(--rayon); margin-bottom: 1.5rem; box-shadow: var(--ombre); }
.fiche-contenu section { background: var(--blanc); border: 1px solid #f3e6da; border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.3rem 1.5rem 1.1rem; margin-bottom: 1rem; }
.fiche-contenu section h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem !important; padding: 0 !important; border: 0 !important; font-size: 1.2rem; }
.fiche-contenu section h2::before { content: ""; width: 5px; height: 1.2em; border-radius: 3px; background: var(--orange-vif); flex: none; }
.fiche-contenu section > :last-child { margin-bottom: 0; }
.fiche-contenu section ul:last-child > li:last-child { margin-bottom: 0; }
.fiche-encart { position: sticky; top: 100px; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 0 1.5rem 1.5rem;
  overflow: hidden; border: 1px solid #f3e6da; }
.fiche-encart-prix { margin: 0 -1.5rem 1.2rem; padding: 1rem 1.5rem; background: var(--prune); color: var(--blanc); font-family: var(--police-titre);
  font-size: 1.6rem; font-weight: 780; line-height: 1.1; }
.fiche-encart-prix span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffd8a8; margin-bottom: .2rem; }
.fiche-encart h2 { font-size: 1.15rem; }
.fiche-encart dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #f1e3d6; }
.fiche-encart dt { color: var(--gris); }
.fiche-encart dd { margin: 0; font-weight: 650; text-align: right; }
.bouton-plein { width: 100%; margin: 1.3rem 0 .6rem; }
.encart-tel { font-size: .95rem; color: var(--gris); }
.liste-autres { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.liste-autres a { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.2rem; background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre); color: var(--encre); text-decoration: none; font-weight: 650; }
.liste-autres a:hover { color: var(--orange-texte); }
.liste-autres .etiquette { margin: 0; }

/* Équipe */
.grille-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; }
.membre { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.2rem; border: 1px solid #f3e6da; }
.membre-photo { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--creme-fonce);
  box-shadow: 0 0 0 4px var(--creme-fonce); }
.membre-initiales { display: grid; place-items: center; font-size: 2rem; font-weight: 750; color: var(--orange-texte); }
.membre-corps { min-width: 0; }
.membre h2 { font-size: 1.12rem; margin-bottom: .15rem; }
.membre-fonction { color: var(--orange-texte); font-weight: 650; font-size: .95rem; margin-bottom: .4rem; }
.membre-details { font-size: .93rem; color: var(--gris); margin-bottom: .5rem; line-height: 1.5; }
.membre-email { font-size: .9rem; margin: 0; overflow-wrap: anywhere; }
.appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem;
  padding: clamp(1.3rem, 3vw, 2rem); border-radius: 18px; background: var(--prune); color: #fbe9e0; }
.appel p { margin: 0; }
.appel-titre { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 750; color: var(--blanc); margin-bottom: .3rem !important; }

/* Sous-menus */
.a-sous-menu { position: relative; display: flex; align-items: center; }
.ouvrir-sous-menu { border: 0; background: none; width: 28px; height: 36px; cursor: pointer; color: inherit; margin-left: -.5rem; border-radius: 6px; }
.ouvrir-sous-menu span { display: block; width: 8px; height: 8px; margin: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sous-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--blanc); border-radius: 10px; box-shadow: var(--ombre); padding: .4rem; z-index: 60; }
.a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu, .a-sous-menu.ouvert > .sous-menu { display: block; }
.sous-menu a { padding: .55rem .8rem; }
.branche-active > a { color: var(--orange-texte); }

/* Formulaire de contact */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.formulaire { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(1.3rem, 3vw, 2.2rem); }
.note-obligatoire { font-size: .92rem; color: var(--gris); }
.ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.champ { margin-bottom: 1.2rem; }
.champ label { display: block; font-weight: 650; margin-bottom: .35rem; }
.champ input:not([type=checkbox]), .champ select, .champ textarea { width: 100%; font: inherit; color: var(--encre); background: var(--blanc);
  border: 2px solid #b9aca2; border-radius: 10px; padding: .7rem .85rem; min-height: 48px; }
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--orange); outline: 3px solid rgb(232 89 12 / .35); outline-offset: 0; }
.champ [aria-invalid="true"] { border-color: #b42318; background: #fff6f5; }
.requis { color: #b42318; }
.facultatif { font-weight: 400; color: var(--gris); font-size: .92rem; }
.aide { font-size: .88rem; color: var(--gris); margin: .3rem 0 0; }
.champ-erreur { color: #b42318; font-weight: 600; font-size: .92rem; margin: .35rem 0 0; }
.champ-erreur::before { content: "⚠ "; }
.champ-case { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.champ-case input { width: 22px; height: 22px; margin-top: .2rem; accent-color: var(--orange); }
.champ-case label { font-weight: 400; margin: 0; }
.champ-case .champ-erreur { grid-column: 1 / -1; }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resume-erreurs { border: 2px solid #b42318; background: #fff6f5; border-radius: var(--rayon); padding: 1rem 1.3rem; margin-bottom: 1.5rem; }
.resume-erreurs h2 { font-size: 1.1rem; color: #b42318; }
.resume-erreurs ul { list-style: disc; padding-left: 1.2rem; margin: 0; }
.resume-erreurs a { color: #b42318; font-weight: 600; }
.contact-encart { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; border: 1px solid #f3e6da; position: sticky; top: 100px; }
.contact-encart > img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.contact-encart-corps { padding: 1.3rem 1.5rem 1.5rem; }
.contact-encart h2 { font-size: 1.3rem; }
.coordonnees-icones { margin: 0 0 1.2rem; }
.coordonnees-icones li { position: relative; padding: .55rem 0 .55rem 2.3rem; border-top: 1px solid #f1e3d6; line-height: 1.5; overflow-wrap: anywhere; }
.coordonnees-icones li:first-child { border-top: 0; }
.coordonnees-icones li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #fde3cf center / .95rem no-repeat; }
.ico-lieu::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a3412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11a7 7 0 0 1 14 0c0 4.9-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important; }
.ico-tel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a3412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") !important; }
.ico-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a3412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important; }
.contact-encart-suite { background: var(--creme-fonce); padding: 1.2rem 1.5rem 1.4rem; }
.contact-encart-titre { font-weight: 750; margin-bottom: .6rem; }
.mini-etapes { counter-reset: m; display: grid; gap: .5rem; margin: 0; }
.mini-etapes li { counter-increment: m; position: relative; padding-left: 2.1rem; font-size: .95rem; line-height: 1.45; }
.mini-etapes li::before { content: counter(m); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--orange);
  color: var(--blanc); font-size: .8rem; font-weight: 750; display: grid; place-items: center; }
.groupe-champs { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.groupe-champs legend { display: flex; align-items: center; gap: .6rem; font-family: var(--police-titre); font-size: 1.15rem; font-weight: 750; padding: 0; margin-bottom: 1rem; }
.groupe-num { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--creme-fonce); color: var(--orange-texte); font-size: .9rem; }
.groupe-champs + .groupe-champs { margin-top: 1.8rem; }
.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: .4rem; }
.formulaire-rassurance { margin: 0; font-size: .9rem; color: var(--gris); flex: 1 1 240px; }

@media (max-width: 960px) {
  .fiche, .contact-grille { grid-template-columns: 1fr; }
  .fiche-encart { position: static; }
  .contact-encart { position: static; }
  .entete-page-grille.avec-visuel { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}
@media (max-width: 860px) {
  .a-sous-menu { flex-wrap: wrap; }
  .a-sous-menu > a { flex: 1; }
  .ouvrir-sous-menu { width: 44px; height: 44px; margin: 0; }
  .sous-menu { position: static; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; width: 100%; }
  .a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu { display: none; }
  .a-sous-menu.ouvert > .sous-menu { display: block; }
}
@media (max-width: 640px) { .ligne-champs { grid-template-columns: 1fr; } }

/* ===================== Accueil : partenaires, inscription, équipe ===================== */
.bandeau-partenaires { padding: 2.2rem 0 2.6rem; }
.bandeau-partenaires-interieur { display: flex; align-items: center; gap: 1.5rem 3rem; flex-wrap: wrap; justify-content: center; }
.bandeau-partenaires .titre-discret { margin: 0; white-space: nowrap; }
.bandeau-partenaires .logos { gap: 1.5rem 2.8rem; }
.bandeau-partenaires .logos img { max-height: 46px; filter: grayscale(1); opacity: .75; mix-blend-mode: multiply; }  /* multiply : le fond blanc des logos disparaît sur le crème */
.etapes-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.etapes-pied .encadre { margin: 0; flex: 1 1 420px; }
.carte-equipe { background: var(--blanc); border-radius: 20px; box-shadow: var(--ombre); padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid #f3e6da; }
.carte-equipe p { color: var(--gris); }
.avatars { display: flex; margin-bottom: 1.1rem; }
.avatars li { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--blanc); overflow: hidden; background: var(--creme-fonce);
  box-shadow: 0 2px 8px rgb(61 28 43 / .15); }
.avatars li + li { margin-left: -14px; }
.avatars img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avatars-plus { display: grid; place-items: center; font-weight: 750; color: var(--orange-texte); font-size: .95rem; }
.carte-equipe-titre { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 750; color: var(--encre) !important; margin-bottom: .4rem; }
.carte-equipe-noms { margin: 0 0 1rem; font-size: .95rem; }
.carte-equipe-noms li { padding: .45rem 0; border-top: 1px solid #f1e3d6; color: var(--gris); }
.carte-equipe-noms strong { color: var(--encre); }
.carte-equipe-agrement { font-size: .85rem; margin-bottom: 1.2rem; }
.carte-equipe .bouton-contour { min-height: 44px; }

/* ===================== Pages de texte (rubriques) ===================== */
.page-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.page-contenu { max-width: 760px; }
.page-encart { position: sticky; top: 100px; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.5rem; border-top: 4px solid var(--orange-vif); }
.page-encart-titre { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 750; margin-bottom: .3rem; }
.page-encart p { color: var(--gris); }
.page-encart-liens { margin: 0 0 1rem; }
.page-encart-liens li { padding: .5rem 0; border-top: 1px solid #f1e3d6; font-weight: 600; overflow-wrap: anywhere; }
.page-encart .bouton-plein { margin: .3rem 0 .9rem; }
/* Mise en forme du texte saisi dans l'admin : premier paragraphe en chapeau, intertitres marqués,
   listes à puces cochées, listes numérotées en pastilles, encadrés. */
.texte-page > p:first-child { font-size: 1.2rem; color: var(--encre); line-height: 1.6; }
.texte-page h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid #f1e3d6; }
.texte-page h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texte-page ul { list-style: none; padding-left: 0; }
.texte-page ul > li { position: relative; padding-left: 2rem; margin-bottom: .6em; }
.texte-page ul > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fde3cf center / .8rem no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a3412' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.texte-page ol { list-style: none; padding-left: 0; counter-reset: num; display: grid; gap: .9rem; margin: 1.2rem 0 1.6rem; }
.texte-page ol > li { counter-increment: num; position: relative; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.1rem 1.3rem 1.1rem 4.2rem; margin: 0; }
.texte-page ol > li::before { content: counter(num); position: absolute; left: 1.2rem; top: 1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--orange); color: var(--blanc); display: grid; place-items: center; font-weight: 750; }
.texte-page blockquote { border-left: 4px solid var(--orange); background: var(--blanc); box-shadow: var(--ombre); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 1rem 1.3rem; }
.texte-page strong { color: var(--encre); }
.texte-page a { font-weight: 600; }
@media (max-width: 960px) {
  .page-grille { grid-template-columns: 1fr; }
  .page-encart { position: static; }
}

/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===================== Dernières pages : liste des formations, confirmation, erreur, listes de liens ===================== */
.appel .actions { margin: 0; }
.carte-confirmation { background: var(--blanc); border-radius: 20px; box-shadow: var(--ombre); border: 1px solid #f3e6da; padding: clamp(1.5rem, 4vw, 2.5rem); }
.confirmation-icone { display: block; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1.2rem; background: #dcfce7 center / 34px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.carte-confirmation .mini-etapes { gap: .8rem; margin-bottom: .5rem; }
.carte-confirmation .mini-etapes li { font-size: 1.05rem; }
.raccourcis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.raccourcis a { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1.2rem 1.4rem; background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre); border: 1px solid #f3e6da; border-top: 4px solid var(--orange-vif); text-decoration: none; color: var(--encre); }
.raccourcis a:hover { transform: translateY(-2px); }
.raccourcis strong { font-size: 1.1rem; }
.raccourcis span { color: var(--gris); font-size: .95rem; }
/* Listes de liens (Aide, Documents…) : flèche au lieu de la coche */
.texte-page ul > li:has(> a:first-child)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a3412' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.texte-page ul > li:has(> a:first-child) { background: var(--blanc); border: 1px solid #f3e6da; border-radius: 10px; padding: .75rem 1rem .75rem 2.9rem; margin-bottom: .6rem; }
.texte-page ul > li:has(> a:first-child)::before { left: .9rem; top: .95rem; }