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

/* ====== Gabarit accueil — styles de page (tokens DS uniquement) ======
   Les patterns qui se répètent sur d'autres gabarits remonteront au DS. */

/* Sections de page */
.band { margin-bottom: clamp(88px, 11vw, 136px); }
.band__head { margin-bottom: var(--space-6); }
.band__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  padding-top: 22px;
  position: relative;
}

/* Le trait du titre se trace de gauche à droite quand la section arrive */
.band__head h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-w);
  background: var(--border);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
}
html.js .band__head h2::before { transform: scaleX(0); }
html.js .band__head.in h2::before { transform: scaleX(1); }
.band__head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); }
.band__head p { font-size: var(--fs-body-l); color: var(--fg-soft); max-width: 76ch; margin: 0; }

/* Les trois publics : une ligne par public, et la plus longue tient d'un seul
   tenant sur grand écran. Le plafond de 76 caractères la coupait en plein
   milieu (retour de revue du 9 août, commentaire n° 14). */
.band--segments .band__head p { max-width: none; }

/* Placeholder photo (en attendant les photos lifestyle) */
.ph-photo {
  aspect-ratio: 16 / 10;
  border: 1.5px dashed var(--rule-strong);
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark-mode .ph-photo { border-color: var(--rule-dark-strong); }

/* Cover avec vraie image (vignettes du portfolio actuel) */
.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; }

/* La bande équipe (D-061) est retirée le 9 août : Alexandre en refuse les
   bulles au-dessus des projets (retour de revue, commentaire n° 9). Les douze
   portraits vivent toujours sur la page Le Collectif. */

/* La bande de logos vit dans commun.css : quatre pages la partagent. */

/* Segments — Agences au centre, dominante */
.segments { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: var(--space-5); align-items: stretch; }
.segment { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); }
.segment .ph-photo { aspect-ratio: 4 / 3; }

/* Photos segments (banque d'images en attendant le shooting) — teinte de marque (D-061) :
   couleur d'origine légèrement désaturée + voile vert en fusion « color » à 25 %.
   Le plein bichrome (D-060) tirait vers le cyan. */
.segment__photo { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.segment__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.02);
  transition: transform .6s var(--ease-out);
}
.segment__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vert);
  mix-blend-mode: color;
  opacity: .25;
  pointer-events: none;
}
.segment:hover .segment__photo img { transform: scale(1.04); }
.segment h3 { margin: 0; }
.segment p { margin: 0; font-size: var(--fs-small); color: var(--fg-soft); }
.segment .go { justify-self: start; }
.segment--featured { outline: var(--border-w) solid var(--accent); outline-offset: 4px; }

/* Carte Agences — format différencié : preuves nommées au lieu du clone élargi */
.segment--featured .proofs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.segment--featured .proofs li {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  font-size: var(--fs-small);
  color: var(--fg-soft);
}
.segment--featured .proofs b { color: var(--fg); }

/* Processus — La Traversée (D-060) : une ligne se dessine d'une rive à l'autre et
   relie les cinq étapes-pastilles ; la dernière (Autonomie) marque l'accostage.
   Les étapes s'allument en séquence pendant que la ligne avance. */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--ease-out) .15s;
}
html:not(.js) .steps::before { transform: scaleX(1); }
.steps.in::before { transform: scaleX(1); }
.step { position: relative; }
.step .num {
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--accent);
  font-weight: 700;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 10px;
}
.step:last-child .num { background: var(--accent); color: var(--bg); }
.step h3 { margin: 0 0 4px; font-size: 17px; }
.step p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* Sous 1000 px la grille se replie : la ligne horizontale perd son sens, on la retire */
@media (max-width: 1000px) { .steps::before { display: none; } }

/* Le kayak traverse la section (D-062, verdict du 25 juillet) : chaque coup de
   pagaie le propulse — poussée puis glisse — la pagaie alterne les côtés et le
   sillage se dissipe derrière. Section rehaussée pour donner à la méthode la
   place qu'elle mérite. Sans JavaScript : fond nu (D-057). */
