/**
 * Horizons Aggregator — socle : remise à zéro, typographie, mise en page.
 * Auteur : Zacharie Bégin
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection-fond); color: var(--texte); }

a { color: var(--explorer); text-decoration: none; transition: color var(--t-couleur); }

/* Un lien au milieu d'un texte doit rester repérable sans la couleur : une
   personne daltonienne ne verrait rien d'autre. Les liens qui sont déjà des
   blocs identifiables — boutons, onglets, marque, cartes — en sont dispensés. */
p a:not([class]), li a:not([class]), .corps a, .corps--serre a, .mention a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--explorer-survol); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--explorer);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

img { max-width: 100%; display: block; }

/* Lien d'évitement — premier élément focalisable de chaque page. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s) var(--m);
  background: var(--explorer-plein);
  color: var(--explorer-sur);
  font-weight: 700;
  border-radius: 0 0 var(--r-s) 0;
}
.evitement:focus { left: 0; }

/* ── Typographie ────────────────────────────────────────────────────────── */

.sur-titre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sur-titre);
  margin: 0;
}

.titre-ecran,
.titre-section,
.titre-carte {
  font-family: var(--titre);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.titre-ecran   { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.02em; }
.titre-section { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.15; letter-spacing: -.015em; }
.titre-carte   { font-size: 22px; line-height: 1.2; }

.corps {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texte-doux);
  max-width: 50ch;
  text-wrap: pretty;
}
.corps--serre { font-size: 14.5px; line-height: 1.65; color: var(--texte-doux); max-width: 46ch; }
.mention { font-size: 12.5px; line-height: 1.6; color: var(--texte-doux); }

/* Les chiffres passent TOUJOURS par le mono : c'est une règle du thème. */
.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Mise en page ───────────────────────────────────────────────────────── */

.conteneur { max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--gouttiere); }
.conteneur--etroit { max-width: 1080px; }
.conteneur--centre { max-width: 640px; }

.section { padding: var(--2xl) 0; }
.section--alt { background: var(--fond-alt); border-block: 1px solid var(--trait-section); }
.section--trait-haut { border-top: 1px solid var(--trait-section); }
.section--trait-bas  { border-bottom: 1px solid var(--trait-section); }

/* Une seule mécanique de grille dans tout le projet. */
.grille { display: grid; gap: var(--m); }
.grille--stats    { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 26px; }
.grille--etapes   { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grille--personas { grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.grille--forfaits { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 18px; align-items: start; }
.grille--duo      { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grille--mixte    { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--xl); }

/* ── Blocs de mise en page des pages publiques ──────────────────────────── */

.actions { display: flex; gap: var(--s); flex-wrap: wrap; }
.actions--centre { justify-content: center; }

.accentue { font-style: italic; color: var(--marque); }
.fort { color: var(--texte); font-weight: 600; }

.entete-section {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}

.entete__droite { margin-left: auto; display: flex; align-items: center; gap: var(--s); }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-haute);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  color: var(--texte-doux);
}

.pied {
  border-top: 1px solid var(--trait-section);
  padding: var(--gouttiere);
  display: flex; gap: var(--m); flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  color: var(--texte-doux);
}
.pied__liens { display: flex; gap: var(--m); }

/* Héros — le débord de la carte sur la photo est intentionnel. */
.heros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--xl);
  align-items: end;
  padding-top: 64px;
}
.heros__texte { padding-bottom: 64px; }
.heros__visuel { position: relative; align-self: stretch; min-height: 440px; }
.heros__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heros__carte { position: absolute; left: -22px; bottom: 44px; width: min(310px, 82%); }
.heros__chiffres { display: flex; gap: 22px; flex-wrap: wrap; }

/* Mosaïque — les décalages font le cachet, ils ne sont pas un défaut. */
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mosaique__case { height: 200px; border-radius: var(--r-l); overflow: hidden; }
.mosaique__case img { width: 100%; height: 100%; object-fit: cover; }

.etiquette-forfait {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marque);
}

/* Glyphe des écrans de service */
.glyphe {
  width: 60px; height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px;
}
.glyphe--sourd  { background: var(--surface); border: 1px solid var(--trait-carte); color: var(--texte-doux); }
.glyphe--alerte { background: var(--alerte-voile); border: 1px solid var(--alerte); color: var(--alerte); }
.glyphe--succes { background: var(--succes-voile); border: 1px solid var(--succes-trait); color: var(--succes); }

/* ── Points de rupture ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* La carte du héros cesse de déborder : sous la photo, pas dessus. */
  .heros__carte { position: static; width: auto; margin-top: -32px; }
  .heros__visuel { min-height: 300px; }
  .heros__photo { position: static; height: 300px; }
  .heros__texte { padding-bottom: var(--l); }
  /* Les décalages de la mosaïque n'ont plus de sens en colonne étroite. */
  .mosaique__case { margin-top: 0 !important; }
}

@media (max-width: 639px) {
  .entete-section { display: block; }
  .entete-section > * + * { margin-top: var(--m); }
  .pied { flex-direction: column; gap: var(--s); }
}