/*
  Procimex — styles propres à la page d'accueil.

  Ne contient que ce qui n'existe qu'ici. Tout ce qui est partagé (palette,
  typographie, boutons, gabarit, en-tête, pied de page, apparition au
  défilement) vit dans base.css, chargé avant celui-ci.

  Référence : Test design/accueil-test-v10.html (validée le 19/08).
*/

/* ---------- 1 · Hero ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 47.5rem);
  display: flex; align-items: flex-start;
  background: var(--navy);
  overflow: hidden;
  /* Fond sombre : l'anneau de focus par défaut (bleu foncé) y disparaîtrait.
     Voir --focus dans base.css. */
  --focus: var(--paper);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 34%;
  /* Zoom lent au chargement, façon « Ken Burns ». Il s'arrête et ne boucle
     pas : une boucle attirerait l'œil en permanence pendant la lecture. */
  animation: heroZoom 20s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Deux couches superposées : un film bleuté uniforme sur toute l'image, plus
   un renfort en haut, là où se pose le texte. La photo reste lisible jusqu'en
   bas au lieu d'être assombrie partout.

   Les teintes dérivent des variables de base.css via color-mix() : si le bleu
   de marque change, le voile suit. Modifier les pourcentages change la
   lisibilité du titre sur la photo — à revérifier visuellement après coup. */
.hero-veil {
  position: absolute; inset: 0;

  /* Repli pour les navigateurs antérieurs à ~2023, qui ne connaissent pas
     color-mix() : sans lui, toute la déclaration suivante est ignorée d'un
     bloc et le titre blanc se retrouve seul sur la photo, illisible. Un
     navigateur récent lit les deux lignes et garde la seconde.

     Valeur = --navy converti en sRGB (rgb(0, 28, 41)), à 68 % plutôt que 66 %
     pour compenser le renfort haut du dégradé, absent de ce repli. */
  background: rgba(0, 28, 41, .68);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--navy-deep) 42%, transparent) 0%,
      color-mix(in oklab, var(--navy-deep) 28%, transparent) 38%,
      color-mix(in oklab, var(--navy-deep) 6%,  transparent) 66%,
      transparent                                            82%),
    linear-gradient(0deg,
      color-mix(in oklab, var(--navy) 66%, transparent),
      color-mix(in oklab, var(--navy) 66%, transparent));
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 72.5rem; margin: 0 auto;
  padding: 6.875rem var(--gut) 4rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero h1 { color: var(--white); max-width: 19ch; }
.hero h1 .hl { color: var(--accent-lt); }

.hero-trust { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; color: var(--white); }
.hero-trust li { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 600; }
.hero-trust svg { color: var(--accent-lt); flex-shrink: 0; }

.hero-cta { margin-top: 2.5rem; }
.hero .btn { min-width: 16.375rem; }

/* Cascade d'entrée du hero retirée (21/08, jugée fatigante/systématique au
   fil des visites). Le zoom lent de la photo (heroZoom, plus haut) reste :
   ce n'est pas un fondu d'apparition, seulement le mouvement de fond. */

/* ---------- 2 · Cartes méthode ---------- */
.agents {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem; margin-top: 3.5rem;
}
.agent {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 2.125rem 2rem 2.25rem; height: 100%;
  box-shadow: var(--shadow-soft);
}
/* Filet bleu en haut de carte. Affiché d'emblée sans JavaScript ; avec JS il
   se déploie de gauche à droite au moment où la carte apparaît. */
.agent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.25rem;
  background: var(--hl);
  transform-origin: left; transform: scaleX(1);
}
.js-motion .agent::before { transform: scaleX(0); }
.js-motion .agent.is-visible::before { transform: scaleX(1); transition: transform .6s ease .15s; }

.agent h3 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.875rem; }
.agent .badge-temp {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700;
  color: var(--badge-text); background: var(--badge-bg);
  padding: 0.25rem 0.6875rem; border-radius: 0.375rem;
}
.agent p { font-size: 1.0938rem; line-height: 1.7; text-align: left; }
.agent p strong { color: var(--ink); font-weight: 700; }

/* ---------- 3 · Certifications ---------- */
.cert-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2.125rem 1.5rem; margin-top: 3.625rem;
}
.cert { position: relative; padding-top: 2.125rem; }

/* Le coin coupé en haut à droite est obtenu par deux clip-path imbriqués :
   le cadre extérieur porte la couleur de bordure, la carte intérieure le
   fond blanc, et le décalage de 1px fait office de trait. Une bordure CSS
   classique ne suivrait pas la coupe. */
