/*
 * Le site de Cockpit.
 *
 * ## Le langage visuel, en trois regles
 *
 * 1. **Des aplats, pas des degrades.** Quatre couleurs franches sur un fond creme. La couleur
 *    est de la MATIERE : un bloc entier, pas un accent timide.
 * 2. **Un trait de 2 px et une ombre PORTEE SANS FLOU.** C'est ce qui donne le relief. Une
 *    ombre floue ferait un site de plus ; une ombre decalee et nette fait un objet.
 * 3. **Pas d'arrondis.** Les angles sont vifs partout. `--rayon` vaut zero et reste un token :
 *    le jour ou l'on veut arrondir, c'est une ligne.
 *
 * Les NOMS de classes sont ceux des gabarits existants. C'est deliberé : les pages de
 * connexion, de compte et du tableau de bord n'ont pas eu a etre reecrites pour suivre le
 * nouveau design — elles heritent des memes composants.
 *
 * ## Ce qu'il ne faut pas y remettre
 *
 * Le halo (`.lueur`) du theme sombre a disparu avec lui. Sur un fond creme il n'a plus de sens,
 * et le gabarit ne le pose plus.
 */

:root {
    /* Les quatre couleurs, et rien d'autre. */
    --fond: #f5f1e8;
    --fond-carte: #f5f1e8;
    --fond-creux: #ece5d7;
    --encre: #12100e;
    --accent: #f4531f;
    --accent-vif: #d8410f;
    --accent-sourd: #ffe9a3;
    --jaune: #ffc300;

    --texte: #12100e;
    /* Sur un fond creme, un gris franc porte mieux qu'un noir dilue. */
    --texte-doux: #4a453d;
    --texte-discret: #7a736a;

    --bordure: #12100e;
    --vert: #0d7a52;
    --rouge: #b3251a;

    --rayon: 0;
    --largeur: 1240px;

    --trait: 2px solid var(--bordure);
    /* Le decalage de l'ombre porte le relief. Sans flou : c'est ce qui fait « objet ». */
    --ombre: 5px 5px 0 var(--encre);
    --ombre-courte: 3px 3px 0 var(--encre);
    --ombre-accent: 4px 4px 0 var(--accent);

    --titre: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --systeme: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* La barre du haut est collante : sans cette marge, un lien d'ancre (#fonctionnalites,
   #telecharger) amene le titre visé DERRIERE elle, et on croit que le lien n'a rien fait. */
html { scroll-padding-top: 96px; }

/* Le defilement doux gene les personnes sensibles au mouvement, et ce n'est pas a elles de
   desactiver quelque chose qu'elles n'ont pas demande. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 400 17px/1.6 var(--systeme);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--jaune); color: var(--encre); }

h1, h2, h3 {
    font-family: var(--titre);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ─────────────── Barre du haut */

.barre {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 40px;
    background: var(--fond);
    border-bottom: var(--trait);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--titre);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.02em;
}
.marque:hover { color: var(--texte); }
.marque.petite { font-size: 18px; }

/* Le rond de la marque : un anneau d'encre avec un point orange au centre. Un `radial-gradient`
   plutot qu'un pseudo-element, parce qu'il n'y a rien a positionner. */
.pastille {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: var(--trait);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--accent) 0 42%, transparent 0);
}
.marque.petite .pastille { width: 22px; height: 22px; }

/* `flex-wrap` et non un menu deroulant : sans lui, les six entrees de la barre debordaient de
   l'ecran sur un telephone, et `overflow-x: hidden` sur le corps les COUPAIT — le bouton de
   telechargement, le plus important de la page, disparaissait purement et simplement. Un
   debordement cache ne se voit pas a la relecture, seulement au rendu et en etroit. */
.barre nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 24px;
    font-size: 14px;
    font-weight: 500;
}

.barre nav a:hover { color: var(--accent); }

.lien-fort {
    padding: 9px 16px;
    border: var(--trait);
    background: var(--encre);
    color: var(--fond);
    font-weight: 600;
    box-shadow: var(--ombre-courte);
}
.lien-fort:hover {
    color: var(--fond);
    background: var(--accent);
    box-shadow: 1px 1px 0 var(--encre);
    transform: translate(2px, 2px);
}

