/* =====================================================================
   PAGE SEUIL — choix Belgique / France
   =====================================================================

   POURQUOI UNE FEUILLE À PART
   `styles.css` sert les trois pages. Repeindre ses règles en sombre aurait
   emporté Belgique et France, qui restent claires. Tout est donc scopé sous
   `.page-home`, chargé après `styles.css` : les jetons de marque restent
   partagés, seule la peau du seuil change.

   FOND CLAIR
   La page reprend le blanc cassé `--color-paper` des pages Belgique et France :
   franchir le seuil ne doit pas être une rupture visuelle. Les cartes se
   détachent par `--color-card`, un cran plus clair, et non plus par contraste
   avec un fond noir.
   ===================================================================== */

.page-home {
  background: var(--color-paper);
  color: var(--color-ink);
}

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */

.page-home .nav {
  background: rgba(18, 18, 21, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Le mot « Odihome » cède la place au sigle. Hauteur fixe, largeur déduite du
   viewBox (3186,6 × 1197,5, rapport 2,66) : le SVG ne se déforme jamais et le
   lien garde une cible cliquable de la taille du dessin. */
.page-home .nav__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.page-home .nav__logo img {
  height: 38px;
  width: auto;
  display: block;
}

/* La barre du haut ne suit plus la largeur du contenu : logo et bouton se
   calent près des bords de l'écran. `.nav__inner` porte aussi la classe
   `container` (max-width 1080) — il faut donc la neutraliser explicitement. */
.page-home .nav__inner {
  max-width: none;
  padding-inline: clamp(18px, 3vw, 44px);
  /* `space-between` répartissait trois blocs de largeurs inégales : le groupe
     du milieu se retrouvait décalé de 60 px vers la gauche. Une grille en
     `1fr auto 1fr` le cale sur l'axe réel de la page. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.page-home .nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* Bouton contour : « Accès Dashboard web » reste le bouton plein, celui-ci
   passe en simple filet vert. Deux pleins côte à côte se disputaient
   l'attention alors qu'un seul mène au produit web.
   Le vert va au trait et au texte — sur fond clair il conserve son contraste,
   ce qui n'était pas le cas d'un texte blanc posé sur #00B894 (2,54:1).
   Deux classes dans le sélecteur, sinon `.page-home .btn-primary-pill`, écrit
   plus bas dans le fichier, reposerait le bleu par-dessus. */
.page-home .btn-primary-pill.nav__cta--app {
  background: transparent;
  border: 1.5px solid var(--color-sage);
  color: var(--color-sage);
  box-shadow: none;
}

.page-home .btn-primary-pill.nav__cta--app:hover {
  /* Même vert qu'au repos, sur décision explicite. À noter : texte blanc sur
     #00B894 donne 2,54:1, sous le seuil de 3:1 des textes gras. */
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: #fff;
  filter: none;
}

/* Chapeau et mention de choix groupés au centre de la barre, dans EXACTEMENT
   la même typographie : même police, même corps, même couleur. Ils se lisent
   comme deux fragments d'une seule ligne.

   Pourquoi du texte nu plutôt que deux capsules : le bouton « Accès Dashboard
   web » est déjà une capsule, et c'est la seule action de la page. Trois
   pastilles alignées la banaliseraient. Le point vert suffit à signaler la
   nature du produit. */
.page-home .nav__center {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.page-home .nav__center .eyebrow,
.page-home .nav__lang {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #c9ccd2;
  white-space: nowrap;
}

.page-home .nav__center .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Trait de séparation, plus discret qu'une puce ou qu'un tiret. */
.page-home .nav__center .eyebrow::after {
  content: "";
  width: 1px;
  height: 13px;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.2);
}

/* Le PNG est cerné d'une large zone transparente : le recadrage optique se
   fait en marges négatives, sinon le logo paraît minuscule et flotte trop
   loin du titre. */
.page-home .hero-logo {
  display: block;
  width: 150px;
  height: auto;
  /* Le sigle est centré dans son PNG carré : centrer la balise centre donc
     le dessin. Les marges verticales restent négatives pour rattraper la
     zone transparente au-dessus et en dessous. */
  margin: -22px auto -14px;
}

.page-home .btn-primary-pill {
  background: var(--color-blue);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 24px -10px rgba(0, 126, 255, 0.9);
}

.page-home .btn-primary-pill:hover {
  filter: brightness(1.08);
}

/* Pastille du chapeau, dans la barre du haut. */
.page-home .eyebrow__dot {
  background: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.16);
}

/* ------------------------------------------------------------------ */
/* Bandeau — identité et promesse                                      */
/* ------------------------------------------------------------------ */

.page-home .threshold-hero {
  position: relative;
  overflow: hidden;              /* les capsules débordent : on les coupe net */
  background: var(--color-card);
  padding: clamp(14px, 1.8vw, 24px) var(--space-3) clamp(20px, 2.8vw, 36px);
}

/* La bande de capsules traverse tout le fichier d'un coin à l'autre (1839×1444,
   coins transparents). On la cale donc sur la HAUTEUR de la section et on
   laisse le cadrage rogner la droite : elle occupe toute la hauteur quelle que
   soit celle du bandeau, sans jamais s'étirer.
   `aria-hidden` + `alt=""` côté HTML — c'est un décor, pas une information. */
.page-home .threshold-hero__deco {
  position: absolute;
  left: clamp(-190px, -9vw, -60px);
  /* Remontée : le dessin démarre au-dessus du bandeau, la section le coupe en
     haut comme en bas. Ça dégage la zone du logo, qu'il commençait à toucher. */
  top: -14%;
  /* La largeur DÉCOULE de la hauteur, au rapport exact du fichier
     (2206 / 1608). Une largeur en `%` la rendait indépendante de la hauteur :
     en rétrécissant l'écran, la boîte devenait proportionnellement plus haute
     que le dessin et `cover` se mettait à couper la DROITE — mesuré, 50 px à
     900 px d'écran. Ici le rapport ne change jamais, donc les côtés non plus.

     `height: 116%` : la hauteur dépasse volontairement le bandeau. C'est ce qui
     agrandit le dessin, et le débordement tombe en bas, où la diagonale sort
     naturellement du cadre — `overflow: hidden` sur la section le coupe. */
  height: 148%;
  aspect-ratio: 2206 / 1608;
  width: auto;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  user-select: none;
}

.page-home .threshold-hero__inner {
  position: relative;            /* passe au-dessus du décor */
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.page-home .threshold-hero__logo {
  display: block;
  width: clamp(120px, 13vw, 168px);
  height: auto;
  /* Le PNG est cerné de transparence : marges négatives pour le rapprocher. */
  margin: -18px auto -12px;
}

/* Titre + vague audio sur une même ligne : la marge basse qui séparait le
   titre du sous-titre est portée par la rangée, pas par le titre seul. */
.page-home .threshold-hero__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 14px);
  margin: 0 0 12px;
}

.page-home .threshold-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

/* Vague animée, réutilisée du bloc « Mode dictaphone » de la page Belgique
   (mêmes barres, même animation `feat-pin-wave` — définie une fois dans
   styles.css, chargée sur les trois pages). Recolorée dans le gris du
   sous-titre plutôt que le bleu d'origine : ici elle accompagne le titre,
   elle ne doit pas rivaliser avec lui. */
.page-home .threshold-hero__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: clamp(20px, 2.6vw, 30px);
  flex: 0 0 auto;
}