.cert-frame {
  background: var(--border); padding: 1px; height: 100%;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  filter: drop-shadow(var(--shadow-card));
}
.cert-card {
  background: var(--white); height: 100%; padding: 2.5rem 1.875rem 2rem;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.cert-card p { font-size: 1rem; line-height: 1.7; margin-top: 0.625rem; }
.cert-card strong { color: var(--ink); font-weight: 700; }

/* Sortie unique de la section, sous les trois cartes (27/08). Elle remplace
   les trois liens .cert-source qui partaient chacun vers un organisme
   extérieur différent. Centrée et à l'écart des cartes : c'est une invitation
   à vérifier, pas un quatrième élément de la grille. */
.cert-verif { text-align: center; margin: 2.75rem 0 0; }
.cert-verif a {
  display: inline-block; font-size: 0.9375rem; font-weight: 600;
  color: var(--accent); border-bottom: 1px solid var(--border);
  padding-bottom: 0.125rem;
  transition: border-color .16s ease, color .16s ease;
}
.cert-verif a:hover { color: var(--btn-hover); border-bottom-color: var(--btn-hover); }

.medallion {
  position: absolute; top: 0; left: 1.75rem; z-index: 2;
  width: 4.125rem; height: 4.125rem; border-radius: 50%; overflow: hidden;
  background: var(--white); border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-medallion);
  display: flex; align-items: center; justify-content: center;
}
/* contain, pas cover : les logos ne doivent pas être rognés par le cercle.
   Le certibiocide n'est pas carré, il est simplement centré. */
.medallion img { width: 100%; height: 100%; object-fit: contain; padding: 0.4375rem; }

/* ---------- 4 · Avis clients ---------- */
/* Codes visuels d'un widget d'avis (grosse note, étoiles ambre, pastille à
   initiale) mais habillage du site : mêmes cartes blanches bordées que les
   sections précédentes, mêmes polices, mêmes couleurs. Le seul emprunt
   assumé est l'ambre des étoiles — voir --star dans base.css. */

/*
 * Ordre du badge Google différent selon la largeur d'écran (23/08). Desktop :
 * juste sous le titre, ça habille l'espace laissé par l'ancien résumé
 * chiffré. Mobile : après les 3 avis — placé en haut, le badge tente le clic
 * trop tôt et fait sortir du site avant la lecture des témoignages
 * sélectionnés à la main.
 */
.avis-layout { display: flex; flex-direction: column; }
.avis-layout .center-col { order: 1; }
.avis-layout .google-badge { order: 2; align-self: center; margin-top: 1.375rem; }
.avis-layout .avis-grid { order: 3; }

/* Mention de la source des avis, sans note ni décompte chiffrés (ni l'un ni
   l'autre ne peuvent être tenus à jour automatiquement sur ce site codé en
   dur — voir décision du 23/08). Lien direct vers la fiche Google : seul CTA
   de la section. */
.google-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5625rem 1.125rem 0.5625rem 0.875rem;
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-body); font-size: 0.8438rem; font-weight: 600; color: var(--accent);
  text-decoration: none; background: var(--white);
  transition: border-color .15s;
}
.google-badge:hover { border-color: var(--accent); color: var(--hl); }
.google-badge svg { flex: none; }

.etoiles { display: inline-flex; gap: 0.125rem; }
/* Étoile vide : le gris de bordure, pas une étoile absente — la note reste
   lisible d'un coup d'œil (4 pleines sur 5 dessinées). */
.etoile { color: var(--border); }
.etoile--pleine { color: var(--star); }

.avis-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin-top: 2.875rem;
}
.avis-carte {
  display: flex; flex-direction: column; gap: 1.125rem; height: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}
.avis-tete { display: flex; align-items: center; gap: 0.875rem; }
.avis-avatar {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1;
}
.avis-identite { display: flex; flex-direction: column; gap: 0.3125rem; }
.avis-auteur { font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: normal; color: var(--ink); }
/* blockquote n'est pas dans la remise à zéro de base.css : sans ça, la marge
   par défaut du navigateur (1em 40px) décalerait tout le texte vers la droite. */
.avis-texte { margin: 0; font-size: 1rem; line-height: 1.7; text-align: left; }

/* ---------- 5 · Collectivités & syndics ---------- */
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3.75rem; align-items: center; }
.audience-list { display: flex; flex-direction: column; gap: 1.125rem; }
.audience-list li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 1.0938rem; font-weight: 600; color: var(--ink);
}
.audience-list svg { flex-shrink: 0; color: var(--accent); }

/* ---------- 6 · Nos conseils ---------- */
.conseils { margin-top: 2.875rem; border-top: 1px solid var(--border); }
.conseil {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.625rem 0.75rem; border-bottom: 1px solid var(--border);
  border-radius: 0.25rem;
  transition: background-color .2s ease;
}
/* --pale et non --white : c'est la seule valeur qui réagit visiblement, que la
   section soit en --paper ou en --pale. */
.conseil:hover { background-color: var(--pale); }