/* Le choix de la langue. Deux liens et non une liste deroulante : avec deux langues, une liste
   demande deux gestes la ou un lien en demande un. */
.langues {
    display: inline-flex;
    align-items: stretch;
    border: var(--trait);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.langues a,
.langues span {
    padding: 6px 9px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.langues a + a,
.langues a + span,
.langues span + a { border-left: var(--trait); }
/* La langue courante n'est pas un lien : cliquer sur ce qu'on lit deja ne mene nulle part. */
.langues span[aria-current] { background: var(--encre); color: var(--fond); }
.langues a:hover { background: var(--accent-sourd); color: var(--encre); }

/* ─────────────── Structure */

main { display: block; }

.section {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 40px;
}

/* Bande pleine largeur en encre. Elle coupe la page en deux et donne son rythme. */
.bande {
    margin-top: 110px;
    padding: 88px 40px;
    background: var(--encre);
    color: var(--fond);
    border-top: var(--trait);
    border-bottom: var(--trait);
}
.bande > div {
    max-width: var(--largeur);
    margin: 0 auto;
}
.bande a { color: var(--fond); }
.bande a:hover { color: var(--accent); }

/* ─────────────── Etiquettes */

/* Le sur-titre encadre, sur fond jaune doux : il annonce la page sans voler la vedette au titre. */
.surtitre {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: var(--trait);
    background: var(--accent-sourd);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* La meme etiquette, en version soulignee, pour les sections. */
.etiquette {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 3px solid var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.bande .etiquette { border-bottom: none; color: var(--accent); }

/* ─────────────── Haut de page */

.hero { padding-top: 72px; }

.hero h1 {
    margin: 28px 0 0;
    max-width: 20ch;
    font-size: clamp(48px, 7.2vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.035em;
}

/* Le mot qui compte est un BLOC de couleur, pas un mot colore : c'est ce qui rend la page
   coloree d'un seul coup d'oeil. `inline-block` pour que le bloc epouse le texte. */
.hero h1 em {
    display: inline-block;
    padding: 0 0.12em;
    background: var(--accent);
    color: var(--fond);
    font-style: normal;
}

.accroche {
    margin: 28px 0 0;
    max-width: 56ch;
    font-size: 20px;
    line-height: 1.5;
}

.version {
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--texte-doux);
}
.version a { text-decoration: underline; }

/* ─────────────── Boutons */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: var(--trait);
    background: var(--encre);
    color: var(--fond);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--ombre-accent);
}
.bouton:hover {
    color: var(--fond);
    background: var(--accent-vif);
    box-shadow: 2px 2px 0 var(--encre);
    transform: translate(2px, 2px);
}
.bouton.secondaire {
    background: var(--fond);
    color: var(--encre);
    box-shadow: none;
}
.bouton.secondaire:hover { background: var(--accent-sourd); color: var(--encre); transform: none; }
.bouton.pleine-largeur { width: 100%; }
.bouton:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.boutons { display: flex; flex-wrap: wrap; gap: 16px; margin: 40px 0 0; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; }

/* Les trois telechargements du haut de page : le premier en orange, il porte le geste
   principal ; les deux autres en creme, disponibles sans se disputer l'attention. */
.telechargements { display: flex; flex-wrap: wrap; gap: 16px; margin: 40px 0 0; }
.telechargement {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 14px 24px;
    border: var(--trait);
    background: var(--fond);
    box-shadow: var(--ombre);
}
.telechargement:first-child { background: var(--accent); color: var(--fond); }
.telechargement:hover {
    color: inherit;
    background: var(--accent-sourd);
    box-shadow: var(--ombre-courte);
    transform: translate(2px, 2px);
}
.telechargement:first-child:hover { background: var(--accent-vif); color: var(--fond); }
.telechargement strong {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 19px;
    letter-spacing: -0.01em;
}
.telechargement .taille { font-family: var(--mono); font-size: 12px; opacity: 0.85; }

/* ─────────────── Captures du logiciel
   Le cadre imite une fenetre : une barre a trois points puis l'image. Sans lui, une capture
   sur un fond creme flotte sans qu'on sache ce qu'on regarde. */

.fenetre {
    border: var(--trait);
    background: var(--encre);
    box-shadow: 10px 10px 0 var(--encre);
}
.fenetre.accent { box-shadow: 8px 8px 0 var(--accent); }
.fenetre .titre-fenetre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 2px solid var(--fond);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fond);
}
.fenetre .titre-fenetre span {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--fond);
    opacity: 0.35;
}
.fenetre .titre-fenetre span:first-child { background: var(--accent); opacity: 1; }
.fenetre .titre-fenetre em { font-style: normal; opacity: 0.6; margin-left: 8px; }
.fenetre img { display: block; width: 100%; height: auto; }

