/* =============================================================
   ACCUEIL
   Chargée uniquement sur is_front_page() (voir inc/assets.php).
   Rien ici n'est réutilisable ailleurs : tout ce qui sert à plus
   d'une page vit dans layout.css ou components.css.

   Aucune valeur en dur : uniquement des tokens de tokens.css.
   ============================================================= */

/* ---- Listes de grille --------------------------------------------
   Les blocs sont des <ul> pour donner un plan lisible à un lecteur
   d'écran ; la puce et le retrait natifs, eux, n'y ont rien à faire. */
.hero__micro,
.trust__list,
.cats__list,
.why__list,
.partner__points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__micro > li,
.trust__list > li,
.cats__list > li,
.why__list > li,
.partner__points > li { margin: 0; }

/* ---- En-tête de section ------------------------------------------
   `.sechead` de layout.css ne passe pas à la ligne : dès qu'on lui
   donne un lien à droite, la colonne de titre s'étrangle sous ~600 px
   et le titre tombe en colonne de trois mots. Correction à remonter
   dans layout.css ; en attendant, elle vaut pour cette page. */
.sechead { flex-wrap: wrap; }

/* ---- Animations d'entrée -----------------------------------------
   En keyframes, jamais en JS : un script en échec ne doit pas laisser
   un hero vide. On n'anime que `transform` et `opacity`.             */
@keyframes ste-home-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ste-home-zoom {
  from { opacity: 0; transform: scale(.955); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   1. HERO
   ============================================================= */
.hero {
  position: relative;
  /* Le dégradé meurt en blanc juste avant le bandeau de réassurance :
     les deux sections se touchent sans qu'une arête ne les sépare. */
  background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg-tint) 42%, var(--bg) 100%);
  padding-block: clamp(var(--s-7), 5vw, var(--s-10)) clamp(var(--s-8), 5vw, var(--s-10));
}

.hero__grid {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

.hero__eyebrow { margin: 0 0 var(--s-4); }
.hero__title   { margin: 0 0 var(--s-5); max-width: 18ch; }
.hero__lead {
  margin: 0 0 var(--s-6);
  max-width: 54ch;
  font-size: var(--t-lg);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.hero__cta { margin-bottom: var(--s-7); }

/* Quatre micro-arguments. En grille 2×2 et non en ligne libre : la
   colonne de texte du hero ne fait jamais assez large pour les quatre,
   et un retour à la ligne « 3 + 1 » a l'air d'un accident. */
.hero__micro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
@media (min-width: 30rem) {
  .hero__micro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero__micro-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}
.hero__micro-item .ico { color: var(--primary); }

.hero__figure { position: relative; }

/* Cadre photo — le filet teal en pied est l'élément signature du site. */
.hero__frame {
  position: relative;
  /* La photo livrée est en 16/9 ; 3/2 la resserre sans amputer le fauteuil,
     et donne au cadre une hauteur proche de la colonne de texte. */
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--e-3);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: var(--edge-solid);
}

/* ---- Repli sans photo --------------------------------------------
   Composition hexagonale reprise du logo. Elle doit se suffire à
   elle-même : la page est mise en ligne avant le lot de photos.
   Pas d'ombre portée — `box-shadow` est effacée par `clip-path`, et
   `drop-shadow` exigerait une couleur en dur.                        */
.hero__art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--halo);
}
.hero__hex {
  position: absolute;
  aspect-ratio: 1 / 1.09;   /* proportion de l'hexagone du logo */
  clip-path: var(--hex-clip);
}
.hero__hex--main {
  left: 50%;
  top: 50%;
  width: 54%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: linear-gradient(148deg, var(--c-teal-500), var(--c-blue-500));
  color: var(--on-primary);
}
.hero__hex--a { width: 21%; top: 3%;     right: 7%;  background: var(--c-teal-200); }
.hero__hex--b { width: 14%; bottom: 5%;  left: 5%;   background: var(--c-blue-200); }
.hero__hex--c { width: 9%;  bottom: 20%; right: 19%; background: var(--c-teal-400); }

