/* =========================================================
   PROSPERITIES · Feuille de style du site (charte oct. 2026)
   Couleurs, typographie et composants communs à toutes les pages
   ========================================================= */

/* ---------- Polices (hébergées sur le site, aucune requête externe) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); }

/* ---------- Couleurs de la charte ---------- */
:root {
  --saphir: #1A365D;
  --saphir-profond: #142B4B;
  --sarcelle: #2C7A7B;
  --cuivre: #B87333;
  --cuivre-texte: #9A5A22;    /* cuivre assombri pour les petits textes sur fond clair (lisibilité) */
  --or: #D4AF37;
  --creme: #F5F1E8;
  --creme-clair: #FBF9F4;
  --charbon: #2D3748;
  --charbon-doux: #4A5568;
  --brume: #B8C4D6;            /* texte secondaire sur fond saphir */
  --filet: rgba(26, 54, 93, 0.14);
  --filet-creme: rgba(245, 241, 232, 0.16);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Arial, sans-serif;

  --largeur: 1180px;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --entete: 76px;
}

/* ---------- Bilinguisme : une seule langue visible à la fois ---------- */
html.lang-fr .en, html.lang-en .fr { display: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--charbon);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--or); color: var(--saphir); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--or); color: var(--saphir); padding: .75rem 1.25rem; font-weight: 500;
}
.lien-evitement:focus { left: 1rem; top: 1rem; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--saphir); line-height: 1.12; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.15rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.75rem); line-height: 1.2; }
h4 { font-size: 1.3rem; }
p + p { margin-top: 1rem; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.section--saphir { background: var(--saphir); color: var(--creme); }
.section--saphir h2, .section--saphir h3, .section--saphir h4 { color: var(--creme); }
.section--clair { background: var(--creme-clair); }

/* Étiquette : Jost majuscules, interlettrage 18 % */
.etiquette {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre-texte);
}
.section--saphir .etiquette, .hero .etiquette { color: var(--or); }

/* En-tête de section */
.titre-section { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: center; margin-bottom: 1.5rem; max-width: 860px; }
.titre-section > div { display: contents; }
.titre-section .numero {
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .3em;
  color: var(--or); padding-right: 1rem; border-right: 1px solid var(--or); line-height: 1.2;
}
.titre-section .etiquette { display: block; }
.titre-section h2 { grid-column: 1 / -1; margin-top: .9rem; }
.chapeau { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--charbon-doux); max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section--saphir .chapeau { color: var(--brume); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 1rem 1.6rem; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s; line-height: 1.3; text-align: center;
}
.btn-or { background: var(--or); color: var(--saphir); }
.btn-or:hover { background: var(--creme); }
.btn-saphir { background: var(--saphir); color: var(--creme); }
.btn-saphir:hover { background: var(--sarcelle); }
.btn-trait { border-color: var(--saphir); color: var(--saphir); background: transparent; }
.btn-trait:hover { background: var(--saphir); color: var(--creme); }
.btn-trait-creme { border-color: rgba(245, 241, 232, .55); color: var(--creme); background: transparent; }
.btn-trait-creme:hover { border-color: var(--or); color: var(--or); }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- Logo (symbole « Le cap » + mot-symbole) ---------- */
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo img { width: 34px; height: auto; }
.logo .mot-symbole {
  font-family: var(--serif); font-weight: 500; font-size: 25px; letter-spacing: .16em;
  color: var(--creme); line-height: 1; padding-bottom: 3px;
}

