/* ==========================================================================
   Hero accueil fusionné - 2026-09-24
   À charger APRÈS bundle.min.css (plusieurs règles neutralisent le bundle à
   specificité égale : c'est l'ordre de chargement qui tranche).
   ========================================================================== */

.home-hero {
  /* Le bundle cale le contenu en haut (align-items: flex-start). Ici on veut
     que .hero-content occupe toute la hauteur pour pouvoir pousser la bande
     de chiffres contre le bord bas. */
  align-items: stretch;
}

/* Décision client 2026-09-24 : le hero occupe EXACTEMENT la hauteur visible,
   nav fixe comprise, sur tous les appareils. Leçon : le `min-height: 100dvh`
   du bundle laissait le contenu pousser le hero au-delà de l'écran et
   coupait les chiffres du bas (754 px sur un portable de 657). La hauteur
   est donc fixée, et c'est le contenu qui se compacte (tailles pilotées par
   svh), jamais le hero qui s'allonge.
   --home-hero-nav : bas de la nav fixe (15 + 70 px desktop, 77 px mobile). */
.home-hero.hero {
  --home-hero-nav: 88px;
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-top: calc(var(--home-hero-nav) + clamp(4px, 1.6svh, 18px));
  padding-bottom: clamp(10px, 2.6svh, 30px);
}

.home-hero .hero-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1280px;
  min-height: 0;
  text-align: left;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* Fil d'Ariane des pages Dépannage : rendu dans le hero, sous la nav
   ($breadcrumb_in_hero). On annule le décalage `top` et les marges pensés
   pour sa position au-dessus du hero. */
.home-hero .breadcrumb-nav {
  position: static;
  top: auto;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(4px, 1.4svh, 14px);
  padding: 0;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Scrim complémentaire : le radial du bundle éclaircit les bords, or la
   colonne texte est désormais à gauche. On assombrit ce flanc. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(5, 5, 5, 0.8) 0%,
    rgba(5, 5, 5, 0.45) 34%,
    rgba(5, 5, 5, 0) 62%
  );
}

/* --------------------------------------------------------------- grille -- */

.home-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
}

.home-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ----------------------------------------------------------- typographie -- */

.home-hero .hero-badge {
  margin-bottom: clamp(0.4rem, 1.6svh, 1.25rem);
}

/* Le bundle monte jusqu'à 3rem : « MONTPELLIER & MÉTROPOLE » passait alors
   sur trois lignes dans la colonne 7/12 et laissait « MÉTROPOLE » orpheline. */
.home-hero .hero-title {
  font-size: clamp(1.5rem, min(5vw, 5.4svh), 2.75rem);
  margin-bottom: clamp(0.4rem, 1.4svh, 1rem);
}

.home-hero__promise {
  font-size: clamp(1.05rem, min(2.4vw, 3.1svh), 1.75rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: clamp(0.4rem, 1.4svh, 0.9rem);
  letter-spacing: 0;
}

.home-hero__pitch {
  font-size: clamp(0.95rem, min(1.4vw, 2.3svh), 1.1rem);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: clamp(0.6rem, 2.2svh, 1.6rem);
  max-width: 34em;
}

/* Horaires insécables (« 13h-19h ») : l'utilitaire .text-nowrap de
   Bootstrap a été purgé du bundle, il est redéfini ici pour le hero. */
.home-hero__pitch .text-nowrap {
  white-space: nowrap;
}

.home-hero__pitch strong {
  color: var(--text-primary);
}

/* --------------------------------------------------------------- actions -- */

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  width: 100%;
}

/* Les boutons du bundle portent `margin: 20px 10px` : inutile ici, le gap
   de la rangée suffit et la marge cassait l'alignement à gauche. */
.home-hero__actions .btn {
  margin: 0;
}

.home-hero__reassurance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: clamp(0.4rem, 1.5svh, 1rem) 0 0;
}

.home-hero__reassurance i {
  color: var(--accent-cyan);
}

/* ------------------------------------------------------------ note avis -- */