/* ─────────────── Trois arguments */

.piliers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 80px;
}
.pilier { padding: 28px; border: var(--trait); background: var(--accent-sourd); }
/* Chaque carte sa couleur : c'est la repetition en trois teintes qui fait la page coloree. */
.pilier:nth-child(2) { background: var(--fond); }
.pilier:nth-child(3) { background: var(--encre); color: var(--fond); }
.pilier .numero {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.pilier h3 { margin: 12px 0 10px; font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; }
.pilier p { font-size: 16px; line-height: 1.5; }
.pilier:nth-child(3) p { opacity: 0.85; }

/* ─────────────── Sections qui montrent
   Texte d'un cote, capture de l'autre, et on alterne. `.inverse` met l'image a gauche. */

.montre {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(320px, 1.15fr);
    gap: 56px;
    align-items: center;
}
.montre.inverse { grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 0.85fr); }
.montre.inverse .montre-texte { order: 2; }
.montre.inverse .fenetre { order: 1; }
.montre h2 {
    margin: 20px 0 18px;
    font-size: clamp(34px, 3.8vw, 52px);
    line-height: 1;
}
.montre p { max-width: 48ch; font-size: 18px; line-height: 1.55; }

.fonctionnalites {
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding-top: 110px;
}

/* ─────────────── Grille de fonctionnalites
   DEUX colonnes exactement, et non « autant que ca rentre » : la section porte QUATRE cartes.
   En trois colonnes la derniere reste seule sur sa ligne, et ce trou se voit. */

.grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 2px;
    margin-top: 48px;
    background: var(--fond);
    border: 2px solid var(--fond);
}
.grille > div { padding: 30px; background: var(--encre); }
.grille h3 { margin: 0 0 12px; font-size: 22px; }
.grille p { font-size: 15px; line-height: 1.55; opacity: 0.85; }

.bande h2 { margin: 18px 0 0; font-size: clamp(34px, 4.2vw, 58px); line-height: 1; }

/* ─────────────── Compte */

.synchro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 56px;
    align-items: start;
    padding: 96px 40px;
    max-width: var(--largeur);
    margin: 0 auto;
}
.synchro h2 { margin: 20px 0 18px; font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.synchro p { max-width: 48ch; font-size: 18px; line-height: 1.55; }

/* La promesse qui doit etre lue : elle est encadree et posee sur du jaune. Un paragraphe de
   plus dans la colonne serait passe inapercu. */
.avertissement {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 16px;
    border: var(--trait);
    background: var(--accent-sourd);
    font-weight: 600;
}

.liste-marquee {
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--trait);
}
.liste-marquee li {
    display: flex;
    gap: 14px;
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.45;
}
.liste-marquee li + li { border-top: var(--trait); }
.liste-marquee .numero {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--accent);
}

/* ─────────────── Telechargement */

.telecharger h2 { color: var(--accent); margin-bottom: 40px; }

.liste-telechargement {
    display: flex;
    flex-direction: column;
    border: var(--trait);
    background: var(--fond);
    color: var(--encre);
}
/* La couleur est REPOSEE ici : `.bande a` peint les liens en creme pour la bande sombre, et
   cette liste est le seul endroit clair dedans — sans cette ligne, du creme sur du creme, donc
   trois lignes vides. Vu au rendu, pas a la relecture. */