/* ---------- En-tête et navigation ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--entete);
  background: rgba(26, 54, 93, .97); border-bottom: 1px solid rgba(212, 175, 55, .2);
  backdrop-filter: blur(10px);
}
.entete .conteneur { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1320px; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav-liens { display: flex; gap: clamp(1rem, 1.7vw, 1.75rem); list-style: none; }
.nav-liens a {
  color: var(--creme); text-decoration: none; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; padding: .4rem 0; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-liens a:hover { color: var(--or); border-bottom-color: var(--or); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-actions .btn { padding: .7rem 1.1rem; font-size: 11.5px; }

.langues { display: inline-flex; border: 1px solid rgba(245, 241, 232, .35); border-radius: 2px; }
.langues button {
  background: transparent; border: 0; color: var(--creme); font-family: var(--sans); font-weight: 500;
  font-size: 11.5px; letter-spacing: .14em; padding: .45rem .7rem; cursor: pointer;
}
.langues button[aria-pressed="true"] { background: var(--creme); color: var(--saphir); }

.menu-bouton {
  display: none; background: transparent; border: 1px solid rgba(245, 241, 232, .35); border-radius: 2px;
  width: 44px; height: 40px; cursor: pointer; align-items: center; justify-content: center;
}
.menu-bouton span, .menu-bouton span::before, .menu-bouton span::after {
  display: block; width: 18px; height: 1.5px; background: var(--creme); position: relative; transition: transform .25s, background .25s;
}
.menu-bouton span::before, .menu-bouton span::after { content: ""; position: absolute; left: 0; }
.menu-bouton span::before { top: -6px; }
.menu-bouton span::after { top: 6px; }
.menu-ouvert .menu-bouton span { background: transparent; }
.menu-ouvert .menu-bouton span::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .menu-bouton span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Héros ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--saphir); color: var(--creme);
  padding: calc(var(--entete) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(4rem, 8vw, 6rem);
}
.hero-aiguille {
  position: absolute; right: -6%; top: 6%; width: min(62vw, 760px); opacity: .09; pointer-events: none;
}
.hero .conteneur { position: relative; z-index: 1; }
.hero .etiquette { display: inline-block; margin-bottom: 1.6rem; }
.hero h1 { color: var(--creme); max-width: 900px; }
.hero h1 .accent { display: block; color: var(--or); margin-top: .35em; font-size: .78em; }
.hero-texte { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--brume); max-width: 700px; margin: 2rem 0 2.5rem; }
.hero-publics {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--filet-creme);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 980px;
}
.hero-publics a {
  display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--creme);
  font-size: 15.5px; line-height: 1.35; transition: color .2s;
}
.hero-publics a:hover { color: var(--or); }
.hero-publics svg { width: 38px; height: 38px; flex: none; color: var(--creme); }
.hero-academie { margin-top: 2rem; font-size: 15px; color: var(--brume); }
.hero-academie a { color: var(--or); text-underline-offset: 4px; }

/* ---------- Bandeau de repères chiffrés ---------- */
.reperes { background: var(--creme-clair); border-bottom: 1px solid var(--filet); }
.reperes ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reperes li { padding: 2rem 1.25rem; border-left: 1px solid var(--filet); }
.reperes li:first-child { border-left: 0; padding-left: 0; }
.reperes .chiffre { font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 2.8rem); color: var(--saphir); line-height: 1; }
.reperes .legende { display: block; margin-top: .55rem; font-size: 14.5px; color: var(--charbon-doux); line-height: 1.45; }

/* ---------- Cartes « publics » ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.carte-public {
  background: var(--creme-clair); border-top: 4px solid var(--saphir); padding: 2.25rem 2rem 2rem;
  display: flex; flex-direction: column;
}
.carte-public.sarcelle { border-top-color: var(--sarcelle); }
.carte-public.cuivre { border-top-color: var(--cuivre-texte); }
.carte-public .icone { width: 64px; height: 64px; color: var(--saphir); margin-bottom: 1.5rem; }
.carte-public h3 { margin-bottom: .9rem; }
.carte-public > p { color: var(--charbon-doux); font-size: 16px; }
.carte-public .utiles { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); }
.carte-public .utiles .etiquette { font-size: 11.5px; display: block; margin-bottom: .6rem; }
.carte-public ul { list-style: none; font-size: 15.5px; }
.carte-public li { padding: .3rem 0 .3rem 1.1rem; position: relative; }
.carte-public li::before { content: ""; position: absolute; left: 0; top: .95em; width: 5px; height: 5px; border-radius: 50%; background: var(--or); }

.encart-academie {
  margin-top: 2.5rem; padding: 1.75rem 2rem; border: 1px solid var(--filet); background: transparent;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.encart-academie p { max-width: 720px; font-size: 16px; }
.encart-academie strong { font-weight: 500; color: var(--saphir); }

/* ---------- Approche : définition et quatre étapes ---------- */
.approche-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.approche-intro .definition p { color: var(--brume); font-size: 17px; }
.approche-intro .definition p strong { color: var(--creme); font-weight: 500; }
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--filet-creme); }
.etape { padding: 2rem 1.75rem 0 0; }
.etape + .etape { padding-left: 1.75rem; border-left: 1px solid var(--filet-creme); }
.etape .num { font-family: var(--sans); font-weight: 500; letter-spacing: .25em; font-size: 14px; color: var(--or); }
.etape svg { width: 56px; height: 56px; color: var(--creme); margin: 1.25rem 0 1.25rem; }
.etape h3 { margin-bottom: .7rem; }
.etape p { color: var(--brume); font-size: 15.5px; }
.motif-carte { position: absolute; right: 0; bottom: 0; width: min(55vw, 640px); opacity: .1; pointer-events: none; }

