/* ═══════════════════════════════════════════════════════════════════
   VerifyMyMatch — le thème commun à TOUTES les pages.
   Chargé après /style.css, qui porte encore la mise en page de l'outil, du rapport,
   des tarifs et de la fenêtre « Mon compte ». Ce fichier en redéfinit les couleurs
   (les anciens jetons pointent sur la nouvelle palette), la barre du haut, le pied de
   page, les titres et les boutons. Chaque page ajoute ensuite sa propre feuille.

   Direction « La lecture » : un bleu électrique pour ce qui éclaire, un corail
   réservé aux signaux d'alerte, du rose pour l'univers « sites de rencontre » et du
   bleu vif pour « réseaux sociaux ».
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --nuit: #070a12;
  --nuit-2: #0a0e18;
  --nuit-3: #0e1422;
  --ligne: rgba(200, 215, 255, .10);
  --ligne-2: rgba(200, 215, 255, .18);
  --texte: #f2efe8;
  --texte-2: #b8bdca;
  --texte-3: #8b91a1;
  --accent: #6ec3ff;
  --accent-2: #a6dbff;
  --corail: #ff7a59;
  --rose: #ff6fae;      /* réservé à l'univers « sites de rencontre » */
  --rose-2: #ffb0d3;
  --bleu: #4fb2ff;      /* réservé à l'univers « réseaux sociaux » */
  --bleu-2: #a4d8ff;
  --clair: #f2efe8;
  --noir: #0b0f19;      /* l'encre des boutons clairs (s'appelait --encre ici : collision avec style.css) */
  --sans: "Jakarta", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "New York", Charter, Georgia, serif;
  --r: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  interpolate-size: allow-keywords;

  /* ── Les jetons de /style.css, redirigés vers la nouvelle palette ──
     Toute l'ancienne mise en page (formulaire, rapport, tarifs, fenêtre de compte)
     lit ces noms : les rediriger suffit à la faire changer de couleurs d'un coup. */
  --paper: var(--nuit);
  --paper-deep: rgba(0,0,0,.35);
  --fond-plein: var(--nuit-3);
  --surface: rgba(255,255,255,.04);
  --line: var(--ligne);
  --line-soft: rgba(200,215,255,.07);
  --line-champ: var(--ligne-2);
  --ink: var(--texte);
  --ink-2: var(--texte-2);
  --ink-3: var(--texte-3);
  --accent-texte: var(--accent-2);
  --accent-ink: var(--noir);
  --encre: var(--accent-2);
  --glow: rgba(110,195,255,.16);
}

