/* =====================================================================
   home-hero.css — Landing publique « Feu de camp numérique »
   Reproduction de la maquette : crème/noir/doré doux, élégant, premium.
   ===================================================================== */

.hh-hero {
  --hh-cream:        #F4ECDD;
  --hh-cream-deep:   #ECE0C8;
  --hh-ink:          #1B1410;
  --hh-ink-soft:     #463528;
  --hh-text-muted:   rgba(60, 44, 28, 0.78);
  --hh-gold:         #C9A45C;
  --hh-gold-soft:    #D4B98C;
  --hh-gold-deep:    #8B6F3F;
  --hh-shadow-card:  0 18px 40px -22px rgba(40, 25, 8, 0.30);
  --hh-shadow-cta:   0 14px 32px -10px rgba(139, 111, 63, 0.55);

  background: linear-gradient(135deg, #F8F1E6 0%, #F4ECDD 60%, #ECE0C8 100%);
  color: var(--hh-ink);
  padding: 60px clamp(20px, 4vw, 60px) 0;
  margin: 0; /* (07/07 fix débordement) La landing est autonome (body margin:0, aucun conteneur à marge intérieure). L'ancienne marge négative « margin:0 calc(-1*clamp(16px,3vw,32px)) » faisait dépasser le hero de 16 à 32px hors de l'écran → barre de défilement horizontale + texte collé/coupé à gauche sur mobile. */
  position: relative;
  overflow: hidden;
}
.hh-hero.is-admin-preview { margin: 0; padding-top: 40px; }

/* ---------- Grille principale 2 colonnes ---------- */
.hh-hero .hh-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}

/* ---------- Colonne gauche ---------- */
.hh-left {
  padding: 20px 0 40px;
  display: flex;
  flex-direction: column;
}
.hh-headline {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.08;
  color: var(--hh-ink);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
  transition: opacity 380ms ease;
  min-height: 1.08em;
}
.hh-headline .hh-accent,
.hh-accent {
  color: var(--hh-gold-deep);
  font-style: italic;
  font-weight: 600;
}

/* Séparateur décoratif fin avec icône au centre */
.hh-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  max-width: 300px;
}
.hh-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,111,63,0.55), transparent);
}
.hh-divider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
}

/* Blocs de texte */
.hh-text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  color: var(--hh-text-muted);
  margin: 0 0 22px;
  max-width: 480px;
}
.hh-text-intro { color: var(--hh-ink-soft); font-weight: 400; }
.hh-text-spirit { font-size: clamp(13.5px, 1vw, 15px); }

/* CTA principal — gros bouton doré sombre */
.hh-cta {
  box-sizing: border-box; /* (07/07 fix bouton coupé) en width:100% (mobile), sans ça les marges internes (28-36px) s'ajoutaient à la largeur → le bouton dépassait et le overflow:hidden du hero coupait son bord droit. */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: linear-gradient(135deg, #B58A4F 0%, #C9A45C 100%);
  color: #FAF7F0;
  text-decoration: none;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--hh-shadow-cta);
  transition: transform 200ms ease, box-shadow 200ms ease;
  margin-top: 12px;
}
.hh-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -8px rgba(139, 111, 63, 0.65); }
.hh-cta:active { transform: translateY(0); }
.hh-cta svg { flex-shrink: 0; }

/* ---------- Colonne droite : cartes + image ---------- */
.hh-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 3 cartes verticales */
.hh-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.hh-card {
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--hh-shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.hh-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -22px rgba(40, 25, 8, 0.40); }

.hh-card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #E8DCC5, #D4B98C);
  overflow: hidden;
  flex: 1 0 auto; /* (07/07 fix vide blanc) la photo grandit pour remplir l'espace des cartes courtes (au lieu de laisser un grand blanc). Le 3/4 reste la hauteur mini ; jamais rétrécie. */
}
.hh-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hh-card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.45;
}

/* Icône circulaire posée à cheval entre image et texte */
.hh-card-icon {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(40, 25, 8, 0.25);
  border: 1px solid rgba(212, 185, 140, 0.30);
}

.hh-card-body {
  padding: 30px 16px 22px;
  text-align: center;
  flex: 0 0 auto; /* (07/07 fix vide blanc) le texte occupe juste sa hauteur (avant : flex:1 = il s'étirait et centrait le titre dans un grand vide). */
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px;
}
.hh-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--hh-ink-soft);
  margin: 0;
  line-height: 1.4;
}
.hh-card-text {
  font-size: 12.5px;
  color: var(--hh-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Grande image immersive — placée AU-DESSUS des 3 cartes (demande Julien 07/07) */
.hh-main-image {
  order: -1; /* (07/07) remonte la grande image avant les 3 cartes dans la colonne .hh-right (flex colonne) */
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 21 / 10;
  box-shadow: 0 24px 48px -20px rgba(40, 25, 8, 0.40);
}
.hh-main-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Fondu doux qui blend vers la gauche (zone texte) */
.hh-main-fade {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(248, 241, 230, 0.55) 0%, rgba(248, 241, 230, 0) 28%);
}

/* ---------- Barre du bas : 4 avantages ---------- */
.hh-advantages {
  max-width: 1320px;
  margin: 60px auto 0;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 22px clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  box-shadow: 0 14px 36px -22px rgba(40, 25, 8, 0.25);
  position: relative;
  z-index: 2;
  margin-bottom: 40px; /* (07/07 fix) marge positive : avant -28px + overflow:hidden du hero coupaient le bas de la bande */
}
.hh-advantage {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px;
}
.hh-advantage-ico {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 164, 92, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
}
.hh-advantage-text {
  display: flex; flex-direction: column;
  line-height: 1.3;
}
.hh-advantage-text strong {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--hh-ink);
}
.hh-advantage-text span {
  font-size: 12.5px;
  color: var(--hh-text-muted);
}

/* ============= Responsive ============= */
@media (max-width: 1100px) {
  .hh-hero .hh-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hh-left { order: 1; padding-top: 0; } /* (07/07) mode app / 1 colonne : TEXTE en haut (avant : les images passaient en premier, le texte tombait tout en bas). */
  .hh-right { order: 2; } /* images (3 cartes + grande photo) en bas */
  .hh-headline { font-size: clamp(34px, 6vw, 52px); }
  .hh-main-image { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .hh-hero { padding: 30px 16px 0; }
  .hh-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hh-card-media { aspect-ratio: 3 / 4; } /* (07/07) mobile : avant 16/10 (paysage) sur photos verticales 9:16 → n'en montrait qu'une fine bande, têtes/pieds coupés. Passé en 3/4 comme l'ordi = photo affichée pareil, plus de coupe sévère sur téléphone. */
  .hh-card-icon { bottom: -18px; width: 38px; height: 38px; }
  .hh-card-body { padding: 26px 14px 18px; }
  .hh-headline { font-size: clamp(28px, 8vw, 40px); margin-bottom: 20px; }
  .hh-text { font-size: 14px; }
  .hh-cta { padding: 14px 28px; font-size: 14px; width: 100%; justify-content: center; }
  .hh-advantages {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px;
    margin-bottom: 0;
  }
  .hh-advantage-text strong { font-size: 15px; }
}

@media (max-width: 420px) {
  .hh-advantages { grid-template-columns: 1fr; }
}

/* Respecte les préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .hh-headline { transition: none !important; }
  .hh-card, .hh-cta { transition: none !important; }
}