/* Intro : le texte monte, l'image se pose. Rien de spectaculaire. */
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__cta,
.hero__micro { animation: ste-home-rise var(--dur-3) var(--ease-out) both; }
.hero__title  { animation-delay: 70ms; }
.hero__lead   { animation-delay: 140ms; }
.hero__cta    { animation-delay: 210ms; }
.hero__micro  { animation-delay: 280ms; }
.hero__figure { animation: ste-home-zoom calc(var(--dur-3) * 1.4) var(--ease-out) 120ms both; }

/* Le délai doit tomber AVEC la durée : sinon, en mouvement réduit,
   `both` maintient l'état initial (opacité 0) pendant le délai et le
   hero clignote. */
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__cta,
  .hero__micro,
  .hero__figure { animation: none; }
}

/* =============================================================
   2. RÉASSURANCE
   ============================================================= */
.trust {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.trust__list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}
/* Le filet vertical ne s'allume qu'à 4 colonnes : à 2 ou 3, il
   tomberait en tête de rangée et découperait la grille de travers. */
@media (min-width: 64rem) {
  .trust__item + .trust__item {
    padding-left: var(--gap);
    border-left: 1px solid var(--border-soft);
  }
}

.trust__mark {
  flex: none;
  width: 44px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  clip-path: var(--hex-clip);
}
.trust__title {
  margin: 0 0 var(--s-1);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.trust__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* =============================================================
   3. CATÉGORIES
   Dix cartes : 2 → 3 → 5 colonnes. Le nombre est fixé par palier
   plutôt qu'en `auto-fit`, sinon un écran large en affiche sept et
   la dernière rangée pend dans le vide.
   ============================================================= */
.cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 34rem) { .cats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cats__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.cats__cell { display: flex; }
.catcard { width: 100%; }

/* Carré : vignettes de gamme comme photos produit sont livrées en 1/1.
   Un cadre 4/3 les ferait flotter entre deux bandes vides. */
.catcard__media {
  position: relative;
  aspect-ratio: 1 / 1;   /* ratio fixe = aucun décalage de mise en page */
  display: grid;
  place-items: center;
  /* Ces photos sont détourées sur fond blanc : un fond gris derrière
     dessinerait un liseré autour de chacune. */
  background: var(--surface);
  overflow: hidden;
}
/* Gamme sans photo : halo teal + hexagone, jamais un cadre vide. */
.catcard__media--mark { background: var(--halo), var(--primary-soft); }

.catcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* photo détourée : jamais rognée */
  padding: var(--s-3);
  transition: transform var(--dur-3) var(--ease-out);
}
.catcard:hover .catcard__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .catcard:hover .catcard__img { transform: none; }
}

.catcard__mark {
  width: 58px;
  height: 63px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--primary);
  clip-path: var(--hex-clip);
}

.catcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
  /* Sans ce filet, l'image et le texte partagent le même blanc et la
     carte perd sa structure. */
  border-top: 1px solid var(--border-soft);
}
.catcard__title {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.35;
}
.catcard__title a { color: var(--text-strong); text-decoration: none; }
.catcard__title a:hover { color: var(--primary); }
.catcard__meta {
  margin: 0;
  margin-top: auto;
  padding-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-muted);
}

/* =============================================================
   4. SÉLECTION — carrousel
   ============================================================= */
.slider { position: relative; }

.slider__track {
  /* 17rem : mesuré. En dessous, « Prix sur demande » (121 px) et le bouton
     d'ajout (100 px) ne tiennent plus côte à côte dans le pied de carte,
     et le prix se coupe en deux lignes. */
  --scroller-item: minmax(17rem, 1fr);
  /* la carte se soulève au survol : sans marge verticale, son ombre
     serait rognée par l'`overflow` du conteneur qui défile */
  padding-block: var(--s-4);
}
.slider__cell { display: flex; }
.slider__cell > .pcard { width: 100%; }

