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

/* ====== Gabarit Segment Agences — styles de page (tokens DS uniquement) ======
   Les patterns partagés avec l'accueil remonteront au DS à la réutilisation. */

/* 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;
}
.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 h2 .strike { text-transform: uppercase; }
.band__head p { font-size: var(--fs-body-l); color: var(--fg-soft); max-width: 76ch; margin: 0; }

/* Placeholder photo (études de cas en attente d'accords) */
.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: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark-mode .ph-photo { border-color: var(--rule-dark-strong); }

/* Sans ces minimums à zéro, l'aspect-ratio du placeholder transfère la hauteur
   du texte en largeur minimale : cartes à 407 px sur un écran de 390 px,
   défilement horizontal (QA mobile du 25 juillet) */
.grid-3 .project-card { min-width: 0; }
.project-card .ph-photo { min-width: 0; }

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

/* Garanties — liste à filets, jamais une grille de cartes clonées */
.garanties { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-6); align-items: start; }
.garanties__intro p { margin: 0 0 var(--space-4); font-size: var(--fs-body-l); color: var(--fg-soft); max-width: 46ch; }
.garanties__intro .services { font-size: var(--fs-small); color: var(--muted); max-width: 46ch; }
.garanties ol { list-style: none; margin: 0; padding: 0; counter-reset: garantie; }
.garanties ol li {
  border-top: 1.5px solid var(--rule);
  padding: var(--space-4) 0;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
}
.garanties ol li:last-child { border-bottom: 1.5px solid var(--rule); }
.garanties ol li::before {
  counter-increment: garantie;
  content: counter(garantie, decimal-leading-zero);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  padding-top: 2px;
}
.garanties h3 { margin: 0 0 6px; font-size: 19px; }
.garanties ol p { margin: 0; font-size: var(--fs-body); color: var(--fg-soft); max-width: 58ch; }

/* Deux chemins — bande encre. Les passages offset (1re version) nuisaient à la
   lisibilité (retour du 25 juillet) : remplacés par un geste minimal — la ligne
   du chemin A se trace entre les étapes, et les pastilles répondent au survol. */
.band--chemins {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
}
.band--chemins > .inner { position: relative; z-index: 1; }
.band--chemins .band__head h2 { color: var(--paper); }
.band--chemins .band__head h2::before { background: rgba(237,241,239,.35); }
.band--chemins .band__head h2 em { color: var(--vert-bright); }
.band--chemins .band__head p { color: rgba(237,241,239,.85); }
.chemins { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--space-6); align-items: start; }
.chemin h3 { margin: 0 0 var(--space-3); color: var(--paper); font-size: 24px; }
.chemin h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--vert-bright); }
.chemin > p { margin: 0 0 var(--space-4); font-size: var(--fs-body); color: rgba(237,241,239,.85); max-width: 58ch; }
.chemin--b { border-top: 1.5px solid rgba(237,241,239,.25); padding-top: var(--space-4); align-self: stretch; }
@media (min-width: 1001px) { .chemin--b { border-top: 0; border-left: 1.5px solid rgba(237,241,239,.25); padding: 0 0 0 var(--space-6); } }
.chemin-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-5) 0; position: relative; }

/* La ligne du chemin se trace du brief au transfert quand la section arrive */
.chemin-steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vert-bright);
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) .1s;
}
html:not(.js) .chemin-steps::before { transform: scaleX(1); }
.chemin-steps.in::before { transform: scaleX(1); }
@media (max-width: 1000px) { .chemin-steps::before { display: none; } }
.chemin-steps .step .num {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--vert-bright);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--vert-bright);
  background: var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  position: relative;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out);
}

/* Interaction pointeur, sans rien poser derrière le texte */
.chemin-steps .step:hover .num,
.chemin-steps .step:focus-within .num {
  background: var(--vert-bright);
  color: var(--ink);
  transform: translateY(-2px);
}
.chemin-steps .step h4 { margin: 0 0 4px; font-size: 17px; color: var(--paper); }
.chemin-steps .step p { margin: 0; font-size: 16px; color: rgba(237,241,239,.72); }
html.js .chemin-steps .step { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0s), transform var(--dur-slow) var(--ease-out) var(--d, 0s); }
html.js .chemin-steps.in .step { opacity: 1; transform: none; }
.chemin-steps .step:nth-child(2) { --d: .09s; }
.chemin-steps .step:nth-child(3) { --d: .18s; }
.chemin-steps .step:nth-child(4) { --d: .27s; }
.chemin .cadre { font-size: var(--fs-small); color: rgba(237,241,239,.72); max-width: 60ch; margin: 0; }
.chemin .cadre b { color: var(--paper); }
.chemin--b .go { color: var(--paper); }

/* Portail partenaires — dalle vert profond. Verdict du 25 juillet (comparateur) :
   l'odomètre des paliers (A) + la pluie qui s'empile (B), combinés. Le halo
   curieux de la 1re version est retiré. */
.band--portail {
  position: relative;
  overflow: hidden;
  background: var(--vert-deep);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 56px);
}
.band--portail .portail-fond { position: absolute; inset: 0; pointer-events: none; }
.band--portail .portail-fond canvas { width: 100%; height: 100%; display: block; }

