/* site.css — mise en page et composants SystèmeG au-dessus de theme.css.
   Discipline gladys : uniquement des variables (tokens.css), design plat sans
   ombre, rayons généreux. Importer APRÈS tokens.css et theme.css. */

html { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Renvois d'ancre (sommaire flottant, liens « …#section ») : s'arrêter au HAUT
   de la .section porteuse du titre — son espace supérieur reste visible — au
   lieu de coller au titre (conteneur « tronqué »). Le titre ouvre la section,
   donc la valeur reprend le padding-top de .section (voir plus bas). */
:where(main h1, main h2, main h3) {
  scroll-margin-top: clamp(28px, 3.6vw, var(--space-mediumMargin));
}
*, *::before, *::after { box-sizing: inherit; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* Chaînes insécables (URLs affichées, emails) : autoriser la césure au
   caractère pour éviter le débordement horizontal sur mobile */
.card__link, .email-list label, .meta { overflow-wrap: anywhere; }

/* Échelle typographique responsive (typeScaleResponsive de la charte) */
h1 { font-size: clamp(30px, 4.2vw, var(--size-h1)); margin-block: 0 0.4em; }
h2 { font-size: clamp(22px, 2.7vw, var(--size-h2)); }
h3 { font-size: clamp(20px, 2vw, var(--size-h3)); }
p, li { font-size: clamp(16px, 1.6vw, var(--size-paragraphe)); }

/* Structure */
.container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
/* Rythme vertical « own-the-top » : chaque bloc porte son espace EN HAUT, rien
   en bas → l'espace entre deux sections ne double jamais (une seule valeur
   s'applique). Bord haut de page = en-tête ; bord bas = marge du footer. */
.section { padding-block: clamp(28px, 3.6vw, var(--space-mediumMargin)) 0; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--jaune); color: var(--noir); padding: 12px 20px;
  border-radius: var(--radius-button);
}
.skip-link:focus { left: 16px; top: 16px; z-index: 100; }

/* Accents thématiques (probleme→rouge, solution→vert, préparation→jaune,
   persona→mauve, neutre→brun) */
.accent-vert { --accent: var(--vert); }
.accent-rouge { --accent: var(--rouge); }
.accent-jaune { --accent: var(--jaune); }
.accent-mauve { --accent: var(--mauve); }
.accent-brun { --accent: var(--brun); }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.site-header { background: var(--page-bg); }
.site-header__inner {
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding-block: 18px;
}
.logo { height: 40px; width: auto; display: block; color: var(--noir); }
.logo--white { color: var(--blanc); }
.logo--footer { height: 32px; }

.main-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.main-nav a {
  font-size: var(--size-ltParagraphe); font-weight: 500; text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius-button);
}
.main-nav a:hover { background: var(--jaune); }
.main-nav a.is-active { background: var(--vert); }

/* Accès « espace membre » : bouton distinct, hors de la liste de contenu.
   Contour au repos (pour ne pas se confondre avec l'état actif vert des
   liens), jaune au survol, vert plein quand on est sur la page. */
.site-header__account {
  font-size: var(--size-ltParagraphe); font-weight: 600; text-decoration: none;
  white-space: nowrap; padding: 8px 16px; color: var(--noir);
  border: 1.5px solid var(--noir); border-radius: var(--radius-button);
}
.site-header__account:hover { background: var(--jaune); border-color: var(--jaune); }
.site-header__account[aria-current="page"] { background: var(--vert); border-color: var(--vert); }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero { padding-block: clamp(48px, 6vw, var(--space-ltSpace)) 0; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(40px, 6vw, var(--size-bigh1));
  line-height: 1.1; letter-spacing: clamp(1px, 0.3vw, 4px);
  margin: 0 0 0.3em;
}
.hero__lead {
  font-size: clamp(19px, 1.6vw, var(--size-bigParagraphe));
  line-height: 1.3; margin: 0;
}
.hero .btn-row { margin-top: 32px; }

/* ------------------------------------------------------------------ */
/* Composants de blocs                                                 */
/* ------------------------------------------------------------------ */

/* prose (texte riche) : pleine largeur du conteneur — une colonne étroite au
   milieu d'un contenu pleine largeur est visuellement déroutante. */
