/* ==========================================================================
   HOMAZEK INSTITUT — signature.css
   Couche de finition globale, chargée en dernier sur toutes les pages.
   Objectif : un rendu premium, épuré et cohérent — rythme vertical généreux,
   hiérarchie typographique nette, composants harmonisés, micro-interactions
   sobres. Organisation : 1. Tokens · 2. Typographie · 3. Rythme · 4. En-tête
   5. Héros · 6. Composants · 7. Formulaires · 8. Pied de page · 9. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — échelle d'espacement et ombres raffinées
   -------------------------------------------------------------------------- */
body.hz-terre {
  --hz-section-space: clamp(52px, 6.5vw, 88px);
  --hz-content-gap: clamp(28px, 4vw, 56px);
  --hz-radius-s: 4px;
  --hz-radius-m: 8px;
  --hz-shadow-1: 0 1px 2px rgba(18, 59, 43, .05), 0 8px 24px rgba(18, 59, 43, .06);
  --hz-shadow-2: 0 2px 4px rgba(18, 59, 43, .06), 0 18px 48px rgba(18, 59, 43, .12);
  --hz-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHIE — hiérarchie nette, lecture confortable
   -------------------------------------------------------------------------- */
body.hz-terre {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.hz-terre p {
  text-wrap: pretty;
  color: #42584b;
}

body.hz-terre main#contenu h2 {
  margin-bottom: 18px;
  color: var(--terre);
}

body.hz-terre main#contenu h3 {
  margin-bottom: 8px;
  color: var(--terre);
}

body.hz-terre main#contenu p {
  margin-bottom: 14px;
}

body.hz-terre main#contenu p:last-child {
  margin-bottom: 0;
}

/* Eyebrow : repère éditorial unique sur tout le site */
body.hz-terre .eyebrow {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mousse);
  margin-bottom: 16px;
}

/* Tiret signature avant chaque eyebrow : touche de couleur immédiate */
body.hz-terre .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--ble);
  margin-right: 10px;
  vertical-align: 3px;
}

::selection {
  background: var(--ble);
  color: var(--terre);
}

/* Filet d'accent sous les h2 : plus fin, plus précis */
body.hz-terre .section h2::after {
  width: 52px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ble), var(--mousse));
}

/* --------------------------------------------------------------------------
   3. RYTHME VERTICAL — sections aérées et régulières
   (reprend les sélecteurs de homazek-final.css pour les assouplir)
   -------------------------------------------------------------------------- */
body.hz-terre main#contenu > .section,
body.hz-terre main#contenu > .hom-cms-section,
body.hz-terre main#contenu > .galerie-observations,
body.hz-terre main#contenu > .institut-intro,
body.hz-terre main#contenu > .institut-expertises,
body.hz-terre main#contenu > .institut-methode,
body.hz-terre main#contenu > .institut-mission {
  padding-block: var(--hz-section-space) !important;
}

body.hz-terre main#contenu .hom-v4-section-heading,
body.hz-terre main#contenu .institut-section-heading,
body.hz-terre main#contenu .projets-cms-en-tete,
body.hz-terre main#contenu .hom-cms-section-heading {
  margin-bottom: clamp(26px, 3.4vw, 44px) !important;
}

body.hz-terre .hom-v4-intro-grid,
body.hz-terre .contact-grid,
body.hz-terre .expertise-ligne,
body.hz-terre .editorial {
  gap: var(--hz-content-gap) !important;
}

body.hz-terre main#contenu .institut-intro-grid,
body.hz-terre main#contenu .institut-methode-grid,
body.hz-terre main#contenu .institut-mission-grid,
body.hz-terre main#contenu .institut-cta-inner,
body.hz-terre main#contenu .projets-cms-grille,
body.hz-terre main#contenu .hom-cms-grid,
body.hz-terre main#contenu .devis-etapes {
  gap: clamp(18px, 2.4vw, 32px) !important;
}

body.hz-terre .hom-v4-cards {
  gap: clamp(18px, 2.2vw, 28px) !important;
}

/* Séparation discrète entre sections successives */
body.hz-terre .section + .section {
  border-top: 1px solid rgba(213, 230, 217, .7);
}

/* --------------------------------------------------------------------------
   4. EN-TÊTE — présence posée, lisibilité constante
   -------------------------------------------------------------------------- */