.page-home .threshold-hero__wave span {
  width: 4px;
  border-radius: 2px;
  background: var(--color-ink-soft);
  animation: feat-pin-wave 1.1s ease-in-out infinite;
}

.page-home .threshold-hero__wave span:nth-child(1) { height: 40%; animation-delay: 0ms; }
.page-home .threshold-hero__wave span:nth-child(2) { height: 70%; animation-delay: 120ms; }
.page-home .threshold-hero__wave span:nth-child(3) { height: 100%; animation-delay: 240ms; }
.page-home .threshold-hero__wave span:nth-child(4) { height: 60%; animation-delay: 360ms; }
.page-home .threshold-hero__wave span:nth-child(5) { height: 35%; animation-delay: 480ms; }

.page-home .threshold-hero__subtitle {
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 46ch;
  margin: 0 auto;
}

/* Preuve terrain en capsule, calée en haut à droite du bandeau. Sortie du flux
   pour ne pas allonger le bloc central ; `nowrap` la garde sur une ligne, ce
   qui est la condition pour qu'une capsule reste une capsule. */
.page-home .threshold-hero__proof {
  position: absolute;
  top: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2.4vw, 34px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 15px 7px 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  font-size: 0.76rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-ink-soft);
}

.page-home .threshold-hero__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--color-sage);
  color: #05221c;
  font-size: 0.68rem;
}