.prose p, .prose li { line-height: 1.6; }
.prose img { border-radius: 16px; }
/* Marges externes neutralisées : le padding de section gère l'espacement,
   sans le cumuler avec les marges des <p> de la prose. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
/* Deux blocs de texte riche qui se suivent = prose continue → on resserre à un
   espacement de paragraphe (pas un plein écart de section). */
.section:has(> .container > .prose) + .section:has(> .container > .prose) {
  padding-top: clamp(14px, 1.6vw, 22px);
}

/* Intro d'un bloc grille (texte sous le titre, au-dessus des cartes). */
.section-intro { margin-block: 0 clamp(20px, 2.5vw, 32px); }
.section-intro > :first-child { margin-top: 0; }
.section-intro > :last-child { margin-bottom: 0; }

/* Grilles de blocs (cartes/étapes/portraits) : flexbox qui étire la dernière
   ligne pour la remplir — plus jamais d'orpheline avec du vide à droite.
   « cols-auto » (défaut) laisse la largeur décider ; « cols-2/3 » force une
   disposition (choix éditeur). Voir l'équilibrage plus bas. */
.cards { display: flex; flex-wrap: wrap; gap: 24px; }
.cards > * { flex: 1 1 280px; }
.card { border-radius: var(--radius-card); }
.card h3 { margin-top: 0; }
.card__rule { width: 56px; height: 8px; border-radius: 4px; background: var(--accent); margin-bottom: 16px; }
.card__link { font-weight: 700; text-decoration: none; }
.card__link:hover { background: var(--jaune); }

/* Fiche événement : cartes empilées (infos + inscription) — décollées du chapo
   et espacées entre elles ; on neutralise les doubles marges internes (filet →
   premier élément, et marge basse du dernier) pour un rendu net. */
.event-detail { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(28px, 4vw, 40px); }
.event-detail .card > .card__rule + * { margin-top: 0; }
.event-detail .card > :last-child { margin-bottom: 0; }

.keyfigures { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: center; }
.keyfigure__value { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.keyfigure__label { color: var(--grisTexteSombre); margin-top: 8px; }

.quote { background: var(--blanc); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 48px); }
.quote blockquote { font-size: clamp(20px, 2.2vw, var(--size-bigParagraphe)); line-height: 1.18; margin: 0; }
.quote figcaption { color: var(--grisTexteSombre); margin-top: 16px; }

.faq details { border-bottom: 1px solid var(--filetBeige); padding-block: 14px; }
.faq summary { font-weight: 700; font-size: var(--size-h3); cursor: pointer; }
.faq details > div { padding-block: 8px 16px; }

.cta-banner {
  background: var(--noir); color: var(--blanc); text-align: center;
  border-radius: var(--radius-block);
  padding: clamp(24px, 4vw, 44px);
}
.cta-banner h2 { margin-top: 0; }

/* Rangée de boutons (hero, bandeau CTA) */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-banner .btn-row { justify-content: center; margin-top: 24px; }

/* Vidéo embarquée (les iframes oEmbed ont une taille fixe) */
.embed { aspect-ratio: 16 / 9; border-radius: clamp(14px, 1.6vw, 20px); overflow: hidden; background: var(--noir); }
.embed > div { width: 100%; height: 100%; } /* wrapper de wagtailembeds/embed_frontend.html — sans lui, height:100% de l'iframe retombe sur l'attribut oEmbed */
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed-figure { margin: 0; }
.embed-figure figcaption { margin-top: 8px; }

/* Image légendée (bloc image, bloc image et texte) */
.figure { margin: 0; }
.figure figcaption { margin-top: 8px; }
.figure__img { width: 100%; border-radius: clamp(14px, 1.6vw, 20px); display: block; }

/* Image + texte côte à côte */
.media-split { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 800px) {
  .media-split { grid-template-columns: 1fr 1fr; }
  .media-split--right .media-split__media { order: 2; }
}

/* Étapes numérotées */
.steps { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; padding: 0; margin: 0; }
.steps > * { flex: 1 1 240px; }
.step__num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--size-h3);
}
.step h3 { margin-bottom: 0.3em; }

/* Équipe / portraits */
.people { display: flex; flex-wrap: wrap; gap: 24px; }
.people > * { flex: 1 1 220px; }
/* Portrait unique (ex. la fondatrice) : format profil, non étiré à toute la largeur. */
.person:only-child { max-width: 480px; }

