/* Feuille commune du site v2 (18 oct. 2026), extraite de la v1 puis complétée. */
/* Palette de la couverture (C1C4 d'impression R3) : orange C0 M42 J71 N0 = #EE9D5D, vert C82 M26 J44 N10 = #227E7B.
   Le texte reste foncé sur l'orange. Contrastes vérifiés (WCAG AA) :
   encre sur orange 8,5:1 · blanc sur vert 4,8:1 · blanc sur vert foncé 8,2:1 · orange clair sur vert foncé 5,2:1 · lien vert sur blanc 6,7:1 */
:root {
  --encre: #141312;
  --orange: #EE9D5D;
  --orange-clair: #F5C49B;
  --orange-pale: #FCEBDD;
  --vert: #227E7B;
  --vert-lien: #1B6664;
  --vert-fonce: #175855;
  --gris-pale: #F4F1EE;
  --gris-texte: #2B2621;
  --gris-bordure: #5C564F;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, Tahoma, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  color: var(--encre);
  background: #FFFFFF;
}
a { color: var(--vert-lien); }
a:hover { color: var(--encre); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.contenu { max-width: 1120px; margin: 0 auto; }
.etroit { max-width: 860px; margin: 0 auto; }
.evitement { position: absolute; left: -9999px; top: 0; background: var(--vert); color: #FFFFFF; padding: 12px 18px; font-weight: 700; z-index: 10; }
.evitement:focus { left: 16px; top: 16px; }

.entete { background: #FFFFFF; border-bottom: 6px solid var(--orange); padding: 20px 24px; }
.entete nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.entete .nom { font-weight: 700; flex-grow: 1; }
.entete nav a { color: var(--encre); font-weight: 700; padding: 12px 4px; }
.bouton {
  display: inline-block; font-weight: 700; text-decoration: none; border-radius: 2px;
  padding: 16px 28px; min-height: 44px;
}
.bouton-plein { background: var(--vert); color: #FFFFFF; border: 3px solid var(--encre); padding: 13px 25px; }
.bouton-plein:hover { background: var(--vert-fonce); color: #FFFFFF; }
.bouton-contour { background: #FFFFFF; color: var(--encre); border: 3px solid var(--encre); padding: 13px 25px; }
.bouton-contour:hover { color: var(--encre); background: var(--gris-pale); }
.entete nav a.bouton { text-decoration: none; padding: 11px 19px; }
.entete nav a.bouton-plein { color: #FFFFFF; }
.entete nav a.bouton-contour { color: var(--encre); }

.hero { background: var(--orange); padding: 60px 24px 84px; }
.hero .contenu { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero-texte { flex: 1 1 540px; min-width: 0; }
.photo-hero { flex: 0 1 400px; min-width: 240px; margin: 0; }
.photo-hero img, .photo-attente {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 4px solid var(--encre); box-shadow: 14px 14px 0 var(--vert-fonce);
}
.photo-attente { background: var(--orange-pale); }
/* Une seule famille sur tout le site : Atkinson Hyperlegible Next (Braille Institute, conçue pour la basse vision).
   Sans empattement, non condensée, aucune capitale : recommandations pour un public âgé (guide INLB, 2 et 9 octobre). */
h1 { margin: 0 0 26px; font-weight: 400; }
h1 .phrase {
  display: block; font-weight: 800; font-size: clamp(34px, 4.8vw, 54px); line-height: 1.2;
  min-height: 2.4em; /* deux lignes réservées : la page ne bouge pas quand le titre change */
  text-wrap: balance; /* lignes équilibrées : jamais un mot seul sur la deuxième ligne */
}
h1 .mot {
  text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em; text-decoration-skip-ink: none;
}
h1 .socle {
  display: block; margin-top: 14px; font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; /* le socle fixe s'efface devant la phrase qui change */
}
.puces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 30px; }
.puces button {
  font-family: inherit; font-size: 18px; font-weight: 700; min-height: 44px; padding: 10px 16px;
  border: 2px solid var(--encre); background: #FFFFFF; color: var(--encre);
  border-radius: 2px; cursor: pointer;
}
.puces button[aria-pressed="true"] { background: var(--encre); color: #FFFFFF; }
.puces .lecture { background: transparent; margin-left: 6px; }
.identite { font-size: 25px; font-weight: 700; margin: 0 0 14px; }
.roles { font-size: 21px; margin: 0 0 38px; max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.couverture { flex: 0 1 340px; min-width: 240px; margin: 0; }
.couverture img {
  display: block; width: 100%; height: auto;
  border: 4px solid var(--encre); box-shadow: 14px 14px 0 var(--vert-fonce);
}

.citation { background: var(--vert-fonce); padding: 56px 24px; }
.citation blockquote { max-width: 980px; margin: 0 auto; text-align: center; }
.citation p { color: #FFFFFF; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.3; font-weight: 700; margin: 0; }
.citation .guillemet { color: var(--orange-clair); }

section.bloc { padding: 88px 24px; }
h2 { font-size: 42px; font-weight: 800; line-height: 1.15; margin: 0 0 26px; }
h3 { font-size: 23px; font-weight: 700; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 5px solid var(--orange); }
.chapeau { font-size: 24px; line-height: 1.5; max-width: 30em; }
.etroit p, .contenu > p { max-width: 36em; }

/* Schéma des morceaux : une même intention au centre, cinq morceaux autour */
.consigne { margin: 0 0 28px; }
.schema { position: relative; height: 620px; margin: 0 0 24px; }
.schema-liens { position: absolute; inset: 0; width: 100%; height: 100%; }
.schema-liens line { stroke: var(--encre); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 2 8; stroke-linecap: round; }
.schema-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 240px; height: 240px; border-radius: 50%; background: var(--orange);
  border: 4px solid var(--encre); display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 24px;
}
.schema-centre .titre-centre { font-weight: 800; font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
.schema-centre .ligne-centre { font-size: 18px; line-height: 1.35; margin: 0; }
.schema-modules { list-style: none; margin: 0; padding: 0; }
.schema-modules li { position: absolute; transform: translate(-50%, -50%); width: 214px; }
.schema-modules li:nth-child(1) { left: 50%; top: 10%; }
.schema-modules li:nth-child(2) { left: 86%; top: 40%; }
.schema-modules li:nth-child(3) { left: 74%; top: 88%; }
.schema-modules li:nth-child(4) { left: 26%; top: 88%; }
.schema-modules li:nth-child(5) { left: 14%; top: 40%; }
.module {
  display: block; width: 100%; text-align: left; font-family: inherit; color: var(--encre);
  background: #FFFFFF; border: 3px solid var(--encre); border-radius: 2px; padding: 14px 16px;
  cursor: pointer; min-height: 44px; box-shadow: 6px 6px 0 var(--couleur, var(--vert));
}
.module:hover { background: var(--gris-pale); }
.module[aria-expanded="true"] { background: var(--orange-clair); }
.module-nom { display: block; font-weight: 700; font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
.module-ligne { display: block; font-size: 18px; line-height: 1.35; }
.module-plus { display: block; font-size: 18px; font-weight: 700; margin-top: 8px; text-decoration: underline; }
.module[aria-expanded="true"] .module-plus::after { content: " (fermer)"; }
.m-vert { --couleur: var(--vert); }
.m-orange { --couleur: var(--orange); }
.m-clair { --couleur: var(--orange-clair); }
.panneau { background: var(--orange-pale); border-left: 0; border-top: 6px solid var(--encre); padding: 28px 30px; margin-top: 8px; }
.panneau h4 { font-size: 23px; margin: 0 0 12px; }
.panneau p { margin: 0 0 12px; }
.panneau p:last-child { margin-bottom: 0; }

.livres { background: var(--orange-pale); }
.livres-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.livre { display: flex; flex-direction: column; gap: 24px; }
.livre img {
  display: block; width: 100%; max-width: 280px; height: auto;
  border: 4px solid var(--encre); box-shadow: 12px 12px 0 var(--vert-fonce);
}
.livre-texte p { margin: 0 0 16px; }
.livre-titre { font-size: 28px; font-weight: 700; line-height: 1.3; }
.livre-sous-titre { font-size: 22px; }
.signature { font-size: 24px; font-weight: 700; display: inline-block; background: var(--vert); color: #FFFFFF; padding: 2px 10px; }
.etiquette { font-size: 18px; font-weight: 700; }

.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.angle { padding-top: 20px; border-top: 10px solid var(--vert); }
.angle:nth-child(2) { border-top-color: var(--orange); }
.angle:nth-child(3) { border-top-color: var(--vert-fonce); }
.angle h4 { font-size: 22px; margin: 0 0 12px; }
.angle p { margin: 0; }
.conf-titre { font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0 0 6px; }
.conf-sous-titre { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.conf-chapeau { font-size: 22px; font-weight: 700; max-width: 34em; margin: 0 0 22px; }
.format { background: var(--gris-pale); padding: 28px; border-bottom: 6px solid var(--orange); }
.format .duree { font-size: 30px; font-weight: 700; margin: 0 0 10px; line-height: 1.2; }
.format p { margin: 0; }

.liens { background: var(--vert-fonce); color: #FFFFFF; }
.liens a { color: var(--orange-clair); }
.liens a:hover { color: #FFFFFF; }
.liens .colonnes { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.liens .infolettre { flex: 1 1 460px; min-width: 0; }
.liens .reseaux { flex: 1 1 320px; min-width: 0; }
.liens h2 { color: #FFFFFF; }
.liens h3 { color: #FFFFFF; border-bottom-color: var(--orange); }
.liens a:focus-visible, .liens button:focus-visible { outline-color: var(--orange-clair); }
.champ { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.champ label { font-weight: 700; }
.champ input {
  font-family: inherit; font-size: 19px; padding: 14px; border: 2px solid #8A8580;
  background: #FFFFFF; color: var(--encre); border-radius: 2px; min-height: 44px;
}
.rangee { display: flex; flex-wrap: wrap; gap: 0 18px; }
.rangee .champ { flex: 1 1 200px; }
.liens .sous-titre { font-weight: 700; color: #FFFFFF; margin-top: -6px; }
.consentement { font-size: 18px; margin: 4px 0 22px; color: #E6EFEE; }
.liens button[type="submit"] {
  font-family: inherit; font-size: 20px; font-weight: 700; background: var(--orange); color: var(--encre);
  border: 0; padding: 16px 28px; border-radius: 2px; cursor: pointer; min-height: 44px;
}
.liens button[type="submit"]:hover { background: var(--orange-clair); }
.piege { position: absolute; left: -5000px; }
.reseau { margin: 0 0 30px; }
.reseau p { margin: 0 0 12px; }
.bouton-blanc { background: #FFFFFF; color: var(--encre); }
.liens a.bouton-blanc { color: var(--encre); text-decoration: none; }
.liens a.bouton-blanc:hover { background: var(--orange-pale); color: var(--encre); }
.liens .encadre-merci { background: var(--orange-pale); color: var(--encre); border: 4px solid var(--encre); padding: 24px 26px; margin-top: 8px; }
.liens h3.autres-choix { margin-top: 44px; }
.liens .encadre-merci h3 { color: var(--encre); margin-top: 0; }
.liens .encadre-merci:focus { outline: 3px solid var(--orange-clair); outline-offset: 4px; }
.liens input[aria-invalid="true"] { outline: 3px solid var(--orange-clair); }

.contact { background: var(--encre); color: #FFFFFF; }
.contact a { color: var(--orange); }
.contact a:hover { color: #FFFFFF; }
.contact a:focus-visible { outline-color: var(--orange); }
.contact .adresse { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; margin: 0 0 30px; overflow-wrap: anywhere; }
.contact .bouton-clair { background: var(--orange); color: var(--encre); text-decoration: none; }
.contact .bouton-clair:hover { background: var(--orange-clair); color: var(--encre); }

.pied { background: var(--orange-pale); border-top: 6px solid var(--orange); padding: 38px 24px; }
.pied .contenu { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; }
.mise-en-garde { max-width: 1120px; margin: 0 auto 28px; padding-bottom: 24px; border-bottom: 2px solid var(--orange); font-size: 18px; }
.mise-en-garde h2 { font-size: 20px; margin: 0 0 8px; }
.mise-en-garde p { margin: 0 0 8px; }
.pied .nom { font-weight: 700; flex-grow: 1; }
.pied span:last-child { font-size: 18px; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .grille, .livres-grille { grid-template-columns: 1fr; }
  section.bloc { padding: 64px 16px; }
  .hero { padding: 44px 16px 60px; }
  .entete, .citation, .pied { padding-left: 16px; padding-right: 16px; }
  h2 { font-size: 38px; }
  .couverture { flex-basis: 260px; max-width: 300px; }
  /* Le schéma devient une liste : le centre d'abord, les morceaux reliés par un trait vertical */
  .schema { height: auto; }
  .schema-liens { display: none; }
  .schema-centre { position: static; transform: none; width: auto; height: auto; border-radius: 2px; margin: 0 0 20px; }
  .schema-modules { border-left: 4px dotted var(--encre); margin-left: 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 18px; }
  .schema-modules li, .schema-modules li:nth-child(n) { position: static; transform: none; width: auto; }
}

/* ---------- Ajouts v2 : site en cinq pages (audit du 18 oct. 2026) ---------- */
.entete .nom a { color: var(--encre); text-decoration: none; }
.entete nav a[aria-current="page"] { text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--orange); }
.entete nav a:not(.bouton) { text-decoration: none; }
.entete nav a:not(.bouton):hover, .entete nav a[aria-current="page"]:not(.bouton) { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--orange); }

/* Accueil : titre fixe et promesse */
.titre-site { font-weight: 800; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.1; margin: 0 0 20px; text-wrap: balance; }
.promesse { font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; margin: 0 0 30px; max-width: 22em; text-wrap: balance; }
.appui { font-size: 21px; margin: 0 0 34px; max-width: 30em; }

/* Trois portes d'entrée, de même poids */
.portes { padding: 64px 24px; background: #FFFFFF; }
.portes-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.porte {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--encre);
  background: #FFFFFF; border: 3px solid var(--encre); border-radius: 2px; padding: 26px 26px 24px;
  box-shadow: 8px 8px 0 var(--couleur, var(--vert));
}
.porte:hover { background: var(--gris-pale); color: var(--encre); }
.porte .verbe { font-size: 18px; font-weight: 700; color: var(--vert-lien); }
.porte .porte-titre { font-size: 26px; font-weight: 800; line-height: 1.2; }
.porte .porte-ligne { font-size: 19px; line-height: 1.45; }

/* Vision */
.vision { background: var(--gris-pale); }
.vision .etroit p { font-size: 22px; }

/* Les thèmes : la rotation devient du contenu (zone notion:rotation, gabarit « themes ») */
.themes { background: var(--orange-pale); }
.theme-titre { margin: 0 0 26px; }
.theme-titre .phrase {
  display: block; font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.2;
  min-height: 1.25em; text-wrap: balance; /* une ligne réservée ; deux sur écran étroit */
}
.theme-titre .mot {
  text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em; text-decoration-skip-ink: none;
}
.theme-titre .socle { display: block; margin-top: 12px; font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.themes .puces { margin-bottom: 0; }

/* Aperçus sur l'accueil */
.apercu-livres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; margin-bottom: 36px; }
/* Deux cartes de même hauteur ; le bouton est collé au bas de chaque carte (demande de SL du 18 oct.). */
.apercu-livre { display: flex; gap: 24px; align-items: flex-start; background: var(--orange-pale); border: 3px solid var(--encre); padding: 26px; }
.apercu-livre img { width: 150px; flex: 0 0 150px; height: auto; border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--vert-fonce); }
.apercu-texte { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.apercu-texte p { margin: 0 0 12px; }
.apercu-texte .livre-titre { font-size: 26px; }
.apercu-texte .bas { margin: auto 0 0; padding-top: 8px; }
.apercu-livre .bouton { display: block; text-align: center; font-size: 18px; padding: 11px 16px; }
.liste-simple { margin: 0 0 20px; padding-left: 1.2em; }
.liste-simple li { margin-bottom: 8px; }
.lien-suite { font-weight: 700; font-size: 21px; }

/* Pages secondaires */
.bandeau-page { background: var(--orange); padding: 56px 24px 52px; }
.bandeau-page h1 { font-weight: 800; font-size: clamp(38px, 5vw, 56px); line-height: 1.1; margin: 0 0 14px; }
.bandeau-page p { font-size: clamp(22px, 2.4vw, 27px); font-weight: 600; margin: 0; max-width: 30em; }
.questions { list-style: none; margin: 0 0 24px; padding: 0; }
.questions li { font-size: 22px; font-weight: 700; padding: 10px 0 10px 18px; border-left: 6px solid var(--vert); margin-bottom: 12px; background: #FFFFFF; }
.credit { font-size: 17px; margin: 10px 0 0; }
.portrait-apropos { float: right; width: 300px; margin: 0 0 24px 40px; }
.portrait-apropos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border: 4px solid var(--encre); box-shadow: 12px 12px 0 var(--vert-fonce); }
.medias { border-top: 5px solid var(--orange); padding-top: 28px; margin-top: 56px; clear: both; }
.politique h2 { font-size: 30px; margin-top: 44px; }
.politique .date { font-weight: 700; }
.politique a, .medias a, .pied a { overflow-wrap: anywhere; }
.pied nav { display: contents; }

@media (max-width: 860px) {
  .portes { padding: 44px 16px; }
  .portes-grille, .apercu-livres { grid-template-columns: 1fr; }
  .bandeau-page { padding: 40px 16px; }
  .portrait-apropos { float: none; width: auto; max-width: 300px; margin: 0 0 28px; }
  .apercu-livre img { width: 110px; flex-basis: 110px; }
  .schema-modules .panneau { margin-top: 12px; }
  .theme-titre .phrase { min-height: 2.4em; }
  .entete .nom { flex-basis: 100%; }
  .entete nav { gap: 4px 20px; }
  .apercu-livre { flex-direction: column; }
}

/* Emplacements réservés (vidéo, témoignages), prêts à activer */
.video-cadre { position: relative; aspect-ratio: 16 / 9; max-width: 900px; border: 4px solid var(--encre); background: var(--encre); }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.temoignage { margin: 0; background: #FFFFFF; border-left: 8px solid var(--vert); padding: 24px 26px; }
.temoignage blockquote { margin: 0 0 14px; font-size: 21px; }
.temoignage figcaption { font-weight: 700; font-size: 18px; }

/* Page « Dans les médias » (20 oct. 2026) */
.revue-annee { font-size: 32px; margin: 48px 0 8px; }
.revue-annee:first-of-type { margin-top: 28px; }
.revue { list-style: none; margin: 0; padding: 0; }
.revue li { padding: 16px 0; border-bottom: 1px solid var(--gris-bordure); }
.revue-date { display: block; font-size: 18px; color: var(--gris-texte); }
.revue-media { font-weight: 700; margin-right: 6px; }
.revue-media::after { content: " :"; }
.revue-sous-annee { font-size: 26px; border-bottom: 0; padding-bottom: 0; margin: 36px 0 4px; }
.fond-grille { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fond-carte { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--orange-pale); padding: 20px 22px; border-top: 6px solid var(--vert); }
.fond-media { font-weight: 700; }
.fond-titre { font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 700px) { .fond-grille { grid-template-columns: minmax(0, 1fr); } }

/* Retenues et thèmes, page Conférences (repris du one-pager du 27 oct. 2026) */
.deux-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 54px; }
.deux-col ul { padding-left: 1.2em; margin: 0; }
.deux-col li { margin-bottom: 8px; }
@media (max-width: 760px) { .deux-col { grid-template-columns: 1fr; } }