html { scroll-padding-top: 90px; }
body {
  background: var(--nuit); color: var(--texte); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
::selection { background: rgba(110, 195, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.cadre { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 22px; }
@media (min-width: 760px) { .cadre { padding: 0 36px; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--texte); color: var(--noir); padding: 12px 18px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.evitement:focus { top: 12px; }

/* ── titres ─────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--sans); color: var(--texte); }
h1 em, h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em;
}
h1 {
  font-weight: 700; font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.02; letter-spacing: -.04em; margin: .4em 0 .38em; text-wrap: balance;
}
h1 em { color: var(--accent-2); }
h2 {
  font-weight: 700; font-size: clamp(2.1rem, 1rem + 3.3vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.042em; margin: 0; text-wrap: balance;
}
h2 em { color: var(--texte-2); }
.etiquette {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: .95rem; font-weight: 600; color: var(--accent); letter-spacing: .005em;
}
.etiquette::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .8; }
.entete-section { max-width: 780px; margin: 0 auto 60px; text-align: center; }
.entete-section .etiquette { justify-content: center; }
.entete-gauche { text-align: left; margin-left: 0; }
.entete-gauche .etiquette { justify-content: flex-start; }
.entete-texte { color: var(--texte-2); font-size: 1.12rem; margin: 20px auto 0; max-width: 36em; }
.entete-gauche .entete-texte { margin-left: 0; }

/* ── boutons ────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent;
  font: 600 1.03rem/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.fleche { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.btn:hover .fleche, .lien-fleche:hover .fleche { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-clair {
  background: var(--texte); color: var(--noir);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 32px -12px rgba(110,195,255,.5);
}
.btn-clair::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.95) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.btn-clair:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 20px 44px -14px rgba(110,195,255,.7); }
.btn-clair:hover::after { transform: translateX(130%); }

.btn-contour { color: var(--texte); background: rgba(255,255,255,.025); border-color: var(--ligne-2); }
.btn-contour:hover { background: rgba(255,255,255,.07); border-color: rgba(200,215,255,.32); transform: translateY(-2px); }

.btn-sombre { background: var(--noir); color: var(--clair); box-shadow: 0 18px 40px -18px rgba(11,15,25,.9); }
.btn-sombre:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -18px rgba(11,15,25,.95); background: #151b2b; }
.btn-petit { min-height: 44px; padding: 0 16px; border-radius: 11px; font-size: .95rem; }

.lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 22px; font-weight: 600; color: var(--accent-2); }

/* ── navigation ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, backdrop-filter .4s;
}
.nav.defile { background: rgba(7,10,18,.74); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: var(--ligne); }
.nav-cadre { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.marque-logo { display: flex; align-items: center; min-height: 44px; }
.marque-logo img { height: 26px; width: auto; }
.nav-liens { display: none; align-items: center; gap: 24px; font-size: .95rem; color: var(--texte-2); white-space: nowrap; }
.nav-liens .lien-large { display: none; }
@media (min-width: 1240px) { .nav-liens .lien-large { display: inline-flex; } }
.nav-liens a { position: relative; padding: 6px 0; transition: color .3s; }
.nav-liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-liens a:hover { color: var(--texte); }
.nav-liens a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-connexion {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font: 500 .92rem/1 var(--sans); color: var(--texte-2); transition: color .3s;
}
.nav-connexion:hover { color: var(--texte); }
/* L'attribut `hidden` perd contre toute règle `display` d'auteur : app.js ne révèle
   ce bouton que si les comptes existent, il doit donc rester vraiment caché avant. */
.nav-connexion[hidden] { display: none; }
@media (max-width: 419px) {
  .marque-logo img { height: 22px; }
  .nav-actions { gap: 12px; }
}
@media (min-width: 980px) { .nav-liens { display: flex; } .nav-connexion { font-size: .95rem; } }
/* Cibles de 44 px : les liens texte du menu faisaient 37 px de haut. */
.nav-liens a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.pied-col a { min-width: 44px; }   /* « Tarifs » faisait 38 px de large */
.nav-liens a.onglet-rose, .nav-liens a.onglet-bleu { min-height: 40px; }

/* ── Au téléphone : le compte devient une icône, et un vrai menu apparaît ──
   Avant, sous 980 px, seuls le logo et « Analyser » restaient : les tarifs et la
   FAQ n'étaient joignables que par le pied de page. Le menu est un <details> : il
   s'ouvre sans script, et effets.js le referme après un choix ou avec Échap. */
.menu-mobile { position: static; }
.menu-bouton {
  list-style: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--ligne-2); background: rgba(255,255,255,.03);
  transition: background-color .3s, border-color .3s;
}
.menu-bouton::-webkit-details-marker { display: none; }
.menu-bouton:hover { background: rgba(255,255,255,.07); }
.menu-icone { display: grid; gap: 6px; width: 18px; }
.menu-icone i { display: block; height: 1.8px; border-radius: 2px; background: var(--texte); transition: transform .35s var(--ease); }
.menu-mobile[open] .menu-icone i:first-child { transform: translateY(3.9px) rotate(45deg); }
.menu-mobile[open] .menu-icone i:last-child { transform: translateY(-3.9px) rotate(-45deg); }
.menu-panneau {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 6px);
  display: grid; gap: 2px; padding: 10px; border-radius: 20px;
  background: #0c111e; border: 1px solid var(--ligne-2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 100vmax rgba(4,6,12,.55);   /* voile sur la page */
  animation: menu-ouvre .35s var(--ease);
}
.menu-lien { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; color: var(--texte); font-size: 1.02rem; }
.menu-lien:hover, .menu-lien:focus-visible { background: rgba(255,255,255,.05); }
.menu-rose { color: var(--rose-2); }
.menu-bleu { color: var(--bleu-2); }
.menu-action { margin-top: 8px; width: 100%; }
@keyframes menu-ouvre { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 980px) { .menu-mobile { display: none; } }
@media (max-width: 599px) {
  .nav-actions { gap: 8px; }
  /* Le bouton de compte garde son texte (lu par les lecteurs d'écran, et réécrit par
     app.js : « Se connecter » / « Mon compte »), mais s'affiche en icône. */
  .nav-connexion {
    width: 44px; justify-content: center; font-size: 0; padding: 0;
    border-radius: 12px; border: 1px solid var(--ligne-2); background: rgba(255,255,255,.03);
  }
  .nav-connexion::before {
    content: ""; width: 20px; height: 20px; background: var(--texte);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.9 3.7-5.9 7.2-5.9s6.3 2 7.2 5.9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.9 3.7-5.9 7.2-5.9s6.3 2 7.2 5.9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .nav .btn-petit { padding: 0 14px; }
}

/* L'onglet « Sites de rencontre » : le seul qui luit. */
.nav-liens a.onglet-rose {
  padding: 7px 15px; border-radius: 999px; color: var(--rose-2);
  background: rgba(255,111,174,.09); border: 1px solid rgba(255,111,174,.4);
  text-shadow: 0 0 12px rgba(255,111,174,.8);
}
.nav-liens a.onglet-rose::after { display: none; }
.nav-liens a.onglet-rose:hover { color: #fff; background: rgba(255,111,174,.16); border-color: rgba(255,140,190,.7); }
.nav-liens a.onglet-bleu {
  padding: 7px 15px; border-radius: 999px; color: var(--bleu-2);
  background: rgba(79,178,255,.09); border: 1px solid rgba(79,178,255,.42);
  text-shadow: 0 0 12px rgba(79,178,255,.85);
}
.nav-liens a.onglet-bleu::after { display: none; }
.nav-liens a.onglet-bleu:hover { color: #fff; background: rgba(79,178,255,.16); border-color: rgba(130,200,255,.75); }

/* LA LUEUR QUI PULSE. Animer une ombre force le navigateur à la redessiner à chaque
   image — et ces onglets sont dans la barre collante, donc à l'écran en permanence.
   L'ombre est donc posée une fois, sur un pseudo-élément, et seule son OPACITÉ varie :
   le compositeur s'en charge sans rien repeindre. */
.nav-liens a.onglet-rose, .nav-liens a.onglet-bleu { position: relative; isolation: isolate; }
.nav-liens a.onglet-rose::before, .nav-liens a.onglet-bleu::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: .3; animation: halo 6s ease-in-out infinite;   /* lent et discret : il est à l'écran en permanence */
}
.nav-liens a.onglet-rose::before { box-shadow: 0 0 26px -2px rgba(255,111,174,.85), inset 0 0 14px rgba(255,111,174,.22); }
.nav-liens a.onglet-bleu::before { box-shadow: 0 0 26px -2px rgba(79,178,255,.9), inset 0 0 14px rgba(79,178,255,.22); animation-delay: -3s; }

/* ═══════════════ PIED DE PAGE ═══════════════ */
.pied { padding: 64px 0 36px; border-top: 1px solid var(--ligne); }
.pied-haut { display: grid; gap: 36px; }
@media (min-width: 820px) { .pied-haut { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.pied-marque img { height: 26px; width: auto; }
.pied-marque p { margin: 16px 0 0; max-width: 24em; color: var(--texte-3); font-size: .96rem; }
.pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: .96rem; }
.pied-col b { margin-bottom: 4px; font-size: .88rem; font-weight: 600; color: var(--texte); }
.pied-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-2); transition: color .3s; }
.pied-col a:hover { color: var(--texte); }
.pied-bas { display: grid; gap: 12px; margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--ligne); color: var(--texte-3); font-size: .95rem; }
.pied-bas p { margin: 0; max-width: 62em; }
@media (min-width: 820px) { .pied-bas { grid-template-columns: 1fr auto; gap: 40px; } }

/* ═══════════════ APPARITIONS AU DÉFILEMENT ═══════════════ */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), background-color .5s;
  transition-delay: var(--delai, 0s), var(--delai, 0s), 0s, 0s, 0s;
}
.js [data-reveal].vu { opacity: 1; transform: none; }

