/* ========================================================================= *
 * sections.css — Composants de sections partagés (accueil + pages dédiées).   *
 * Chargé via le bloc extra_head sur les pages qui en ont besoin (DESIGN §5).  *
 * ========================================================================= */

/* En-tête de section + badge d'icône. */
.section__head {
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.section__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.section__lead {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
}

.icon-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-050);
  color: var(--color-primary);
}

.icon-badge .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- Page Contact ---------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 0.8fr 1.2fr; }
}

.contact-coords__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.contact-coords__list li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---- Teasers de l'accueil (vitrine vers les pages dédiées) ----------- */
.teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-3);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.teaser__link:hover { color: var(--color-primary-600); }

.teaser__link .icon { width: 1.1rem; height: 1.1rem; }

/* ========================================================================= *
 * Animations — illustrations SVG + ambiance abstraite (DESIGN §6)            *
 * GPU only (transform/opacity), coupées par prefers-reduced-motion.          *
 * ========================================================================= */

/* Illustrations SVG (héritent des tokens via var()). */
.illus {
  display: block;
  width: 100%;
  height: auto;
}

.illus--securite {
  max-width: 440px;
  margin-inline: auto;
}

.illus__check {
  stroke-dasharray: 16;
}

@media (prefers-reduced-motion: no-preference) {
  .illus__ring {
    transform-box: view-box;
    transform-origin: 200px 160px;
    animation: illus-pulse 4.5s var(--ease-out) infinite;
  }

  .illus__ring:nth-of-type(2) { animation-delay: 0.7s; }
  .illus__ring:nth-of-type(3) { animation-delay: 1.4s; }

  .illus__orbit {
    transform-box: view-box;
    transform-origin: 200px 160px;
    animation: illus-orbit 28s linear infinite;
  }

  .illus__core {
    animation: illus-bob 6s var(--ease-out) infinite;
  }
}

@keyframes illus-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

@keyframes illus-orbit {
  to { transform: rotate(360deg); }
}

@keyframes illus-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Ambiance abstraite : blobs flous qui dérivent lentement. */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
}

.ambient__blob--1 {
  width: 360px;
  height: 360px;
  left: -90px;
  top: -70px;
  background: radial-gradient(circle, rgba(15, 111, 255, .18), transparent 70%);
}

.ambient__blob--2 {
  width: 300px;
  height: 300px;
  right: -70px;
  top: 30px;
  background: radial-gradient(circle, rgba(25, 210, 124, .16), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .ambient__blob--1 { animation: blob-drift-a 20s ease-in-out infinite; }
  .ambient__blob--2 { animation: blob-drift-b 24s ease-in-out infinite; }
}

@keyframes blob-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(34px, 22px); }
}

@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-26px, 30px); }
}

/* En-tête de page avec ambiance (pages dédiées qui chargent sections.css). */
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-header::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 111, 255, .12), transparent 70%);
  filter: blur(50px);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  .page-header::before {
    animation: blob-drift-b 22s ease-in-out infinite;
  }

  .hero::before {
    animation: blob-drift-a 28s ease-in-out infinite;
  }
}

.illus-block {
  margin-bottom: var(--space-6);
}

.illus-block--sm .illus {
  max-width: 320px;
  margin-inline: auto;
}

/* ---- Hero de page intérieure (plus compact que le hero d'accueil) ----- */
.page-hero .hero__inner {
  padding-block: var(--space-8) var(--space-8);
}

@media (min-width: 1024px) {
  .page-hero .hero__inner { min-height: auto; }
}

.page-hero .hero__title {
  font-size: var(--fs-h1);
}

/* ---- Bande de chiffres clés ------------------------------------------ */
.stats-band {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  text-align: center;
}

@media (min-width: 640px) {
  .stats-band { grid-template-columns: repeat(3, 1fr); }
}

.stats-band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stats-band__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary-050);
  color: var(--color-primary);
}

.stats-band__label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

/* ---- Timeline « histoire » ------------------------------------------- */
.timeline {
  display: grid;
  gap: var(--space-3);
  border-left: 2px solid var(--color-border-strong);
  padding-left: var(--space-3);
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-3) - 6px);
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}