.home-hero__rating {
  margin-top: clamp(0.4rem, 1.5svh, 1.1rem);
}

.home-hero__rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.home-hero__rating-value {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- photo -- */

.home-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-hero__portrait {
  position: relative;
  margin: 0;
  width: min(52vw, 220px);
  aspect-ratio: 4 / 5;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.45);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.home-hero__portrait picture {
  display: contents;
}

.home-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.home-hero__availability {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: -1rem 0 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-hero__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  /* Leçon : #4ade80 en dur dupliquait --accent-green (bundle.css) - un seul
     jeton de couleur pour la teinte "disponible", plus facile à retoucher. */
  background: var(--accent-green);
  box-shadow: 0 0 10px var(--accent-green);
  flex-shrink: 0;
}

/* ------------------------------------------------------ bande de chiffres -- */

/* .stats-card-container sert de crochet à assets/js/stats.js. Les styles de
   assets/css/stats.css ne sont PAS chargés sur l'accueil (la section
   stats-depannage est retirée) : tout est redéfini ici, avec une specificité
   supérieure au cas où la feuille reviendrait. */
.home-hero__stats.stats-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  flex-shrink: 0;
  margin-top: clamp(0.75rem, 2.5svh, 2.5rem);
  padding: clamp(0.6rem, 2.2svh, 2rem) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-hero__stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.15rem;
  padding: 0;
  text-align: left;
}

.home-hero__stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, min(4vw, 5.6svh), 3.2rem);
  line-height: 1.05;
  color: var(--text-primary);
}

/* Neutralise le dégradé clippé de assets/css/stats.css si la feuille est
   encore chargée par une autre section de la page. */
.home-hero__stats .stat-number,
.home-hero__stat-unit {
  color: inherit;
  font: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.home-hero__stats .stat-label {
  font-family: "Archivo", sans-serif;
  font-size: clamp(0.85rem, 1.9svh, 1rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.2px;
  text-transform: none;
}

/* Séparateurs fins entre les colonnes (jamais avant la 1re de chaque rangée) */
.home-hero__stats .stat-item + .stat-item {
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.home-hero__stats .stat-item:nth-child(3) {
  border-left: 0;
  padding-left: 0;
}

/* ------------------------------------------------------------ particules -- */

/* Décision client : les particules n'appartiennent qu'à l'écran d'entrée.
   `is-past-hero` est posée par assets/js/pages/home.js. Même specificité que
   `#particles-canvas.is-ready` du bundle : cette feuille doit être chargée
   après bundle.min.css pour gagner. */
#particles-canvas {
  transition: opacity 0.6s ease-in-out;
}

:root.is-past-hero #particles-canvas {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #particles-canvas {
    transition: none;
  }
}

/* ============================================================ tablette ==== */

@media (min-width: 768px) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  /* Photo bornée par la hauteur disponible (écran - nav - chiffres). */
  .home-hero__portrait {
    width: min(30vw, 260px, calc((100svh - 330px) * 0.8));
  }

  /* Le vide restant sous le hero 100vh se répartit moitié au-dessus du
     contenu, moitié au-dessus de la bande (qui porte déjà margin-top: auto).
     Sans cela tout le blanc s'accumulait d'un seul côté. */
  .home-hero__grid {
    margin-top: auto;
    min-height: 0;
  }

  /* La bande s'appuie sur le bord bas du hero (100vh) plutôt que de flotter
     au milieu avec 200px de vide en dessous. */
  .home-hero__stats.stats-card-container {
    grid-template-columns: repeat(4, 1fr);
    margin-top: auto;
  }

  .home-hero__stats .stat-item:nth-child(3) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: clamp(1rem, 3vw, 2rem);
  }
}

/* ============================================================= desktop ==== */

