/*
 * L'IDENTITÉ DES PAGES WEB DE FILOO, ÉCRITE UNE FOIS.
 *
 * Trois pages la partagent : l'accueil, la confidentialité, les conditions.
 * Elles étaient parties pour avoir chacune sa copie du même dégradé et des
 * mêmes fontes — trois copies qui auraient divergé au premier changement de
 * couleur, sur des pages qu'on ouvre à des mois d'intervalle.
 *
 * LA PALETTE VIENT DU PRODUIT, PAS DU WEB. Elle est celle de l'application et
 * de la page d'histoire partagée : l'interface est vert-bleu, la lueur est
 * ambre, et cette séparation est volontaire (voir CLAUDE.md). Le vert-bleu
 * recule au lieu d'avancer vers l'œil ; l'ambre est le bout du spectre qui
 * perturbe le moins l'endormissement, et il ne sert donc qu'à la lueur.
 *
 * CE QUI REND UNE COULEUR CALME EST SA CLARTÉ, PAS SA FADEUR. Les accents sont
 * clairs et gardent leur teinte : baisser la saturation sans toucher à la
 * luminosité ne les apaise pas, ça les salit.
 */

:root{
  --fond:#0f1a1c;
  --fondHaut:#162426;
  --surface:#1b2d2f;
  --surfaceHaute:#26393b;
  --accent:#b5d6cb;
  --surAccent:#0d2420;
  --texte:#e6efec;
  --texteDoux:#b3c4bf;
  --texteFaible:#879792;
  --trait:#2e4245;
  --halo:#ffb36b;

  --large:38rem;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:Quicksand,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0}
html{background:var(--fond);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--fond);
  color:var(--texte);
  font-family:var(--sans);
  font-size:17px;
  line-height:29px;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--halo);color:var(--surAccent)}

a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--halo);outline-offset:3px;border-radius:4px;
}

/* ---- La lueur ------------------------------------------------------------
 *
 * ELLE EST DESSINÉE, PAS PHOTOGRAPHIÉE. Trois dégradés radiaux superposés et un
 * flou : aucun octet à télécharger, net à toutes les résolutions, et elle
 * respire au lieu de rester figée. C'est la même forme que le halo de l'écran
 * d'écoute — une masse sans contour, jamais un cercle.
 */
.lueur{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(62% 44% at 50% 6%, rgba(255,179,107,.15), transparent 68%),
    radial-gradient(34% 26% at 50% 2%, rgba(255,179,107,.12), transparent 70%),
    linear-gradient(180deg,var(--fondHaut) 0%,var(--fond) 82%);
}
.lueur::before{
  content:"";
  position:absolute;
  inset:-24% 26% auto;
  height:44vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,179,107,.11), transparent 68%);
  filter:blur(30px);
  animation:respire 13s ease-in-out infinite;
  pointer-events:none;
}
@keyframes respire{
  0%,100%{transform:scale(1) translateY(0);opacity:.8}
  50%{transform:scale(1.14) translateY(-2%);opacity:1}
}
@media (prefers-reduced-motion:reduce){.lueur::before{animation:none}}

/* ---- Structure ----------------------------------------------------------- */

.centre{max-width:var(--large);margin:0 auto;padding:0 24px;position:relative}
section{padding:56px 0}
section + section{border-top:1px solid var(--trait)}

/* ---- Typographie ---------------------------------------------------------
 *
 * Une échelle, et on n'en sort pas. Les titres reçoivent `text-wrap:balance` :
 * une veuve d'un mot sur un titre en serif se voit immédiatement.
 */
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(33px,6.4vw,47px);line-height:1.14;
  letter-spacing:-.4px;text-wrap:balance;
}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,4.6vw,31px);line-height:1.25;
  text-wrap:balance;margin-bottom:18px;
}
h3{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.35;margin-bottom:6px}

/* L'ŒIL-DE-BŒUF : le petit label qui annonce une section. Il n'est pas
   décoratif — il dit de quoi on parle avant qu'on ait lu le titre, ce qui est
   utile sur une page qu'on parcourt en diagonale. */
.oeil{
  font-family:var(--sans);font-weight:600;font-size:12px;line-height:20px;
  letter-spacing:2px;text-transform:uppercase;color:var(--texteFaible);
  margin-bottom:14px;display:block;
}

p{max-width:34rem}
p + p{margin-top:16px}
.doux{color:var(--texteDoux)}
.faible{color:var(--texteFaible);font-size:15px;line-height:25px}
.chapeau{color:var(--texteDoux);font-size:19px;line-height:32px;max-width:31rem}
em.lueurTexte{font-style:normal;color:var(--halo)}

/* ---- La marque ----------------------------------------------------------- */

.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--texte)}
.marque img{width:42px;height:42px;border-radius:11px;display:block}
.marque span{font-family:var(--serif);font-size:21px;letter-spacing:.2px}

/* ---- Formulaire ---------------------------------------------------------- */

form.liste{display:flex;gap:10px;flex-wrap:wrap;max-width:32rem}
input[type=email]{
  flex:1 1 15rem;min-width:0;
  background:var(--surface);border:1px solid var(--trait);border-radius:12px;
  padding:15px 16px;color:var(--texte);font:inherit;
}
input[type=email]::placeholder{color:var(--texteFaible)}
button{
  background:var(--accent);color:var(--surAccent);border:0;border-radius:12px;
  padding:15px 26px;font:inherit;font-weight:600;cursor:pointer;flex:0 0 auto;
  transition:opacity .15s,transform .15s;
}
button:hover{opacity:.9}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default;transform:none}

.mot{margin-top:13px;font-size:15px;line-height:24px;color:var(--texteFaible);min-height:24px;max-width:32rem}
.mot.bien{color:var(--accent)}
.mot.mal{color:#eaa6a6}

/* ---- Pied --------------------------------------------------------------- */

footer{
  border-top:1px solid var(--trait);
  padding:30px 0 56px;
  color:var(--texteFaible);font-size:14px;line-height:24px;
}
footer nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
footer a{color:var(--texteDoux)}

/* ---- Pages de texte (confidentialité, conditions) ------------------------ */

.document{max-width:40rem;margin:0 auto;padding:0 24px 72px}
.document h1{font-size:clamp(30px,5.6vw,38px);margin-bottom:10px}
.document h2{
  font-size:22px;margin-top:44px;margin-bottom:12px;
  padding-top:22px;border-top:1px solid var(--trait);
}
.document h3{font-size:17px;margin-top:26px;font-weight:600}
.document p,.document li{color:var(--texteDoux);max-width:none}
.document ul{margin:14px 0 0;padding-left:22px}
.document li{margin-bottom:9px}
.document li::marker{color:var(--texteFaible)}
.document strong{color:var(--texte);font-weight:600}
.document table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px;line-height:24px}
.document th,.document td{
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--trait);vertical-align:top;
}
.document th{color:var(--texteFaible);font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase}
.document td{color:var(--texteDoux)}
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* LA DATE ET LE RAPPEL : ce qu'on cherche en ouvrant un document juridique,
   c'est sa fraîcheur. Elle est donc en haut, avant le premier titre. */
.entete{
  padding:40px 0 26px;color:var(--texteFaible);font-size:14px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}

/* L'AVERTISSEMENT DE RELECTURE, tant qu'un juriste n'est pas passé. Il se
   retire en supprimant le bloc, pas en le rendant discret. */
.avertissement{
  border:1px solid var(--halo);border-radius:14px;padding:18px 20px;margin:26px 0 8px;
  background:rgba(255,179,107,.07);
}
.avertissement p{color:var(--texte);font-size:15px;line-height:25px}