/* Accueil : voir docs/maquettes/Main.dc.html et Mobile-Recherche.dc.html */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--outremer);
  color: var(--blanc);
  padding: 36px 0 110px;
}
.reseau {
  position: absolute;
  right: -60px; top: -40px;
  width: 860px;
  opacity: .55;
  pointer-events: none;
}
.reseau svg { display: block; max-width: none; }
.hero-grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px;
  align-items: center;
}
.hero-texte { min-width: 0; padding-top: 48px; container-type: inline-size; }
.hero-sur { margin-bottom: 22px; font-size: 14px; letter-spacing: .14em; color: var(--lavande); }
.titre-accueil {
  /* Trois lignes, jamais coupées : la taille suit la largeur de la colonne. */
  font-size: clamp(30px, 10cqi, 118px);
  line-height: .9;
  font-stretch: 112%;
  letter-spacing: -.025em;
  text-wrap: nowrap;
}
.titre-italique { font-style: italic; font-weight: 500; font-stretch: 90%; }
.masque { display: block; overflow: hidden; padding-bottom: .06em; }
.monte { position: relative; display: inline-block; }
.souligne {
  position: absolute;
  left: 0; right: 0; bottom: .02em;
  height: .11em;
  border-radius: 999px;
  background: var(--signal);
  transform-origin: left;
}
.hero-chapo { max-width: 520px; margin-top: 30px; font-size: 19px; color: var(--lavande-clair); }
.hero-recherche { min-width: 0; }

.net path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.net-voyageur { stroke-dasharray: 11.7 1000; stroke-dashoffset: 11.7; }

@media (max-width: 1080px) {
  .hero { padding-bottom: 72px; }
  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-texte { padding-top: 16px; }
  .hero-recherche { max-width: 620px; }
  .reseau { opacity: .28; }
}
@media (max-width: 720px) {
  .hero { padding: 12px 0 48px; }
  .hero-chapo { font-size: 17px; margin-top: 20px; }
  .reseau { right: -340px; top: -120px; }
}

/* Bandeau défilant des réseaux */
.defile { overflow: hidden; background: var(--encre); color: var(--blanc); padding: 20px 0; }
.defile-piste { display: flex; width: max-content; }
.defile-texte {
  padding-right: 40px;
  white-space: nowrap;
  font-family: var(--titre);
  font-size: 30px;
  font-weight: 600;
  font-style: italic;
  font-stretch: 80%;
}
.defile-texte i { font-style: normal; color: var(--signal); }

/* Promesses */
.promesses { padding: 72px 0 88px; }
.promesses .conteneur { display: flex; flex-direction: column; gap: 36px; }
.titre-section {
  max-width: 760px;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.02;
  font-stretch: 108%;
}
.promesses-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.promesse {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 280px;
  padding: 28px;
  border-radius: 22px;
  background: var(--blanc);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.promesse:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgb(14 18 51 / .35); }
.promesse h3 { font-size: 24px; font-weight: 750; font-stretch: 105%; }
.promesse p { font-size: 16px; color: var(--gris); }
.promesse .lien-suite { margin-top: auto; }
.promesse-encre { background: var(--encre); color: var(--blanc); }
.promesse-encre p { color: var(--lavande); }
.promesse-prix {
  font-family: var(--titre);
  font-size: 44px;
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.1;
  color: var(--outremer);
  font-variant-numeric: tabular-nums;
}
.chiffres { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.chiffres > span { display: block; }
.mini { flex: none; }
.mini path { fill: none; stroke-linecap: round; }

@media (max-width: 980px) {
  .promesses-grille { grid-template-columns: minmax(0, 1fr); }
  .promesse { min-height: 0; }
}