/*
 * INFOSEND — feuille de style applicative.
 *
 * Écrite à la main, sans chaîne de compilation : le serveur n'a pas forcément
 * Node, et un outil de travail ne doit pas cesser de s'afficher parce qu'un
 * `npm run build` a échoué pendant un déploiement.
 *
 * Parti pris, imposé par le commanditaire : densité et sobriété. Pas de
 * dégradé, pas de flou d'arrière-plan, pas d'illustration décorative, pas de
 * violet. La couleur ne sert qu'à porter de l'information — état d'un envoi,
 * alerte, quota. Le reste est gris.
 */

:root {
    --fond: #f6f7f9;
    --surface: #ffffff;
    --bord: #dcdfe4;
    --bord-fort: #c3c8d0;
    --texte: #1c2430;
    --texte-doux: #5b6675;
    --texte-faible: #868f9c;

    /* Vert sapin : l'accent du produit. Assez sombre pour porter du texte
       blanc en contraste AA, assez sobre pour ne pas devenir décoratif. */
    --accent: #0f5132;
    --accent-fonce: #0a3a24;
    --accent-clair: #3ea56f;
    --accent-doux: #e8f4ed;

    /* Barre supérieure : une assise sombre plutôt qu'un bandeau blanc de plus.
       Elle sépare franchement l'outil du contenu, et le contenu reste clair. */
    --entete-fond: #103a29;
    --entete-texte: #d9ece1;
    --entete-bord: #1c5540;

    --alerte: #a8331f;
    --alerte-doux: #fbeceA;
    --succes: #1f6b3f;
    --succes-doux: #e6f3ec;
    --attention: #8a5a12;
    --attention-doux: #fdf3e3;

    --rayon: 4px;
    --ombre: 0 1px 2px rgba(20, 28, 40, 0.08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--fond);
    color: var(--texte);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ Bandeaux */

.bandeau-contexte {
    background: var(--attention-doux);
    border-bottom: 1px solid #e8d3a8;
    color: var(--attention);
    padding: 7px 16px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bandeau-contexte strong {
    font-weight: 600;
}

.bandeau-contexte form {
    margin-left: auto;
}

/* ------------------------------------------------------------------ En-tête */

.entete {
    background: var(--entete-fond);
    border-bottom: 1px solid var(--entete-bord);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 48px;
}

.entete .marque {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 13.5px;
    color: #fff;
}

.entete .marque img {
    width: 22px;
    height: 22px;
    display: block;
}

.entete .compte {
    color: var(--entete-texte);
    font-size: 13px;
    padding-left: 14px;
    border-left: 1px solid var(--entete-bord);
}

.entete .droite {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--entete-texte);
    font-size: 12.5px;
}

.entete .droite button.discret {
    background: transparent;
    color: var(--entete-texte);
    border-color: var(--entete-bord);
}

.entete .droite button.discret:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Emplacement réservé au futur bouton d'arrêt d'urgence (lot 6). Il occupera
   cette place dès maintenant pour que l'œil la connaisse avant d'en avoir
   besoin. */
.emplacement-stop {
    min-width: 92px;
    text-align: right;
}

.etat-envoi {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--rayon);
    border: 1px solid transparent;
}

.etat-envoi.ferme {
    background: rgba(255, 255, 255, 0.07);
    color: var(--entete-texte);
    border-color: var(--entete-bord);
}

.etat-envoi.ouvert {
    background: var(--accent-clair);
    color: #06281a;
    border-color: var(--accent-clair);
    font-weight: 600;
}

/* ------------------------------------------------------------------ Gabarit */

.page {
    display: flex;
    min-height: calc(100vh - 48px);
}

.lateral {
    width: 196px;
    flex: 0 0 196px;
    background: var(--surface);
    border-right: 1px solid var(--bord);
    padding: 10px 0;
}

.lateral a {
    display: block;
    padding: 6px 16px;
    color: var(--texte-doux);
    font-size: 13px;
    border-left: 2px solid transparent;
}

.lateral a:hover {
    background: var(--fond);
    text-decoration: none;
    color: var(--texte);
}

.lateral a.actif {
    color: var(--accent-fonce);
    border-left-color: var(--accent-clair);
    background: var(--accent-doux);
    font-weight: 600;
}

.lateral .groupe {
    padding: 12px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-faible);
}

.lateral .bientot {
    color: var(--texte-faible);
    cursor: default;
}

.lateral .bientot:hover {
    background: transparent;
    color: var(--texte-faible);
}

.contenu {
    flex: 1;
    padding: 18px 22px;
    max-width: 1180px;
}

/* ------------------------------------------------------------------ Titres */

