/* ============================================================
   NOTRE HISTOIRE — Réhabiter Strasbourg
   La plupart des blocs utilisent section-full / card-grid de
   composants.css — ce fichier ne contient QUE ce qui est
   vraiment spécifique à cette page.

   Les <br> parasites de YesWiki et le responsive de base
   (padding mobile + grilles en 1 colonne) sont désormais gérés
   directement dans composants.css — plus besoin de les répéter ici.
   ============================================================ */


/* ======================================================
   ESPACEMENT ENTRE BLOCS — réduit pour CETTE PAGE uniquement
   (n'affecte pas l'accueil, ce fichier ne se charge que sur
   NotreHistoire). Les paddings internes des blocs (80px vertical
   de section-full, paddings des cartes, etc.) restent inchangés,
   seul l'écart ENTRE les blocs est réduit.
   ====================================================== */

:root {
  --space-block: 72px;
}

@media (max-width: 768px) {
  :root {
    --space-block: 56px;
  }
}

/* --- Bloc Hero : photo de fond spécifique à cette page --- */
.section-full.bg-photo-histoire {
  margin-bottom: 0; /* pas d'espace blanc avant le bloc suivant */
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 0.5)),
    url('/files/histoire.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;

  /* --- Hauteur adaptée à l'écran (ligne de flottaison) ---
     .section-full de base n'a qu'un padding fixe (80px) : pas assez
     pour un vrai Hero plein écran. On surcharge avec min-height en vh. */
  min-height: 90vh;
  min-height: 90svh; /* évite les sauts liés à la barre d'adresse mobile */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* sans ça, flexbox étire eyebrow/titre/texte/bouton sur toute la largeur */
  justify-content: center;
  box-sizing: border-box;
}

/* --- Titre du Hero : taille hero-title (grande), pas section-title ---
   .section-full met var(--fs-section-title) par défaut sur h2-h6,
   c'est la bonne taille pour un bloc classique, mais trop petit ici.
   On inclut aussi h1, au cas où le niveau de titre wiki (======) rende un h1. */
.section-full.bg-photo-histoire h1,
.section-full.bg-photo-histoire h2,
.section-full.bg-photo-histoire h3,
.section-full.bg-photo-histoire h4,
.section-full.bg-photo-histoire h5,
.section-full.bg-photo-histoire h6 {
  font-size: var(--fs-hero-title) !important;
  font-weight: 800 !important;
  max-width: 900px;
}

/* --- Texte blanc : plus automatique via composants.css puisqu'on n'utilise
   pas bg-orange/bg-teal ici, juste la photo --- */
.section-full.bg-photo-histoire .eyebrow-rehabiter,
.section-full.bg-photo-histoire h1,
.section-full.bg-photo-histoire h2,
.section-full.bg-photo-histoire h3,
.section-full.bg-photo-histoire h4,
.section-full.bg-photo-histoire h5,
.section-full.bg-photo-histoire h6,
.section-full.bg-photo-histoire .section-text {
  color: #ffffff !important;
  text-shadow: none !important;
}

.hero-title-light {
  opacity: 0.85;
}

/* --- Sur mobile, l'écran est plus étroit et haut : recadrage pour garder
   la partie importante de la photo (ligne de flottaison) visible --- */
@media (max-width: 768px) {
  .section-full.bg-photo-histoire {
    background-position: center 25%;
  }
}


/* ======================================================
   FRISE 2000→2020 — repart de zéro, structure d'abord
   ====================================================== */

/* ÉTAPE 1 : squelette 2 colonnes (texte à gauche / frise à droite), vide
   Largeur/marges/padding viennent maintenant de section-full (ajoutée à
   côté de cette classe dans le wiki) — plus de doublon. */
.histoire-frise-section {
  display: grid;
  grid-template-columns: 1fr 2fr; /* équivalent du ratio 4/8 */
  gap: 64px;
}

.histoire-frise-section > br {
  display: none !important;
}

@media (max-width: 768px) {
  .histoire-frise-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .histoire-frise-intro {
    position: static; /* le sticky n'a plus de sens en 1 colonne */
    top: auto;
  }
}

