/*
 * Ta2p — feuille de style unique.
 *
 * Sobre et dense : un outil qu'on consulte, pas un produit qu'on vend. Une
 * seule couleur d'accent, la police du système, des tableaux compacts. Aucune
 * dépendance, aucun build — le déploiement reste un git pull.
 */

/*
 * « MARÉE » : les couleurs d'une plage du nord, un jour de grand soleil.
 *
 * La palette vient d'une photo de cairn — un empilement de pierres en
 * équilibre, comme le logo. On en a tiré trois choses : l'eau peu profonde
 * pour l'accent, la falaise à contre-jour pour l'encre, le sable mouillé pour
 * le papier. Rien n'est pris au hasard, et rien n'est une teinte de marque
 * inventée.
 *
 * TOUT PASSE PAR CES VARIABLES, sans exception : c'est ce qui permet au mode
 * nuit de n'être qu'un second bloc de valeurs. Une couleur écrite en dur
 * quelque part resterait claire la nuit, et ce genre de tache ne se voit qu'au
 * hasard d'une page qu'on n'avait pas rouverte depuis des mois. Le contrôle
 * est mécanique : `grep '#[0-9a-f]\{3,6\}' style.css` ne doit rien rendre
 * au-delà des deux blocs ci-dessous.
 *
 * LE MODE NUIT SUIT LE SYSTÈME, sans bouton ni cookie : celui qui l'a réglé
 * une fois sur son téléphone l'a réglé pour tout. Un interrupteur de plus
 * demanderait un stockage, donc un choix à retenir, donc une préférence de
 * plus à faire vivre.
 *
 * CHAQUE COUPLE A ÉTÉ MESURÉ au ratio de contraste, page par page, dans les
 * deux modes : rien ne descend sous 4,5:1 pour du texte. C'est ce contrôle
 * qui a révélé que l'ambre des avertissements traînait à 4,19:1 depuis
 * toujours.
 */

:root {
    color-scheme: light dark;

    --encre:      #1b2b2f;   /* la falaise à contre-jour                  */
    --encre-pale: #5d6f72;   /* 4,88:1 sur le fond — lisible, pas criard  */
    --trait:      #dae7e7;
    --trait-fort: #b9cccd;   /* survols, contour des champs               */
    --fond:       #f2f7f7;   /* le sable mouillé, à peine bleuté          */
    --carte:      #ffffff;

    /* L'eau peu profonde. --sur-accent est ce qui se pose dessus. */
    --accent:      #0d6d78;
    --accent-fort: #08535c;
    --sur-accent:  #ffffff;

    /* L'option choisie : l'accent très dilué, pas une seconde teinte. */
    --choix-fond:  #e8f3f4;
    --choix-trait: #a7c9cc;

    --vert:  #17794c;
    --rouge: #c0392b;
    /* Assombri : l'ambre d'origine tombait à 4,19:1 sur son propre fond, sous
       les 4,5 exigés pour du texte. Personne ne l'aurait vu — un avertissement
       qui se lit mal reste lisible pour qui le cherche, et illisible pour qui
       le survole, c'est-à-dire tout le monde. */
    --ambre: #8a5900;

    --rouge-fort: #a5322a;

    --ambre-fond:  #fdf6e8;
    --ambre-trait: #e8dcc0;
    --rouge-fond:  #fdf0ee;
    --vert-fond:   #eaf6f0;
}

/*
 * LA NUIT. Les mêmes noms, les mêmes rôles, les valeurs retournées.
 *
 * Le vert, le rouge et l'accent ne s'inversent pas : ils s'éclaircissent. Un
 * #17794c sur fond noir tombe à 2,3:1 et devient illisible — la nuit demande
 * des teintes plus claires pour porter la même information.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --encre:      #e4efef;
        --encre-pale: #8fa4a6;
        --trait:      #243033;
        --trait-fort: #37474a;
        --fond:       #0c1417;
        --carte:      #131e21;

        --accent:      #4fc3cf;
        --accent-fort: #78d6df;
        --sur-accent:  #0c1417;

        --choix-fond:  #1a2a2d;
        --choix-trait: #3d5a5e;

        --vert:  #55c98d;
        --rouge: #f0796b;
        --ambre: #e0aa50;

        --rouge-fort: #d96254;

        --ambre-fond:  #241f14;
        --ambre-trait: #3d3524;
        --rouge-fond:  #2a1a18;
        --vert-fond:   #10241b;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* Chiffres alignés en colonne : indispensable dès qu'on compare des montants. */
.num, td.num, th.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* --- Barre ------------------------------------------------------------ */

.barre {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    height: 52px;
    /* Du papier, comme la page, séparé par un filet. Une barre pleine et
       sombre serait une seconde couleur au-dessus du logo, et c'est
       justement ce dont on sort. */
    background: var(--carte);
    color: var(--encre);
    border-bottom: 1px solid var(--trait);
}

.barre .marque {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
    letter-spacing: .2px;
}

/* LE LOGO N'EST PLUS UNE IMAGE, C'EST UN MASQUE.
   Le PNG ne garde que sa forme — le trait du dessin, sur du transparent — et
   c'est la couleur de fond qui le remplit. Un seul fichier prend donc
   n'importe quelle teinte, différente le jour et la nuit, sans qu'on ait à
   redessiner quoi que ce soit.

   C'est ce qui permet un logo turquoise. Un filtre `invert` n'aurait donné
   qu'un négatif, c'est-à-dire la couleur complémentaire — du orange, ici.

   L'ÉLÉMENT MASQUÉ EST VIDE, jamais une <img> : un masque découpe le contenu
   d'une image, il ne le recolore pas, et le dessin noir d'origine resterait
   peint par-dessus le fond. Une boîte sans contenu ne montre que son fond.

   Le préfixe -webkit- reste nécessaire pour Safari. La règle `background`
   arrive avant : un navigateur qui ignorerait le masque afficherait un carré
   plein, ce qui se remarque tout de suite — mieux qu'un logo disparu. */
.barre .marque .dessin {
    display: block;
    width: 30px;
    height: 30px;
    background: var(--accent);
    -webkit-mask: url(/assets/logo.png) center / contain no-repeat;
            mask: url(/assets/logo.png) center / contain no-repeat;
}

@media (max-width: 620px) {
    /* Sur un téléphone, le logo suffit à dire où l'on est ; le nom prend la
       place des entrées de menu. */
    .barre .marque span { display: none; }
}

.barre nav { display: flex; gap: 18px; margin-right: auto; }

/* Le picto et son libellé sur une ligne, séparés d'un vrai écart plutôt que
   d'une espace : une espace se casse au repli et laisse l'icône seule en bout
   de ligne. flex-shrink 0 sur le tracé — c'est le mot qui se serre quand la
   place manque, pas le dessin, qui deviendrait illisible. */