/* ---------- Offre ---------- */
.volet { margin-top: 3rem; }
.volet:first-of-type { margin-top: 0; }
.volet-entete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--saphir);
}
.volet-entete h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.volet-entete .compte { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--charbon-doux); }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.service { background: var(--creme-clair); padding: 1.85rem 1.75rem; }
.service .badge { margin-bottom: 1rem; }
.service h4 { margin-bottom: .6rem; line-height: 1.2; }
.service p { font-size: 15.5px; color: var(--charbon-doux); }
.tm { font-size: .55em; vertical-align: super; letter-spacing: 0; }
.niveau { font-weight: 500; color: var(--saphir); }

/* Badges (Jost, majuscules, interlettrage 18 %) */
.badge {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 500;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: .45rem .8rem; line-height: 1.2;
  border-radius: 1px;
}
.badge-saphir { background: var(--saphir); color: var(--creme); }
.badge-sarcelle { background: var(--sarcelle); color: var(--creme); }
.badge-cuivre { background: var(--cuivre); color: var(--creme); }
.badge-trait { border: 1px solid var(--saphir); color: var(--saphir); }
.badge-or { border: 1px solid var(--or); color: var(--saphir); }
.badge-or::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.badge-charbon { background: var(--charbon); color: var(--creme); }

.offre-actions { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---------- Publics accompagnés ---------- */
.grille-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.public-accompagne { background: var(--creme-clair); padding: 2rem; border-left: 3px solid var(--or); }
.public-accompagne .etiquette { display: block; margin-bottom: .6rem; }
.public-accompagne h3 { margin-bottom: .8rem; }
.public-accompagne p { font-size: 15.5px; color: var(--charbon-doux); }
.public-chiffres { display: flex; gap: 2rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); }
.public-chiffres .chiffre { font-family: var(--serif); font-size: 2rem; color: var(--saphir); line-height: 1; }
.public-chiffres .legende { display: block; font-size: 13.5px; color: var(--charbon-doux); margin-top: .35rem; line-height: 1.4; max-width: 15rem; }

/* ---------- Recherche ---------- */
.recherche-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.recherche-carte { border: 1px solid var(--filet-creme); padding: 2rem 1.85rem; background: rgba(20, 43, 75, .55); }
.recherche-carte svg { width: 48px; height: 48px; color: var(--creme); margin-bottom: 1.25rem; }
.recherche-carte h3 { margin-bottom: .7rem; }
.recherche-carte p { color: var(--brume); font-size: 15.5px; }
.ligne-partenaires { margin-top: 2.5rem; color: var(--brume); font-size: 15.5px; max-width: 820px; }

/* ---------- Fondatrice ---------- */
.fondatrice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.fondatrice-photo { position: relative; }
.fondatrice-photo::before {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--or); z-index: 0;
}
.fondatrice-photo img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.fondatrice-texte h2 { margin: .6rem 0 .4rem; }
.fondatrice-texte .titre { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--charbon-doux); margin-bottom: 1.75rem; }
.fondatrice-texte > p { font-size: 16.5px; }
.liste-references { list-style: none; margin: 1.75rem 0; border-top: 1px solid var(--filet); }
.liste-references li { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--filet); font-size: 15.5px; line-height: 1.5; }
.liste-references svg { width: 28px; height: 28px; color: var(--saphir); }
.encart-independance { background: var(--saphir); color: var(--creme); padding: 1.6rem 1.75rem; margin-top: 1.75rem; }
.encart-independance .etiquette { color: var(--or); display: block; margin-bottom: .5rem; font-size: 11.5px; }
.encart-independance p { font-size: 15.5px; color: var(--creme); }

