/* ============================================================
   Fabrique - Homepage (home.css)
   Hero immersif "énergie claire" : mesh, produit flottant, chips.
   ============================================================ */

.hero { position: relative; padding: clamp(1rem, 0.6rem + 1.2vw, 1.9rem) 0 clamp(1rem, 0.6rem + 1.2vw, 1.9rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(720px 460px at 82% -8%, rgba(var(--brand-mint-rgb, 20, 224, 176), .22), transparent 60%),
    radial-gradient(640px 520px at 6% 4%, var(--brand-soft), transparent 58%),
    radial-gradient(520px 420px at 50% 120%, rgba(var(--brand-mint-rgb, 20, 224, 176), .12), transparent 60%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(var(--acc-rgb, 21, 127, 102), .06) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}
.hero__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; }
/* Eyebrow : petit, sans fond, sans pastille (façon EcransPC) */
/* .6875rem sortait a 11 px sur telephone. Mesure au balayage des 285 pages. */
.hero__eyebrow { display: block; color: var(--brand-dark); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 20px; }
.hero__title { margin-bottom: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; font-size: clamp(2.3rem, 1.1rem + 4.6vw, 3.85rem); text-wrap: balance; }
.hero__subtitle { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem); line-height: 1.6; color: var(--muted); max-width: 50ch; margin-bottom: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(1.8rem, 1.2rem + 1.6vw, 2.75rem); }
/* CTA hero : plus carré et propre (rayon doux, pas en gélule) */
.hero__cta .btn { border-radius: 12px; }
.hero__cta .btn--lg { padding: 15px 28px; font-size: 1rem; }
/* Stats : nombre + libellé sur la même ligne, séparateurs fins */
.hero__stats { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 1rem + 1vw, 34px); }
.hero__stat { display: flex; align-items: baseline; gap: 9px; }
.hero__stat-num { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.85rem); font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1; }
.hero__stat-label { font-size: .875rem; color: var(--muted); }
.hero__stat-sep { width: 1px; height: 24px; background: var(--line); }



@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}
/* Téléphone : best-practices -> titre (proposition de valeur) + 1 CTA d'abord.
   La scène 3-produits (décorative) est réservée au desktop ; sur mobile, c'est
   la 1re carte coup de cœur (avec specs = "testé") qui sert de visuel produit. */
@media (max-width: 600px) {
  /* Hero inspiré d'écranspc (gardé compact) : titre 2 lignes + sous-titre court
     + 2 boutons empilés compacts + stats EN LIGNE (chiffre gras + libellé). */
  .hero { padding: var(--space-md) 0 var(--space-md); }
  .hero__grid { gap: 0; }
  .hero__scene { display: none; }
  /* eyebrow discret */
  .hero__eyebrow { margin-bottom: var(--space-sm); }
  /* titre sur ~2 lignes, accent vert plein */
  .hero__title { margin-bottom: var(--space-sm); font-size: clamp(1.55rem, 1.15rem + 2.3vw, 2.1rem); }
  .hero__title .accent { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); }
  /* sous-titre court qui explique (façon écranspc) */
  .hero__subtitle { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--fs-sm); max-width: none; margin-bottom: var(--space-md); }
  /* 2 boutons empilés pleine largeur, compacts -> chacun sur 1 ligne */
  .hero__cta { flex-direction: column; flex-wrap: nowrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
  .hero__cta .btn { width: 100%; }
  .hero__cta .btn--lg { padding: .68em 1em; font-size: var(--fs-sm); border-radius: 11px; }
  /* stats EN LIGNE : chiffre gras + libellé à côté, séparateurs fins */
  .hero__stats { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
  .hero__stat { flex-direction: row; align-items: baseline; gap: .4em; }
  .hero__stat-num { font-size: var(--fs-md); color: var(--ink); }
  .hero__stat-label { font-size: var(--fs-2xs); margin-top: 0; }
  .hero__stat-sep { display: block; width: 1px; height: 1em; align-self: center; }
}

/* ============================================================
   Encart promo calculateur (home) : .calc-promo (texte | visuel).
   Renvoie vers une page calculateur. Piloté par [data-accent].
   ============================================================ */
.calc-promo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: center; background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }
.calc-promo__text .eyebrow { color: var(--acc, var(--brand)); }
.calc-promo__text h2 { margin: 8px 0 12px; }
.calc-promo__text p { color: var(--text); max-width: 52ch; margin-bottom: 20px; }
.calc-promo__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.calc-promo__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.calc-promo__small { font-size: .82rem; color: var(--muted); }
@media (max-width: 720px) { .calc-promo { grid-template-columns: 1fr; gap: 20px; } .calc-promo__visual { order: -1; } }


