/*
 * Feuille de style du site.
 *
 * Les couleurs viennent du theme sombre du logiciel : le site et l'application doivent se
 * ressembler. Une seule palette, assumee — pas de bascule clair/sombre.
 *
 * Aucune police externe : ni requete vers un tiers, ni texte invisible le temps qu'elle
 * arrive. Les piles systeme rendent la meme chose partout, en mieux.
 */

:root {
    --fond: #0b0e14;
    --fond-carte: #12151d;
    --fond-creux: #0e1119;
    --texte: #e7eaf1;
    --texte-doux: #a8b0c2;
    --texte-discret: #737b8f;
    --bordure: #1e2431;
    --bordure-claire: #2b3244;
    --accent: #6d8dff;
    --accent-vif: #8ba5ff;
    --accent-sourd: rgba(109, 141, 255, 0.14);
    --vert: #4ade80;
    --rouge: #f87171;
    --rayon: 10px;
    --rayon-l: 16px;
    --largeur: 1080px;
    --systeme: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}

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

html {
    scroll-behavior: smooth;
}

/* Le defilement doux gene les personnes sensibles au mouvement, et ce n'est pas a elles de
   s'adapter. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        transition: none !important;
    }
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--systeme);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Halo derriere le haut de page. `fixed` et non `absolute` : la lueur ne doit pas allonger la
   page ni provoquer de barre de defilement horizontale sur mobile. */
.lueur {
    position: fixed;
    inset: -20vh 0 auto 0;
    height: 70vh;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(109, 141, 255, 0.18), transparent 70%),
        radial-gradient(35% 40% at 80% 10%, rgba(74, 222, 128, 0.07), transparent 70%);
    z-index: 0;
}

body > *:not(.lueur) {
    position: relative;
    z-index: 1;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-vif);
    text-decoration: underline;
}

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

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

.barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 1.15rem 1.5rem;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--texte);
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.marque:hover {
    text-decoration: none;
}

.marque.petite {
    font-size: 0.95rem;
}

.pastille {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: linear-gradient(145deg, var(--accent-vif), var(--accent));
    box-shadow: 0 0 14px rgba(109, 141, 255, 0.45);
}

.barre nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
}

.barre nav a {
    color: var(--texte-doux);
}

.barre nav a:hover {
    color: var(--texte);
    text-decoration: none;
}

.barre nav .lien-fort {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bordure-claire);
    border-radius: 7px;
    color: var(--texte);
}

.barre nav .lien-fort:hover {
    border-color: var(--accent);
    background: var(--accent-sourd);
}

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

main {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 1.5rem;
}

main.etroit {
    max-width: 30rem;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

section {
    padding: 4.25rem 0;
}

section + section {
    border-top: 1px solid var(--bordure);
}

h1 {
    margin: 0 0 1.15rem;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}

h2 {
    margin: 0 0 2.2rem;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h3 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.surtitre {
    margin: 0 0 0.9rem;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.hero {
    padding-top: 3rem;
    text-align: center;
}

.accroche {
    max-width: 44rem;
    margin: 0 auto 2.4rem;
    color: var(--texte-doux);
    font-size: 1.12rem;
}

.boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.boutons-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.8rem;
}

.bouton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.65rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    background: linear-gradient(180deg, var(--accent-vif), var(--accent));
    color: #080b12;
    font: inherit;
    font-weight: 650;
    font-size: 0.94rem;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bouton:hover {
    color: #080b12;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(109, 141, 255, 0.28);
}

.bouton .detail {
    color: rgba(8, 11, 18, 0.66);
    font-weight: 500;
    font-size: 0.75rem;
}

.bouton.secondaire {
    background: transparent;
    border-color: var(--bordure-claire);
    color: var(--texte);
}

.bouton.secondaire:hover {
    border-color: var(--accent);
    background: var(--accent-sourd);
    color: var(--texte);
    box-shadow: none;
}

.bouton.discret {
    padding: 0.35rem 0.75rem;
    background: transparent;
    border-color: var(--bordure-claire);
    color: var(--texte-doux);
    font-size: 0.82rem;
    font-weight: 500;
}

.bouton.discret:hover {
    border-color: var(--rouge);
    color: var(--rouge);
    box-shadow: none;
    transform: none;
}

.bouton.pleine-largeur {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    margin-top: 0.4rem;
}

.version {
    margin: 1.6rem 0 0;
    color: var(--texte-discret);
    font-size: 0.87rem;
}

/* ─────────────── Captures du logiciel

   Ce sont elles qui disent ce qu'est le produit, bien avant le texte. Le halo derriere et
   l'ombre portee les detachent du fond : sans ca, une capture sombre sur un fond sombre se
   fond dedans et on ne la voit pas. */

.ecran {
    position: relative;
    margin: 3.5rem auto 0;
    max-width: 1120px;
}

.ecran::before {
    content: "";
    position: absolute;
    inset: -8% -4% -4%;
    background: radial-gradient(50% 50% at 50% 40%, rgba(109, 141, 255, 0.22), transparent 70%);
    filter: blur(30px);
    z-index: -1;
}

.ecran img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bordure-claire);
    border-radius: var(--rayon-l);
    box-shadow: 0 30px 80px -35px rgba(0, 0, 0, 0.95);
}

