/* ==========================================================================
   PAGES DE TEXTE LONG (CGU, Confidentialité, À propos...)
   Se charge EN PLUS de split-layout.css : on ne redéfinit que les écarts.
   Mobile first : sur mobile, identique aux autres pages (bannière empilée).
   Sur PC : ratio inversé -> 1/3 image à gauche, 2/3 texte à droite.
   ========================================================================== */

/* --- Conteneur du texte (équivalent "large" du .form-container) --- */
.text-container {
    width: 100%;
    max-width: 65ch; /* Largeur de lecture confortable, pas la largeur écran */
    margin: 1rem auto;
}

/* --- Typographie du contenu --- */
.text-container h2 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.text-container h3 {
    font-size: 1.05rem;
    color: var(--text-dark);
    margin: 1.75rem 0 0.5rem;
}

/* Titres de section : soulignement simple plutôt que les petits traits de
   .divider (qui coupent à travers un texte passant sur plusieurs lignes en
   mobile). Beaucoup d'air au-dessus, peu en dessous : le titre appartient
   visuellement au contenu qui le suit, et c'est l'espace qui sépare les parties.
   Conteneur flex : centre verticalement le repère coloré et le "?" éventuel sur
   le texte, là où vertical-align s'alignerait sur la ligne de base.
   Sélecteur volontairement hors ".text-container" : ce style sert aussi aux
   pages en pleine largeur (tableau de bord, sorties extérieures). La taille de
   police est redéclarée ici pour ne plus dépendre de ".text-container h3". */
h3.divider {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    /* relative : sert de repère à la bulle du "?" (cf. .info-icon::after). */
    position: relative;
    text-align: left;
    font-size: 1.05rem;
    color: #3f526e;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin: 3.5rem 0 1.25rem;
}

/* Petit repère coloré devant le titre, à la place des traits latéraux de
   .divider (positionnés en absolu, d'où la remise à static). */
h3.divider::before {
    content: "";
    position: static;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background-color: var(--primary);
}

h3.divider::after {
    content: none;
}

