/*
    Thème STANDARD du site (pages des utilisateurs : connexion, création du mot de passe, espace...).
    Couleur de base #1A465F (bleu FACISOFT). La console et l'administration ont leur propre thème (console.css).

    Chargé UNIQUEMENT par les pages concernées, via :
        <HeadContent><link rel="stylesheet" href="@Assets["site.css"]" /></HeadContent>
    Les composants communs (champs, bouton œil...) sont dans commun.css, chargé partout.
*/

/*
    Palette du thème, définie une seule fois sous forme de variables CSS.
    Pour changer la couleur de toutes les pages utilisateur, il suffit de modifier ces valeurs.
*/
:root {
    --site-primaire: #1A465F;          /* couleur de base (bleu FACISOFT) */
    --site-primaire-rgb: 26, 70, 95;   /* même couleur en R, G, B : sert pour les transparences rgba(...) */
    --site-primaire-survol: #163C51;   /* plus foncée : bouton survolé par la souris */
    --site-primaire-actif: #15384C;    /* encore plus foncée : bouton en cours de clic */
    --site-primaire-fonce: #0B2230;    /* très foncée : fin du dégradé de fond */

    /* Couleur d'accent des composants communs (commun.css : bouton œil...) : celle du site */
    --theme-primaire: var(--site-primaire);

    /* Modes de saisie (voir « Modes de saisie » plus bas) : ORANGE pour la modification, VERT pour la création */
    --modification-couleur: #D97706;        /* orange */
    --modification-couleur-rgb: 217, 119, 6;
    --modification-fonce: #B45309;          /* survol, titres */
    --modification-pale: #FFF7ED;           /* fond du bandeau */
    --modification-texte: #7C2D12;          /* texte sur fond pâle */

    --creation-couleur: #198754;            /* vert (celui de Bootstrap « success ») */
    --creation-couleur-rgb: 25, 135, 84;
    --creation-fonce: #146C43;
    --creation-pale: #EEF8F2;
    --creation-texte: #0A3622;
}

/* =====================================================================================
   Mise en page commune des pages du site
   ===================================================================================== */

/* Fond plein écran qui centre la carte horizontalement et verticalement */
.site-fond {
    min-height: 100vh;  /* hauteur de l'écran, pour les anciens navigateurs */
    min-height: 100dvh; /* hauteur réellement visible sur mobile (tient compte de la barre d'adresse) */
    display: block;
    align-content: center;
    justify-items: center;
    padding: 1rem;      /* marge de sécurité autour de la carte sur les petits écrans */
    background-color: #f4f6f9; /* couleur de repli si le dégradé n'est pas pris en charge */
    background-image: linear-gradient(135deg, var(--site-primaire) 0%, var(--site-primaire-fonce) 100%);
}

/* Carte blanche contenant le contenu : toute la largeur sur mobile, limitée à 420px au-delà */
.site-carte {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 0.75rem;
}

/* Variante plus large, pour les pages de contenu (liste des dossiers...) */
.site-carte.site-carte-large {
    max-width: 720px;
}

/* Titre de section à l'intérieur d'une page */
.site-section {
    color: var(--site-primaire);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.75rem;
}

/* =====================================================================================
   Composants
   ===================================================================================== */

/*
    Bouton primaire du site : s'utilise TOUJOURS avec la classe Bootstrap « btn » : class="btn btn-site".
    Même principe que btn-console : on redéfinit les variables --bs-btn-* de Bootstrap pour tous les états.
*/
.btn-site {
    /* État normal */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--site-primaire);
    --bs-btn-border-color: var(--site-primaire);
    /* Survol de la souris */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--site-primaire-survol);
    --bs-btn-hover-border-color: var(--site-primaire-survol);
    /* Halo de focus (navigation au clavier) */
    --bs-btn-focus-shadow-rgb: var(--site-primaire-rgb);
    /* Pendant le clic */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--site-primaire-actif);
    --bs-btn-active-border-color: var(--site-primaire-actif);
    /* Bouton désactivé (Bootstrap ajoute lui-même la transparence) */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--site-primaire);
    --bs-btn-disabled-border-color: var(--site-primaire);
}

