:root {
  --orange: #ED5312;
  --bright: #ff6a08;
  --brown: #5C2A16;
  --terracotta: #ba4d32;
  --gray: #5A5A5A;
  --black: #050505;
  --chocolat: #2e150b; /* bandeau du bas du pied de page : brun très sombre, plus chaud que le noir (Julien, 29/09/2026) */
  --white: #FFFFFF;
  --sand: #f6efe3;
  --cream: #faf5ec;
  --tint-orange: #f6e7d6;
  --tint-line: #ed531247;
  --overlay: #00000080;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 48px;
  --r-pill: 100px;
  --shadow: 0 7px 22px #7745230b;
  --shadow-header: 0 4px 18px #5c2a1626;
  --border-strong: 3px solid var(--orange);
  --shadow-modal: 0 20px 80px #00000040;
  --transition: 160ms ease;
  --font-titres: "Sora", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-texte: "Manrope", "Segoe UI", Arial, Helvetica, sans-serif;
  --text: var(--black);
  --bg: var(--white);
  --accent: var(--orange);
  --button-text: var(--white);
}

* {
  box-sizing: border-box;
}

html {
  overscroll-behavior: none;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  scroll-padding-top: 176px;
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-texte);
  -webkit-tap-highlight-color: transparent;
  --bg: var(--sand);
  --text: var(--brown);
  --motion: 600ms cubic-bezier(.22,.7,.25,1);
  --section-gap: 88px;
  --shadow-lift: 0 16px 36px #5c2a1617;
  --border: 1px solid var(--tint-line);
  --bord-carte: 3px solid var(--orange); /* bord des cartes, style de l'accueil étendu à tout le site (Julien, 29/09/2026) */
  --line: 2px solid var(--tint-line); /* traits séparateurs : 2 px, comme les lignes du bloc équipe et des partenaires (Julien, 16/09/2026) */
}

/* menu ouvert : on bloque le défilement sur html, jamais sur body. Un overflow sur body en fait un conteneur de défilement :
   le header collant se raccroche à lui et remonte en haut du document (bouton Menu invisible en bas de page, Arsène, 08/10/2026). */
html.locked {
  overflow: hidden;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}

a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}

:focus:not(:focus-visible) { outline: none; }

textarea { resize: none; } /* jamais de poignée, sur tous les champs de texte du site : le champ grandit avec le texte (règle Julien, 01/10/2026 ; V7 : posée en global, elle ne visait plus qu'une ancienne classe) */ /* V7 : plus de rectangle bleu au clic ou au toucher (Julien, 16/10/2026) ; le contour orange reste au clavier */

h1 {
  font-family: var(--font-titres);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.035em;
}

h2 {
  font-family: var(--font-titres);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.035em;
  font-size: clamp(26px,2.65vw,40px);
  line-height: 1.06;
  font-weight: 750;
}

h3 {
  font-family: var(--font-titres);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.025em;
  font-size: 18px;
  line-height: 1.16;
}

p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  text-wrap: pretty;
}

em {
  font-style: normal;
  color: var(--accent);
}

.container {
  width: 88%;
  max-width: 1320px;
  margin-inline: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  line-height: 1.5;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 13px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: transform var(--transition),box-shadow var(--transition),background var(--transition);
}

.button {
  position: relative;
}

.button::before {
  content: "";
  position: absolute;
  inset: -4px; /* zone de survol un peu plus large que le bouton : soulevé de 2 px, il reste sous la souris (plus de clignotement) */
  border-radius: inherit;
}

.button span {
  font-size: 21px;
  line-height: 1;
  transition: transform var(--transition);
}

