/* Aumônerie Œcuménique des Prisons, Genève
   Feuille bâtie sur les tokens relevés dans DESIGN-SYSTEM-AOP.md.
   Toutes les valeurs viennent de la mesure du site d'origine, pas d'une estimation. */

:root {
  /* couleur */
  --color-brand-primary: #f47e76;
  --color-brand-secondary: #004aac;
  --color-brand-secondary-hover: #334fb4;
  --color-text-primary: #121212;
  --color-text-inverse: #ffffff;
  --color-surface-default: #ffffff;
  --color-surface-muted: #f3f3f3;
  --color-border-default: #121212;

  /* typographie */
  --font-family-sans: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-caption: 12px;
  --font-size-body-sm: 14px;
  --font-size-body: 16px;
  --font-size-body-lg: 20px;
  --font-size-h4: 18px;
  --font-size-h3: 20px;
  --font-size-h2: 32px;
  --font-size-h1: 40px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.04em;

  /* espacement, base 4 */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px;

  /* rayon */
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-card: 28px;
  --radius-pill: 99px;
  --radius-leaf-md: 8px 8px 40px 8px;
  --radius-leaf-lg: 8px 8px 64px 8px;

  /* bordure */
  --border-width-default: 2px;

  /* mouvement */
  --duration-fast: 125ms;
  --duration-normal: 325ms;
  --easing-default: ease-in-out;

  /* conteneurs */
  --container-wide: 1024px;
  --container-text: 768px;
  --container-narrow: 640px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-brand-primary);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-brand-secondary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Bandeau ------------------------------------------------------------- */
/* La phrase d'accueil tient toujours sur une seule ligne, quel que soit
   l'écran. La taille se calcule sur la largeur du viewport, jamais de retour
   à la ligne, jamais de coupure. */
.bandeau {
  background: var(--color-brand-primary);
  color: var(--color-text-primary);
  text-align: center;
  font-size: clamp(9px, 2.85vw, 15px);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-3) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
}

/* En-tête -------------------------------------------------------------
   Collé en haut pendant le défilement, et menu sur une seule ligne qui
   glisse horizontalement quand l'écran est trop étroit. Jamais deux lignes. */
.entete {
  background: var(--color-surface-default);
  padding: var(--space-4) var(--space-6);
  position: sticky;
  top: 0;
  z-index: 50;
}
.entete-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap;
}
.logo { flex: 0 0 auto; }
.logo img { width: 88px; transition: width var(--duration-fast) var(--easing-default); }

.nav {
  display: flex;
  gap: var(--space-6);
  flex-wrap: nowrap;
  /* flex-end ferait partir le débordement vers la gauche, hors d'atteinte,
     et scrollWidth ne le compterait même pas. Mesuré le 13.09.2026. */
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  /* sans cela les liens se compriment au lieu de faire glisser la piste */
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) 0;
  border-bottom: var(--border-width-default) solid transparent;
  transition: border-color var(--duration-fast) var(--easing-default);
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: var(--color-brand-primary); }

/* Sections ------------------------------------------------------------ */
.section { padding: var(--space-20) var(--space-6); }
.section-blanche { background: var(--color-surface-default); }
.section-corail { background: var(--color-brand-primary); }
.inner { max-width: var(--container-wide); margin: 0 auto; }
.etroit { max-width: var(--container-text); }
/* quand .etroit est un enfant de .inner et non .inner lui-même, il faut
   le recentrer, sinon le texte se colle au bord gauche du conteneur */
.inner > .etroit { margin-left: auto; margin-right: auto; }

.sur-titre {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  text-align: center;
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-5);
}
h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-5);
}
h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-4); }
li { margin: 0 0 var(--space-2); }