/* Remplace l'anneau de focus bleu clair défini dans app.css par la couleur du site */
.btn-site:focus, .btn-site:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--site-primaire-rgb), 0.5);
}

/* Champ de saisie ou case à cocher sélectionné : bordure et halo aux couleurs du site */
.form-control:focus, .form-check-input:focus {
    border-color: var(--site-primaire);
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--site-primaire-rgb), 0.5);
}

/* Case à cocher cochée */
.form-check-input:checked {
    background-color: var(--site-primaire);
    border-color: var(--site-primaire);
}

/* Liens du texte (hors boutons) aux couleurs du site */
.site-carte a:not(.btn) {
    color: var(--site-primaire);
}

/* =====================================================================================
   Modes de saisie : MODIFICATION (orange) et CRÉATION (vert)
   Utilisation : entourer le formulaire d'un bloc <div class="mode-modification"> ou <div class="mode-creation">.
   À l'intérieur, tout prend la couleur du mode : champs sélectionnés, cases cochées, bandeau (bandeau-mode),
   barre des boutons (barre-actions), bouton Enregistrer (btn-enregistrer).
   Les règles utilisent les variables --mode-* : la couleur ne change qu'à un seul endroit (ci-dessous).
   ===================================================================================== */

/* Couleurs du mode, reprises des palettes de :root */
.mode-modification {
    --mode-couleur: var(--modification-couleur);
    --mode-couleur-rgb: var(--modification-couleur-rgb);
    --mode-fonce: var(--modification-fonce);
    --mode-pale: var(--modification-pale);
    --mode-texte: var(--modification-texte);
}

.mode-creation {
    --mode-couleur: var(--creation-couleur);
    --mode-couleur-rgb: var(--creation-couleur-rgb);
    --mode-fonce: var(--creation-fonce);
    --mode-pale: var(--creation-pale);
    --mode-texte: var(--creation-texte);
}

/* Champ sélectionné (en cours de saisie) : bordure et halo pâle de la couleur du mode,
   à la place du bleu du site (règle .form-control:focus plus haut ; celle-ci est plus précise, elle l'emporte) */
:is(.mode-modification, .mode-creation) :is(.form-control, .form-select, .form-check-input):focus {
    border-color: var(--mode-couleur);
    box-shadow: 0 0 0 0.25rem rgba(var(--mode-couleur-rgb), 0.25);
}

/* Case à cocher cochée */
:is(.mode-modification, .mode-creation) .form-check-input:checked {
    background-color: var(--mode-couleur);
    border-color: var(--mode-couleur);
}

/* Bandeau en haut du formulaire (« Mode modification », « Création d'un client ») */
.bandeau-mode {
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    border-left: 0.3rem solid var(--mode-couleur);
    background-color: var(--mode-pale);
    color: var(--mode-texte);
    font-size: 0.9rem;
}

/* Barre des boutons (Annuler / Enregistrer) : cadre blanc collé en bas de l'écran pendant le défilement (« sticky »),
   avec une marge intérieure pour que les boutons ne touchent pas les bords */
.barre-actions {
    position: sticky;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--mode-couleur-rgb, var(--site-primaire-rgb)), 0.35);
    background-color: white;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

/* Téléphone : boutons de même largeur, qui se partagent la barre */
@media (max-width: 575.98px) {
    .barre-actions > * {
        flex: 1;
    }
}

/* Bouton Enregistrer : couleur pleine du mode (orange ou vert) ; s'utilise avec « btn » : class="btn btn-enregistrer" */
.btn-enregistrer {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mode-couleur);
    --bs-btn-border-color: var(--mode-couleur);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mode-fonce);
    --bs-btn-hover-border-color: var(--mode-fonce);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mode-fonce);
    --bs-btn-active-border-color: var(--mode-fonce);
    --bs-btn-focus-shadow-rgb: var(--mode-couleur-rgb);
}

/* Bouton de CRÉATION (« + Nouveau client »...) : vert pâle, vert plein au survol ; class="btn btn-creation".
   Utilisable partout (pas besoin d'être dans un bloc mode-creation) */