.text-container p,
.text-container li {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.text-container ul {
    margin: 0 0 1rem 1.25rem;
}

.text-container li {
    margin-bottom: 0.35rem;
}

/* Liens du corps de texte UNIQUEMENT (:not(.btn) : sans lui, cette règle
   plus spécifique que .btn-primary repeindrait le texte des liens-boutons
   en bleu sur fond bleu) */
.text-container a:not(.btn) {
    color: var(--primary);
    text-decoration: none;
}

.text-container a:not(.btn):hover {
    text-decoration: underline;
}

/* Date de mise à jour, sous le titre */
.text-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Encadré de mise en avant (coordonnées, contact RGPD...) */
.text-highlight {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

/* Bouton de retour en bas de page. Enfant DIRECT uniquement : sans le ">",
   cette marge s'appliquait aussi aux boutons de la barre de menu et aux
   boutons de formulaire, qui se retrouvaient poussés vers le bas. */
.text-container > .btn {
    margin-top: 2rem;
}

/* ==========================================================================
   RESPONSIVE DESKTOP (> 992px) : INVERSION DU RATIO
   ========================================================================== */

@media (min-width: 992px) {
    /* 1/3 image (au lieu de 2/3) */
    .layout-text .split-image {
        flex: 1;
        padding: 2.5rem;
    }

    /* 2/3 texte (au lieu de 1/3) */
    .layout-text .split-form {
        flex: 2;
        min-width: 0; /* Annule le min-width:480px du layout formulaire */
    }

    /* Titre de bannière moins massif sur une colonne étroite */
    .layout-text .brand-content h1 {
        font-size: 2.2rem;
    }

    .layout-text .brand-content p {
        font-size: 1rem;
    }

    .text-container {
        max-width: 72ch;
        margin: 2.5rem auto;
    }

    /* Le bouton retour n'a pas besoin de toute la largeur sur PC */
    .text-container > .btn {
        max-width: 280px;
    }

    /* Pages "tableau de bord" (espace membre...) : besoin de plus de largeur
       qu'une simple page de texte (CGU, à propos...). */
    .text-container.text-container-wide {
        max-width: 950px;
    }
}

/* ==========================================================================
   TABLEAU DE DONNÉES (historique des sorties...)
   Mobile first : défilement horizontal si le tableau est plus large que l'écran.
   ========================================================================== */
.table-scroll {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    /* 4px comme les onglets : des angles francs conviennent mieux à un cadre
       de données que l'arrondi de 8px des boutons et des cartes. */
    border-radius: 4px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    /* Fond propre : sans lui, le zébrage et l'en-tête s'évanouissent dès que le
       tableau est posé sur une bande colorée, la bande d'archive utilisant
       justement --bg-neutral. Le tableau ne dépend plus de son décor. */
    background-color: var(--surface);
}

/* Mobile : on laisse le texte revenir à la ligne. Le tableau reste plus large
   que l'écran, donc .table-scroll continue de le faire glisser à l'horizontale,
   mais sans l'étirer inutilement. */
.data-table th,
.data-table td {
    padding: 0.4rem 0.55rem;
    text-align: center;
    white-space: normal;
    font-size: 0.85rem;
}

/* Colonnes de texte libre (nom d'une sortie, lieu, identité d'un membre) :
   largeur bornée pour qu'un intitulé à rallonge ne déforme pas le tableau.
   Deux classes : l'emporte sur la règle nowrap du bureau. */
.data-table .cellule-longue {
    white-space: normal;
    min-width: 8rem;
    max-width: 14rem;
}

/* Le bornage vit sur un span interne, pas sur la cellule : une cellule de
   tableau ne peut pas changer de display sans casser la mise en page du
   tableau. Deux lignes au maximum, puis points de suspension ; le texte
   complet reste lisible en infobulle (attribut title). */
.tronque {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* propriété standard, doublée du préfixe encore nécessaire */
    overflow: hidden;
    max-width: 14rem;
}

/* En-tête franchement détaché : plus foncé que le zébrage, texte sombre, et un
   filet épais qui le sépare du corps du tableau. */
.data-table thead th {
    background-color: #e2e8f0;
    color: var(--text-dark);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #94a3b8;
}

.data-table tbody tr td {
    border-bottom: 1px solid #cbd5e1;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--bg-neutral);
}

.data-table tbody tr:hover {
    background-color: #eef2f7;
}

/* Ligne « aucune donnée » : le tableau garde son cadre et son en-tête, pour
   que l'absence de résultat ne casse pas la mise en page. */
.data-table .ligne-vide {
    color: var(--text-muted);
    font-style: italic;
}

/* ==========================================================================
   PASTILLES DE COULEUR (échéances de TIV, statuts d'équipement...)
   Vert = à jour ou disponible, orange = échéance sous 3 mois, bleu = en mer,
   rouge = dépassé ou indisponible. Une légende accessible via le "?" de
   l'en-tête accompagne chaque tableau : la couleur ne porte jamais seule
   l'information, le texte de la cellule reste toujours lisible.
   ========================================================================== */
.pastille {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    white-space: nowrap; /* ni une date ni un statut ne se coupent en deux lignes */
}

.pastille-verte {
    background-color: #ecfdf5;
    color: #047857;
}

.pastille-orange {
    background-color: #fffbeb;
    color: #92400e;
}

.pastille-bleue {
    background-color: #eff6ff;
    color: #1d4ed8;
}

.pastille-rouge {
    background-color: #fef2f2;
    color: #b91c1c;
}

/* Sorti définitivement du parc : traitement plein plutôt que pastel, pour que
   ce soit lu comme un état terminal et non comme une alerte de plus. */
.pastille-noire {
    background-color: #334155;
    color: #f8fafc;
}

/* PC : place suffisante pour garder chaque cellule sur une seule ligne,
   sauf les colonnes de texte libre marquées .cellule-longue. */
@media (min-width: 992px) {
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.85rem;
        white-space: nowrap;
        font-size: 0.88rem;
    }
}