.timeline__year {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.timeline__text {
  margin-top: 0.35rem;
  color: var(--color-text-muted);
}

/* ---- Bloc image + contenu (50/50) ------------------------------------ */
.feature-split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .feature-split { grid-template-columns: 1fr 1fr; }
}

.feature-split__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.feature-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.feature-list .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  flex: none;
}

.illus--cycle {
  max-width: 300px;
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .illus--cycle .illus__arc {
    transform-box: view-box;
    transform-origin: 160px 160px;
    animation: illus-orbit 12s linear infinite;
  }

  .illus--cycle .illus__leaf {
    transform-box: fill-box;
    transform-origin: center;
    animation: illus-pulse-soft 5s var(--ease-out) infinite;
  }
}

@keyframes illus-pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ========================================================================= *
 * 5.2 Hero                                                                    *
 * ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Dégradé d'ambiance + grille très discrète en fond. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(15, 111, 255, .10), transparent 70%),
    radial-gradient(55% 45% at 95% 15%, rgba(25, 210, 124, .08), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-12) var(--section-gap);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 90svh;
  }
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--color-primary-050);
  color: var(--color-primary-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

.hero__title {
  font-size: var(--fs-display);
}

.hero__subtitle {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.hero__trust .icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-accent-600);
}

/* ---- Visuel du hero : photo premium + cartes glass flottantes ---------- */
.hero__visual {
  position: relative;
  isolation: isolate;
}

.hero__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Léger voile dégradé pour unifier la photo avec la marque. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15, 111, 255, .10), transparent 45%, rgba(13, 17, 23, .28));
  pointer-events: none;
}

.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-glass);
  font-size: var(--fs-small);
  max-width: 16rem;
}

.hero__badge strong { font-weight: var(--fw-semibold); }
.hero__badge .muted { color: var(--color-text-subtle); }

.hero__badge--a { top: 8%; left: -6%; }
.hero__badge--b { bottom: 8%; right: -5%; }

@media (max-width: 520px) {
  .hero__badge--a { left: 4%; }
  .hero__badge--b { right: 4%; }
}

.icon-badge--sm {
  width: 2.4rem;
  height: 2.4rem;
}

.icon-badge--sm .icon { width: 1.25rem; height: 1.25rem; }

.icon-badge--accent {
  background: rgba(25, 210, 124, .14);
  color: var(--color-accent-600);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__badge--a { animation: badge-float 7s var(--ease-out) infinite; }
  .hero__badge--b { animation: badge-float 7s var(--ease-out) infinite 1.5s; }
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ========================================================================= *
 * 5.3 Chiffres                                                                *
 * ========================================================================= */
.stats__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-card__value {
  margin-top: var(--space-2);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.stat-card__label {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.feature-card__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h3);
}

.feature-card__desc {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ========================================================================= *
 * 5.4 Timeline « Notre démarche » (6 étapes)                                  *
 * ========================================================================= */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding: 0;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  position: relative;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-sm);
}

/* Les six étapes forment une suite : le trait qui relie les cartes dit ce que
   la grille seule ne dit pas. Il occupe exactement la gouttière et s'efface en
   fin de ligne — donc à un rang différent selon le nombre de colonnes. */
.step::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--space-4);
  height: 1px;
  background: var(--color-border-strong);
}

/* Chaque palier a sa propre plage : sans cela la règle à deux colonnes, plus
   spécifique, l'emporterait sur celle à trois colonnes malgré l'ordre. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .step:not(:nth-child(2n)):not(:last-child)::after { display: block; }
}

@media (min-width: 1024px) {
  .step:not(:nth-child(3n)):not(:last-child)::after { display: block; }
}

.step__num {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-border-strong);
  line-height: 1;
}

.step__num::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
}

.step__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h3);
}

.step__desc {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ========================================================================= *
 * 5.5 Conformité & preuves                                                    *
 * ========================================================================= */
.proofs__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .proofs__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .proofs__grid { grid-template-columns: repeat(3, 1fr); }
}