/* ------------------------------------------------------------------ */
/* Les deux marchés                                                    */
/* ------------------------------------------------------------------ */

.page-home .markets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;                      /* filet de séparation, pas une gouttière */
  background: var(--color-line);
}

/* Hauteur PROPORTIONNELLE à la largeur, avec un plancher : sur un écran large
   les panneaux respirent, sur un écran court ils ne s'écrasent pas au point
   de rendre le texte illisible. */
.page-home .market {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(380px, 34vw, 520px);
  padding: clamp(26px, 3.2vw, 44px) clamp(20px, 3vw, 40px) 0;
  text-align: center;
}

/* Dégradés RADIAUX, dans la même famille de teinte : la variante claire au
   foyer, la couleur de référence en périphérie. Le foyer est au CENTRE du
   panneau : la lumière vient du milieu et se dissipe vers les quatre bords.
   `ellipse` et non `circle` : sur une boîte presque deux fois plus large que
   haute, un cercle laisserait les angles hors dégradé. */
.page-home .market--be {
  background: radial-gradient(ellipse 82% 72% at 50% 50%, #2c2c32 0%, #000 72%);
  color: #f5f5f7;
}

/* Même famille que la barre du haut et le pied de page : le panneau France
   prolonge le blanc cassé de la marque au lieu du gris `#F5F5F7` de la
   maquette, qui tirait vers le bleu à côté du reste. `--color-card` est la
   variante claire du même jeton, d'où un dégradé qui reste dans la teinte. */
.page-home .market--fr {
  background: radial-gradient(ellipse 82% 72% at 50% 50%, #ffffff 0%, #ddd7c8 72%);
  color: var(--color-ink);
}

.page-home .market__text {
  position: relative;
  z-index: 1;
}

/* La largeur de lecture ne borne QUE le texte : posée sur le bloc entier, elle
   contraignait aussi la rangée de boutons, qui repassait à la ligne. */
.page-home .market__title,
.page-home .market__subtitle {
  max-width: 36ch;
  margin-inline: auto;
}

.page-home .market__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 10px;
}

.page-home .market__subtitle {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  margin: 0 auto 22px;
}

.page-home .market--be .market__subtitle {
  color: #c9ccd2;
}

.page-home .market--fr .market__subtitle {
  color: var(--color-ink-soft);
}

.page-home .market__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.page-home .market__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-signature),
    color var(--duration-fast) var(--ease-signature),
    transform var(--duration-fast) var(--ease-signature);
}

.page-home .market__btn:hover {
  transform: translateY(-1px);
}

.page-home .market__btn--primary {
  position: relative;
  z-index: 0;   /* cale la pile pour que le halo (z-index:-1) reste DERRIÈRE
                   le bouton sans passer sous le panneau qui le porte */
  background: var(--color-blue);
  color: #fff;
  /* Rembourrage vertical déplacé sur `.btn-slide` (styles.css) : pour que le
     texte glisse jusqu'aux bords réels du bouton. Non touché sur la classe
     de base `.market__btn` : la mention non cliquable (`--seal`) doit
     garder son padding normal. */
  padding-block: 0;
}

/* Halo dégradé au survol — bleu / mauve / vert, flouté derrière le bouton.
   `content-box`+`inset` négatif : il déborde du bouton de tous les côtés,
   `blur` en fait un nuage plutôt qu'un contour net. Éteint par défaut
   (opacity:0) pour ne pas alourdir la carte au repos. */
/* `--glow-angle` déclarée comme un ANGLE (pas juste une chaîne) : c'est ce qui
   permet au navigateur d'interpoler sa valeur image par image. Sans ce
   registre, `conic-gradient(from var(--glow-angle) …)` changerait de valeur
   d'un bloc à chaque image plutôt que de tourner en continu. */
@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.page-home .market__btn--primary::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle), #007eff, #8a6bff, #00b894, #007eff);
  filter: blur(18px);
  opacity: 0;
  transition: opacity var(--duration-normal, 0.3s) var(--ease-signature);
  pointer-events: none;
  /* La BOÎTE ne bouge jamais — aucun `transform`. Un halo pilule flouté qui
     tourne en tant qu'objet trahit sa mécanique (le contour, ovale et non
     rond, dessine une ellipse qu'on voit pivoter). Seul l'angle interne du
     dégradé change : les couleurs dérivent l'une dans l'autre, le contour du
     halo, lui, ne bouge pas d'un pixel. En pause à l'arrêt : la reprise au
     survol suivant repart d'où elle s'est arrêtée, pas d'un saut. */
  animation: btn-glow-spin 5s linear infinite;
  animation-play-state: paused;
}