.carte {
  background: var(--color-surface-default);
  border-radius: var(--radius-card);
  padding: var(--space-10);
}
.carte-feuille { border-radius: var(--radius-leaf-lg); }

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  background: var(--color-brand-primary);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin: 0 var(--space-2) var(--space-2) 0;
  /* un libellé de bouton ne se coupe jamais en deux lignes */
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
}
.bouton:hover { background: #f79b95; transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }
.bouton-bleu { background: var(--color-brand-secondary); color: var(--color-text-inverse); }
.bouton-bleu:hover { background: var(--color-brand-secondary-hover); }

/* Règle du système : jamais de corail sur corail. Sur un fond corail, le bouton
   primaire passe en surface blanche. Sur une carte blanche, il reste corail. */
.section-corail > .inner > .bouton,
.section-corail .inner > p > .bouton:not(.bouton-bleu) {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
}
.section-corail .inner > p > .bouton:not(.bouton-bleu):hover { background: var(--color-surface-muted); }
.carte .bouton:not(.bouton-bleu) { background: var(--color-brand-primary); }

/* Accordéons ---------------------------------------------------------- */
details.bloc {
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-pill);
  margin: 0 0 var(--space-3);
  background: var(--color-surface-default);
  transition: border-radius var(--duration-normal) var(--easing-default);
}
details.bloc[open] { border-radius: var(--radius-card); }
/* Le ton de chaque bulle est déclaré, pas déduit d'une parité : l'original
   alterne corail et blanc sur les activités, blanc et bleu sur les questions. */
details.bloc.ton-blanc { background: var(--color-surface-default); border-color: var(--color-border-default); }
details.bloc.ton-corail { background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
details.bloc.ton-bleu {
  background: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
  color: var(--color-text-inverse);
}
details.bloc summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-8);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
details.bloc summary::-webkit-details-marker { display: none; }

/* Le plus est dessiné en deux barres, pas écrit en caractère : il peut donc
   tourner. À l'ouverture, l'ensemble pivote d'un demi-tour et la barre
   verticale bascule sur l'horizontale. Le plus devient un moins, en 325 ms. */
.plus {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  transition: transform var(--duration-normal) var(--easing-default);
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--easing-default);
}
.plus::before { width: 2px; height: 20px; transform: translate(-50%, -50%); }
.plus::after  { width: 20px; height: 2px; transform: translate(-50%, -50%); }
details.bloc[open] .plus { transform: rotate(180deg); }
details.bloc[open] .plus::before { transform: translate(-50%, -50%) rotate(90deg); }

/* Le corps s'ouvre et se ferme en hauteur. Le rembourrage vit dans l'enfant,
   sinon il resterait visible à hauteur nulle. */
details.bloc .corps {
  overflow: hidden;
  transition: height var(--duration-normal) var(--easing-default);
}
details.bloc .dedans {
  padding: 0 var(--space-8) var(--space-6);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}
details.bloc .dedans p { margin: 0; }
details.bloc summary:hover .plus { transform: scale(1.12); }
details.bloc[open] summary:hover .plus { transform: rotate(180deg) scale(1.12); }

/* Partenaires --------------------------------------------------------- */
.partenaires {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-8);
}
.partenaires a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  width: 180px;
}
.partenaires img { max-height: 62px; max-width: 180px; width: auto; object-fit: contain; }

/* Bandeau défilant des partenaires.
   Reprend le comportement d'origine du site : défilement continu, automatique,
   sans pause. La piste est dupliquée, l'animation la décale de la moitié de sa
   largeur, ce qui donne une boucle sans couture. */
.ruban {
  margin-top: var(--space-8);
  overflow: hidden;
  position: relative;
  /* les bords s'estompent, le défilement n'a ni début ni fin visibles */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ruban-piste {
  display: flex;
  width: max-content;
  animation: defile 42s linear infinite;
}
.ruban-piste > * { flex: 0 0 auto; }
.ruban a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  width: 210px;
  padding: 0 var(--space-5);
}
.ruban img {
  max-height: 62px;
  max-width: 170px;
  width: auto;
  object-fit: contain;
}
@keyframes defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ruban-piste { animation: none; }
  .ruban { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Liens utiles -------------------------------------------------------- */
.liste-liens { list-style: none; padding: 0; margin: 0; }
.liste-liens li {
  background: var(--color-surface-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0 0 var(--space-3);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
}
/* colonne de logo de largeur fixe : les titres s'alignent d'une carte à l'autre */
.liste-liens > li > img {
  flex: 0 0 130px;
  width: 130px;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}
.liste-liens .texte { flex: 1 1 320px; }
.liste-liens .texte p {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-2);
}
.liste-liens a.lien { font-weight: var(--font-weight-bold); text-decoration: underline; }
.liste-liens li.sans-logo { align-items: flex-start; }
/* Règle du système : une carte doit se détacher de son fond. Sur une section
   blanche, la carte prend la surface secondaire, jamais le blanc sur blanc. */
.section-blanche .liste-liens li { background: var(--color-surface-muted); }
.section-blanche .citation { background: var(--color-surface-muted); }
.liste-liens .source-lien {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
}
.liste-liens h3 { margin: 0 0 var(--space-2); }

/* Citations ----------------------------------------------------------- */
.citation {
  background: var(--color-surface-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0 0 var(--space-3);
}
.citation p { margin: 0 0 var(--space-2); }
.citation .source {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin: 0;
}

/* Coordonnées bancaires ----------------------------------------------- */
.coordonnees {
  background: var(--color-surface-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  line-height: 2;
}

/* Formulaire ---------------------------------------------------------- */
.champ { margin: 0 0 var(--space-4); }
.champ label {
  display: block;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
}
.champ input, .champ textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-default) solid #ddd;
  border-radius: var(--radius-lg);
  font: inherit;
  background: var(--color-surface-default);
  transition: border-color var(--duration-fast) var(--easing-default);
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--color-brand-secondary);
}