.proof {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.proof__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.proof__desc {
  margin-top: 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ========================================================================= *
 * 5.6 Impact (3 dimensions)                                                   *
 * ========================================================================= */
.impact {
  background: linear-gradient(180deg, rgba(25, 210, 124, .06), transparent 60%);
}

.impact__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .impact__grid { grid-template-columns: repeat(3, 1fr); }
}

.impact-card__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h3);
}

.impact-card__stat {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-accent-600);
  line-height: 1;
}

.impact-card__desc {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ========================================================================= *
 * Galerie (mosaïque CSS Grid d'images)                                        *
 * ========================================================================= */
/* Planche de suivi. Le parcours du matériel est déjà raconté par la section
   « Notre démarche » ; cette galerie-ci sert de preuve, pas de récit. D'où la
   grille régulière — un relevé, pas une mosaïque décorative — et la légende
   posée sur une étiquette plutôt qu'en surimpression sur la photo :
   à l'atelier, chaque appareil qui passe porte sa fiche de suivi. */
.gallery {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

.gallery__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* L'étiquette. Texte encré sur papier : contraste franc, lisible au doigt
   comme au clavier, sans dépendre d'un survol. */
.gallery__caption {
  position: relative;
  flex: 1;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-top: 2px solid var(--color-border-strong);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}

/* L'œillet de l'étiquette : le seul ornement de la section, réduit au trait. */
.gallery__caption::before {
  content: "";
  position: absolute;
  top: calc(var(--space-2) + 0.35em);
  left: var(--space-1);
  width: 0.45em;
  height: 0.45em;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-bg);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery__item img,
  .gallery__caption { transition: transform var(--dur) var(--ease-out),
                                  border-color var(--dur-fast) var(--ease-out); }
  .gallery__item:hover img { transform: scale(1.04); }
  .gallery__item:hover .gallery__caption { border-top-color: var(--color-primary); }
}

/* ========================================================================= *
 * CTA final                                                                   *
 * ========================================================================= */
.cta-final {
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600));
  color: #fff;
  text-align: center;
}

.cta-final__title {
  color: #fff;
}

.cta-final__text {
  margin: var(--space-2) auto 0;
  max-width: 50ch;
  color: rgba(255, 255, 255, .88);
}

.cta-final__actions {
  margin-top: var(--space-4);
}

/* Particules lumineuses lentes — uniquement si l'utilisateur ne réduit pas les
   animations (DESIGN §5.10). pointer-events: none, purement décoratives. */
.cta-final__spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  pointer-events: none;
}

.cta-final__spark:nth-of-type(1) { left: 12%; top: 30%; width: 10px; height: 10px; }
.cta-final__spark:nth-of-type(2) { left: 78%; top: 22%; width: 6px; height: 6px; }
.cta-final__spark:nth-of-type(3) { left: 60%; top: 64%; width: 14px; height: 14px; }
.cta-final__spark:nth-of-type(4) { left: 30%; top: 70%; width: 8px; height: 8px; animation-delay: 1.5s; }

@media (prefers-reduced-motion: no-preference) {
  .cta-final__spark {
    animation: cta-float 9s var(--ease-out) infinite alternate;
  }
}

@keyframes cta-float {
  from { transform: translateY(8px); opacity: .25; }
  to   { transform: translateY(-8px); opacity: .5; }
}

/* ========================================================================= *
 * 5.12 Page « Faire un don » — carte de don                                   *
 * L'action tient dans une seule carte, posée à la place de la photo du hero.  *
 * Un filet vert (--color-accent) la distingue du bleu « donner du matériel » :  *
 * c'est le seul écart de couleur de la page, tout le reste reste discipliné.  *
 * ========================================================================= */
.don-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-md);
}

.don-card__rail {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

.don-card__title {
  margin-top: var(--space-1);
  font-size: var(--fs-h3);
}

.don-card__text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

/* Sélecteur composé : l'emporter sur `.btn { display: inline-flex }`. */
.don-card .don-card__cta {
  display: flex;
  width: 100%;
  margin-top: var(--space-3);
}

.don-card__note {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
}

.don-card__note .icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--color-accent-600);
}