/* ════════════════════════════════════════════════════════════════════════════
   COMPTOO — feuille commune des pages publiques
   ════════════════════════════════════════════════════════════════════════════

   POURQUOI CE FICHIER EXISTE. Jusqu'au 2026-09-14, chaque page de premier
   niveau portait son propre <style> : quatre copies des mêmes jetons, TROIS
   pieds de page différents (tarifs et changelog d'accord, affiliation à part,
   la nouvelle page d'accueil en quatrième), et des logotypes qui ne
   s'accordaient ni en taille ni en graisse. Rien ne les tenait ensemble, donc
   elles ont dérivé — c'était inévitable, pas accidentel.

   Ce fichier est LA source. Une page qui redéfinit ici ce qu'elle veut changer
   crée la prochaine dérive : si un réglage manque, on l'ajoute ICI.

   ⚠️ SERVI PAR UNE RÈGLE NGINX DÉDIÉE. La configuration de production expose
   les fichiers de la landing UN PAR UN (`location = /…`). Un fichier absent de
   cette liste ne tombe pas en 404 : il part vers la SPA, qui répond 200 avec du
   HTML. Une feuille de style servie en `text/html` est refusée par le
   navigateur SANS message visible — c'est exactement ce qui est arrivé à
   `/fonts/dmsans.css`, et DM Sans n'a jamais chargé sur onze pages.

   ── LA RÈGLE DE COULEUR (décision user 2026-09-14) ──────────────────────────
   Le VIOLET porte ce qui se clique — liens, boutons.
   L'AMBRE porte ce qui se met en évidence — accents, italiques, offre phare.
   La couleur dit s'il faut cliquer ou seulement regarder. Ne pas les mélanger.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Polices embarquées ─────────────────────────────────────────────────────
   Aucune requête vers un tiers (décision user). DM Sans est variable : un seul
   fichier couvre toutes les graisses. Newsreader est une instance STATIQUE en
   italique 400 — sa version variable pesait 143 Ko pour deux mots d'accent. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('/polices/dmsans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('/polices/dmsans-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('/polices/newsreader-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('/polices/newsreader-italic-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;
  src:url('/polices/quicksand-latin-600-normal.woff2') format('woff2')}

/* ── Jetons ─────────────────────────────────────────────────────────────────
   Le fond est un gris NEUTRE (#16151B), pas le bleu-violet d'avant (#0a0a14 /
   #14142a) : deux teintes violettes se disputaient l'attention, celle du fond
   et celle des boutons. Le fond se tait, le violet parle.

   ⚠️ UN SEUL THÈME, SOMBRE, DÉLIBÉRÉMENT (décision 2026-09-15).
   Cette feuille a porté un moment une palette claire sur `:root` et la palette
   sombre sous `prefers-color-scheme:dark`. Résultat : la page d'accueil était
   la SEULE des treize pages publiques à obéir au réglage du système — les douze
   autres figent leur fond dans leur propre `:root`. Un visiteur dont le système
   est en clair arrivait donc sur un accueil blanc, puis basculait en sombre dès
   le premier lien. Tant que les autres pages n'auront pas de version claire,
   suivre le système ICI produit l'incohérence au lieu de l'éviter.
   Ne pas rétablir de bloc `prefers-color-scheme` sans traiter les douze autres
   pages dans la même passe — sinon le défaut revient à l'identique. */
:root{
  color-scheme:dark;
  --papier:#16151B; --papier2:#1D1C23; --papier3:#26242D;
  --encre:#F1EFF3; --encre2:#A9A5B3; --encre3:#7C7887;
  --filet:#2D2B35; --filet2:#413E4B;
  --violet:#A49CFF; --violet-vif:#8B83FF; --violet-voile:#211E32;
  --vert:#6FD3A4; --ambre:#DFA55C; --ambre-voile:#2A2117;
  --sans:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --large:1160px; --gout:clamp(20px,5vw,44px);
}

/* ── Alias hérités ──────────────────────────────────────────────────────────
   Les pages antérieures à cette feuille nomment leurs jetons `--bg`, `--text`,
   `--primary`… La page d'accueil les nomme `--papier`, `--encre`, `--violet`.
   Plutôt que de réécrire des centaines de références d'un côté ou de l'autre,
   les anciens noms POINTENT vers les nouveaux. Une seule palette, deux
   vocabulaires — et l'en-tête et le pied communs marchent des deux côtés. */