.ecran.petit {
    margin: 0;
    max-width: none;
}

.ecran.petit::before {
    inset: -10% -6%;
    filter: blur(40px);
    opacity: 0.6;
}

/* ─────────────── Piliers */

.piliers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 2.5rem;
}

.piliers h3 {
    margin-bottom: 0.4rem;
}

.piliers p {
    margin: 0;
    color: var(--texte-doux);
    font-size: 0.93rem;
}

/* ─────────────── Sections qui montrent */

.montre {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}

.montre.inverse .montre-texte {
    order: 2;
}

.montre-texte h2 {
    margin-bottom: 1rem;
}

.montre-texte p {
    margin: 0;
    color: var(--texte-doux);
}

/* ─────────────── Grille de fonctionnalites */

/* DEUX colonnes exactement, et non « autant que ca rentre » : la section porte QUATRE cartes.
   Un remplissage automatique donnait trois colonnes, donc une carte seule sur la derniere
   ligne avec une case vide a cote — ca se voit au premier coup d'oeil. Deux colonnes rangent
   quatre cartes sans reste, et les cartes y sont plus lisibles. */
.grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-l);
    background: var(--bordure);
    overflow: hidden;
}

.grille article {
    padding: 1.5rem 1.4rem;
    background: var(--fond-carte);
}

.grille article p {
    margin: 0;
    color: var(--texte-doux);
    font-size: 0.92rem;
}

/* ─────────────── Synchronisation */

.deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.deux-colonnes p {
    color: var(--texte-doux);
}

.liste-marquee {
    margin: 0;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-l);
    background: var(--fond-carte);
    list-style: none;
}

.liste-marquee li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.6rem;
    color: var(--texte-doux);
    font-size: 0.93rem;
}

.liste-marquee li + li {
    border-top: 1px solid var(--bordure);
}

.liste-marquee li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
}

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

.fichiers {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.fichiers th,
.fichiers td {
    padding: 0.85rem 0.6rem;
    border-bottom: 1px solid var(--bordure);
    text-align: left;
}

.fichiers tr:first-child th,
.fichiers tr:first-child td {
    border-top: 1px solid var(--bordure);
}

.fichiers th {
    width: 7rem;
    font-weight: 600;
}

.fichiers td a {
    font-family: var(--mono);
    font-size: 0.86rem;
}

.fichiers .taille {
    width: 6rem;
    color: var(--texte-discret);
    text-align: right;
}

.avertissement {
    margin: 1.8rem 0 1.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--bordure-claire);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    color: var(--texte-doux);
    font-size: 0.89rem;
}

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

   La carte est centree dans la hauteur de l'ecran : posee en haut, elle laissait un grand vide
   dessous qui donnait l'impression d'une page inachevee. */

.ecran-seul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 16rem);
    max-width: 27rem;
    padding: 2rem 1.5rem 3rem;
}

.ecran-seul .carte {
    position: relative;
    width: 100%;
}

/* Un halo derriere la carte : sans lui, un rectangle sombre sur un fond sombre n'a aucun
   relief et la page a l'air vide. */
.ecran-seul .carte::before {
    content: "";
    position: absolute;
    inset: -30% -20%;
    background: radial-gradient(50% 50% at 50% 30%, rgba(109, 141, 255, 0.16), transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

.carte-tete {
    margin-bottom: 1.6rem;
    text-align: center;
}

/* `display: block` et non l'inline par defaut : un span en flux ne prend pas la hauteur
   qu'on lui donne, et la pastille etait invisible. */
.carte-tete .pastille {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 0.9rem;
    border-radius: 9px;
}

.carte-tete h1 {
    margin: 0 0 0.4rem;
    font-size: 1.45rem;
}

.carte-tete p {
    margin: 0;
    color: var(--texte-doux);
    font-size: 0.9rem;
    line-height: 1.5;
}

.sous-carte {
    margin: 1.4rem 0 0;
    max-width: 24rem;
    color: var(--texte-discret);
    font-size: 0.83rem;
    line-height: 1.55;
    text-align: center;
}

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

.espace {
    max-width: 46rem;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.espace-tete {
    margin-bottom: 2rem;
}

/* Le portrait a cote du titre : c'est ce qui dit « c'est bien votre espace » avant meme de
   lire l'adresse. */
.espace-tete.avec-portrait {
    display: flex;
    align-items: flex-start;
    gap: 1.3rem;
}

.portrait {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--bordure-claire);
    object-fit: cover;
}

/* Sans image, des initiales — jamais un rond vide, qui se lirait comme un defaut d'affichage. */
.portrait.initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--accent-vif), var(--accent));
    border-color: transparent;
    color: #080b12;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

input[type="file"] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px dashed var(--bordure-claire);
    border-radius: 8px;
    background: var(--fond-creux);
    color: var(--texte-doux);
    font: inherit;
    font-size: 0.86rem;
}

