/* ══════════════════════════════════════════════════════════════
   accueil.css - mise en page de l'accueil, index.html seulement
   Chargé en dernier, après kaki-commun.css (barre, menu, signature,
   tokens partagés). Ne porte que ce qui est propre à l'accueil :
   - le hero : grand titre centré, accroche, commande, puis filet et
     logos clients, bas du bloc à angles vifs ;
   - le titre du studio centré ;
   - le bandeau clients défilant au-dessus du titre du devis.
   Couleurs : uniquement les tokens de main.css (palette noir kaki).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Hero ──────────────────────────────────────────────── */
/* Angles vifs : le bas du hero coupe net sur le kaki foncé du studio. */
.theme-kaki #hero {
  z-index: 1;
  background: var(--noir-kaki);
}
/* Fond : Metz à l'heure bleue, le Temple Neuf et la cathédrale sur la
   Moselle (fond 04 des propositions). Photo Pierre Blaché, licence
   Unsplash, usage commercial libre. En couleur : c'est la lumière
   bleue qui la porte, le lavis kaki du voile la ramène dans la palette.
   Trois cadrages, les mêmes que les preload d'index.html : écran en
   hauteur, recadrage portrait centré sur le Temple Neuf ; sinon photo
   entière en 1280 ou 1920px de large. */
.theme-kaki .hero-bg-fallback {
  background-image: url('https://images.unsplash.com/photo-1752094610093-b1edb1f7d79d?fm=webp&q=60&w=1920');
  background-position: center 55%;
  filter: none;
}
@media (orientation: landscape) and (max-width: 1280px) {
  .theme-kaki .hero-bg-fallback {
    background-image: url('https://images.unsplash.com/photo-1752094610093-b1edb1f7d79d?fm=webp&q=60&w=1280');
  }
}
@media (orientation: portrait) {
  .theme-kaki .hero-bg-fallback {
    background-image: url('https://images.unsplash.com/photo-1752094610093-b1edb1f7d79d?fm=webp&q=60&w=900&h=1600&fit=crop&crop=focalpoint&fp-x=0.24&fp-y=0.55');
    background-position: center;
  }
}
.theme-kaki .hero-overlay {
  background:
    radial-gradient(ellipse 70% 52% at 50% 42%,
      rgba(15,18,14,0.62) 0%,
      rgba(15,18,14,0.2) 70%,
      rgba(15,18,14,0) 100%),
    linear-gradient(to bottom,
      rgba(15,18,14,0.62) 0%,
      rgba(15,18,14,0.36) 45%,
      rgba(15,18,14,0.8) 100%),
    linear-gradient(rgba(44,68,39,0.38), rgba(44,68,39,0.38));
}

.theme-kaki .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  padding: calc(var(--bar-h) + clamp(1.5rem, 5vh, 3rem)) var(--edge) clamp(2.5rem, 6vh, 4rem);
}
.theme-kaki .hero-content { max-width: none; text-align: center; }

.theme-kaki #hero-title {
  font-size: clamp(2.6rem, 7.6vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--blanc);
  margin-bottom: clamp(1rem, 2.4vh, 1.75rem);
}
.theme-kaki .hero-sub {
  /* Le slogan tient en deux phrases : la mesure les pose sur deux
     lignes au desktop au lieu d'une seule bande de 80 signes. */
  max-width: 34em;
  text-wrap: balance;
  font-size: clamp(1.05rem, 1.7vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--blanc);
  margin: 0 auto clamp(1.75rem, 5vh, 3rem);
}
.theme-kaki .hero-actions { display: flex; justify-content: center; margin: 0; }
/* Commande en texte seul, soulignée, sans bulle. Au survol le
   soulignement s'épaissit et se rapproche du mot. La zone cliquable
   garde 44px de haut, le minimum tactile. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blanc);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-underline-offset 0.2s var(--ease-noir), text-decoration-thickness 0.2s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover { text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
.hero-cta:focus-visible { outline: 2px solid var(--blanc); outline-offset: 4px; }
/* responsive.css étire les boutons du hero sur toute la largeur
   sous 480px : on défait cet étirement ici. */
@media (max-width: 600px) {
  .theme-kaki .hero-actions { align-items: center; }
  .hero-cta { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta { transition: none; }
}

/* Références : filet sur la largeur utile, libellé, logos en blanc.
   Les fichiers gardent leurs couleurs d'origine ; brightness(0)
   invert(1) les ramène au blanc, comme une planche de marques. */
/* #references garde son identifiant (ancre figée) : on défait ici le
   bandeau plein largeur que noir-argent.css pose encore dessus. */
.theme-kaki #references.hero-refs {
  background: none;
  border: 0;
  border-top: 1px solid rgba(245,246,247,0.22);
  padding: clamp(2rem, 6vh, 3.75rem) 0 0;
  overflow: visible;
}
.hero-refs {
  width: 100%;
  max-width: 75rem;
  margin-top: clamp(2.5rem, 8vh, 4.5rem);
  text-align: center;
}
.hero-refs-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.hero-refs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem clamp(2.5rem, 7vw, 6rem);
}
.hero-refs-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  transition: opacity 0.2s var(--ease-noir), transform 0.2s var(--ease-noir);
  opacity: 0.84;
}
@media (hover: hover) and (pointer: fine) {
  .hero-refs-list a:hover { opacity: 1; transform: translateY(-2px); }
}
.hero-refs-list a:focus-visible { opacity: 1; outline: 2px solid var(--blanc); outline-offset: 6px; }
.hero-refs-list img {
  display: block;
  width: auto;
  filter: brightness(0) invert(1);
}
/* Hauteurs réglées à l'oeil : trois logos de proportions très
   différentes doivent peser le même poids sur la ligne. */