.barre nav a { display: inline-flex; align-items: center; gap: 6px; }
.barre nav a .ico { flex: 0 0 auto; }

/* Le picto suit la couleur du lien — currentColor dans le SVG — donc il pâlit
   avec les rubriques inactives et passe à l'accent sur la rubrique courante.
   Un peu plus discret que le texte quand même : à égalité, un tracé de 15 px
   pèse plus lourd à l'œil qu'un mot de 14. */
.barre nav a .ico { opacity: .75; }
.barre nav a:hover .ico,
.barre nav a.actif .ico { opacity: 1; }

.barre nav a {
    color: var(--encre-pale);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.barre nav a:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }

/* La rubrique courante est soulignée ET plus claire : la couleur seule ne
   suffit pas à qui ne la distingue pas. */
.barre nav a.actif { color: var(--encre); border-bottom-color: var(--accent); }

.barre .sortie { display: flex; align-items: center; gap: 12px; margin: 0; }
.barre .qui { color: var(--encre-pale); font-size: 13px; }

/* --- Corps ------------------------------------------------------------ */

main {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

body.etroit main { max-width: 400px; padding-top: 56px; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 28px 0 10px; text-transform: uppercase;
     letter-spacing: .5px; color: var(--encre-pale); }
h3 { font-size: 14px; margin: 22px 0 8px; }

.sous { color: var(--encre-pale); font-size: 13px; margin: 0 0 20px; }

/* Lu, jamais vu.
 *
 * Les pages de Paramètres ont leur nom écrit deux fois : dans l'onglet actif
 * et dans le titre juste en dessous. À l'écran c'est une redondance, alors le
 * titre disparaît — mais il reste dans le document, parce qu'une page sans
 * <h1> perd son sommet de plan et qu'un lecteur d'écran n'a plus rien pour
 * annoncer où il vient d'arriver.
 *
 * display:none et visibility:hidden retireraient l'élément de l'arbre
 * d'accessibilité aussi : le cadre de 1 px découpé est la seule technique qui
 * cache à l'œil sans cacher au reste. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 20px;
}

/* --- Formulaires ------------------------------------------------------ */

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }

input[type=text], input[type=email], input[type=password], input[type=number], select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--trait-fort);
    border-radius: 6px;
    font: inherit;
    background: var(--carte);
    color: var(--encre);
}

input:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

button {
    font: inherit;
    font-weight: 600;
    padding: 9px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: var(--sur-accent);
    cursor: pointer;
}

button:hover { background: var(--accent-fort); }

/* Un bouton d'action se pose en bas à droite de son formulaire : c'est là que
   le regard arrive après avoir lu les champs, et c'est là qu'on le cherche.
   Deux exceptions, et elles sont explicites :
     .large — pleine largeur, sur les formulaires qui n'ont qu'une action et
              tiennent une page à eux seuls (connexion, inscription) ;
     .lien  — la déconnexion, qui est un POST déguisé en lien dans la barre,
              pas une action de formulaire.
   Le sélecteur vise l'enfant DIRECT du formulaire : un bouton imbriqué dans
   un bloc à lui garderait sa mise en page propre. */
form > button:not(.large):not(.lien) {
    display: block;
    margin-top: 16px;
    margin-left: auto;
}

button.large { width: 100%; margin-top: 18px; }

/* Un champ court et son bouton sur la même ligne.
   Le bouton n'est pas un enfant direct du <form> : la règle ci-dessus ne
   l'atteint donc pas, et il reste collé à son champ au lieu de partir à
   droite de la carte. Sous 480 px la ligne se replie et le bouton passe
   dessous, sur toute la largeur — un bouton de 90 px à côté d'un champ de
   100 px ne se vise pas au pouce. */
.champ-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Un nom, un pseudo : deux mots. Un champ large comme la carte promet une
   saisie qui ne vient jamais. */
.champ-ligne input.court { width: auto; flex: 1 1 220px; max-width: 320px; }

@media (max-width: 480px) {
    .champ-ligne input.court { max-width: none; }
    .champ-ligne button { width: 100%; }
}

/* Un bouton qui doit ressembler à un lien — la déconnexion est un POST, pas
   un GET : un lien serait déclenchable depuis une image distante. */
button.lien {
    background: none;
    color: var(--encre-pale);
    /* Le rembourrage vertical ne se voit pas — le bouton n'a ni fond ni
       cadre — mais il porte la cible de 16 px de haut à 30. « Se déconnecter »
       est la seule action du bandeau, et la manquer au pouce sur un téléphone
       est le genre de détail qui fait passer un site pour cassé. */
    padding: 7px 0;
    font-weight: 400;
    font-size: 13px;
    text-decoration: underline;
}

button.lien:hover { background: none; color: var(--encre); }

/* Une action qu'on ne défait pas : retirer une clé, détacher un canal. La
   couleur ne suffit pas à le dire — c'est le libellé qui porte le sens —
   mais elle empêche de cliquer sans regarder. */
button.danger { background: var(--rouge); }
button.danger:hover { background: var(--rouge-fort); }

/* LE MÊME SENS, EN BEAUCOUP PLUS DISCRET : le bouton au bout d'une ligne du
   tableau des comptes. Il n'exécute rien — il ouvre l'écran de confirmation —
   et un pavé rouge par ligne ferait de la page d'administration un champ de
   mines qu'on n'ose plus parcourir. La couleur suffit à dire ce qu'il fait,
   le poids visuel dit qu'il ne le fait pas tout de suite.

   Classe à part plutôt que `lien danger` : les deux règles ont la même
   spécificité, et c'est la dernière écrite qui l'emporterait — un fond rouge
   décidé par l'ordre du fichier, ce qui se casse au premier déplacement. */
button.lien-danger {
    background: none;
    padding: 7px 0;
    color: var(--rouge);
    font-weight: 400;
    font-size: 13px;
    text-decoration: underline;
}

button.lien-danger:hover { background: none; color: var(--rouge-fort); }

/* Le bouton final et son échappatoire sur la même ligne, en bas à droite —
   là où la maison pose ses boutons d'action, et là où le regard arrive après
   avoir lu la fiche.

   « Annuler » PASSE EN PREMIER dans le HTML : il est à gauche de l'action, ce
   qui met l'échappatoire sur le chemin du curseur qui remonte. Et c'est un
   lien, pas un bouton — il ne fait que revenir à la liste ; lui donner
   l'apparence d'un bouton le mettrait à égalité visuelle avec une
   suppression.

   Le `margin-left: auto` que la règle générale pose sur tout bouton de
   formulaire est annulé : ici c'est le conteneur qui aligne, sinon les deux
   éléments se retrouveraient aux deux bouts de la page. */