.btn-creation {
    --bs-btn-color: var(--creation-fonce);
    --bs-btn-bg: var(--creation-pale);
    --bs-btn-border-color: rgba(var(--creation-couleur-rgb), 0.45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--creation-couleur);
    --bs-btn-hover-border-color: var(--creation-couleur);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--creation-fonce);
    --bs-btn-active-border-color: var(--creation-fonce);
    --bs-btn-focus-shadow-rgb: var(--creation-couleur-rgb);
    font-weight: 600;
}

/* Bouton de MODIFICATION (« Modifier » d'une fiche...) : orange pâle, orange plein au survol ; class="btn btn-modification".
   Même principe que btn-creation, utilisable partout */
.btn-modification {
    --bs-btn-color: var(--modification-fonce);
    --bs-btn-bg: var(--modification-pale);
    --bs-btn-border-color: rgba(var(--modification-couleur-rgb), 0.45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--modification-couleur);
    --bs-btn-hover-border-color: var(--modification-couleur);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--modification-fonce);
    --bs-btn-active-border-color: var(--modification-fonce);
    --bs-btn-focus-shadow-rgb: var(--modification-couleur-rgb);
    font-weight: 600;
}

/* Halo de focus (clic, touche Tab) : couleur du bouton au lieu du bleu imposé par app.css à tous les boutons */
.btn-enregistrer:focus, .btn-enregistrer:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--mode-couleur-rgb), 0.5);
}

.btn-creation:focus, .btn-creation:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--creation-couleur-rgb), 0.5);
}

.btn-modification:focus, .btn-modification:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--modification-couleur-rgb), 0.5);
}

/* =====================================================================================
   Champs NUMÉRIQUES à masque de saisie (attribut data-masque, voir wwwroot/script/Général/masques.js) : valeur centrée dans le champ
   (demande de Mathis, 2026-10-06), sur toutes les fiches. Ne pas leur donner la classe Bootstrap text-end, qui
   imposerait l'alignement à droite (!important).
   ===================================================================================== */

input[data-masque] {
    text-align: center;
}

/* =====================================================================================
   APERÇU d'une ligne de devis pendant son DÉPLACEMENT (glisser-déposer, wwwroot/script/CRM/devis.js) : petite vignette
   qui suit le pointeur (n° + code article, désignation sur une ligne, total HT). Créée par le script : ses styles sont
   ici (le CSS isolé de la page ne s'appliquerait pas). Ajoutée dans le formulaire : couleur du mode (--mode-*).
   pointer-events: none : elle ne gêne jamais le glisser (le pointeur « passe à travers »). Position : transform posé
   par le script (CSSOM, autorisé par la CSP).
   ===================================================================================== */

.apercu-deplacement {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    width: min(16rem, calc(100vw - 2rem));
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--mode-couleur, var(--site-primaire));
    border-left: 0.25rem solid var(--mode-couleur, var(--site-primaire));
    border-radius: 0.4rem;
    background-color: white;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
    opacity: 0.95;
    font-size: 0.8rem;
    line-height: 1.3;
    pointer-events: none;
}

.apercu-deplacement-tete {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
}

.apercu-deplacement-total {
    white-space: nowrap;
}