/* Équilibrage de la dernière ligne. En auto, 4 éléments → 2×2 (au lieu de 3+1
   orphelin). Colonnes forcées par l'éditeur : cols-2 / cols-3. Le plancher
   max(240px, …) fait retomber proprement en 1 colonne sur mobile (pas de media
   query). :has() est supporté par tous les navigateurs cibles. */
.cols-auto:has(> :nth-child(4):last-child) > * { flex-basis: max(240px, calc(50% - 12px)); }
.cols-auto:has(> :nth-child(6):last-child) > * { flex-basis: max(240px, calc(33.333% - 16px)); }
.cols-2 > * { flex-basis: max(240px, calc(50% - 12px)); }
.cols-3 > * { flex-basis: max(240px, calc(33.333% - 16px)); }
.person__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card); }
.person h3 { margin-bottom: 0.2em; }
.person__bio { margin-top: 6px; }
.person__contacts { list-style: none; padding: 0; margin: 8px 0 0; }
.person__contacts li { margin-block: 4px; }
.person__contacts a { text-decoration: none; font-weight: 500; }
.person__contacts a:hover { background: var(--jaune); }
.icon-contact { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.4em; flex: none; }

/* Collection de liens */
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { border-bottom: 1px solid var(--filetBeige); padding-block: 14px; }
.linklist a { font-weight: 700; text-decoration: none; }
.linklist a:hover { background: var(--jaune); }
.linklist .meta { margin: 4px 0 0; }

/* Inscription newsletter inline */
.newsletter-inline { background: var(--blanc); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 48px); }
.newsletter-inline h2 { margin-top: 0; }

/* Illustration de carte */
.card__image { width: 100%; border-radius: clamp(12px, 1.4vw, 16px); margin-bottom: 16px; display: block; }

/* Métadonnées d'article / de fiche */
.meta { color: var(--grisTexteSombre); font-size: var(--size-ltParagraphe); }
.article-image { border-radius: clamp(14px, 1.6vw, 20px); margin-top: 24px; }

/* Chips (catégories, filtres) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-block; text-decoration: none;
  font-size: var(--size-ltParagraphe); font-weight: 500;
  padding: 6px 16px; border-radius: var(--radius-button);
  background: var(--filetBeigeClair); color: var(--noir);
}
a.chip:hover { background: var(--jaune); }
.chip.is-active { background: var(--accent); }

/* Fiche projet */
.project-facts { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 24px; }
.project-facts dt { color: var(--grisTexteSombre); font-size: var(--size-ltParagraphe); }
.project-facts dd { margin: 4px 0 0; font-weight: 700; }

/* Formulaires (allauth, compte, contact) */
.account-form form, .account-form .passkey-login, .account-form .social-login { max-width: 480px; }
form p { margin-block: 14px; }
/* Widget ALTCHA : le champ (traité en champ caché par as_p) est injecté dans
   le <p> de l'input email — on le passe en bloc avec une marge pour qu'il ne
   colle pas à l'input qui le précède. */
altcha-widget { display: block; margin-top: 16px; }
form label { display: block; font-weight: 500; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], textarea, select {
  font-family: inherit; font-size: var(--size-ltParagraphe);
  padding: 12px 16px; width: 100%; max-width: 480px;
  border: 1px solid var(--filetBeige); border-radius: var(--radius-button);
  background: var(--blanc); color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--vert); }
button.btn { cursor: pointer; font-family: inherit; font-size: var(--size-ltParagraphe); }
button.chip { cursor: pointer; border: none; font-family: inherit; }
.helptext { display: block; color: var(--grisTexteSombre); font-size: var(--size-ltParagraphe); }
ul.errorlist, .errorlist { color: var(--rouge); list-style: none; padding: 0; font-weight: 500; }
.passkey-login, .social-login { margin-top: 32px; border-top: 1px solid var(--filetBeige); padding-top: 16px; }
.social-login form { display: inline-block; margin: 0 12px 8px 0; }
.btn--social { display: inline-flex; align-items: center; gap: 10px; background: var(--blanc); border-color: var(--filetBeige); }
.btn--social img { display: block; }
.passkey-mode { border: none; padding: 0; margin: 16px 0 0; }
.passkey-mode legend { font-weight: 700; }
.passkey-mode label { font-weight: 400; margin-block: 6px; }
.passkey-mode input[type="radio"] { width: auto; accent-color: var(--vertFonce); }