/* ÉTAPE 2 : titre */
.histoire-frise-intro h2,
.histoire-frise-intro h3,
.histoire-frise-intro h4,
.histoire-frise-intro h5,
.histoire-frise-intro h6 {
  font-size: var(--fs-section-title) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: var(--color-text) !important;
}

.histoire-frise-intro br:not(.force-break) {
  display: none !important;
}

.histoire-frise-intro {
  position: sticky;
  top: 140px;
  align-self: flex-start;
}

/* ÉTAPE 3 : sous-titre */
.histoire-frise-text {
  font-size: var(--fs-body);
  color: var(--color-text-clair);
  line-height: 1.6;
  margin-bottom: 28px !important;
}

/* ÉTAPE 5 : liste de la frise — date à GAUCHE de la ligne (comme la maquette),
   tag + titre + texte à DROITE. Très compact. */
.histoire-frise-liste {
  position: relative;
  padding-left: 88px; /* espace réservé : largeur date (64px) + espace ligne/pastille (24px) */
}

.histoire-frise-liste::before {
  content: '';
  position: absolute;
  left: 76px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-lightblue);
}

.histoire-frise-liste > br,
.frise-item > br,
.frise-contenu > br {
  display: none !important;
}

.frise-item {
  position: relative;
  padding-bottom: 20px; /* espacement fortement réduit */
}

.frise-item:last-child {
  padding-bottom: 0;
}

/* pastille sur la ligne */
.frise-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-orange);
  border: 3px solid var(--color-cream);
  box-shadow: 0 0 0 2px var(--color-orange);
}

/* date : positionnée à GAUCHE de la ligne, hors du flux normal */
.frise-annee {
  position: absolute;
  left: -88px;
  top: 2px;
  width: 64px;
  text-align: right;
  font-size: 20px !important;
  font-weight: 700;
  color: var(--color-orange) !important;
}

.frise-tag {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-teal);
  background: var(--color-lightblue);
  padding: 3px 12px;
  border-radius: var(--btn-radius);
  margin-bottom: 6px;
}

.frise-contenu h1,
.frise-contenu h2,
.frise-contenu h3,
.frise-contenu h4,
.frise-contenu h5,
.frise-contenu h6 {
  font-size: 18px !important;
  color: var(--color-text) !important;
  margin-bottom: 4px !important;
}

.frise-contenu p {
  font-size: var(--fs-body);
  color: var(--color-text-clair);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .histoire-frise-liste {
    padding-left: 64px;
  }
  .histoire-frise-liste::before {
    left: 6px;
  }
  .frise-item::before {
    left: -58px;
  }
  .frise-annee {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 4px;
    display: block;
  }
}

/* ÉTAPE 6 : variante de tag pour "Aujourd'hui", dernier point de la frise */
.frise-tag-aujourdhui {
  color: #ffffff;
  background: var(--color-teal);
}


/* ======================================================
   CE QUI NOUS ANIME — corrections propres à cette page
   ====================================================== */

/* Titres de carte invisibles sur fond bg-teal : la règle blanche de
   composants.css (.section-full.bg-teal h2...h6) est plus spécifique que
   celle de .card dans composants.css, donc elle gagnait et rendait le
   texte blanc sur fond blanc. On renforce la spécificité ici. */
.section-full.bg-teal .card h1,
.section-full.bg-teal .card h2,
.section-full.bg-teal .card h3,
.section-full.bg-teal .card h4,
.section-full.bg-teal .card h5,
.section-full.bg-teal .card h6 {
  color: var(--color-text) !important;
}

/* Grille personnalisée : 3 cartes en haut, 2 en bas (la dernière 2x plus
   large, avec une citation) — pas card-grid-3 de composants.css, structure
   trop spécifique à ce bloc précis. */
.valeurs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.valeurs-grid > br {
  display: none !important;
}

.valeurs-grid .card:nth-of-type(4) {
  grid-column: 1;
}

.valeurs-grid .card:nth-of-type(5) {
  grid-column: 2 / -1;
}

/* Alternance de 3 couleurs (blanc / bleu clair / orange clair) */
.valeurs-grid .card:nth-of-type(3n+2) {
  background: #E7F1F1 !important;
}

.valeurs-grid .card:nth-of-type(3n) {
  background: #FFF1E0 !important;
}