.button-outline {
  background: transparent;
  color: var(--orange);
}
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta .button-outline { border-width: 2px; } /* « Espace membre » : contour orange, à côté de « Soutenir » (Julien, 16/09/2026) */
.button-sobre { gap: 0; padding-inline: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-copy>.hero-actions { margin-top: 4px; }

.header {
  position: sticky;
  top: 12px;
  width: 92%;
  max-width: 1440px;
  margin: 18px auto 0;
  background: var(--sand);
  border-radius: var(--r);
  box-shadow: var(--shadow-header);
  z-index: 20;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px; /* V2 : 92 px sous la barre des réseaux (40 px), même hauteur totale qu'avant */
  gap: 26px;
  padding: 10px 40px 18px; /* V3 : de l'air sous le H du logo (Julien, 29/09/2026) */
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo img {
  width: 164px;
  height: 84px;
  object-fit: contain;
}

.nav-links {
  flex: 1;
  justify-content: center;
  display: flex;
  gap: 25px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-links a {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 16.5px;
  font-weight: 600;
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-mobile-only {
  display: none;
}

.burger {
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
}

.skip {
  position: absolute;
  left: 15px;
  top: 10px;
  transform: translateY(-150%);
  background: var(--white);
  color: var(--black);
  z-index: 20;
  padding: 15px;
}

.skip:focus {
  transform: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy>p:not(.eyebrow) {
  margin: 20px 0 24px;
  max-width: 440px;
  font-size: 18px;
  line-height: 1.35;
}

.features {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.feature p {
  margin-top: 12px;
  font-size: 14px;
}

.feature-icon img {
  width: 58px;
  height: 58px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin-top: 32px;
}

.stats>div {
  padding: 0 16px;
  border-left: var(--line);
}

.stats>div:first-child {
  padding-left: 0;
  border-left: 0;
}

.stats strong {
  display: block;
  font-size: 38px;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}

.stats p {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
}

.rule {
  display: block;
  width: 66px;
  height: 3px;
  background: var(--accent);
  margin-top: 20px;
}

.footer {
  display: block;
  padding: 48px 40px 28px;
  position: relative;
  width: 92%;
  max-width: 1440px;
  background: var(--brown);
  color: var(--white);
  border-radius: var(--r);
  margin: 48px auto 25px; /* de l'air entre la lettre et le pied de page (Julien, 29/09/2026) */
}

.footer-logo {
  width: 175px; /* un peu plus grand qu'en V2, sans écraser la colonne (Julien, 29/09/2026) */
  flex-shrink: 0;
}

.footer-logo img {
  width: 175px;
  height: auto;
}

.footer-contact {
  display: flex; /* V3 : une rangée sous les rubriques, plus de grand vide à droite (Julien, 29/09/2026) */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 2px solid #ffffff2e;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.footer-contact a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer small {
  font-size: 14px;
}

.switch {
  font-size: 14px;
  display: flex;
  align-items: center;
  min-height: 44px;
  opacity: .8;
}

.c-main {
  width: 92%;
  max-width: 1440px;
  margin: auto;
}

.c-hero {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); /* V9 : image plus grande (Julien, 21/10) */
  gap: 32px;
  border-radius: var(--r-lg);
  background-color: var(--tint-orange);
  padding: 18px 24px 18px 5%;
  align-items: center;
  min-height: 490px;
  padding-block: 35px;
}

.topo { position: relative; isolation: isolate; }



.c-hero h1 {
  font-size: clamp(30px,3.05vw,46px);
  line-height: 1.14;
  letter-spacing: -.035em;
}

.c-hero .eyebrow {
  font-size: 15px;
  letter-spacing: .13em;
  margin-bottom: 19px;
}

.c-hero .hero-copy>p:not(.eyebrow) {
  font-size: 18px;
  max-width: 560px;
  margin: 18px 0 20px;
  line-height: 1.45;
}

.c-hero-visual {
  height: 430px;
  background: var(--orange);
  border-radius: 64px;
  overflow: hidden;
  position: relative;
}

.c-hero-person { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.c-pillars {
  padding: 72px 0 0;
}

.c-pillars .features {
  gap: 18px;
}

.c-pillars .feature {
  padding: 26px 22px;
  border-radius: var(--r);
  background: var(--cream);
  box-shadow: var(--shadow);
  transition: transform var(--transition),box-shadow var(--transition);
}

.c-pillars .feature-icon {
  width: 62px;
  height: 62px;
  background: transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.c-pillars .feature-icon img {
  width: 62px;
  height: 62px;
  filter: none;
}

.c-pillars .feature:nth-child(2) .feature-icon {
  background: transparent;
}

.c-pillars .feature:nth-child(3) .feature-icon {
  background: transparent;
}

.c-pillars .feature p {
  font-size: 16px;
  line-height: 1.55;
}

.c-programmes {
  padding: var(--section-gap) 0 0; /* pleine largeur comme les autres blocs (Julien, 29/09/2026) */
}

.section-heading {
  display: grid;
  grid-template-columns: 42% 42%;
  gap: 0;
  padding: 0 3% 25px;
  align-items: center;
}

.section-heading>p {
  font-size: 14px;
}

.c-programmes h2 {
  font-size: 29px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.programme-card {
  display: flex;
  min-width: 0;
  border-radius: var(--r);
  background: var(--cream);
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-direction: column;
  transition: transform var(--transition),box-shadow var(--transition);
}

.programme-card>img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.programme-card:nth-child(2)>img {
  object-position: 50% 30%;
}

.card-copy {
  padding: 28px;
  position: relative;
  min-height: 135px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-copy .tag {
  position: static;
  top: -17px;
  left: 16px;
  border-radius: var(--r-pill);
  padding: 7px 12px;
  font-size: 14px;
  background: var(--orange);
  color: var(--white);
  align-self: flex-start;
  margin: 0 0 16px;
  line-height: 1.4;
}

.programme-card:nth-child(2) .card-copy .tag {
  background: var(--terracotta);
}

.programme-card:nth-child(2) .card-arrow {
  background: var(--terracotta);
}

.programme-card:nth-child(3) .card-copy .tag {
  background: var(--brown);
}

.programme-card:nth-child(3) .card-arrow {
  background: var(--brown);
}

.card-copy h3 {
  font-size: 27px;
  letter-spacing: -.01em;
}

.card-copy p {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 9px;
  padding-right: 20px;
  color: var(--gray);
}

.card-arrow {
  position: absolute;
  right: 10px;
  bottom: 8px;
  background: var(--orange);
  color: var(--white);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.c-impact {
  margin-top: var(--section-gap);
  background: var(--cream);
  border-radius: var(--r);
  display: grid;
  grid-template-columns: 32% 68%;
  overflow: hidden;
}

.c-impact-photo {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.c-impact-copy {
  padding: 40px;
}

.c-impact h2 {
  font-size: 36px;
  line-height: 1.1;
}

.c-impact-copy>p:not(.eyebrow) {
  font-size: 18px;
  margin-top: 15px;
  max-width: 480px;
}

.c-impact .stats {
  margin-top: 24px;
}

.c-impact .stats strong {
  font-size: 34px;
}

.testimonial {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 25px;
  border-radius: var(--r);
  background: var(--terracotta);
  color: var(--white);
  padding: 30px 40px;
}

.testimonial>img {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  flex-shrink: 0;
}

.testimonial blockquote {
  margin: 0;
  max-width: none;
}

.testimonial p {
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
}

.testimonial cite {
  display: block;
  font-size: 15px;
  margin-top: 12px;
  font-style: normal;
}

.c-support {
  margin-top: 20px;
  border-radius: var(--r);
  background: var(--cream);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 25px 28px;
  box-shadow: var(--shadow);
}

.support-icon {
  flex-shrink: 0;
}

.c-support h2 {
  font-size: 20px;
  letter-spacing: -.015em;
}

.c-support p {
  font-size: 16px;
  margin-top: 7px;
}

.support-actions {
  max-width: 100%;
  margin-left: auto;
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.support-actions .button {
  font-size: 15px;
  padding: 11px 18px;
  gap: 12px;
}

.modal {
  border: 0;
  padding: 0;
  border-radius: var(--r);
  width: min(820px,calc(100% - 32px));
  max-height: 85dvh;
  background: var(--cream);
  color: var(--brown);
  box-shadow: var(--shadow-modal);
}

.modal::backdrop {
  background: var(--overlay);
}

.modal__content {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85dvh;
}

.modal__scroll {
  padding: 40px 30px;
  overflow-y: auto;
  scrollbar-width: none;
}

.modal__scroll::-webkit-scrollbar {
  display: none;
}

.modal__scroll>h2 {
  text-align: center;
}

.modal__scroll>.eyebrow {
  text-align: center;
}

.modal__scroll article {
  margin-top: 25px;
}

.modal__scroll article p {
  margin-top: 8px;
}

.modal__scroll>.button {
  margin-top: 25px;
  background: var(--orange);
  color: var(--white);
}

.modal-close {   /* 22/10/2026 (Julien) : pastille ronde orange, croix blanche, sans cadre carré au focus */
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
  transition: transform var(--transition);
}

.modal-close svg { width: 22px; height: 22px; }
.modal-close:hover { transform: translateY(-1px); }
.modal-close:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--white); }

/* V7 : fenêtres d'inscription aux offres (Julien, 16/10/2026), sur le modèle JBC : croix fixe, défilement invisible, champs blancs, titres centrés */
.modal-inscription { width: min(640px, calc(100% - 32px)); }
.modal-inscription .modal__scroll { padding: 44px 32px 32px; }
.modal-inscription .modal-icone { display: block; width: 56px; height: 56px; flex-basis: 56px; margin: 0 auto 12px; padding: 6px; }
.modal-offre { margin: 0 44px 6px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }

.br-mobile {
  display: none;
}

.hero-copy>.text-link {
  display: flex;
  width: fit-content;
  margin-top: 12px;
}

.c-pillars h3 {
  font-size: 21px;
}

.long-section {
  margin-top: var(--section-gap); /* pleine largeur : tous les blocs font la largeur du hero (Julien, 29/09/2026) */
}

.long-heading {
  display: grid;
  grid-template-columns: minmax(0,auto) minmax(0,520px);
  justify-content: start;
  gap: 56px;
  align-items: end; /* V6 : le texte juste à côté du titre, calé sur sa dernière ligne (Julien, 16/10/2026) */
  margin-bottom: 35px;
  border-top: var(--line); /* un trait pour délimiter chaque partie (Julien, 16/09/2026 ; étendu à tous les blocs le 29/09/2026) */
  padding-top: 32px;
}

.long-heading h2 {
  font-size: clamp(30px,3.15vw,46px);
  line-height: 1.12;
}

.long-heading>p {
  max-width: 520px;
  margin-bottom: 4px; /* la dernière ligne du texte tombe sur la ligne de base du titre */
}

/* V7 (Julien, 16/10/2026 : « il faut toujours de l'espace entre le texte et les cartes ») : 32 px entre un texte et une série de cartes,
   dans les deux sens, partout. 24 px sur téléphone (bloc 640). */
:is(p, ul, h3) + :is(.learning-grid, .chiffres-ci, .benefices, .cas-ci, .comparatif-ci, .deux-voies, .volunteer-steps, .avant-apres, .offer-grid, .quote-grid, .news-grid, .projets, .vision-mission, .coches--deux) { margin-top: 32px; }
:is(.learning-grid, .chiffres-ci, .benefices, .cas-ci, .comparatif-ci, .deux-voies, .volunteer-steps, .avant-apres, .offer-grid, .quote-grid, .news-grid, .projets, .vision-mission, .coches--deux) + :is(p, h3) { margin-top: 32px; }

.long-heading:has(>div:only-child) {
  grid-template-columns: 1fr;
}

.text-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  color: var(--orange);
  font-size: 16px;
  font-weight: 700;
}

/* Lien de suite en fin de bloc : à droite et un peu plus bas, là où l’œil arrive après la lecture (règle Julien, 29/09/2026). */
.suite { display: flex; justify-content: flex-end; margin-top: 36px; }
.text-link [aria-hidden="true"] { font-size: 21px; line-height: 1; transition: transform var(--transition); }

.lead {
  font-size: 23px;
  line-height: 1.5;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.mission-statement>p:first-child {
  font-size: 25px;
  line-height: 1.5;
  font-weight: 600;
}

.mission-statement p+p {
  margin-top: 24px;
}

.mission-points {
  display: grid;
  gap: 16px;
}

.mission-points article {
  background: var(--white);
  border-left: var(--border-strong);
  border-radius: var(--r-sm) var(--r) var(--r) var(--r-sm);
  padding: 22px 26px 22px 28px;
  box-shadow: var(--shadow);
}

.mission-points h3 {
  font-size: 23px;
  margin-bottom: 9px;
}

.card-image {
  height: 270px; /* cadre rehaussé : les visages des photos verticales restent entiers (Julien, 16/09/2026) */
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform var(--motion);
}

.programme-card:nth-child(1) .card-image img {
  object-position: 50% 18%; /* Journée de l'Excellence : orateur cadré tête et buste */
}

.programme-card:nth-child(4) .card-image img {
  object-position: 50% 30%; /* remise de certificat : les deux visages entiers */
}

.card-copy p:not(.tag) {
  font-size: 17px;
  color: var(--brown);
  padding: 0;
  margin-top: 15px;
  line-height: 1.6;
}

.programme-list {
  padding-left: 19px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray);
}

.programme-list li+li {
  margin-top: 8px;
}

.card-copy>p:not(.tag):has(+ .text-link) {
  margin-bottom: 20px; /* V7 : le lien ne colle plus au texte (Julien, 16/10/2026) */
}

.card-copy>.text-link {
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--line);
  justify-content: flex-end;
}

.conversations-long {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  padding: 0;
  background: var(--brown);
  color: var(--cream);
  border-radius: var(--r-lg);
}

.conversations-intro {
  position: relative;
  isolation: isolate;
  padding: 48px;
  background: var(--orange);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

.conversations-intro h2 {
  font-size: clamp(34px,3.1vw,46px);
  line-height: 1.05;
}

.conversations-intro .eyebrow {
  color: var(--cream);
}

.conversations-intro p:not(.eyebrow) {
  margin: 24px 0;
}

.conversations-intro .lead {
  font-size: 25px;
  line-height: 1.5;
  font-weight: 600;
}

.conversations-content {
  position: relative;
  isolation: isolate;
  padding: 48px;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.learning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}

.learning-grid article {
  background: var(--cream);
  border-radius: var(--r);
  padding: 26px 28px 28px;
  box-shadow: var(--shadow);
  color: var(--text); /* dans le panneau brun (Conversations), le texte hérité était blanc sur carte claire (Julien, 16/09/2026) */
}

.learning-grid article h3 {
  color: var(--brown);
}

.learning-grid article:nth-child(even) {
  background: var(--tint-orange); /* une teinte sur deux, pour la lecture (Julien, 16/09/2026 : « des cadres, un peu de couleurs différentes ») */
}

.bloc-teinte .learning-grid article:nth-child(even) {
  background: var(--cream); /* V7 : sur un bloc déjà teinté, la carte teintée disparaissait dans le fond : même couleur pour toutes (Julien, 16/10/2026) */
}

.learning-grid article>span {
  color: var(--orange);
  font-weight: 700;
  font-size: 42px;
  display: block;
  margin-bottom: 10px;
}

.learning-grid h3 {
  font-size: 22px;
  line-height: 1.2;
}

.learning-grid p {
  font-size: 16px;
  margin-top: 12px;
  line-height: 1.55;
}

.button-light {
  background: var(--cream);
  color: var(--brown);
  border-color: var(--cream);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}

.offer-card {
  background: var(--cream);
  border: var(--bord-carte);
  border-radius: var(--r);
  padding: 27px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.offer-card h3 {
  font-size: 24px;
  line-height: 1.15;
}

.offer-card .eyebrow {
  font-size: 14px;
}

.offer-card p:not(.eyebrow) {
  font-size: 16px;
  margin-top: 15px;
  line-height: 1.6;
}

.offer-card .text-link {
  font-size: 15px;
  margin-top: auto;
  padding-top: 20px;
  align-self: flex-end; /* l'action d'une carte : en bas à droite, dans le sens de lecture (Julien, 29/09/2026) */
}

.section-note {
  margin-top: 24px;
  color: var(--gray);
  font-size: 16px;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
}

.quote-card {
  background: var(--cream);
  padding: 32px;
  margin: 0;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  border: var(--bord-carte);
}

.quote-card blockquote {
  margin: 0;
  font-style: italic; /* citations en italique (Julien, 16/09/2026) */
}

.quote-card p {
  font-size: 17px;
  line-height: 1.7;
}

.quote-card figcaption {
  font-size: 16px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 24px;
}

.team-roles {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
}

.team-roles article {
  padding: 28px 20px;
  border-right: 2px solid var(--orange);
}

.team-roles article:last-child {
  border-right: 0;
}

.team-roles span {
  display: block;
  font-size: 19px;
  margin-bottom: 15px;
  color: var(--orange);
  font-weight: 600;
}

.team-roles h3 {
  font-size: 21px;
  line-height: 1.2;
}

.president-note {
  margin-top: 22px;
  background: var(--cream);
  border-radius: var(--r);
  padding: 8px 28px;
}

.president-note-titre { /* V7 : bloc toujours ouvert, plus d'accordéon ni de croix (Julien, 16/10/2026) */
  padding-top: 24px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
}

.faq-list summary {
  font-size: 20px;
  line-height: 1.35;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 75px;
  font-weight: 600;
  list-style: none;
}

.faq-texte {
  min-width: 0; /* la question forme UN seul bloc : sinon le flex du summary isole « sont-ils » (nowrap) et la ligne déborde à 320 px */
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

/* flèche : vers la droite fermée, vers le bas ouverte, ouverture douce par main.js (règle Julien, 05/10/2026) */
.faq-list summary .faq-fleche {
  flex: none;
  display: flex;
  width: 26px;
  height: 26px;
  color: var(--orange);
  transform: rotate(-90deg);
  transition: transform .38s cubic-bezier(.2, .7, .2, 1);
}
.faq-list summary .faq-fleche svg { width: 100%; height: 100%; }

.faq-list details[open] summary .faq-fleche { transform: none; }
.faq-list details.se-ferme summary .faq-fleche { transform: rotate(-90deg); }
.faq-list details > :not(summary) { transition: opacity .38s ease; }
.faq-list details.se-ferme > :not(summary) { opacity: 0; }

.president-note>div {
  padding: 14px 0 26px;
}

.article-long { margin-top: 44px; } /* article plus proche de son hero (Julien, 29/09/2026) */

.partenaires-long {
  padding: 45px;
  background: var(--orange); /* bloc sombre pour changer de rythme (Julien, 29/09/2026) */
  color: var(--white);
  border-radius: var(--r-lg);
  --texture-couleur: var(--white);
  --texture-opacite: 0.144;
}

.partenaires-long h2 { color: var(--white); }
.partenaires-long .eyebrow { color: var(--cream); }

/* Bloc teinté avec la texture, comme la lettre (témoignages, Julien 29/09/2026) */
.bloc-teinte {
  padding: 45px;
  background: var(--tint-orange);
  border-radius: var(--r-lg);
  --texture-opacite: 0.09;
}

.partenaires-long .long-heading, .bloc-teinte .long-heading, .contact-long .long-heading { border-top: 0; padding-top: 0; } /* un bloc de couleur se sépare déjà tout seul */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 35px;
  margin-bottom: 32px;
}

.partner-grid article {
  padding-top: 25px;
  border-top: 2px solid var(--orange);
}

.partner-grid h3 {
  font-size: 25px;
  margin-bottom: 15px;
}

.partner-grid p {
  font-size: 17px;
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.news-card {
  min-width: 0;
  background: var(--cream);
  padding: 40px;
  border: var(--bord-carte);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition),box-shadow var(--transition);
}

.news-card h3 {
  font-size: 32px;
  margin-bottom: 20px;
}

.news-card p:not(.eyebrow) {
  font-size: 18px;
  margin-bottom: 16px;
}

.news-card .text-link {
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-end;
}

.video-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--brown);
  aspect-ratio: 16/9;
  max-width: 1060px;
  margin: auto;
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-caption {
  text-align: center;
  margin-top: 16px;
  font-size: 15px;
  color: var(--gray);
}

.volunteer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}

.volunteer-grid p {
  margin-bottom: 22px;
}

.volunteer-grid .lead {
  font-size: 24px;
}

.volunteer-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 1fr; /* toutes les étapes à la même hauteur : les pastilles sont équidistantes (Julien, 16/09/2026) */
  row-gap: 14px;
}

.volunteer-steps li {
  counter-increment: step;
  position: relative;
  padding: 26px 26px 22px 88px; /* carte : 26 px en haut, la première ligne est centrée sur la pastille (top 18 + 22 = 40 = 26 + 14) */
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.nowrap {
  white-space: nowrap;
}

.volunteer-steps li:before {
  content: counter(step,decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}

.volunteer-steps h3 {
  font-size: 23px;
  margin-bottom: 10px;
}

.volunteer-steps p {
  font-size: 17px;
}

.faq-long {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 0;
}

.faq-long .long-heading {
  display: block;
  padding-right: 35px;
}

.faq-list details {
  border-bottom: var(--line);
  padding: 0 6px;
}

.faq-list details:first-child {
  border-top: var(--line);
}

.faq-list p {
  font-size: 17px;
  padding: 0 30px 24px 0;
}

.contact-long {
  padding: 45px;
  background: var(--cream);
  border-radius: var(--r-lg);
  margin-bottom: 60px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-grid>.formulaire {
  align-self: center; /* le formulaire se centre à la hauteur de la colonne d'infos (Julien, 16/09/2026) */
  background: var(--white);
  border: var(--bord-carte); /* carte bordée d'orange, bien séparée de la lettre (Julien, 29/09/2026) */
  border-radius: var(--r);
  padding: 34px;
}

.contact-grid .lead {
  font-size: 22px;
  margin-bottom: 20px;
}

.contact-address {
  display: block;
  padding: 8px 0;
  min-width: 0;
  word-break: break-word;
  font-size: clamp(17px,1.6vw,24px);
  font-weight: 700;
  color: var(--orange);
  overflow-wrap: anywhere;
}

.contact-grid>div>p:last-child {
  font-size: 17px;
  margin-top: 24px;
}

.contact-form {
  display: grid;
  gap: 18px;
}

.contact-form label {
  font-size: 16px;
  font-weight: 600;
  display: grid;
  gap: 9px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  padding: 13px 14px;
  background: var(--white);
  color: var(--brown);
  border: var(--border);
  border-radius: var(--r-sm);
}

.contact-form select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  padding: 13px 14px;
  background: var(--white);
  color: var(--brown);
  border: var(--border);
  border-radius: var(--r-sm);
}

.contact-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  padding: 13px 14px;
  background: var(--white);
  color: var(--brown);
  border: var(--border);
  border-radius: var(--r-sm);
  resize: none; /* jamais de poignée, le champ grandit avec le texte (règle Julien, 01/10/2026) */
  overflow: hidden;
  min-height: 140px;
}

.contact-form input:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.contact-form select:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.contact-form textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.contact-form .form-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray);
}

.contact-form .form-status {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray);
}

.contact-form .button {
  justify-self: start;
}

.modal p {
  font-size: 17px;
  line-height: 1.7;
}

.modal h3 {
  font-size: 28px;
}

.modal__scroll article+article {
  border-top: var(--line);
  padding-top: 25px;
}

.modal__scroll article[hidden] {
  display: none;
}

.modal__scroll article p+p {
  margin-top: 16px;
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

.reveal-pending { opacity: 0; transform: translateY(28px); }

.reveal-visible { opacity: 1; transform: none; transition: opacity var(--motion), transform var(--motion); transition-delay: var(--retard, 0ms); }

.mission-grid > * { min-width: 0; }
.associative-offers { margin-top: 24px; padding: 28px; border: var(--border-strong); border-radius: var(--r); text-align: center; }
.associative-offers p { max-width: 900px; margin-inline: auto; }
.associative-offers h3 { font-size: 24px; margin-bottom: 12px; }
.modal h4 { margin: 24px 0 8px; font-size: 20px; line-height: 1.3; }



.eyebrow-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; padding: 3px; background: var(--cream); border-radius: var(--r-sm); }
.conversations-content::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url('../img/conversations-fond.webp') center / cover; opacity: .14; z-index: -1; }
.offer-visual { width: 100%; height: 160px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 22px; transition: transform var(--transition); }
.team-portrait { width: 100%; height: 250px; object-fit: cover; object-position: center 36%; border-radius: var(--r-sm); margin-bottom: 24px; }
.footer .switch { color: var(--white); }

/* ===== Composants ajoutés le 14/09/2026 (pages intérieures, pied de page en colonnes) ===== */
.page-hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 44px; align-items: center; border-radius: var(--r-lg); background-color: var(--tint-orange); padding: 40px 32px 40px 5%; min-height: 460px; } /* V9 : image plus grande (Julien, 21/10) */
.page-hero:not(.page-hero--image) { grid-template-columns: 1fr; }
.page-hero:not(.page-hero--image) .hero-copy { max-width: 820px; }
.page-hero h1 { font-size: clamp(32px,3.4vw,52px); line-height: 1.1; }
.page-hero .lead { margin-top: 20px; max-width: 640px; font-size: 21px; line-height: 1.5; }
.page-hero .eyebrow { font-size: 15px; letter-spacing: .13em; margin-bottom: 18px; }
.page-kicker { display: inline-flex; align-items: center; margin-top: 18px; padding: 16px 24px; border-radius: var(--r); line-height: 1.5; /* V6 : arrondi de carte et marge, la pilule touchait le texte sur plusieurs lignes (Julien, 16/10/2026) */ background: var(--cream); color: var(--brown); font-size: 15px; font-weight: 700; }
.page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 26px; }
.page-hero-visual { border-radius: var(--r-lg); overflow: hidden; background: var(--orange); aspect-ratio: 3 / 2; }
.page-hero--portrait { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); } /* V9 : photo en hauteur, montrée entière (Aurélie, 21/10) */
.page-hero--portrait .page-hero-visual { aspect-ratio: 2 / 3; width: min(100%, 460px); justify-self: center; }
.page-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.breadcrumb { padding: 18px 3% 14px; font-size: 15px; color: var(--gray); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.breadcrumb li+li:before { content: "›"; margin-right: 10px; color: var(--orange); }
.breadcrumb a { color: var(--brown); font-weight: 600; }
.breadcrumb li[aria-current] { color: var(--gray); }
.programme-detail { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; }
.programme-detail .long-heading { margin-bottom: 26px; }
.programme-detail .long-heading+.long-heading { margin-top: 56px; }
.programme-detail .learning-grid, .programme-detail .volunteer-steps, .programme-detail .long-heading>p { margin-bottom: 56px; }
.aside-card { position: sticky; top: max(190px, calc(50vh - 170px)); /* sous le header en carte, vers le milieu de l'écran (Julien, 29/09/2026) */ background: var(--cream); border: var(--bord-carte); border-radius: var(--r); padding: 30px; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } /* minmax(0,…) : un enfant large ne peut plus élargir le contenu jusqu'au bord de la carte (16/09/2026) */
.aside-card h3 { font-size: 24px; }
.aside-card p:has(>.text-link) { display: flex; justify-content: flex-end; }
.aside-card .button { justify-self: end; } /* l'action en bas à droite (Julien, 29/09/2026) */
.aside-note { font-size: 15px; color: var(--gray); line-height: 1.55; }
.fiche { margin: 0; display: grid; gap: 12px; }
.fiche div { border-top: var(--line); padding-top: 12px; }
.fiche dt { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); font-weight: 700; }
.fiche dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.composantes li { padding-bottom: 30px; }
.composantes h3 { font-size: 23px; margin-bottom: 10px; }
.composantes p { font-size: 17px; }
.stats--inline { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); margin: 0 0 var(--section-gap); gap: 24px; }
.stats--inline strong { font-size: 48px; white-space: normal; }
.stats--inline p { font-size: 17px; }
.learning-grid--page { margin-top: 0; }
.learning-grid--page article>span { color: var(--orange); }
.quote-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: var(--section-gap); }
.quote-card--wide { margin-top: var(--section-gap); }
.cards--text .card-copy { padding: 34px; }
.cards--text .card-copy p:not(.tag) { margin-top: 12px; }
.cards--text .card-copy>.text-link { margin-top: 20px; }
.badge { display: inline-block; margin-top: 14px; padding: 8px 14px; border-radius: var(--r-sm); /* V7 : arrondi de carte, le bandeau passe sur 2 lignes sur téléphone */ background: var(--tint-orange); color: var(--brown); font-size: 13px; font-weight: 700; }
.offer-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pager { margin-top: var(--section-gap); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: #ffffff8c; border-radius: var(--r-lg); font-weight: 700; } /* petit bandeau blanc translucide arrondi (Julien, 16/09/2026) */
.pager .button { min-height: 44px; gap: 12px; padding-inline: 20px; } /* boutons orange pleins, flèche décollée du nom (Julien, 16/09/2026) */
.cta-band { position: relative; isolation: isolate; overflow: visible; margin: var(--section-gap) 0 60px; border-radius: var(--r-lg); background: var(--orange); color: var(--white); padding: 52px 6%; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.cta-band h2 { font-size: clamp(24px,7.5vw,42px); line-height: 1.1; } /* 24 px à 320, 28 px dès 373 : « Chaque programme avance » tient sur sa ligne */
.cta-band p { margin-top: 16px; max-width: 560px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.cta-band .button-outline { color: var(--white); border-color: var(--white); }
.article-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 60px; align-items: start; }
.article { max-width: 72ch; }
.article--wide { max-width: 82ch; }
.article h2 { font-size: 28px; margin: 40px 0 14px; }
.article p { margin-top: 16px; font-size: 18px; }
.article ul { margin: 16px 0 0; padding-left: 22px; font-size: 18px; line-height: 1.65; }
.article li+li { margin-top: 8px; }
.article blockquote { margin: 28px 0; padding: 22px 28px; border-left: var(--border-strong); background: var(--cream); border-radius: 0 var(--r) var(--r) 0; font-style: italic; }
.article blockquote p { margin: 0; font-size: 20px; }
.president-word { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 50px; align-items: start; background: var(--cream); border-radius: var(--r); padding: 40px; }
.president-photo { width: 100%; border-radius: var(--r); object-fit: cover; aspect-ratio: 3 / 4; }
.president-word p+p { margin-top: 18px; }
.president-word--text { grid-template-columns: minmax(0,1fr); max-width: 900px; }
.signature { margin-top: 26px; font-weight: 700; color: var(--orange); }
.partner-logos { margin: 10px 0 30px; }
.partner-logos ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.partner-logos li { background: var(--white); border-radius: var(--r-sm); padding: 14px 22px; }
.partner-logos img { height: 56px; width: auto; }
.faq-long--page { display: block; }
.faq-long--page .long-heading { padding-right: 0; }
.contact-form--wide { max-width: 900px; }
.contact-form>*, .form-grid>* { min-width: 0; }
.contact-form .h3, .contact-grid .h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin: 22px 0 6px; }
.contact-grid .h3:first-child { margin-top: 0; }
.h3-icone { display: flex; align-items: center; gap: 10px; }
.contact-form .check { grid-template-columns: 24px 1fr; align-items: start; font-weight: 400; font-size: 15px; line-height: 1.5; }
.contact-form .check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--orange); }
.contact-form .hp { position: absolute; left: 0; top: 0; opacity: 0; height: 1px; width: 1px; padding: 0; border: 0; overflow: hidden; pointer-events: none; }
.form-status:empty { display: none; }
.form-status:not(:empty) { padding: 14px 18px; border-radius: var(--r-sm); background: var(--tint-orange); color: var(--brown); font-size: 16px; }
.video-frame { position: relative; }
.video-play { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); min-height: 50px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 24px; border: 0; border-radius: var(--r-pill); background: var(--orange); color: var(--white); font-weight: 700; font-size: 16px; box-shadow: var(--shadow-lift); }
.video-play span { font-size: 14px; }
.video-frame.is-full .video-play { display: none; }
.br-desktop { display: inline; }
.footer-top { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 32px; } /* V2 : marque et contact à gauche, puis les 5 rubriques du menu */
.footer-top>* { min-width: 0; }
.programme-detail>*, .article-grid>*, .cta-band>*, .page-hero>* { min-width: 0; }
.footer-brand .footer-devise { margin: 20px 0 10px; font-size: 19px; line-height: 1.5; border-left: 2px solid var(--accent); padding-left: 18px; opacity: 1; }
.footer-col h2 { gap: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--bright); margin-bottom: 14px; }
.footer-col h2 a { color: inherit; font-size: inherit; min-height: 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--white); overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--bright); }
.footer-contact p { font-size: 15px; line-height: 1.55; opacity: .85; }
.footer-bottom { margin: 34px -40px -28px; padding: 6px 40px; background: var(--chocolat); border-radius: 0 0 var(--r) var(--r); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } /* bandeau noir, pendant du bandeau orange du header (Julien, 29/09/2026) */
.footer-bottom small { font-size: 13px; }
.footer-bas-liens { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.footer-bas-liens a { display: flex; align-items: center; min-height: 40px; }
.footer-coord { display: grid; gap: 0; }
.footer-contact .footer-coord a { min-height: 32px; } /* e-mail et téléphone resserrés (Julien, 29/09/2026) */

.formulaire { display: block; }
.formulaire .form-etapes { width: 100%; }
.form-rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-rangee>* { min-width: 0; }
.champ { margin-bottom: 16px; }
.champ input, .champ textarea, .champ select { width: 100%; min-width: 0; font: inherit; font-weight: 400; font-size: 16px; padding: 14px 16px; background: var(--white); color: var(--brown); border: var(--border); border-radius: var(--r-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.champ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ED5312' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.champ select:invalid { color: var(--gray); }
.champ input::placeholder, .champ textarea::placeholder { color: #8f857c; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px #ed531233; }
.champ textarea { min-height: 120px; }
.champ input.invalide, .champ textarea.invalide, .champ select.invalide { border-color: var(--terracotta); box-shadow: 0 0 0 3px #ba4d3226; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.formulaire .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.formulaire .hp input { font-size: 16px; } /* piège à robots : 16 px comme les vrais champs, jamais de zoom iOS */
.form-etape { display: none; }
.form-etape.actif { display: block; }
.form-etapes:not([data-js]) .form-etape { display: block; }
.form-etapes:not([data-js]) .form-suivant, .form-etapes:not([data-js]) .form-precedent, .form-etapes:not([data-js]) .form-progres { display: none; }
.form-etape[data-num="0"] { text-align: center; padding: 10px 0 6px; }
.form-progres { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; text-align: center; }
.form-titre { font-size: 26px; margin-bottom: 18px; text-align: center; } /* V7 : titres d'étape centrés sur tous les formulaires (Julien, 16/10/2026) */
.form-intro { color: var(--gray); margin-bottom: 22px; font-size: 17px; }
.form-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.form-nav .button { flex: 1 1 auto; }
.form-nav .form-precedent { flex: 0 1 auto; }
.form-confirmation, .form-erreur { display: none; margin-top: 18px; font-size: 17px; border-radius: var(--r-sm); padding: 16px 18px; }
.form-confirmation { color: var(--brown); background: var(--tint-orange); border-left: var(--border-strong); }
.form-erreur { color: #7a2a1f; background: #f9e4e0; }
.form-confirmation.visible, .form-erreur.visible { display: block; }
.payer-maintenant { display: flex; width: fit-content; margin: 20px auto 0; } /* 22/10/2026 : bouton de paiement centré sous la confirmation */
/* V7 (Julien, 16/10/2026 : « tu harmonises tout ça ») : consentement en petite carte blanche centrée, encadré récapitulatif en dernière étape, sur tous les formulaires */
.formulaire .check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; max-width: 460px; margin: 6px auto 14px; padding: 14px 18px; background: var(--white); border: var(--border); border-radius: var(--r); font-size: 15px; line-height: 1.45; }
.formulaire .check input:focus { outline: none; }
.formulaire .check input:focus-visible { outline: 3px solid #ed531266; outline-offset: 2px; }
.encadre-etape { display: grid; justify-items: center; gap: 4px; margin-bottom: 18px; padding: 20px 22px; background: var(--tint-orange); border-radius: var(--r); text-align: center; }
.encadre-etape .eyebrow-icon { width: 40px; height: 40px; flex-basis: 40px; margin-bottom: 6px; }
.encadre-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.encadre-theme { font-family: var(--font-titres); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--brown); }
.encadre-note { font-size: 15px; color: var(--gray); }
.note-centree { text-align: center; }
.formulaire .check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--orange); }

/* Motifs décoratifs : faisceaux de lignes topographiques générés avec GPT Image 2.5 (PNG transparents, assets/img/motifs/),
   choisis par Julien le 16/09/2026 (P6 vague, P7 repli court, P9 croisée). Deux calques posés par build.py (helper traits) :
   .traits-ext (orange, déborde du panneau, sous le contenu) et .traits-int (même dessin clipé au panneau, couleur --trait-int).
   Le PNG sert de masque : la couleur vient du CSS. Le panneau porteur est en position: relative + isolation: isolate.
   Une pose = une forme + un coin ; --k réduit tout en mobile. */
.traits-ext, .traits-int { position: absolute; inset: 0; z-index: -1; pointer-events: none; --k: 1; }
.traits-int { overflow: hidden; border-radius: inherit; }
.motif { position: absolute; width: calc(var(--w) * var(--k)); height: calc(var(--w) * var(--k)); background: var(--orange); -webkit-mask: var(--forme) center / contain no-repeat; mask: var(--forme) center / contain no-repeat; opacity: var(--o, 1); }
.traits-int .motif { background: var(--trait-int, var(--orange)); }
.motif-vague { --forme: url("../img/motifs/motif-vague.png"); }
.motif-repli { --forme: url("../img/motifs/motif-repli-court.png"); }
.motif-croisee { --forme: url("../img/motifs/motif-croisee-bas.png"); }
.motif-vague.pose-hd { --w: 360px; right: calc(-120px * var(--k)); top: calc(-120px * var(--k)); transform: scaleX(-1) rotate(10deg); }
.motif-repli.pose-bd { --w: 520px; right: calc(-170px * var(--k)); bottom: calc(-190px * var(--k)); transform: rotate(170deg); }
.motif-croisee.pose-bd { --w: 520px; right: calc(-150px * var(--k)); bottom: calc(-190px * var(--k)); --o: .85; }
.cta-band, .conversations-content { --trait-int: var(--white); }
/* V7 (Julien, 16/10/2026) : toutes les opacités de texture baissées de 10 % (« un peu trop présente ») */
/* Texture wax en surimpression légère (tuile GPT Image 2.5 tirée du hero, répétable par miroir), posée par build.py (helper texture) sur quelques panneaux seulement */
.texture { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--texture-couleur, var(--orange)); opacity: var(--texture-opacite, 0.063); -webkit-mask: url("../img/motifs/texture-trait.png") 0 0 / 1500px repeat; mask: url("../img/motifs/texture-trait.png") 0 0 / 1500px repeat; }
.cta-band, .conversations-intro { --texture-couleur: var(--white); --texture-opacite: 0.144; }
.footer { isolation: isolate; --texture-couleur: var(--cream); --texture-opacite: 0.063; }
.c-hero, .page-hero { --texture-opacite: 0.117; }
.conversations-content { --trait-int: #f5e6d8; }

/* ===== Composants V2 (25/09/2026) : menu déroulant, réseaux, lettre, programmes sur une page, catégories de parcours, fondation, vidéos ===== */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; min-height: 40px; padding: 0 40px; background: var(--orange); border-radius: var(--r) var(--r) 0 0; } /* V3 : bandeau orange en tête de la carte du header (Julien, 29/09/2026) */
.topbar-lien { display: flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 700; color: var(--white); }
.topbar-lien:hover { color: var(--cream); }
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.reseaux a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); color: var(--orange); transition: background var(--transition), color var(--transition); }
.reseaux a:hover { background: var(--tint-orange); }
.reseaux svg { width: 22px; height: 22px; }
.reseaux--haut a { width: 32px; height: 32px; color: var(--white); } /* rond de survol juste autour de l’icône, pas coupé par le bandeau (Julien, 29/09/2026) */
.reseaux--haut svg { width: 20px; height: 20px; }
.reseaux--haut a:hover { background: #ffffff26; }
.reseaux--pied { gap: 2px; }
.reseaux--pied a { width: 38px; height: 38px; color: var(--white); background: transparent; transition: transform var(--transition), background var(--transition); } /* blancs au repos, pour laisser le don ressortir (Julien, 29/09/2026) */
.reseaux--pied a:hover { background: var(--orange); transform: translateY(-3px); } /* au survol : la pastille orange apparaît et l'icône monte */
.reseaux--contact { margin-top: 18px; }
.nav-item { position: relative; }
.nav-top { gap: 4px; }
.nav-top[aria-current="page"] { color: var(--orange); text-decoration: underline 2px var(--orange); text-underline-offset: 8px; } /* la rubrique où l'on se trouve (Julien, 29/09/2026 : « sinon j'arrive pas à suivre ») */
.nav-chevron { display: flex; color: var(--orange); }
.nav-chevron svg { width: 16px; height: 16px; }
.nav-sous { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 250px; list-style: none; margin: 0; padding: 10px; background: var(--cream); border-radius: var(--r); box-shadow: var(--shadow-modal); opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 30; }
.nav-sous::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* pont de survol entre l'intitulé et le menu */
.nav-item:hover .nav-sous, .nav-item:focus-within .nav-sous { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-sous a { min-height: 44px; padding: 8px 14px; border-radius: var(--r-sm); font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.nav-sous a:hover { background: var(--tint-orange); }
.lettre { position: relative; isolation: isolate; width: 92%; max-width: 1440px; margin: 28px auto 0; border: var(--bord-carte); border-radius: var(--r-lg); background: var(--tint-orange); padding: 44px 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; --texture-opacite: 0.09; }
.lettre h2 { font-size: clamp(26px,2.6vw,38px); line-height: 1.1; gap: 16px; }
.lettre-icone { width: 48px; height: 48px; flex-basis: 48px; }
.lettre-texte p { margin-top: 12px; max-width: 520px; }
.lettre-champs { display: flex; gap: 12px; }
.lettre-champs input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 14px 20px; background: var(--white); color: var(--brown); border: var(--border); border-radius: var(--r-pill); }
.lettre-champs input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px #ed531233; }
.lettre-form:has(.form-confirmation.visible) .lettre-champs { display: none; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; } /* le don en bas à droite */
.footer-video { gap: 10px; font-weight: 700; }
.footer-video svg { width: 20px; height: 20px; color: var(--bright); }
.puces ul { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.puces a, .meme-categorie a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border-radius: var(--r-pill); background: var(--cream); border: var(--border); color: var(--brown); font-weight: 700; transition: border-color var(--transition), color var(--transition); }
.puces a:hover, .meme-categorie a:hover { border-color: var(--orange); color: var(--orange); }
.puces a { background: var(--orange); border-color: var(--orange); color: var(--white); } /* V7 : fond orange, texte blanc (Julien, 16/10/2026) */
.puces a:hover { background: var(--brown); border-color: var(--brown); color: var(--white); }
.programme-bloc { position: relative; isolation: isolate; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; background: var(--orange); color: var(--white); border-radius: var(--r-lg); padding: 36px; --texture-couleur: var(--white); --texture-opacite: 0.144; } /* fond orange texturé (Julien, 29/09/2026) */
.programme-bloc h2 { color: var(--white); }
.programme-bloc .eyebrow { color: var(--cream); }
.programme-bloc>* { min-width: 0; }
.programme-bloc--inverse .programme-bloc-visuel { order: 2; }
.programme-bloc-visuel { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.programme-bloc-visuel img { width: 100%; height: 100%; object-fit: cover; }
.programme-bloc-texte h2 { font-size: clamp(34px,3.6vw,56px); }
.programme-accroche { font-family: var(--font-titres); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--cream); margin: 10px 0 16px; }
.programme-section, .section-trait { border-top: var(--line); padding-top: 48px; } /* un trait entre les programmes, comme sur l'accueil (Julien, 29/09/2026) */
.programme-section { position: relative; border-top-width: 3px; padding-top: 56px; }
.programme-section .programme-num { position: absolute; top: -29.5px; left: 0; margin: 0; } /* pastille 1, 2, 3 sur le trait, comme les parcours */
.projets-titre { margin: 44px 0 18px; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
.projets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.projets li { min-width: 0; background: var(--cream); border: var(--bord-carte); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.projets h3 { font-size: 20px; margin-bottom: 10px; }
.projets p { font-size: 16px; line-height: 1.55; }
.suite-carte { margin-top: auto; padding-top: 14px; display: flex; justify-content: flex-end; }
.categorie-tete { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 22px; align-items: start; }
.categorie-tete .long-heading { margin-left: -22px; padding-left: 22px; border-top-width: 3px; }
.categorie-num { position: relative; z-index: 1; margin-top: -26.5px; box-shadow: 0 0 0 12px var(--bg); /* le trait part du milieu du chiffre, avec un petit espace (Julien, 29/09/2026) */ width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--orange); color: var(--white); font-family: var(--font-titres); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.offer-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.offer-card--photo .offer-visual { height: auto; aspect-ratio: 3 / 2; } /* V9 : photo en proportion, plus grande sur les cartes larges (Aurélie, 21/10), jamais de tête coupée */
.offer-card--photo .offre-nom { margin: 2px 0 18px; font-size: clamp(26px,2.4vw,32px); line-height: 1.15; } /* V7 : nom de l'offre au-dessus de la photo, plus gros (Julien, 16/10/2026) */
.appels { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; background: var(--cream); border-radius: var(--r-lg); padding: 40px 5%; }
.appels .long-heading { margin-bottom: 0; grid-template-columns: 1fr; gap: 16px; border-top: 0; padding-top: 0; }
.appels .long-heading>p { margin-top: 0; }
.appels-etat { display: grid; gap: 16px; justify-items: center; text-align: center; } /* au milieu du bloc (Julien, 29/09/2026) */
.appels-vide { font-weight: 700; padding: 12px 18px; border-radius: var(--r-sm); background: var(--tint-orange); }
.categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
/* V7 : l'essentiel d'une offre en pastilles sur sa carte (Julien, 16/10/2026). Une pastille = une info courte, jamais coupée */
.pastilles { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { padding: 6px 14px; border: 2px solid transparent; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.pastilles .pastille--duree { background: var(--brown); color: var(--white); }   /* durée et rythme */
.pastilles .pastille--format { background: var(--white); border-color: var(--orange); color: var(--orange); }   /* format */
.pastilles .pastille--prix { background: var(--orange); color: var(--white); }   /* prix et accès */
.categorie-carte { min-width: 0; background: var(--cream); border-radius: var(--r); padding: 30px; border: var(--bord-carte); /* bord orange tout autour (Julien, 29/09/2026) */ display: flex; flex-direction: column; gap: 12px; }
.categorie-num--carte { margin: 0 0 4px; width: 44px; height: 44px; font-size: 21px; box-shadow: none; } /* V9 : 1, 2, 3 sur les cartes (Julien, 21/10) */
.categorie-eye { display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; color: var(--orange); } /* V6 : avec l'icône du set (Julien, 16/10/2026) */
.categorie-carte h3 { font-size: 24px; }
.categorie-carte p { font-size: 16px; line-height: 1.55; }
.categorie-offres { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: grid; }
.categorie-offres a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; border-top: var(--line); font-weight: 700; transition: color var(--transition); }
.categorie-offres a:hover { color: var(--orange); }
.prochaine { background: var(--tint-orange); border-radius: var(--r-sm); padding: 14px 16px; display: grid; gap: 4px; }
.prochaine span { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--orange); }
.prochaine b { font-size: 17px; }
.pied-parcours { margin-top: var(--section-gap); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 30px; padding: 18px 26px; background: #ffffff8c; border-radius: var(--r-lg); }
.meme-categorie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.meme-categorie p { font-size: 15px; font-weight: 700; color: var(--gray); }
.meme-categorie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quote-card--portrait { gap: 18px; }
.temoin-photo { width: 88px; height: 88px; border-radius: var(--r-pill); object-fit: cover; }
.quote-card--portrait figcaption { display: grid; gap: 2px; }
.quote-card--portrait figcaption span { font-weight: 500; font-size: 15px; color: var(--gray); }
.quote-grid--duo { grid-template-columns: repeat(2,minmax(0,1fr)); } /* 22/10/2026 : deux témoignages sans photo (De la Résilience à l’Excellence) */
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.logos li { background: var(--white); border-radius: var(--r); padding: 18px 26px; box-shadow: var(--shadow); display: flex; align-items: center; min-height: 110px; }
.logos img { height: 72px; width: auto; }
.vision-mission { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.vision-mission article { position: relative; isolation: isolate; background: var(--orange); color: var(--white); border-radius: var(--r); padding: 36px; --texture-couleur: var(--white); --texture-opacite: 0.144; } /* fond orange texturé comme Conversations Inspirantes (Julien, 29/09/2026) */
.vm-label { display: flex; align-items: center; gap: 14px; font-family: var(--font-titres); font-size: clamp(24px,2.2vw,30px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--white); margin-bottom: 14px; }
.carte-icone { display: block; width: 44px; height: 44px; flex-basis: 44px; margin-bottom: 14px; padding: 5px; } /* V7 : icône du set en tête de carte (Julien, 16/10/2026) */
.vm-icone { width: 44px; height: 44px; flex-basis: 44px; }
.mission-statement--seul { margin-top: 40px; max-width: 900px; }
.citation { position: relative; isolation: isolate; margin-top: var(--section-gap); border-radius: var(--r-lg); background: var(--orange); color: var(--white); padding: 64px 6%; text-align: center; --texture-couleur: var(--white); --texture-opacite: 0.144; }
.citation blockquote { margin: 0; }
.citation blockquote p { font-family: var(--font-titres); font-size: clamp(26px,3.4vw,48px); line-height: 1.15; font-weight: 750; letter-spacing: -.03em; }
.citation-source { margin-top: 18px; font-weight: 700; }
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; }
.frise li { min-width: 0; border-top: 3px solid var(--orange); padding-top: 18px; }
.frise-date { display: block; font-family: var(--font-titres); font-size: 26px; font-weight: 800; color: var(--orange); margin-bottom: 8px; }
.frise p { font-size: 16px; line-height: 1.55; }
.fondatrice { display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); gap: 56px; align-items: center; } /* V9 : portrait plus discret (Aurélie, 21/10) */ /* V7 : portrait plus grand, centré face au texte (Julien, 16/10/2026) */
.fondatrice>* { min-width: 0; }
.fondatrice-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.fondatrice h2 { font-size: clamp(28px,3vw,44px); }
.fondatrice-role { margin: 8px 0 24px; font-weight: 700; color: var(--orange); }
.valeurs, .organisation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.valeurs article { min-width: 0; background: var(--cream); border: var(--bord-carte); border-radius: var(--r); padding: 30px; }
.valeur-icone { width: 64px; height: 64px; margin-bottom: 18px; }
.valeurs h3, .organisation h3 { font-size: 22px; margin-bottom: 10px; }
.organisation article { min-width: 0; text-align: center; } /* médaillon centré, sans trait au-dessus (Julien, 29/09/2026) */
.medaillon { display: block; width: 168px; height: 168px; border-radius: var(--r-pill); object-fit: cover; border: var(--bord-carte); margin: 0 auto 18px; } /* portraits en médaillon (Julien, 29/09/2026) */
.medaillon--vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--cream); }
.medaillon--vide small { font-size: 12px; font-weight: 700; color: var(--gray); text-align: center; line-height: 1.2; }
.partner-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.soutenir-form { margin: 40px auto 0; max-width: 760px; background: var(--white); border-radius: var(--r); padding: 34px; box-shadow: var(--shadow); }
.avis-etat { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--terracotta); }
.news-visuel { display: block; margin-bottom: 22px; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; }
.news-visuel img { width: 100%; height: 100%; object-fit: cover; }
.news-date { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 10px; }
.news-card h3 a:hover { color: var(--orange); }
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--black); }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: var(--r-pill); border: 2px solid var(--orange); background: #ffffff14; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lift); transition: transform var(--transition); } /* V7 : verre dépoli bordé d'orange, l'image et ses sous-titres restent lisibles (Julien, 16/10/2026) */
.yt-play svg { width: 30px; height: 30px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.derniere-video { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; border-top: var(--line); padding-top: 32px; } /* titre à gauche, vidéo à droite (Julien, 29/09/2026) */
.derniere-video>* { min-width: 0; }
.derniere-video .long-heading { grid-template-columns: 1fr; gap: 12px; border-top: 0; padding-top: 0; }
.derniere-video .long-heading>p { margin-top: 0; }
.derniere-video .yt { border: var(--bord-carte); } /* cadre orange autour de l'aperçu (Julien, 29/09/2026) */
.yt--grande { border-radius: var(--r-lg); max-width: 1060px; margin: auto; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-bottom: 24px; }
.video-card { min-width: 0; }
.video-card h3 { margin-top: 14px; font-size: 18px; }
.accueil-hero-visuel { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.accueil-hero-visuel img { width: 100%; height: 100%; object-fit: cover; }
.cards--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }

:where(.feature, .programme-card, .offer-card, .news-card, .quote-card, .categorie-carte, .vision-mission>article, .valeurs>article, .learning-grid>article, .projets>li, .aside-card, .video-card, .logos li) { transition: transform var(--transition); } /* :where = spécificité nulle, l'apparition au défilement garde sa propre transition */

/* ---------------------------------------------------------------- revue des photos (V7, 16/10/2026) : page de travail pour l'équipe, hors menu */
.revue-liste { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.revue-carte { display: grid; gap: 14px; align-content: start; padding: 24px; background: var(--white); border: var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.revue-carte--a-choisir { border: var(--bord-carte); background: var(--cream); }
.revue-carte header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
.revue-page { font-weight: 700; color: var(--brown); }
.revue-verdict { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.revue-duo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.revue-fig { margin: 0; }
.revue-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.revue-fig--apres img { outline: 3px solid var(--orange); outline-offset: -3px; }
.revue-fig figcaption { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--gray); }
.revue-carte>p { font-size: 16px; line-height: 1.55; }
.revue-grille { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }

/* ---------------------------------------------------------------- page de vente Conversations Inspirantes (V5, 14/10/2026)
   Texte d'Aurélie (13/10). Coches : icônes Tabler « check » et « x » du set du site, en masque teinté. */
.label-ci { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.equation-ci { margin-top: 26px; padding: 30px 32px; background: var(--white); border: var(--bord-carte); border-radius: var(--r); box-shadow: var(--shadow); }
.equation-termes { font-family: var(--font-titres); font-size: clamp(20px,2.2vw,28px); font-weight: 800; line-height: 1.25; color: var(--brown); margin-bottom: 8px; }
.avant-apres ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.avant-apres li { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); align-items: stretch; gap: 14px; } /* V7 : les deux cartes d'une ligne à la même hauteur (Julien, 16/10/2026) */
.aa-entete { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 14px; margin-bottom: 14px; font-size: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.aa-entete span { text-align: center; } /* V7 : chaque intitulé centré sur sa colonne (Julien, 16/10/2026) */
.aa-entete span:last-child { grid-column: 3; } /* « Après » au-dessus de ses cartes */
.aa-avant, .aa-apres { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; border-radius: var(--r); font-size: 17px; line-height: 1.5; } /* texte centré dans la hauteur de la carte */
.aa-avant { background: var(--white); border: var(--border); color: var(--gray); }
.aa-apres { background: var(--orange); color: var(--white); font-weight: 600; } /* V7 : carte orange, texte blanc (Julien, 16/10/2026) */
.aa-fleche { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--white); }
.aa-fleche svg { width: 22px; height: 22px; }
.learning-grid--trois { grid-template-columns: repeat(3,minmax(0,1fr)); }
.coches { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.coches--deux { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 34px; margin-bottom: 34px; }
.coches li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.55; }
.coches li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: var(--orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.coches--non li::before { background: var(--gray); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.benefices { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; margin-bottom: 26px; }
.benefices article { padding: 30px; background: var(--cream); border: var(--bord-carte); border-radius: var(--r); }
.benefices .coches { margin-top: 16px; }
.note-honnete { margin-top: 14px; font-size: 15px; font-style: italic; color: var(--gray); }
.cas-ci { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; margin-top: 26px; }
.cas-ci article { display: grid; align-content: start; gap: 14px; padding: 28px 30px; background: var(--white); border: var(--bord-carte); border-radius: var(--r); box-shadow: var(--shadow); }
.cas-ci .button { justify-self: end; }
.comparatif-ci { display: grid; grid-template-columns: repeat(2, minmax(0, 500px)); justify-content: center; grid-template-rows: repeat(5, auto); column-gap: 28px; row-gap: 0; } /* 22/10 : cartes serrées façon Podia (Julien) */
/* sous-grille : titre, prix, note, points, accès et boutons sur les mêmes lignes d'une offre à l'autre (boutons alignés, Julien 14/10/2026) */
.offre-ci { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; padding: 34px 32px; background: var(--white); border: var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.offre-ci--mise { border: var(--bord-carte); background: var(--cream); }
.offre-ci h3 { font-size: 25px; line-height: 1.2; color: var(--brown); }
.offre-ci-titre { display: flex; align-items: center; gap: 14px; } /* 22/10 : icône à côté du titre (Julien) */
.offre-ci-icone { flex: none; width: 44px; height: 44px; }
.offre-ci-sous { margin-top: 6px; font-weight: 700; color: var(--orange); }
.offre-ci-prix { font-family: var(--font-titres); font-size: clamp(34px, 9vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--brown); } /* 22/10 : prix plus gros (Julien) */
.offre-ci-tarif { display: grid; gap: 4px; align-content: start; }
.offre-ci-note { font-size: 15px; color: var(--gray); }
/* V6 : le comparatif à la Podia (Arsène, 15/10) : ce que L'Ascension ajoute en orange, coche pleine */
.coches li.plus { color: var(--orange); font-weight: 700; }
.lignes-podia { display: grid; margin: 4px 0 0; padding: 0; list-style: none; } /* V9 : comparatif façon page de prix de Podia (Aurélie, 21/10) */
.ligne-podia { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0; border-bottom: var(--line); font-size: 16px; font-weight: 600; color: var(--brown); }
.ligne-podia:last-child { border-bottom: 0; }
.ligne-podia img { flex: none; width: 28px; height: 28px; }
.ligne-podia.plus span { color: var(--orange); font-weight: 800; }
.podia-en-plus { margin: 18px 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
/* V6 : sur les pages de vente, les sous-titres de sections portent le tunnel de vente (Arsène, 15/10 : « ils sont ratables ») */
.page-vente .long-heading .eyebrow { font-size: 20px; letter-spacing: .08em; }
.offre-ci-actions { padding-top: 18px; display: grid; align-content: start; justify-items: center; gap: 14px; text-align: center; } /* 22/10 : bouton au milieu (Julien) */
.button-inactif { opacity: .45; cursor: not-allowed; pointer-events: none; }
.modal-actu { width: min(560px, calc(100% - 32px)); text-align: center; } /* V9 : actualité au centre, fond flouté (Julien, 21/10) */
.modal-actu::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-actu .modal__scroll { padding: 44px 32px 32px; }
.modal-actu .modal-icone { display: block; width: 56px; height: 56px; margin: 0 auto 12px; }
.modal-actu h2 { margin: 6px 0 14px; font-size: clamp(26px, 3vw, 34px); }
.modal-actu p + p { margin-top: 10px; }
.actu-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.chiffres-ci { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 28px; }
.chiffres-ci div { padding: 24px 26px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); }
.chiffres-ci b { display: block; font-family: var(--font-titres); font-size: 28px; font-weight: 800; color: var(--orange); margin-bottom: 6px; }
.deux-voies { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; }
.deux-voies .volunteer-steps { grid-auto-rows: auto; }
.voie-titre { font-size: 22px; line-height: 1.25; color: var(--brown); }
.duo-ci { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 56px; align-items: center; }
.duo-ci--inverse .duo-ci-photo { order: 2; }
.duo-ci-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.duo-ci-texte { display: grid; gap: 16px; font-size: 18px; line-height: 1.6; }
.duo-ci-texte .long-heading { display: block; border-top: 0; padding-top: 0; margin-bottom: 4px; }
.duo-ci-texte .coches { margin-top: 4px; }
.question-ci { font-family: var(--font-titres); font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--orange); }
.chiffres-long { padding-block: 0; }
.chiffres-long .chiffres-ci { margin-bottom: 0; }
.chiffres-ci div { border: var(--bord-carte); } /* V7 : bordure orange tout autour, comme les autres cartes (Julien, 16/10/2026) */
.offre-ci .coches { margin-top: 4px; gap: 10px; }
.offre-ci .coches li { font-size: 16px; }
.offre-ci-acces { padding-top: 14px; border-top: var(--line); font-size: 15px; }
/* V8 (Aurélie, 17/10/2026) : comparatif ligne à ligne, mêmes lignes dans les deux offres, l'apport de L'Ascension en orange */
.lignes-ci { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.ligne-ci { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: var(--line); font-size: 16px; }
.ligne-ci:last-child { border-bottom: 0; }
.ligne-ci span { color: var(--gray); }
.ligne-ci b { flex: none; max-width: 55%; text-align: right; color: var(--brown); }
.ligne-ci.plus b { color: var(--orange); }
.relance-ci { position: relative; display: flex; justify-content: center; margin-top: 48px; } /* dans le bloc à texture, bien détaché des cartes (Julien, 19/10) */
.voie-cadre { display: grid; align-content: start; gap: 24px; padding: 30px; background: var(--white); border: var(--border); border-radius: var(--r); }
.voie-cadre--mise { border: var(--bord-carte); }
.recap-ligne b { font-family: var(--font-titres); font-size: 22px; }

/* Assistant de la fondation (22/10/2026, Julien : « comme Skineli, Romain, même taille et fonctionnement ») : bulle en bas à droite,
   panneau de 420 px à mi-hauteur, tiroir en bas de l'écran sur téléphone. assets/js/assistant.js */
.assistant { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; width: min(420px, calc(100vw - 40px)); height: 50vh; height: 50dvh; min-height: 440px; max-height: calc(100dvh - 40px); background: var(--white); border: var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-modal); transform: translateY(16px); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .25s ease, visibility .25s; font-family: var(--font-texte); color: var(--brown); text-align: left; }
.assistant.ouvert { transform: none; opacity: 1; visibility: visible; }
.assistant svg { width: 20px; height: 20px; }
.assistant-tete { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: var(--border); }
.assistant-tete img { width: 44px; height: 44px; flex: 0 0 44px; padding: 7px; border-radius: var(--r-pill); background: var(--tint-orange); object-fit: contain; }
.assistant-tete b { display: block; font-size: 15.5px; line-height: 1.25; }
.assistant-tete small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray); }
.assistant-tete .point { width: 8px; height: 8px; border-radius: var(--r-pill); background: #2f9e5b; }
.assistant-outils { display: flex; gap: 6px; margin-left: auto; }
.assistant-rond { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--cream); color: var(--brown); cursor: pointer; }
.assistant-menu { position: absolute; top: calc(100% - 6px); right: 14px; z-index: 5; width: min(300px, calc(100% - 28px)); max-height: min(360px, 60vh); overflow-y: auto; scrollbar-width: none; padding: 8px; border: var(--border); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-modal); }
.assistant-menu::-webkit-scrollbar { display: none; }
.assistant-menu[hidden] { display: none; }
.assistant-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: 14.5px; color: var(--brown); text-align: left; cursor: pointer; }
.assistant-menu button:hover { background: var(--cream); }
#assistant-nouveau { font-weight: 700; background: var(--tint-orange); }
.assistant-menu-titre { margin: 10px 12px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.assistant-convs button { flex-direction: column; align-items: flex-start; gap: 0; }
.assistant-convs b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.assistant-convs small { font-size: 12px; color: var(--gray); }
.assistant-convs .actuelle { background: var(--cream); }
.assistant-convs-vide { padding: 6px 12px 10px; font-size: 13.5px; color: var(--gray); }
.assistant-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.assistant-fil::-webkit-scrollbar { display: none; }
.assistant .bulle { max-width: 92%; padding: 10px 14px; border-radius: var(--r); font-size: 14.5px; line-height: 1.55; }
.assistant .bulle.ia { align-self: flex-start; background: var(--cream); border-top-left-radius: 6px; }
.assistant .bulle.moi { align-self: flex-end; background: var(--orange); color: var(--white); border-top-right-radius: 6px; white-space: pre-wrap; }
.assistant .bulle p + p, .assistant .bulle p + ul, .assistant .bulle p + ol, .assistant .bulle ul + p, .assistant .bulle ol + p { margin-top: 8px; }
.assistant .bulle ul, .assistant .bulle ol { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.assistant .bulle a { color: var(--orange); font-weight: 700; overflow-wrap: anywhere; }
.assistant .attente { display: flex; align-items: center; gap: 10px; color: var(--gray); }
.assistant .points { display: inline-flex; gap: 4px; }
.assistant .points i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--gray); animation: points 1s infinite ease-in-out; }
.assistant .points i:nth-child(2) { animation-delay: .15s; }
.assistant .points i:nth-child(3) { animation-delay: .3s; }
@keyframes points { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.assistant-choix { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.assistant-choix:empty { display: none; }
.assistant-choix button { min-height: 36px; padding: 7px 12px; border: 1.5px solid var(--orange); border-radius: var(--r-pill); background: var(--white); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--brown); cursor: pointer; transition: transform var(--transition); }
.assistant-choix button:hover { transform: translateY(-2px); }
.assistant-champ { display: flex; align-items: flex-end; gap: 8px; margin: 0 16px; padding: 6px 6px 6px 14px; border: 1.5px solid var(--tint-line); border-radius: 22px; background: var(--white); }
.assistant-champ:focus-within { border-color: var(--orange); }
.assistant-champ textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 16px; line-height: 1.45; padding: 7px 0; max-height: 180px; color: var(--brown); }
.assistant-champ button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: var(--r-pill); background: var(--orange); color: var(--white); cursor: pointer; }
.assistant-champ.occupe button, .assistant-champ.ferme { opacity: .45; cursor: wait; }
.assistant-mention { padding: 8px 18px 14px; font-size: 12px; line-height: 1.45; color: var(--gray); }
.assistant-ouvrir { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--r-pill); background: var(--orange); color: var(--white); font: 800 15px var(--font-texte); cursor: pointer; box-shadow: var(--shadow-modal); transition: transform var(--transition); }
.assistant-ouvrir svg { width: 22px; height: 22px; }
.assistant-ouvrir:hover { transform: translateY(-2px); }
body.assistant-ouvert .assistant-ouvrir { display: none; }