.conseil-tag {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); background: var(--paper);
  padding: 0.25rem 0.625rem; border-radius: 0.25rem; border: 1px solid var(--border);
  margin-top: 0.1875rem;
  /* Largeur fixe plutôt que flex-shrink: 0 seul : les trois étiquettes
     ("Reconnaître", "Prévention", "Réglementation") n'ont pas la même
     longueur, donc la colonne de texte à côté démarrait à un x différent
     sur chaque ligne. Largeur calée sur la plus longue + un peu de marge. */
  flex: 0 0 148px; text-align: center;
}
.conseil-body { flex: 1 1 auto; }
.conseil h3 { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); transition: color .16s ease; }
.conseil:hover h3 { color: var(--accent); }
.conseil-reponse {
  margin: 0.625rem 0 0; max-width: 62ch;
  font-size: 0.9688rem; line-height: 1.7; color: var(--body-ink);
}
.conseil .arrow {
  flex: none; margin-top: 0.125rem; color: var(--accent); font-size: 1.75rem;
  transition: transform .2s ease;
}
.conseil:hover .arrow { transform: translateX(4px); }

/* ---------- 7 · Clôture ---------- */
/* Fond clair retenu (22/08) : la version sombre empilerait deux blocs sombres
   avec le pied de page juste en dessous. Les deux filets suffisent à faire lire
   la section comme une clôture et non comme une section de contenu de plus,
   sans ajouter de couleur — sans eux elle était identique aux sections
   Certifications et Collectivités, toutes trois en --pale.
   .btn--onDark/.btn--ghostDark sont pensés pour un fond sombre (texte blanc,
   fond translucide) ; surchargés ici pour rester lisibles sur --pale. */
.closing {
  background: var(--pale);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.closing h2 { color: var(--ink); }
.closing h2 .hl { color: var(--hl); }

.closing .btn--onDark { background: var(--btn); color: var(--white); }
.closing .btn--onDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
/* Fond blanc et non transparent (26/08) : sur --pale, un bouton transparent se
   confond avec le fond de la section et ne se lit plus comme un bouton — seule
   sa bordure le distingue. Aligné sur .methode-closing, qui a tranché en
   premier. */
.closing .btn--ghostDark { background: var(--white); color: var(--ink); border-color: var(--border-dk); }
.closing .btn--ghostDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }

/* Même largeur minimale que dans le hero : les deux boutons y sont de largeur
   égale, ils doivent l'être ici aussi puisque ce sont les mêmes. */
.closing .btn { min-width: 16.375rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  /* Les deux colonnes de la section Collectivités passent l'une sous l'autre. */
  .band { grid-template-columns: 1fr; gap: 2.125rem; }
}

@media (max-width: 780px) {
  .hero { min-height: 37.5rem; }
  .hero-inner { padding: 3.75rem var(--gut) 3rem; }
  .hero h1 { max-width: none; }
  .hero-trust { margin-top: 1.5rem; gap: 0.625rem; }
  /* Boutons pleine largeur, empilés : plus faciles à viser au pouce. */
  .hero .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1 1 100%; min-width: 0; }

  /* Le cadrage recentre le sujet de la photo, qui sort du cadre en portrait. */
  .hero-media img { object-position: 56% 42%; }
  /* Voile un peu plus dense : le titre occupe proportionnellement plus de
     hauteur sur un écran étroit, donc plus de surface à protéger. */
  .hero-veil {
    background:
      linear-gradient(180deg,
        color-mix(in oklab, var(--navy-deep) 44%, transparent) 0%,
        color-mix(in oklab, var(--navy-deep) 34%, transparent) 46%,
        color-mix(in oklab, var(--navy-deep) 18%, transparent) 72%,
        transparent                                            92%),
      linear-gradient(0deg,
        color-mix(in oklab, var(--navy) 68%, transparent),
        color-mix(in oklab, var(--navy) 68%, transparent));
  }

  .agents { grid-template-columns: 1fr; gap: 1.125rem; margin-top: 2.625rem; }
  .cert-grid { grid-template-columns: 1fr; }
  .avis-grid { grid-template-columns: 1fr; margin-top: 2.125rem; }
  .avis-layout .google-badge { order: 4; align-self: flex-start; margin-top: 2.125rem; }
  .btn-row--center { margin-top: 2.625rem; }

  /* Sans survol sur mobile, la flèche reste affichée (seul indice de
     cliquabilité sur tactile) mais se passe de l'effet de décalage. */
  .conseil { position: relative; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.5rem 2.25rem 1.5rem 0; }
  .conseil-tag { flex: none; }
  .conseil:hover { background-color: transparent; }
  .conseil .arrow { position: absolute; top: 1.625rem; right: 0; margin-top: 0; }

  /* Boutons pleine largeur empilés, comme dans le hero. */
  .closing .btn-row { width: 100%; }
  .closing .btn-row .btn { flex: 1 1 100%; min-width: 0; }
}