/* /Components/Controles/ChampFiche.razor.rz.scp.css */
/*
    Styles d'une rubrique de fiche (ChampFiche.razor) — CSS isolé.
    La disposition en colonnes est faite par le bloc parent (classe « champs » de la page, grille CSS) ;
    « champ-large » demande toute la largeur de cette grille.
*/

.champ-fiche[b-tow9eixff0] {
    min-width: 0;   /* autorise la coupure des textes longs dans la grille */
}

.champ-large[b-tow9eixff0] {
    grid-column: 1 / -1;
}

/* Libellé : petit, gris, au-dessus de la valeur */
.champ-libelle[b-tow9eixff0] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Valeur : texte normal ; un texte sans espace très long (e-mail, code...) passe à la ligne au lieu de déborder */
.champ-valeur[b-tow9eixff0] {
    overflow-wrap: anywhere;
    min-height: 1.5rem;
}
/* /Components/Controles/ChampSaisie.razor.rz.scp.css */
/*
    Styles d'une rubrique de fiche en modification (ChampSaisie.razor) — CSS isolé.
    Mêmes règles de disposition que ChampFiche : la grille est celle du bloc parent (classe « champs » de la page).
*/

.champ-saisie[b-8irddb99ph] {
    min-width: 0;
}

.champ-large[b-8irddb99ph] {
    grid-column: 1 / -1;
}

/* Libellé : même aspect qu'en consultation (petit, gris, majuscules) */
.champ-libelle[b-8irddb99ph] {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* /Components/Controles/EditeurTexte.razor.rz.scp.css */
/* =====================================================================================
   Éditeur de texte mis en forme (EditeurTexte.razor). Couleur d'accent : celle du mode de saisie de la page
   (--mode-couleur : orange en modification, vert en création, site.css) ; à défaut, le bleu du site.
   ===================================================================================== */

/* Bloc de l'éditeur : toute la largeur disponible (aussi dans un conteneur flex, ex. cartes des lignes de devis sur
   téléphone, où il serait sinon réduit à la largeur de son texte) */
.editeur-texte[b-2g3c4k0ovl] {
    width: 100%;
    --editeur-couleur: var(--mode-couleur, #1A465F);
    --editeur-couleur-rgb: var(--mode-couleur-rgb, 26, 70, 95);
}

/* Zone de saisie : ressemble à un champ, s'agrandit avec le texte. Largeur : celle de la place disponible (la page
   peut imposer une largeur minimale, ex. FicheDevis.razor.css). */
.zone-editeur[b-2g3c4k0ovl] {
    width: 100%;
    min-height: 2.2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: white;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.zone-editeur:focus[b-2g3c4k0ovl] {
    outline: none;
    border-color: var(--editeur-couleur);
    box-shadow: 0 0 0 0.25rem rgba(var(--editeur-couleur-rgb), 0.25);
}

/* Barre de mise en forme : petite fenêtre FLOTTANTE au-dessus de la zone de saisie, visible seulement quand l'éditeur a
   le focus. Placée par rapport à l'ÉCRAN (position: fixed) : dans un cadre défilant (tableau des lignes d'un devis...),
   elle serait coupée. Sa position (top / left) est calculée par editeur-texte.js (positionnerBarre) ; par défaut hors
   de l'écran, le temps du calcul. */
.barre-editeur[b-2g3c4k0ovl] {
    display: none;
    position: fixed;
    top: -100rem;
    left: 0;
    z-index: 1050;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(var(--editeur-couleur-rgb), 0.45);
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.15);
}

.editeur-texte:focus-within .barre-editeur[b-2g3c4k0ovl] {
    display: flex;
}

/* Petite flèche sous la fenêtre, qui pointe vers la zone de saisie (au-dessus si la fenêtre est placée en dessous) */
.barre-editeur[b-2g3c4k0ovl]::after {
    content: "";
    position: absolute;
    left: 1rem;
    top: 100%;
    border: 0.4rem solid transparent;
    border-top-color: white;
    filter: drop-shadow(0 1px 0 rgba(var(--editeur-couleur-rgb), 0.45));
}

.barre-editeur.en-dessous[b-2g3c4k0ovl]::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: white;
    filter: drop-shadow(0 -1px 0 rgba(var(--editeur-couleur-rgb), 0.45));
}

.barre-editeur button[b-2g3c4k0ovl] {
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.35rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: white;
    font-size: 0.8rem;
    line-height: 1;
}

.barre-editeur button:hover[b-2g3c4k0ovl] {
    border-color: var(--editeur-couleur);
}

/* Rangée de boutons ; passe à la ligne si l'écran est étroit (téléphone) */
.rangee-editeur[b-2g3c4k0ovl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    max-width: min(20rem, calc(100vw - 2rem));
}

/* Format ACTIF sous le curseur (gras, italique...) : bouton en couleur pleine (editeur-texte.js, aria-pressed) */
.barre-editeur button[aria-pressed="true"][b-2g3c4k0ovl] {
    border-color: var(--editeur-couleur);
    background-color: var(--editeur-couleur);
    color: white;
}

/* ---- Petits MENUS (couleur, surlignage, taille) : bouton « A ▾ » / « ab ▾ » / « TT ▾ » + palette qui s'ouvre sous la
   barre. La palette est placée par rapport à la BARRE (position: fixed) et alignée sur son bord gauche : la barre est
   toujours tenue dans l'écran par editeur-texte.js, la palette aussi (sous le dernier bouton de la barre, elle sortirait
   de l'écran d'un téléphone). Ouverte / fermée par editeur-texte.js (classe « ouvert » sur .menu-barre). ---- */
.barre-editeur .bouton-menu[b-2g3c4k0ovl] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.lettre-menu[b-2g3c4k0ovl] {
    font-weight: 600;
}

/* « ab » du surlignage : petit fond jaune pâle pour évoquer le surligneur */
.lettre-surligne[b-2g3c4k0ovl] {
    padding: 0 0.1rem;
    background-color: #FEF08A;
}

.fleche-menu[b-2g3c4k0ovl] {
    font-size: 0.6rem;
    color: #6c757d;
}

/* Témoin : couleur EN COURS (classe pastille-* ou rtf-s-* posée par editeur-texte.js) */
.temoin[b-2g3c4k0ovl] {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 0.15rem;
}

.temoin-aucun[b-2g3c4k0ovl] {
    background-color: white;
}

.palette-menu[b-2g3c4k0ovl] {
    display: none;
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 2;                     /* au-dessus de la petite flèche de la barre (::after) */
    grid-template-columns: repeat(7, 1.3rem);
    gap: 0.35rem;
    padding: 0.45rem;
    border: 1px solid rgba(var(--editeur-couleur-rgb), 0.45);
    border-radius: 0.4rem;
    background-color: white;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.15);
}

.menu-barre.ouvert .palette-menu[b-2g3c4k0ovl] {
    display: grid;
}

/* ---- Couleurs du texte : pastilles rondes (mêmes teintes que la palette .rtf-c-* de site.css) ---- */
.barre-editeur .pastille[b-2g3c4k0ovl] {
    min-width: 1.3rem;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border-radius: 50%;
}

