/*
 * Page d'accueil (planche B2, « L'affiche animée ») : sections Hero, Events, Gather, Share, Keep, Closing.
 * Couleurs, ombres, dégradés et polices viennent des tokens `--jinto-*` (@jinto/design-tokens/tokens.css) : aucune valeur
 * hexadécimale ici. `--white` et `--black` sont les deux seuls neutres hors thème (surfaces blanches des cadres, texte
 * sur marine) ; ils sont posés sur `.home` et ne suivent donc pas le thème sombre des pieds de page.
 */
.home {
  --white: var(--jinto-bg-2);
  --black: var(--jinto-brand-bg);
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
}

.home .container {
  width: 100%;
  max-width: var(--maxw);
  padding: 0 var(--gutter);
}
.home .icon {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex: none;
}
.home img {
  display: block;
  max-width: 100%;
  height: auto;
}
.home picture {
  display: contents;
}

/* En-tête de l'accueil : posé sur le hero, wordmark marine, « Ouvrir l'app » en bouton marine à texte Menthe, aligné sur
   la grille du hero (même largeur et mêmes marges). Sélecteurs doublés : la barre marine de global.css est chargée après
   cette feuille. */
.site-header.site-header--light {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  background: none;
  color: var(--jinto-text-primary);
}
.site-header.site-header--light .container {
  width: 100%;
  max-width: 1200px;
  height: 72px;
  padding: 0 clamp(16px, 4vw, 48px);
  flex-wrap: nowrap;
}
.site-header.site-header--light .wordmark {
  color: var(--jinto-brand-bg);
}
.site-header .btn.btn--navy {
  background: var(--jinto-brand-bg);
  color: var(--jinto-primary);
  box-shadow: var(--jinto-elev-brand-navy);
}

/* ---------- Hero : affiche typographique, laïus, téléphone ---------- */
/* Une grille : à gauche les étiquettes en tête, le laïus puis les boutons ; à droite le téléphone, incliné, de la
     hauteur de toute la colonne gauche dès md (≥ 900 px) ; en dessous, à droite des seuls laïus et boutons, qu'il ne
     recouvre jamais (il peut passer sous la vague). */
.hero {
  position: relative;
  padding: 120px 0 104px;
  background: var(--jinto-bg-1);
  overflow: hidden;
}
.hero .wave {
  z-index: 3;
}
/* Double vague de l'app (HeaderWave de @jinto/ui, BR-393 : houle voilée à 45 % derrière, vague pleine devant, même
     tracé) entre le hero et la section suivante, remplie de son Menthe ; dessin de 24 px étiré, doublé ici en hauteur. */
.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 48px;
  display: block;
  fill: var(--wave-fill);
  pointer-events: none;
}
@media (max-width: 899.98px) {
  .wave {
    height: 32px;
  }
}
@media (forced-colors: active) {
  .wave {
    display: none;
  }
}
/* Chaque section porte la vague de la suivante : son fond monte dans le bas de la précédente. */
.hero {
  --wave-fill: var(--jinto-context-event);
}
.events {
  --wave-fill: var(--jinto-context-org);
}
.s-gather {
  --wave-fill: var(--jinto-bg-2);
}
.s-share {
  --wave-fill: var(--jinto-context-event);
}
.s-keep {
  --wave-fill: var(--jinto-brand-bg);
}
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 56px;
}
.hero .stack,
.hero-pitch,
.hero .btn-group {
  grid-column: 1;
}
.hero .stack {
  grid-row: 1;
}
.hero-pitch {
  grid-row: 2;
  position: relative;
  z-index: 2;
  max-width: 30ch;
  margin: 16px 0 64px;
  font-family: var(--jinto-font-ui);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--jinto-brand-bg);
}
.hero .btn-group {
  grid-row: 3;
  position: relative;
  z-index: 2;
}
.stack {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 10px;
  margin: 0 0 8px;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stack span {
  display: inline-block;
  padding: 0.08em 0.28em 0.14em;
  border-radius: 0.22em;
}
.stack .s1 {
  background: var(--jinto-context-org);
  color: var(--jinto-brand-bg);
  rotate: -2deg;
}
.stack .s2 {
  background: var(--jinto-context-event);
  color: var(--jinto-brand-bg);
  rotate: 1.5deg;
  margin-left: 0.6em;
}
.stack .s3 {
  background: var(--jinto-brand-bg);
  color: var(--jinto-primary);
  rotate: -1deg;
  box-shadow: var(--jinto-elev-brand-navy);
}
.hero-phone {
  display: none;
  position: relative;
  grid-column: 2;
  grid-row: 1 / 4;
}
.hero-phone .phone {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  rotate: 5deg;
}
/* sm (< 900 px) : le téléphone, à droite des étiquettes et de toute la colonne, son bas sous la vague ; laïus et
     boutons lui laissent sa place (largeur bornée). Dimensionné sur la largeur de l'écran (--phone-h), pas sur la
     colonne, dont la hauteur varie avec le retour à la ligne des boutons : l'inclinaison de 7° déborde de 6 % de sa
     hauteur de chaque côté, compensés par right ; --phone-room ≈ largeur occupée par le téléphone incliné. */
@media (max-width: 899.98px) {
  .hero {
    --phone-h: 76vw;
    --phone-room: calc(var(--phone-h) * 0.6 + 16px);
  }
  .hero-pitch,
  .hero .btn-group {
    max-width: calc(100% - var(--phone-room));
  }
  .hero-phone {
    display: block;
    grid-column: 1;
    grid-row: 1 / 4;
    z-index: 0;
  }
  .hero-phone .phone {
    top: 0;
    left: auto;
    right: calc(var(--phone-h) * 0.06);
    height: var(--phone-h);
    width: auto;
    translate: none;
    rotate: 7deg;
  }
}
/* xs (< 600 px) : les étiquettes restent au-dessus ; le laïus dans la moitié gauche, le téléphone dans l'autre,
     dimensionné sur la largeur (l'inclinaison de 7° déborde de 13 % de la largeur de chaque côté, compensés par right). */
@media (max-width: 599.98px) {
  .hero .stack {
    justify-self: center;
  } /* le bloc entier, décalages des étiquettes conservés */
  .hero {
    /* Sous l'en-tête de 72 px, sans la marge du bureau. */
    --phone-room: 48%;
    padding-top: 88px;
    padding-bottom: 56px;
  }
  .hero-pitch {
    align-self: start;
    margin: 12px 0 20px;
    font-size: 1rem;
  }
  /* Les boutons peuvent passer par-dessus le téléphone (pas le laïus) : ils gardent leur largeur. */
  .hero .btn-group {
    max-width: none;
    align-self: end;
  }
  .hero .btn-group,
  .closing .btn-group {
    gap: 10px;
  }
  /* Même taille que « Ouvrir l'app » de l'en-tête, dans le hero comme dans le bandeau de clôture. */
  .hero .btn,
  .closing .btn {
    padding: 0.375rem 1rem;
    font-size: 0.9375rem;
  }
  .hero .btn.btn--tile-violet,
  .hero .btn.btn--tile-mint,
  .closing .btn.btn--tile-violet,
  .closing .btn.btn--tile-mint {
    padding: calc(0.375rem + 2px) calc(1rem + 2px);
  }
  .hero .container {
    container-type: inline-size;
  }
  /* Le hero garde la hauteur du téléphone (son pied seul passe sous la vague), que les boutons ne lui donnent plus. */
  .hero-phone {
    grid-row: 2 / 4;
    --w: min(42cqw, 190px);
    min-height: calc(var(--w) * 1.75);
  }
  .hero-phone .phone {
    top: 0;
    right: calc(var(--w) * 0.13);
    width: var(--w);
    height: auto;
  }
}
@media (min-width: 900px) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr);
    min-height: 460px;
  }
  .hero-phone {
    display: block;
  }
  /* Plus haut que la colonne : son bas passe sous la vague, tronqué par le bas du hero. */
  .hero-phone .phone {
    height: 140%;
  }
}

.polaroid {
  position: absolute;
  margin: 0;
  background: var(--white);
  padding: 10px 10px 36px;
  border-radius: 8px;
  box-shadow:
    0 24px 40px -22px color-mix(in srgb, var(--jinto-brand-bg) 55%, transparent),
    0 2px 6px color-mix(in srgb, var(--jinto-brand-bg) 8%, transparent);
}
.polaroid img {
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--jinto-text-secondary);
}
/* Boutons repris de l'app : « Créer un évènement » et « Rejoindre » de la page d'accueil (BrandTile : dégradé et
     relief de marque, tokens gradient.violet / gradient.mint, elevation.light.brandViolet / brandMint) ; « Ouvrir
     l'app » reprend l'étiquette « Immortalisez. » (navy, texte Mint). Pas de bordure, comme BrandTile : sous une
     bordure transparente de .btn, le dégradé se répète (liseré d'une autre teinte) et le liseré clair du relief
     est dessiné 2 px sous le bord ; le padding gagne ces 2 px pour garder la taille extérieure. */
.btn.btn--tile-violet,
.btn.btn--tile-mint {
  border: 0;
  padding: calc(0.875rem + 2px) calc(1.5rem + 2px);
}
.btn--tile-violet {
  background: var(--jinto-gradient-violet);
  color: var(--white);
  box-shadow: var(--jinto-elev-brand-violet);
}
.btn--tile-mint {
  background: var(--jinto-gradient-mint);
  color: var(--jinto-brand-bg);
  box-shadow: var(--jinto-elev-brand-mint);
}
@media (prefers-reduced-motion: no-preference) {
  .btn--tile-violet,
  .btn--tile-mint {
    transition: transform 120ms ease-out;
  }
  .btn--tile-violet:active,
  .btn--tile-mint:active {
    transform: scale(0.98);
  }
}
@media (forced-colors: active) {
  .btn.btn--tile-violet,
  .btn.btn--tile-mint,
  .btn--primary {
    background: none;
    box-shadow: none;
    border: 1px solid ButtonText;
  }
}

/* ---------- Pour tous vos évènements ---------- */
.events {
  position: relative;
  padding: 24px 0 88px;
  background: var(--jinto-context-event);
}
.events-head {
  margin-bottom: 20px;
}
.events-head h2 {
  font-family: var(--jinto-font-ui);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0;
  color: var(--jinto-brand-bg);
}
@media (max-width: 599.98px) {
  .events-head h2 {
    text-align: center;
  }
}
/* Mint jamais en texte sur fond clair (brand.md §4.2) : « tous » en violet, 4,6:1 sur le fond Menthe. */
.events-head h2 strong {
  font-weight: inherit;
  color: var(--jinto-secondary);
}
/* Trois familles : une zone haute, deux zones basses côte à côte ; chaque zone est un carrousel de photos. Toutes les
     6 s, les familles se poussent d'une place (CSS seul, positions animées) : bas gauche → haut (de bas en haut),
     haut → bas droite (de haut en bas), bas droite → bas gauche (de droite à gauche). Un passe-partout blanc, fixe, à
     chaque zone a son cadre blanc, fixe, séparé des autres par le Menthe : les photos glissent dessous. Jamais en pause
     au survol ; immobiles sous prefers-reduced-motion. */
/* --g : écart entre deux cadres, --f : épaisseur du cadre, --i : retrait de la fenêtre dans sa case. */
.ev-grid {
  --H: 480px;
  --h: 300px;
  --g: 20px;
  --f: 10px;
  --i: calc(var(--g) / 2 + var(--f));
  position: relative;
  height: calc(var(--H) + var(--h));
  margin: 0 calc(var(--g) / -2);
  overflow: hidden;
  /* Fond de la section, pas le marine : décalée d'une fraction de pixel par l'apparition au défilement, une grille
     marine laissait voir un liseré au bord des cadres. Le marine est posé fenêtre par fenêtre (::before). */
  background: var(--jinto-context-event);
}
/* Fond marine de chaque cadre, sous les fenêtres qui s'y poussent : trois rectangles à l'emprise exacte des
     fenêtres, jamais au bord de la grille (retrait --i) ; leurs coins carrés passent sous l'anneau blanc arrondi. */
.ev-grid::before {
  --navy: linear-gradient(var(--jinto-brand-bg), var(--jinto-brand-bg));
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--navy) left var(--i) top var(--i) / calc(100% - 2 * var(--i)) calc(var(--H) - 2 * var(--i))
      no-repeat,
    var(--navy) left var(--i) top calc(var(--H) + var(--i)) / calc(50% - 2 * var(--i))
      calc(var(--h) - 2 * var(--i)) no-repeat,
    var(--navy) right var(--i) top calc(var(--H) + var(--i)) / calc(50% - 2 * var(--i))
      calc(var(--h) - 2 * var(--i)) no-repeat;
}
.ev {
  position: absolute;
  overflow: hidden;
  background: var(--jinto-brand-bg);
  animation: ev-push 18s infinite;
  animation-delay: var(--p);
}
/* Fenêtres (intérieur des cadres) : haut (T), bas gauche (L), bas droite (R) ; départ = mouvement réduit. */
.ev:nth-child(1) {
  --p: 0s;
  left: var(--i);
  top: var(--i);
  width: calc(100% - 2 * var(--i));
  height: calc(var(--H) - 2 * var(--i));
}
.ev:nth-child(2) {
  --p: -12s;
  left: var(--i);
  top: calc(var(--H) + var(--i));
  width: calc(50% - 2 * var(--i));
  height: calc(var(--h) - 2 * var(--i));
}
.ev:nth-child(3) {
  --p: -6s;
  left: calc(50% + var(--i));
  top: calc(var(--H) + var(--i));
  width: calc(50% - 2 * var(--i));
  height: calc(var(--h) - 2 * var(--i));
}
/* Superposition pendant les poussées : la zone qui monte passe devant, puis celle qui descend, puis celle qui glisse. */
@keyframes ev-push {
  0% {
    left: var(--i);
    top: var(--i);
    width: calc(100% - 2 * var(--i));
    height: calc(var(--H) - 2 * var(--i));
    z-index: 3;
  }
  2%,
  28.33% {
    left: var(--i);
    top: var(--i);
    width: calc(100% - 2 * var(--i));
    height: calc(var(--H) - 2 * var(--i));
    z-index: 2;
  }
  33.33% {
    left: calc(50% + var(--i));
    top: calc(var(--H) + var(--i));
    width: calc(50% - 2 * var(--i));
    height: calc(var(--h) - 2 * var(--i));
    z-index: 2;
  }
  35%,
  61.66% {
    left: calc(50% + var(--i));
    top: calc(var(--H) + var(--i));
    width: calc(50% - 2 * var(--i));
    height: calc(var(--h) - 2 * var(--i));
    z-index: 1;
  }
  66.66% {
    left: var(--i);
    top: calc(var(--H) + var(--i));
    width: calc(50% - 2 * var(--i));
    height: calc(var(--h) - 2 * var(--i));
    z-index: 1;
  }
  68%,
  95% {
    left: var(--i);
    top: calc(var(--H) + var(--i));
    width: calc(50% - 2 * var(--i));
    height: calc(var(--h) - 2 * var(--i));
    z-index: 3;
  }
  100% {
    left: var(--i);
    top: var(--i);
    width: calc(100% - 2 * var(--i));
    height: calc(var(--H) - 2 * var(--i));
    z-index: 3;
  }
}
/* Cadres : trois cases jointives ; dans chacune, une fenêtre arrondie entourée d'un anneau blanc (le cadre), puis du
     Menthe de la section (l'écart entre cadres) : ombres portées de la fenêtre, rognées par la case. */
.ev-mat {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.ev-mat > span {
  position: absolute;
  overflow: hidden;
}
.ev-mat > span::before {
  content: '';
  position: absolute;
  inset: var(--i);
  border-radius: calc(var(--jinto-radius-card) - 4px);
  box-shadow:
    inset 0 1px 3px color-mix(in srgb, var(--jinto-brand-bg) 25%, transparent),
    0 0 0 var(--f) var(--white),
    0 6px 14px calc(var(--f) - 2px) color-mix(in srgb, var(--jinto-brand-bg) 12%, transparent),
    0 0 0 80px var(--jinto-context-event);
}
.ev-mat > span:nth-child(1) {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--H);
}
.ev-mat > span:nth-child(2) {
  left: 0;
  top: var(--H);
  width: 50%;
  height: var(--h);
}
.ev-mat > span:nth-child(3) {
  left: 50%;
  top: var(--H);
  width: 50%;
  height: var(--h);
}
.ev {
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.ev-slides {
  position: absolute;
  inset: 0;
}
.ev-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slide-fade 15s infinite;
  opacity: 0;
}
.ev-slides picture:nth-child(2) img {
  --d: -10s;
}
.ev-slides picture:nth-child(3) img {
  --d: -5s;
}
.ev-slides img {
  animation-delay: calc(var(--d, 0s) - var(--o, 0s));
}
.ev:nth-child(2) {
  --o: 1.6s;
}
.ev:nth-child(3) {
  --o: 3.2s;
}
@keyframes slide-fade {
  0% {
    opacity: 0;
    scale: 1.04;
  }
  6%,
  33% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
    scale: 1;
  }
}
.ev::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--jinto-brand-bg) 55%, transparent),
    transparent 45%
  );
  pointer-events: none;
}
/* Le titre de chaque famille reste dans sa zone (lecteurs d'écran) ; à l'écran, chaque fenêtre a sa puce, fixe : au
     changement, la puce se replie de droite à gauche, puis se déplie avec le titre de la famille qui arrive. */
.ev h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}
.ev-chip {
  position: absolute;
  z-index: 1;
  left: calc(var(--i) + 20px);
  bottom: calc(var(--i) + 20px);
  right: calc(var(--i) + 20px);
}
.ev-chip i {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  font-style: normal;
  padding: 10px 18px;
  border-radius: var(--jinto-radius-pill);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--jinto-brand-bg) 60%, transparent);
  clip-path: inset(0 100% 0 0 round var(--jinto-radius-pill));
  animation: ev-chip 18s infinite;
}
.ev-chip i:nth-child(1) {
  clip-path: inset(0 0 0 0 round var(--jinto-radius-pill));
  animation-delay: -17.9s;
}
.ev-chip i:nth-child(2) {
  animation-delay: 6.1s;
}
.ev-chip i:nth-child(3) {
  animation-delay: 12.1s;
}
.ev-chip .mar {
  background: var(--jinto-context-org);
  color: var(--jinto-brand-bg);
}
.ev-chip .fet {
  background: var(--jinto-context-event);
  color: var(--jinto-brand-bg);
}
.ev-chip .ent {
  background: var(--jinto-brand-bg);
  color: var(--white);
}
/* Une puce vit 6 s : se déplie un peu après l'arrivée de sa famille (0,1 s, en 0,5 s), se replie un peu avant la
     poussée suivante (de 4,5 à 5 s ; la poussée court de 5,1 à 6 s). Départ de l'animation : 0,1 s après l'arrivée. */
@keyframes ev-chip {
  0% {
    clip-path: inset(0 100% 0 0 round var(--jinto-radius-pill));
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  2.78%,
  24.44% {
    clip-path: inset(0 0 0 0 round var(--jinto-radius-pill));
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  27.22%,
  100% {
    clip-path: inset(0 100% 0 0 round var(--jinto-radius-pill));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-slides img {
    opacity: 0;
  }
  .ev-slides picture:nth-child(1) img {
    opacity: 1;
  }
}
@media (max-width: 960px) {
  .ev-grid {
    --H: 280px;
    --h: 190px;
    --g: 12px;
    --f: 7px;
  }
  .ev-chip {
    left: calc(var(--i) + 10px);
    right: calc(var(--i) + 10px);
    bottom: calc(var(--i) + 10px);
  }
  .ev-chip i {
    padding: 6px 11px;
    font-size: 0.82rem;
    border-radius: 12px;
  }
}

/* ---------- Sections d'étape ---------- */
.step {
  position: relative;
  padding: 24px 0 104px;
}
.step-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 40px;
}
.step-head .big {
  font-family: var(--jinto-font-logo);
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 0.8;
  color: var(--jinto-brand-bg);
}
.step-head h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  margin: 0;
}
.step-head p {
  margin: 6px 0 0;
  color: var(--jinto-text-secondary);
  font-size: 1.1rem;
  max-width: 560px;
}

/* 1. Rassemblez : panneau Lavande, trois photos dans leur cadre blanc, légendées en bas, dans l'ordre des étapes ;
     côte à côte, l'une sous l'autre en dessous de 960 px. Carrées : les logos des réseaux tiennent dans le recadrage. */
.s-gather {
  background: var(--jinto-context-org);
}
.gather-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.gather-steps .polaroid {
  position: relative;
  padding: 10px 10px 0;
}
.gather-steps li:nth-child(1) .polaroid {
  rotate: -3deg;
}
.gather-steps li:nth-child(2) .polaroid {
  rotate: 2deg;
  margin-top: 28px;
}
.gather-steps li:nth-child(3) .polaroid {
  rotate: -2deg;
}
.gather-steps .shot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
}
.gather-steps .shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.gather-steps figcaption {
  position: static;
  padding: 12px 8px 14px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--jinto-text-secondary);
}
.shot-create img {
  object-position: 50% 22%;
}
.shot-easel img {
  object-position: 45% 50%;
}
/* Agathe envoie le lien : logos des réseaux reliés au téléphone, avions en papier qui suivent les pointillés (SVG animé,
     sans script), recadré comme la photo (slice = object-fit: cover centré). */
.share-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.share-fx .routes path {
  fill: none;
  stroke: var(--jinto-secondary);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0 20;
}
.share-fx .planes use {
  fill: var(--jinto-secondary);
  stroke: var(--white);
  stroke-width: 1.4px;
  paint-order: stroke;
}
.share-fx .planes-static {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .share-fx .planes-anim {
    display: none;
  }
  .share-fx .planes-static {
    display: inline;
  }
}

/* 2. Partagez : un seul contenu, l'app dans le téléphone en quatre écrans réels qui se succèdent en fondu (dépôt, temps
     forts, recadrage, signalement), chacun avec sa bulle posée sur la page, à côté du téléphone (gauche, droite en
     alternance), et un doigt qui marque l'appui. Sous le téléphone, les quatre chapitres : leur barre se remplit en
     6 s puis passe au suivant (script en bas de page), un clic y saute et fige la démonstration (script, RGAA 13.8). Le
     téléphone se dimensionne sur la hauteur de l'écran : chapitres, téléphone et bulle tiennent ensemble à l'écran ; la
     démonstration se met en pause quand elle en sort à moitié (script) ; sans défilement automatique sous
     prefers-reduced-motion, chapitres toujours cliquables. */
.s-share {
  background: var(--jinto-bg-2);
}
/* --share-reserve : hauteur de l'écran laissée hors du téléphone (en-tête, chapitres, écarts, respiration ; bulle en
     dessous du téléphone sur téléphone). --phone-h : hauteur du téléphone, dont les bulles tirent leur position. */
.share-demo {
  --dur: 6s;
  --share-reserve: 210px;
  --phone-h: clamp(300px, calc(100vh - var(--share-reserve)), 640px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 48px;
  row-gap: 24px;
}
@supports (height: 100svh) {
  .share-demo {
    --phone-h: clamp(300px, calc(100svh - var(--share-reserve)), 640px);
  }
}
.share-demo .phone {
  grid-column: 2;
  grid-row: 1;
  height: var(--phone-h);
  width: auto;
}
.share-demo .screen img {
  opacity: 0;
  transition: opacity 600ms ease;
}
.share-demo[data-step='1'] .screen picture:nth-child(1) img,
.share-demo[data-step='2'] .screen picture:nth-child(2) img,
.share-demo[data-step='3'] .screen picture:nth-child(3) img,
.share-demo[data-step='4'] .screen picture:nth-child(4) img {
  opacity: 1;
}
.share-demo .tap {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jinto-secondary) 35%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jinto-secondary) 22%, transparent);
  opacity: 0;
  pointer-events: none;
}
.share-demo[data-step='1'] .tap {
  --x: 78.6%;
  --y: 53.8%;
}
.share-demo[data-step='2'] .tap {
  --x: 55.6%;
  --y: 75.7%;
}
.share-demo[data-step='3'] .tap {
  --x: 64.4%;
  --y: 89.2%;
}
.share-demo[data-step='4'] .tap {
  --x: 77.6%;
  --y: 95.2%;
}
.share-demo.run .tap {
  animation: share-tap 1100ms ease-out 1.6s both;
}
@keyframes share-tap {
  0% {
    opacity: 0;
    scale: 1.6;
  }
  30% {
    opacity: 1;
    scale: 0.8;
  }
  55% {
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.25;
  }
}
.share-bubbles {
  display: contents;
  list-style: none;
}
.share-bubbles li {
  grid-row: 1;
  align-self: start;
  max-width: 340px;
  margin-top: calc(var(--phone-h) * var(--top));
  padding: 18px 20px;
  background: var(--jinto-brand-bg);
  color: var(--white);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  box-shadow: var(--jinto-elev-brand-navy);
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 400ms ease,
    translate 400ms ease;
}
.share-bubbles li:nth-child(odd) {
  grid-column: 1;
  justify-self: end;
  border-radius: 22px 22px 6px 22px;
}
.share-bubbles li:nth-child(even) {
  grid-column: 3;
  justify-self: start;
  border-radius: 22px 22px 22px 6px;
}
/* Hauteur de chaque bulle, en part de la hauteur du téléphone : à côté de l'élément de l'écran qu'elle commente. */
.share-bubbles li:nth-child(1) {
  --top: 0.2;
}
.share-bubbles li:nth-child(2) {
  --top: 0.49;
}
.share-bubbles li:nth-child(3) {
  --top: 0.42;
}
.share-bubbles li:nth-child(4) {
  --top: 0.33;
}
.share-demo[data-step='1'] .share-bubbles li:nth-child(1),
.share-demo[data-step='2'] .share-bubbles li:nth-child(2),
.share-demo[data-step='3'] .share-bubbles li:nth-child(3),
.share-demo[data-step='4'] .share-bubbles li:nth-child(4) {
  opacity: 1;
  translate: 0 0;
}
.share-chapters {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-chapters button {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  padding-top: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--jinto-text-secondary);
  position: relative;
}
.share-chapters button::before,
.share-chapters button::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  border-radius: 3px;
}
.share-chapters button::before {
  right: 0;
  background: var(--jinto-border);
}
.share-chapters button::after {
  width: 0;
  background: var(--jinto-secondary);
}
.share-chapters button[aria-current='step'] {
  color: var(--jinto-text-primary, var(--jinto-brand-bg));
}
.share-chapters button[aria-current='step']::after {
  width: 100%;
}
.share-chapters button:focus-visible {
  outline: 3px solid var(--jinto-secondary);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .share-demo.run .share-chapters button[aria-current='step']::after {
    animation: share-fill var(--dur) linear both;
  }
  /* Hors de l'écran : barre et appui du doigt figés, reprise là où ils étaient (sélecteurs aussi précis que ceux qui
     posent l'animation, dont le raccourci remet animation-play-state à running). */
  .share-demo.run.paused .tap,
  .share-demo.run.paused .share-chapters button[aria-current='step']::after {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .share-demo .screen img,
  .share-bubbles li {
    transition: none;
  }
  .share-demo .tap {
    display: none;
  }
}
@keyframes share-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* sm : une colonne ; la bulle sous le téléphone, puis les chapitres ; toutes les bulles dans la même case (elle
     prend la hauteur de la plus longue : aucun saut au changement de chapitre). */
@media (max-width: 899.98px) {
  .share-demo {
    --share-reserve: 300px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }
  .share-demo .phone {
    grid-column: 1;
    justify-self: center;
  }
  .share-bubbles li,
  .share-bubbles li:nth-child(odd),
  .share-bubbles li:nth-child(even) {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    max-width: 420px;
    margin-top: 0;
    border-radius: 20px;
    font-size: 1.05rem;
    padding: 14px 16px;
  }
  .share-chapters {
    grid-row: 3;
  }
  .share-chapters button {
    font-size: 0.78rem;
  }
}

/* 3. Immortalisez : panneau Menthe, quatre blocs (promesse, aftermovie, souvenirs à télécharger, livre photo) */
.s-keep {
  background: var(--jinto-context-event);
}
.keep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.kb {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--jinto-radius-card);
  overflow: hidden;
  background: var(--jinto-bg-2);
  box-shadow: var(--jinto-elev-card);
}
.kb .body {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb h3 {
  font-size: 1.45rem;
  margin: 0;
}
.kb p {
  margin: 0;
  color: var(--jinto-text-secondary);
}
.kb .media {
  position: relative;
  overflow: hidden;
  height: 300px;
  flex: none;
}
.kb .media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* « Prochainement » : étiquette de mise en avant de l'app (HighlightChip de @jinto/ui, ton violet, docs/ui-guide.md
   §4.3) : fond violet plein, libellé blanc en capitales grasses espacées de 12 px, rayon des étiquettes. */
.kb .soon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--jinto-radius-media);
  background: var(--jinto-secondary);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (forced-colors: active) {
  .kb .soon {
    border: 1px solid CanvasText;
  }
}
/* 1. La promesse : la boucle du photobooth plein cadre sous un voile navy, phrase manuscrite par-dessus (blanc, mots clés
     en Menthe, sur navy seulement) */
.kb-promise {
  background: var(--jinto-brand-bg);
  color: var(--white);
  justify-content: flex-end;
  min-height: 520px;
}
.kb-promise::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--jinto-brand-bg) 90%, transparent) 8%,
    color-mix(in srgb, var(--jinto-brand-bg) 45%, transparent) 40%,
    transparent 65%
  );
}
.kb-promise .body {
  position: relative;
  z-index: 2;
  padding: 30px;
}
.kb-promise .promise {
  margin: 0;
  color: var(--white);
  font-family: var(--jinto-font-ui);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height: 1.1;
}
.kb-promise .promise strong {
  font-weight: inherit;
  color: var(--jinto-primary);
}
/* 2. L'aftermovie : le lecteur et sa ligne de temps */
.player {
  background: var(--jinto-brand-bg);
  padding: 12px;
}
.player .frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* Lecture en boucle, sans commande. La vidéo est le 4e clip du montage (allumé) : la tête de lecture ne parcourt que lui,
     au rythme de la vidéo (script en bas de page, --p de 0 à 1) ; six clips égaux, 4 px entre eux. */
.timeline {
  position: relative;
  margin-top: 22px;
  display: grid;
  gap: 6px;
  --p: 0;
} /* 22 px : la poignée de la tête de lecture dépasse de 14 px au-dessus, à 8 px de la vidéo */
.clips {
  display: flex;
  gap: 4px;
  height: 40px;
}
.clips img {
  height: 100%;
  flex: 1;
  min-width: 0;
  object-fit: cover;
  border-radius: 6px;
}
.clips img.on {
  outline: 3px solid var(--jinto-primary);
  outline-offset: -3px;
}
.playhead {
  position: absolute;
  top: -14px;
  bottom: -4px;
  left: calc((100% - 20px) / 6 * (3 + var(--p)) + 12px);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  /* Menthe comme sa poignée : trait sur le navy du lecteur seulement (docs/brand.md §4.2). */
  background: var(--jinto-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--jinto-brand-bg) 35%, transparent);
  pointer-events: none;
}
/* Poignée ronde, centrée sur le trait, entière au-dessus des clips (2 px plus haut que leur bord) : posée sur le
     contour Menthe du clip allumé, elle s'y fondait et paraissait tronquée. */
.playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--jinto-primary);
}
.audio {
  position: relative;
  height: 24px;
  border-radius: 8px;
  background: var(--jinto-secondary);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}
.audio .spectrum {
  flex: 1;
  height: 16px;
  fill: color-mix(in srgb, var(--white) 85%, transparent);
}
.audio .icon {
  width: 14px;
  height: 14px;
}
/* 3. Les souvenirs à télécharger : l'onglet Souvenirs à l'écran */
/* Les quatre écrans réels du téléchargement d'une sélection (renommage/souvenirs-*.tsx), en boucle de 8 s, CSS seul :
     carte « Sélectionner et télécharger » (appui), sélecteur avec 3 médias cochés (appui sur « Télécharger la sélection
     (3) »), « Préparation en cours », « Votre sélection est prête » (appui sur « Télécharger »). Téléphone entier : les
     appuis sont dans le bas de l'écran. Jamais en pause au survol ; l'écran final, immobile, sous prefers-reduced-motion. */
.kb-memories .media {
  height: auto;
  padding: 28px 0;
  background: var(--jinto-context-org);
  display: grid;
  justify-items: center;
}
.kb-memories .media .phone {
  width: 220px;
}
.dl-demo .screen img {
  opacity: 0;
  animation: 8s ease-in-out infinite both;
}
.dl-demo .screen picture:nth-child(1) img {
  animation-name: dl-s1;
}
.dl-demo .screen picture:nth-child(2) img {
  animation-name: dl-s2;
}
.dl-demo .screen picture:nth-child(3) img {
  animation-name: dl-s3;
}
.dl-demo .screen picture:nth-child(4) img {
  animation-name: dl-s4;
}
/* Fondus enchaînés de 0,5 s : l'écran qui arrive (au-dessus) monte sur celui qui part, resté plein jusqu'au bout ;
     au retour, le dernier s'efface sur le premier, déjà replacé dessous. */
@keyframes dl-s1 {
  0%,
  31.25% {
    opacity: 1;
  }
  31.3%,
  93.7% {
    opacity: 0;
  }
  93.75%,
  100% {
    opacity: 1;
  }
}
@keyframes dl-s2 {
  0%,
  25% {
    opacity: 0;
  }
  31.25%,
  62.5% {
    opacity: 1;
  }
  62.55%,
  100% {
    opacity: 0;
  }
}
@keyframes dl-s3 {
  0%,
  56.25% {
    opacity: 0;
  }
  62.5%,
  76.25% {
    opacity: 1;
  }
  76.3%,
  100% {
    opacity: 0;
  }
}
@keyframes dl-s4 {
  0%,
  70% {
    opacity: 0;
  }
  76.25%,
  93.75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.dl-demo .tap {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jinto-secondary) 40%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jinto-secondary) 22%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: dl-tap 8s infinite both;
}
.dl-demo .tap:nth-of-type(1) {
  --x: 14.3%;
  --y: 70.5%;
  animation-delay: 1.1s;
}
.dl-demo .tap:nth-of-type(2) {
  --x: 59.7%;
  --y: 89.5%;
  animation-delay: 3.6s;
}
.dl-demo .tap:nth-of-type(3) {
  --x: 26.4%;
  --y: 87.6%;
  animation-delay: 6.5s;
}
/* Appui de 0,9 s au début du cycle de 8 s, décalé par animation-delay. */
@keyframes dl-tap {
  0% {
    opacity: 0;
    scale: 1.6;
  }
  3.75% {
    opacity: 1;
    scale: 0.8;
  }
  6.5% {
    scale: 1;
  }
  11.25%,
  100% {
    opacity: 0;
    scale: 1.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dl-demo .screen img,
  .dl-demo .tap {
    animation: none;
  }
  .dl-demo .screen picture:nth-child(4) img {
    opacity: 1;
  }
}
/* 4. Le livre photo */
.kb-book .media {
  flex: 1 0 300px;
  height: auto;
} /* remplit la hauteur de la carte voisine (téléchargement) */
/* Boucle de 10 s (deux tournes de page, retour sans coupure) ; sous prefers-reduced-motion, l'image d'attente seule. */

/* ---------- Clôture ---------- */
.closing {
  background: var(--jinto-brand-bg);
  color: var(--white);
  padding: 24px 0 40px;
}
.closing .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.closing .wordmark {
  color: var(--jinto-primary);
  font-size: clamp(3rem, 7vw, 5rem);
  /* Pas la marge basse d'un paragraphe : la signature se lit avec le wordmark. Le crochet du « j » de Madimi One
     déborde à gauche de sa chasse et le point du « j » au-dessus du corps : retrait et hauteur de ligne les gardent dans
     la boîte du wordmark, alignée sur le reste du bandeau. */
  margin: 0;
  padding-inline-start: 0.17em;
  line-height: 1.35;
}
.closing .signature {
  font-size: 2rem;
  margin: 8px 0 0;
  color: var(--jinto-text-primary);
}
/* Pied de page dans le prolongement du bandeau de clôture : même navy, séparé par un filet clair. */
.site-footer {
  background: var(--jinto-brand-bg);
  color: var(--jinto-text-secondary);
}
.site-footer .container {
  border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  padding-top: 24px;
}
.site-footer a {
  color: inherit;
}
.site-footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 960px) {
  .keep-grid {
    grid-template-columns: 1fr;
  }
  .gather-steps {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
    gap: 32px;
  }
  .gather-steps li:nth-child(2) .polaroid {
    margin-top: 0;
  }
  .kb-promise {
    min-height: 560px;
  }
  .kb .media {
    height: 240px;
  }
  .kb-memories .media {
    height: auto;
  }
  .kb-book .media {
    flex-basis: 240px;
  }
  .kb-book {
    min-height: 560px;
  } /* même hauteur que la promesse : la photo grandit pour remplir */
  .closing .container {
    grid-template-columns: 1fr;
  }
}

/* Téléphone Fairphone 6, Forest Green (écrans Jinto de B2) : cadre vectoriel b2/fairphone6.svg (502 × 1057, redessiné
   d'après le gabarit), posé par-dessus l'écran de l'app ; l'écran occupe la place de celui du gabarit (454 × 993 en
   +23+31, coins de 40). Balisage inchangé : .phone.fp6 > .screen > img (l'écran seul, renommage/fairphone6.sh). */
.phone.fp6 {
  aspect-ratio: 502 / 1057;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 30px 34px color-mix(in srgb, var(--black) 35%, transparent));
}
.phone.fp6 > .screen {
  position: absolute;
  left: 4.582%;
  top: 2.933%;
  width: 90.438%;
  height: 93.945%;
  padding: 0;
  border-radius: 8.81% / 4.03%;
  background: var(--black);
  overflow: hidden;
}
.phone.fp6 > .screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}

/* Téléphone : le cadre vectoriel est une image posée sur l'écran. */
.phone.fp6 > .phone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

/* Vidéo en boucle : l'affiche est une image (lazy), la vidéo ne prend sa place qu'une fois en lecture. */
.loop-video {
  position: relative;
  overflow: hidden;
}
.loop-video > img,
.loop-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.loop-video > video {
  opacity: 0;
  transition: opacity 300ms ease;
}
.loop-video > video.is-playing {
  opacity: 1;
}
.player .frame.loop-video {
  position: relative;
  aspect-ratio: 16 / 9;
}
.player .frame.loop-video > video {
  display: block;
}
.kb-book .media.loop-video > img,
.kb-book .media.loop-video > video {
  object-position: 42% 72%;
}
.kb-promise .loop-video {
  position: absolute;
  inset: 0;
  --pos: 50% 30%;
}

@media (prefers-reduced-motion: reduce) {
  .home *,
  .home *::before,
  .home *::after {
    animation: none !important;
    transition: none !important;
  }
}

.share-fx .lift-shadow {
  flood-color: var(--jinto-brand-bg);
}

/* Pied de page de l'accueil : dans le prolongement du bandeau de clôture, sans séparation. */
/* Même boîte de contenu que le bandeau (largeur de la grille de l'accueil moins ses marges) : textes alignés. */
body:has(.home) .site-footer .container {
  width: calc(min(100%, 1200px) - 2 * clamp(16px, 4vw, 48px));
  padding-inline: 0;
  padding-top: 24px;
}
body:has(.home) .site-footer {
  color: var(--jinto-text-secondary);
}
body:has(.home) .site-footer a {
  color: inherit;
}

/* xs : bandeau de clôture et pied de page plus serrés, le pied de page suit les boutons sans grand vide. */
@media (max-width: 599.98px) {
  .closing {
    padding-bottom: 16px;
  }
  body:has(.home) .site-footer .container {
    padding-top: 16px;
    padding-bottom: 24px;
  }
}
/*
 * Styles de l'îlot JoinCodeDialog, à l'image du dialogue « Rejoindre avec un code » de l'app (`SheetDialog`
 * de @jinto/ui, BR-370 ; thème MUI de packages/ui/src/theme/createJintoTheme.ts) : feuille collée au bas sur
 * téléphone (sous 600 px, le point `sm` de l'app), dialogue centré au-delà. Couleurs, polices, rayons, reliefs
 * et dégradés viennent des tokens `--jinto-*` (@jinto/design-tokens/tokens.css, chargés par le layout) : aucune
 * valeur en dur ici. Le dialogue prend le thème de la section qui l'ouvre (`data-theme="dark"` du bandeau de
 * clôture), comme celui de l'app suit le thème choisi.
 */

.join-dialog {
  width: calc(100% - 4rem);
  max-width: 444px;
  max-height: calc(100% - 4rem);
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--jinto-radius-card);
  background: var(--jinto-bg-2);
  color: var(--jinto-text-primary);
  box-shadow: var(--jinto-elev-card);
  overflow-y: auto;
}

.join-dialog::backdrop {
  background: color-mix(in srgb, var(--jinto-brand-bg) 50%, transparent);
}

.join-dialog__paper {
  display: flex;
  flex-direction: column;
}

/* Poignée décorative : sur téléphone seulement. */
.join-dialog__handle {
  display: none;
  align-self: center;
  width: 40px;
  height: 4px;
  margin-top: 0.5rem;
  border-radius: var(--jinto-radius-pill);
  background: var(--jinto-border);
}

.join-dialog__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 0;
}

/* Carré d'icône à la couleur du contexte évènement (Menthe, texte navy). */
.join-dialog__tile {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--jinto-radius-button);
  background: var(--jinto-gradient-mint);
  color: var(--jinto-brand-bg);
}

.join-dialog__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.join-dialog h2 {
  margin: 0;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--jinto-brand-bg);
  overflow-wrap: anywhere;
}

.join-dialog form {
  padding: 1.25rem 1.5rem 0;
}

/* Champ bordé (BR-362 de l'app) : contour fin, rayon 14, libellé dans le cadre au-dessus de la valeur. */
.join-dialog__field {
  position: relative;
  border: 1.5px solid var(--jinto-border);
  border-radius: var(--jinto-radius-button);
  background: var(--jinto-bg-2);
}

.join-dialog__field:focus-within {
  border-color: var(--jinto-brand-bg);
}

/* L'anneau entoure le champ entier dès que la saisie est atteinte au clavier, comme dans l'app. */
.join-dialog__field:has(:focus-visible) {
  outline: 2px solid var(--jinto-brand-bg);
  outline-offset: 2px;
}

.join-dialog__field label {
  position: absolute;
  top: 0.4375rem;
  left: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--jinto-text-secondary);
  pointer-events: none;
}

/* Code de participation : typographie de la classe `.join-code` des tokens (docs/brand.md). */
.join-dialog__field input {
  display: block;
  width: 100%;
  padding: 1.5625rem 0.75rem 0.5rem;
  border: none;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1.4375;
}

.join-dialog__field input:focus-visible {
  outline: none;
}

.join-dialog__field input::placeholder {
  color: var(--jinto-text-disabled);
  opacity: 1;
}

.join-dialog__helper {
  margin: 0.1875rem 0.875rem 0;
  font-size: 0.75rem;
  line-height: 1.66;
  color: var(--jinto-text-secondary);
}

/* Actions aux bords du champ : faute de place, un bouton passe à la ligne sans couper son libellé. */
.join-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 1.75rem 0 1.25rem;
}

.join-dialog__cancel,
.join-dialog__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  border: none;
  border-radius: var(--jinto-radius-pill);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.75;
  white-space: nowrap;
  cursor: pointer;
}

/* « Annuler » en texte, à la couleur du texte. */
.join-dialog__cancel {
  padding: 0.375rem 0.5rem;
  background: transparent;
  color: inherit;
}

.join-dialog__cancel:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* « Rejoindre » plein Menthe (bouton `event` de l'app). */
.join-dialog__submit {
  gap: 0.5rem;
  padding: 0.375rem 1rem 0.375rem 0.75rem;
  background: var(--jinto-gradient-mint);
  color: var(--jinto-brand-bg);
  box-shadow: var(--jinto-elev-brand-mint);
}

.join-dialog__submit .join-dialog__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.join-dialog__submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.join-dialog__submit:disabled {
  background: var(--jinto-border);
  color: var(--jinto-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .join-dialog__submit {
    border: 1px solid ButtonText;
    box-shadow: none;
  }
}

/* Thème sombre (bandeau de clôture) : titres et contour de saisie au texte primaire, anneau Mint. */
[data-theme='dark'] .join-dialog h2 {
  color: var(--jinto-text-primary);
}

[data-theme='dark'] .join-dialog__field:focus-within {
  border-color: var(--jinto-text-primary);
}

[data-theme='dark'] .join-dialog__field:has(:focus-visible) {
  outline-color: var(--jinto-primary);
}

/*
 * Un <dialog> modal rend la page inerte mais ne la fige pas : le glisser sur le fond la ferait défiler.
 * `overflow: hidden` garde la position de défilement, retrouvée à la fermeture.
 */
html:has(.join-dialog[open]) {
  overflow: hidden;
}

/*
 * La barre de défilement retirée, la page s'élargirait derrière la boîte (barres classiques sur bureau) : sa
 * gouttière reste réservée. Posée sur la page qui porte la boîte, pas sur la boîte ouverte : basculée à
 * l'ouverture, elle décale la position de défilement à la fermeture.
 */
html:has(.join-dialog) {
  scrollbar-gutter: stable;
}

/* Téléphone : feuille pleine largeur collée au bas, coins hauts à 28 px, poignée. */
@media (max-width: 599.98px) {
  .join-dialog {
    /* La marge de 4 rem du dialogue centré n'a pas de sens pour une feuille collée au bas. */
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--jinto-radius-sheet) var(--jinto-radius-sheet) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .join-dialog__handle {
    display: block;
  }
}