.actions-suppression {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.actions-suppression > button { margin: 0; }

.actions-suppression a {
    color: var(--encre-pale);
    font-size: 13px;
}

.actions-suppression a:hover { color: var(--encre); }

/* Un lien qui agit comme un bouton. Ici c'est bien un lien : il quitte le
   site pour Telegram, et un POST n'aurait aucun sens. */
.bouton {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--sur-accent);
    font-weight: 600;
    text-decoration: none;
}

.bouton:hover { background: var(--accent-fort); }

/* Explication sous un champ. Assez discrète pour ne pas concurrencer
   l'étiquette, assez lisible pour être lue avant la faute de saisie. */
.aide { margin: 6px 0 0; font-size: 12px; color: var(--encre-pale); }

/* Une case à cocher se lit avec son libellé : le label enveloppe l'input, ce
   qui rend le texte entier cliquable. */
label.case {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 400;
    font-size: 14px;
    /* Le rembourrage remplace une partie de la marge : la ligne cliquable
       passe de 22 px à 32, sans écarter davantage les deux cases. */
    margin: 6px 0;
    padding: 5px 0;
}

/* 18 px et non la taille native, qui vaut 13. Le libellé rend déjà toute la
   ligne cliquable, mais la case reste ce que l'œil vise : à 13 px le doigt la
   manque, et manquer une case à cocher, c'est croire qu'on a coché. */
label.case input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }

/* Un choix entre deux options qui demandent chacune une phrase d'explication.
   Une liste déroulante ne montrerait que les libellés, et il faudrait ouvrir
   puis refermer pour comparer — alors que c'est la comparaison qui décide. */
label.choix {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "radio titre" ".     detail";
    column-gap: 10px;
    align-items: baseline;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    font-weight: 400;
    cursor: pointer;
}

label.choix:hover { border-color: var(--trait-fort); }

/* :has() plutôt qu'une classe posée par le serveur : le cadre suit alors le
   clic immédiatement, sans JavaScript et sans recharger la page. Un
   navigateur trop ancien pour :has() n'affiche pas le cadre — le bouton
   radio, lui, marque toujours le choix. */
label.choix:has(input:checked) {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--choix-fond);
}

label.choix input { grid-area: radio; width: 18px; height: 18px; margin: 0;
                    accent-color: var(--accent); }
.choix-titre  { grid-area: titre; font-size: 14px; font-weight: 600; }
.choix-detail { grid-area: detail; margin-top: 4px; font-size: 12px; color: var(--encre-pale); }

.liste { font-size: 14px; line-height: 1.6; padding-left: 20px; margin: 0 0 18px; }
.liste li { margin-bottom: 6px; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    background: var(--fond);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Une valeur à recopier ailleurs — une adresse IP à coller dans un autre
   site. Assez grande pour être lue sans erreur, encadrée pour qu'un
   double-clic la sélectionne entière. */
code.gros {
    display: inline-block;
    font-size: 16px;
    letter-spacing: .3px;
    padding: 8px 14px;
    border: 1px solid var(--trait);
    background: var(--carte);
    user-select: all;
}


/* Le premier pas, pour qui n'a encore rien fait. Teinté de l'accent et non
   d'une couleur d'alerte : ce n'est ni un avertissement ni une erreur, c'est
   la chose à faire. */
.carte.accueil {
    border-color: var(--choix-trait);
    background: var(--choix-fond);
    margin-bottom: 20px;
}

.carte.accueil h2 { margin-top: 0; color: var(--encre); text-transform: none;
                    letter-spacing: 0; font-size: 16px; }
.carte.accueil p { font-size: 14px; margin: 0 0 14px; }

/* Ce que le parrainage apporte, en deux lignes. Le marqueur est dessiné en
   CSS plutôt qu'avec une puce ou un émoji : il reste net à toute taille et
   ne se lit pas à voix haute par un lecteur d'écran. */
.avantages { list-style: none; padding: 0; margin: 0 0 16px; font-size: 14px; }

.avantages li {
    position: relative;
    padding: 7px 0 7px 26px;
    border-top: 1px solid var(--choix-trait);
}

.avantages li:first-child { border-top: 0; }

.avantages li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 14px;
    width: 6px;
    height: 10px;
    border: solid var(--vert);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.carte.accueil p:last-child { margin-bottom: 0; }

/* --- Onglets -----------------------------------------------------------
 *
 * Sous-navigation d'une rubrique. De vrais liens vers de vraies pages : pas
 * de JavaScript, chaque onglet a son URL, donc son signet et son bouton
 * « précédent ».
 */

.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--trait);
}

.onglets a {
    padding: 8px 14px;
    font-size: 14px;
    color: var(--encre-pale);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.onglets a:hover { color: var(--encre); }

.onglets a.actif {
    color: var(--encre);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

/* --- Pagination -------------------------------------------------------- */

/* Deux flèches et un rang, sous l'historique. Les trois éléments sont espacés
   par `space-between` : les cibles partent aux deux bords, là où le pouce les
   trouve sans viser, et le rang reste au milieu.

   LES CIBLES FONT 44 px DE HAUT, rembourrage compris. C'est la taille sous
   laquelle on manque un bouton au doigt, et deux liens côte à côte qu'on
   manque une fois sur trois valent moins qu'un seul qu'on atteint. */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    font-size: 14px;
}

.pagination a {
    padding: 11px 14px;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--trait);
    border-radius: 6px;
}

.pagination a:hover { border-color: var(--accent); background: var(--choix-fond); }

/* Une extrémité atteinte n'est pas un lien : elle garde sa place pour que les
   deux autres éléments ne se déplacent pas d'une page à l'autre, et elle est
   assez pâle pour qu'on ne l'essaie pas. Contraste tenu au-dessus du seuil
   quand même — un texte illisible n'est pas « désactivé », il est raté. */
.pagination .inactif {
    padding: 11px 14px;
    color: var(--encre-pale);
    border: 1px solid transparent;
}

.pagination .rang { color: var(--encre-pale); }

/* Sur un téléphone, les trois passent en colonne plutôt que de se serrer :
   deux cibles de 44 px aux deux bouts d'un écran de 320 px se touchent
   presque, et le rang se retrouverait écrasé entre elles. */
@media (max-width: 420px) {
    .pagination { flex-direction: column; align-items: stretch; text-align: center; }
    .pagination .rang { order: -1; }
}

/* --- Prévisionnel ------------------------------------------------------ */

/* Le bloc qui ouvre la page Mouvements : ce que le bot achèterait s'il passait
   maintenant. Il se distingue du reste par sa bordure d'accent — c'est la
   seule chose de la page qui parle du futur, et la confondre avec un achat
   déjà passé serait la pire lecture possible. */

.previsionnel {
    border-left: 3px solid var(--accent);
    margin: 0 0 18px;
    overflow-x: auto;
}