:root{
  --bg:var(--papier); --surface:var(--papier2); --surface-hover:var(--papier3);
  --text:var(--encre); --text-secondary:var(--encre2); --text-muted:var(--encre3);
  --border:var(--filet); --primary:var(--violet-vif); --primary-dark:var(--violet);
  --gold:var(--ambre); --success:var(--vert);
}

/* ── Socle ──────────────────────────────────────────────────────────────────*/
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none}
/* Pas de soulignement au survol : le changement de couleur suffit, et un
   logotype ou un bouton souligné au passage de la souris fait accident. */
a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.026em;line-height:1.08;text-wrap:balance}
h1{font-weight:700;letter-spacing:-.025em}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
em.ac{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--ambre)}
.num{font-variant-numeric:tabular-nums}
.large{max-width:var(--large);margin:0 auto;padding:0 var(--gout)}

/* ── En-tête ────────────────────────────────────────────────────────────────
   UNE seule recette, avec ou sans menu : le `<ul>` n'existe que sur la page
   d'accueil, les autres n'ont qu'un bouton de retour. Rien à dupliquer. */
/* ── Le menu, propre à la page d'accueil ────────────────────────────────────
   Les autres pages n'ont qu'un bouton de retour ; elles n'ont donc rien à
   savoir de ces règles. C'est ce qui permet UN SEUL en-tête pour tout le site
   plutôt qu'une variante par page. */
/* Les pages légales enveloppent le logo et le bouton dans `.header-inner`,
   là où les autres les posent directement. Son `margin: 0 auto` en faisait un
   élément flex centré — d'où un en-tête au milieu de la page au lieu des deux
   extrémités. `display:contents` efface l'enveloppe de la mise en page : ses
   enfants redeviennent les enfants directs de `header`, et la même recette
   sert les deux balisages sans en modifier aucun. */
header .header-inner{display:contents}

header ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14.5px}
header ul a{color:var(--text-secondary);text-decoration:none;transition:color .2s}
header ul a:hover{color:var(--text)}
@media(max-width:900px){header ul{display:none}}