.liste-telechargement a {
    color: var(--encre);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px;
    padding: 22px 26px;
}
.liste-telechargement a + a { border-top: var(--trait); }
.liste-telechargement a:hover { background: var(--accent-sourd); color: var(--encre); }
.liste-telechargement strong {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 22px;
    min-width: 110px;
}
.liste-telechargement .fichiers {
    flex: 1;
    min-width: 240px;
    font-family: var(--mono);
    font-size: 14px;
    text-decoration: underline;
}
.liste-telechargement .taille { font-family: var(--mono); font-size: 14px; opacity: 0.7; }

.reste {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    margin-top: 32px;
}
.reste p { max-width: 62ch; font-size: 16px; line-height: 1.55; opacity: 0.85; }
.reste .bouton {
    background: var(--fond);
    color: var(--encre);
    border-color: var(--fond);
    box-shadow: none;
    white-space: nowrap;
}
.reste .bouton:hover { background: var(--accent-sourd); transform: none; }

/* ─────────────── Pages a une seule carte (connexion, inscription, appairage) */

.ecran-seul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 72px 24px 96px;
}

.carte {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    border: var(--trait);
    background: var(--fond-carte);
    box-shadow: var(--ombre);
}
.carte.etroit { max-width: 380px; }

.carte-tete { margin-bottom: 24px; }
.carte-tete h1 { margin: 14px 0 8px; font-size: 32px; }
.carte-tete p { color: var(--texte-doux); font-size: 15px; }

.carte form { display: flex; flex-direction: column; gap: 6px; }
.carte label {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--mono);
}
.carte input[type="text"],
.carte input[type="email"],
.carte input[type="password"],
.carte input[type="url"] {
    padding: 12px 14px;
    border: var(--trait);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
}
.carte input:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.carte .bouton { margin-top: 20px; }

/* La case a cocher garde son rendu natif : `accent-color` suffit, et un faux carre dessine a la
   main perd le clavier et les lecteurs d'ecran. */
.carte label.case,
.case {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-family: var(--systeme);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.case input { accent-color: var(--accent); width: 17px; height: 17px; }

.aide { margin-top: 6px; font-size: 13px; color: var(--texte-doux); }
.dessous { margin-top: 22px; font-size: 14px; color: var(--texte-doux); }
.dessous a, .aide a { text-decoration: underline; }

.alerte,
.succes {
    padding: 12px 14px;
    margin-bottom: 18px;
    border: var(--trait);
    background: var(--accent-sourd);
    font-size: 14px;
    font-weight: 500;
}
.alerte { border-left: 6px solid var(--rouge); }
.succes { border-left: 6px solid var(--vert); }

/* Le « ou » entre deux facons de se connecter, pose sur un filet. */
.separateur {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texte-discret);
}
.separateur::before,
.separateur::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--bordure);
}

.sous-carte {
    max-width: 440px;
    font-size: 14px;
    color: var(--texte-doux);
    text-align: center;
}
.sous-carte a { text-decoration: underline; }

.fiche { margin: 0; font-size: 15px; }
.fiche div { display: flex; gap: 10px; padding: 8px 0; }
.fiche div + div { border-top: var(--trait); }
.fiche dt { min-width: 130px; color: var(--texte-doux); }
.fiche dd { margin: 0; font-weight: 500; }

/* ─────────────── Espace du compte */

/* Les onglets de l'espace. Un vrai filet sous la barre, et l'onglet courant qui le mange : c'est
   ce qui dit « vous etes ici » sans avoir a colorer quoi que ce soit. */
.onglets-espace {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    border-bottom: var(--trait);
}
.onglets-espace a {
    padding: 12px 18px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: var(--trait);
    border-bottom: none;
    background: var(--fond-creux);
    /* Le filet du bas est recouvert par l'onglet courant, d'ou ce decalage de 2 px. */
    margin-bottom: -2px;
}
.onglets-espace a + a { border-left: none; }
.onglets-espace a:hover { background: var(--accent-sourd); color: var(--encre); }
.onglets-espace a[aria-current] {
    background: var(--fond);
    border-bottom: 2px solid var(--fond);
}