/* "Ouverture" (4e carte) en orange clair aussi, sur demande */
.valeurs-grid .card:nth-of-type(4) {
  background: #FFF1E0 !important;
}

/* Cartes compactes : padding réduit, texte et titres plus petits */
.valeurs-grid.card-grid .card {
  padding: 24px 22px;
  box-shadow: none;
}

.valeurs-grid .card-icone {
  width: 40px;
  height: 40px;
  background: rgba(65, 62, 60, 0.08);
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.section-full.bg-teal .valeurs-grid .card h3,
.section-full.bg-teal .valeurs-grid .card h4,
.section-full.bg-teal .valeurs-grid .card h5 {
  font-size: 1rem !important;
  margin-bottom: 8px !important;
}

.valeurs-grid .card-text {
  line-height: 1.6;
  margin-bottom: 0 !important;
}

/* Citation en bas de la dernière carte (L'amour du risque) */
.card-quote {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--color-text-clair);
  margin-top: 16px;
}

@media (max-width: 768px) {
  .valeurs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .valeurs-grid .card:nth-of-type(4),
  .valeurs-grid .card:nth-of-type(5) {
    grid-column: 1;
  }
}


/* ======================================================
   COMMENT ON TRAVAILLE — card-grid-5 classique de composants.css,
   juste la citation finale est propre à ce bloc.
   ====================================================== */

.travaille-citation {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-text-clair);
  line-height: 1.6;
}

/* Titres des cartes à 20px sur fond blanc : couvre "Nos missions" et
   "Comment on travaille" (les 2 seuls blocs bg-white avec des cartes) */
.section-full.bg-white .card h2,
.section-full.bg-white .card h3,
.section-full.bg-white .card h4,
.section-full.bg-white .card h5,
.section-full.bg-white .card h6 {
  font-size: 20px !important;
}


/* ======================================================
   ÉQUIPE ET GOUVERNANCE — photos rondes + nom + rôle
   ====================================================== */

.equipe-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
  margin-top: 40px;
}

.equipe-membre {
  text-align: center;
  width: 200px;
}

.equipe-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
}

.equipe-nom {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 2px !important;
}

.equipe-role {
  font-size: 0.85rem;
  color: var(--color-text-clair);
  margin: 0 !important;
}

.equipe-footer {
  font-size: 18px;
  color: var(--color-text-clair);
  margin: 40px auto 0;
  max-width: 720px;
  text-align: center;
}


/* ======================================================
   ACCORDÉON MOBILE — technique "checkbox hack" (input caché + label),
   pas <details>/<summary> : ce dernier bloque le forçage CSS "toujours
   ouvert sur desktop" à cause de son fonctionnement interne (shadow DOM
   du navigateur, inaccessible en CSS). Le checkbox hack est du CSS
   classique, sans ce piège.

   Résultat : fermé par défaut sur mobile (cliquable pour ouvrir),
   toujours ouvert sur desktop (non cliquable).

   Usage (l'ID doit être UNIQUE sur toute la page, ex: acc-mission-1,
   acc-mission-2, acc-anime-1...) :
   ""<input type="checkbox" id="acc-mission-1" class="accordion-toggle" />""
   ""<label for="acc-mission-1" class="accordion-label">""""<strong>""Titre""</strong>""""</label>""
   ""<p class="card-text">""Texte...""</p>""
   ====================================================== */

.accordion-toggle {
  display: none !important;
}

/* Le thème du site ajoute automatiquement un <span> juste après chaque
   <input type="checkbox"> pour dessiner une case à cocher stylisée
   (fichier checkboxes-radio.css) — on le cache aussi, sinon il reste
   visible même si l'input est masqué. */
.accordion-toggle + span {
  display: none !important;
}

.accordion-label {
  display: block;
  cursor: pointer;
  position: relative;
  margin-bottom: 8px;
}

.accordion-label::after {
  content: '+';
  float: right;
  font-weight: 700;
  color: var(--color-orange);
}

.accordion-toggle:checked + .accordion-label::after {
  content: '\2212'; /* signe moins */
}

.accordion-toggle ~ .card-text,
.accordion-toggle ~ .card-quote {
  display: none;
}

