/*
 * Ajouts à la feuille d'origine de l'accueil (styles.css, gardée telle
 * quelle depuis le commit 782e6aceb). Tout ce qui n'existait pas dans le
 * premier site vit ici, pour qu'un diff de styles.css reste vide.
 */

/* Les quatre témoignages publiés le 18/09, seuls dans la section « customer
   stories » depuis le 09/10/2026, dans son dessin : réseau en tête,
   citation en italique, nom et métier en pied. Pas de chiffre en tête : ces
   témoignages n'en donnent pas. Une rangée de quatre, deux sur tablette,
   une sur téléphone. */
.stories-grid--temoignages {
  grid-template-columns: repeat(4, 1fr);
}
.stories-grid--temoignages .story-card { padding: 28px; }

@media (max-width: 1200px) {
  .stories-grid--temoignages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .stories-grid--temoignages { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------
 * Menus déroulants du haut de page (09/10/2026) : Diagnostics, Vos
 * obligations, Professionnels. Charte du site : panneau blanc arrondi,
 * ombre douce, icônes bleues. Ouverts au survol et au clavier
 * (focus-within) ; dépliés à plat dans le menu mobile.
 * ------------------------------------------------------------------- */
.nav-groupe { position: relative; }
.nav-groupe > .nav-link i { font-size: .65em; margin-left: 4px; opacity: .7; }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 300px; z-index: 60;
  display: none; flex-direction: column; gap: 2px;
  padding: 8px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 24px 48px -16px rgba(15, 23, 42, .22));
}
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-groupe:hover .nav-menu,
.nav-groupe:focus-within .nav-menu { display: flex; }
.nav-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--color-text); font-size: .92rem; font-weight: 600;
}
.nav-menu a i { width: 18px; text-align: center; color: var(--color-primary); }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--color-primary-50); color: var(--color-primary-dark); }

/* ---------------------------------------------------------------------
 * Haut de page sur photo (09/10/2026), dans la charte : voile bleu nuit,
 * texte blanc, titre à dégradé, aperçu de devis en carte arrondie.
 * ------------------------------------------------------------------- */
.hero-photo {
  position: relative;
  padding: 96px 0 150px;
  background:
    linear-gradient(105deg, rgba(11, 17, 32, .94) 0%, rgba(11, 17, 32, .82) 42%, rgba(11, 17, 32, .45) 75%, rgba(0, 115, 169, .35) 100%),
    var(--color-night) url('/assets/accueil/hero-paris.jpg') center 40% / cover no-repeat;
  color: #fff;
}
.hero-photo-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hp-badge { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.hp-badge .dot { background: var(--color-success-light); }
.hp-titre {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em;
  color: #fff; margin: 0 0 20px;
}
.hp-titre .gradient-text {
  background-image: linear-gradient(135deg, var(--color-primary-light) 0%, #8fd3f7 50%, var(--color-primary-light) 100%);
}
.hp-chapo { font-size: 1.12rem; line-height: 1.65; color: rgba(255, 255, 255, .82); max-width: 560px; margin: 0 0 30px; }
.hp-preuves { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hp-preuves li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.hp-preuves i { color: var(--color-success-light); }
.hp-avis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.hp-etoiles { display: inline-flex; gap: 3px; color: var(--color-warning); font-size: .95rem; }
.hp-avis strong { color: #fff; font-family: var(--font-display); font-weight: 800; }
.hp-avis-texte { color: rgba(255, 255, 255, .75); font-size: .95rem; }

/* Aperçu de devis : même langage que les maquettes produit du site. */
.hp-apercu {
  background: #fff; color: var(--color-text);
  border-radius: var(--radius-xl); padding: 24px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
  animation: float 6s ease-in-out infinite;
}
.hp-apercu-tete { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.hp-apercu-tete strong { display: block; font-size: 1rem; }
.hp-apercu-tete small { color: var(--color-text-soft); font-size: .85rem; }
.hp-apercu-icone {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-50); color: var(--color-primary); font-size: 1.2rem;
}
.hp-apercu-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 20px 0; }
.hp-dpe { display: flex; flex-direction: column; gap: 4px; }
.hp-dpe-barre {
  width: var(--l); background: var(--c); color: #fff;
  font: 800 .72rem/1 var(--font-display); padding: 5px 8px;
  border-radius: 4px 999px 999px 4px;
}
.hp-dpe-barre--actuelle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-slate-900); }
.hp-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; font-weight: 600; }
.hp-liste i {
  width: 20px; height: 20px; border-radius: 50%; margin-right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16, 185, 129, .12); color: #047857; font-size: .65rem;
}
.hp-apercu-pied { padding-top: 16px; border-top: 1px solid var(--color-border); }
.hp-prix {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary-dark); font-weight: 700; font-size: .88rem;
}

/* Quatre arguments, en cartes qui chevauchent le bas de la photo. */
.hp-arguments { position: relative; z-index: 2; margin-top: -72px; padding-bottom: 24px; }
.hp-arguments-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hp-argument {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; background: #fff; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
a.hp-argument:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -24px rgba(15, 23, 42, .35); }
.hp-argument strong { display: block; font-size: .98rem; }
.hp-argument small { color: var(--color-text-soft); font-size: .85rem; }
.hp-pastille {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff; font-size: 1.15rem;
}

@media (max-width: 1024px) {
  .nav-menu { position: static; display: flex; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 8px; }
  .nav-menu::before { display: none; }
  .hero-photo-grille { grid-template-columns: 1fr; gap: 40px; }
  .hp-apercu { max-width: 520px; animation: none; }
  .hp-arguments-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero-photo { padding: 48px 0 110px; }
  .hp-chapo { font-size: 1rem; }
  .hp-apercu-corps { grid-template-columns: 1fr; }
  .hero-photo .hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .hp-arguments-grille { grid-template-columns: 1fr; }
}