.espace {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 96px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.espace-tete { display: flex; flex-direction: column; gap: 10px; }
/* Le sur-titre est `inline-flex`, mais un enfant direct d'une colonne flex est ETIRE par
   defaut : sans cette ligne, la petite etiquette jaune devient une bande sur toute la largeur.
   Elle ne se voyait pas sur la page du compte, ou le sur-titre est imbrique dans un bloc. */
.espace-tete > .surtitre { align-self: flex-start; }
.espace-tete h1 { font-size: 38px; }
/* Une carte de la page de connexion est etroite par nature ; une carte de tableau de bord
   occupe sa colonne. Sans cette ligne, le tableau de bord sortait en colonnes de 440 px. */
.espace .carte,
.tableau .carte,
.deux-listes .carte { max-width: none; }

/* Le portrait est A COTE du nom, pas au-dessus. Cette classe est posee sur le meme element que
   `.espace-tete`, qui met ses enfants EN COLONNE : `.avec-portrait` ne redisait pas la direction,
   donc elle restait en colonne et son `align-items: center` centrait le portrait tout seul au
   milieu de la page. Vu au rendu, invisible a la lecture — meme famille que `.carte form` qui
   battait `.ligne-commande`. Le selecteur porte les DEUX classes pour gagner quel que soit
   l'ordre des regles, et la direction est ecrite noir sur blanc. */
.espace-tete.avec-portrait,
.avec-portrait {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
}
/* Sans `min-width: 0`, un nom long pousse le portrait hors de la carte au lieu de se couper. */
.avec-portrait > :not(.portrait) { min-width: 0; }

/* Le portrait a cote du titre : c'est ce qui dit « c'est bien votre espace » avant meme de
   lire le nom. */
.portrait {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: var(--trait);
    border-radius: 50%;
    object-fit: cover;
    background: var(--fond-creux);
}
/* Sans image, des initiales — jamais un rond vide, qui se lirait comme un defaut d'affichage. */
.initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--fond);
    font-family: var(--titre);
    font-weight: 900;
    font-size: 24px;
    text-transform: uppercase;
    user-select: none;
}

.accroche-courte { color: var(--texte-doux); font-size: 15px; }
.sous-titre {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texte-doux);
}

/* Des nombres, pas des listes : quelqu'un qui vient verifier que « ses affaires sont la »
   n'a pas besoin de les relire une par une. */
/* Le fond d'encre ne sert PAS de decor : il remplit les 2 px de `gap` et dessine ainsi les
   filets. Le selecteur porte donc sur `> *` et non sur `> div` — le balisage utilise des `li`,
   et avec `> div` le fond restait a nu : de l'encre sur de l'encre, texte invisible. */
/* FLEX ET NON UNE GRILLE `auto-fit`, et c'est la meme faute que `.chiffres-forts` avait deja
   payee : des que la grille tient plus de colonnes qu'il y a de compteurs, la case en trop
   reste vide et le fond d'encre s'y voit — un CARRE NOIR au milieu de la carte. Ca depend de la
   largeur, donc ca se voit sur un telephone la ou tout allait sur un ecran large. En flex il
   n'existe pas de case vide : le dernier compteur d'une ligne s'etire pour la remplir. */
.compteurs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bordure);
    border: var(--trait);
}
.compteurs > * { flex: 1 1 120px; padding: 18px; background: var(--fond); text-align: center; }
.nombre {
    display: block;
    font-family: var(--titre);
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -0.02em;
}
.quoi { font-size: 13px; color: var(--texte-doux); }

.appareils { margin: 0; padding: 0; list-style: none; }
.appareils li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; }
.appareils li + li { border-top: var(--trait); }
.detail-ligne { font-size: 13px; color: var(--texte-doux); }
.discret { color: var(--texte-discret); font-size: 13px; }
.espace .bouton.secondaire { padding: 8px 14px; font-size: 14px; }

/* ─────────────── Tableau de bord */