/* Logo : cartouche compact, le blanc épouse le contenu */
body.hz-terre .logo {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 13px 20px 15px !important;
  gap: 11px !important;
  border-radius: 0 0 8px 8px !important;
  border-bottom: 3px solid var(--ble) !important;
  box-shadow: var(--hz-shadow-1);
}

body.hz-terre .logo img {
  width: 44px !important;
  height: 44px !important;
}

body.hz-terre .logo span {
  font-size: 15px !important;
}

body.hz-terre .logo small {
  margin-top: 5px !important;
}

body.hz-terre .logo:hover {
  box-shadow: var(--hz-shadow-2);
}

body.hz-terre .navigation > a {
  position: relative;
  letter-spacing: .02em;
  transition: color .2s var(--hz-ease);
}

body.hz-terre .navigation > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 2px;
  background: var(--ble);
  transition: right .25s var(--hz-ease);
}

body.hz-terre .navigation > a:hover::after,
body.hz-terre .navigation > a[aria-current]::after {
  right: 0;
}

/* --------------------------------------------------------------------------
   5. HÉROS — profondeur maîtrisée, texte parfaitement lisible
   -------------------------------------------------------------------------- */
body.hz-terre .hero-immersif .diaporama::after {
  background:
    linear-gradient(180deg, rgba(7, 32, 25, .42), rgba(7, 32, 25, .16) 34%, rgba(7, 32, 25, .14) 62%, rgba(7, 32, 25, .5)),
    radial-gradient(ellipse at center, rgba(7, 32, 25, .22), transparent 68%);
}

body.hz-terre main#contenu > .hero .hero-description {
  letter-spacing: .01em;
}

body.hz-terre .hero-actions {
  margin-top: 34px;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   6. COMPOSANTS — boutons, cartes, listes : un seul langage visuel
   -------------------------------------------------------------------------- */
/* Boutons : couleur signature affirmée, majuscules, inversion au survol */
body.hz-terre .bouton,
body.hz-terre .nav-contact,
body.hz-terre .hero-actions > a.bouton {
  background: var(--ble) !important;
  border: 2px solid var(--ble) !important;
  color: var(--terre) !important;
  text-transform: uppercase;
  letter-spacing: .08em !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  border-radius: 2px !important;
  box-shadow: var(--hz-shadow-1);
  transition: background-color .25s var(--hz-ease), border-color .25s var(--hz-ease),
    color .25s var(--hz-ease), transform .25s var(--hz-ease), box-shadow .25s var(--hz-ease);
}

body.hz-terre .bouton:hover,
body.hz-terre .nav-contact:hover,
body.hz-terre .hero-actions > a.bouton:hover {
  background: var(--terre) !important;
  border-color: var(--terre) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--hz-shadow-2);
}

body.hz-terre .bouton:active {
  transform: translateY(0);
  box-shadow: var(--hz-shadow-1);
}

/* Variante secondaire : contour sobre */
body.hz-terre .bouton-clair {
  background: transparent !important;
  border-color: var(--terre) !important;
  color: var(--terre) !important;
}

body.hz-terre .bouton-clair:hover {
  background: var(--terre) !important;
  border-color: var(--terre) !important;
  color: #fff !important;
}

body.hz-terre .hero-actions > a.bouton-clair {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .85) !important;
  color: #fff !important;
}

body.hz-terre .hero-actions > a.bouton-clair:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--terre) !important;
}

/* CTA sombre : le bouton clair reste lisible sur fond profond */
body.hz-terre .cta .bouton-clair,
body.hz-terre .institut-cta .bouton-clair {
  border-color: rgba(255, 255, 255, .85) !important;
  color: #fff !important;
}

body.hz-terre .cta .bouton-clair:hover,
body.hz-terre .institut-cta .bouton-clair:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--terre) !important;
}

/* Sur bande sombre, le survol inverse vers le blanc (jamais fond sur fond) */
body.hz-terre .cta .bouton:hover,
body.hz-terre .institut-cta .bouton:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--terre) !important;
}

/* Cartes domaines : image soignée, numérotation précise */
body.hz-terre .hom-v4-card > img,
body.hz-terre .hom-cms-photo,
body.hz-terre .publication-carte-lien > img,
body.hz-terre .hom-v4-panel-image,
body.hz-terre .photo-editoriale,
body.hz-terre .institut-card img {
  border-radius: var(--hz-radius-s);
}

body.hz-terre .hom-v4-card {
  transition: transform .3s var(--hz-ease);
}

body.hz-terre .hom-v4-card > div > span,
body.hz-terre .institut-card span {
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
}