/* Le fond de section est déjà `--bg-alt` : garder la même teinte
   derrière la photo effacerait la carte. */
.selection .pcard__media { background: var(--surface); }

/* Les boutons n'apparaissent que si la piste déborde réellement —
   `has-overflow` est posée par app.js. Sans JS, le défilement tactile
   et clavier suffit, et aucun bouton mort ne traîne. */
.slider__nav { display: none; }
.slider.has-overflow .slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* =============================================================
   5. POURQUOI NOUS CHOISIR
   ============================================================= */
.why__list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) { .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.why__cell { display: flex; }
.whycard {
  width: 100%;
  gap: var(--s-3);
}
.whycard__mark {
  width: 52px;
  height: 57px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  clip-path: var(--hex-clip);
}
.whycard__title { margin: 0; font-size: var(--t-base); }
.whycard__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* =============================================================
   6. À PROPOS
   Le bloc s'appelle `partner` et non `about` : la page d'accueil
   étant une page WordPress, `page.css` est chargée en même temps
   que celle-ci et y définit déjà un `.about` en grille à deux
   colonnes, qui écraserait la coquille de cette section.
   ============================================================= */
.partner__grid {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: center;
}
@media (min-width: 62rem) {
  .partner__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.partner__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--e-3);
}
.partner__img { width: 100%; height: 100%; object-fit: cover; }
.partner__frame::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: var(--edge-solid);
}

.partner__art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--halo);
}
.partner__hex {
  position: absolute;
  aspect-ratio: 1 / 1.09;
  clip-path: var(--hex-clip);
}
.partner__hex--main {
  left: 50%;
  top: 50%;
  width: 46%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: linear-gradient(148deg, var(--c-blue-500), var(--c-teal-500));
  color: var(--on-primary);
}
.partner__hex--a { width: 18%; top: 7%;     right: 13%; background: var(--c-teal-200); }
.partner__hex--b { width: 12%; bottom: 9%;  left: 11%;  background: var(--c-blue-200); }

/* L'en-tête de section vit ici dans une colonne, pas au-dessus d'une
   grille : il respire moins. */
.partner .sechead { margin-bottom: var(--s-5); }
.partner__body p { max-width: 58ch; }

.partner__points {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-6) 0;
}
.partner__points > li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-strong);
}
.partner__points-ico {
  flex: none;
  width: 32px;
  height: 35px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--primary);
  clip-path: var(--hex-clip);
}

/* =============================================================
   7. BANDEAU DE CONSEIL
   Dernière section de la page, juste au-dessus du pied de page.
   Deux corrections rendues nécessaires par ce voisinage :
     - le pied de page porte une marge haute générique, qui dessinait
       ici une bande blanche entre deux aplats sombres ;
     - au même bleu que le pied, le bandeau se serait fondu dedans.
       On le descend d'un cran, ce qui donne un socle en deux tons.
   ============================================================= */
.ctaband { background: var(--c-blue-800); }
.home .site-foot { margin-top: 0; }

.ctaband__in {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 58rem) {
  .ctaband__in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-8);
  }
}

.ctaband__title { margin: var(--s-3) 0; max-width: 24ch; }
.ctaband__lead  { margin: 0; max-width: 58ch; }

.ctaband__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
@media (min-width: 58rem) {
  .ctaband__actions { align-items: flex-end; }
}

.ctaband__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.ctaband__tel .ico { color: var(--c-teal-300); }
/* « Appeler » est la troisième action du bandeau, au même titre que les
   deux boutons voisins : elle doit offrir la même zone tactile (contrat
   § 6.1). Sans `inline-flex`, `min-height` ne s'applique pas à un lien
   en ligne et le numéro ne fait que 26 px de haut au doigt. */
.ctaband__tel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}