/* ═══════════════════════════════════════════════════════════════════
   Cap Déco — styles propres à la page d'accueil
   Se charge APRÈS assets/site.css, dont il reprend jetons, typographie,
   cartes, chiffres clés, vignettes, étapes et pied de page.
   L'accueil est une page de sommaire : même colonne de lecture (1180 px)
   et mêmes composants que les pages intérieures. On ne définit ici que
   ce qui n'existe nulle part ailleurs : le hero, les témoignages, le
   bandeau de logos et la prise de contact.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── En-tête d'accueil ───────────────────────────────────────────
   La marque plein écran, deux boutons, un repère de défilement. Rien
   d'autre : c'est la composition d'origine du site.

   En grille à trois rangées plutôt qu'en positionnement absolu : la
   version d'origine ancrait les boutons à bottom:16vh, ce qui les faisait
   chevaucher le logo sur les écrans peu hauts. Ici la rangée 1 absorbe
   l'espace disponible (1fr), les deux autres prennent leur hauteur propre
   — la mise en page tient de 500 à 1600 px de haut.
   svh et non vh : sur mobile, vh compte la barre d'adresse rétractée et
   ferait déborder le contenu au premier affichage. */
.hero{min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto auto;
  justify-items:center;align-items:center;text-align:center;
  max-width:1180px;margin:0 auto;
  padding:clamp(94px,12vh,138px) var(--sec-x) clamp(40px,6vh,70px);
  row-gap:clamp(26px,4vh,54px)}

.hero-in{display:flex;flex-direction:column;align-items:center}
/* Le H1 de la page, c'est la marque : l'image porte le texte (alt). */
.hero-h1{margin:0}
.hero-mark{width:min(72vmin,760px);height:auto;display:block;
  will-change:transform,opacity}

.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* Repère de défilement : le filet seul, sans le mot « scroll » — un
   anglicisme sur un site entièrement en français. */
.hero-cue{width:1px;height:clamp(38px,6vh,60px);transform-origin:top;
  background:linear-gradient(var(--rouge),transparent);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{
  0%,100%{opacity:.28;transform:scaleY(.68)}
  50%    {opacity:.9; transform:scaleY(1)}
}

/* ─── Relais de logo : la marque du hero passe la main à la barre ───
   Le logo de la barre de navigation reste éteint tant que la marque du
   hero est à l'écran : les deux ne s'affichent jamais ensemble. Il
   s'allume quand le fondu de la marque est terminé — home.js pose alors
   .logo-barre sur <body> (voir DUREE_FONDU dans home.js).

   Le masquage est enfermé dans deux conditions, pour que le logo reste
   visible partout où personne ne viendra le rallumer : sans JavaScript
   (scripting:none — et les navigateurs qui ignorent cette requête média
   ignorent tout le bloc, donc affichent le logo), et en mode sobre, où
   home.js n'anime pas la marque du tout.

   L'opacité est portée par le lien, le léger glissement par l'image : le
   lien, lui, garde ses transform de centrage qui changent selon la
   largeur d'écran (voir site.css, points de rupture 880 et 820). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .navlogo{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
  .navlogo img{transform:translateY(-7px);transition:transform .45s ease}
  body.logo-barre .navlogo{opacity:1;visibility:visible}
  body.logo-barre .navlogo img{transform:none}
}

/* ─── Méthode en cinq étapes (résumé ; le détail est sur /methode/) ─ */
.mini-steps{grid-template-columns:repeat(5,1fr)}

/* ─── Témoignages ─────────────────────────────────────────────── */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stars{color:var(--rouge);font-size:15px;letter-spacing:5px;margin:0 0 14px}
.quote{font-size:16px;line-height:1.75;color:var(--fg-muted);margin:0 0 22px}
.tname{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)}
.wallttl{margin:7vh 0 3vh}

/* ─── Bandeau de logos clients ────────────────────────────────────
   Deux lignes qui défilent à contre-sens, en fondu sur les bords.
   Le défilement continue au survol de la souris ; seul le focus
   clavier le suspend. */