/* L'odomètre : le pourcentage gravit 5 → 8 → 10 dans le titre */
.odo-wrap { position: relative; display: inline-block; }
.odo {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: bottom;
  color: var(--vert-pale);
}
.odo__col { display: grid; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.odo__col span { display: block; height: 1em; line-height: 1; }
html:not(.js) .odo__col { transform: translateY(-2em); }
.odo-wrap.punch .odo { animation: odo-punch .32s var(--ease-out); }
@keyframes odo-punch {
  35% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* L'éclat final vit HORS de la fenêtre clippée de l'odomètre (1re version du
   comparateur : rogné par l'overflow, invisible — retour d'Alexandre) */
.eclat { position: absolute; inset: -18px; z-index: 2; pointer-events: none; }
.eclat i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 4px;
  background: var(--vert-pale);
  opacity: 0;
  transform-origin: 0 50%;
}
.eclat.on i { animation: eclat-vie .8s var(--ease-out) forwards; }
@keyframes eclat-vie {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(.5em) scaleX(.3); }
  20%  { opacity: .95; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(1.2em) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .odo__col { transition: none; } }
.portail__inner { position: relative; z-index: 1; max-width: var(--container-narrow); margin: 0 auto; text-align: center; }
.portail__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.portail__inner h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--vert-pale); }
/* Centrés à la main : le paragraphe hérite du `max-width: 65ch` général, et
   sans marge automatique cette boîte plus étroite se collait à gauche du bloc.
   Le titre, lui, prenait toute la largeur — d'où le décalage de 86 px entre les
   deux (commentaire nº 56 du 10 août). */
.portail__inner p { margin: 0 auto var(--space-5); font-size: var(--fs-body-l); color: rgba(246,248,247,.9); }
.portail__inner .btn--paper { color: var(--paper); border-color: var(--paper); }
.portail__inner .apres { margin: var(--space-4) auto 0; font-size: 16px; text-align: center; color: rgba(246,248,247,.75); }

/* Le point curieux — 3e clic, convention maison (esprit-ludique) */
.secret {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--vert-bright);
  opacity: .45;
  cursor: pointer;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.secret:hover, .secret:focus-visible { opacity: .95; transform: scale(1.25); }
.surprise {
  position: absolute;
  right: 18px;
  bottom: 44px;
  z-index: 3;
  max-width: 260px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--border);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}
.surprise strong { display: block; margin-bottom: 4px; }

/* FAQ — composant DS, ouverture au clic */
.faq-item .q { align-items: baseline; }
.faq-item .q button {
  all: inherit;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.faq-item .q button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ====== 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; }
html.js .grid-3 .reveal:nth-child(2) { transition-delay: .08s; }
html.js .grid-3 .reveal:nth-child(3) { transition-delay: .16s; }

/* 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; }
.hero { position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }

/* Fond hero — les partenaires discrets : des cadres-logos anonymes affleurent en
   filigrane puis s'effacent, écho de la rangée de logos plus bas et des agences
   qui préfèrent l'ombre. Minimal, sous le texte, jamais en concurrence avec lui.
   Sans JavaScript : fond uni (D-057). */
.hero__fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__fond .fantome {
  position: absolute;
  border: 1.5px dashed rgba(237, 241, 239, .7);
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.hero__fond .fantome.on { opacity: .13; }

/* Garanties — les cinq points s'affichent l'un après l'autre. Cadence ralentie
   (retour du 25 juillet, 2e passe : la 1re cascade se jouait en une seconde,
   personne ne la voyait se dérouler). */
html.js .garanties ol li { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out) var(--d, 0s), transform .7s var(--ease-out) var(--d, 0s); }
html.js .garanties ol.in li { opacity: 1; transform: none; }
.garanties ol li:nth-child(2) { --d: .26s; }
.garanties ol li:nth-child(3) { --d: .52s; }
.garanties ol li:nth-child(4) { --d: .78s; }
.garanties ol li:nth-child(5) { --d: 1.04s; }

/* Appel final — deux vraies portes, écho des deux chemins (retour du 25 juillet) */
.cta-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.cta-duo .porte {
  border: var(--border-w) solid var(--border);
  color: var(--paper);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.porte--mandat { background: var(--ink); }
.porte--reference { background: var(--vert-deep); }
.cta-duo h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0;
}
.cta-duo h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--vert-pale); }
.cta-duo p { margin: 0; font-size: var(--fs-small); color: rgba(246, 248, 247, .85); max-width: 44ch; }
.cta-duo .btn { justify-self: start; }

/* Le bouton de la porte de droite est posé sur le vert profond : contour clair,
   comme dans la maquette, qui l'écrivait à même la balise. Ici c'est une classe,
   pour que le champ ne porte que le texte et l'adresse. */
.cta-duo .btn--paper { color: var(--paper); border-color: var(--paper); }

.cta-duo .meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: rgba(246, 248, 247, .7);
}

/* La porte de droite est posée sur le vert profond, plus clair que l'encre de
   sa voisine : à 70 % d'opacité, la ligne y tombait à 4,4 contre 4,5 exigés.
   Un souffle de plus et elle repasse. */
.cta-duo .porte--reference .meta { color: rgba(246, 248, 247, .85); }

/* Survol des covers projets */
.project-card__cover { overflow: hidden; }

/* Responsive */
@media (max-width: 1000px) {
  .garanties { grid-template-columns: 1fr; }
  .chemins { grid-template-columns: 1fr; }
  .chemin-steps { grid-template-columns: repeat(2, 1fr); }
  .cta-duo { 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: 640px) {
  .chemin-steps { grid-template-columns: 1fr; }
  /* Boutons du hero empilés : pleine largeur pour deux boutons égaux (QA mobile) */
  .hero__inner .btn { width: 100%; justify-content: center; }
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .col-contact { grid-column: 1 / -1; }
  /* 11vw poussait « L'EXTENSION » au-delà de la marge de droite sous 423 px :
     le titre débordait au lieu de rétrécir (mot insécable dans une grille). */
  .hero__title { font-size: clamp(30px, 9.8vw, 44px); }
  .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; }
}