.tableau {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 96px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.deux-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.sous-titre-liste { margin: 24px 0 12px; }
.carte > .sous-titre-liste:first-of-type { margin-top: 0; }
.journal { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.journal li { display: flex; gap: 12px; padding: 10px 0; }
.journal li + li { border-top: var(--trait); }
.journal .qui { font-weight: 600; }
.journal .quoi { color: var(--texte-doux); }
.serree td, .serree th { padding: 8px 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte-doux);
    border-bottom: var(--trait);
    padding: 8px 10px;
}
td { padding: 10px; border-bottom: 1px solid var(--fond-creux); }

/* ─────────────── Tableau de bord : l'essentiel */

/* Trois nombres tres gros, pour se lire d'un coup d'oeil et non se dechiffrer. */
/* Flex et non `auto-fit` : une grille qui tient plus de colonnes qu'il y a de nombres laisse
   une case vide, et le fond d'encre y fait un carre noir. Les filets viennent du `gap` de 2 px
   pose sur ce fond — et non plus d'une bordure a gauche de chaque nombre, qui manquait entre
   deux LIGNES et en posait une de trop au debut d'une ligne qui passait a la ligne. */
.chiffres-forts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--bordure);
    border: var(--trait);
    margin-bottom: 28px;
}
.chiffres-forts > * { flex: 1 1 140px; padding: 22px; background: var(--fond); }
.nombre.grand { font-size: 52px; line-height: 1; }

/* La courbe : une barre par jour, l'echelle portee par `--part`. Pas de bibliotheque pour
   trente valeurs — un graphique importe pese plus que la page entiere. */
.courbe {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 90px;
    padding: 8px 10px;
    border: var(--trait);
    background: var(--fond-creux);
}
.barre-jour {
    flex: 1;
    /* Une hauteur PLANCHER : un jour a zero doit rester visible, sinon la courbe donne
       l'impression qu'il manque des jours. */
    height: max(var(--part), 2px);
    background: var(--encre);
    min-width: 3px;
}
/* Le dernier jour en orange : c'est « aujourd'hui », et on le cherche toujours. */
.barre-jour:last-child { background: var(--accent); }
/* Un jour SANS creation garde une hauteur plancher pour rester visible, mais pas la couleur
   d'une vraie valeur : sinon il se lit comme « il s'est passe un tout petit quelque chose ». */
.barre-jour.vide { background: color-mix(in srgb, var(--encre) 22%, transparent); }

.essentiel .sous-titre-liste { margin-top: 24px; }

/* ─────────────── Pied */

.pied {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 56px 40px;
}
.pied p { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.pied nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; font-weight: 500; }

/* ─────────────── Equipes */

/* Une liste de lignes : un nom a gauche, des commandes a droite. Cousine de `.appareils`, mais
   ses lignes portent plusieurs commandes et doivent pouvoir passer a la ligne — d'ou une classe
   a part plutot qu'une variante qui aurait deplace les boutons de la page du compte. */
.rangs { margin: 0; padding: 0; list-style: none; }
.rangs li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
}
.rangs li + li { border-top: var(--trait); }
/* `min-width: 0` : sans lui, une longue adresse electronique pousse les commandes hors de la
   carte au lieu de se laisser couper. */