.band--traversee { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 72px) 0; }
.band--traversee .band__head { position: relative; }
.traversee-kayak { position: absolute; inset: 0; pointer-events: none; color: var(--fg); }
.kayak { position: absolute; left: 0; top: 0; width: 64px; height: 24px; opacity: .18; will-change: transform; }
.kayak svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kayak .pagaie { transition: transform .18s var(--ease); transform-box: fill-box; transform-origin: center; }
.kayak--babord .pagaie { transform: scaleY(-1); }
.sillage { position: absolute; width: 18px; height: 18px; opacity: 0; }
.sillage svg { width: 100%; height: 100%; display: block; }
.sillage.on { animation: sillage-vie 2.4s var(--ease) forwards; }
@keyframes sillage-vie {
  0%   { opacity: 0;   transform: scale(.4)  rotate(0deg); }
  18%  { opacity: .11; transform: scale(.9)  rotate(14deg); }
  100% { opacity: 0;   transform: scale(1.3) rotate(40deg); }
}

/* Articles */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.article-card { border: var(--border-w) solid var(--border); background: var(--surface); display: grid; grid-template-rows: auto 1fr; }
.article-card .ph-photo { aspect-ratio: 16 / 9; border: 0; border-bottom: 1.5px dashed var(--rule-strong); }
.article-card .body { padding: var(--space-4); display: grid; gap: 8px; align-content: start; }
.article-card .meta { font-family: var(--font-sans); font-weight: 500; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.article-card h3 { font-size: 18px; margin: 0; }
.article-card p { margin: 0; font-size: var(--fs-small); color: var(--fg-soft); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }
.contact-grid form { display: grid; gap: var(--space-4); }
.contact-grid .field { max-width: none; }
.contact-grid .check-row input { width: 24px; height: 24px; margin-top: 0; }
.form-succes {
  border: var(--border-w) solid var(--accent);
  background: var(--vert-tint);
  padding: var(--space-5);
  font-weight: 500;
  max-width: none;
}
.contact-aside { border: var(--border-w) solid var(--border); background: var(--ink); color: var(--paper); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.contact-aside h3 { margin: 0; }
.contact-aside p { margin: 0; font-size: var(--fs-small); color: rgba(237,241,239,.85); }
.contact-aside .direct { font-family: var(--font-sans); font-weight: 500; font-size: 16px; letter-spacing: .01em; line-height: 1.8; border-top: 1px solid rgba(237,241,239,.25); padding-top: var(--space-3); }

/* ====== 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; }

/* Fond hero — « Le marché, raturé » (D-059) : clichés en filigrane sous le contenu,
   raturés un à un ; sans JavaScript, le fond uni (D-057) reste. */
.hero { position: relative; overflow: hidden; }
.hero__fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; }
/* Taille : franchement sous le h1 (clamp 44→72px), à toutes les largeurs. Le
   filigrane passait au-dessus de lui au-delà de 1440px et lui disputait la
   place (retour de revue du 9 août, commentaire n° 1). Plus petit, il faut un
   soupçon d'opacité en plus pour rester lisible. */
.hero__fond .cliche {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
  opacity: 0;
  transition: opacity .6s var(--ease);
  transform: translateZ(0);
  will-change: opacity;
}
.hero__fond .cliche.on { opacity: .16; }
.hero__fond .cliche i {
  position: absolute;
  left: -2%;
  top: 52%;
  width: 104%;
  height: .09em;
  background: var(--alert);
  transform: rotate(-1.6deg) scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.hero__fond .cliche.bar i { transform: rotate(-1.6deg) scaleX(1); }

/* Le cliché se laisse attraper (esprit ludique v1) : la couche reste
   transparente au clic, seuls les clichés la reprennent — les deux boutons du
   hero gardent la priorité sur tout le reste. Le pointeur qui change de forme
   au-dessus d'un mot du filigrane est la seule invitation ; le survol arrête le
   cycle, le clic retire le trait et laisse la vérité à la place. */
.hero__fond .cliche { pointer-events: auto; cursor: pointer; }
.hero__fond .cliche.on:hover { opacity: .34; }
/* La vérité monte d'un cran et prend la couleur de marque, sans quitter la
   couche de fond : au-delà, posée au-dessus du titre, elle se lit comme une
   étiquette en capitales — l'anti-référence n° 1 du cahier des charges. */
.hero__fond .cliche.vrai { opacity: .32; color: var(--vert-bright); cursor: default; }
.hero__fond .cliche.vrai i { transform: rotate(-1.6deg) scaleX(0); }

/* Entrée orchestrée du hero (titre → sous-titre → boutons) */
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: .12s; }
html.js .hero__inner > :nth-child(3) { transition-delay: .24s; }
html.js .hero--go .hero__inner > * { opacity: 1; transform: none; }

/* Révélations décalées par groupe */
html.js .segments .reveal:nth-child(2),
html.js .grid-3 .reveal:nth-child(2),
html.js .articles .reveal:nth-child(2) { transition-delay: .08s; }
html.js .segments .reveal:nth-child(3),
html.js .grid-3 .reveal:nth-child(3),
html.js .articles .reveal:nth-child(3) { transition-delay: .16s; }
html.js .steps .step { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--d, 0s); }
html.js .steps.in .step { opacity: 1; transform: none; }
.steps .step:nth-child(2) { --d: .09s; }
.steps .step:nth-child(3) { --d: .18s; }
.steps .step:nth-child(4) { --d: .27s; }
.steps .step:nth-child(5) { --d: .36s; }