.mband{position:relative;display:flex;flex-direction:column;gap:18px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;width:max-content;animation:mband-g 30s linear infinite}
.mtrack.back{animation:mband-d 34s linear infinite}
.mband:focus-within .mtrack{animation-play-state:paused}
@keyframes mband-g{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mband-d{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ─── Prise de contact en bas de page ────────────────────────────
   Trois voies présentées à égalité plutôt qu'un bouton isolé : le
   visiteur choisit celle qui lui convient au lieu de subir un parcours
   unique. Les trois cartes ont le même fond : le devis était sur fond
   ambré pour le désigner comme voie principale, mais la tache de couleur
   isolée cassait l'unité de la page. Il reste en première position, ce
   qui suffit à le désigner. */
.cband{border-top:1px solid var(--line);padding-top:clamp(38px,5vw,64px);text-align:center}
.cband-ttl{font-size:clamp(44px,6vw,86px);max-width:none;margin:14px 0 18px}
.cband-lead{max-width:58ch;margin:0 auto}
.croutes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px,4vw,52px);text-align:left}
.croute{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 26px 26px;border-radius:var(--r-xl);text-decoration:none;color:inherit}
.croute-ic{width:26px;height:26px;margin-bottom:12px;fill:none;stroke:var(--rouge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.croute-lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.croute-val{font-family:var(--serif);font-weight:300;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.02em;line-height:1.15;color:var(--fg)}
.croute-hint{font-size:12.5px;line-height:1.55;color:var(--fg-muted);margin-top:4px}

/* ─── Tablette ────────────────────────────────────────────────── */
@media (max-width:1000px){
  .tgrid{gap:14px}
  .croutes{gap:12px}
}

/* ─── Mobile ──────────────────────────────────────────────────────
   Les tailles suivent le plancher de site.css (11 px les étiquettes,
   12 px et plus le texte). La méthode reste sur cinq colonnes, titres
   seuls ; les témoignages passent sur une colonne ; le devis prend toute
   la largeur, le téléphone et WhatsApp se partagent la ligne suivante. ── */
@media (max-width:820px){
  .hero{padding:80px var(--sec-x) 34px;row-gap:22px}
  .hero-mark{width:min(84vw,420px)}
  .hero-cta{gap:10px}
  .hero-cue{height:30px}

  /* Méthode : cinq étapes de front, le titre seul — le détail est sur
     /methode/. */
  .mini-steps{grid-template-columns:repeat(5,1fr);gap:6px}
  .mini-steps .step h3{font-size:12px;line-height:1.2;margin:0}
  .mini-steps .step p{display:none}
  .mini-steps .step::before{font-size:11px;letter-spacing:.1em;margin-bottom:6px}

  /* Témoignages : une colonne. */
  .tgrid{grid-template-columns:1fr;gap:10px}
  .tgrid .surface{padding:16px 16px 17px}
  .stars{font-size:13px;letter-spacing:3px;margin:0 0 8px}
  .quote{font-size:14px;line-height:1.6;margin:0 0 10px}
  .tname{font-size:11px;letter-spacing:.1em}

  .wallttl{margin:38px 0 16px}
  .cband{padding-top:38px}
  .cband-ttl{font-size:34px;margin:8px 0 12px}
  .cband-lead{font-size:14px}
  .croutes{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
  .croutes>:first-child{grid-column:1/-1}
  .croute{padding:16px 14px 17px;border-radius:12px;gap:4px}
  .croute-ic{width:20px;height:20px;margin-bottom:8px}
  .croute-lab{font-size:11px;letter-spacing:.12em}
  .croute-val{font-size:16px}
  .croute-hint{font-size:12px;line-height:1.45;margin-top:4px}
}

/* Le bandeau de logos s'immobilise si le visiteur a demandé à limiter
   les animations (la règle générale est dans site.css). */
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none}
  /* Le filet reste affiché — il indique qu'il y a une suite, c'est une
     information, pas une décoration. Seule la pulsation s'arrête. */
  .hero-cue{animation:none;opacity:.55}
}