.accordion-toggle:checked ~ .card-text,
.accordion-toggle:checked ~ .card-quote {
  display: block;
}

/* Desktop : toujours ouvert, peu importe l'état de la case à cocher,
   et on neutralise l'apparence cliquable */
@media (min-width: 769px) {
  .accordion-label {
    cursor: default;
    pointer-events: none;
  }
  .accordion-label::after {
    display: none;
  }
  .accordion-toggle ~ .card-text,
  .accordion-toggle ~ .card-quote {
    display: block !important;
  }
}


/* ======================================================
   NOS ENGAGEMENTS DANS LES RÉSEAUX — logos partenaires
   ====================================================== */

.partenaires-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
}

.partenaire-logo {
  display: block;
  line-height: 0;
}

.partenaire-logo img {
  height: 140px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.partenaire-logo:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 768px) {
  .partenaires-logos {
    gap: 32px;
  }
  .partenaire-logo img {
    height: 50px;
  }
}

@media (max-width: 768px) {
  .equipe-liste {
    justify-content: center;
    gap: 32px;
  }
}

/* ======================================================
   POURQUOI ON EXISTE — section-full bg-orange de composants.css
   gère déjà automatiquement : fond orange, texte blanc (eyebrow,
   titre, .section-text), font-size, espacement. On ajoute ici
   uniquement ce qui est propre à ce bloc : la grille 2 colonnes,
   la liste à puces, et les 2 cartes blanches à droite.
   ====================================================== */

.pourquoi-grid {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-top: 8px;
}

.pourquoi-col-text {
  flex: 1;
  min-width: 0;
}

.pourquoi-col-cards {
  flex: 1;
  min-width: 0;
}

.pourquoi-grid br:not(.force-break) {
  display: none !important;
}

/* --- Colonne gauche : liste à puces --- */
.pourquoi-souslistetitre {
  color: #ffffff;
  font-weight: 700;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 24px 0 14px;
}

.pourquoi-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pourquoi-liste li {
  position: relative;
  padding-left: 22px;
  color: #ffffff;
  font-weight: 700;
  font-size: var(--fs-body);
  margin-bottom: 10px;
}

.pourquoi-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

/* --- Colonne droite : 2 cartes --- */

.citation-card,
.value-card {
  background: #ffffff;
  border-radius: var(--card-radius);
  padding: 36px 32px;
}

.citation-card {
  margin-bottom: 24px;
}

.value-card {
  background: #FFF1E0 !important;
}

.citation-mark {
  font-family: Georgia, serif;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.5;
  color: var(--color-orange);
  margin-bottom: 20px;
}

.citation-text {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.citation-footnote {
  font-size: 0.85rem;
  color: var(--color-text-clair);
  line-height: 1.5;
}

/* Spécificité renforcée (.section-full.bg-orange .value-card au lieu de
   juste .value-card) pour battre la règle de composants.css qui met tous
   les titres en blanc sur fond orange — sinon le titre reste invisible
   sur la carte blanche/crème. */
.section-full.bg-orange .value-card h1,
.section-full.bg-orange .value-card h2,
.section-full.bg-orange .value-card h3,
.section-full.bg-orange .value-card h4,
.section-full.bg-orange .value-card h5,
.section-full.bg-orange .value-card h6 {
  font-size: 1.1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text) !important;
  margin: 0 0 12px !important;
}

.value-card p {
  font-size: var(--fs-body);
  color: var(--color-text-clair);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .pourquoi-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
}


/* ======================================================
   CITATION SUR FOND PHOTO — bannière après "Comment on travaille"
   Les règles pour .citation-fond-* existent déjà dans accueil.css
   (chargé sur toutes les pages) et sont réutilisées telles quelles
   ici, sans surcharge : pas de recadrage forcé de l'image (elle
   garde ses proportions naturelles, jamais "zoomée"), trait
   décoratif à gauche déjà en place. Rien à ajouter.
   ====================================================== */


/* ======================================================
   CTA FINAL — "Ensemble, réhabitons !"
   Règles déjà présentes dans accueil.css (chargé sur toutes les
   pages) et fonctionnelles sur l'accueil. Réutilisées telles
   quelles ici, rien à ajouter.
   ====================================================== */