/* ============================================================
   HERO D'APRES LA MAQUETTE FOURNIE

   Trois reperes a icone sous les boutons, puis un PANNEAU encadre de chiffres
   en pleine largeur sous les deux colonnes. Le panneau ferme le hero sur une
   base pleine au lieu de laisser la colonne de droite se vider.

   Les notes de la maquette (96/100 sur le visuel et sur les cartes) ne sont
   PAS reprises : aucun score n'est calcule hors du moteur, il serait invente.
   ============================================================ */
.hero__grid { row-gap: clamp(1.4rem, 1rem + 1.2vw, 2.4rem); }
.hero__points {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 28px;
}
.hpoint {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--fs-xs); color: var(--text); line-height: 1.3;
}
.hpoint__ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand); font-size: 1rem; line-height: 1;
}

/* PLACEMENT EXPLICITE, sans quoi le bloc mis en pleine largeur prend la
   rangee 2 et le visuel - place automatiquement - tombe en rangee 3, sous tout
   le reste. Erreur commise DEUX FOIS : la regle reste, meme si le bloc qu'elle
   accompagnait change. */
.hero__grid > .hero__content { grid-column: 1; grid-row: 1; }
.hero__grid > .hero__scene   { grid-column: 2; grid-row: 1; }

/* Le panneau de chiffres : pleine largeur, encadre, sous les deux colonnes. */
.hero__grid > .hero__stats {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px; margin-top: clamp(24px, 2vw, 38px);
  padding: 20px clamp(20px, 2.4vw, 32px);
  /* L'ecart de grille vaut jusqu'a 4,5rem : utile entre les colonnes, trop
     entre les rangees empilees. */
  margin-top: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.hero__stat { display: flex; align-items: center; gap: 14px; }
.hero__stat-ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand); font-size: 1.05rem; line-height: 1;
  margin: 0;
}
.hero__stat-txt { display: flex; flex-direction: column; min-width: 0; }
.hero__stat-num {
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: var(--fs-xl); color: var(--ink); font-variant-numeric: tabular-nums;
}
.hero__stat-label { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.hero__stat-sep { display: none; }

@media (max-width: 900px) {
  /* En colonne unique, le placement explicite doit sauter. */
  .hero__grid > .hero__content,
  .hero__grid > .hero__scene,
  .hero__grid > .hero__stats { grid-column: 1 / -1; grid-row: auto; }
  .hero__grid > .hero__stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .hero__points { gap: 12px 18px; }
}
@media (max-width: 560px) {
  .hero__grid > .hero__stats { grid-template-columns: 1fr; gap: 14px; }
  .hpoint { flex: 1 1 100%; }
}

/* ============================================================
   HAUTEURS DE LA PAGE D'ACCUEIL

   Chaque section portait 68 px de marge en haut ET en bas, soit 136 px de vide
   entre deux blocs, plus la marge de l'en-tete de section. Resultat mesure :
   on arrivait sur « Nos ecrans du moment » sans voir une seule carte, et la
   page faisait 6 100 px pour six sections.

   `:has(.hero__grid)` limite le resserrement a la page d'accueil : les pages
   d'article gardent leur respiration.
   ============================================================ */
main:has(.hero__grid) > .section { padding-top: 30px; padding-bottom: 38px; }
main:has(.hero__grid) > .section .section-head { margin-bottom: 20px; }
/* Le chapo d'une en-tete de section tenait sur deux a quatre lignes centrees
   avec une grande marge : on le resserre, l'information n'y perd rien. */
main:has(.hero__grid) > .section .section-head p { margin-top: 6px; }
/* Le hero fermait sur 27 px de marge basse plus le panneau de chiffres : la
   premiere carte tombait sous la ligne de flottaison sur un ecran courant. */
.hero { padding-bottom: 8px; }

/* Le lien de section a droite du titre, comme dans la maquette. Place sous
   le h2, il s'intercalait entre le titre et le chapo et ajoutait une ligne
   a une en-tete deja haute. */
main:has(.hero__grid) > .section .section-head { position: relative; }
main:has(.hero__grid) > .section .section-head__link {
  position: absolute; right: 0; bottom: 8px; margin-top: 0;
}
@media (max-width: 900px) {
  main:has(.hero__grid) > .section .section-head__link {
    position: static; display: block; margin-top: 10px;
  }
}

/* ============================================================
   RELIEF — T4 a T8, d'apres la maquette fournie

   Mesure avant : les tuiles d'icone etaient des carres a 16 % de la couleur de
   marque avec un glyphe de la meme couleur, et celles du bandeau de confiance
   avaient carrement un glyphe GRIS (rgb 201,202,214) sur un aplat sombre.
   D'ou l'impression de page plate.

   Trois familles de tuiles partagent desormais un meme traitement : un fond
   plus soutenu, un anneau complet qui accroche la lumiere, et un glyphe clair.
   Un ANNEAU, pas un filet sur un cote : pas d'accolade.
   ============================================================ */
.hpoint__ico,
.hero__stat-ico,
.trust__ico {
  /* TUILE PLEINE, et non un voile. A 16-34 % de la couleur de marque, la tuile
     restait pale en theme clair et le glyphe blanc y devenait illisible. Vu en
     capture sur le theme clair. Une tuile saturee porte le meme glyphe blanc
     dans les deux themes. */
  background: linear-gradient(150deg,
    var(--brand),
    color-mix(in srgb, var(--brand) 74%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 26%, transparent);
  color: #fff;
}

/* Le bandeau de chiffres : icones plus grandes et separateurs verticaux, comme
   dans la maquette. Un trait droit entre deux colonnes n'est pas un crochet. */
.hero__stat-ico { width: 46px; height: 46px; font-size: 1.2rem; }
.hero__stat + .hero__stat {
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 2vw, 30px);
}
@media (max-width: 900px) {
  .hero__stat + .hero__stat { border-left: 0; padding-left: 0; }
}

/* Le panneau de chiffres accroche un peu de lumiere au lieu d'etre un aplat. */
.hero__grid > .hero__stats {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
}

/* Rangee de confiance : les glyphes etaient GRIS. */
.trust__ico { color: var(--on-accent); font-size: 1.15rem; }

/* ============================================================
   CARTES DE L'ACCUEIL

   Halo colore sur la carte mise en avant, coches rondes pleines, pastille de
   caracteristique plus lisible. Aucune note, aucun score : consigne explicite.
   ============================================================ */
.picks-grid > .pcard--star {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent),
    0 18px 40px color-mix(in srgb, var(--brand) 18%, transparent);
}
.picks-grid > .pcard {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.picks-grid > .pcard:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* Coches PLEINES et rondes, comme dans la maquette : le petit chevron nu se
   perdait dans le texte. */
.pcard__raisons li { padding-left: 26px; }
.pcard__raisons li::before {
  content: "✓";
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 0; top: .12em;
  width: 17px; height: 17px; border-radius: 50%;
  background: color-mix(in srgb, var(--success) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success); font-size: .68rem; font-weight: 700; line-height: 1;
}

/* La pastille de caracteristique posee sur le visuel : plus lisible. */
.pcard__diag {
  font-size: var(--fs-xs); font-weight: 700;
  padding: .32em .7em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* ============================================================
   T3 — LA CARTE CENTRALE DE LA SCENE PORTE SON IDENTITE

   On voyait trois images sans savoir laquelle etait mise en avant ni pourquoi.
   La carte centrale porte desormais ses caracteristiques, son nom et sa phrase,
   comme dans la maquette. Aucune note : consigne explicite.
   ============================================================ */


/* Le lien de section remonte a hauteur du titre : place en bas a droite, il
   venait toucher la derniere ligne du chapo et se lisait comme sa suite. */
main:has(.hero__grid) > .section .section-head__link { bottom: auto; top: 4px; }
@media (max-width: 900px) {
  main:has(.hero__grid) > .section .section-head__link { top: auto; }
}