/* ---------- Pensées ---------- */
.pensees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pensee {
  display: flex; flex-direction: column; text-decoration: none; background: var(--creme-clair);
  padding: 2rem 1.85rem; border-top: 3px solid var(--saphir); transition: transform .25s, box-shadow .25s;
}
.pensee:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(26, 54, 93, .35); }
.pensee .meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.pensee .meta span { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre-texte); font-weight: 500; }
.pensee h3 { margin-bottom: .75rem; }
.pensee p { font-size: 15.5px; color: var(--charbon-doux); flex: 1; }
.pensee .lire { margin-top: 1.4rem; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--saphir); }
.pensee.sombre { background: var(--saphir); border-top-color: var(--or); }
.pensee.sombre h3 { color: var(--creme); }
.pensee.sombre p { color: var(--brume); }
.pensee.sombre .lire { color: var(--or); }
.pensee.sombre .meta span { color: var(--or); }

/* ---------- FAQ ---------- */
.faq { max-width: 900px; border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.45rem); color: var(--saphir); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.6rem; font-weight: 400; color: var(--or); transition: transform .25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .reponse { padding: 0 0 1.6rem; color: var(--charbon-doux); max-width: 780px; font-size: 16px; }

/* ---------- Infolettre ---------- */
.infolettre { background: var(--creme-clair); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); text-align: center; }
.infolettre .conteneur { max-width: 760px; }
.infolettre h2 { margin: .8rem 0 1rem; }
.infolettre p { color: var(--charbon-doux); margin-bottom: 2rem; }
.infolettre .petit { font-size: 13.5px; margin: 1rem 0 0; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5rem); }
.contact-infos p { color: var(--brume); }
.coordonnees { list-style: none; margin: 2rem 0; border-top: 1px solid var(--filet-creme); }
.coordonnees li { padding: .9rem 0; border-bottom: 1px solid var(--filet-creme); display: flex; flex-direction: column; }
.coordonnees .etiquette { font-size: 11px; color: var(--or); }
.coordonnees a { color: var(--creme); text-decoration: none; font-size: 18px; }
.coordonnees a:hover { color: var(--or); }

.formulaire { display: grid; gap: 1.15rem; }
.formulaire .rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.formulaire label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); margin-bottom: .45rem; font-weight: 500; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--creme);
  background: rgba(245, 241, 232, .06); border: 1px solid rgba(245, 241, 232, .25); border-radius: 2px;
  padding: .85rem 1rem;
}
.formulaire select option { color: var(--charbon); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--or); background: rgba(245, 241, 232, .1); }
.formulaire textarea { resize: vertical; min-height: 130px; }
.formulaire .note { font-size: 13.5px; color: var(--brume); }
.cache { position: absolute; left: -5000px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--saphir-profond); color: var(--brume); padding: 4rem 0 2rem; font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.pied .logo .mot-symbole { font-size: 23px; }
.pied-accroche { margin-top: 1.1rem; max-width: 320px; line-height: 1.6; }
.pied h5 { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-bottom: 1rem; }
.pied ul { list-style: none; }
.pied li { margin-bottom: .55rem; }
.pied a { text-decoration: none; color: var(--creme); }
.pied a:hover { color: var(--or); }
.pied-bas {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-creme);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 12px; letter-spacing: .08em;
}