.hero-ref--lmo { height: 76px; }
.hero-ref--bdc { height: 58px; }
.hero-ref--sie { height: 72px; }
@media (max-width: 600px) {
  .hero-ref--lmo { height: 56px; }
  .hero-ref--bdc { height: 44px; }
  .hero-ref--sie { height: 46px; }
  .hero-refs-list { gap: 1.25rem 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta { transition: none; }
}

/* ── 2. Titre du studio ───────────────────────────────────── */
/* Centré sur le même axe que « Décrivez votre projet » du devis. */
.theme-kaki .studio-title { text-align: center; }

/* ── 3. Bandeau clients au-dessus du titre du devis ───────── */
/* Même piste que l'ancien marquee (noir-argent.css : .ref-viewport,
   .ref-track, refScroll vers la gauche, pause au survol et au focus,
   figée sous prefers-reduced-motion). Ici les logos passent en noir
   sur le fond blanc du devis, par brightness(0). */
/* overflow: hidden porté par le bloc lui-même : la piste mesure six
   groupes de large, sans ce clip elle élargit toute la page. */
.devis-refs { margin: 0 0 clamp(3rem, 7vw, 4.5rem); overflow: hidden; }
/* Le bandeau ouvre la section : remonté près de la frontière avec le
   kaki du studio, sans s'y coller (--py y laissait 112px au desktop). */
#devis > .section-container { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Le bloc prend la largeur du titre ; --refs-label porte sa taille
   pour que la réplique taguée se cale en unités du titre. */
.devis-refs-head {
  --refs-label: clamp(1.25rem, 2.2vw, 1.75rem);
  width: fit-content;
  margin: 0 auto clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: left;
}
.devis-refs-label {
  text-align: center;
  font-size: var(--refs-label);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Réplique écrite au marqueur, légèrement penchée, comme ajoutée à la
   main après coup. Kaki foncé sur blanc : 10.7:1.
   « Et » commence au milieu de « confiance », soit 8.4 tailles de
   titre depuis son bord gauche (mesuré en Inter 600). La marge droite
   négative rend la même distance : la réplique déborde à droite sans
   élargir le bloc, donc sans décentrer le titre.
   Sur écran étroit, le décalage plafonne pour que la fin de la phrase
   (8.7 tailles de titre de long) reste à 1rem du bord de l'écran :
   50vw - demi-titre (5.4) - réplique (8.7) - 1rem. */
.devis-refs-tag {
  --tag-decalage: max(0px, min(
    calc(var(--refs-label) * 8.4),
    calc(50vw - var(--refs-label) * 3.35 - 1rem)
  ));
  display: inline-block;
  margin: 0.2rem calc(-1 * var(--tag-decalage)) 0 var(--tag-decalage);
  font-family: 'Permanent Marker', var(--font);
  font-size: calc(var(--refs-label) * 0.8);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--commande);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.devis-refs .ref-item { padding: 0 clamp(3rem, 8vw, 6.5rem); }
.devis-refs a.ref-item { min-height: 44px; opacity: 0.72; transition: opacity 0.2s var(--ease-noir); }
@media (hover: hover) and (pointer: fine) {
  .devis-refs a.ref-item:hover { opacity: 1; text-decoration: none; }
}
.devis-refs a.ref-item:focus-visible { opacity: 1; outline: 2px solid var(--text); outline-offset: 4px; }
.devis-refs .ref-item img { display: block; width: auto; filter: brightness(0); }
.ref-logo--lmo { height: 60px; }
.ref-logo--bdc { height: 46px; }
.ref-logo--sie { height: 56px; }
@media (max-width: 600px) {
  .ref-logo--lmo { height: 46px; }
  .ref-logo--bdc { height: 36px; }
  .ref-logo--sie { height: 44px; }
}

/* ── 4. Contact : titre sur une seule ligne ───────────────── */
/* « Parlons de votre projet. » mesure 15.25 tailles de police en
   capitales (noir-argent.css). À 2.8rem il lui faut 683px : le bloc
   passe de 680px à 820px (720px utiles). Sous cette largeur, la taille
   suit l'écran (15.8 au lieu de 15.25 pour garder une marge), le
   titre ne repasse jamais sur deux lignes. */
.theme-kaki .contact-band { max-width: 820px; }
.theme-kaki #contact-title {
  font-size: min(clamp(1.9rem, 3.5vw, 2.8rem), calc((100vw - 2 * var(--px)) / 15.8));
  white-space: nowrap;
}