.previsionnel-titre {
    margin: 0 0 12px;
    font-size: 15px;
}

/* Le total est le seul chiffre qu'on lit de loin. */
.previsionnel-titre strong { font-size: 19px; color: var(--accent); }

.previsionnel table { margin-bottom: 12px; }
.previsionnel .sous { margin-bottom: 0; }

/* QUAND LE PROCHAIN PASSAGE PÈSE TROP LOURD sur ce qui reste. Le signal vaut
   pour toutes les cadences : on vient sur cette page pour voir ce que le bot
   va acheter, et s'y taire cacherait ce qu'on est venu chercher. Seul le
   message du soir, qui interrompt, reste réservé à l'hebdomadaire.

   LE BLOC GARDE SA FORME ET CHANGE DE COULEUR. Sortir l'alerte dans un avis
   posé au-dessus en ferait deux nombres à rapprocher : celui du prévisionnel,
   et celui de l'alerte. Ici c'est le MÊME chiffre qui change de ton — la
   bordure et le total, les deux seules choses qu'on lit de loin.

   L'ÉCHELLE EST CELLE DES AVIS, ambre puis rouge, et pas une de plus : le
   lecteur n'a pas à apprendre deux vocabulaires de couleur pour une même
   page. L'accent ne revient qu'une fois le compte alimenté. */
.previsionnel.warn  { border-left-color: var(--ambre); }
.previsionnel.error { border-left-color: var(--rouge); }
.previsionnel.warn  .previsionnel-titre strong { color: var(--ambre); }
.previsionnel.error .previsionnel-titre strong { color: var(--rouge); }

/* L'avis vit DANS la carte : il qualifie le montant juste au-dessus, et se
   colle au tableau qu'il commente. */
.previsionnel .avis { margin: 0 0 14px; }

/* --- Recherche du meilleur réglage ------------------------------------- */

/* Il ne reste de ce bloc qu'un voile, le temps du calcul. Il a occupé une carte
   entière — classement, fenêtres glissantes, témoin DCA — et c'était une page
   d'explications au milieu d'un formulaire de réglage. Le mode simple existe
   pour ne pas en demander tant. */

/* LE VOILE SE POSE SUR L'APERÇU, donc sur ce qui va changer. Il a d'abord été
   une ligne de texte sous le titre : trop discret, on la manquait, et le rythme
   changeait tout seul trois secondes plus tard sans que rien ne l'ait annoncé. */
.apercu-zone { position: relative; }

.voile {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* IL NE CAPTURE RIEN. Un voile qui prend les clics transformerait un
       serveur lent en page bloquée — et le bouton Enregistrer du bas resterait
       cliquable pendant que celui du haut ne le serait plus. Deux boutons
       identiques au comportement différent est pire que pas de protection. */
    pointer-events: none;
    /* La couleur d'abord en dur pour les navigateurs sans color-mix : ils
       auront un voile opaque, ce qui reste juste — seulement moins joli. */
    background: var(--fond);
    background: color-mix(in srgb, var(--fond) 78%, transparent);
    backdrop-filter: blur(1.5px);
}

/* Le message reste HAUT dans la zone : l'aperçu fait plusieurs écrans de long
   sur un téléphone, et un message centré verticalement se retrouverait hors du
   champ visible pendant qu'on regarde les tuiles. */
.voile-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 14px 20px;
    max-width: 90%;
    /* Pas d'ombre portée : tout ce qui colore ce fichier passe par une
       variable, sans exception, et une ombre demanderait une teinte de plus.
       Le contour d'accent détache assez la carte du voile. */
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--carte);
    font-size: 14px;
    color: var(--encre);
}

/* Il reste visible quand la page défile sous lui : le calcul dure quelques
   secondes, et on regarde souvent ailleurs pendant ce temps-là. */
@supports (position: sticky) {
    .voile-message { position: sticky; top: 16px; }
}

.sim-rond {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid var(--trait-fort);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: sim-tourne .8s linear infinite;
}

@keyframes sim-tourne { to { transform: rotate(360deg); } }

/* Une animation qui tourne sans fin est exactement ce que « prefers-reduced-
   motion » demande d'éviter. Le repère reste, il cesse de tourner. */
@media (prefers-reduced-motion: reduce) {
    .sim-rond { animation: none; border-top-color: var(--trait-fort); }
    .voile { backdrop-filter: none; }
}

/* L'échec, lui, se lit sous le titre : il n'a rien à couvrir, et il doit rester
   affiché après la disparition du voile. */
.sim-echec {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--encre-pale);
}

/* Le second Enregistrer, sous les tuiles. Il se détache du tableau qui le suit
   sans ouvrir un blanc de fin de page : ce n'est pas la fin du formulaire, la
   lecture continue en dessous. */
#apercuOk > .actions { margin: 4px 0 22px; }

/* --- Avis -------------------------------------------------------------- */

.avis {
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 3px solid var(--trait);
    background: var(--carte);
    font-size: 14px;
    margin: 0 0 18px;
}

.avis.warn  { border-left-color: var(--ambre); background: var(--ambre-fond); color: var(--ambre); }
.avis.error { border-left-color: var(--rouge); background: var(--rouge-fond); color: var(--rouge); }
.avis.ok    { border-left-color: var(--vert);  background: var(--vert-fond);  color: var(--vert); }

/* --- Indicateurs chiffrés ----------------------------------------------
 *
 * Trois nombres de même poids : aucun n'est le titre de la page, ils se
 * lisent ensemble. D'où trois tuiles égales plutôt qu'un chiffre héros.
 *
 * Chiffres PROPORTIONNELS ici, et non tabulaires : à cette taille,
 * tabular-nums donne à chaque chiffre la largeur d'un zéro et « 1 204 »
 * paraît disloqué. Le tabulaire reste réservé aux colonnes de tableau, où
 * l'alignement vertical prime.
 */

.tuiles {
    display: grid;
    /* auto-fit plutôt que « repeat(3, 1fr) » : le tableau de bord en pose
       trois, la page Admin quatre, et une grille figée laissait la quatrième
       seule sur sa ligne. La largeur minimale garde trois tuiles côte à côte
       là où c'était déjà le cas. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin: 18px 0 14px;
}

.tuile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 16px 18px;
}

.tuile .etiquette {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--encre-pale);
    font-weight: 600;
}

.tuile .valeur {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.5px;
}

.tuile .note { font-size: 12px; color: var(--encre-pale); }

/* Le signe + ou − précède toujours la valeur : la couleur seule ne porte
   jamais l'information. */
.tuile .note.gain  { color: var(--vert); font-weight: 600; }
.tuile .note.perte { color: var(--rouge); font-weight: 600; }

/* Deux chiffres sur une même ligne, chacun avec SA couleur : le gain de la
   position vient du marché, celui du bot de la modulation des montants, et
   leurs signes s'opposent souvent. Une couleur commune ferait mentir l'un des
   deux — d'où les classes portées par les enfants et non par la ligne. */
.tuile .note.lignette {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 4px;
}

.tuile .note.lignette .gain,
.tuile .note.lignette .perte { font-weight: 600; }

/* Le séparateur appartient à la ligne, pas aux chiffres : sa couleur est
   neutre, sinon il prendrait celle du second et se lirait comme un signe. */
.tuile .note.lignette > span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--encre-pale);
    font-weight: 400;
}

