@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/polices/inter-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/polices/inter-600-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/polices/rajdhani-700-latin.woff2') format('woff2');
}

/*
    Les mêmes jetons que le poste opérateur.

    Un prospect qui voit ce site puis une démonstration doit reconnaître le
    même produit : mêmes bleus, même dégradé, même verre dépoli.
*/
:root {
    --nuit-950: #04101f;
    --nuit-900: #071a2e;
    --nuit-800: #0d2740;

    --cyan: #00a8e8;
    --cyan-clair: #4ecdf5;
    --violet: #007ea7;
    --lavande: #4ecdf5;
    --succes: #10b981;
    --alerte: #f5a623;

    --texte: #ffffff;
    --corps: #cbd5e1;
    --second: #94a3b8;
    --attenue: #64748b;
    --discret: #475569;

    --degrade: linear-gradient(135deg, #007ea7 0%, #00a8e8 50%, #00a8e8 100%);
    --verre: rgba(15, 19, 40, 0.72);
    --bord: rgba(255, 255, 255, 0.09);

    --titre: 'Rajdhani', 'Segoe UI', sans-serif;
    --sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(1200px 700px at 62% 12%, #133351 0%, #071a2e 45%, #04101f 100%) fixed;
    color: var(--corps);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.large { width: min(1180px, 100% - 48px); margin-inline: auto; }

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyan-clair); }

/* Le lien d'évitement : premier dans l'ordre de tabulation, invisible tant
   qu'il n'a pas le focus. Une page longue sans lui oblige à traverser toute
   la navigation au clavier. */
.evitement {
    position: absolute;
    left: -9999px;
    background: var(--nuit-800);
    color: var(--texte);
    padding: 12px 18px;
    border-radius: 10px;
    z-index: 10;
}
.evitement:focus { left: 24px; top: 16px; }

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

/* --- Bandeau ---------------------------------------------------------- */

.bandeau {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(9, 12, 26, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bord);
}

.bandeau .large {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 68px;
    flex-wrap: wrap;
    padding-block: 10px;
}

.bandeau img { height: 30px; width: auto; display: block; }

.menu { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.menu a {
    color: var(--second);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    padding: 8px 2px;
}
.menu a:hover { color: var(--texte); }

/* --- Blocs ------------------------------------------------------------ */

section { padding-block: 92px; }
section + section { border-top: 1px solid rgba(255, 255, 255, 0.05); }

h1, h2, h3 { font-family: var(--titre); font-weight: 700; color: var(--texte); margin: 0; }
h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08; letter-spacing: 0.005em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; }
h3 { font-size: 18.5px; line-height: 1.3; }

.chapeau {
    font-size: clamp(16.5px, 1.9vw, 19px);
    color: var(--second);
    max-width: 68ch;
    margin: 18px 0 0;
}

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--cyan-clair);
    border: 1px solid rgba(0, 168, 232, 0.28);
    background: rgba(0, 168, 232, 0.07);
    border-radius: 999px;
    padding: 7px 15px;
}

.pastille {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--succes);
    box-shadow: 0 0 10px var(--succes);
}

/* --- Hero ------------------------------------------------------------- */

.hero { padding-block: 108px 96px; }
.hero h1 { margin-top: 26px; max-width: 19ch; }
.hero .chapeau { font-size: clamp(17px, 2.1vw, 20.5px); }