h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 3px;
}

h2 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 22px 0 8px;
    padding-left: 9px;
    border-left: 3px solid var(--accent-clair);
    color: var(--texte);
}

.sous-titre {
    color: var(--texte-doux);
    font-size: 12.5px;
    margin: 0 0 18px;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
}

thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texte-faible);
    font-weight: 600;
    padding: 7px 10px;
    border-bottom: 1px solid var(--bord);
    background: #fafbfc;
}

tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #edeff2;
    vertical-align: top;
    height: 36px;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background: #fafbfc;
}

td.nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

td.discret,
.discret {
    color: var(--texte-faible);
    font-size: 12.5px;
}

.vide {
    padding: 22px 12px;
    text-align: center;
    color: var(--texte-faible);
    background: var(--surface);
    border: 1px dashed var(--bord-fort);
    border-radius: var(--rayon);
    font-size: 12.5px;
}

/* ------------------------------------------------------------------ Cartouches */

.cartouches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.cartouche {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--accent-clair);
    border-radius: var(--rayon);
    padding: 10px 12px;
    min-width: 150px;
    flex: 1 1 150px;
}

.cartouche.en-attente {
    border-left-color: var(--bord-fort);
}

.cartouche .etiquette {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texte-faible);
}

.cartouche .valeur {
    color: var(--accent-fonce);
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.cartouche .valeur.attente {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--texte-faible);
}

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

label {
    display: block;
    font-size: 12px;
    color: var(--texte-doux);
    margin-bottom: 3px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--texte);
    background: var(--surface);
}

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

.champ {
    margin-bottom: 12px;
}

.ligne-champs {
    display: flex;
    gap: 12px;
}

.ligne-champs .champ {
    flex: 1;
}

.aide {
    font-size: 11.5px;
    color: var(--texte-faible);
    margin-top: 3px;
}

button,
.bouton {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--rayon);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

button:hover,
.bouton:hover {
    background: var(--accent-fonce);
    text-decoration: none;
}

button.discret,
.bouton.discret {
    background: var(--surface);
    color: var(--texte-doux);
    border-color: var(--bord-fort);
}

button.discret:hover,
.bouton.discret:hover {
    background: var(--fond);
    color: var(--texte);
}

button.danger {
    background: var(--surface);
    color: var(--alerte);
    border-color: #e0bdb5;
}

button.danger:hover {
    background: var(--alerte-doux);
}

/* ------------------------------------------------------------------ Messages */

.message {
    padding: 8px 11px;
    border-radius: var(--rayon);
    font-size: 12.5px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.message.succes {
    background: var(--succes-doux);
    color: var(--succes);
    border-color: #bcdcc8;
}

.message.erreur {
    background: var(--alerte-doux);
    color: var(--alerte);
    border-color: #e0bdb5;
}

.message.info {
    background: var(--accent-doux);
    color: var(--accent-fonce);
    border-color: #c4d7ea;
}

.erreur-champ {
    color: var(--alerte);
    font-size: 11.5px;
    margin-top: 3px;
}

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

.panneau {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 14px;
}

.panneau + .panneau {
    margin-top: 12px;
}

.deux-colonnes {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.deux-colonnes > .large {
    flex: 2;
    min-width: 0;
}

.deux-colonnes > .etroit {
    flex: 1;
    min-width: 0;
}

/* ------------------------------------------------------------------ Étiquettes */

.pastille {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--rayon);
    border: 1px solid var(--bord);
    background: var(--fond);
    color: var(--texte-doux);
}

.pastille.active {
    background: var(--succes-doux);
    color: var(--succes);
    border-color: #bcdcc8;
}

.pastille.suspendu {
    background: var(--attention-doux);
    color: var(--attention);
    border-color: #e8d3a8;
}

.pastille.revoque {
    background: var(--alerte-doux);
    color: var(--alerte);
    border-color: #e0bdb5;
}

/* ------------------------------------------------------------------ Connexion */

.ecran-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.boite-connexion {
    width: 100%;
    max-width: 330px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-top: 3px solid var(--accent);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 22px;
}

.boite-connexion .marque {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    color: var(--accent-fonce);
}

.boite-connexion .marque img {
    width: 28px;
    height: 28px;
}

.boite-connexion .sous-titre {
    margin-bottom: 18px;
}

.boite-connexion button {
    width: 100%;
    margin-top: 4px;
}

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

.pagination {
    margin-top: 12px;
    display: flex;
    gap: 6px;
    font-size: 12.5px;
    align-items: center;
}

.pagination .page-item {
    list-style: none;
}

.pagination ul {
    display: flex;
    gap: 5px;
    padding: 0;
    margin: 0;
}

@media (max-width: 760px) {
    .page {
        display: block;
    }

    .lateral {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--bord);
        display: flex;
        flex-wrap: wrap;
        padding: 4px;
    }

    .lateral .groupe {
        display: none;
    }

    .deux-colonnes {
        display: block;
    }

    .deux-colonnes > .etroit {
        margin-top: 12px;
    }
}

