/* ============================================
   COLLECTIF WEB — GABARIT FICHE-VERTENDANCE
   Extrait tel quel de maquettes/fiche-vertendance.html, maquette validée et gelée.
   L'habillage commun (en-tête, menu, pied) vit dans commun.css.
   ============================================ */

/* ====== Gabarit Fiche projet (template — 1re instance : VerTendance) ======
   Fondations reprises du gabarit projets (header, menu mobile, bascule,
   révélations). Les patterns partagés remonteront au DS à la réutilisation. */

/* Sections de page */
.band { margin-bottom: clamp(88px, 11vw, 136px); }

/* ====== Hero de fiche — compact : une fiche, pas une page de vente ====== */
.hero--fiche .hero__title { font-size: clamp(34px, 4.6vw, 58px); }
.hero__retour {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: rgba(237, 241, 239, .75);
  text-decoration: none;
  padding: 5px 0;
  margin-bottom: var(--space-4);
}
.hero__retour:hover,
.hero__retour:focus-visible { color: var(--vert-bright); }

/* Métadonnées et lien : une seule ligne calme SOUS le texte — aucun libellé
   au-dessus des titres, nulle part (retour d'Alexandre, D-056). */
.hero__liens {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: rgba(237, 241, 239, .75);
}
.lien-site {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  padding: 5px 0;
}
.lien-site:hover,
.lien-site:focus-visible { color: var(--vert-bright); }

/* ====== Grande image — la preuve avant le texte ====== */
.figure-pleine { margin: 0; border: var(--border-w) solid var(--border); }
.figure-pleine img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ====== Le dossier — 4 encarts au trait (pattern des fiches actuelles) ====== */
.titre-section { margin: 0 0 var(--space-6); }
.dossier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-7);
}
.dossier > div { border-top: var(--border-w-thin) solid var(--border); padding-top: var(--space-4); }
.dossier h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.dossier p { margin: 0; }

/* Ce qu'on a livré — pastilles factuelles */
.livraison { margin-top: var(--space-6); border-top: var(--border-w-thin) solid var(--border); padding-top: var(--space-4); }
.livraison h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.livraison .pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.livraison .pastilles span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  border: var(--border-w-thin) solid var(--border);
  padding: 6px 12px;
}
.livraison .renvoi {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-block;
  padding: 5px 0;
}
.livraison .renvoi:hover,
.livraison .renvoi:focus-visible { color: var(--accent); }

/* ====== Éléments marquants — « le projecteur » (verdict brainstorm) :
   les récits défilent, la fenêtre au trait reste épinglée et projette la
   capture du point au centre. Sur mobile et sans JavaScript : chaque récit
   garde sa capture juste sous lui, dans l'ordre de lecture. ====== */
.marquants-scene {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-6);
  align-items: start;
}

/* Chaque récit occupe ~4/5 d'écran : la bande de détection centrale le tient
   longtemps — les captures changent posément, jamais deux d'un coup (retour
   d'Alexandre : « les images changent très vite ou passent de la première à
   la troisième directement »). */
.marquant-recit { min-height: 78vh; display: grid; align-content: center; gap: var(--space-3); }
html.js .marquant-recit { opacity: .35; transition: opacity .45s var(--ease-out); }
html.js .marquant-recit.actif { opacity: 1; }
.marquant-recit h3 { margin: 0; }
.marquant-recit p { margin: 0; max-width: 60ch; }
.marquants-colle { position: sticky; top: 24px; }
.marquants-colle figure { margin: 0; }
.marquants-visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.marquants-visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: top;
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.marquants-visuel img.actif { opacity: 1; }

/* Version empilée : mobile et sans JavaScript */
.marquant-fenetre-mobile { display: none; margin: var(--space-3) 0 0; }
html:not(.js) .marquants-colle { display: none; }
html:not(.js) .marquant-fenetre-mobile { display: block; }
html:not(.js) .marquant-recit { min-height: 0; }
html:not(.js) .marquant-recit + .marquant-recit { margin-top: var(--space-6); }
.fenetre { border: var(--border-w) solid var(--border); background: var(--surface); box-shadow: var(--shadow-hard); }
.fenetre__barre {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  border-bottom: var(--border-w-thin) solid var(--border-soft);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.fenetre__barre .pastilles { display: flex; gap: 5px; }
.fenetre__barre .pastilles i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.fenetre img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }

/* ====== Témoignage — dalle sobre, au trait ======
   La maquette de fiche nomme ce bloc `temoignage`, l'accueil le nomme
   `testimonial` — deux noms pour un seul composant. Le thème garde le nom du
   design system, et la fiche se contente d'en modifier l'habillage : dalle au
   trait sur le fond de la page, là où l'accueil la pose en vert profond. */
.testimonial {
  background: none;
  color: inherit;
  padding: clamp(28px, 4vw, 56px);
}
.testimonial blockquote {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
}

/* Signature : portrait (quand il existe) + nom et rôle */
.testimonial__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  border-top: 0;
  padding-top: 0;
}
.testimonial__portrait {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px dashed var(--muted);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--muted);
}
.testimonial__portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Avec une vraie photo, le cadre d'attente en pointillé n'a plus de raison
   d'être : le rond de la photo tient tout seul. */
.testimonial__portrait--photo { border: 0; }

/* ====== Projets connexes — 2 cartes du DS ====== */
.connexes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.project-card__cover--photo { background: var(--paper); }
.project-card__cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card__cover--photo::after { display: none; }
.project-card__action { margin-top: 2px; }
.project-card__action a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--paper);
  text-decoration: none;
  display: inline-block;
  padding: 5px 0;
}
.project-card__action a:hover,
.project-card__action a:focus-visible { color: var(--vert-bright); }

/* ====== Appel final — boutons côte à côte (pattern expertises) ====== */
.cta-block { grid-template-columns: 1fr auto; align-items: center; }
.cta-block .actions { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-block .actions .btn { color: var(--paper); border-color: var(--paper); }
.cta-block .actions .btn--dark { background: var(--ink); border-color: var(--ink); }

/* ====== Motion (D-058) ====== */

/* Révélation au défilement — visible par défaut, le JS ajoute la retenue */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
.connexes-grid .project-card:nth-child(2) { transition-delay: .07s; }

/* Entrée orchestrée du hero (retour → méta → titre → sous-titre → lien) */
html.js .hero__inner > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .hero__inner > :nth-child(2) { transition-delay: .06s; }
html.js .hero__inner > :nth-child(3) { transition-delay: .12s; }
html.js .hero__inner > :nth-child(4) { transition-delay: .18s; }
html.js .hero--go .hero__inner > * { opacity: 1; transform: none; }
.hero { position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }

/* Fond hero — l'étoile du projet (déclinaison fiche de D-070). Sans JS : fond uni. */
.hero__fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__fond canvas { width: 100%; height: 100%; display: block; }

/* Responsive */
@media (max-width: 1000px) {
  .cta-block { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .blocs { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Le projecteur version mobile : plus d'épinglage — récit puis capture,
     empilés dans l'ordre de lecture, pleine largeur */
  .marquants-scene { grid-template-columns: 1fr; }
  /* min-width: 0 — sinon la colonne du récit refuse de descendre sous son
     contenu minimal et sort de l'écran par la droite sous 380 px. */
  .marquants-recits { min-width: 0; }
  /* La barre de la fenêtre porte une adresse d'un seul tenant
     (« fondationeulalierose.org ») : elle imposait sa largeur à tout le récit.
     Elle se coupe désormais, comme le ferait un vrai navigateur. */
  .marquant-fenetre-mobile,
  .marquant-fenetre-mobile .fenetre__barre { min-width: 0; }
  .marquant-fenetre-mobile .fenetre__barre > span:not(.pastilles) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marquants-colle { display: none; }
  html.js .marquant-recit { opacity: 1; }
  .marquant-recit { min-height: 0; }
  .marquant-recit + .marquant-recit { margin-top: var(--space-6); }
  .marquant-fenetre-mobile { display: block; }
}
@media (max-width: 800px) {
  .dossier { grid-template-columns: 1fr; }
  .connexes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Les titres de projet sont des noms propres, parfois d'un seul mot collé
     (« VerTendance ») : le plancher descend pour qu'ils tiennent en 320 px. */
  .hero--fiche .hero__title { font-size: clamp(26px, 8.4vw, 40px); }
  .figure-pleine img { aspect-ratio: 4 / 3; }
  .site-header { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
  .site-header .logo-img { height: 20px; }
  .site-header__actions .btn { display: none; }
  /* Rembourrage réduit de la dalle : les boutons pleine largeur respirent */
  .cta-block { padding: var(--space-6) var(--space-5); }
  .cta-block .actions .btn { width: 100%; justify-content: center; }
}