/* Pied de page -------------------------------------------------------- */
.pied {
  background: var(--color-brand-secondary);
  color: var(--color-text-inverse);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.pied .nav { justify-content: center; margin-bottom: var(--space-5); }
.pied .nav a { color: var(--color-text-inverse); }
.pied .nav a:hover { border-bottom-color: var(--color-text-inverse); }
.pied .mentions { font-size: var(--font-size-body-sm); margin: 0; }

/* Responsive : 1024, 768, 576, les points de rupture d'Instant --------- */
@media (max-width: 1024px) {
  .section { padding: var(--space-16) var(--space-6); }
}
@media (max-width: 768px) {
  :root { --font-size-h1: 36px; }
  .deux-colonnes { grid-template-columns: 1fr; gap: var(--space-8); }
  .carte { padding: var(--space-8); }
  .section { padding: var(--space-12) var(--space-5); }
  .partenaires { gap: var(--space-8); }
  /* le bord droit s'estompe : on voit qu'il reste des entrées à droite.
     Et l'alignement repasse à gauche, sans quoi le débordement serait
     inatteignable. */
  .nav {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    padding-right: var(--space-8);
  }
  .entete { padding: var(--space-3) var(--space-5); }
  .logo img { width: 64px; }
}
@media (max-width: 575px) {
  :root {
    --font-size-h1: 30px;
    --font-size-h2: 24px;
    --letter-spacing-tight: -0.04em;
  }
  .carte { padding: var(--space-6); }
  .section { padding: var(--space-8) var(--space-4); }
  .nav { gap: var(--space-4); }
  .nav a { font-size: var(--font-size-body-sm); }
  details.bloc summary { padding: var(--space-4) var(--space-5); font-size: var(--font-size-h4); }
  details.bloc .corps { padding: 0 var(--space-5) var(--space-5); }
}

/* Apparition au défilement -----------------------------------------------
   Reprend le comportement du site d'origine : opacité et translation,
   325 ms, ease-in-out. L'état masqué n'est posé QUE si le script tourne,
   et un filet de sécurité révèle tout au bout de deux secondes. Une page
   sans JavaScript, ou dont l'observateur ne se déclenche pas, reste
   entièrement lisible. */
html.anim .revele {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
html.anim .revele.vu {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-normal) var(--easing-default),
    transform var(--duration-normal) var(--easing-default);
}

/* Micro-interactions --------------------------------------------------- */
.liste-liens li,
.citation {
  transition: transform var(--duration-fast) var(--easing-default);
}
.liste-liens li:hover { transform: translateY(-2px); }
.liste-liens a.lien { transition: opacity var(--duration-fast) var(--easing-default); }
.liste-liens a.lien:hover { opacity: .65; }
details.bloc summary { transition: background var(--duration-fast) var(--easing-default); }
.logo img { transition: transform var(--duration-fast) var(--easing-default), width var(--duration-fast) var(--easing-default); }
.logo:hover img { transform: scale(1.04); }
.partenaires a img,
.ruban a img { transition: transform var(--duration-fast) var(--easing-default); }
.partenaires a:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html.anim .revele { opacity: 1; transform: none; }
  .ruban-piste { animation: none; }
}