@media (min-width: 992px) {
  .home-hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    flex: 1;
  }

  /* Largeur calée sur la photo : le repère « Disponible aujourd'hui » peut
     alors s'accrocher au coin bas gauche du cadre et non au milieu du vide. */
  .home-hero__media {
    width: fit-content;
    margin-left: auto;
    /* Grid-break : le cadre descend sur le filet de la bande de chiffres,
       sans jamais couvrir un nombre (il retombe dans le padding haut). */
    align-self: end;
    margin-bottom: -1.25rem;
    z-index: 2;
  }

  .home-hero__portrait {
    width: min(25vw, 345px, calc((100svh - 300px) * 0.8));
    transform: rotate(1.5deg);
  }

  .home-hero__availability {
    position: absolute;
    left: -1.75rem;
    bottom: 1.75rem;
    margin: 0;
  }

  /* Pousse la bande contre le bord bas du hero. */
  .home-hero__stats.stats-card-container {
    margin-top: auto;
  }
}

/* ============================================================== mobile ==== */

@media (max-width: 767.98px) {
  /* Le bloc `@media (max-width: 767px)` du bundle empile des `!important`
     (padding du hero, marges du badge, du titre, du sous-titre et de .lead).
     Pensé pour l'ancien hero centré d'une seule colonne, il étire ici la page
     de ~200px et repousse le bouton d'appel sous la ligne de flottaison.
     D'où les `!important` ci-dessous : seule façon de reprendre la main sans
     éditer bundle.css, réservé à un autre chantier. */
  .home-hero.hero {
    --home-hero-nav: 78px;
    padding-top: calc(var(--home-hero-nav) + clamp(2px, 1svh, 10px)) !important;
    padding-bottom: clamp(8px, 2svh, 20px) !important;
    /* Le bundle passe le hero mobile en colonne `space-evenly` : le bloc
       de contenu flottait au milieu et le fil d'Ariane avec lui. */
    justify-content: flex-start !important;
  }

  .home-hero .hero-content {
    flex: 1 1 auto;
  }

  /* Décision client : sur smartphone le hero tient en un écran (360x640).
     Masqués en CSS seulement, le texte reste dans le HTML pour le SEO :
     la ligne « Jérémy, administrateur... », la réassurance sous les
     boutons et les 4 chiffres. */
  .home-hero .home-hero__pitch,
  .home-hero .home-hero__reassurance,
  .home-hero .home-hero__stats.stats-card-container {
    display: none;
  }

  .home-hero .hero-content {
    text-align: left;
  }

  /* Photo au-dessus du badge : le visage rassure avant le discours. */
  /* Le contenu restant se centre dans la hauteur de l'écran. */
  .home-hero__grid {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: clamp(0.4rem, 1.6svh, 0.85rem);
  }

  .home-hero__media {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  /* Plan rapproché carré : le visage doit rester lisible à 124px. */
  /* La photo garde sa taille des petits écrans (360x640, 390x664 : rendu
     inchangé) et ne grandit que si la hauteur libre dépasse ce qu'elle
     occupe déjà : max(taille actuelle, 100svh - 600px), bornée à 60vw et
     260 px. Sur 390x844 elle passe ainsi de 124 à 234 px. */
  .home-hero__portrait {
    width: max(min(32vw, 124px, 16svh), min(60vw, 260px, calc(100svh - 600px)));
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }

  .home-hero__availability {
    margin: 0;
    flex: 0 0 auto;
  }

  .home-hero .hero-badge {
    margin-top: 0 !important;
    margin-bottom: clamp(0.35rem, 1.4svh, 0.7rem) !important;
  }

  .home-hero .hero-title {
    font-size: clamp(1.45rem, 4.2svh, 1.75rem) !important;
    line-height: 1.15 !important;
    margin-bottom: clamp(0.3rem, 1.2svh, 0.6rem) !important;
  }

  .home-hero__promise {
    font-size: clamp(1rem, 2.8svh, 1.15rem) !important;
    margin-bottom: clamp(0.3rem, 1.2svh, 0.55rem) !important;
  }

  .home-hero .home-hero__pitch {
    font-size: 0.98rem;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
  }

  .home-hero__reassurance,
  .home-hero__rating {
    margin-top: 0.6rem;
  }

  .home-hero__stats.stats-card-container {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    gap: 1rem 1.25rem;
  }

  /* Le bouton d'appel passe en premier et occupe toute la largeur. */
  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.45rem, 1.5svh, 0.7rem);
    margin-top: clamp(0.3rem, 1.2svh, 0.6rem);
  }

  .home-hero__actions .btn {
    width: 100%;
  }

  /* Leçon (revue accueil, 320px) : le libellé "Appeler le 07 44 77 59 64"
     sur bundle.css force `white-space: nowrap` par héritage du bouton, donc
     à 320px le bouton déborde du viewport au lieu de passer sur deux lignes.
     On autorise le retour à la ligne du libellé tout en gardant le numéro
     lui-même insécable (il resterait illisible coupé en plein milieu). */
  .home-hero__call {
    white-space: normal;
    text-align: center;
    padding-inline: clamp(10px, 4vw, 32px);
  }

  .home-hero__call-number {
    white-space: nowrap;
  }
}