/* Le chiffre du bot mène au tableau qui l'explique. Le lien garde la couleur
   de son signe — le bleu par défaut effacerait le vert ou le rouge, qui est
   l'information — et se signale par un soulignement discret plutôt que par
   une seconde couleur. */
.tuile .note.lignette a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.tuile .note.lignette a:hover { text-decoration-style: solid; }

@media (max-width: 760px) {
    .tuiles { grid-template-columns: 1fr; }
    .tuile .valeur { font-size: 26px; }
}

/* --- Tableaux ---------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--encre-pale);
    font-weight: 600;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--trait);
}

td { padding: 9px 10px; border-bottom: 1px solid var(--trait); }
tr:last-child td { border-bottom: 0; }

/* Une ligne de total se lit comme une ligne de plus si rien ne l'en sépare.
   Le trait passe au-dessus : la dernière ligne du corps a perdu le sien par
   la règle ci-dessus, et c'est très bien — un seul trait, au bon endroit. */
tfoot th, tfoot td { border-bottom: 0; border-top: 1px solid var(--trait); padding: 10px; }

.gain { color: var(--vert); }
.perte { color: var(--rouge); }

/*
 * Une précision sous la valeur, dans la même cellule : le pourcentage sous le
 * montant, le nombre d'ordres sous le marché. Une colonne de plus pour chacune
 * rendrait le tableau illisible sur un téléphone.
 */
.sous-cell {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--encre-pale);
    margin-top: 2px;
}

/* Un tableau large ne doit jamais élargir la page : c'est lui qui défile. */
.defile { overflow-x: auto; }

/* LA COLONNE D'ACTION RESTE VISIBLE PENDANT QUE LE RESTE DÉFILE.
   Le tableau des comptes a treize colonnes et ne tient sur aucun écran : il
   défile, et la dernière colonne — celle qui porte « Supprimer » — sortait du
   cadre. Un bouton qu'il faut aller chercher en poussant la page à droite est
   un bouton qu'on clique sans avoir lu la ligne qu'il vise.

   `position: sticky` la colle au bord droit du conteneur qui défile. Le fond
   est OBLIGATOIRE : sans lui, les colonnes glissent visiblement dessous.
   Le liseré à gauche dit que quelque chose passe derrière, et non que la
   colonne est le prolongement de la précédente. */
.defile .col-action {
    position: sticky;
    right: 0;
    background: var(--carte);
    border-left: 1px solid var(--trait);
    padding-left: 12px;
    text-align: right;
}

/* --- Un tableau qui devient des cartes, sur petit écran ------------------
 *
 * POURQUOI. À sept colonnes, un tableau ne tient pas sur un téléphone : il
 * défile latéralement, et les colonnes qui portent la conclusion — le gain,
 * la valeur — sont justement celles qu'on ne voit pas sans pousser la page.
 * On lit alors des quantités de bitcoin à huit décimales, et rien d'autre.
 *
 * COMMENT. Sous 620 px, chaque ligne devient un bloc : le nom de la crypto en
 * tête, puis une valeur par ligne, chacune précédée de son intitulé — repris
 * de l'attribut data-intitule, puisque l'en-tête du tableau a disparu. Plus
 * aucun défilement horizontal.
 *
 * L'ORDRE EST DONNÉ ICI, par table, avec `order`. C'est la seule façon de
 * réordonner sans toucher au HTML, donc sans changer l'affichage sur
 * ordinateur — et c'est bien deux lectures différentes qu'on veut : sur un
 * grand écran l'œil balaie une ligne entière, sur un téléphone il descend, et
 * ce qui compte doit venir en premier.
 *
 * Un td SANS data-intitule ne reçoit pas d'étiquette : c'est ce qui laisse la
 * première cellule faire le titre du bloc.
 * -------------------------------------------------------------------- */

@media (max-width: 620px) {
    .cartes table, .cartes tbody, .cartes tfoot { display: block; }

    /* L'en-tête n'a plus de colonnes à nommer : les intitulés sont passés
       dans les cellules. */
    .cartes thead { display: none; }

    /* flex et non block : `order` n'a d'effet que sur un enfant de flex. */
    .cartes tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--trait);
        border-radius: 8px;
        padding: 12px 14px;
        margin-bottom: 10px;
    }

    .cartes tbody tr:last-child { margin-bottom: 0; }

    .cartes tfoot tr {
        margin-top: 10px;
        margin-bottom: 0;
        border-color: var(--encre-pale);
    }

    .cartes td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 5px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    /* L'intitulé, pris à la cellule elle-même. Le margin-right auto le colle
       à gauche et pousse TOUT le reste à droite d'un bloc : sans lui, un
       montant suivi de son pourcentage se retrouvait écartelé aux deux bouts
       de la ligne, le montant flottant au milieu de nulle part. */
    .cartes td[data-intitule]::before {
        content: attr(data-intitule);
        flex: 0 1 auto;
        margin-right: auto;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        color: var(--encre-pale);
    }

    /* La première cellule fait le titre du bloc : pas d'étiquette, pas de
       mise en ligne, et un trait qui la sépare des valeurs. */
    .cartes td:first-child {
        display: block;
        text-align: left;
        font-weight: 600;
        font-size: 15px;
        padding: 0 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--trait);
    }

    /* Une cellule qui ne portait qu'un tiret n'a rien à dire ici, où chaque
       valeur coûte une ligne entière. */
    .cartes td.vide { display: none; }

    /* Le pourcentage sous le montant redevient une suite, faute de place au
       même endroit. */
    .cartes td .sous-cell { display: inline; margin: 0 0 0 6px; }
    .cartes td:first-child .sous-cell { display: block; margin: 3px 0 0; }

    /* --- L'ordre, table par table ---
       Les numéros de colonne sont ceux du HTML ; l'ordre visuel est celui
       qu'on veut lire sur un téléphone. */

    /* Ce que le bot a acheté : crypto, gain, valeur, puis le détail. */
    .cartes-positions td:nth-child(1) { order: 1; }   /* Crypto              */
    .cartes-positions td:nth-child(7) { order: 2; }   /* Gain                */
    .cartes-positions td:nth-child(6) { order: 3; }   /* Valeur              */
    .cartes-positions td:nth-child(2) { order: 4; }   /* Quantité            */
    .cartes-positions td:nth-child(3) { order: 5; }   /* Prix d'achat moyen  */
    .cartes-positions td:nth-child(4) { order: 6; }   /* Prix actuel         */
    .cartes-positions td:nth-child(5) { order: 7; }   /* Investi             */

    /* Ce que le bot a apporté : crypto, gain, les deux valeurs face à face,
       puis les deux quantités. */
    .cartes-apport td:nth-child(1) { order: 1; }      /* Crypto              */
    .cartes-apport td:nth-child(6) { order: 2; }      /* Gain du bot         */
    .cartes-apport td:nth-child(4) { order: 3; }      /* Valeur              */
    .cartes-apport td:nth-child(5) { order: 4; }      /* Valeur sans le bot  */
    .cartes-apport td:nth-child(2) { order: 5; }      /* Quantité actuelle   */
    .cartes-apport td:nth-child(3) { order: 6; }      /* Quantité sans bot   */
}