/* Survol des covers projets */
.project-card__cover { overflow: hidden; }
.project-card__cover--photo img { transition: transform .6s var(--ease-out); }
.project-card:hover .project-card__cover--photo img,
.project-card:focus-within .project-card__cover--photo img { transform: scale(1.045); }

/* Bandeau Loi 25 — variante encre (D-060) : après le témoignage vert, une deuxième
   dalle vert-deep banalisait les deux ; le bandeau d'action doit contraster */
.cta-block--ink { background: var(--ink); }

/* L'avis Google a rejoint le design system le 10 août : les pages OBNL et PME
   le portent aussi depuis les commentaires nº 44 et nº 62. */

/* Témoignage — emplacement du portrait, activé avec la citation autorisée (D-060).
   Le 9 px ci-dessous est un artefact de gabarit : le cadre disparaît avec la vraie
   photo, rien de publié ne descendra sous le plancher 16 px (D-064). */
.testimonial__who { display: flex; align-items: center; gap: 14px; }
.testimonial__portrait {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px dashed rgba(237, 241, 239, .55);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(237, 241, 239, .75);
}
.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; }

/* Responsive */
@media (max-width: 1000px) {
  .segments { grid-template-columns: 1fr; }
  .segment--featured { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .articles { grid-template-columns: 1fr; }
  .contact-grid { 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; }
  .logo-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  /* Footer compact : listes en 2 colonnes, brand et contact sur toute la largeur */
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .col-contact { grid-column: 1 / -1; }
  .hero__title { font-size: clamp(36px, 11vw, 44px); }
  /* En-tête compact — l'empilement mangeait ~480px avant le hero à 390px */
  .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; }
}

/* Deux ajouts que le passage en WordPress demande : une carte de guide mène
   maintenant quelque part, et une couverture versée dans la médiathèque prend
   la place du cadre en attente. */
.article-card h3 a { color: inherit; text-decoration: none; }
.article-card h3 a:hover { color: var(--accent); }
.article-card__cover { aspect-ratio: 16 / 9; border-bottom: 1.5px dashed var(--rule-strong); overflow: hidden; }
.article-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }