/* ============================================================
   2Gether, shared shell. Loaded by index, support and privacy.
   Direction: glass and champagne. Tokens come from the Figma
   file "Landing / 2Gether (story)".
   ============================================================ */
:root {
  --creme: #f6efe7;
  --carte: #fffdf9;
  --encre: #382c33;
  --texte: #6d6055;
  --doux: #8d7b71;
  --rose: #b4586c;
  --rose-fonce: #a44560;
  --rose-clair: #e8a2b4;
  --rose-pale: #f7eef1;
  --bleu: #5f8fb4;
  --rouge: #cc475a;
  --prune: #221b27;
  --prune-ui: #2f2733;
  --nuit: #17131c;
  --mauve: #d8cdd4;
  --champagne: #cab498;
  /* Le vert des six écrans : la bonne réponse qui verdit, la jauge d'un
     objectif d'épargne. Il vient de la version précédente du site, avec les
     écrans eux-mêmes, et c'est le seul jeton qu'ils réclamaient et qui
     manquait ici. Sans lui les deux règles tombaient en `transparent`, ce que
     rien à l'écran n'aurait expliqué. */
  --vert: #7abc7c;
  --rayon: 26px;
  --mesure: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -.05px;
  -webkit-font-smoothing: antialiased;
  /* **Pas de surlignage au glissement.**
     Les cœurs au clic écoutent le `pointerdown` n'importe où sur la page : un
     clic maintenu en faisait donc éclore, et sélectionnait le texte du dessous
     en même temps. On repartait avec un pavé bleu sur une page qu'on voulait
     seulement toucher. Le préfixe `-webkit-` est nécessaire, Safari ne connaît
     pas encore la propriété nue. */
  -webkit-user-select: none;
  user-select: none;
}
h1, h2, h3, h4, .serif { font-family: 'Lora', Georgia, serif; color: var(--encre); font-weight: 600; }
h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -1.6px; margin: 0; }
h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -.9px; margin: 0; }
h3 { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.18; letter-spacing: -.6px; margin: 0; }
h4 { font-size: 22px; line-height: 1.32; letter-spacing: -.2px; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

.voile { max-width: var(--mesure); margin: 0 auto; padding: 0 clamp(20px, 5vw, 100px); }
.pixel { image-rendering: crisp-edges; image-rendering: pixelated; }
section, header, footer { position: relative; }
section > .voile, header > .voile, footer > .voile { position: relative; z-index: 1; }

/* ---------- eyebrows, pills, hairlines ---------- */
.sourcil {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  color: var(--rose);
}
.pastille {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(180, 88, 108, .12);
  font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--rose);
}
.pastille--avant { background: rgba(204, 71, 90, .1); color: var(--rouge); letter-spacing: 1.2px; }
.pastille--avant b { color: var(--texte); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; }
.pastille--bleu { background: rgba(95, 143, 180, .14); color: var(--bleu); }
.filet {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, rgba(202, 180, 152, 0), rgba(202, 180, 152, .9), rgba(202, 180, 152, 0));
  transform: scaleX(.1); transform-origin: center;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.la .filet, .filet.la { transform: scaleX(1); }
.entete { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.entete > * + * { margin-top: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }

/* ---------- glass ---------- */
.verre {
  position: relative;
  border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .52));
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
  backdrop-filter: blur(22px) saturate(1.06);
  box-shadow: 0 14px 34px -8px rgba(56, 44, 51, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
  overflow: hidden;
}
.verre::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, #fff 0%, rgba(202, 180, 152, .6) 55%, rgba(255, 255, 255, .75) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.verre--nuit {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: 0 16px 40px -10px rgba(13, 10, 15, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.verre--nuit::before {
  background: linear-gradient(140deg, rgba(255, 255, 255, .28), rgba(202, 180, 152, .45), rgba(255, 255, 255, .12));
}
.verre .balai {
  position: absolute; top: -60%; left: -30%; width: 90px; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(18deg) translateX(0); opacity: 0; pointer-events: none;
}
.la .verre .balai, .verre.la .balai { animation: balaye 1.5s cubic-bezier(.4, 0, .2, 1) .25s 1 forwards; }
@keyframes balaye {
  0% { opacity: 0; transform: rotate(18deg) translateX(0); }
  18% { opacity: 1; } 82% { opacity: 1; }
  100% { opacity: 0; transform: rotate(18deg) translateX(1400px); }
}

/* ---------- aurora ---------- */
.nappes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nappes i { position: absolute; display: block; border-radius: 50%; animation: derive 26s ease-in-out infinite alternate; }
.n-rose { background: radial-gradient(closest-side, rgba(180, 88, 108, .17), rgba(180, 88, 108, 0)); }
.n-champagne { background: radial-gradient(closest-side, rgba(202, 180, 152, .3), rgba(202, 180, 152, 0)); }
.n-bleu { background: radial-gradient(closest-side, rgba(95, 143, 180, .16), rgba(95, 143, 180, 0)); }
@keyframes derive { from { transform: translate(0, 0); } to { transform: translate(-70px, 40px); } }

/* ---------- medallion ---------- */
.medaillon {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto; position: relative;
  background: linear-gradient(140deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .5));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 10px 26px -6px rgba(56, 44, 51, .14), inset 0 1px 0 #fff;
  animation: oscille 5s ease-in-out infinite;
}
.medaillon::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px;
  background: linear-gradient(140deg, var(--champagne), rgba(255, 255, 255, .9), rgba(180, 88, 108, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.medaillon--nuit { background: linear-gradient(140deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.medaillon--nuit::before { background: linear-gradient(140deg, var(--champagne), rgba(232, 162, 180, .7), rgba(202, 180, 152, .3)); }
.medaillon svg { width: 40px; height: 40px; }
@keyframes oscille { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ---------- buttons and fields ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; color: #fff;
  padding: 15px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #c46778, #a44560);
  box-shadow: 0 8px 20px -4px rgba(180, 88, 108, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s;
  text-decoration: none;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -4px rgba(180, 88, 108, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
.bouton:active { transform: translateY(0); }
.bouton--mini { padding: 11px 22px; font-size: 15px; font-weight: 500; }
.bouton--clair { background: linear-gradient(180deg, #f2b5c4, #e08fa6); color: var(--nuit); }

.note { font-size: 14px; color: var(--doux); margin-top: 14px; }

/* ---------- nav ---------- */
.barre {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 239, 231, .62);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transition: box-shadow .25s;
}
.barre.pose { box-shadow: 0 2px 16px rgba(56, 44, 51, .06); }
.barre .voile { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque span { font-family: 'Lora', serif; font-weight: 600; font-size: 22px; color: var(--encre); }
.mono { width: 28px; height: 28px; flex: none; }
.nav-liens { display: flex; align-items: center; gap: 34px; }
.nav-liens a { font-size: 15px; text-decoration: none; opacity: .85; transition: color .2s, opacity .2s; }
.nav-liens a:hover { color: var(--rose); opacity: 1; }
.nav-droite { display: flex; align-items: center; gap: 18px; }
.langue { font-size: 14px; color: var(--doux); text-decoration: none; letter-spacing: .5px; }

/* ---------- ribbon ---------- */
.ruban { padding: 15px 0; background: var(--rose); overflow: hidden; transform: rotate(-1.2deg) scale(1.03); box-shadow: 0 10px 30px rgba(180, 88, 108, .25); }
.ruban-piste { display: flex; width: max-content; animation: defile 26s linear infinite; }
.ruban span { white-space: nowrap; padding-right: 14px; font-size: 15px; font-weight: 500; color: var(--rose-pale); letter-spacing: .6px; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- pixel characters, the app's own sheet geometry ---------- */
.marcheur { width: 48px; height: 96px; position: relative; image-rendering: pixelated; --rang: 2; }
.marcheur .calque {
  position: absolute; inset: 0; background-size: 150px 392px; background-repeat: no-repeat;
  image-rendering: pixelated; background-position: -51px calc(var(--rang) * -98px - 1px);
}
.marche .calque { animation: pas .72s step-end infinite; animation-delay: var(--retard, 0s); }
@keyframes pas {
  0% { background-position: -51px calc(var(--rang) * -98px - 1px); }
  25% { background-position: -1px calc(var(--rang) * -98px - 1px); }
  50% { background-position: -51px calc(var(--rang) * -98px - 1px); }
  75% { background-position: -101px calc(var(--rang) * -98px - 1px); }
  100% { background-position: -51px calc(var(--rang) * -98px - 1px); }
}
.c-corps { background-image: url('perso/corps-1.png'); }
.c-tenue-2 { background-image: url('perso/tenue-2.png'); }
.c-tenue-7 { background-image: url('perso/tenue-7.png'); }
.c-chev-30 { background-image: url('perso/cheveux-30.png'); }
.c-chev-5 { background-image: url('perso/cheveux-5.png'); }
.c-yeux { background-image: url('perso/yeux-1.png'); }
.coeur-flottant { position: absolute; left: 50%; bottom: 96%; font-size: 15px; color: var(--rose-clair); opacity: 0; animation: monte 4s ease-in-out infinite; pointer-events: none; }
@keyframes monte {
  0%, 55% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  65% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
  90%, 100% { opacity: 0; transform: translate(-50%, -30px) scale(.9); }
}

/* **La promenade : du gazon, et un chemin dessus.** Partagée par les trois pages.

   Elle était posée sur un aplat sombre, sans un brin d'herbe, et le chemin y
   était étiré à 300 px pour une tuile qui en fait 158 : on n'en voyait qu'une
   tranche agrandie, floue, qui ne ressemblait plus à un chemin. Les deux
   textures reprennent ici leur taille d'origine — c'est la seule façon qu'une
   texture a de se répéter sans se trahir — et ce sont les mêmes que dans l'app :
   le gazon du jardin, le chemin dallé, couché pour qu'on marche dessus de
   gauche à droite. */
.promenade { position: relative; height: 168px; overflow: hidden; background: url('img/gazon.jpg') repeat center center / 460px 462px; }
/* **Le mot de la fin, au-dessus du gazon et non dedans.** Pose au milieu de la
   pelouse il flottait, et il fallait lui peindre un halo pour qu'il reste
   lisible sur une texture qui a ses zones claires et ses zones sombres. Il
   remonte sur le fond sombre de la section qui precede — la meme sur les deux
   pages qui portent cette bande — ou il se lit sans aucun artifice. */
.mot-de-la-fin {
  margin: 0; padding: 0 20px 30px; text-align: center;
  background: var(--nuit); color: var(--mauve);
  font-family: 'Lora', serif; font-style: italic; font-size: 17px;
}
/* Le chemin déborde de vingt points de chaque côté : aucune jointure de tuile
   ne tombe alors sur un bord visible. */
.promenade .sol { position: absolute; left: -20px; right: -20px; bottom: 0; height: 118px; background: url('img/chemin-h.jpg') repeat-x left center / 158px 118px; }
/* **Le raccord avec le pied, qui est noir.** Sans ce fondu, l'herbe rencontrait
   le pied sur une arête nette, et la bande se lisait comme une image collée
   plutôt que comme le bas du décor. Il passe sous les marcheurs, pas dessus. */
.promenade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 1; background: linear-gradient(180deg, rgba(23, 19, 28, 0), var(--nuit)); pointer-events: none; }
.balade { position: absolute; bottom: 26px; left: 0; z-index: 2; display: flex; gap: 8px; align-items: flex-end; }
/* Un peu plus grands que dans les écrans, et une ombre portée : ils marchent
   sur une texture, et sans elle ils flottent au-dessus. */
.balade .marcheur { transform: scale(1.25); transform-origin: bottom center; filter: drop-shadow(0 3px 4px rgba(56, 44, 51, .4)); }

/* ---------- footer ---------- */
.pied { background: var(--nuit); color: var(--doux); padding: 30px 0 44px; }
.pied .voile { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pied .signature { display: flex; align-items: center; gap: 10px; font-family: 'Lora', serif; font-style: italic; color: var(--mauve); font-size: 15px; }
.pied nav { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--rose-clair); }

/* ---------- hearts on click ---------- */
.eclat { position: fixed; z-index: 99; pointer-events: none; font-size: 14px; color: var(--rose); animation: eclate .9s ease-out forwards; }
@keyframes eclate {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--vx), var(--vy)) scale(.3); opacity: 0; }
}
.coeur-jaillit { position: absolute; pointer-events: none; color: var(--rose-clair); font-size: 13px; animation: jaillit .9s ease-out forwards; }
@keyframes jaillit { from { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }

/* ---------- arrivals ---------- */
.nait { opacity: 0; transform: translateY(22px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1); }
.nait.la { opacity: 1; transform: none; }
.nait[data-retard="1"] { transition-delay: .09s; }
.nait[data-retard="2"] { transition-delay: .18s; }
.nait[data-retard="3"] { transition-delay: .27s; }
.nait[data-retard="4"] { transition-delay: .36s; }
.nait[data-retard="5"] { transition-delay: .45s; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .trio { grid-template-columns: 1fr; }
  .nav-liens { display: none; }
}
@media (max-width: 620px) {
  .pied .voile { flex-direction: column; text-align: center; }
  .pied nav { justify-content: center; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .nait { opacity: 1; transform: none; }
  .filet { transform: none; }
}

/* **Le choix de la langue.** Un `<details>` : c'est le navigateur qui l'ouvre
   et le ferme, sans une ligne de script, et il se referme au clic ailleurs
   comme on l'attend. Les adresses sont absolues pour que le meme balisage
   serve a la racine comme dans un sous-dossier. */
.langues { position: relative; }
.langues > summary {
  list-style: none; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 8px 10px; border-radius: 999px; color: var(--doux);
  user-select: none; transition: background .2s, color .2s;
}
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary:hover { background: rgba(141, 123, 113, .1); color: var(--rose); }
.langues-liste {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 152px; padding: 6px;
  border-radius: 16px; background: var(--carte);
  border: 1px solid rgba(141, 123, 113, .16);
  box-shadow: 0 14px 34px -6px rgba(56, 44, 51, .22);
}
.langues-liste a {
  padding: 9px 13px; border-radius: 10px; font-size: 14px;
  text-decoration: none; color: var(--texte);
}
.langues-liste a:hover { background: rgba(180, 88, 108, .09); color: var(--rose); }
.langues-liste a[aria-current="true"] { font-weight: 600; color: var(--rose); }
.pied-langues { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- ce que l'app fait, repris tel quel ---------- */

/* **Les boutons vivent**, comme sur le Foyer : ils cedent sous le doigt, et
   lachent une onde de leur couleur au clic (la classe `onde`, posee par le
   script le temps de l'animation). */
.bouton { position: relative; }
.bouton::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(180, 88, 108, .6); opacity: 0; pointer-events: none;
}
.bouton:active { transform: scale(.96); }
.bouton.onde::after { animation: onde-bouton .52s ease-out; }
@keyframes onde-bouton { from { transform: scale(1); opacity: .7; } to { transform: scale(1.22); opacity: 0; } }

/* **La pluie de coeurs** du Foyer : des coeurs qui tombent lentement, pales,
   derriere tout le reste. Chaque coeur porte sa colonne, sa duree et son
   retard en variables ; le retard est negatif pour que la pluie tombe deja
   quand la page s'ouvre. */
.pluie { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pluie i {
  position: absolute; top: -30px; left: var(--x); font-style: normal; font-size: var(--s, 13px);
  color: var(--rose); opacity: 0; animation: tombe var(--d, 14s) linear var(--r, 0s) infinite;
}
@keyframes tombe {
  0% { transform: translateY(0) rotate(-10deg); opacity: 0; }
  8% { opacity: .3; }
  50% { transform: translateY(450px) rotate(6deg); }
  92% { opacity: .3; }
  100% { transform: translateY(900px) rotate(-8deg); opacity: 0; }
}

/* **Le cortege du bas** : la trainee de coeurs derriere le dernier, et le
   salut. Un coeur lache par le script, qui monte et s'efface ; un appui, et
   les deux s'arretent face a nous (la rangee 0 de la planche), puis
   repartent. */
.promenade .trace {
  position: absolute; bottom: 60px; z-index: 1; font-size: 15px; color: var(--rose-clair);
  pointer-events: none; animation: trace 1.1s ease-out forwards;
}
@keyframes trace {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  15% { opacity: .95; }
  100% { transform: translate(-14px, -40px) scale(1.1); opacity: 0; }
}
.promenade { cursor: pointer; }
.balade .marcheur { transition: filter .2s; }
.balade.salue .marcheur { filter: drop-shadow(0 3px 4px rgba(56, 44, 51, .4)) drop-shadow(0 0 10px rgba(232, 162, 180, .6)); }