.rangs .rang-qui { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
/* Les boutons d'une ligne ne portent pas la marge que `.carte .bouton` donne a un bouton de
   formulaire : ici ils sont a cote d'un nom, pas au bout d'un formulaire. */
.rangs .bouton { margin-top: 0; }
.rangs form { flex-direction: row; align-items: center; gap: 8px; }
.rangs label { margin-top: 0; }

/* Le role, quand il n'y a pas de commande a sa place : le proprietaire, ou une equipe qu'on ne
   gere pas. Une etiquette et non un bouton — il n'y a rien a cliquer. */
.marque-role {
    padding: 4px 10px;
    border: var(--trait);
    background: var(--accent-sourd);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Le lien d'invitation prend toute la largeur sous sa ligne : coupe en deux morceaux au milieu
   d'une ligne, il devient illisible et se recopie de travers. */
.rangs li.empile .lien-invitation { flex-basis: 100%; }
.lien-invitation {
    display: block;
    padding: 10px 12px;
    border: var(--trait);
    background: var(--fond-creux);
    font-family: var(--mono);
    font-size: 13px;
    overflow-wrap: anywhere;
    /* Un clic selectionne le lien ENTIER. Il n'y a pas de bouton « copier » : il demanderait du
       JavaScript sur une page qui n'en a pas, et une moitie de lien recopiee ne marche pas. */
    user-select: all;
}

/* Les listes deroulantes suivaient le rendu du systeme : sur un theme sombre, du texte sombre
   sur un fond sombre. Un controle porte SES couleurs. */
.carte select,
.rangs select {
    padding: 10px 12px;
    border: var(--trait);
    border-radius: var(--rayon);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
}
.carte select:focus-visible,
.rangs select:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }

/* Un formulaire d'UNE LIGNE : champ et bouton cote a cote.
   `.carte form` met les formulaires en colonne, ce qui est juste pour un formulaire de page mais
   faux dans une ligne de liste ou une cellule de tableau — le champ se retrouvait au-dessus du
   bouton. La classe existait dans deux gabarits sans etre stylee nulle part : elle ne faisait
   rien, et `.rangs form` masquait le probleme a un seul des deux endroits. */
/* Le selecteur porte l'ELEMENT et le conteneur exprès. `.carte form` compte une classe et un
   element, donc il BAT `.ligne-commande` seule et le formulaire restait en colonne — la classe
   avait l'air posee et ne faisait rien. Ecrire les deux formes rend le resultat independant de
   l'ordre des regles dans le fichier. */
.carte form.ligne-commande,
form.ligne-commande {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ligne-commande input { margin: 0; }
.ligne-commande .bouton { margin-top: 0; white-space: nowrap; }

/* Visible pour un lecteur d'ecran, absent de l'ecran. Pas `display: none`, qui le retirerait
   aussi de la lecture — ce libelle est la pour qu'une liste deroulante ne soit pas muette. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* Une page de TEXTE : une seule colonne, a largeur de lecture. Les 1240 px du site sont faits
   pour des captures et des grilles ; une politique de confidentialite lue sur toute cette
   largeur devient illisible bien avant d'etre longue. */
.page-texte {
    max-width: 680px;
    margin: 0 auto;
    padding: 64px 24px 96px;
}
.page-texte h1 { font-size: 38px; margin: 10px 0; }
.page-texte h2 {
    margin: 40px 0 10px;
    padding-bottom: 8px;
    border-bottom: var(--trait);
    font-size: 21px;
}
.page-texte p { color: var(--texte-doux); }
.page-texte .accroche-courte { margin-bottom: 28px; }

/* ─────────────── Ecrans etroits */

@media (max-width: 860px) {
    .barre { flex-wrap: wrap; padding: 14px 20px; gap: 14px; }
    .barre nav { gap: 16px; font-size: 13px; }
    .section, .synchro, .pied { padding-left: 20px; padding-right: 20px; }
    .bande { padding: 64px 20px; margin-top: 72px; }
    .hero { padding-top: 48px; }
    .hero h1 { max-width: none; }
    /* Une colonne : deux colonnes a 400 px de large ne montrent plus ni le texte ni l'image. */
    .montre, .montre.inverse { grid-template-columns: 1fr; gap: 28px; }
    .montre.inverse .montre-texte, .montre.inverse .fenetre { order: 0; }
    .fonctionnalites { gap: 64px; padding-top: 72px; }
    .grille { grid-template-columns: 1fr; }
    .synchro { padding-top: 64px; padding-bottom: 64px; gap: 40px; }
    .telechargement { min-width: 0; flex: 1 1 100%; }
    /* Les ombres portees deviennent encombrantes quand tout se touche. */
    .fenetre, .fenetre.accent { box-shadow: 5px 5px 0 var(--encre); }
    /* Les onglets de l'espace dessinent une barre continue : les faire passer a la ligne
       casserait le filet. Ils DEFILENT, et ne se laissent pas comprimer. */
    .onglets-espace { overflow-x: auto; }
    .onglets-espace a { flex-shrink: 0; }
}

/* ─────────────── Telephone

   Le palier 860 px suffit pour une tablette, pas pour un telephone de 360 px : les marges de
   20 px, les titres a 48 px et les largeurs minimales des listes y laissaient du contenu hors
   de l'ecran, coupe sans un mot par `overflow-x: hidden`. */

@media (max-width: 560px) {
    .barre { padding: 12px 16px; gap: 10px; }
    /* La nav prend sa propre ligne sous la marque, sinon elle se serre contre elle. */
    .barre nav { width: 100%; gap: 12px 18px; font-size: 13px; }

    .section, .synchro, .pied { padding-left: 16px; padding-right: 16px; }
    .bande { padding: 48px 16px; margin-top: 56px; }

    /* 48 px de plancher, c'etait un mot par ligne et un titre qui debordait. */
    .hero { padding-top: 32px; }
    .hero h1 { font-size: clamp(34px, 10vw, 48px); }
    /* La coupure ecrite dans la traduction est calee sur un ecran large : a 360 px elle laisse
       un mot seul sur sa ligne. Le titre se coupe mieux tout seul. */
    .hero h1 br { display: none; }
    .accroche { font-size: 17px; margin-top: 22px; }
    .telechargements, .boutons { margin-top: 28px; gap: 12px; }
    .telechargement { padding: 12px 18px; }

    .piliers { margin-top: 48px; gap: 14px; }
    .pilier { padding: 20px; }
    .pilier h3 { font-size: 22px; }
    .fonctionnalites { gap: 48px; padding-top: 56px; }
    .grille > div { padding: 22px; }
    .montre p, .synchro p { font-size: 17px; }

    /* Une ligne de telechargement portait 110 px de nom plus 240 px de fichier : 350 px de
       largeur MINIMALE dans 328 px disponibles, donc un debordement. Ici les trois morceaux
       s'empilent, et le nom du fichier se laisse couper. */
    .liste-telechargement a { padding: 16px 18px; gap: 4px 14px; }
    .liste-telechargement strong { min-width: 0; font-size: 19px; flex-basis: 100%; }
    .liste-telechargement .fichiers { min-width: 0; flex-basis: 100%; overflow-wrap: anywhere; }
    .reste { gap: 20px; }

    /* Cartes et espaces : la meme page, avec moins de marge perdue. */
    .ecran-seul { padding: 40px 16px 64px; }
    .carte { padding: 22px; }
    .carte-tete h1 { font-size: 27px; }
    .espace { padding: 40px 16px 64px; gap: 18px; }
    .espace-tete h1 { font-size: 30px; }
    .tableau { padding: 36px 16px 64px; }
    .page-texte { padding: 40px 16px 64px; }
    .page-texte h1 { font-size: 30px; }
    /* Trois onglets serres tiennent dans 360 px ; sans ca le troisieme sortait de l'ecran et
       ne se voyait qu'en faisant glisser la barre. */
    .onglets-espace a { padding: 10px 10px; font-size: 11px; letter-spacing: 0.03em; }
    .avec-portrait { gap: 12px; }
    .portrait { width: 52px; height: 52px; }
    .fiche dt { min-width: 96px; }
    .fiche div { flex-wrap: wrap; }

    /* UN TABLEAU NE SE COMPRIME PAS INDEFINIMENT. A six colonnes dont une adresse
       electronique, `width: 100%` ne le fait pas rentrer : il ecrase les colonnes jusqu'a une
       lettre par ligne, ou il pousse la carte hors de l'ecran. On lui rend une largeur
       minimale et c'est la CARTE qui defile — un tableau qu'on fait glisser reste lisible,
       un tableau ecrase ne l'est pas. */
    .carte { overflow-x: auto; }
    .carte table { min-width: 460px; }
    .serree td, .serree th { padding: 8px 6px; }

    .pied { gap: 20px; padding-top: 40px; padding-bottom: 40px; }
    .pied nav { gap: 12px 16px; }
}