@keyframes entre { to { opacity: 1; transform: none; } }
@keyframes pouls { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes halo { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ═══════════════ CE QUE L'ANCIENNE FEUILLE IMPOSE, ET QUE LE THÈME REFUSE ═══════════════
   /style.css reste chargée ici pour la fenêtre « Mon compte » et la police. Mais elle
   porte aussi des règles écrites pour l'ancien accueil sur des ÉLÉMENTS nus — header,
   h1, blockquote, footer — qui s'appliqueraient à celui-ci. Chacune est neutralisée
   ici, nommément, plutôt que par un reset global qui toucherait aussi la fenêtre. */
body::before { content: none; }                        /* le halo violet de l'ancien héros */
header.nav {                                           /* l'ancien en-tête s'escamotait au défilement */
  display: block; padding: 0; margin: 0; justify-content: normal; animation: none;
}
h1 em, h2 em {                                         /* l'ancien dégradé découpé dans le texte */
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: none; filter: none;
}
footer.pied { margin-top: 0; color: inherit; font-size: inherit; line-height: inherit; }
/* La fenêtre « Mon compte » hérite ici de l'accent bleu clair de l'accueil. Son bouton
   principal écrit en blanc sur l'accent : lisible sur l'ancien violet, pas sur ce bleu
   (≈ 2:1). Il prend donc l'encre sombre des autres boutons clairs de la page. */
#dlg-compte .primaire { background: var(--texte); color: var(--noir); }
#dlg-compte .primaire:hover:not(:disabled) { background: #fff; }

/* Le bouton principal de l'ancienne feuille écrivait en blanc sur l'accent. Sur le
   bleu clair du thème, ce serait illisible (≈ 2:1) : il devient un bouton clair. */
.primaire { background: var(--texte); color: var(--noir); }
.primaire:hover:not(:disabled) { background: #fff; }
.nav img, .pied img { display: block; }
.nav a, .pied a, a.btn { text-decoration: none; }   /* l'ancienne feuille souligne les liens de contenu */
.nav-liens a, .marque-logo { color: inherit; }

/* ═══════════════ RIEN NE TOURNE HORS DE L'ÉCRAN ═══════════════
   effets.js pose `.au-repos` sur une section dès qu'elle sort du champ : ses
   animations en boucle s'arrêtent là où elles en sont, et reprennent au retour. */
.au-repos *, .au-repos *::before, .au-repos *::after { animation-play-state: paused !important; }