/* ----------------------------------------------------------------------
   La zone de glisser-déposer.

   Le champ de fichier est étendu sur toute la surface et rendu invisible :
   sans JavaScript, la zone reste donc entièrement cliquable et le choix de
   fichier fonctionne. Le script n'ajoute que la surbrillance et l'envoi
   immédiat.
   ---------------------------------------------------------------------- */
.zone-depot {
    position: relative;
    border: 2px dashed var(--bord-fort);
    border-radius: 5px;
    background: #fbfcfc;
    padding: 18px 12px;
    text-align: center;
    transition: border-color .12s, background .12s;
}

.zone-depot:hover { border-color: var(--accent); }

.zone-depot.survol {
    border-color: var(--accent);
    background: #eef4f0;
}

.zone-depot input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.zone-depot-texte {
    font-size: 13px;
    color: #6b7a73;
    pointer-events: none;
}


/* ----------------------------------------------------------------------
   L'aperçu du message, aux trois largeurs qui comptent.

   Le message fait 600 px : l'afficher dans une colonne latérale le comprime
   et donne une fausse idée du rendu. Il occupe donc toute la largeur, et la
   scène le centre à la taille de l'appareil choisi.
   ---------------------------------------------------------------------- */
.apercu-barre {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.apercu-barre a {
    padding: 4px 12px;
    border: 1px solid var(--bord);
    border-radius: 4px;
    font-size: 12px;
    color: var(--texte);
    text-decoration: none;
    background: #fff;
}

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

.apercu-barre a.actif {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.apercu-scene {
    display: flex;
    justify-content: center;
    background: #e9edeb;
    border-radius: 4px;
    padding: 12px;
    overflow-x: auto;
}

.apercu-cadre {
    height: 640px;
    max-width: 100%;
    border: 1px solid var(--bord-fort);
    border-radius: 3px;
    background: #fff;
}

/* ----------------------------------------------------------------------
   Les confirmations, SANS JavaScript.

   `onsubmit="return confirm(…)"` ne protégeait rien : script coupé, le
   navigateur ignore l'attribut et soumet le formulaire. Un clic sur ✕
   supprimait un bloc sans un mot, et « Importer » écrasait une campagne
   entière.

   Deux motifs natifs les remplacent. Le dépliant, pour une action isolée :
   il faut ouvrir, puis cliquer. La case obligatoire, pour une action qui a
   déjà son bouton : `required` est vérifié par le navigateur lui-même.
   ---------------------------------------------------------------------- */
.confirmation {
    display: inline-block;
    position: relative;
}

.confirmation > summary {
    /* `display: block` supprime le marqueur natif partout, y compris là où
       `list-style: none` ne suffit pas. Les deux pseudo-éléments qui suivent
       couvrent les moteurs plus anciens. */
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 2px 8px;
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte-doux);
    font-size: 13px;
    line-height: 1.4;
}

.confirmation > summary::-webkit-details-marker { display: none; }
.confirmation > summary::marker { content: ''; }

.confirmation > summary:hover {
    background: var(--alerte-doux);
    border-color: #e0bdb5;
    color: var(--alerte);
}

.confirmation[open] > summary {
    background: var(--alerte-doux);
    border-color: #e0bdb5;
    color: var(--alerte);
}

/* Au-dessus du contenu, et aligné à droite : le dépliant naît dans une barre
   d'outils serrée, en bout de ligne. */
.confirmation > form {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--bord-fort);
    border-radius: var(--rayon);
    padding: 8px;
    box-shadow: var(--ombre);
    white-space: nowrap;
}

.case-obligatoire {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
    font-weight: normal;
    font-size: 12.5px;
    color: var(--texte-doux);
    cursor: pointer;
}

.case-obligatoire input[type="checkbox"] {
    width: auto;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------------
   La jauge d'avancement d'une diffusion.

   Un trait, pas un camembert : la seule question est « où en est-on », et
   elle se lit d'un coup d'œil sur une longueur. La couleur ne porte rien de
   plus que la barre elle-même.
   ---------------------------------------------------------------------- */
.jauge {
    height: 8px;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 4px;
    overflow: hidden;
}

.jauge-part {
    height: 100%;
    background: var(--accent-clair);
    transition: width 0.2s;
}