/* ========================================================== écrans bas ==== */

/* Portables à faible hauteur (1366x657, 1280x720, 1024x768) : tout reste
   visible, chiffres compris ; seuls les espacements et les boutons se
   resserrent, les tailles de texte suivent déjà svh plus haut. */
@media (min-width: 768px) and (max-height: 820px) {
  .home-hero__actions .btn {
    padding-block: clamp(8px, 1.5svh, 14px);
  }

  .home-hero__rating-pill {
    padding: 0.3rem 0.9rem;
  }

  .home-hero__availability {
    padding: 0.35rem 0.85rem;
  }
}

/* ============================================ smartphone à écran haut ==== */

/* 390x844, 412x915... : le contenu, centré dans la hauteur, laissait ~130 px
   de vide au-dessus de la photo et autant sous la note. Il est aligné en haut
   (sous le fil d'Ariane), la photo grandit (règle ci-dessus) et le reste de
   la place va sous la note. La pastille « Disponible aujourd'hui » se pose
   sur le bas de la photo, comme sur ordinateur : à côté d'une photo de
   234 px elle passerait à la ligne et rallongerait le hero.
   En dessous de 740 px de haut, rien ne change. */
@media (max-width: 767.98px) and (min-height: 740px) {
  /* Grille en column-reverse : flex-end = haut de l'écran. */
  .home-hero__grid {
    justify-content: flex-end;
  }

  .home-hero__media {
    position: relative;
    align-self: flex-start;
  }

  .home-hero__availability {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
  }
}

/* ================================= grands mobiles, pliables, paysage ==== */

/* Passe responsive 2026-09-25. Entre 540 et 767 px de large (Surface Duo,
   écran intérieur des pliables « portefeuille » en portrait : 673x841,
   707x823), la pile mobile laissait la photo collée à gauche, le texte
   centré 130 px plus loin et 200 px de noir sous la note. On passe en deux
   colonnes comme sur tablette : texte à gauche, photo à droite, pastille
   « Disponible » posée sur la photo. Les chiffres reviennent dès que la
   hauteur le permet (jamais coupés : sinon ils restent masqués comme sur
   smartphone), l'accroche « Jérémy... » au-delà de 780 px de haut. */