/* Messages flash (retours d'action allauth : email confirmé, déconnexion…) */
.messages { margin-top: 24px; }
.message {
  --accent: var(--vert);
  display: inline-block; background: var(--accent); color: var(--noir);
  border-radius: var(--radius-button); padding: 10px 20px;
  font-weight: 500; margin: 0 8px 8px 0;
}
.message--error { --accent: var(--rouge); }
.message--warning { --accent: var(--jaune); }
.message--info { --accent: var(--mauve); }

/* Gestion des adresses email (allauth) */
.email-list label { font-weight: 400; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.email-list input[type="radio"] { width: auto; accent-color: var(--vertFonce); }

/* Tableaux — .table-scroll évite le débordement horizontal sur mobile */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filetBeige); }
.table th { color: var(--grisTexteSombre); font-size: var(--size-ltParagraphe); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer { background: var(--noir); color: var(--grisTexteClair); margin-top: var(--space-ltSpace); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
  padding-block: clamp(40px, 6vw, 70px);
}
.site-footer h2 { color: var(--blanc); font-size: var(--size-h3); }
.site-footer a { color: var(--blanc); text-decoration: none; }
.site-footer a:hover { color: var(--vert); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-block: 8px; }
.site-footer__legal {
  border-top: 1px solid var(--anthraciteClair);
  padding-block: 20px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 24px; justify-content: space-between;
  font-size: var(--size-ltParagraphe);
}

/* Sélecteur de langue — logé dans la barre légale du pied de page :
   repérable (pastille verte sur la langue active, comme l'état actif de la
   nav) mais volontairement discret. Seule une partie du site est traduite,
   ce n'est donc pas un élément de navigation principal. */
.lang-switcher { display: flex; align-items: center; gap: 4px; }
/* Poussé à droite : le garde hors du coin bas-gauche où flotte le bouton du
   sommaire (TOC), y compris quand la barre légale passe à la ligne en mobile. */
.site-footer__legal .lang-switcher { margin-left: auto; }
.site-footer__legal .lang-switcher a,
.site-footer__legal .lang-switcher span {
  padding: 3px 9px; border-radius: var(--radius-button);
  line-height: 1; text-decoration: none;
}
.site-footer__legal .lang-switcher a { color: var(--grisTexteClair); }
.site-footer__legal .lang-switcher a:hover { color: var(--blanc); background: var(--anthraciteClair); }
.site-footer__legal .lang-switcher .is-current { color: var(--noir); background: var(--vert); font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Sommaire flottant (table des matières)                              */
/* Coquille rendue par includes/toc.html, remplie par js/toc.js depuis */
/* les titres identifiés au rendu (apps/core/heading_ids.py). Ancré à  */
/* GAUCHE pour ne pas chevaucher la wagtailuserbar (bas-droite). Reprend*/
/* la palette sombre du footer/cta-banner : lisible sans ombre.        */
/* ------------------------------------------------------------------ */
.toc {
  position: fixed;
  left: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 60;
  transition: opacity .2s ease, visibility .2s ease;
}
.toc__toggle {
  width: 52px; height: 52px; padding: 0;
  border: none; border-radius: var(--radius-pill);
  background: var(--vert); color: var(--noir);
  display: grid; place-items: center; cursor: pointer;
}
.toc__toggle:hover, .toc.is-open .toc__toggle { background: var(--jaune); }
.toc__toggle svg { display: block; }
.toc__panel {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  width: max-content; max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--noir); color: var(--grisTexteClair);
  border-radius: var(--radius-card); padding: 20px 22px;
}
.toc__title {
  margin: 0 0 12px; color: var(--blanc);
  font-size: var(--size-ltParagraphe); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__link {
  display: block; padding: 6px 0; text-decoration: none;
  color: var(--blanc); font-size: var(--size-ltParagraphe); line-height: 1.3;
}
.toc__item--h3 .toc__link { padding-left: 18px; color: var(--grisTexteClair); }
.toc__link:hover, .toc__link.is-current { color: var(--vert); }
.toc__link.is-current { font-weight: 700; }
/* Escamoté quand le pied de page est atteint (classe posée par toc.js) : au
   fond de page le scroll est épuisé, le bouton masquerait sinon le bas du
   footer (sélecteur de langue, mentions). visibility:hidden le retire aussi du
   parcours clavier. */
.toc.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; }
@media print { .toc { display: none; } }