@media (hover:hover) and (pointer:fine) {
.yt-play:hover { transform: scale(1.06); }
.button:hover {
  transform: translateY(-2px); /* juste un soulèvement, ni couleur ni ombre (Julien, 16/09/2026) */
}

.button:hover span {
  transform: translateX(4px);
}

.text-link:hover [aria-hidden="true"] {
  transform: translateX(4px);
}

/* Survol des cartes : un petit translateY seul, ni ombre ni couleur (règle Julien, sur toutes les pages, 29/09/2026) */
.feature:hover, .programme-card:hover, .offer-card:hover, .news-card:hover, .quote-card:hover, .categorie-carte:hover, .vision-mission>article:hover, .valeurs>article:hover, .learning-grid>article:hover, .projets>li:hover, .aside-card:hover, .video-card:hover, .logos li:hover {
  transform: translateY(-6px);
}

.programme-card:hover .card-image img {
  transform: scale(1.045);
}
}

@media (max-width:1181px) {
.nav-sous a { font-size: 14px; }
.nav-chevron svg { width: 14px; height: 14px; }
.projets { grid-template-columns: repeat(2,minmax(0,1fr)); }
.frise { grid-template-columns: repeat(3,minmax(0,1fr)); }
.partner-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.learning-grid h3 { font-size: 20px; }
.footer-top { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
.nav-links {
  gap: 10px;
}

.nav-cta {
  gap: 8px;
}

.nav-cta .button {
  font-size: 13px;
  padding: 9px 14px;
  gap: 10px;
  min-height: 42px;
}

.nav-links a {
  font-size: 13px;
}

.offer-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.conversations-intro {
  padding: 32px;
}

.conversations-content {
  padding: 32px;
}

.card-copy {
  padding: 22px;
}

.c-hero-visual {
  height: 395px;
}

.mission-grid {
  gap: 45px;
}

.long-heading {
  gap: 35px;
}

.c-impact-copy {
  padding: 30px;
}

.stats p {
  font-size: 15px;
}

.nav {
  gap: 15px;
}

.c-hero {
  gap: 22px;
  min-height: 0;
  grid-template-columns: 1fr;
}
.c-hero h1 .br-desktop { display: none; }

.c-support {
  gap: 16px;
}

.support-actions {
  gap: 8px;
}

.support-actions .button {
  padding-inline: 12px;
}

.c-impact .stats strong {
  font-size: 30px;
}

.programme-card>img {
  height: 180px;
}
}

@media (max-width:1024px) {
.revue-grille { grid-template-columns: repeat(3,minmax(0,1fr)); }
.nav-item { width: 100%; }
.nav-sous { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; padding: 0 0 8px 14px; background: transparent; box-shadow: none; }
.nav-sous::before { display: none; }
.nav-sous a { min-height: 40px; padding: 6px 0; font-size: 15px; font-weight: 500; white-space: normal; }
.nav-sous a:hover { background: transparent; color: var(--orange); }
.nav-chevron { display: none; }
.topbar { justify-content: space-between; }
.lettre { grid-template-columns: 1fr; gap: 22px; padding: 36px 6%; }
.programme-bloc { grid-template-columns: 1fr; gap: 28px; }
.derniere-video { grid-template-columns: 1fr; gap: 28px; }
.programme-bloc--inverse .programme-bloc-visuel { order: 0; }
.programme-bloc-visuel { aspect-ratio: 16 / 9; }
.categories { grid-template-columns: 1fr; }
.appels { grid-template-columns: 1fr; gap: 24px; }
.vision-mission { grid-template-columns: 1fr; }
.fondatrice { grid-template-columns: 1fr; gap: 30px; }
.fondatrice-photo { max-width: 420px; }
.valeurs, .organisation { grid-template-columns: 1fr; }
.video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.quote-grid { grid-template-columns: 1fr; }
.page-hero { grid-template-columns: 1fr; gap: 26px; padding: 36px 5%; min-height: 0; }
.page-hero-visual { aspect-ratio: 16 / 9; }
.page-hero--portrait .page-hero-visual { aspect-ratio: 2 / 3; width: min(100%, 380px); }
.programme-detail { grid-template-columns: 1fr; gap: 40px; }
.aside-card { position: static; }
.article-grid { grid-template-columns: 1fr; gap: 40px; }
.president-word { grid-template-columns: 260px minmax(0,1fr); gap: 30px; padding: 30px; }
.cta-band { grid-template-columns: 1fr; padding: 40px 6%; }
.cta-band-actions { justify-content: flex-start; }
.offer-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
body {
  --section-gap: 65px;
}

.volunteer-steps {
  grid-auto-rows: auto; /* sous 1024 px, hauteur naturelle : des rangées égales creusaient des vides (373 px par étape à 390 px) */
}

.nav-links a {
  font-size: 17px;
}

.c-hero h1 {
  font-size: 30px;
}

.c-hero .hero-copy>p:not(.eyebrow) {
  font-size: 17px;
}

.cards {
  gap: 12px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.c-pillars .features {
  gap: 12px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.mission-grid {
  gap: 35px;
}

.mission-statement>p:first-child {
  font-size: 23px;
}

.mission-points {
  gap: 14px;
}

.conversations-long {
  grid-template-columns: 1fr;
}
.conversations-intro { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.conversations-content { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.traits-ext, .traits-int { --k: .75; }

.conversations-intro h2 {
  font-size: 40px;
}

.conversations-intro {
  padding: 40px;
}

.conversations-content {
  padding: 40px;
}

.quote-grid {
  grid-template-columns: 1fr;
}

.quote-card {
  padding: 30px;
}

.team-roles {
  grid-template-columns: 1fr 1fr;
}

.team-roles article {
  border-bottom: 2px solid var(--orange);
}

.partner-grid {
  gap: 22px;
}

.partner-grid h3 {
  font-size: 22px;
}

.news-card {
  min-width: 0;
  padding: 28px;
}

.volunteer-grid {
  gap: 35px;
}

.faq-long {
  grid-template-columns: 1fr;
}

.contact-grid {
  gap: 30px;
}

.form-grid {
  grid-template-columns: 1fr;
}

.stats {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stats>div:nth-child(odd) {
  border-left: 0;
  padding-left: 0;
}

.c-impact {
  grid-template-columns: 35% 65%;
}

.c-impact h2 {
  font-size: 30px;
}

.nav {
  min-height: 90px;
}

.nav-logo img {
  width: 162px;
  height: 83px;
}

.nav-links {
  display: none;
  flex: initial;
  justify-content: initial;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  padding: 25px 6%;
  max-height: calc(100dvh - 180px); /* sous le header collant (haut à 12 px, 134 à 151 px de haut) : le bas du menu reste à l’écran */
  overflow-y: auto;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--shadow-modal);
}

.nav-links.open {
  display: flex;
}

.nav-mobile-only {
  display: block;
}

.nav-desktop-only {
  display: none;
}

.burger {
  display: flex;
}

.c-hero-visual {
  height: 335px;
}

.c-pillars {
  padding-inline: 0;
}

.c-pillars .feature {
  padding: 18px 16px;
}

.programme-card>img {
  height: 160px;
}

.c-impact-copy {
  padding: 24px 20px;
}

.c-impact .stats {
  gap: 6px;
}

.c-impact .stats>div {
  padding: 0 7px;
}

.c-impact .stats strong {
  font-size: 27px;
}

.c-support {
  flex-wrap: wrap;
}

.support-actions {
  margin-left: 60px;
}


.stats>div {
  padding-inline: 10px;
}

.learning-grid--trois { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.comparatif-ci, .deux-voies, .duo-ci { grid-template-columns: minmax(0,1fr); gap: 28px; }
.comparatif-ci { grid-template-rows: none; }
.offre-ci { grid-row: auto; grid-template-rows: none; }
.duo-ci--inverse .duo-ci-photo { order: 0; }
}

@media (max-width:640px) {
.assistant { right: 0; bottom: 0; width: 100%; height: 65dvh; min-height: 0; max-height: 100dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
body.assistant-ouvert > :not(.assistant):not(.assistant-ouvrir):not(dialog) { filter: blur(6px); pointer-events: none; transition: filter .2s ease; }
.assistant-ouvrir { right: 16px; bottom: 16px; }
.assistant-choix { display: none; } /* 23/10/2026 (Julien) : suggestions trop tassées sur téléphone, gardées sur ordinateur et tablette */
body.espace .assistant-ouvrir { bottom: calc(84px + env(safe-area-inset-bottom)); } /* au-dessus de la barre d'onglets de l'espace */
:is(p, ul, h3) + :is(.learning-grid, .chiffres-ci, .benefices, .cas-ci, .comparatif-ci, .deux-voies, .volunteer-steps, .avant-apres, .offer-grid, .quote-grid, .news-grid, .projets, .vision-mission, .coches--deux) { margin-top: 24px; }
:is(.learning-grid, .chiffres-ci, .benefices, .cas-ci, .comparatif-ci, .deux-voies, .volunteer-steps, .avant-apres, .offer-grid, .quote-grid, .news-grid, .projets, .vision-mission, .coches--deux) + :is(p, h3) { margin-top: 24px; }
.offer-card--photo .offre-nom { font-size: 24px; }
.modal-inscription .modal__scroll { padding: 40px 18px 24px; }
.revue-liste { grid-template-columns: minmax(0,1fr); }
.revue-grille { grid-template-columns: repeat(2,minmax(0,1fr)); }
.topbar { padding: 0 22px; }
.topbar-lien { font-size: 13px; }
.programme-accroche { font-size: 18px; }
.vision-mission article { padding: 24px 20px; }
.vision-mission .lead { font-size: 18px; }
.lettre-champs { flex-direction: column; }
.lettre-champs .button { width: 100%; }
.projets { grid-template-columns: 1fr; }
.frise { grid-template-columns: 1fr; }
.partner-grid--4 { grid-template-columns: 1fr; }
.offer-grid--2 { grid-template-columns: 1fr; }
.categorie-tete { grid-template-columns: 1fr; gap: 0; }
.categorie-tete .long-heading { margin-left: 0; padding-left: 0; }
.categorie-num { margin: 0 0 -29.5px; }
.video-grid { grid-template-columns: 1fr; }
.logos li { min-height: 90px; padding: 14px 18px; }
.logos img { height: 56px; }
.soutenir-form { padding: 24px 18px; }
.citation { padding: 44px 6%; }
.pied-parcours { padding: 18px; }
.traits-ext, .traits-int { --k: .55; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .button { width: 100%; }
.form-rangee { grid-template-columns: 1fr; gap: 0; }
.form-titre { font-size: 22px; }
.form-nav .button, .form-nav .form-precedent { flex: 1 1 100%; }
.news-card h3 { font-size: 24px; }
.team-roles h3 { font-size: 18px; }
h3 { font-size: 19px; }
.aside-card .button, .page-hero-actions .button { font-size: 15px; padding-inline: 14px; gap: 10px; }
.page-hero h1 { font-size: clamp(27px,7.4vw,34px); }
.c-hero h1 { font-size: clamp(27px,7.4vw,34px); }
.faq-list details { padding: 0; }
.faq-list summary { min-width: 0; }
.contact-form select { max-width: 100%; }
.page-hero-actions .button, .cta-band-actions .button, .aside-card .button, .volunteer-grid .button { width: 100%; }
.contact-form .button { justify-self: stretch; width: auto; }
.page-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
.page-hero-actions .text-link { justify-content: center; }
.eyebrow { font-size: 13px; letter-spacing: .05em; gap: 8px; }
.page-kicker { font-size: 14px; padding: 14px 18px; }
.long-heading h2 { font-size: clamp(24px,6.6vw,32px); }
.page-hero { padding: 28px 6%; border-radius: var(--r); }
.page-hero .lead { font-size: 18px; }
.page-hero .eyebrow { font-size: 14px; letter-spacing: .06em; }
.page-vente .long-heading .eyebrow { font-size: 15px; letter-spacing: .05em; }
.offre-ci { padding: 26px 20px; } /* V6 : « Conversations Inspirantes » insécable tenait juste à 320 px */
.ligne-ci { display: grid; gap: 2px; } /* V8 : sur téléphone, le libellé au-dessus de la valeur, jamais une ligne repliée */
.ligne-ci span { font-size: 14px; }
.ligne-ci b { max-width: none; text-align: left; }
.relance-ci { margin-top: 36px; }
/* V6 : sur les pages de vente, une fin de paragraphe collée (« mécénat de compétences. ») élargissait les étapes à pastille au-delà de 320 px */
.page-vente .volunteer-steps { grid-template-columns: minmax(0,1fr); }
.page-vente .volunteer-steps li { padding-left: 62px; padding-right: 16px; }
.page-vente .volunteer-steps li:before { left: 12px; }
.page-vente .volunteer-steps p { font-size: 16px; }
.page-hero-visual { border-radius: var(--r); }
.breadcrumb { font-size: 14px; padding: 14px 3% 10px; }
.stats--inline { gap: 18px; }
.stats--inline strong { font-size: 40px; }
.composantes h3 { font-size: 21px; }
.quote-grid--2 { grid-template-columns: 1fr; }
.offer-grid--3 { grid-template-columns: 1fr; }
.president-word { grid-template-columns: 1fr; padding: 22px; }
.president-photo { max-width: 260px; }
.article h2 { font-size: 24px; }
.article p, .article ul { font-size: 17px; }
.pager { padding: 14px 14px; }
.pager a { font-size: 15px; }
.cta-band { padding: 30px 22px; border-radius: var(--r); }
.aside-card { padding: 24px; }
.footer { padding: 32px 22px 22px; }
.footer-bottom { margin: 30px -22px -22px; padding: 6px 22px; }
.footer-top { grid-template-columns: 1fr; gap: 26px; }
.footer-contact { flex-direction: column; align-items: flex-start; }
.footer-col a { min-height: 40px; }
.video-play { bottom: 14px; font-size: 15px; padding: 11px 18px; }
.stats p { font-size: 15px; max-width: none; }
.card-copy .tag { font-size: 14px; }
.support-actions .button { font-size: 15px; }
.c-support p { font-size: 16px; }
.burger { font-size: 14px; }
body {
  --section-gap: 50px;
}

p {
  font-size: 17px;
  line-height: 1.6;
}

.c-hero {
  grid-template-columns: 1fr;
  padding: 26px 6% 18px;
  gap: 22px;
  min-height: 0;
}


.c-hero .hero-copy>p:not(.eyebrow) {
  font-size: 17px;
}

.c-hero-visual {
  height: 290px;
  border-radius: 36px;
}

.c-hero .eyebrow {
  font-size: 14px;
  letter-spacing: .06em;
}

.button {
  font-size: 15px;
  padding: 13px 18px;
  gap: 14px;
}

.c-pillars .features {
  gap: 12px;
  grid-template-columns: 1fr;
}

.c-pillars .feature {
  padding: 20px 18px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px 15px;
}

.c-pillars h3 {
  font-size: 17px;
}

.c-pillars .feature p {
  grid-column: 2;
  margin: 0;
  font-size: 16px;
}

.long-heading {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.long-heading>p {
  margin-top: 0;
}

.long-heading h2 {
  font-size: clamp(23px,6vw,35px);
}

.mission-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}

.mission-statement>p:first-child {
  font-size: 22px;
}

.mission-points {
  padding-left: 22px;
}

.mission-points h3 {
  font-size: 22px;
}

.cards {
  grid-template-columns: 1fr;
  gap: 22px;
}

.card-image {
  height: 260px;
}

.card-copy {
  min-height: 120px;
  padding: 26px 22px;
}

.card-copy h3 {
  font-size: clamp(23px, 7.5vw, 27px); /* Content4ELLES, Career’Impact : un mot par ligne à 320 px */
}

.c-impact {
  grid-template-columns: 1fr;
  margin-top: 25px;
}

.c-impact-photo {
  max-height: 240px;
  min-height: 210px;
  border-radius: var(--r);
  height: 230px;
}

.c-impact-copy {
  padding: 28px 20px;
}

.c-impact h2 {
  font-size: clamp(21px, 6vw, 26px); /* « qui transforment l’Afrique » tient sur une ligne dès 320 px (mesuré le 16/09/2026) */
}

.c-impact .stats strong {
  font-size: 35px;
}

.c-impact .stats p {
  font-size: 15px;
}

.conversations-long {
  padding: 0;
  border-radius: var(--r);
}
.conversations-intro { border-radius: var(--r) var(--r) 0 0; }
.conversations-content { border-radius: 0 0 var(--r) var(--r); }

.conversations-intro {
  padding: 30px 22px;
}

.conversations-content {
  padding: 30px 22px;
}

.conversations-intro h2 {
  font-size: min(36px, 8.5vw); /* « Conversations » d'un bloc tient dans le cadre à 320 px */
}

.conversations-intro .lead {
  font-size: 20px;
}

.learning-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.learning-grid h3 {
  font-size: 23px;
}

.learning-grid p {
  font-size: 17px;
}

.offer-grid {
  grid-template-columns: minmax(0, 1fr); /* la carte ne peut pas dépasser la colonne à 320 px */
}

.offer-card {
  padding: 27px;
}

.offer-card h3 {
  font-size: 22px;
}

.offer-card p:not(.eyebrow) {
  font-size: 17px;
}

.quote-card {
  padding: 26px 22px;
}

.quote-card p {
  font-size: 17px;
}

.testimonial {
  padding: 28px 22px;
  gap: 20px;
  flex-direction: column;
  align-items: flex-start;
}

.testimonial p {
  font-size: 17px;
}

.team-roles {
  grid-template-columns: 1fr;
}

.team-roles article {
  border-right: 0;
  padding: 22px 0;
}

.president-note {
  padding: 8px 18px;
}

.president-note-titre {
  font-size: 18px;
}

.faq-list summary {
  font-size: 18px;
}

.partenaires-long, .bloc-teinte, .programme-bloc {
  padding: 30px 22px;
  border-radius: var(--r);
}

.partner-grid {
  grid-template-columns: 1fr;
  gap: 26px;
}

.partner-grid h3 {
  font-size: 25px;
}

.news-grid {
  grid-template-columns: 1fr;
}

.news-card {
  min-width: 0;
  padding: 28px 22px;
}


.news-card p:not(.eyebrow) {
  font-size: 17px;
}

.video-frame {
  border-radius: var(--r);
}

.volunteer-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}

.volunteer-grid .lead {
  font-size: 22px;
}

.volunteer-steps li {
  padding: 22px 20px 18px 74px;
}

.volunteer-steps li:before {
  left: 18px;
  top: 14px;
}

.volunteer-steps h3 {
  font-size: 22px;
}

.faq-long .long-heading {
  padding-right: 0;
}

.faq-list p {
  font-size: 17px;
  padding-right: 0;
}

.contact-long {
  padding: 30px 22px;
  margin-bottom: 35px;
  border-radius: var(--r);
}

.contact-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}

.contact-grid .lead {
  font-size: 21px;
}

.contact-address {
  font-size: 16px;
}



.modal p {
  font-size: 17px;
}

.modal h3 {
  font-size: 25px;
}

.container {
  width: 88%;
}

h2 {
  font-size: 24px;
}

.nav {
  min-height: 78px;
  padding: 8px 22px 14px;
}

.nav-logo img {
  width: 140px;
  height: 72px;
}

.features {
  grid-template-columns: 1fr;
  row-gap: 20px;
}

.stats {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px 12px;
}

.stats>div:nth-child(3) {
  border: 0;
  padding-left: 0;
}

.stats strong {
  font-size: 38px;
}



.footer-logo {
  width: 160px;
}

.footer-logo img {
  width: 160px;
}

.footer-contact a {
  min-height: 44px;
}

.switch {
  margin-top: 0;
}

.c-main {
  width: 92%;
}

.c-hero-person {
  height: 97%;
}

.c-pillars {
  padding-top: 16px;
}

.c-pillars .feature-icon {
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  height: 48px;
  width: 48px;
}

.c-pillars .feature h3 {
  align-self: end;
}

.c-pillars .feature-icon img {
  width: 46px;
  height: 46px;
}

.c-programmes {
  padding-top: 30px;
}

.section-heading {
  grid-template-columns: 1fr;
  gap: 17px;
  padding: 0 3% 22px;
}

.c-programmes h2 {
  font-size: 23px;
}

.section-heading>p {
  font-size: 14px;
}

.programme-card>img {
  height: 225px;
}

.card-copy p {
  font-size: 14px;
}

.card-arrow {
  width: 35px;
  height: 35px;
  right: 15px;
  bottom: 15px;
}

.c-impact .stats {
  gap: 22px 12px;
}

.c-impact .stats>div {
  padding-left: 14px;
}

.c-impact .stats>div:nth-child(odd) {
  padding-left: 0;
}

.testimonial>img {
  width: 90px;
  height: 90px;
}

.c-support {
  padding: 23px 20px;
  gap: 15px;
}

.c-support h2 {
  font-size: 21px;
}

.support-icon {
  display: none;
}

.support-actions {
  margin: 3px 0 0;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 1;
}


.modal__scroll {
  padding: 45px 22px 30px;
}

.modal__scroll h2 {
  font-size: 25px;
}

.br-mobile {
  display: initial;
}

.equation-ci { padding: 22px 20px; }
.avant-apres li { grid-template-columns: minmax(0,1fr); gap: 8px; }
.aa-entete { display: none; }
.aa-avant::before { content: "Avant"; display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.aa-apres::before { content: "Après"; display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.aa-fleche { justify-self: center; transform: rotate(90deg); width: 36px; height: 36px; }
.learning-grid--trois, .coches--deux, .benefices, .cas-ci, .chiffres-ci { grid-template-columns: minmax(0,1fr); }
.benefices article, .cas-ci article, .offre-ci { padding: 24px 20px; }
.voie-cadre { padding: 0; background: none; border: 0; } /* sur téléphone, le bloc teinté encadre déjà : le cadre en plus ne laissait que 236 px aux étapes */
.duo-ci-texte { font-size: 17px; }
.question-ci { font-size: 20px; }
.duo-ci-photo { border-radius: var(--r); }
}

@media (prefers-reduced-motion:reduce) {
.reveal-pending {
  opacity: 1;
  transform: none;
}

.reveal-visible {
  transition: none !important;
  animation: none !important;
}

* {
  transition: none !important;
  animation: none !important;
}
}