/* Un bloc détaché de ce qui précède. Cette classe existe parce que la CSP du
   site interdit les styles en ligne : un style="margin-top:16px" écrit dans
   une page est ignoré par le navigateur SANS erreur visible, et l'espacement
   disparaît sans que rien ne le signale. Les pages ont vécu des mois avec des
   marges qui ne s'appliquaient pas. tests/teste_budget.php refuse désormais
   tout attribut style dans www/. */
.detache { margin-top: 16px; }

/* --- Budget ------------------------------------------------------------ */

/* Deux façons de régler la même chose. Un bouton segmenté et non une seconde
   barre d'onglets : la barre d'onglets dit « où je suis dans les paramètres »,
   ceci dit « comment je saisis », ce n'est pas le même niveau de navigation. */
/* Une phrase d'introduction à gauche, le choix qui gouverne la page à droite.
   Les deux marges basses sont reprises par le conteneur : sans cela le
   paragraphe et le sélecteur, qui portent chacun la leur, ne s'alignaient
   pas sur la même ligne de base. Sous 620 px la ligne se replie et le
   sélecteur passe dessous, à gauche — un bouton collé au bord droit d'un
   téléphone se vise mal. */
.tete-bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: 22px;
}

.tete-bloc > .sous     { margin: 0; }
.tete-bloc > .segments { margin: 0; flex: 0 0 auto; }

.segments {
    display: inline-flex;
    margin: 0 0 22px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    overflow: hidden;
    background: var(--carte);
}

.segments a {
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre-pale);
    text-decoration: none;
    border-right: 1px solid var(--trait);
}

.segments a:last-child { border-right: 0; }
.segments a:hover { color: var(--encre); background: var(--fond); }
.segments a.actif { background: var(--accent); color: var(--sur-accent); }

/* Masquage piloté par le JavaScript de l'aperçu. Une classe et non un
   style="display:none" : la CSP interdit les styles en ligne, et un
   style écrit là serait ignoré sans le moindre message. */
.cache { display: none; }

.curseur { margin: 10px 0 22px; }

.curseur input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); }

.curseur-repere {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    color: var(--encre-pale);
}

.saisie-euro { display: flex; align-items: center; gap: 10px; }
.saisie-euro input { width: 150px; }
.saisie-euro span { font-size: 13px; color: var(--encre-pale); }


/* Bornes saisies dans un tableau : assez larges pour six caractères, pas plus,
   sinon la colonne des montants perd son alignement. */
input.borne { width: 104px; text-align: right; padding: 6px 8px; }

/* Le seuil de vente : un nombre, puis son unité, sur la même ligne. Le « % »
   est hors du champ — dans le champ, il empêcherait la saisie au clavier
   numérique et les flèches de l'input number. */
.seuil-saisie {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
}

.seuil-saisie input { width: 110px; }

/* Une case seule dans une cellule de tableau, sans libellé visible : le label
   qui l'enveloppe n'apporte pas de texte, seulement de la surface. */
label.coche {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px 4px;
    cursor: pointer;
}

label.coche input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* Les deux boutons sont dans un bloc à eux, donc hors de la règle
   « form > button » : on les aligne ici, du même côté et pour la même raison. */
.actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

/* Bouton secondaire : même hauteur que le principal, sans sa gravité.
   Recalculer n'écrit rien, ça ne doit pas ressembler à enregistrer. */
button.lien-sobre {
    background: none;
    color: var(--accent);
    border: 1px solid var(--trait);
}

button.lien-sobre:hover { background: var(--fond); color: var(--accent); }

button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { background: var(--accent); }

/* Deux montants dans une tuile : la police pleine taille déborderait. */
.tuile .valeur.compacte { font-size: 21px; }

/* --- Page publique ----------------------------------------------------- */

/* La typographie de l'application est celle d'un outil : titres petits, en
   capitales, discrets — on y vient pour des chiffres, pas pour lire. La page
   publique, elle, s'adresse à quelqu'un qui découvre et qui lit. Ses titres
   redeviennent des titres.

   Ces règles précèdent celles du .hero, qui a la même spécificité : c'est
   l'ordre du fichier qui les départage, et le .hero doit gagner. */
.public h2 {
    font-size: 20px;
    margin: 36px 0 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--encre);
}

.public h3 { font-size: 15px; margin: 20px 0 6px; }
.public h3:first-child { margin-top: 0; }
.public .carte + .sous { margin-top: 10px; }


/* Accès au compte pour un visiteur, à droite du bandeau. Il reprend l'allure
   des entrées de menu plutôt que celle d'un bouton : c'est une destination,
   pas une action. */
.barre .compte {
    color: var(--encre);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--trait-fort);
    border-radius: 6px;
}

.barre .compte:hover { background: var(--fond); border-color: var(--encre-pale); }

.hero {
    text-align: center;
    padding: 26px 0 12px;
}

.hero h1 { font-size: 30px; line-height: 1.25; margin: 0 auto 14px; max-width: 660px; }
.hero h2 { font-size: 24px; text-transform: none; letter-spacing: 0;
           color: var(--encre); margin: 0 0 12px; }

.hero-phrase {
    max-width: 620px;
    margin: 0 auto 22px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--encre-pale);
}

/* Le prix du service, juste au-dessus des boutons. Une pastille et non une
   ligne de texte : c'est ce qu'on vient chercher, et ça doit se lire sans être
   lu. Le vert du gain plutôt que l'accent — l'accent est celui des boutons
   voisins, et deux fois la même couleur côte à côte se disputerait le regard
   au lieu de se le passer. */
.hero-ticket {
    display: inline-block;
    margin: 0 0 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--vert-fond);
    color: var(--vert);
    font-size: 15px;
    line-height: 1.4;
}