body.hz-terre .hom-v4-card h3 {
  letter-spacing: -.02em;
}

/* Bandeau de repères sous le héros de l'accueil */
body.hz-terre .bandeau-preuves .preuve strong {
  color: var(--mousse);
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
}

body.hz-terre .bandeau-preuves .preuve span {
  color: #42584b;
  line-height: 1.5;
}

/* Liens fléchés et liens d'action : soulignement précis */
body.hz-terre .hom-v4-link,
body.hz-terre .lien-fleche {
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  transition: color .2s var(--hz-ease), text-decoration-color .2s var(--hz-ease);
}

body.hz-terre .hom-v4-link:hover,
body.hz-terre .lien-fleche:hover {
  color: var(--mousse);
}

/* Onglets des expertises : état actif sans ambiguïté */
body.hz-terre .hom-expertises-tabs button {
  transition: color .2s var(--hz-ease), border-color .2s var(--hz-ease), background-color .2s var(--hz-ease);
}

/* Accordéons (questions, services associés) */
body.hz-terre details summary {
  transition: color .2s var(--hz-ease);
}

body.hz-terre details summary:hover {
  color: var(--mousse);
}

/* --------------------------------------------------------------------------
   7. FORMULAIRES — champs nets, retours d'état évidents
   -------------------------------------------------------------------------- */
body.hz-terre .formulaire-panel {
  border-radius: var(--hz-radius-m);
  padding: clamp(28px, 3.6vw, 44px) !important;
}

body.hz-terre .formulaire-contact {
  gap: 18px;
  margin-top: 20px;
}

body.hz-terre .formulaire-contact input:not([type=checkbox]),
body.hz-terre .formulaire-contact select,
body.hz-terre .formulaire-contact textarea {
  border-radius: var(--hz-radius-s);
  border-color: #c3d4c8;
}

body.hz-terre .formulaire-contact input:focus,
body.hz-terre .formulaire-contact select:focus,
body.hz-terre .formulaire-contact textarea:focus {
  border-color: var(--mousse);
  box-shadow: 0 0 0 3px rgba(63, 143, 85, .16);
}

body.hz-terre .formulaire-contact label {
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   8. PIED DE PAGE — respiration et hiérarchie retrouvées
   -------------------------------------------------------------------------- */
body.hz-terre .pied-page {
  padding-top: clamp(44px, 5.5vw, 64px);
}

body.hz-terre .pied-grille {
  gap: clamp(36px, 5vw, 72px);
}

body.hz-terre .pied-grille h2 {
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #cde4d4;
  margin-bottom: 18px;
}

body.hz-terre .pied-nav > a,
body.hz-terre .pied-contact > a:not(.lien-fleche) {
  margin-bottom: 12px;
  opacity: .92;
  transition: opacity .2s var(--hz-ease), color .2s var(--hz-ease);
}

body.hz-terre .pied-grille a:hover {
  opacity: 1;
  color: var(--ble);
  text-decoration-color: var(--ble);
  text-underline-offset: 4px;
}

body.hz-terre .reseaux-sociaux a {
  transition: background-color .2s var(--hz-ease), border-color .2s var(--hz-ease), color .2s var(--hz-ease), transform .2s var(--hz-ease);
}

body.hz-terre .reseaux-sociaux a:hover {
  transform: translateY(-2px);
  background: var(--ble);
  border-color: var(--ble);
  color: var(--terre);
}

body.hz-terre .pied-bas {
  margin-top: clamp(32px, 4vw, 48px);
  padding-block: 20px;
  opacity: .85;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE & PRÉFÉRENCES — cohérent jusqu'au mobile
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  body.hz-terre main#contenu > .section,
  body.hz-terre main#contenu > .hom-cms-section,
  body.hz-terre main#contenu > .galerie-observations,
  body.hz-terre main#contenu > .institut-intro,
  body.hz-terre main#contenu > .institut-expertises,
  body.hz-terre main#contenu > .institut-methode,
  body.hz-terre main#contenu > .institut-mission {
    padding-block: clamp(40px, 10vw, 56px) !important;
  }

  body.hz-terre .hero-actions {
    margin-top: 26px;
  }

  body.hz-terre .pied-page {
    padding-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hz-terre .navigation > a::after,
  body.hz-terre .bouton,
  body.hz-terre .nav-contact,
  body.hz-terre .hom-v4-card,
  body.hz-terre .reseaux-sociaux a {
    transition: none;
  }
}