/* ---------- Fenêtre infolettre ---------- */
.fenetre {
  position: fixed; inset: 0; z-index: 3000; background: rgba(13, 27, 51, .6); display: none;
  align-items: center; justify-content: center; padding: 1.25rem;
}
.fenetre.visible { display: flex; }
.fenetre-boite { background: var(--creme); max-width: 460px; width: 100%; padding: 2.5rem 2.25rem 2rem; position: relative; border-top: 4px solid var(--or); }
.fenetre-boite h3 { margin: .7rem 0 .9rem; }
.fenetre-boite p { font-size: 15.5px; color: var(--charbon-doux); margin-bottom: 1.5rem; }
.fenetre-fermer { position: absolute; top: .6rem; right: .9rem; background: none; border: 0; font-size: 1.8rem; color: var(--saphir); cursor: pointer; line-height: 1; padding: .25rem; }
.fenetre-plus-tard { background: none; border: 0; margin-top: 1rem; font-family: var(--sans); font-size: 13px; color: var(--charbon-doux); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pages simples (merci, 404, confidentialité) ---------- */
.page-simple { min-height: 100vh; display: flex; flex-direction: column; }
.page-simple main { flex: 1; }
.page-simple .hero { min-height: 100%; }
.texte-long { max-width: 760px; }
.texte-long h2 { font-size: 1.7rem; margin: 2.5rem 0 .8rem; }
.texte-long p, .texte-long li { color: var(--charbon-doux); }
.texte-long ul { padding-left: 1.2rem; margin-top: .6rem; }
.texte-long li { margin-bottom: .4rem; }

/* =========================================================
   ADAPTATION AUX ÉCRANS
   ========================================================= */
@media (max-width: 1180px) {
  .nav-liens { gap: 1rem; }
  .nav-liens a { font-size: 11px; letter-spacing: .12em; }
}
@media (max-width: 1040px) {
  .menu-bouton { display: inline-flex; }
  .nav-liens {
    position: fixed; top: var(--entete); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--saphir); padding: .5rem var(--gouttiere) 1.5rem; border-bottom: 1px solid rgba(212, 175, 55, .2);
    display: none; max-height: calc(100vh - var(--entete)); overflow-y: auto;
  }
  .menu-ouvert .nav-liens { display: flex; }
  .nav-liens a { display: block; padding: 1rem 0; font-size: 13px; border-bottom: 1px solid var(--filet-creme); }
  .grille-3, .recherche-cartes, .pensees { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .etape:nth-child(3) { padding-left: 0; border-left: 0; }
  .etape:nth-child(n+3) { border-top: 1px solid var(--filet-creme); margin-top: 2rem; }
  .approche-intro { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --entete: 64px; }
  body { font-size: 16px; }
  .logo img { width: 28px; }
  .logo .mot-symbole { font-size: 21px; letter-spacing: .13em; }
  .nav-actions .btn-reserver { display: none; }
  .hero-publics { grid-template-columns: 1fr; gap: 1rem; }
  .hero .groupe-boutons .btn { width: 100%; }
  .reperes ul { grid-template-columns: 1fr 1fr; }
  .reperes li { padding: 1.5rem 1rem; border-left: 1px solid var(--filet); }
  .reperes li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .reperes li:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .grille-3, .recherche-cartes, .pensees, .services, .grille-4 { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; }
  .etape, .etape + .etape { padding: 1.75rem 0 0; border-left: 0; }
  .etape + .etape { border-top: 1px solid var(--filet-creme); margin-top: 1.75rem; }
  .fondatrice, .contact-grille { grid-template-columns: 1fr; }
  .fondatrice-photo { max-width: 420px; margin-right: 1.25rem; }
  .formulaire .rangee { grid-template-columns: 1fr; }
  .public-chiffres { gap: 1.25rem; }
  .pied-grille { grid-template-columns: 1fr; gap: 2rem; }
  .offre-actions .btn, .encart-academie .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Cinq publics : un chiffre sourcé par public ---------- */
.grille-publics .public-accompagne { display: flex; flex-direction: column; }
.public-chiffre { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--filet); display: flex; flex-direction: column; }
.grille-publics .public-accompagne > p { margin-bottom: 1.4rem; }
.public-chiffre .chiffre { font-family: var(--serif); font-size: 2.3rem; color: var(--saphir); line-height: 1; }
.public-chiffre .legende { font-size: 14px; color: var(--charbon); margin-top: .45rem; line-height: 1.45; }
.public-chiffre .source { font-size: 12px; color: var(--charbon-doux); margin-top: .6rem; line-height: 1.45; }
.public-chiffre .source a { color: var(--charbon-doux); text-underline-offset: 2px; }
.public-chiffre .source a:hover { color: var(--cuivre-texte); }
.public-appel {
  display: flex; flex-direction: column; text-decoration: none; background: var(--saphir); color: var(--creme);
  padding: 2rem; border-left: 3px solid var(--or);
}
.public-appel svg { width: 48px; height: 48px; color: var(--creme); margin-bottom: 1.25rem; }
.public-appel h3 { color: var(--creme); margin-bottom: .8rem; }
.public-appel p { color: var(--brume); font-size: 15.5px; }
.public-appel .lire { margin-top: auto; padding-top: 1.4rem; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--or); }
.encart-academie { margin-top: 2rem; }
.liste-references a { color: var(--saphir); text-underline-offset: 3px; }
.liste-references a:hover { color: var(--cuivre-texte); }