/* Le prix barré. IL GARDE LA COULEUR DU TEXTE, sans opacité : un prix qu'on
   affiche doit rester lisible, et pâlir la barre pour « faire remise » la
   ferait passer sous le seuil de contraste. C'est la barre qui dit qu'il ne
   s'applique pas, pas la pâleur.

   Le trait est épaissi : à 13 px, le trait par défaut des navigateurs
   s'efface, et un prix barré qu'on ne voit pas barré est un prix tout court. */
.hero-barre {
    font-size: 13px;
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
}

/* Ce qu'on investit, sous le prix du service. Discret et distinct : les deux
   chiffres ne parlent pas de la même poche, et les mettre au même niveau
   ferait lire « 35 € par mois » comme un tarif — ce qu'il n'est pas. */
.hero-investi {
    max-width: 460px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--encre-pale);
}

.hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0; }

.hero.final {
    margin-top: 34px;
    padding: 30px 20px;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 8px;
}

/* Second bouton d'un couple : même forme, moins de poids. Le premier porte
   l'action qu'on recommande, celui-ci celle qu'on n'empêche pas. */
.bouton-pale {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    background: var(--carte);
    border: 1px solid var(--trait);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.bouton-pale:hover { background: var(--fond); border-color: var(--trait-fort); }

/* Un texte suivi, à lire. Plus grand et plus aéré que .sous, qui est une note.
   Il occupe toute la largeur de son parent : borner la ligne à 720 px pendant
   que les cartes voisines allaient jusqu'à 1040 laissait un bord droit en
   dents de scie, une colonne sur deux s'arrêtant plus tôt que l'autre. C'est
   la largeur du <main> qui tient le rôle — une seule limite pour tout le
   contenu, au lieu d'une par élément. */
.texte { font-size: 15px; line-height: 1.65; margin: 0 0 16px; }

.etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.etape {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 18px 20px 20px;
}

.etape-n {
    width: 30px; height: 30px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--sur-accent);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape h3 { margin: 0 0 6px; font-size: 15px; }
.etape p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--encre-pale); }

/* Ce que le bot ne fait jamais. Le marqueur est dessiné en CSS plutôt qu'avec
   une puce ou un émoji : net à toute taille, et muet pour un lecteur d'écran,
   qui lit le texte et pas la décoration. */
.jamais { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.6; }

.jamais li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-top: 1px solid var(--trait);
}

.jamais li:first-child { border-top: 0; padding-top: 0; }

.jamais li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 17px;
    width: 12px;
    height: 2px;
    background: var(--vert);
    border-radius: 1px;
}

.jamais li:first-child::before { top: 7px; }

/* L'avertissement sur les risques. Teinté, mais pas rouge : ce n'est pas une
   erreur, c'est une mise en garde qu'on veut voir lue et non écartée. */
.carte.avertissement {
    border-color: var(--ambre-trait);
    background: var(--ambre-fond);
}

.carte.avertissement p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.carte.avertissement p:last-child { margin-bottom: 0; }

.pied a { color: var(--encre-pale); }

@media (max-width: 620px) {
    .hero h1 { font-size: 24px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
}

/* --- Textes juridiques ------------------------------------------------- */

/* Un contrat se lit en entier ou pas du tout : la hiérarchie des titres est
   donc plus marquée qu'ailleurs, et le sommaire donne la sortie de secours. */
.juridique h1 { font-size: 26px; margin: 0 0 8px; }
.juridique h2 { font-size: 18px; margin: 34px 0 12px; }
.juridique h3 { font-size: 15px; margin: 22px 0 8px; }
.juridique .carte + h2 { margin-top: 30px; }
.juridique .carte .jamais li { font-size: 14px; }

/* Le sommaire garde ses numéros : ils rappellent que le texte est numéroté,
   et un lecteur qui cite « l'article 9 » retrouve la même numérotation. */
.sommaire {
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.9;
    columns: 2;
    column-gap: 28px;
}

.sommaire a { color: var(--accent); }

/* Le résumé en tête. Encadré et teinté, pour qu'on voie tout de suite qu'il
   n'est pas un article de plus — l'avertissement de non-contractualité, lui,
   reste écrit noir sur blanc. */
.carte.resume { border-color: var(--choix-trait); background: var(--choix-fond); }
.carte.resume h2 { margin: 0 0 4px; font-size: 17px; }
.carte.resume .aide { margin: 0 0 12px; }

/* Les fiches d'identité : libellé à gauche, valeur à droite, alignées. En
   dessous de 520 px la colonne des libellés mangerait la valeur — les deux
   repassent alors l'une sous l'autre. */
.fiche {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.fiche dt { color: var(--encre-pale); }
.fiche dd { margin: 0; }

/* LE BLOC « ÉDITEUR DU SITE » PORTE LE LOGO, EN GRAND, À SA DROITE.
   Sur un contrat, savoir de qui vient l'engagement compte autant que le lire :
   la marque tient ce rôle mieux qu'une ligne de plus dans la fiche.

   Le logo prend l'accent comme dans la barre, par le même masque — la source
   est ici logo-180.png et non logo.png, parce qu'un masque de 96 px étiré à
   150 en ressortirait flou. La fiche garde `min-width: 0` : sans elle, une
   adresse longue refuserait de se replier et pousserait le logo dehors. */
.carte.editeur { display: flex; align-items: center; gap: 32px; }
.carte.editeur .fiche { flex: 1 1 auto; min-width: 0; }

.editeur-logo {
    display: block;
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    background: var(--accent);
    -webkit-mask: url(/assets/logo-180.png) center / contain no-repeat;
            mask: url(/assets/logo-180.png) center / contain no-repeat;
}

/* Sous 760 px, la fiche et le logo côte à côte laisseraient trop peu de place
   au texte : le logo s'efface plutôt que de rétrécir jusqu'à l'insignifiance. */
@media (max-width: 760px) {
    .carte.editeur { display: block; }
    .editeur-logo { display: none; }
}

@media (max-width: 620px) {
    .sommaire { columns: 1; }
    .fiche { grid-template-columns: 1fr; gap: 0 0; }
    .fiche dt { margin-top: 10px; font-size: 13px; }
    .fiche dt:first-child { margin-top: 0; }
}

/* La case d'acceptation des conditions, sous le formulaire d'inscription.
   Le libellé enveloppe la case : cliquer sur le texte coche, ce qui évite
   une cible de 13 px de côté au doigt. */
.accepte { margin: 18px 0 4px; font-size: 13px; line-height: 1.55; }

.accepte label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--encre);
    cursor: pointer;
}

.accepte input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

/* --- Fil de démarrage --------------------------------------------------- */