@media (min-width: 540px) and (max-width: 767.98px) {
  .home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: clamp(1rem, 3.5vw, 1.75rem);
  }

  .home-hero__media {
    position: relative;
    align-self: center;
    flex-direction: column;
  }

  .home-hero__portrait {
    width: min(30vw, 230px, calc((100svh - 400px) * 0.8));
    aspect-ratio: 4 / 5;
  }

  .home-hero__availability {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

@media (min-width: 540px) and (max-width: 767.98px) and (min-height: 700px) {
  .home-hero .home-hero__stats.stats-card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: auto;
    padding-top: clamp(0.6rem, 1.8svh, 1.1rem);
    gap: 0.75rem;
  }

  .home-hero__stats .stat-item + .stat-item,
  .home-hero__stats .stat-item:nth-child(3) {
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .home-hero__stat-value {
    font-size: clamp(1.4rem, 4.2vw, 1.9rem);
  }

  .home-hero__stats .stat-label {
    font-size: 0.875rem;
  }

  .home-hero__grid {
    margin-top: auto;
  }
}

@media (min-width: 540px) and (max-width: 767.98px) and (min-height: 780px) {
  .home-hero .home-hero__pitch {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.75rem !important;
  }
}

/* Écran bas en largeur tablette ou portable (pliable ouvert en paysage
   841x673, Surface Duo double écran 1114x720, iPad 1024x768) : un titre de
   trois lignes poussait les boutons et la note sur la bande de chiffres.
   Même arbitrage que sur smartphone : l'accroche descriptive s'efface la
   première (elle reste dans le HTML), la promesse et le prix restent. */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 760px) {
  .home-hero .home-hero__pitch {
    display: none;
  }
}

/* Smartphone couché (844x390, 932x430, 667x375) : 300 px utiles sous la
   nav. On garde l'essentiel côte à côte : texte + appel à gauche, photo à
   droite. Chiffres, accroche, réassurance et fil d'Ariane masqués (CSS
   seulement), comme dans le hero smartphone portrait. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .home-hero.hero {
    --home-hero-nav: 72px;
    padding-top: calc(var(--home-hero-nav) + 4px) !important;
    padding-bottom: 8px !important;
  }

  .home-hero .breadcrumb-nav,
  .home-hero .home-hero__pitch,
  .home-hero .home-hero__reassurance,
  .home-hero .home-hero__stats.stats-card-container {
    display: none;
  }

  .home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    gap: clamp(1rem, 3vw, 2rem);
  }

  .home-hero__media {
    position: relative;
    flex-direction: column;
    align-self: center;
    margin: 0;
  }

  .home-hero__portrait {
    width: calc((100svh - 110px) * 0.8);
    aspect-ratio: 4 / 5;
    transform: none;
  }

  .home-hero__availability {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
  }

  .home-hero .hero-badge {
    margin: 0 0 0.4rem !important;
    padding-block: 0.3rem;
  }

  .home-hero .hero-title {
    font-size: clamp(1.25rem, 6.2svh, 1.75rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 0.35rem !important;
  }

  .home-hero__promise {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .home-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0;
  }

  .home-hero__actions .btn {
    width: auto;
    padding-block: 10px;
  }

  .home-hero__rating {
    margin-top: 0.5rem;
  }

  .home-hero__rating-pill {
    padding: 0.25rem 0.8rem;
  }
}

/* Écran externe des Galaxy Z Fold 1-4 (280 px) : photo (90 px) et pastille
   « Disponible aujourd'hui » (200 px) ne tiennent pas côte à côte dans
   248 px ; la pastille était rognée par le hero. Elle passe sur deux
   lignes plutôt que sous la photo (le hero doit tenir en un écran). */
@media (max-width: 359.98px) {
  .home-hero__media {
    min-width: 0;
  }

  .home-hero__availability {
    flex: 0 1 auto;
    min-width: 0;
    border-radius: 1rem;
    line-height: 1.25;
  }
}

/* 280x653 (Z Fold fermé), pages à fil d'Ariane : le contenu dépassait de
   14 px et la pastille remontait sur le fil d'Ariane. Photo 76 px. */
@media (max-width: 359.98px) {
  .home-hero__portrait {
    width: min(27vw, 16svh);
  }
}

/* QHD (>= 2200 px) : suit l'élargissement des conteneurs du bundle. */
@media (min-width: 2200px) {
  .home-hero .hero-content {
    max-width: 1440px;
  }

  .home-hero .hero-title {
    font-size: clamp(1.5rem, min(5vw, 5.4svh), 3.3rem);
  }

  .home-hero__portrait {
    width: min(25vw, 440px, calc((100svh - 300px) * 0.8));
  }
}