.page-home .market__btn--primary:hover::before,
.page-home .market__btn--primary:focus-visible::before {
  opacity: 0.9;
  animation-play-state: running;
}

@keyframes btn-glow-spin {
  to {
    --glow-angle: 360deg;
  }
}

/* France en vert, Belgique en bleu : chaque panneau porte sa couleur, comme
   le liseré de survol des anciennes cartes. */
.page-home .market--fr .market__btn--primary {
  background: var(--color-sage);
}

/* Mention de confiance à l'allure de bouton — rendue cliquable (même
   destination que « Découvrir ») à la demande explicite, malgré le risque de
   confusion avec le bouton juste à côté. Contour volontairement en teinte
   discrète et non dans le bleu des actions, pour rester visuellement en
   retrait malgré le clic possible. */
.page-home .market__btn--seal {
  border: 1px solid currentColor;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.75;
}

.page-home .market__btn--seal:hover {
  transform: none;               /* annule le léger soulèvement des boutons */
}

.page-home .market--be .market__btn--seal {
  color: #c9ccd2;
}

.page-home .market--fr .market__btn--seal {
  color: var(--color-ink-soft);
}

/* Le téléphone est coupé par le bas du panneau, comme sur la maquette :
   marge négative plutôt que recadrage du fichier. */
.page-home .market__phone {
  width: clamp(270px, 74%, 500px);
  height: auto;
  margin-top: auto;
  /* Descendu : la marge négative augmente, donc le téléphone s'enfonce
     davantage sous le bord du panneau. */
  margin-bottom: clamp(-150px, -11vw, -70px);
  pointer-events: none;
  opacity: 0;
  animation: market-phone-in 900ms var(--btn-slide-ease) 150ms forwards;
}

/* Léger décalage entre les deux téléphones, pour que l'entrée ne soit pas
   parfaitement synchrone. */
.page-home .market--fr .market__phone {
  animation-delay: 300ms;
}

