/* ═══════════ HERO — deuxième passe ═══════════
   Quatre corrections demandées :
   1. le cerveau n'est plus coupé ;
   2. l'écart entre le titre et la parole redevient généreux ;
   3. « Travaillons votre » grandit et change de couleur ;
   4. cinq couleurs entrent dans le premier écran par la bande « en pratique »,
      qui remonte dans le hero et devient interactive. */

/* ═══════════ ÉQUILIBRE ═══════════
   Le hero se règle sur les DEUX dimensions de l'écran, pas seulement la largeur.
   1. Le titre n'a plus de taille plafond en rem : il remplit sa ligne à toutes
      les largeurs, et c'est la HAUTEUR disponible qui l'arrête (34vh).
   2. Le réseau est borné par la hauteur : il ne peut plus faire grandir le hero
      au-delà de l'écran sur un grand moniteur.
   3. La deuxième rangée ne s'étire plus (auto au lieu de 1fr) : le trou vertical
      entre le titre et la parole devient un écart réglé, pas un reste. */

body[data-page="accueil"] .fit .event-word {
  font-size: max(48px, min(100cqi / (var(--chars, 8) * .78), 34vh));
}

@media (min-width: 1101px) {
  body[data-page="accueil"] .hero {
    grid-template-rows: auto auto;
    row-gap: clamp(16px, 2.6vh, 44px);
    align-content: safe center;
    padding-top: clamp(18px, 3vh, 44px);
    padding-bottom: clamp(20px, 3vh, 44px);
  }
  body[data-page="accueil"] .hero__titre { margin-right: calc(-1 * var(--gap) - min(3vw, 44px)); }
  body[data-page="accueil"] .hero__dire { padding-top: 0; align-self: center; }
  /* Le réseau devient le contrepoids de la parole : même hauteur qu'elle. */
  body[data-page="accueil"] .fond {
    align-self: stretch; justify-self: end; display: flex; width: auto;
    margin-right: calc(-1 * var(--gap) - min(4vw, 48px));
  }
  body[data-page="accueil"] .fond svg { height: 100%; width: auto; max-width: 100%; margin-left: auto; }
}

/* ── 1. Le cerveau entier ── */
body[data-page="accueil"] .fond { margin-right: 0; }

/* ── 2. L'écart ── */
@media (min-width: 1101px) {
  body[data-page="accueil"] .hero {
    grid-template-rows: auto auto auto;
    row-gap: clamp(26px, 4.6vh, 72px);
    padding-top: clamp(16px, 2.4vh, 36px);
    padding-bottom: clamp(18px, 2.4vh, 36px);
  }
  body[data-page="accueil"] .bande { grid-column: 1 / -1; }
}

/* ── 3. L'accroche manuscrite ── */
body[data-page="accueil"] .hero__kicker {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 3.25rem);
  color: var(--accroche, var(--vf-rose));
  margin-bottom: clamp(6px, 1vh, 18px);
}

/* ── 4. La bande « en pratique », dans le hero ── */
body[data-page="accueil"] .bande { margin: 0; padding: 0; border: 0; }
body[data-page="accueil"] .bande .etiq { margin: 0 0 clamp(8px, 1.2vh, 14px); }
.bande__l {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(7px, .7vw, 13px); margin: 0;
}
.jeton {
  position: relative; overflow: hidden; border-radius: 14px;
  padding: clamp(11px, 1.3vh, 17px) clamp(12px, 1vw, 18px);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--j) 30%, transparent) 0%,
      color-mix(in srgb, var(--j) 9%, transparent) 68%,
      transparent 100%),
    color-mix(in srgb, var(--vf-nuit) 78%, var(--vf-violet-deep));
  border: 1px solid color-mix(in srgb, var(--j) 34%, transparent);
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.jeton::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--j);
  transform: scaleY(.34); transform-origin: 0 0;
  transition: transform .45s var(--ease-out);
}
.jeton dt {
  display: inline-flex; align-items: center;
  padding: 5px 10px 4px; border-radius: 999px;
  font: 700 .6875rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--vf-nuit); background: var(--j);
}
.jeton dd {
  margin: 7px 0 0; font: 500 clamp(1rem, .94rem + .22vw, 1.1875rem)/1.3 var(--font-text);
  color: var(--vf-lin);
}
.jeton .avalider {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font: 700 .625rem/1.5 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--vf-nuit); background: var(--vf-rose); vertical-align: 2px;
}
html.motion .jeton:hover, html.motion .jeton:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--j) 58%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--vf-violet-deep) 70%, transparent);
}
html.motion .jeton:hover::before, html.motion .jeton:focus-within::before { transform: scaleY(1); }

@media (max-width: 1100px) {
  .bande__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jeton:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bande__l { grid-template-columns: minmax(0, 1fr); }
}

/* ── Le réseau réagit : halo coloré autour de la main, grappe allumée au survol d'un jeton ── */
.reseau__pt { transition: filter .3s; }
.reseau__halo { opacity: 0; pointer-events: none;
                transition: opacity .5s var(--ease-out); }
.reseau__halo.on { opacity: .85; }

/* L'onde envoyée par « Me contacter » */
@keyframes onde {
  0%   { stroke: color-mix(in srgb, var(--vf-lin) 22%, transparent); stroke-width: .26; }
  35%  { stroke: var(--vf-rose); stroke-width: .62; }
  100% { stroke: color-mix(in srgb, var(--vf-lin) 22%, transparent); stroke-width: .26; }
}
html.motion .fond.onde .reseau__lien {
  animation: onde .85s ease-out both;
  animation-delay: calc(var(--i, 0) * 5ms);
}

/* ── Écran bas : la bande doit rester visible sans écraser la parole ── */
@media (min-width: 1101px) and (max-height: 1120px) {
  body[data-page="accueil"] .hero { row-gap: clamp(20px, 3.4vh, 44px); }
  body[data-page="accueil"] .hero__manifest { font-size: min(clamp(1.75rem, 1.1rem + 2.2vw, 4.5rem), 5.4vh); }
  body[data-page="accueil"] .hero__ligne { margin: clamp(9px, 1.3vh, 16px) 0 clamp(13px, 1.9vh, 22px); }
  body[data-page="accueil"] .hero .appel { min-height: 52px; }
  .jeton { padding: 9px 14px; }
  .jeton dd { margin-top: 6px; }
}

/* ── La ligne courte tient en deux lignes : 27 px gagnés sur la hauteur ── */
@media (min-width: 1101px) {
  body[data-page="accueil"] .hero__ligne { max-width: 58ch; }
}

/* ── Les cinq cartes en pleine couleur ── */
.jeton {
  background: linear-gradient(148deg, var(--j) 0%, var(--j2, var(--j)) 100%);
  border-color: transparent;
}
.jeton dt { background: color-mix(in srgb, var(--vf-nuit) 86%, transparent); color: var(--vf-lin); }
.jeton dd { color: var(--vf-nuit); }
.jeton .avalider { background: var(--vf-nuit); color: var(--vf-rose); }
.jeton::before { background: var(--vf-nuit); opacity: .5; }

/* ── Le réseau, plus présent ── */
.reseau__lien { stroke: color-mix(in srgb, var(--vf-lin) 34%, transparent); stroke-width: .34; }
.reseau__pt { r: calc(var(--r) * 1.4); }

/* ── Le halo coloré au survol d'une carte ── */
.reseau__halo { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-out); }
.reseau__halo.on { opacity: .85; }

/* ── L'onde envoyée par « Me contacter » ── */
@keyframes onde {
  0%   { stroke: color-mix(in srgb, var(--vf-lin) 34%, transparent); stroke-width: .34; }
  35%  { stroke: var(--vf-rose); stroke-width: .68; }
  100% { stroke: color-mix(in srgb, var(--vf-lin) 34%, transparent); stroke-width: .34; }
}
html.motion .fond.onde .reseau__lien { animation: onde .85s ease-out both; animation-delay: calc(var(--i, 0) * 5ms); }

/* ── La ligne courte tient en deux lignes sur grand écran ── */
@media (min-width: 1101px) { body[data-page="accueil"] .hero__ligne { max-width: 58ch; } }
@media (min-width: 1500px) {
  body[data-page="accueil"] .hero__ligne { font-size: clamp(1.125rem, .78rem + .55vw, 1.375rem); max-width: 42ch; }
}
body[data-page="accueil"] .hero__manifest { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 4.5rem); }

/* ── Écran bas : la bande reste visible sans écraser la parole ── */
@media (min-width: 1101px) and (max-height: 1120px) {
  body[data-page="accueil"] .hero { row-gap: clamp(20px, 3.4vh, 44px); }
  body[data-page="accueil"] .hero__manifest { font-size: min(clamp(1.75rem, 1.1rem + 2.2vw, 4.5rem), 5.4vh); }
  body[data-page="accueil"] .hero__ligne { margin: clamp(9px, 1.3vh, 16px) 0 clamp(13px, 1.9vh, 22px); }
  body[data-page="accueil"] .hero .appel { min-height: 52px; }
  .jeton { padding: 9px 14px; }
  .jeton dd { margin-top: 6px; }
}