/* Désignation : une seule ligne, coupée par « … » */
.apercu-deplacement-designation {
    overflow: hidden;
    color: #495057;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================================
   APERÇU GED : fenêtre d'aperçu d'un document de la GED (wwwroot/script/Général/ged.js, <dialog> créé par le script ;
   composant Controles/ListeGed). En-tête fixe (nom, « Télécharger », « Fermer ») puis la zone de contenu, qui seule
   défile. Contenu selon le genre (classe apercu-ged-genre-*) : image réduite pour tenir dans l'écran, lecteur vidéo /
   audio, pages PDF dessinées par PDF.js, HTML du serveur (texte, tableaux, Word, PowerPoint, mail), message.
   ===================================================================================== */

.apercu-ged {
    width: min(64rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.35);
}

/* Ouverte : en colonne, l'en-tête reste visible et seul le contenu défile (display posé seulement sur [open], sinon la
   fenêtre fermée resterait affichée) */
.apercu-ged[open] {
    display: flex;
    flex-direction: column;
}

/* PDF et documents : toute la hauteur de l'écran (lecture confortable, même si le début du fichier est court) */
.apercu-ged:has(.apercu-ged-genre-pdf),
.apercu-ged:has(.apercu-ged-genre-document) {
    height: calc(100vh - 2rem);
}

.apercu-ged-contenu {
    flex: 1 1 auto;
    min-height: 0;   /* sans cela, le contenu ne défilerait pas dans une colonne flex */
    overflow: auto;
}

.apercu-ged-genre-pdf {
    padding: 0.75rem;
    background-color: #E9ECEF;
}

.apercu-ged-genre-document {
    padding: 0.75rem 1rem;
}

/* Message (chargement, pas d'aperçu, erreur, aperçu limité) */
.apercu-ged-message {
    margin: 1rem 0;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

/* Vidéo / son : lecteur du navigateur à la largeur de la fenêtre */
.apercu-ged-lecteur {
    display: block;
    width: 100%;
    max-height: calc(100vh - 7rem);
    background-color: black;
}

audio.apercu-ged-lecteur {
    margin: 1.5rem 0;
    background-color: transparent;
}

/* Page PDF : canvas dessiné à la densité de l'écran, affiché à la largeur de la zone */
.apercu-ged-page {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto 0.75rem;
    background-color: white;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.25);
}

/* Fichier texte (code, JSON, XML, journal...) : chasse fixe, retours à la ligne conservés, lignes longues coupées */
.apercu-ged-texte {
    margin: 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Tableaux (CSV, Excel, Word) : défilement horizontal propre au tableau, en-têtes collés en haut */
.apercu-ged-tableau {
    position: relative;   /* voir CLAUDE.md : élément absolu dans un cadre défilant */
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.apercu-ged-tableau table {
    width: auto;
    margin: 0;
    font-size: 0.8rem;
}

.apercu-ged-tableau th,
.apercu-ged-tableau td {
    white-space: nowrap;
}

.apercu-ged-excel th {
    background-color: #F1F3F5;
    color: #495057;
    font-weight: 600;
    text-align: center;
}

.apercu-ged-feuille {
    margin: 0.75rem 0 0.4rem;
    color: var(--site-primaire);
    font-size: 1rem;
    font-weight: 600;
}

/* Word : paragraphes et titres comme dans un document ; tableaux à cellules sur plusieurs lignes */
.apercu-ged-word {
    max-width: 50rem;
    margin: 0 auto;
}

.apercu-ged-word p {
    margin-bottom: 0.5rem;
}

.apercu-ged-word h3,
.apercu-ged-word h4,
.apercu-ged-word h5,
.apercu-ged-word h6 {
    margin: 1rem 0 0.5rem;
    color: var(--site-primaire);
    font-size: 1.05rem;
    font-weight: 600;
}

.apercu-ged-word .apercu-ged-tableau td {
    white-space: normal;
}

/* PowerPoint : une carte par diapositive */
.apercu-ged-diapositive {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    border-radius: 0.4rem;
}

.apercu-ged-diapositive h3 {
    margin: 0 0 0.5rem;
    color: var(--site-primaire);
    font-size: 0.9rem;
    font-weight: 600;
}

.apercu-ged-diapositive p {
    margin-bottom: 0.3rem;
}

.apercu-ged-vide {
    color: #6c757d;
    font-style: italic;
}

/* Mail : en-têtes (De, À, Cc, Date, Objet) puis texte du message et pièces jointes */
.apercu-ged-entetes {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    font-size: 0.875rem;
}

.apercu-ged-entetes dt {
    color: #6c757d;
    font-weight: 600;
}

.apercu-ged-entetes dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.apercu-ged-corps-mail {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.apercu-ged-titre-pj {
    margin: 1rem 0 0.25rem;
    color: var(--site-primaire);
    font-weight: 600;
}

.apercu-ged-pj {
    margin: 0;
    font-size: 0.875rem;
}

.apercu-ged::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.apercu-ged-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(var(--site-primaire-rgb), 0.15);
}

/* Nom du fichier : prend la place disponible, coupé s'il est très long */
.apercu-ged-titre {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--site-primaire);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.apercu-ged-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    margin: 0 auto;
    object-fit: contain;
    background-color: #F8F9FA;
}

/* =====================================================================================
   Fenêtres de CHOIX d'un client / d'un article (wwwroot/script/Général/choix-client.js et choix-article.js, élément
   <dialog> créé par le script) : recherche + liste
   défilante (code, nom, code postal + ville) ; adaptée au téléphone (largeur de l'écran moins une marge).
   ===================================================================================== */

.fenetre-choix {
    width: min(40rem, calc(100vw - 2rem));
    max-height: min(40rem, calc(100vh - 2rem));
    padding: 1rem;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.fenetre-choix[open] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fenetre-choix::backdrop {
    background-color: rgba(0, 0, 0, 0.35);
}

.fenetre-choix-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--site-primaire);
}

/* Liste défilante : prend la hauteur restante de la fenêtre */
.fenetre-choix-liste {
    flex: 1;
    min-height: 12rem;
    overflow-y: auto;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    border-radius: 0.5rem;
}

/* Un client : code + nom sur une ligne, code postal et ville en dessous (petit, gris) */
.fenetre-choix-ligne {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: 0.75rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    border-bottom: 1px solid rgba(var(--site-primaire-rgb), 0.08);
    background: none;
    text-align: left;
    font-size: 0.875rem;
}

.fenetre-choix-ligne:hover,
.fenetre-choix-ligne:focus-visible {
    background-color: rgba(var(--site-primaire-rgb), 0.08);
    outline: none;
}

.fenetre-choix-code {
    font-weight: 600;
    color: var(--site-primaire);
    overflow-wrap: anywhere;
}

.fenetre-choix-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fenetre-choix-ville {
    grid-column: 2;
    font-size: 0.75rem;
    color: #6c757d;
}

.fenetre-choix-message {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #6c757d;
    text-align: center;
}

.fenetre-choix-message:empty {
    display: none;
}

.fenetre-choix-repere {
    height: 1px;
}

/* Bouton loupe collé à droite d'un champ code client (groupe Bootstrap input-group) */
.bouton-choix-client {
    display: inline-flex;
    align-items: center;
    color: var(--site-primaire);
}

/* =====================================================================================
   Texte mis en forme (RTF converti en HTML par Services/Dossiers/ConversionRtf : désignations des lignes de devis...)
   Les couleurs et tailles du RTF ne peuvent pas être écrites en style="" (interdit par la CSP) : le convertisseur les
   ramène à ces classes (couleur la plus proche de la palette, taille la plus proche de la liste en points).
   ===================================================================================== */

.rtf p {
    margin: 0;                     /* paragraphes serrés, comme dans le logiciel */
}

.rtf-centre { text-align: center; }
.rtf-droite { text-align: right; }
.rtf-justifie { text-align: justify; }

/* Tailles en POINTS (liste ConversionRtf.TaillesPoints), proportionnelles au texte normal (9 pt = taille du texte
   autour, sans classe) : taille / 9 em */
.rtf-t-6 { font-size: 0.667em; }
.rtf-t-7 { font-size: 0.778em; }
.rtf-t-8 { font-size: 0.889em; }
.rtf-t-10 { font-size: 1.111em; }
.rtf-t-11 { font-size: 1.222em; }
.rtf-t-12 { font-size: 1.333em; }
.rtf-t-14 { font-size: 1.556em; }
.rtf-t-16 { font-size: 1.778em; }
.rtf-t-18 { font-size: 2em; }
.rtf-t-20 { font-size: 2.222em; }
.rtf-t-24 { font-size: 2.667em; }
.rtf-t-28 { font-size: 3.111em; }
.rtf-t-36 { font-size: 4em; }

/* Anciennes tailles en 4 crans (avant la liste en points) : plus produites, gardées pour un ancien HTML encore ouvert */
.rtf-t-petit { font-size: 0.778em; }
.rtf-t-grand { font-size: 1.333em; }
.rtf-t-tres-grand { font-size: 1.778em; }

/* Palette : teintes lisibles sur fond blanc (le jaune pur, par exemple, est assombri) */
.rtf-c-gris { color: #6B7280; }
.rtf-c-gris-clair { color: #9CA3AF; }
.rtf-c-rouge { color: #DC2626; }
.rtf-c-rouge-fonce { color: #991B1B; }
.rtf-c-orange { color: #EA580C; }
.rtf-c-jaune { color: #B58900; }
.rtf-c-vert { color: #15803D; }
.rtf-c-vert-clair { color: #22A34A; }
.rtf-c-bleu { color: #1D4ED8; }
.rtf-c-bleu-fonce { color: #1E3A8A; }
.rtf-c-cyan { color: #0E7490; }
.rtf-c-violet { color: #7E22CE; }
.rtf-c-magenta { color: #C026D3; }

/* Surlignage (couleur de fond du texte, \highlightN du RTF) : teintes claires, le texte reste lisible */
.rtf-s-jaune { background-color: #FEF08A; }
.rtf-s-vert { background-color: #BBF7D0; }
.rtf-s-bleu { background-color: #BAE6FD; }
.rtf-s-rose { background-color: #FBCFE8; }
.rtf-s-gris { background-color: #E5E7EB; }

/* =====================================================================================
   Listes en VIGNETTES (clients, devis...) : grille responsive, vignette entièrement cliquable, poubelle rouge.
   Structure attendue :
     <div class="vignettes">
       <div class="vignette">
         ... <form class="form-supprimer"><button class="bouton-supprimer">…</button></form> ...
         <a class="vignette-nom stretched-link" href="fiche">Nom</a>   ← lien étiré sur toute la vignette
         <span class="vignette-ligne">…</span>  <div class="vignette-bas">…</div>
       </div>
     </div>
   ===================================================================================== */

/* Grille : « auto-fill » + minmax → autant de colonnes de 17 rem minimum que la largeur le permet
   (1 colonne sur téléphone, 2 sur tablette, 3 ou 4 sur grand écran, sans @media) ;
   min(17rem, 100%) : sur un très petit écran, une vignette ne dépasse jamais la largeur disponible */
.vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 0.75rem;
}

/* Vignette : bloc blanc, liseré de couleur à gauche ; repère (position: relative) du lien étiré */
.vignette {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;                  /* autorise la coupure « … » des textes longs dans la grille */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: white;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    border-left: 0.25rem solid var(--site-primaire);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Survol à la souris ou focus clavier sur le lien : la vignette se soulève légèrement */
.vignette:hover,
.vignette:has(.vignette-nom:focus-visible) {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1rem rgba(var(--site-primaire-rgb), 0.2);
}

/* Contour bien visible autour de toute la vignette quand son lien a le focus clavier (accessibilité) */
.vignette:has(.vignette-nom:focus-visible) {
    outline: 0.2rem solid rgba(var(--site-primaire-rgb), 0.5);
    outline-offset: 0.15rem;
}

/* Code (client, n° de devis...) : petit, en couleur du site */
.vignette-code {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--site-primaire);
    overflow-wrap: anywhere;
}

/* Nom (c'est aussi le lien vers la fiche) : en gras, sur 2 lignes au plus (au-delà : « … ») */
.vignette-nom {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.vignette-nom:hover {
    color: inherit;
}

.vignette-nom:focus-visible {
    outline: none;   /* le contour est dessiné autour de la vignette (règle ci-dessus) */
}

/* Lignes de détail : une seule ligne chacune, texte long coupé avec « … » */
.vignette-ligne {
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloc du bas (contact, total...) : poussé en bas de la vignette, pour aligner les vignettes d'une même ligne */
.vignette-bas,
.vignette-contact {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 0.35rem;
}

/* Poubelle : formulaire posé AU-DESSUS du lien étiré (z-index), sinon le clic ouvrirait la fiche */
.form-supprimer {
    position: relative;
    z-index: 2;
    margin: 0;
    line-height: 1;
}

.bouton-supprimer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background-color: transparent;
    color: #DC3545;                /* rouge (celui de Bootstrap « danger ») */
}

.bouton-supprimer svg {
    fill: currentColor;
}

/* Survol / focus : fond rouge très pâle, pour bien voir l'action avant de cliquer */
.bouton-supprimer:hover,
.bouton-supprimer:focus-visible {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.35);
    outline: none;
}

/* Utilisateurs qui ont demandé moins d'animations dans leur système : pas d'effet de soulèvement */
@media (prefers-reduced-motion: reduce) {
    .vignette {
        transition: none;
    }

    .vignette:hover,
    .vignette:has(.vignette-nom:focus-visible) {
        transform: none;
    }
}