input[type="file"]::file-selector-button {
    margin-right: 0.8rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--bordure-claire);
    border-radius: 6px;
    background: var(--fond-carte);
    color: var(--texte);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.espace-tete h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
}

.accroche-courte {
    margin: 0;
    max-width: 34rem;
    color: var(--texte-doux);
    font-size: 0.95rem;
}

/* Des nombres, pas des listes : quelqu'un qui vient verifier que « ses affaires sont la »
   veut un compte, pas mille lignes. */
.compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--bordure);
    list-style: none;
    overflow: hidden;
}

.compteurs li {
    padding: 1rem 1.1rem;
    background: var(--fond-creux);
}

.compteurs .nombre {
    display: block;
    color: var(--texte);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.compteurs .quoi {
    color: var(--texte-discret);
    font-size: 0.8rem;
}

/* ─────────────── Cartes et formulaires */

.carte {
    padding: 2rem 1.9rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-l);
    background: var(--fond-carte);
}

.carte + .carte {
    margin-top: 1.2rem;
}

.carte h1 {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}

.carte h2 {
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
}

.sous-titre {
    margin: 0 0 1.6rem;
    color: var(--texte-doux);
    font-size: 0.93rem;
}

label {
    display: block;
    margin: 1rem 0 0.35rem;
    font-size: 0.86rem;
    font-weight: 550;
}

input::placeholder {
    color: var(--texte-discret);
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bordure-claire);
    border-radius: 8px;
    background: var(--fond-creux);
    color: var(--texte);
    font: inherit;
    font-size: 0.94rem;
}

input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-sourd);
}

label.case {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--texte-doux);
    font-weight: 400;
}

label.case input {
    width: auto;
    accent-color: var(--accent);
}

.aide {
    margin: 0.45rem 0 0;
    color: var(--texte-discret);
    font-size: 0.82rem;
}

.dessous {
    margin: 1.4rem 0 0;
    color: var(--texte-doux);
    font-size: 0.89rem;
    text-align: center;
}

.separateur {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.4rem 0 0.2rem;
    color: var(--texte-discret);
    font-size: 0.8rem;
}

.separateur::before,
.separateur::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bordure);
}

.alerte,
.succes {
    margin: 0 0 1.2rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.89rem;
}

.alerte {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
}

.succes {
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.07);
    color: #86efac;
}

.fiche {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1.4rem;
    margin: 0 0 1.4rem;
    font-size: 0.92rem;
}

.fiche dt {
    color: var(--texte-discret);
}

.fiche dd {
    margin: 0;
}

.fiche code {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--bordure-claire);
    border-radius: 5px;
    background: var(--fond-creux);
    font-family: var(--mono);
    letter-spacing: 0.08em;
}

.appareils {
    margin: 0;
    padding: 0;
    list-style: none;
}

.appareils li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
}

.appareils li + li {
    border-top: 1px solid var(--bordure);
}

.detail-ligne {
    display: block;
    color: var(--texte-discret);
    font-size: 0.82rem;
}

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

.pied {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
    border-top: 1px solid var(--bordure);
    color: var(--texte-discret);
    font-size: 0.86rem;
}

.pied p {
    margin: 0.5rem 0 0;
}

.pied nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
}

.pied nav a {
    color: var(--texte-doux);
}

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

@media (max-width: 860px) {
    .deux-colonnes,
    .montre {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    /* Sur une colonne, l'ordre alterne n'a plus de sens : le texte passe toujours devant sa
       capture, sinon on voit une image sans savoir de quoi elle parle. */
    .montre.inverse .montre-texte {
        order: 0;
    }
    .ecran {
        margin-top: 2.5rem;
    }
}

@media (max-width: 720px) {
    .grille {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    section {
        padding: 3.5rem 0;
    }
    .barre {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .barre nav {
        gap: 1rem;
        font-size: 0.85rem;
    }
    .boutons .bouton {
        flex: 1 1 100%;
    }
    .carte {
        padding: 1.5rem 1.25rem;
    }
}

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

   Meme vocabulaire que l'espace du compte : des nombres, des tables serrees, aucune couleur
   nouvelle. Une page d'administration n'a pas a etre un autre site. */

.tableau {
    max-width: 58rem;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.tableau .carte h2 {
    margin-bottom: 1.1rem;
}

.sous-titre-liste {
    margin: 1.4rem 0 0.6rem;
    color: var(--texte-discret);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tableau .compteurs + table,
.tableau .compteurs + .deux-listes {
    margin-top: 1.4rem;
}

.fichiers.serree th,
.fichiers.serree td {
    padding: 0.5rem 0.5rem;
    font-size: 0.88rem;
}

.fichiers.serree th {
    width: auto;
    font-weight: 500;
    color: var(--texte-doux);
    overflow-wrap: anywhere;
}

.deux-listes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.deux-listes h3 {
    margin-bottom: 0.5rem;
    color: var(--texte-discret);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.journal th {
    width: 5.5rem;
    color: var(--texte-discret);
    font-family: var(--mono);
    font-size: 0.78rem;
    white-space: nowrap;
}

.journal .qui {
    color: var(--texte-discret);
    font-size: 0.82rem;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .deux-listes {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}