.boutons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 13px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.bouton.plein { background: var(--degrade); color: #04101f; box-shadow: 0 10px 30px rgba(110, 139, 255, 0.32); }
.bouton.vide { border: 1px solid rgba(255, 255, 255, 0.16); color: var(--texte); background: rgba(255, 255, 255, 0.03); }
.bouton.vide:hover { background: rgba(255, 255, 255, 0.07); }

/* --- Panneaux --------------------------------------------------------- */

.verre {
    background: var(--verre);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--bord);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.grille { display: grid; gap: 18px; margin-top: 40px; }
.trois { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.deux  { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.carte { padding: 26px 26px 28px; }
.carte h3 { margin-bottom: 9px; }
.carte p { margin: 0; color: var(--second); font-size: 15px; }
.carte .rang {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--discret);
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 14px;
}

/* La règle qui prime : elle mérite d'être vue avant d'être lue. */
.regle {
    margin-top: 40px;
    padding: 28px 30px;
    border-radius: 18px;
    border: 1px solid rgba(139, 123, 255, 0.34);
    background: linear-gradient(135deg, rgba(139, 123, 255, 0.12), rgba(0, 168, 232, 0.07));
}
.regle p { margin: 0; font-size: 17.5px; color: var(--corps); max-width: 72ch; }
.regle strong { color: var(--texte); }

/* --- Modules ---------------------------------------------------------- */

.famille { margin-top: 44px; }
.famille > h3 {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
    font-family: var(--sans);
    font-weight: 600;
}

.modules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

.module {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 15px 17px;
    border-radius: 13px;
    border: 1px solid var(--bord);
    background: rgba(255, 255, 255, 0.025);
}
.module b { font-weight: 600; color: var(--texte); font-size: 14.5px; }
.module span { color: var(--attenue); font-size: 13px; }

/*
    L'état se lit par la forme autant que par la couleur.

    Un module « en préparation » porte un contour pointillé ; un module livré
    n'en porte pas. Un opérateur sur six ne distingue pas les deux teintes.
*/
.module.attendu { border-style: dashed; border-color: rgba(255, 181, 71, 0.38); }
.module.attendu b { color: var(--alerte); }

/* --- Engagements ------------------------------------------------------ */

.engagements { display: grid; gap: 0; margin-top: 40px; }
.engagement {
    display: grid;
    grid-template-columns: minmax(180px, 250px) 1fr;
    gap: 28px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.engagement:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.engagement h3 { font-size: 17px; color: var(--lavande); }
.engagement p { margin: 0; color: var(--second); font-size: 15.5px; max-width: 76ch; }

/* --- Technique -------------------------------------------------------- */

.technique code {
    font-family: var(--mono);
    font-size: 13px;
    background: rgba(9, 12, 26, 0.72);
    border: 1px solid var(--bord);
    border-radius: 8px;
    padding: 3px 8px;
    color: var(--cyan-clair);
}

.canaux { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.canal {
    font-family: var(--mono);
    font-size: 12.5px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--bord);
    color: var(--second);
}

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

footer { padding-block: 44px 56px; border-top: 1px solid var(--bord); }
footer .large { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer p { margin: 0; color: var(--discret); font-size: 14px; }
footer nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
footer nav a { color: var(--attenue); text-decoration: none; font-size: 14px; }
footer nav a:hover { color: var(--texte); }

@media (max-width: 720px) {
    section { padding-block: 64px; }
    .hero { padding-block: 56px 64px; }
    .engagement { grid-template-columns: 1fr; gap: 8px; }
    .menu { gap: 14px 18px; margin-left: 0; }

    /*
        Le bandeau se décolle.

        Sur un écran étroit la navigation passe à deux lignes : collé, le
        bandeau mangeait un quart de la hauteur utile pendant toute la lecture.
        Une page longue se lit mieux sans lui qu'avec lui en travers.
    */
    .bandeau { position: static; }
    .bandeau .large { gap: 14px; }
}

/* Certains lisent en clair, sur un poste qui impose son thème. On ne
   retourne pas la page — on garantit seulement qu'elle reste lisible. */
@media (prefers-contrast: more) {
    :root { --second: #d5d9f0; --attenue: #c0c5e2; --discret: #a7ace0; }
}

/* ======================================================================
   Les pages du portail : Store, téléchargements, documentation.
   ====================================================================== */

.entete { padding-block: 72px 44px; }
.entete h1 { margin-top: 22px; max-width: 16ch; }
.entete .chapeau + .chapeau { margin-top: 14px; }

.menu a[aria-current='page'] { color: var(--texte); }

.liens { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.compte {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--discret);
    margin-left: 10px;
}

/* --- Les fiches du Store --------------------------------------------- */

.famille-store { padding-block: 44px; }
.famille-store h2 {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 20px;
}

.fiches { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.fiche {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--bord);
    background: var(--verre);
}

/* Un module en préparation porte un contour pointillé : la couleur seule
   exclut un lecteur sur six. */
.fiche.attendue { border-style: dashed; border-color: rgba(255, 181, 71, 0.34); }

.fiche header { display: flex; align-items: center; gap: 11px; }
.fiche .nom { font-family: var(--titre); font-weight: 700; font-size: 17px; color: var(--texte); flex: 1; }
.fiche .cle { font-family: var(--mono); font-size: 11.5px; color: var(--discret); }
.fiche p { margin: 0; font-size: 13.5px; color: var(--second); }

.pastille-module { width: 30px; height: 30px; border-radius: 9px; flex: none; }

.jeton {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.jeton.ok { background: rgba(61, 214, 140, 0.16); color: #7ce6b4; }
.jeton.attendu { background: rgba(255, 181, 71, 0.16); color: var(--alerte); }

.fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.fiche dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--discret);
    white-space: nowrap;
}
.fiche dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--second); }

code.droit {
    font-family: var(--mono);
    font-size: 11.5px;
    background: rgba(9, 12, 26, 0.7);
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 2px 7px;
    color: var(--cyan-clair);
}
.rien { color: var(--discret); font-style: italic; }

.rappel { padding-block: 24px 88px; }

/* --- Les téléchargements --------------------------------------------- */

.composant { padding-block: 40px; }
.composant h2 { font-size: 24px; margin-bottom: 18px; }

table.paquets {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.paquets th {
    text-align: left;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--discret);
    padding: 0 14px 10px 0;
    border-bottom: 1px solid var(--bord);
}
table.paquets td { padding: 13px 14px 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
table.paquets td.chiffre { font-family: var(--mono); font-size: 13px; color: var(--second); white-space: nowrap; }
table.paquets a { font-family: var(--mono); font-size: 13px; }
code.empreinte { font-family: var(--mono); font-size: 12px; color: var(--attenue); }

.manquants { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/*
    Ce qui manque se dit, et se voit.

    Un centre de téléchargement qui cache l'absence d'un manuel fait perdre plus
    de temps qu'il n'en fait gagner : le visiteur cherche, puis écrit.
*/
.manquant {
    padding: 22px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.02);
}
.manquant h2, .manquant h3 { font-size: 17px; margin-bottom: 8px; color: var(--lavande); }
.manquant p { margin: 0; font-size: 13.5px; color: var(--second); }

/* --- La documentation ------------------------------------------------ */

.documents { padding-block: 24px 88px; }
.documents h2 {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 40px 0 18px;
}

.fiche.document { text-decoration: none; }
.fiche.document:hover { border-color: rgba(0, 168, 232, 0.34); }
.fiche.document .nom { font-size: 16px; }

.document-rendu { padding-block: 44px 88px; }
.document-rendu .large { max-width: 78ch; }
.document-rendu .retour { margin: 0 0 32px; font-size: 13.5px; }

.document-rendu h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
.document-rendu h2 { font-size: 24px; margin-top: 44px; margin-bottom: 12px; }
.document-rendu h3 { font-size: 18px; margin-top: 30px; margin-bottom: 8px; color: var(--lavande); }
.document-rendu p { margin: 0 0 16px; color: var(--corps); }
.document-rendu ul, .document-rendu ol { margin: 0 0 18px; padding-left: 22px; color: var(--corps); }
.document-rendu li { margin-bottom: 7px; }
.document-rendu hr { border: 0; border-top: 1px solid var(--bord); margin: 36px 0; }

.document-rendu blockquote {
    margin: 0 0 18px;
    padding: 14px 20px;
    border-left: 3px solid var(--violet);
    background: rgba(139, 123, 255, 0.07);
    border-radius: 0 12px 12px 0;
    color: var(--second);
}

.document-rendu pre {
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--bord);
    background: rgba(9, 12, 26, 0.72);
    overflow-x: auto;
}
.document-rendu pre code { font-family: var(--mono); font-size: 12.5px; color: var(--cyan-clair); line-height: 1.6; }

.document-rendu p code, .document-rendu li code, .document-rendu td code {
    font-family: var(--mono);
    font-size: 12.5px;
    background: rgba(9, 12, 26, 0.72);
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--cyan-clair);
}

.document-rendu table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; }
.document-rendu th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--discret);
    padding: 0 14px 10px 0;
    border-bottom: 1px solid var(--bord);
}
.document-rendu td { padding: 11px 14px 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--second); }

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

.engendre { font-size: 12px; color: var(--discret); margin-top: 10px; }
footer .large + .large { margin-top: 4px; }