/* ── Boutons ────────────────────────────────────────────────────────────────*/
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s,background .2s,color .2s,border-color .2s}
.bt:hover{text-decoration:none;transform:translateY(-1px)}
.bt:active{transform:translateY(1px)}
.bt-p{background:var(--violet-vif);color:#fff}
.bt-p:hover{background:var(--violet);color:#fff}
.bt-s{background:transparent;color:var(--encre);border-color:var(--filet2)}
.bt-s:hover{border-color:var(--encre)}
.bt-g{padding:14px 25px;font-size:16px}

/* ── En-tête et pied COMMUNS ────────────────────────────────────────────────
   Repris tels quels de tarifs.html, qui les partageait déjà à l'identique avec
   affiliation.html (empreinte 4ecb22f075) et à 21/23 avec legal.css. J'avais
   reconstruit un pied plus pauvre pour la page d'accueil : c'était la
   quatrième variante, et c'est exactement ce que cette feuille doit empêcher.
   Le logotype est en Quicksand 600 — décision user du 2026-09-12. */
.header-logo span,.footer-brand-logo span{font-family:'Quicksand',sans-serif;font-weight:600}

header {
            padding: 24px 40px;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }

.btn-login {
            padding: 10px 24px;
            background: var(--primary);
            color: white;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.2s, transform 0.15s;
        }

footer {
            border-top: 1px solid var(--border);
            background: var(--surface);
            padding: 40px 24px;
            margin-top: 80px;
        }

.footer-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 24px;
            font-size: 14px;
            color: var(--text-muted);
        }

.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* Même piège que pour le pied : cette surcharge venait d'un @media 768 px.
   À plat, elle écrasait la marge de l'en-tête à toutes les largeurs. */
@media (max-width: 768px) {
  header { padding: 16px 20px; gap: 12px; }
  /* ⚠️ Sans `nowrap`, « Créer mon compte » passait à la ligne sur la page
     d'accueil : le bouton doublait de hauteur ET recouvrait le logotype, qui
     ne cédait pas un pixel faute de `min-width: 0`. Les autres pages y
     échappaient parce que « Retour au site » tient sur une ligne — le défaut
     n'apparaissait donc que sur la seule page au libellé long. */
  .header-logo { min-width: 0; flex: none; }
  .header-logo img { height: 34px; }
  .header-logo span { font-size: 21px; }
  .btn-login { white-space: nowrap; padding: 9px 16px; font-size: 13.5px; flex: none; }
}
@media (max-width: 560px) {
  header { padding: 14px 16px; gap: 10px; }
  .header-logo img { height: 32px; }
  .header-logo span { font-size: 20px; }
  .btn-login { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
}
@media (max-width: 420px) {
  /* ⚠️ SOUS 420 px, LE MOT « COMPTOO » DISPARAÎT — la marque reste portée par
     le symbole seul.
     Mesuré plutôt que supposé : à 360 px, le logotype occupe 201 px et le
     bouton 140, soit 373 avec les marges pour 360 de large. Le bouton sortait
     du cadre et le mot se faisait tronquer SANS ellipse, donc sans que rien ne
     le signale. Rétrécir les deux encore aurait fait tenir à 3 px près — une
     marge qu'un libellé un peu plus long fait sauter. Le symbole seul est
     reconnaissable, le bouton reste entier, et rien ne se coupe. */
  .header-logo span { display: none; }
  .header-logo img { height: 34px; }
}

/* Les entrées du menu sont des liens de texte : sans épaisseur, leur cible
   tactile descend sous les 24 px exigés par WCAG 2.2. Le remplissage vertical
   la remonte sans bouger la mise en page (l'en-tête est déjà plus haut). */
header ul a { display: inline-block; padding: 6px 0; }

.site-footer {
    --text-muted: #6b7280;
    margin-top: 80px;
    padding: 64px 40px 32px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border);
}

.footer-brand { display: flex; flex-direction: column; gap: 16px; }

.footer-brand-logo { display: flex; align-items: center; gap: 10px; }

.footer-tagline { font-size: 14px; color: var(--text-muted); line-height: 1.55; max-width: 280px; }

.footer-socials { display: flex; gap: 10px; margin-top: 4px; }

.footer-social {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--surface-hover); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s, transform 0.15s, background 0.2s;
    text-decoration: none;
}

.footer-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    background: rgba(212, 168, 74, 0.12); color: #d4a84a; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

.footer-bottom {
    max-width: 1200px; margin: 0 auto; padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-muted);
}

/* ⚠️ CES SURCHARGES VIVENT DANS LEURS @media, ET C'EST VITAL.
   Mon extraction automatique les a d'abord sorties de leurs parenthèses et
   posées à plat : la dernière gagnait alors à TOUTES les largeurs, et le pied
   de page s'est effondré en une colonne sur tout le site. Une règle mobile
   déplacée hors de sa media query ne produit aucune erreur — elle s'applique
   simplement partout. Reprises de tarifs.html avant refonte (8f1727cb~1). */
@media (max-width: 900px) {
  .site-footer { padding: 48px 24px 24px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; padding-bottom: 36px; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Sélecteurs descendants de l'en-tête et du pied — oubliés à la première
   passe, d'où un logotype sans hauteur. */
.header-logo span, .footer-brand-logo span { font-family: 'Quicksand', sans-serif; font-weight: 600; }

.header-logo img { height: 44px; }

.header-logo span { font-size: 27px; font-weight: 400; letter-spacing: -0.02em; }

.btn-login:hover { background: var(--primary-dark); transform: translateY(-1px); }

.footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }

.footer-links a:hover { color: var(--text); }

.footer-brand-logo img { height: 32px; width: auto; }

.footer-brand-logo span { font-size: 19px; font-weight: 400; letter-spacing: -0.02em; color: var(--text); }

.footer-social:hover { color: var(--text); border-color: var(--primary); background: rgba(108, 99, 255, 0.08); transform: translateY(-1px); }

.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.footer-col a { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; display: inline-flex; align-items: center; gap: 8px; }

.footer-col a:hover { color: var(--text); }

.footer-col .footer-soon { color: var(--text-muted); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: default; opacity: 0.65; }

.footer-bottom .footer-made { display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}