/* =========================================================
   APERÇUS DE LA PAGE D'ACCUEIL ET EN-TÊTES DES PAGES INTÉRIEURES
   ========================================================= */
.apercu-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.apercu .etiquette, .apercu-fondatrice .etiquette { display: block; margin-bottom: .9rem; }
.apercu h2, .apercu-fondatrice h2 { margin-bottom: 1.25rem; }
.apercu .chapeau, .apercu-fondatrice .chapeau { margin-bottom: 2rem; }
.apercu-etapes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--filet-creme); border: 1px solid var(--filet-creme); }
.apercu-etapes li { background: var(--saphir); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; font-family: var(--serif); font-size: 1.45rem; color: var(--creme); }
.apercu-etapes svg { width: 48px; height: 48px; color: var(--creme); }
.apercu-fondatrice .apercu-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.apercu-fondatrice img { width: 100%; max-width: 380px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-bottom: 4px solid var(--or); }
.hero--page h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.bande-contact { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.bande-contact .encart-academie { margin-top: 0; }
@media (max-width: 760px) {
  .apercu-grille, .apercu-fondatrice .apercu-grille { grid-template-columns: 1fr; }
  .apercu .btn, .apercu-fondatrice .btn { width: 100%; }
}

/* =========================================================
   PAGE ÉVÉNEMENT · CONGRÈS DE L'AFO 2026 (code QR de la bannière)
   ========================================================= */
.page-evenement { background: var(--creme); }
.ev-entete { background: var(--saphir); border-bottom: 1px solid var(--filet-creme); }
.ev-entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.ev-evenement { font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--or); text-align: right; }

.ev-hero { position: relative; overflow: hidden; background: var(--saphir); color: var(--creme); padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 7vw, 5rem); }
.ev-rose { position: absolute; right: -8%; top: -10%; width: min(80vw, 760px); opacity: .12; pointer-events: none; }
.ev-aiguille { position: absolute; left: -6%; bottom: -30%; width: min(55vw, 420px); opacity: .07; pointer-events: none; }
.ev-hero .conteneur { position: relative; z-index: 1; max-width: 1000px; }
.badge-mois {
  display: inline-flex; align-items: center; gap: .7rem; border: 1px solid var(--or); color: var(--or);
  font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: .75rem 1.1rem; line-height: 1.3;
}
.badge-mois::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or); flex: none; }
.ev-hero h1 { color: var(--creme); font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 1.75rem 0 1.25rem; max-width: 900px; }
.ev-intro { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--creme); max-width: 640px; margin-bottom: 2rem; }
.ev-prix { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; background: var(--or); color: var(--saphir); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem); max-width: 860px; }
.ev-prix svg { width: 56px; height: 56px; color: var(--saphir); }
.ev-prix svg circle[fill="#D4AF37"] { fill: var(--saphir); }
.ev-prix h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--saphir); margin-bottom: .5rem; }
.ev-prix p { font-size: 16px; color: var(--saphir); }
.ev-participer { display: inline-block; margin-top: 2rem; color: var(--creme); text-decoration: none; font-size: 17px; letter-spacing: .04em; padding-bottom: .3rem; border-bottom: 1px solid var(--or); }
.ev-participer:hover { color: var(--or); }

.ev-corps { padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem); }
.ev-conteneur { max-width: 1000px; }
.ev-pourquoi { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; background: var(--creme-clair); border-left: 3px solid var(--or); padding: 2rem clamp(1.5rem, 4vw, 2.5rem); }
.ev-pourquoi svg { width: 48px; height: 48px; color: var(--saphir); }
.ev-pourquoi .etiquette { display: block; margin-bottom: .6rem; }
.ev-pourquoi h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 1rem; }
.ev-pourquoi p { color: var(--charbon); font-size: 16px; }