.pastille-noir[b-2g3c4k0ovl] { background-color: #000000 !important; }   /* = couleur normale du texte (pastille active) */
.pastille-gris[b-2g3c4k0ovl] { background-color: #6B7280 !important; }
.pastille-rouge[b-2g3c4k0ovl] { background-color: #DC2626 !important; }
.pastille-bordeaux[b-2g3c4k0ovl] { background-color: #991B1B !important; }
.pastille-orange[b-2g3c4k0ovl] { background-color: #EA580C !important; }
.pastille-jaune[b-2g3c4k0ovl] { background-color: #B58900 !important; }
.pastille-vert-clair[b-2g3c4k0ovl] { background-color: #22A34A !important; }
.pastille-vert[b-2g3c4k0ovl] { background-color: #15803D !important; }
.pastille-turquoise[b-2g3c4k0ovl] { background-color: #0E7490 !important; }
.pastille-bleu[b-2g3c4k0ovl] { background-color: #1D4ED8 !important; }
.pastille-marine[b-2g3c4k0ovl] { background-color: #1E3A8A !important; }
.pastille-violet[b-2g3c4k0ovl] { background-color: #7E22CE !important; }
.pastille-rose[b-2g3c4k0ovl] { background-color: #C026D3 !important; }

/* ---- Surlignage : carrés (mêmes teintes que .rtf-s-* de site.css) et bouton « aucun » ---- */
.barre-editeur .surligne[b-2g3c4k0ovl] {
    min-width: 1.3rem;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border-radius: 0.2rem;
}

.barre-editeur .surligne.rtf-s-jaune[b-2g3c4k0ovl] { background-color: #FEF08A; }
.barre-editeur .surligne.rtf-s-vert[b-2g3c4k0ovl] { background-color: #BBF7D0; }
.barre-editeur .surligne.rtf-s-bleu[b-2g3c4k0ovl] { background-color: #BAE6FD; }
.barre-editeur .surligne.rtf-s-rose[b-2g3c4k0ovl] { background-color: #FBCFE8; }
.barre-editeur .surligne.rtf-s-gris[b-2g3c4k0ovl] { background-color: #E5E7EB; }

.barre-editeur .surligne-aucun[b-2g3c4k0ovl] {
    font-size: 0.7rem;
    color: #6c757d;
}

/* ---- Taille : grille de nombres (points) ; témoin du bouton = taille en cours (editeur-texte.js) ---- */
.palette-tailles[b-2g3c4k0ovl] {
    grid-template-columns: repeat(5, 2.2rem);
    gap: 0.25rem;
}

.barre-editeur .choix-taille[b-2g3c4k0ovl] {
    padding: 0;
    font-size: 0.8rem;
}

.temoin-taille[b-2g3c4k0ovl] {
    min-width: 1.1rem;
    font-size: 0.7rem;
    text-align: center;
}

/* Choix EN COURS sous le curseur (couleur, surlignage, taille) : anneau de la couleur d'accent (classe « actif ») */
.barre-editeur .pastille.actif[b-2g3c4k0ovl],
.barre-editeur .surligne.actif[b-2g3c4k0ovl],
.barre-editeur .choix-taille.actif[b-2g3c4k0ovl] {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--editeur-couleur);
}

/* Dans la zone de saisie : couleurs posées par la barre (<font color>) affichées avec les teintes de la consultation
   (palette .rtf-c-* : le jaune pur, par exemple, serait illisible sur fond blanc). ::deep : ces balises sont créées par
   le script pendant la saisie, sans l'attribut du CSS isolé. */
.zone-editeur[b-2g3c4k0ovl]  font[color="#808080"] { color: #6B7280; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#ff0000"] { color: #DC2626; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#800000"] { color: #991B1B; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#ff8000"] { color: #EA580C; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#ffff00"] { color: #B58900; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#00ff00"] { color: #22A34A; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#008000"] { color: #15803D; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#00c0c0"] { color: #0E7490; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#0000ff"] { color: #1D4ED8; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#000080"] { color: #1E3A8A; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#800080"] { color: #7E22CE; }
.zone-editeur[b-2g3c4k0ovl]  font[color="#ff00ff"] { color: #C026D3; }
/* /Components/Controles/GaleriePhotos.razor.rz.scp.css */
/*
    Galerie de photos (GaleriePhotos.razor) — CSS isolé. Grille de miniatures au format 4/3 (celui des versions réduites
    de IMG_MEMO) : 2 colonnes sur téléphone, plus sur grand écran.
*/

.aucune-photo[b-5hy2e7jw9o] {
    margin: 0;
    font-style: italic;
    color: #6c757d;
}

.nombre-photos[b-5hy2e7jw9o] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--site-primaire);
}

/* ---- Grille : vignettes d'au moins 9 rem, autant de colonnes que la largeur le permet ---- */
.galerie[b-5hy2e7jw9o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une photo : miniature + légende ; position relative pour poser la poubelle sur la miniature */
.photo[b-5hy2e7jw9o] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lien-photo[b-5hy2e7jw9o] {
    display: block;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: white;
}

.lien-photo:hover[b-5hy2e7jw9o],
.lien-photo:focus-visible[b-5hy2e7jw9o] {
    border-color: var(--site-primaire);
    box-shadow: 0 0 0 0.2rem rgba(var(--site-primaire-rgb), 0.2);
}

/* Miniature à la largeur de sa case, toujours au format 4/3 (même si la version servie a une autre taille) */
.miniature[b-5hy2e7jw9o] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: white;
}

.legende-photo[b-5hy2e7jw9o] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 0.5rem;
    padding: 0.2rem 0.1rem 0;
    font-size: 0.75rem;
    color: #6c757d;
}

.categorie-photo[b-5hy2e7jw9o] {
    font-style: italic;
}

/* Poubelle : petit carré blanc posé dans le coin haut droit de la miniature (zone tactile de 2,25 rem) */
.bouton-supprimer-photo[b-5hy2e7jw9o] {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: 0.4rem;
    color: #DC3545;
    background-color: rgba(255, 255, 255, 0.92);
}

.bouton-supprimer-photo:hover[b-5hy2e7jw9o],
.bouton-supprimer-photo:focus-visible[b-5hy2e7jw9o] {
    color: white;
    background-color: #DC3545;
}

/* ---- Barre d'ajout : boutons + état (taille max, envoi en cours) — mêmes règles que la GED (ListeGed) ---- */
.ajout-photos[b-5hy2e7jw9o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Le champ fichier est caché dans son bouton : halo visible quand il a le focus clavier */
.bouton-ajout[b-5hy2e7jw9o] {
    position: relative;
    margin: 0;
}

.bouton-ajout:focus-within[b-5hy2e7jw9o] {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.3);
}

/* « Prendre une photo » : seulement sur les écrans tactiles (téléphone, tablette), où il ouvre l'appareil photo */
.bouton-photo[b-5hy2e7jw9o] {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .bouton-photo[b-5hy2e7jw9o] {
        display: inline-block;
    }
}

.etat-ajout[b-5hy2e7jw9o] {
    font-size: 0.8rem;
    color: #6c757d;
}

.etat-ajout.erreur[b-5hy2e7jw9o] {
    color: #DC3545;
    font-weight: 600;
}
/* /Components/Controles/ListeGed.razor.rz.scp.css */
/*
    Liste GED (ListeGed.razor) — CSS isolé. Un groupe par origine : bandeau + liste compacte des documents.
*/

.aucun-document[b-uxsk3nfctb] {
    margin: 0;
    font-style: italic;
    color: #6c757d;
}

/* Groupe d'une origine : espace avant le groupe suivant */
.groupe-ged[b-uxsk3nfctb] {
    margin-bottom: 1rem;
}

/* Bandeau de l'origine (même principe que les jours du planning) + nombre de documents */
.titre-groupe[b-uxsk3nfctb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--site-primaire);
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.nombre-documents[b-uxsk3nfctb] {
    padding: 0 0.45rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Liste des documents, collée sous le bandeau */
.documents[b-uxsk3nfctb] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: white;
    overflow: hidden;
}

.document + .document[b-uxsk3nfctb] {
    border-top: 1px solid rgba(var(--site-primaire-rgb), 0.08);
}

/* Une ligne = lien d'aperçu (toute la largeur restante) + bouton « Télécharger » à droite */
.document[b-uxsk3nfctb] {
    display: flex;
    align-items: center;
}

/* Lien d'aperçu : badge à gauche, nom et informations à droite */
.lien-document[b-uxsk3nfctb] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;   /* autorise la coupure des noms longs (sinon le bouton sortirait de l'écran du téléphone) */
    padding: 0.5rem 0.75rem;
    color: inherit;
    text-decoration: none;
}

/* Bouton « Télécharger » : carré discret, à la couleur du site au survol (zone tactile de 2,5 rem) */
.bouton-telecharger[b-uxsk3nfctb] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.25);
    border-radius: 0.4rem;
    color: var(--site-primaire);
    background-color: white;
}

.bouton-telecharger:hover[b-uxsk3nfctb],
.bouton-telecharger:focus-visible[b-uxsk3nfctb] {
    color: white;
    background-color: var(--site-primaire);
}

/* Poubelle (documents directs de la cible) : même gabarit que « Télécharger », en rouge */
.bouton-supprimer-ged[b-uxsk3nfctb] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    padding: 0;
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: 0.4rem;
    color: #DC3545;
    background-color: white;
}

.bouton-supprimer-ged:hover[b-uxsk3nfctb],
.bouton-supprimer-ged:focus-visible[b-uxsk3nfctb] {
    color: white;
    background-color: #DC3545;
}

/* ---- Barre d'ajout : boutons + état (taille max, envoi en cours) ---- */
.ajout-ged[b-uxsk3nfctb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Le champ fichier est caché dans son bouton : halo visible quand il a le focus clavier */
.bouton-ajout[b-uxsk3nfctb] {
    position: relative;
    margin: 0;
}

.bouton-ajout:focus-within[b-uxsk3nfctb] {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.3);
}

/* « Prendre une photo » : seulement sur les écrans tactiles (téléphone, tablette), où il ouvre l'appareil photo */
.bouton-photo[b-uxsk3nfctb] {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .bouton-photo[b-uxsk3nfctb] {
        display: inline-block;
    }
}

.etat-ajout[b-uxsk3nfctb] {
    font-size: 0.8rem;
    color: #6c757d;
}

.etat-ajout.erreur[b-uxsk3nfctb] {
    color: #DC3545;
    font-weight: 600;
}

.lien-document:hover[b-uxsk3nfctb],
.lien-document:focus-visible[b-uxsk3nfctb] {
    background-color: rgba(var(--site-primaire-rgb), 0.05);
}

.lien-document:hover .nom-document[b-uxsk3nfctb] {
    text-decoration: underline;
}

.corps-document[b-uxsk3nfctb] {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* autorise la coupure des noms longs */
}

.nom-document[b-uxsk3nfctb] {
    color: var(--site-primaire);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.infos-document[b-uxsk3nfctb],
.provenance-document[b-uxsk3nfctb] {
    font-size: 0.8rem;
    color: #6c757d;
}

.provenance-document[b-uxsk3nfctb] {
    font-style: italic;
}

/* ---- Badge de la famille du fichier (texte court + couleur) ---- */
.badge-fichier[b-uxsk3nfctb] {
    flex: 0 0 auto;
    width: 2.6rem;
    padding: 0.3rem 0;
    border-radius: 0.3rem;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
}

.icone-pdf[b-uxsk3nfctb] { background-color: #D32F2F; }
.icone-image[b-uxsk3nfctb] { background-color: #7B1FA2; }
.icone-texte[b-uxsk3nfctb] { background-color: #1565C0; }
.icone-tableur[b-uxsk3nfctb] { background-color: #2E7D32; }
.icone-presentation[b-uxsk3nfctb] { background-color: #E65100; }
.icone-fichier-texte[b-uxsk3nfctb] { background-color: #455A64; }
.icone-video[b-uxsk3nfctb] { background-color: #C2185B; }
.icone-audio[b-uxsk3nfctb] { background-color: #5E35B1; }
.icone-archive[b-uxsk3nfctb] { background-color: #6D4C41; }
.icone-mail[b-uxsk3nfctb] { background-color: #00838F; }
.icone-autre[b-uxsk3nfctb] { background-color: #6c757d; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
    Styles du layout principal (fichier « isolé » : ne s'applique qu'à MainLayout.razor).
    La barre de navigation a ses propres styles dans NavMenu.razor.css.
*/

/* Zone de contenu : fond gris clair, marges intérieures plus grandes sur ordinateur que sur mobile.
   Téléphone : sous la barre du haut → toute la hauteur de l'écran, moins la barre (3.5rem) */
.contenu-page[b-h40siu59rd] {
    min-height: calc(100vh - 3.5rem);
    padding: 1rem;
    background-color: #f4f6f9;
}

/* Ordinateur (≥ 768 px) : barre verticale à gauche, contenu à droite sur toute la largeur restante */
@media (min-width: 768px) {
    .cadre-page[b-h40siu59rd] {
        display: flex;
        align-items: flex-start; /* la barre garde sa hauteur d'écran (sticky) quand le contenu est plus long */
    }

    .contenu-page[b-h40siu59rd] {
        flex-grow: 1;
        min-width: 0;            /* autorise le contenu à rétrécir (tableaux larges) au lieu d'élargir la page */
        min-height: 100vh;       /* plus de barre au-dessus : toute la hauteur de l'écran */
        padding: 1.5rem 2rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/*
    Styles de la barre de navigation (fichier « isolé » : ne s'applique qu'à NavMenu.razor).
    Les couleurs var(--site-...) viennent de wwwroot/site.css (thème standard #1A465F), chargé par MainLayout.
    ::deep est nécessaire pour les liens générés par le composant NavLink (sinon le style isolé ne les atteint pas).

    Deux dispositions :
      - téléphone (par défaut) : barre horizontale en haut de l'écran, menus derrière le bouton ☰ ;
      - à partir de 768 px (bloc @media en bas) : barre verticale sur la gauche, toute la hauteur de l'écran.
*/

/* Barre aux couleurs du site ; reste visible en haut de l'écran pendant le défilement */
.barre-navigation[b-q4fguvj5mm] {
    background-color: var(--site-primaire);
    position: sticky;
    top: 0;
    z-index: 1020; /* au-dessus du contenu de la page */
    min-height: 3.5rem;
}

/* Section d'un module : titre discret (petites majuscules), puis ses pages légèrement décalées vers la droite */
.section-module[b-q4fguvj5mm] {
    margin-top: 0.75rem;
}

.titre-module[b-q4fguvj5mm] {
    display: block;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
}

.barre-navigation[b-q4fguvj5mm]  .lien-page {
    padding-left: 1.25rem;
}

/* E-mail + déconnexion : sous les menus sur téléphone */
.bloc-deconnexion[b-q4fguvj5mm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

/* Page en cours (classe « active » ajoutée par NavLink) : texte en gras, léger fond clair */
.barre-navigation[b-q4fguvj5mm]  .nav-link.active {
    font-weight: 600;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
}

/* Lien survolé */
.barre-navigation .nav-link:hover[b-q4fguvj5mm],
.barre-navigation[b-q4fguvj5mm]  .nav-link:hover {
    color: #fff;
}

/* Supprime l'anneau de focus bleu de app.css sur les liens après un clic (conservé au clavier via :focus-visible) */
.barre-navigation .nav-link:focus:not(:focus-visible)[b-q4fguvj5mm],
.barre-navigation[b-q4fguvj5mm]  .nav-link:focus:not(:focus-visible) {
    box-shadow: none;
}

/* ---------------------------------------------------------------------------------
   Tablette / ordinateur (≥ 768 px, même seuil que « navbar-expand-md ») : barre verticale à gauche.
   Bootstrap met la barre « -expand-md » à l'horizontale à partir de ce seuil : on la remet en colonne.
   --------------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .barre-navigation[b-q4fguvj5mm] {
        width: 15rem;
        flex-shrink: 0;          /* garde sa largeur à côté du contenu (MainLayout la place en colonne gauche) */
        height: 100vh;           /* toute la hauteur de l'écran... */
        align-items: stretch;
        padding: 1rem 0.75rem;
        overflow-y: auto;        /* ...avec défilement propre si les menus sont nombreux */
    }

    /* Contenu de la barre en colonne : logo, menus, puis déconnexion.
       (« .barre-navigation » devant : sélecteur plus précis que celui de Bootstrap, qu'il doit remplacer) */
    .barre-navigation .contenu-barre[b-q4fguvj5mm] {
        flex-direction: column;
        align-items: stretch;
        height: 100%;
        padding: 0;
    }

    .navbar-brand[b-q4fguvj5mm] {
        margin: 0 0 1rem;
        padding: 0 0.5rem;
    }

    /* Menus toujours visibles, empilés verticalement */
    .barre-navigation .menu-principal[b-q4fguvj5mm] {
        flex-direction: column;
        align-items: stretch;
        flex-grow: 1;
    }

    .barre-navigation .navbar-nav[b-q4fguvj5mm] {
        flex-direction: column;
    }

    .barre-navigation[b-q4fguvj5mm]  .nav-link {
        padding: 0.4rem 0.5rem;
    }

    .barre-navigation[b-q4fguvj5mm]  .lien-page {
        padding-left: 1.25rem;
    }

    /* E-mail + déconnexion poussés en bas de la barre, bouton sur toute la largeur */
    .bloc-deconnexion[b-q4fguvj5mm] {
        margin-top: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 0.5rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ei98ozlw3n],
.components-reconnect-repeated-attempt-visible[b-ei98ozlw3n],
.components-reconnect-failed-visible[b-ei98ozlw3n],
.components-pause-visible[b-ei98ozlw3n],
.components-resume-failed-visible[b-ei98ozlw3n],
.components-rejoining-animation[b-ei98ozlw3n] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-retrying[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-failed[b-ei98ozlw3n],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ei98ozlw3n] {
    display: block;
}


#components-reconnect-modal[b-ei98ozlw3n] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ei98ozlw3n 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ei98ozlw3n 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ei98ozlw3n 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ei98ozlw3n]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ei98ozlw3n 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ei98ozlw3n {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ei98ozlw3n {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ei98ozlw3n {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ei98ozlw3n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ei98ozlw3n] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ei98ozlw3n] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ei98ozlw3n] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ei98ozlw3n] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ei98ozlw3n] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ei98ozlw3n] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ei98ozlw3n 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ei98ozlw3n] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ei98ozlw3n {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Chantier/Intervention/FicheIntervention.razor.rz.scp.css */
/*
    Fiche intervention — partie Général (FicheIntervention.razor) — CSS isolé.
    Même présentation que la fiche client en consultation : blocs blancs, titre de la couleur du site, rubriques en grille.
*/

/* Blocs : l'un sous l'autre sur téléphone, 2 par ligne sur ordinateur */
.blocs-fiche[b-fiup3x3492] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 992px) {
    .blocs-fiche[b-fiup3x3492] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Bloc « À faire » (texte souvent long) : toute la largeur */
    .bloc-large[b-fiup3x3492] {
        grid-column: 1 / -1;
    }
}

.bloc-fiche[b-fiup3x3492] {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: white;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
}

/* Titre du bloc : couleur du site, filet en dessous */
.titre-bloc[b-fiup3x3492] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--site-primaire);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--site-primaire-rgb), 0.15);
}

/* Rubriques : 2 par ligne (ChampFiche ; « Large » = toute la largeur) */
.champs[b-fiup3x3492] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}
/* /Components/Pages/Chantier/Intervention/FournituresIntervention.razor.rz.scp.css */
/*
    Fournitures de l'intervention (FournituresIntervention.razor) — CSS isolé : liste des fournitures + fenêtre de saisie.
*/

.barre-fournitures[b-6jxqyxjnrm] {
    margin-bottom: 0.75rem;
}

.aucune-fourniture[b-6jxqyxjnrm] {
    margin: 0;
    font-style: italic;
    color: #6c757d;
}

/* ---- Liste : une carte par fourniture (corps, total, boutons) ---- */
.fournitures[b-6jxqyxjnrm] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    border-radius: 0.5rem;
    background-color: white;
    overflow: hidden;
}

.fourniture[b-6jxqyxjnrm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.fourniture + .fourniture[b-6jxqyxjnrm] {
    border-top: 1px solid rgba(var(--site-primaire-rgb), 0.08);
}

.corps-fourniture[b-6jxqyxjnrm] {
    flex: 1 1 auto;
    min-width: 0;   /* autorise la coupure des désignations longues */
}

.titre-fourniture[b-6jxqyxjnrm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    overflow-wrap: anywhere;
}

.code-fourniture[b-6jxqyxjnrm] {
    color: var(--site-primaire);
    font-weight: 700;
}

.chiffres-fourniture[b-6jxqyxjnrm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.pa-fourniture[b-6jxqyxjnrm] {
    font-style: italic;
}

.total-fourniture[b-6jxqyxjnrm] {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

.actions-fourniture[b-6jxqyxjnrm] {
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
}

/* Boutons carrés (zone tactile de 2,25 rem) : crayon orange (modification), poubelle rouge */
.bouton-action[b-6jxqyxjnrm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.4rem;
    background-color: white;
}

.bouton-modifier[b-6jxqyxjnrm] {
    border: 1px solid rgba(217, 119, 6, 0.4);
    color: #D97706;
}

.bouton-modifier:hover[b-6jxqyxjnrm],
.bouton-modifier:focus-visible[b-6jxqyxjnrm] {
    color: white;
    background-color: #D97706;
}

.bouton-supprimer-fourniture[b-6jxqyxjnrm] {
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #DC3545;
}

.bouton-supprimer-fourniture:hover[b-6jxqyxjnrm],
.bouton-supprimer-fourniture:focus-visible[b-6jxqyxjnrm] {
    color: white;
    background-color: #DC3545;
}

.total-general[b-6jxqyxjnrm] {
    margin: 0.5rem 0 0;
    text-align: right;
}

/* Téléphone : total et boutons passent sous le texte (la désignation garde toute la largeur) */
@media (max-width: 575.98px) {
    .fourniture[b-6jxqyxjnrm] {
        flex-wrap: wrap;
    }

    .corps-fourniture[b-6jxqyxjnrm] {
        flex-basis: 100%;
    }

    .total-fourniture[b-6jxqyxjnrm] {
        margin-right: auto;
    }
}

/* ---- Fenêtre de saisie (dialog natif) ---- */
.fenetre-fourniture[b-6jxqyxjnrm] {
    width: min(26rem, calc(100vw - 2rem));
    padding: 0;
    border: none;
    border-radius: 0.6rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.fenetre-fourniture[b-6jxqyxjnrm]::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
}

.fenetre-fourniture form[b-6jxqyxjnrm] {
    padding: 1rem;
    border-top: 0.3rem solid var(--mode-couleur, var(--site-primaire));
}

.titre-fenetre[b-6jxqyxjnrm] {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mode-couleur, var(--site-primaire));
}

/* Grille libellé | valeur, comme la capture de Mathis (libellés en italique sur fond bleu pâle) */
.grille-fourniture[b-6jxqyxjnrm] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.4rem 0.5rem;
    align-items: start;
}

.libelle[b-6jxqyxjnrm] {
    margin: 0;
    padding: 0.4rem 0.5rem;
    border-radius: 0.3rem;
    background-color: rgba(var(--site-primaire-rgb), 0.08);
    font-style: italic;
    font-size: 0.9rem;
}

.valeur[b-6jxqyxjnrm] {
    min-width: 0;
}

/* Rangée « Unité | Quantité » : unité étroite, quantité le reste */
.rangee-unite[b-6jxqyxjnrm] {
    display: grid;
    grid-template-columns: 4.5rem auto 1fr;
    gap: 0.4rem;
    align-items: start;
}

.rangee-unite .erreurs-rangee[b-6jxqyxjnrm] {
    grid-column: 1 / -1;
}

.libelle-quantite[b-6jxqyxjnrm] {
    white-space: nowrap;
}

.total-saisie[b-6jxqyxjnrm] {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Messages vides : aucune place prise */
.invalid-feedback:empty[b-6jxqyxjnrm] {
    display: none !important;
}

.boutons-fenetre[b-6jxqyxjnrm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
/* /Components/Pages/Chantier/Intervention/MenuIntervention.razor.rz.scp.css */
/*
    En-tête commun de la fiche intervention (MenuIntervention.razor) — CSS isolé.
*/

.entete-intervention[b-njc80q3oif] {
    margin-bottom: 1rem;
}

.retour-planning[b-njc80q3oif] {
    display: inline-block;
    margin-bottom: 0.25rem;
    color: var(--site-primaire);
    text-decoration: none;
}

.retour-planning:hover[b-njc80q3oif] {
    text-decoration: underline;
}

/* Menu des 6 parties : barre d'onglets soulignée. Téléphone : défile horizontalement (sans élargir la page) au lieu de
   passer sur plusieurs lignes ; la barre de défilement est masquée (on fait glisser au doigt). */
.menu-parties[b-njc80q3oif] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    border-bottom: 2px solid rgba(var(--site-primaire-rgb), 0.15);
    overflow-x: auto;
    scrollbar-width: none;
}

.menu-parties[b-njc80q3oif]::-webkit-scrollbar {
    display: none;
}

.partie[b-njc80q3oif] {
    flex: 0 0 auto;
    margin-bottom: -2px;                    /* le soulignement de l'onglet actif recouvre celui de la barre */
    padding: 0.45rem 0.85rem;
    border-bottom: 2px solid transparent;
    color: #495057;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.partie:hover[b-njc80q3oif] {
    color: var(--site-primaire);
    background-color: rgba(var(--site-primaire-rgb), 0.05);
}

/* Partie affichée : texte et soulignement de la couleur du site */
.partie.active[b-njc80q3oif] {
    border-bottom-color: var(--site-primaire);
    color: var(--site-primaire);
    font-weight: 600;
}
/* /Components/Pages/Chantier/PlanningTaches.razor.rz.scp.css */
/*
    Styles de la page /chantier/planning, « Mon planning » (fichier « isolé » : ne s'applique qu'à PlanningTaches.razor).
    Mobile d'abord : un bloc par jour, les tâches les unes sous les autres ; sur grand écran, les tâches d'un jour se
    rangent en colonnes.
*/

/* ---------------- Barre de période : ◀  [Du] [Au] [Afficher]  ▶ ---------------- */
.barre-periode[b-ksbdyux8o2] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Champs au milieu : prennent la place disponible, passent à la ligne sur un écran étroit */
.champs-periode[b-ksbdyux8o2] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
}

.champ-periode[b-ksbdyux8o2] {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Flèches : boutons carrés, faciles à toucher au doigt */
.fleche-periode[b-ksbdyux8o2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
}

/* Téléphone (< 576 px) : sur une seule ligne, les deux dates seraient trop étroites. Grille sur 2 rangées :
       [ Du ] [ Au ]
       ◀ [ Afficher ] ▶
   « display: contents » : les champs et le bouton, rangés dans .champs-periode, se placent directement dans la grille. */
@media (max-width: 575.98px) {
    .barre-periode[b-ksbdyux8o2] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "du   du      au      au"
            "prec bouton  bouton  suiv";
        align-items: center;
        gap: 0.5rem;
    }

    .champs-periode[b-ksbdyux8o2] {
        display: contents;
    }

    .champ-du[b-ksbdyux8o2] { grid-area: du; }
    .champ-au[b-ksbdyux8o2] { grid-area: au; }
    .bouton-afficher[b-ksbdyux8o2] { grid-area: bouton; height: 2.4rem; }
    .fleche-precedente[b-ksbdyux8o2] { grid-area: prec; }
    .fleche-suivante[b-ksbdyux8o2] { grid-area: suiv; }

    .champ-periode input[b-ksbdyux8o2] {
        min-width: 0;
    }
}

/* ---------------- Jours (demande de Mathis 2026-10-07) ----------------
   Chaque jour = un GROUPE « bandeau du jour + ses tâches » : le bandeau est un bloc à part entière, les tâches sont
   posées dessous, COLLÉES au bandeau et entre elles (simple filet de séparation) ; un ESPACE sépare deux jours. */
.jours-planning[b-ksbdyux8o2] {
    padding: 0;
    list-style: none;
}

/* Groupe d'un jour : aucun cadre (les tâches ne sont pas « dans » le jour) ; espace avant le jour suivant */
.jour-planning[b-ksbdyux8o2] {
    margin-bottom: 1rem;
}

/* Bandeau du jour : bloc plein de la couleur du site, coins arrondis en haut (les tâches le prolongent) */
.titre-jour[b-ksbdyux8o2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--site-primaire);
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

/* Aujourd'hui : bleu cobalt #0047AB, texte blanc (repris du bandeau normal), badge « Aujourd'hui » en blanc
   (couleurs choisies par Mathis). Samedi / dimanche : gris clair, avec un texte foncé pour rester lisible. */
.aujourdhui .titre-jour[b-ksbdyux8o2] {
    background-color: #0047AB;
}

.week-end .titre-jour[b-ksbdyux8o2] {
    background-color: #DEE2E6;
    color: #343A40;
}

.badge-aujourdhui[b-ksbdyux8o2] {
    background-color: white;
    color: #0047AB;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Jour sans tâche : une ligne discrète collée sous le bandeau, coins arrondis en bas */
.jour-vide[b-ksbdyux8o2] {
    margin: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: white;
    font-size: 0.85rem;
    font-style: italic;
    color: #6c757d;
}

/* ---------------- Tâches d'un jour : empilées, collées entre elles et au bandeau ---------------- */
.taches-jour[b-ksbdyux8o2] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une tâche : fond pâle et bande à gauche de la couleur de son TYPE (variables posées par la classe type-*) ;
   filet blanc entre deux tâches collées ; la dernière tâche du jour ferme le groupe (coins arrondis en bas) */
.tache[b-ksbdyux8o2] {
    padding: 0.45rem 0.75rem 0.45rem 0.6rem;
    border-left: 0.35rem solid var(--tache-bande);
    background-color: var(--tache-fond);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.tache + .tache[b-ksbdyux8o2] {
    border-top: 1px solid white;
}

.tache:last-child[b-ksbdyux8o2] {
    border-radius: 0 0 0.5rem 0.5rem;
}

/* En-tête de la tâche : horaire à gauche, type à droite */
.tache-tete[b-ksbdyux8o2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}

/* Tranches horaires du jour (« 06:00 – 10:00 », « 12:00 – 16:00 ») : côte à côte, passent à la ligne si la place manque */
.tache-horaire[b-ksbdyux8o2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-weight: 600;
}

.tache-tranche[b-ksbdyux8o2] {
    white-space: nowrap;   /* une tranche n'est jamais coupée en deux */
}

.tache-type[b-ksbdyux8o2] {
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--tache-texte);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tache-sujet[b-ksbdyux8o2] {
    margin-top: 0.15rem;
    font-weight: 600;
}

.tache-etendue[b-ksbdyux8o2],
.tache-intervention[b-ksbdyux8o2] {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #495057;
    justify-content: space-between;
}

/* Intervention : n° puis boutons « Fiche intervention » / « Modèle d'intervention » (passent dessous si la place manque) */
.tache-intervention[b-ksbdyux8o2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.boutons-intervention[b-ksbdyux8o2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bouton-intervention[b-ksbdyux8o2] {
    border: 1px solid var(--tache-bande);
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--tache-texte);
    font-size: 0.75rem;
    font-weight: 600;
}

.bouton-intervention:hover[b-ksbdyux8o2],
.bouton-intervention:focus-visible[b-ksbdyux8o2] {
    background-color: white;
    color: var(--tache-texte);
}

/* Description : texte sur plusieurs lignes dans la base, retours à la ligne conservés */
.tache-description[b-ksbdyux8o2] {
    margin-top: 0.2rem;
    white-space: pre-line;
    color: #343a40;
}

/* ---------------- Couleurs des types de tâche (logiciel : SELON ORIGINE_TYPE) ----------------
   --tache-fond : fond de la carte (pâle) ; --tache-bande : bande de gauche ; --tache-texte : texte de l'étiquette du type */
.type-libre[b-ksbdyux8o2] {           /* autre cas : rose pastel */
    --tache-fond: #FCE4EF;
    --tache-bande: #E68AB0;
    --tache-texte: #A3245A;
}

.type-absence[b-ksbdyux8o2] {         /* 2 : rouge clair */
    --tache-fond: #FDE2E2;
    --tache-bande: #E05656;
    --tache-texte: #A61B1B;
}

.type-chantier[b-ksbdyux8o2] {        /* 3 : jaune pastel */
    --tache-fond: #FFF6CC;
    --tache-bande: #E6B800;
    --tache-texte: #7A6100;
}

.type-production[b-ksbdyux8o2] {      /* 4 : bleu pastel */
    --tache-fond: #DDEBFA;
    --tache-bande: #5B9BD5;
    --tache-texte: #1F5A96;
}

.type-intervention[b-ksbdyux8o2] {    /* 5 : gris foncé */
    --tache-fond: #E9ECEF;
    --tache-bande: #495057;
    --tache-texte: #343A40;
}

.type-visite[b-ksbdyux8o2] {          /* 6 : vert pastel */
    --tache-fond: #DFF5E3;
    --tache-bande: #4CAF6A;
    --tache-texte: #1E6B37;
}

.type-document[b-ksbdyux8o2] {        /* 7 : violet pastel */
    --tache-fond: #EEE5FA;
    --tache-bande: #9B72CF;
    --tache-texte: #5B3496;
}
/* /Components/Pages/CRM/AccueilCRM.razor.rz.scp.css */
/*
    Styles de la page d'accueil du module CRM (AccueilCRM.razor) — CSS isolé : ne s'applique qu'à cette page.
    Grille de tuiles responsive (mobile-first : les règles de base visent le téléphone,
    la règle @media les adapte aux écrans plus larges).
*/

/* ---------------------------------------------------------------------------------
   Grille
   --------------------------------------------------------------------------------- */

/* Téléphone : 2 colonnes égales qui se partagent toute la largeur de l'écran */
.tuiles[b-mpo0u5uij6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax(0, ...) : une tuile ne peut pas élargir sa colonne */
    gap: 1rem;
}

/* Tablette / ordinateur (≥ 768 px, même seuil que la barre de navigation verticale) :
   tuiles de largeur fixe (11 rem), alignées à gauche ; « auto-fill » en met autant par ligne que la place le permet
   et passe à la ligne suivante automatiquement (aucun réglage à faire en ajoutant un module) */
@media (min-width: 768px) {
    .tuiles[b-mpo0u5uij6] {
        grid-template-columns: repeat(auto-fill, 11rem);
        gap: 1.5rem;
    }
}

/* ---------------------------------------------------------------------------------
   Tuile (lien : image + nom du module)
   --------------------------------------------------------------------------------- */

.tuile[b-mpo0u5uij6] {
    display: flex;
    flex-direction: column;     /* image au-dessus, nom en dessous */
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: white;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
    color: var(--site-primaire);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Survol à la souris, ou focus au clavier (touche Tab) : la tuile se soulève légèrement */
.tuile:hover[b-mpo0u5uij6],
.tuile:focus-visible[b-mpo0u5uij6] {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1rem rgba(var(--site-primaire-rgb), 0.25);
    color: var(--site-primaire);
}

/* Contour bien visible pour la navigation au clavier (accessibilité) */
.tuile:focus-visible[b-mpo0u5uij6] {
    outline: 0.2rem solid rgba(var(--site-primaire-rgb), 0.5);
    outline-offset: 0.15rem;
}

/* Image : occupe la largeur de la tuile (8 rem au plus), reste carrée et n'est jamais déformée
   (object-fit: contain : une image non carrée est réduite pour tenir entièrement dans le carré) */
.tuile img[b-mpo0u5uij6] {
    width: 100%;
    max-width: 8rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Nom du module, centré ; un nom long passe à la ligne au lieu de déborder */
.tuile-libelle[b-mpo0u5uij6] {
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

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

    .tuile:hover[b-mpo0u5uij6],
    .tuile:focus-visible[b-mpo0u5uij6] {
        transform: none;
    }
}
/* /Components/Pages/CRM/Clients/FicheClient.razor.rz.scp.css */
/*
    Styles de la fiche client (FicheClient.razor) — CSS isolé : ne s'applique qu'à cette page.
    Mobile-first : 1 colonne de blocs sur téléphone, 2 colonnes à partir de 992 px.
    (Le style d'une rubrique — libellé + valeur — est dans Components/Controles/ChampFiche.razor.css.)
*/

/* Violet « prospect », le même que sur les vignettes de la liste */
.entete-fiche[b-yipirdrkd2] {
    --couleur-prospect: #7B2CBF;
}

/* Lien de retour à la liste */
.lien-retour[b-yipirdrkd2] {
    color: var(--site-primaire);
    text-decoration: none;
}

.lien-retour:hover[b-yipirdrkd2] {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------------
   En-tête : code client + badge prospect, puis nom
   --------------------------------------------------------------------------------- */

.code-fiche[b-yipirdrkd2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--site-primaire);
}

.entete-fiche h1[b-yipirdrkd2] {
    overflow-wrap: anywhere;   /* nom très long sans espace : passe à la ligne */
}

/* Badge « Prospect » : bonhomme + texte, en violet sur fond violet très clair */
.badge-prospect[b-yipirdrkd2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--couleur-prospect);
    background-color: rgba(123, 44, 191, 0.1);
}

.badge-prospect svg[b-yipirdrkd2] {
    fill: currentColor;
}

/* ---------------------------------------------------------------------------------
   Blocs (Coordonnées, Commercial...)
   --------------------------------------------------------------------------------- */

/* Téléphone : blocs les uns sous les autres */
.blocs-fiche[b-yipirdrkd2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Ordinateur (≥ 992 px) : 2 blocs par ligne */
@media (min-width: 992px) {
    .blocs-fiche[b-yipirdrkd2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bloc-fiche[b-yipirdrkd2] {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: white;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
}

/* Titre du bloc : couleur du site, filet en dessous */
.titre-bloc[b-yipirdrkd2] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--site-primaire);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--site-primaire-rgb), 0.15);
}

/* Rubriques du bloc : 2 colonnes (même sur téléphone : libellés courts) ;
   une rubrique « Large » (adresse) prend toute la largeur (règle dans ChampFiche.razor.css) */
.champs[b-yipirdrkd2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

/* ---------------------------------------------------------------------------------
   Modes MODIFICATION (orange) et CRÉATION (vert) : couleurs, bandeau, champs sélectionnés, barre des boutons et
   bouton Enregistrer sont GLOBAUX (site.css, section « Modes de saisie » : classes mode-modification / mode-creation).
   Ici, seulement ce qui est propre à la fiche : le liseré des blocs, aux couleurs du mode (variables --mode-*).
   --------------------------------------------------------------------------------- */

/* Blocs : liseré de la couleur du mode au lieu du liseré bleu discret de la consultation */
.fiche-saisie .bloc-fiche[b-yipirdrkd2] {
    border: 1px solid var(--mode-couleur);
    box-shadow: 0 0 0 0.15rem rgba(var(--mode-couleur-rgb), 0.12);
}

.fiche-saisie .titre-bloc[b-yipirdrkd2] {
    color: var(--mode-fonce);
    border-bottom-color: rgba(var(--mode-couleur-rgb), 0.3);
}

/* Case « Prospect » : alignée en bas de sa cellule, à hauteur des champs voisins */
.champ-case[b-yipirdrkd2] {
    align-self: end;
    margin-bottom: 0.35rem;
}
/* /Components/Pages/CRM/Clients/TableClients.razor.rz.scp.css */
/*
    Styles de la liste des clients (TableClients.razor) — CSS isolé : ne s'applique qu'à cette page.
    La grille, les vignettes et la poubelle sont des styles GLOBAUX, communs à toutes les listes en vignettes
    (site.css, section « Listes en VIGNETTES »). Ici, seulement ce qui est propre aux clients.
*/

/* Icône prospect : bonhomme violet (le SVG prend la couleur du texte grâce à fill: currentColor) */
.icone-prospect[b-jonep5vq8m] {
    flex-shrink: 0;
    color: #7B2CBF;   /* violet « prospect », le même que le badge de la fiche client */
    line-height: 1;
}

.icone-prospect svg[b-jonep5vq8m] {
    fill: currentColor;
}
/* /Components/Pages/CRM/Devis/FicheDevis.razor.rz.scp.css */
/*
    Styles de la fiche devis (FicheDevis.razor) — CSS isolé : ne s'applique qu'à cette page.
    Mobile-first : les règles de base visent le téléphone, les @media élargissent la disposition.
    (Texte RTF des désignations : classes communes .rtf / .rtf-* de site.css.)
*/

/* Lien de retour à la liste */
.lien-retour[b-8drxdrlwvm] {
    color: var(--site-primaire);
    text-decoration: none;
}

.lien-retour:hover[b-8drxdrlwvm] {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------------
   Bandeau : n° et date à gauche, client à droite (passe dessous sur un écran étroit)
   --------------------------------------------------------------------------------- */
.bandeau-devis[b-8drxdrlwvm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--site-primaire);
    color: white;
}

.bandeau-devis .text-muted[b-8drxdrlwvm] {
    color: rgba(255, 255, 255, 0.75) !important;   /* date lisible sur le fond bleu */
}

/* Client : pastille cliquable vers la fiche du client */
.bandeau-client[b-8drxdrlwvm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.35rem 0.75rem;
    border-radius: 0.4rem;
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
    text-decoration: none;
}

.bandeau-client:hover[b-8drxdrlwvm] {
    background-color: rgba(255, 255, 255, 0.22);
    color: white;
}

.bandeau-libelle[b-8drxdrlwvm] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.bandeau-code[b-8drxdrlwvm] {
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------
   Parties (En-tête, Corps, Pied) et blocs
   --------------------------------------------------------------------------------- */
.partie-devis[b-8drxdrlwvm] {
    margin-bottom: 1.5rem;
}

/* Titre de partie : majuscules, couleur du site, filet en dessous */
.titre-partie[b-8drxdrlwvm] {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--site-primaire);
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid rgba(var(--site-primaire-rgb), 0.2);
}

.bloc-devis[b-8drxdrlwvm] {
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: white;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
    overflow-wrap: anywhere;
}

.titre-bloc[b-8drxdrlwvm] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

/* En-tête : 2 blocs à onglets (Adresses ; Correspondant / Informations), l'un sous l'autre jusqu'à 992 px, côte à côte au-delà */
.blocs-entete[b-8drxdrlwvm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .blocs-entete[b-8drxdrlwvm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------
   Onglets des blocs de l'en-tête (onglets Bootstrap .nav-tabs, aux couleurs du site)
   --------------------------------------------------------------------------------- */
.bloc-onglets[b-8drxdrlwvm] {
    padding-top: 0.5rem;
}

.onglets-devis[b-8drxdrlwvm] {
    margin-bottom: 0.75rem;
    border-bottom-color: rgba(var(--site-primaire-rgb), 0.2);
}

.onglets-devis .nav-link[b-8drxdrlwvm] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

.onglets-devis .nav-link:hover[b-8drxdrlwvm] {
    color: var(--site-primaire);
}

.onglets-devis .nav-link.active[b-8drxdrlwvm] {
    color: var(--site-primaire);
    border-color: rgba(var(--site-primaire-rgb), 0.2) rgba(var(--site-primaire-rgb), 0.2) white;
}

/* En modification : onglet actif à la couleur du mode (orange) */
.fiche-saisie .onglets-devis .nav-link.active[b-8drxdrlwvm],
.fiche-saisie .onglets-devis .nav-link:hover[b-8drxdrlwvm] {
    color: var(--mode-fonce);
}

/* Point rouge : l'onglet contient au moins un champ à corriger */
.point-erreur[b-8drxdrlwvm] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.25rem;
    border-radius: 50%;
    background-color: #DC3545;
    vertical-align: middle;
}

/* Rubriques (ChampFiche) d'un bloc : 2 colonnes ; « Large » = toute la largeur (règle dans ChampFiche.razor.css) */
.champs-devis[b-8drxdrlwvm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}

/* Date de validité dépassée : en rouge */
.validite-depassee[b-8drxdrlwvm] {
    color: #DC3545;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------
   Corps : tableau des lignes
   --------------------------------------------------------------------------------- */
.tableau-lignes-cadre[b-8drxdrlwvm] {
    /* Repère des éléments en position absolue du tableau (ex. texte caché « Actions » de Bootstrap, .visually-hidden) :
       sans lui, ils sont placés par rapport à la PAGE, échappent au défilement du cadre et élargissent toute la page
       (barre de défilement horizontale en modification, constatée le 2026-10-02) */
    position: relative;
    border-radius: 0.5rem;
    background-color: white;
    border: 1px solid rgba(var(--site-primaire-rgb), 0.15);
    overflow-x: auto;   /* écran moyen : défilement horizontal du tableau seul, si besoin */
}

.tableau-lignes thead th[b-8drxdrlwvm] {
    background-color: rgba(var(--site-primaire-rgb), 0.06);
    color: var(--site-primaire);
    font-size: 0.8rem;
    white-space: nowrap;
}

.tableau-lignes td[b-8drxdrlwvm] {
    font-size: 0.875rem;
}

/* Désignation : prend la place disponible, texte mis en forme du RTF */
.cellule-designation[b-8drxdrlwvm] {
    min-width: 14rem;
}

/* Prix d'achat : information interne, en gris */
.colonne-achat[b-8drxdrlwvm] {
    color: #6c757d;
}

/* Téléphone (< 768 px) : chaque ligne du tableau devient une CARTE (consultation ET modification) ; l'en-tête du tableau
   est masqué, chaque cellule affiche son libellé (attribut data-libelle) au-dessus de sa valeur.
   Disposition demandée par Mathis (2026-10-06), sur une GRILLE de 4 colonnes : 2 colonnes ÉTROITES (3,25 rem, pour les
   remises : jamais plus de « 100 ») puis 2 colonnes qui se partagent le reste ; chaque rubrique a sa ZONE nommée,
   repérée par son data-libelle :
       N° (+ poignée)      | Article
       Désignation (toute la largeur)
       Quantité            | Unité  | PU HT
       Rem. 1   | Rem. 2   | Net HT | Total HT
       TVA (à gauche)      | Actions (modification : insérer / supprimer, à droite)
   Une rubrique masquée (remise nulle en consultation) laisse sa zone vide sans décaler les autres ; une rangée
   entièrement vide ne prend pas de place (aucun espacement vertical entre rangées : marges dans les cellules). */
@media (max-width: 767.98px) {
    .tableau-lignes-cadre[b-8drxdrlwvm] {
        border: none;
        background-color: transparent;
    }

    .tableau-lignes thead[b-8drxdrlwvm] {
        display: none;
    }

    .tableau-lignes[b-8drxdrlwvm],
    .tableau-lignes tbody[b-8drxdrlwvm] {
        display: block;
        width: 100%;
    }

    .tableau-lignes tr[b-8drxdrlwvm] {
        display: grid;
        grid-template-columns: 3.25rem 3.25rem minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "num num art art"
            "des des des des"
            "qte qte uni pu"
            "r1  r2  net tot"
            "tva tva act act";
        column-gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        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);
    }

    /* Cellule : libellé au-dessus, valeur en dessous ; nombres CENTRÉS (règle par défaut, demande de Mathis 2026-10-06 :
       comme les champs numériques de la saisie) */
    .tableau-lignes td[b-8drxdrlwvm] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
        min-width: 0;
        padding: 0.25rem 0;
        border: none;
        text-align: center !important;
    }

    /* Libellé de la cellule, en haut à gauche */
    .tableau-lignes td[b-8drxdrlwvm]::before {
        content: attr(data-libelle);
        align-self: flex-start;
        font-size: 0.75rem;
        color: #6c757d;
    }

    /* Textes (n° de ligne, article, désignation, unité, TVA) : alignés à gauche */
    .tableau-lignes td[data-libelle="N°"][b-8drxdrlwvm],
    .tableau-lignes td[data-libelle="Article"][b-8drxdrlwvm],
    .tableau-lignes td[data-libelle="Désignation"][b-8drxdrlwvm],
    .tableau-lignes td[data-libelle="Unité"][b-8drxdrlwvm],
    .tableau-lignes td[data-libelle="TVA"][b-8drxdrlwvm] {
        align-items: flex-start;
        text-align: left !important;
    }

    /* Zones de la grille (« Rem. 1 » en consultation, « Rem. 1 % » en modification : début du libellé) */
    .tableau-lignes td[data-libelle="N°"][b-8drxdrlwvm] { grid-area: num; }
    .tableau-lignes td[data-libelle="Article"][b-8drxdrlwvm] { grid-area: art; }
    .tableau-lignes td[data-libelle="Désignation"][b-8drxdrlwvm] { grid-area: des; }
    .tableau-lignes td[data-libelle="Quantité"][b-8drxdrlwvm] { grid-area: qte; }
    .tableau-lignes td[data-libelle="Unité"][b-8drxdrlwvm] { grid-area: uni; }
    .tableau-lignes td[data-libelle="PU HT"][b-8drxdrlwvm] { grid-area: pu; }
    .tableau-lignes td[data-libelle^="Rem. 1"][b-8drxdrlwvm] { grid-area: r1; }
    .tableau-lignes td[data-libelle^="Rem. 2"][b-8drxdrlwvm] { grid-area: r2; }

    /* Libellés des remises (colonnes étroites) : sur une seule ligne, un peu plus petits (« Rem. 1 % » passait sinon sur
       2 lignes et décalait la rangée) */
    .tableau-lignes td[data-libelle^="Rem."][b-8drxdrlwvm]::before {
        white-space: nowrap;
        font-size: 0.7rem;
    }
    .tableau-lignes td[data-libelle="Net HT"][b-8drxdrlwvm] { grid-area: net; }
    .tableau-lignes td[data-libelle="Total HT"][b-8drxdrlwvm] { grid-area: tot; }
    .tableau-lignes td[data-libelle="TVA"][b-8drxdrlwvm] { grid-area: tva; }
    .tableau-lignes td.actions-ligne[b-8drxdrlwvm] { grid-area: act; }

    /* Cellules vides (remise nulle...) : masquées pour alléger la carte */
    .tableau-lignes td:empty[b-8drxdrlwvm] {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------
   MODIFICATION (formulaire .fiche-saisie.mode-modification ; couleurs du mode : variables --mode-* de site.css)
   --------------------------------------------------------------------------------- */

/* Blocs : liseré de la couleur du mode */
.fiche-saisie .bloc-devis[b-8drxdrlwvm],
.fiche-saisie .tableau-lignes-cadre[b-8drxdrlwvm] {
    border-color: var(--mode-couleur);
    box-shadow: 0 0 0 0.15rem rgba(var(--mode-couleur-rgb), 0.12);
}

.fiche-saisie .titre-partie[b-8drxdrlwvm] {
    color: var(--mode-fonce);
    border-bottom-color: rgba(var(--mode-couleur-rgb), 0.3);
}

/* Tableau des lignes en saisie : champs compacts, largeurs adaptées au contenu */
.tableau-saisie td[b-8drxdrlwvm] {
    vertical-align: top;
}

.champ-article[b-8drxdrlwvm] { min-width: 7rem; }
.champ-nombre[b-8drxdrlwvm] { min-width: 5rem; }
.champ-pourcent[b-8drxdrlwvm] { min-width: 4rem; }
.champ-unite[b-8drxdrlwvm] { min-width: 3.5rem; }
.champ-tva[b-8drxdrlwvm] { min-width: 7rem; }

/* Montants calculés (PU net, total) : non modifiables, sur fond gris clair */
.montant-calcule[b-8drxdrlwvm] {
    color: #495057;
    background-color: #F8F9FA;
}

/* Liste verrouillée (type de TVA imposé par le devis) : visible mais non modifiable */
.verrouille[b-8drxdrlwvm] {
    pointer-events: none;
    background-color: #E9ECEF;
    color: #6c757d;
}

/* ---- Déplacement des lignes (glisser-déposer, devis.js) ----
   Poignée à côté du numéro. touch-action: none : au doigt, glisser sur la poignée déplace la ligne au lieu de faire
   défiler la page (le reste de la carte fait toujours défiler normalement). */
.numero-ligne[b-8drxdrlwvm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.poignee-ligne[b-8drxdrlwvm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background-color: transparent;
    color: #6c757d;
    cursor: grab;
    touch-action: none;
}

.poignee-ligne:hover[b-8drxdrlwvm],
.poignee-ligne:focus-visible[b-8drxdrlwvm] {
    border-color: rgba(var(--mode-couleur-rgb), 0.45);
    color: var(--mode-couleur);
}

/* Pendant le déplacement : texte non sélectionnable, curseur « main fermée » partout dans le tableau */
.tableau-saisie.deplacement-en-cours[b-8drxdrlwvm],
.tableau-saisie.deplacement-en-cours .poignee-ligne[b-8drxdrlwvm] {
    user-select: none;
    cursor: grabbing;
}

/* Ligne en cours de déplacement : fond teinté et cadre de la couleur du mode */
.tableau-saisie tr.ligne-deplacee > td[b-8drxdrlwvm] {
    background-color: rgba(var(--mode-couleur-rgb), 0.1);
}

.tableau-saisie tr.ligne-deplacee[b-8drxdrlwvm] {
    outline: 2px solid var(--mode-couleur);
    outline-offset: -2px;
}

/* Désignation en saisie : éditeur de texte (composant EditeurTexte, styles dans EditeurTexte.razor.css). Ici, seulement
   sa largeur minimale dans le tableau des lignes. ::deep : la zone de saisie appartient au composant. */
.cellule-designation[b-8drxdrlwvm]  .zone-editeur {
    min-width: 16rem;
}

/* Boutons de ligne : insérer en dessous (+ vert) et supprimer (poubelle rouge, style global .bouton-supprimer) */
.actions-ligne[b-8drxdrlwvm] {
    white-space: nowrap;
}

.bouton-ligne-ajout[b-8drxdrlwvm] {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid rgba(var(--creation-couleur-rgb), 0.45);
    border-radius: 0.375rem;
    background-color: var(--creation-pale);
    color: var(--creation-fonce);
    font-weight: 700;
    line-height: 1;
}

.bouton-ligne-ajout:hover[b-8drxdrlwvm] {
    background-color: var(--creation-couleur);
    color: white;
}

/* Pied en saisie : petits champs dans la colonne des libellés (%) ou des montants */
.totaux-saisie dt[b-8drxdrlwvm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.champ-pourcent-pied[b-8drxdrlwvm] {
    width: 4.5rem;
    display: inline-block;
}

.champ-montant-pied[b-8drxdrlwvm] {
    width: 8rem;
    margin-left: auto;
}

.champ-tva-pied[b-8drxdrlwvm] {
    width: auto;
    max-width: 10rem;
}

/* Téléphone : cartes des lignes en saisie (grille décrite plus haut) ; chaque champ occupe toute la largeur de sa case,
   sans largeur minimale (3 champs par rangée pour quantité / unité / PU et net / total / TVA) */
@media (max-width: 767.98px) {
    .tableau-saisie td > input[b-8drxdrlwvm],
    .tableau-saisie td > select[b-8drxdrlwvm],
    .tableau-saisie td > .input-group[b-8drxdrlwvm] {
        width: 100%;
        min-width: 0;
    }

    /* Code article dans son groupe (champ + loupe) : le champ prend la place laissée par le bouton */
    .tableau-saisie td > .input-group > input[b-8drxdrlwvm] {
        min-width: 0;
    }

    .tableau-saisie td.cellule-designation[b-8drxdrlwvm]  .zone-editeur {
        min-width: 0;
    }

    /* Déplacement d'une carte : teinte sur toute la carte (sur les cellules, elle laisserait des bandes blanches entre
       les colonnes de la grille) ; poignée plus grande, pour le doigt */
    .tableau-saisie tr.ligne-deplacee[b-8drxdrlwvm] {
        background-color: rgba(var(--mode-couleur-rgb), 0.1);
    }

    .tableau-saisie tr.ligne-deplacee > td[b-8drxdrlwvm] {
        background-color: transparent;
    }

    .poignee-ligne[b-8drxdrlwvm] {
        width: 2.2rem;
        height: 2.2rem;
    }

    /* Boutons insérer / supprimer : sur une rangée, à droite, sans libellé ; alignés en BAS de la rangée, à la hauteur
       de la liste de TVA (qui a son libellé au-dessus) */
    .tableau-saisie td.actions-ligne[b-8drxdrlwvm] {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-self: end;
        gap: 0.5rem;
    }

    .tableau-saisie td.actions-ligne[b-8drxdrlwvm]::before {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------
   Pied : TVA + totaux (côte à côte à partir de 992 px, totaux à droite).
   Écran moyen (992 à 1400 px) : parts ÉGALES, sinon le bloc des totaux est trop étroit pour ses montants ;
   grand écran : la TVA (5 colonnes) prend un peu plus de place.
   --------------------------------------------------------------------------------- */
.blocs-pied[b-8drxdrlwvm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .blocs-pied[b-8drxdrlwvm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .blocs-pied[b-8drxdrlwvm] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.tableau-tva th[b-8drxdrlwvm] {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}

.tableau-tva td[b-8drxdrlwvm] {
    font-size: 0.875rem;
}

/* Totaux : libellé à gauche, montant à droite, une ligne par total.
   minmax(0, 1fr) : la colonne des libellés peut rétrécir (et passer à la ligne) ; seul le montant reste sur une ligne :
   le bloc ne déborde plus de son cadre sur un écran moyen */
.totaux[b-8drxdrlwvm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 1rem;
    margin: 0;
}

.totaux dt[b-8drxdrlwvm] {
    font-weight: 400;
    color: #495057;
}

.totaux dd[b-8drxdrlwvm] {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* Totaux importants (HT, TTC) : en gras, filet au-dessus */
.totaux .total-important[b-8drxdrlwvm] {
    font-weight: 700;
    color: var(--site-primaire);
    padding-top: 0.3rem;
    border-top: 1px solid rgba(var(--site-primaire-rgb), 0.15);
}

/* Reste à payer : le plus visible (le montant sur une seule ligne, voir .totaux dd ; le libellé peut passer à la ligne) */
.totaux .reste-a-payer[b-8drxdrlwvm] {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    background-color: var(--site-primaire);
    padding: 0.4rem 0.6rem;
    margin-top: 0.3rem;
}

.totaux dt.reste-a-payer[b-8drxdrlwvm] {
    border-radius: 0.4rem 0 0 0.4rem;
}

.totaux dd.reste-a-payer[b-8drxdrlwvm] {
    border-radius: 0 0.4rem 0.4rem 0;
}
/* /Components/Pages/CRM/Devis/TableDevis.razor.rz.scp.css */
/*
    Styles de la liste des devis (TableDevis.razor) — CSS isolé : ne s'applique qu'à cette page.
    La grille, les vignettes et la poubelle sont des styles GLOBAUX (site.css, « Listes en VIGNETTES »).
    Ici, seulement ce qui est propre aux devis : date de validité et total HT.
*/

/* Date de validité : petite, grise ; en ROUGE et en gras si elle est dépassée (devis expiré) */
.validite[b-zcbokduomx] {
    font-size: 0.8rem;
    color: #6c757d;
}

.validite-depassee[b-zcbokduomx] {
    color: #DC3545;
    font-weight: 600;
}

/* Badge « Transféré » : petit, gris, à côté du numéro du devis */
.badge-transfere[b-zcbokduomx] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #495057;
    background-color: #E9ECEF;
    vertical-align: middle;
}

/* Total HT : en gras, couleur du site, jamais coupé sur deux lignes */
.total-ht[b-zcbokduomx] {
    font-weight: 700;
    color: var(--site-primaire);
    white-space: nowrap;
}

.total-ht small[b-zcbokduomx] {
    font-weight: 400;
    color: #6c757d;
}
/* /Components/Pages/Parametrage/Connexion.razor.rz.scp.css */
/* CSS for Connexion component */

#accesConsole[b-iswnbrf7e3] {
    background-color: transparent;
}
/* /Components/Pages/Parametrage/Console/ConnexionConsole.razor.rz.scp.css */
/*
    Styles propres à la page ConnexionConsole.
    Fichier « isolé » : ces règles ne s'appliquent qu'à ConnexionConsole.razor, jamais au reste du site.

    La mise en page (fond, carte, champs) est désormais commune à toutes les pages de la console :
    elle se trouve dans wwwroot/console.css (classes console-fond, console-carte, champ).
    Ajouter ici uniquement ce qui est spécifique à cette page.
*/