/* Pièces reprises de la mise en page d'origine ------------------------- */
.titre-capitales {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.texte-ample {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}
.illus-haut { width: 130px; margin: 0 0 var(--space-6); }
.illus-large { width: 100%; max-width: 620px; margin: var(--space-8) auto; }
.illus-centre { width: 100%; max-width: 420px; margin: var(--space-8) auto var(--space-6); }
.filet { border: none; border-top: 1px solid rgba(18, 18, 18, .18); margin: var(--space-6) 0 0; }
.section-corail .filet { border-top-color: rgba(18, 18, 18, .28); }
.citation-bleue {
  color: var(--color-brand-secondary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-6);
}
.titre-corail { color: var(--color-brand-primary); }
.section-corail .titre-corail { color: var(--color-surface-default); }
.texte-droite { text-align: right; }
.texte-centre { text-align: center; max-width: 62ch; margin: var(--space-8) auto 0; }
.bloc-icones { margin: var(--space-10) 0; align-items: start; }
.icone {
  width: 56px;
  height: 56px;
  color: var(--color-brand-secondary);
  display: block;
  margin: 0 0 var(--space-4);
}
.fleche { font-size: 18px; line-height: 1; }
@media (max-width: 768px) {
  .texte-droite { text-align: left; }
  .illus-haut { width: 96px; }
  .icone { width: 46px; height: 46px; }
}

/* ==========================================================================
   Accueil : structure reprise de l original (mesurée sur la capture Wayback
   du 21.10.2025). Carte d introduction large à liseré, deux colonnes.
   ========================================================================== */

.large { max-width: 1320px; margin: 0 auto; }

.bande-hero { padding-top: var(--space-10); padding-bottom: var(--space-10); }

.carte-hero {
  background: var(--color-surface-default);
  border: 1px solid var(--color-text-default);
  border-radius: 2px;
  padding: var(--space-10);
}

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.hero-illus img { width: 100%; height: auto; display: block; }

.hero-contenu > h1 { margin-top: 0; }

.hero-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.hero-duo h3 { margin: var(--space-3) 0 var(--space-2); }
.hero-duo .icone { width: 34px; height: 34px; color: var(--color-brand-primary); }
.hero-action { margin-top: var(--space-8); }

/* À propos : grand titre centré, illustration qui vient de la gauche */

.titre-geant {
  font-size: clamp(30px, 5.4vw, 68px);
  line-height: 1.06;
  text-align: center;
  text-wrap: balance;
  margin: var(--space-2) 0 var(--space-10);
}

.apropos {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.apropos-illus img { width: 100%; height: auto; display: block; }

.apropos-texte {
  border-left: 1px solid rgba(18, 18, 18, .18);
  padding-left: var(--space-10);
}

.apropos-texte img { width: 100%; height: auto; margin: var(--space-6) 0; }

.sur-titre-corail { color: var(--color-brand-primary); }

@media (max-width: 900px) {
  .carte-hero { padding: var(--space-6); }
  .hero-grille,
  .hero-duo,
  .apropos { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .apropos-texte { border-left: none; padding-left: 0; }
}

/* ==========================================================================
   Conformité à l original, valeurs relevées au pixel sur la capture Wayback
   du 21.10.2025 (fenêtre 1487 px). Ce bloc vient en dernier et fait autorité.
   ========================================================================== */

/* La forme signature du site : côté gauche droit, côté droit arrondi. */
.large { max-width: 1312px; }

.carte-hero {
  border-radius: 8px 64px 64px 8px;
  padding: 0;
  overflow: hidden;
}

.hero-grille {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.hero-illus { align-self: stretch; }
.hero-illus img { width: 100%; height: 100%; object-fit: cover; }

.hero-contenu { padding: 56px; }
.hero-contenu > h1 { font-size: 40px; font-weight: 900; line-height: 1.2; }
.hero-contenu > p { font-size: 15px; font-weight: 500; max-width: 320px; }

.hero-duo { gap: 20px; margin-top: 40px; }
.hero-duo .icone { width: 64px; height: 64px; }
.hero-duo h3 { font-size: 20px; font-weight: 900; margin: 16px 0 12px; }
.hero-duo p { font-size: 14px; font-weight: 500; }

/* Boutons : pastille pleine, texte sombre, jamais de capitales forcées. */
.bouton {
  border-radius: 99px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Étiquette en pastille blanche, comme « les différents intervenants ». */
.sur-titre {
  display: inline-block;
  background: var(--color-surface-default);
  border-radius: 99px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

/* Bulles d activité et de questions : 900 px, centrées, même forme. */
.section > .large > h2 { font-size: 40px; font-weight: 700; }

details.bloc {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px 52px 52px 8px;
}
details.bloc[open] { border-radius: 8px 52px 52px 8px; }
details.bloc summary { padding: 24px 32px; }
details.bloc summary > span:first-child { font-size: 32px; font-weight: 700; line-height: 1.15; }
details.bloc .dedans p { font-size: 20px; font-weight: 400; }

/* À propos : grand titre, colonne de droite alignée à droite, images arrondies. */
.titre-geant { font-size: 64px; font-weight: 700; }
.apropos { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: 56px; }
.apropos-illus img { border-radius: 16px; }
.apropos-texte { border-left: none; padding-left: 0; }
.apropos-texte .texte-droite { font-size: 24px; font-weight: 500; }
.apropos-texte img { border-radius: 16px; max-width: 260px; margin-left: auto; display: block; }
.citation-bleue { font-size: 28px; font-weight: 400; }

@media (max-width: 900px) {
  .hero-grille { grid-template-columns: minmax(0, 1fr); }
  .hero-contenu { padding: 28px; }
  .hero-contenu > h1 { font-size: 30px; }
  .hero-duo { grid-template-columns: minmax(0, 1fr); }
  .section > .large > h2 { font-size: 30px; }
  details.bloc summary > span:first-child { font-size: 21px; }
  details.bloc .dedans p { font-size: 16px; }
  .apropos-texte .texte-droite { font-size: 18px; text-align: left; }
  .apropos-texte img { margin-left: 0; }
  .citation-bleue { font-size: 22px; }
}

.apropos-illus .citation-bleue { text-align: left; margin: 36px 0; }
.apropos-illus img + img { margin-top: 36px; }
.apropos-illus img { max-width: 100%; }
.titre-soutenir { font-size: 28px; font-weight: 400; text-align: right; margin-top: 36px; }
.titre-soutenir a { color: inherit; text-decoration: none; }
.titre-soutenir a:hover { color: var(--color-brand-primary); }
@media (max-width: 900px) { .titre-soutenir { text-align: left; font-size: 22px; } }

/* Le sélecteur de titre de section écrasait le grand titre : on le remet au-dessus. */
.section > .large > h2.titre-geant { font-size: 64px; }
details.bloc summary { padding: 18px 32px; }
@media (max-width: 900px) {
  .section > .large > h2.titre-geant { font-size: 30px; }
  details.bloc summary { padding: 14px 20px; }
}

/* Les étiquettes en pastille sont centrées, comme dans l original. */
.section > .inner > .sur-titre,
.section > .large > .sur-titre { display: block; width: max-content; margin-left: auto; margin-right: auto; }

/* Relevé refait une fois les bulles au repos : l original les met sur toute
   la largeur du conteneur de 1200 px, hauteur 104 px, retrait 32 px. */
details.bloc { max-width: 1200px; }
details.bloc summary { padding: 32px; }
details.bloc .corps { padding-left: 32px; padding-right: 32px; }
@media (max-width: 900px) {
  details.bloc summary { padding: 16px 22px; }
  details.bloc .corps { padding-left: 22px; padding-right: 22px; }
}

/* L original sépare les deux colonnes par un filet vertical. */
.apropos { position: relative; }
.apropos-texte { border-left: 1px solid rgba(18, 18, 18, .22); padding-left: 56px; }
@media (max-width: 900px) { .apropos-texte { border-left: none; padding-left: 0; } }

/* Une étiquette longue doit revenir à la ligne, pas déborder l écran. */
.sur-titre { max-width: 100%; }
.section > .inner > .sur-titre,
.section > .large > .sur-titre { max-width: min(100%, 900px); }

/* Le grand titre garde sa taille d origine sur grand écran et se réduit sur
   petit écran, quel que soit son conteneur. La règle précédente ne visait que
   .large et laissait le titre de la section contact à 64 px sur mobile. */
.section > .large > h2.titre-geant,
.section > .inner > h2.titre-geant,
h2.titre-geant { font-size: clamp(28px, 5vw, 64px); }

/* ==========================================================================
   Mobile, bloc final. Il vient en dernier volontairement : une règle écrite
   après une requête média la neutralise, à spécificité égale, même si la
   requête média est plus restrictive. C est ce qui laissait la section
   « à propos » sur deux colonnes au téléphone.
   ========================================================================== */

.action-soutenir { text-align: right; margin-top: 36px; }

@media (max-width: 900px) {
  /* Les deux colonnes se défont et les blocs se remettent dans l ordre de
     lecture : illustration, texte, citation, texte, portrait, image, bouton. */
  .apropos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .apropos-illus,
  .apropos-texte {
    display: contents;
  }
  .apropos > * > * { margin-left: 0; margin-right: 0; }
  .apropos-illus > img:first-child { order: 1; }
  .apropos-texte > .texte-droite:first-of-type { order: 2; }
  .apropos-illus > .citation-bleue { order: 3; }
  .apropos-texte > .texte-droite:nth-of-type(2) { order: 4; }
  .apropos-texte > img { order: 5; }
  .apropos-illus > img:last-child { order: 6; }
  .apropos-texte > .action-soutenir { order: 7; }

  .apropos img {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 28px;
  }
  .apropos .texte-droite {
    text-align: left;
    font-size: 18px;
    margin: 0 0 24px;
  }
  .apropos .citation-bleue {
    text-align: left;
    font-size: 22px;
    margin: 0 0 28px;
  }
  .action-soutenir { text-align: center; margin: 8px 0 0; }

  /* Titres et respiration générale au téléphone. */
  .section { padding-left: 20px; padding-right: 20px; }
  .titre-geant { margin-bottom: 28px; }
  .hero-contenu > p { max-width: none; font-size: 16px; }
  .hero-duo p { font-size: 15px; }
  .hero-duo .icone { width: 48px; height: 48px; }
  .hero-action { text-align: center; }
  .illus-large, .illus-centre { margin-top: 24px; margin-bottom: 24px; }

  /* Au téléphone l illustration se voit en entier, elle n est plus recadrée
     dans un carré par object-fit: cover. */
  .hero-illus img { height: auto; object-fit: contain; }
  .carte-hero { border-radius: 8px 40px 40px 8px; }
}

@media (max-width: 560px) {
  .apropos .texte-droite { font-size: 17px; }
  .bouton { padding: 12px 18px; font-size: 15px; }
}

/* Le filet vertical doit courir sur toute la hauteur de la section, pas
   s arrêter à la fin du texte. */
@media (min-width: 901px) {
  .apropos { align-items: stretch; }
}

/* ===== Section « à propos », refaite : deux blocs alternés, une citation,
   un bloc espoir. Lisible en une colonne au téléphone sans réordonnancement. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin: 56px 0;
}
.duo-inverse .duo-image { order: 2; }
.duo-image { margin: 0; }
.duo-image img { width: 100%; height: auto; display: block; border-radius: 8px 48px 48px 8px; }
.duo-texte p { font-size: 20px; font-weight: 500; line-height: 1.6; margin: 0; text-align: left; }
.citation-large {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  border-top: 1px solid rgba(18, 18, 18, .16);
  border-bottom: 1px solid rgba(18, 18, 18, .16);
}
.citation-large p {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  color: var(--color-brand-secondary);
}
.bloc-espoir { text-align: center; margin-top: 56px; }
.bloc-espoir img { width: 100%; max-width: 380px; height: auto; margin: 0 auto 24px; display: block; }
.action-soutenir { text-align: center; margin: 0; }

@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 36px 0; }
  .duo-inverse .duo-image { order: 0; }
  .duo-image img { border-radius: 8px 32px 32px 8px; max-width: 420px; margin: 0 auto; }
  .duo-texte p { font-size: 17px; }
  .citation-large { padding: 28px 12px; }
  .citation-large p { font-size: 22px; }
  .bloc-espoir { margin-top: 36px; }
}

/* ===== Ruban : défilement automatique ET défilement au doigt.
   L'animation CSS par transform interdisait de le pousser à la main. Le
   défilement est désormais porté par scrollLeft, piloté en JavaScript, donc
   le doigt et la molette agissent dessus comme sur n'importe quelle liste. */
.ruban {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ruban::-webkit-scrollbar { display: none; }
.ruban-piste { animation: none; }

/* ===== Boutons : toujours côte à côte, jamais l'un sous l'autre. */
.ligne-boutons {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ligne-boutons > .bouton { flex: 0 1 auto; min-width: 0; }

.tenir-une-ligne { white-space: nowrap; overflow: hidden; display: block; min-width: 0; }
details.bloc summary > span.tenir-une-ligne { flex: 1 1 auto; }

/* ===== Coordonnées bancaires : une donnée par ligne, chacune copiable. */
.coordonnees-bancaires {
  margin: 24px 0 0;
  background: var(--color-surface-default);
  border-radius: 8px 32px 32px 8px;
  overflow: hidden;
}
.coord-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(18, 18, 18, .12);
}
.coord-ligne:last-child { border-bottom: none; }
.coord-ligne dt {
  flex: 0 0 190px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(18, 18, 18, .6);
  margin: 0;
}
.coord-ligne dd {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
}
.coord-valeur { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 500; }
.coord-chiffres {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.copier {
  flex: 0 0 auto;
  border: 1px solid var(--color-text-default);
  background: transparent;
  color: var(--color-text-default);
  border-radius: 99px;
  padding: 6px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}
.copier:hover { background: var(--color-text-default); color: var(--color-surface-default); }
.copier.copie-ok {
  background: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
  color: var(--color-text-inverse);
}
@media (max-width: 640px) {
  .coord-ligne { padding: 14px 16px; }
  .coord-ligne dt { flex: 1 0 100%; }
  .coord-valeur { font-size: 16px; }
}

/* Au téléphone, on rend de la place au texte pour qu'il tienne sur une ligne
   sans descendre à une taille illisible : le retrait diminue avant la police. */
@media (max-width: 640px) {
  details.bloc summary { padding: 14px 16px; gap: 10px; }
  details.bloc .corps { padding-left: 16px; padding-right: 16px; }
  .ligne-boutons { gap: 8px; }
  .ligne-boutons .bouton { padding: 10px 12px; }
}

/* Les boutons d'une même ligne se partagent la largeur à parts égales. Sans
   cela, réduire la police réduisait aussi le bouton : la mesure ne convergeait
   jamais et le libellé restait coupé. */
.ligne-boutons > .bouton { flex: 1 1 0; text-align: center; justify-content: center; }

/* Le bouton qui porte le libellé le plus long reçoit une part de largeur plus
   grande, sinon le partage à parts égales étrangle l'adresse de courriel. */
.ligne-boutons > .bouton.bouton-long { flex-grow: 2.2; }
@media (max-width: 640px) {
  .carte { padding: 22px 18px; }
}

.maj-legale { font-size: 14px; color: rgba(18, 18, 18, .6); margin-top: 0; }
.adresse-legale { font-style: normal; line-height: 1.7; margin: 0 0 16px; }

.liste-legale { margin: 0 0 18px; padding-left: 22px; }
.liste-legale li { margin-bottom: 8px; }

/* ===== Bandeau de consentement aux cookies. */
.bandeau-cookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--color-surface-default);
  border: 1px solid var(--color-text-default);
  border-radius: 8px 40px 40px 8px;
  box-shadow: 0 12px 40px rgba(18, 18, 18, .18);
}
.bandeau-cookies-texte { flex: 1 1 340px; min-width: 0; }
.bandeau-cookies-texte strong { display: block; margin-bottom: 4px; }
.bandeau-cookies-texte p { margin: 0; font-size: 14px; line-height: 1.5; }
.bandeau-cookies-actions { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 10px; }
.lien-nu {
  border: none; background: none; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
@media (max-width: 640px) {
  .bandeau-cookies { left: 8px; right: 8px; bottom: 8px; padding: 16px; gap: 12px; }
  .bandeau-cookies-actions { width: 100%; }
  .bandeau-cookies-actions .bouton { flex: 1 1 0; text-align: center; justify-content: center; padding: 10px 8px; font-size: 13px; }
}

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.retour-form { margin: 14px 0 0; font-size: 15px; font-weight: 500; }
.retour-form.ok { color: var(--color-brand-secondary); }
.retour-form.ko { color: #B3261E; }

/* Le bandeau porte display:flex, qui l'emporte sur la règle par défaut du
   navigateur pour l'attribut hidden. Sans cette ligne, le bandeau reste
   affiché quel que soit le choix fait. */
.bandeau-cookies[hidden] { display: none !important; }