.ev-formulaire { margin-top: 2.5rem; background: var(--creme-clair); border-top: 3px solid var(--saphir); padding: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: 2rem; }
.ev-formulaire label, .ev-formulaire legend { display: block; font-size: 15.5px; color: var(--saphir); margin-bottom: .5rem; font-weight: 500; }
.ev-formulaire legend span { color: var(--cuivre-texte); font-weight: 400; }
.ev-formulaire fieldset { border: 0; min-width: 0; }
.ev-rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ev-formulaire input[type="text"], .ev-formulaire input[type="email"], .ev-formulaire textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--charbon); background: var(--creme);
  border: 1px solid #DCD3BF; border-radius: 2px; padding: .9rem 1rem;
}
.ev-formulaire input:focus, .ev-formulaire textarea:focus { outline: none; border-color: var(--saphir); background: #fff; }
.ev-formulaire textarea { resize: vertical; min-height: 120px; }
.ev-formulaire textarea::placeholder { color: #8A8577; }
.ev-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ev-formulaire label.ev-case {
  display: flex; align-items: flex-start; gap: .85rem; margin: 0; padding: 1rem 1.1rem; background: #fff;
  border: 1px solid #DCD3BF; cursor: pointer; font-weight: 400; color: var(--charbon); font-size: 15.5px; line-height: 1.45;
  transition: border-color .2s, background .2s;
}
.ev-formulaire label.ev-case:hover { border-color: var(--saphir); }
.ev-formulaire label.ev-case:has(input:checked) { border-color: var(--saphir); background: #EEF1F5; }
.ev-case input, .ev-abonnement input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--saphir); }
.ev-formulaire label.ev-abonnement { display: flex; align-items: flex-start; gap: .85rem; font-weight: 400; color: var(--charbon); margin: 0; }
.ev-envoyer {
  width: 100%; background: var(--or); color: var(--saphir); border: 0; border-radius: 2px; padding: 1.2rem;
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s;
}
.ev-envoyer:hover { background: var(--saphir); color: var(--creme); }
.ev-note { font-size: 14px; color: var(--charbon-doux); margin-top: -1rem; }
.ev-note a { color: var(--saphir); }
.ev-pied { background: var(--saphir); color: var(--brume); padding: 1.75rem 0; font-size: 14px; letter-spacing: .06em; }
.ev-pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.ev-pied a { color: var(--or); text-decoration: none; }
.ev-hero--merci { min-height: calc(100vh - 76px - 70px); display: flex; align-items: center; }
@media (max-width: 700px) {
  .ev-entete .logo .mot-symbole { font-size: 19px; }
  .ev-evenement { font-size: 10.5px; letter-spacing: .12em; max-width: 9rem; }
  .ev-prix, .ev-pourquoi { grid-template-columns: 1fr; gap: 1rem; }
  .ev-rangee, .ev-choix { grid-template-columns: 1fr; }
}
.hero--page { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 4px solid var(--or); }
.hero--page .hero-aiguille { width: min(48vw, 520px); top: 4%; }
/* Lisibilité : numéros de section en cuivre foncé sur fond clair, en or sur fond saphir */
.section:not(.section--saphir) .titre-section .numero { color: var(--cuivre-texte); border-color: var(--or); }

/* ---------- Formulaires d'infolettre ---------- */
.form-infolettre { text-align: left; display: grid; gap: 1.25rem; margin-top: .5rem; }
.form-infolettre-champs { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1rem; }
.form-infolettre label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--charbon-doux); margin-bottom: .4rem; font-weight: 500; }
.form-infolettre input, .form-fenetre input[type="email"] {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--charbon); background: #fff;
  border: 1px solid #DCD3BF; border-radius: 2px; padding: .85rem 1rem;
}
.form-infolettre input:focus, .form-fenetre input:focus { outline: none; border-color: var(--saphir); }
.form-infolettre .btn { justify-self: center; }
.form-infolettre .petit { text-align: center; }
.form-fenetre { display: grid; gap: .75rem; }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .form-infolettre-champs { grid-template-columns: 1fr; } .form-infolettre .btn { width: 100%; } }
.ev-confirmations { display: grid; gap: .9rem; }
.ev-abonnement a { color: var(--saphir); }
.ev-reglement h2 { font-size: 1.6rem; margin: 2.25rem 0 .7rem; }
.ev-reglement h2:first-of-type { margin-top: 0; }
.ev-reglement p, .ev-reglement li { color: var(--charbon); font-size: 16px; }
.ev-reglement ul { padding-left: 1.2rem; margin-top: .5rem; }
.ev-reglement li { margin-bottom: .4rem; }
.ev-reglement .ev-pourquoi { margin-bottom: 2.5rem; }