/* La ligne sous le bandeau, tant que la configuration n'est pas terminée.
   Ambre et non rouge : rien n'est cassé, il reste quelque chose à faire.

   Toute la ligne est le lien, pas seulement le libellé : à 320 px, une cible
   de la largeur de l'écran se touche sans viser. */
.fil-demarrage {
    margin: 0;
    background: var(--ambre-fond);
    border-bottom: 1px solid var(--ambre-trait);
    font-size: 13px;
}

.fil-demarrage a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 1040px;
    margin: 0 auto;
    padding: 9px 20px;
    color: var(--ambre);
    text-decoration: none;
}

.fil-demarrage a:hover { text-decoration: underline; }

/* La flèche est poussée à droite sur large écran et suit le texte quand la
   ligne se replie : margin-left auto sur un enfant de flex-wrap fait les deux
   sans media query. */
.fil-demarrage .fil-fleche { margin-left: auto; }

/* Le bandeau du compte de démonstration. Même place et même forme que le fil
   de démarrage — il le remplace — mais TEINTE DE L'ACCENT et non de l'ambre :
   l'ambre veut dire « il reste quelque chose à faire », et il n'y a rien à
   faire ici. C'est un repère, pas une alerte.

   Il ne mène nulle part, donc pas de lien : le paragraphe porte lui-même la
   largeur et les marges que .fil-demarrage confie à son <a>. */
.fil-demo {
    margin: 0;
    background: var(--choix-fond);
    border-bottom: 1px solid var(--choix-trait);
    color: var(--accent);
    font-size: 13px;
    line-height: 1.55;
}

/* La bande occupe toute la largeur, son texte s'aligne sur le contenu des
   pages : c'est le rôle du span, exactement comme le <a> du fil de démarrage. */
.fil-demo span {
    display: block;
    max-width: 1040px;
    margin: 0 auto;
    padding: 9px 20px;
}

/* « Compte de démonstration » ne se coupe pas en deux lignes : c'est ce que
   le lecteur doit saisir d'un coup d'œil, le reste peut se replier. */
.fil-demo strong { white-space: nowrap; }

/* --- Parcours de démarrage ---------------------------------------------- */

/* Le pas-à-pas de /demarrer.php. Une seule étape est ouverte à la fois : les
   autres n'ont qu'une tête, et c'est la liste elle-même qui montre le chemin.

   La numérotation est portée par les puces écrites dans le HTML — la puce
   d'une étape faite est une coche, ce qu'un compteur CSS ne sait pas dire. */
.parcours {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.etape-tunnel {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
}

/* L'étape ouverte se distingue par un liseré d'accent plutôt que par une
   couleur de fond : le contenu du formulaire garde ainsi le même fond blanc
   que partout ailleurs. */
.etape-tunnel.courante {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.etape-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }

/* Ce qu'une étape franchie a laissé : la date de confirmation, le budget, le
   solde lu chez Bitvavo. Poussé à droite par margin-left auto — et, quand la
   ligne se replie sur un téléphone, il passe dessous en restant aligné à
   droite, sans media query. */
.etape-resume {
    margin-left: auto;
    font-size: 12px;
    color: var(--encre-pale);
    text-align: right;
}

.etape-puce {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--trait);
    color: var(--encre-pale);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etape-tunnel.courante .etape-puce { background: var(--accent); color: var(--sur-accent); }
.etape-tunnel.faite   .etape-puce { background: var(--vert);   color: var(--sur-accent); }

.etape-nom { font-size: 14px; font-weight: 600; }
.etape-tunnel.faite .etape-nom { font-weight: 400; color: var(--encre-pale); }

.etape-corps { padding: 14px 0 4px 38px; }

/* Le premier titre du corps ne doit pas rouvrir une marge au-dessus : il
   suit immédiatement la tête de l'étape. */
.etape-corps > :first-child { margin-top: 0; }
.etape-corps .carte { margin-bottom: 16px; }

/* Les boutons du site s'alignent à droite : ils terminent un formulaire posé
   dans une carte, et le regard les trouve là. Dans le tunnel, un bouton est
   l'action de l'étape, pas la fin d'une saisie — il se range à gauche, dans
   le fil du texte qui vient de l'annoncer. */
.etape-corps form > button:not(.large):not(.lien) { margin-left: 0; }

/* Sous 620 px, le retrait de 38 px coûte un cinquième de la largeur utile
   pour un alignement que personne ne remarque. */
@media (max-width: 620px) {
    .etape-corps { padding-left: 0; }
    .etape-tunnel { padding: 12px 14px; }
}

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

.pied {
    max-width: 1040px;
    margin: 0 auto;
    padding: 18px 20px 40px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--encre-pale);
    font-size: 12px;
    border-top: 1px solid var(--trait);
}

@media (max-width: 620px) {
    .barre { gap: 12px; padding: 0 12px; }
    .barre nav { gap: 12px; }
    .barre .qui { display: none; }
    .pied { flex-direction: column; gap: 6px; }
}

/* --- Très petits écrans ------------------------------------------------ */

/* En dessous de 480 px, le bandeau d'un compte connecté ne tient plus sur une
   ligne : marque + trois rubriques + « Se déconnecter » débordaient de 27 px
   à 320, et TOUTE la page se mettait alors à défiler latéralement — sur
   chaque page, pas seulement celle-là.

   Il passe donc sur deux lignes : la marque et la sortie en haut, le menu en
   dessous sur toute la largeur. La hauteur devient libre — un `height: 52px`
   fixe aurait fait sortir la seconde ligne du bandeau. */
@media (max-width: 480px) {
    .barre {
        flex-wrap: wrap;
        height: auto;
        min-height: 52px;
        padding: 8px 12px;
        gap: 6px 12px;
    }

    /* L'ordre visuel diffère de l'ordre du document : le menu est déclaré
       avant la sortie, mais c'est lui qui prend la seconde ligne. */
    .barre .marque { order: 0; margin-right: auto; }
    .barre .sortie { order: 1; }

    .barre nav {
        order: 2;
        width: 100%;
        margin: 0;
        gap: 16px;
        /* Trois rubriques tiennent à 320 px. Une quatrième défilerait plutôt
           que de repousser la page. */
        overflow-x: auto;
        scrollbar-width: none;
    }

    .barre nav::-webkit-scrollbar { display: none; }
    .barre nav a { white-space: nowrap; gap: 5px; }
}

/* La cible tactile du curseur de budget. Un input[type=range] fait 16 px de
   haut : praticable à la souris, étroit pour un pouce. On ne l'élargit que
   pour les pointeurs imprécis — sur un écran tactile, donc, et pas sur un
   portable dont l'écran est petit mais qui a un pavé. */
@media (pointer: coarse) {
    .curseur input[type=range] { height: 32px; }
    .pied a { display: inline-block; padding: 3px 0; }
}