@keyframes market-phone-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .market__phone {
    opacity: 1;
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Pied de page                                                        */
/* ------------------------------------------------------------------ */

/* Pied de page dans la teinte exacte de la barre du haut : les deux extrémités
   de la page se répondent et encadrent les trois blocs. `--color-paper` est la
   couleur que la barre laisse voir sous son voile translucide. */
.page-home .footer {
  background: #121215;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9ccd2;
}

.page-home .footer__logo {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}

.page-home .footer__links a,
.page-home .footer__copyright {
  color: #9a9ea6;
}

.page-home .footer__links a:hover {
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Adaptatif                                                           */
/* ------------------------------------------------------------------ */

/* Le hero occupait 583 px à lui seul. On récupère de la hauteur sur ses marges
   et sur la scène du téléphone, réduite d'un dixième — la marge négative
   rattrape la place que la mise en page lui réservait encore. */
.page-home .hero {
  padding-top: 26px;
  padding-bottom: 16px;
}

.page-home .phone-stage {
  transform: scale(0.9);
  transform-origin: top center;
  margin-bottom: -38px;
}

/* `.waveform-bg` fait 130 % de large en position absolue : elle dépassait à
   TOUTES les largeurs et provoquait un défilement horizontal de 16 à 23 px
   (mesuré à 390, 430, 768 et 1024 px). `clip` la coupe sans créer de conteneur
   de défilement — contrairement à `hidden`, qui aurait forcé un axe vertical
   scrollable et rogné l'animation de flottement du téléphone. */
.page-home .hero {
  overflow-x: clip;
}

/* ------------------------------------------------------------------ */
/* Adaptatif de la barre du haut et du visuel                          */
/* ------------------------------------------------------------------ */

/* Entre 1180 et 1400 px il ne manque que quelques pixels — mesuré : 7 px à
   1280. On les reprend sur les retraits plutôt que de sacrifier le groupe
   central, qui reste lisible à cette taille. */
@media (max-width: 1400px) {
  .page-home .nav__inner {
    padding-inline: 20px;
  }

  .page-home .nav__cta {
    padding-inline: 16px;
    font-size: 0.84rem;
  }

  .page-home .nav__center {
    gap: 12px;
  }
}

/* Le groupe central est en `nowrap` et la grille `1fr auto 1fr` refuse de le
   comprimer : sous 1240 px il poussait les deux boutons hors de l'écran.
   Il est informatif, pas fonctionnel — on le retire, la barre repasse en
   deux blocs aux extrémités. */
@media (max-width: 1240px) {
  .page-home .nav__center {
    display: none;
  }

  .page-home .nav__inner {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 700px) {
  .page-home .nav__cta {
    padding-inline: 14px;
    font-size: 0.8rem;
  }

  .page-home .nav__actions {
    gap: 8px;
  }
}

/* Sous 520 px les deux boutons ne tiennent plus côte à côte. On garde le
   téléchargement de l'app : c'est l'action de cette page, le dashboard
   s'adresse à un utilisateur déjà client, qui le trouvera ailleurs. */
@media (max-width: 520px) {
  .page-home .nav__cta:not(.nav__cta--app) {
    display: none;
  }
}

/* Le visuel fait 140 % de sa colonne. En une seule colonne — sous 820 px —
   cette colonne devient toute la page, et le téléphone atteignait 987 px de
   large. Un plafond en pixels le ramène à une taille tenable. */
/* Deux panneaux côte à côte cessent d'être lisibles quand ils passent sous
   ~330 px : mesuré, 172 px de large à 360 px d'écran. Ils s'empilent donc, et
   leur plancher de hauteur baisse puisqu'ils occupent toute la largeur. */
/* La capsule fait 586 px : entre 1100 et ~1350 px elle mordait sur le logo,
   qui est centré dans un bloc de 720 px. Tant qu'elle est hors du flux, le
   contenu démarre donc sous sa bande. */
@media (min-width: 1101px) {
  .page-home .threshold-hero__inner {
    /* Réservé à la capsule de confiance, qui flotte en haut à droite : sans
       cette bande le logo passait dessous. 72 px la dégageaient tout juste ;
       48 px suffisent et remontent le bloc d'autant. */
    padding-top: 40px;
  }
}

@media (max-width: 1100px) {
  /* Sous 1100px, la capsule n'a plus de place propre : recentrée elle
     poussait le logo, réduire sa marge ne suffisait qu'à moitié. On la
     masque plutôt que de continuer à l'ajuster à chaque palier. */
  .page-home .threshold-hero__proof {
    display: none;
  }
}

@media (max-width: 820px) {
  .page-home .markets {
    grid-template-columns: 1fr;
  }

  .page-home .market {
    min-height: clamp(380px, 92vw, 560px);
  }

  .page-home .market__phone {
    width: clamp(250px, 68%, 430px);
    margin-bottom: clamp(-120px, -14vw, -60px);
  }

  /* Décor MASQUÉ sur mobile. Réduit et estompé, il couvrait encore les deux
     tiers de l'écran derrière le texte, et un aplat translucide lit moins bien
     qu'une absence : le contraste du sous-titre s'en trouvait dégradé sans que
     le dessin soit pour autant lisible. */
  .page-home .threshold-hero__deco {
    display: none;
  }
}

@media (max-width: 820px) {
  .page-home .hero-aside {
    min-height: 340px;
  }

  .page-home .hero-aside__phone {
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 820px) {
  /* Une seule colonne : c'est le point de rupture déjà retenu par
     `styles.css`. Nos règles étant plus spécifiques, il faut le redire ici,
     sinon `auto-fit` garde deux colonnes de 343 px, trop serrées. */
  .page-home .country-select__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  /* La mention de langue devient redondante : le choix des pays est juste en
     dessous, et elle poussait le bouton hors de l'écran à 390 px. */
  .page-home .nav__lang {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Le plancher de 2,6 rem tenait pour un titre court ; ici il débordait.
     Inter Tight reste lisible plus bas, elle perd juste son effet display. */
  .page-home .hero-title {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
    letter-spacing: -0.035em;
  }

  .page-home .country-select__title {
    font-size: 1.25rem;
  }

  .page-home .country-card {
    padding: 20px 20px 22px;
  }

  .page-home .country-card__name {
    font-size: 1.45rem;
  }

  .page-home .country-card__benefit {
    font-size: 0.86rem;
  }
}

/* ------------------------------------------------------------------ */
/* Accessibilité                                                       */
/* ------------------------------------------------------------------ */

.page-home a:focus-visible,
.page-home button:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .country-card {
    transition: none;
  }
  .page-home .country-card:hover {
    transform: none;
  }
  .page-home .market__btn--primary::before {
    animation: none;
  }
}