/* Feuille de style commune de la plateforme SMQ SMARTEL (ERG-03).
   Charte : docs/ergonomie/01-audit-et-charte.md. Le rouge SMARTEL est réservé à l'action principale, à la rubrique
   active et aux alertes ; une couleur n'est jamais seule à porter une information (le texte est toujours écrit). */

/* ===================================================================== Jetons de la charte */
:root {
  --fond: #f4f3f2;
  --surface: #ffffff;
  --surface-alt: #faf8f8;        /* lignes alternées des tableaux */
  --texte: #1f1b1b;
  --texte-doux: #5c5555;
  --ligne: #e2dcdb;
  --ligne-forte: #cbc3c2;
  --accent: #b3261e;             /* rouge SMARTEL */
  --accent-fonce: #8f1e18;
  --accent-doux: #f7e3e1;
  --ok: #2e6b3f;
  --ok-doux: #e5f1e8;
  --alerte: #8a5a00;
  --alerte-doux: #fbf0d9;
  --danger: #a1161b;
  --danger-doux: #f9e0df;
  --info: #1f5a85;
  --info-doux: #e3eef6;
  --menu-fond: #2a2423;          /* barre latérale */
  --menu-texte: #e4dedd;
  --menu-doux: #a99f9e;
  --rayon: 6px;
  --rayon-grand: 10px;
  --ombre: 0 1px 2px rgba(31, 27, 27, .06);
  --ombre-haute: 0 8px 28px rgba(31, 27, 27, .18);
  --focus: 0 0 0 3px rgba(179, 38, 30, .28);
  --police: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --largeur-menu: 15.5rem;
  --largeur-menu-reduit: 4rem;
  --hauteur-entete: 3.5rem;
}

/* ===================================================================== Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* l'attribut hidden l'emporte toujours sur les règles d'affichage */
html { scroll-padding-top: calc(var(--hauteur-entete) + 1rem); }
html:has(.sommaire-page) { scroll-padding-top: calc(var(--hauteur-entete) + 3.75rem); }  /* sous le sommaire fixe */
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 1rem; line-height: 1.5; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 650; margin: 0; }
h2 { font-size: 1.15rem; line-height: 1.3; font-weight: 650; margin: 0; }
h3 { font-size: 1rem; margin: .4rem 0 0; }
p { margin: .4rem 0; }
small { font-size: .85rem; }
.texte-doux { color: var(--texte-doux); }
.petit { font-size: .9rem; }
.erreur { color: var(--danger); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-petite { width: 1rem; height: 1rem; }
.aller-au-contenu { position: absolute; left: .5rem; top: -3rem; z-index: 100; background: var(--surface); padding: .5rem .8rem; border-radius: var(--rayon); box-shadow: var(--ombre-haute); }
.aller-au-contenu:focus { top: .5rem; }
details summary { cursor: pointer; color: var(--texte-doux); }

/* ===================================================================== Cadre : barre latérale */
.barre-laterale { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--largeur-menu); display: flex; flex-direction: column;
  background: var(--menu-fond); color: var(--menu-texte); transition: width .15s ease, transform .2s ease; }
.barre-marque { display: flex; align-items: center; justify-content: space-between; height: var(--hauteur-entete); padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.marque { font-weight: 800; letter-spacing: .04em; color: var(--accent); text-decoration: none; font-size: 1.1rem; white-space: nowrap; }
.barre-laterale .marque { color: #ff6a5f; }
.marque span { color: var(--texte); font-weight: 600; letter-spacing: 0; }
.barre-laterale .marque span { color: var(--menu-texte); }
.nav-principale { flex: 1; overflow-y: auto; padding: .25rem .5rem .75rem; scrollbar-width: thin; scrollbar-color: #5a5150 transparent; }
.nav-groupe { display: grid; gap: .05rem; margin-top: .45rem; }
.nav-titre { margin: 0 0 .1rem; padding: 0 .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--menu-doux); white-space: nowrap; }
.nav-principale a { display: flex; align-items: center; gap: .7rem; min-height: 2.1rem; padding: .25rem .7rem; border-radius: var(--rayon);
  color: var(--menu-texte); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; border-left: 3px solid transparent; }
.nav-principale a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-principale a[aria-current] { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 650; border-left-color: #ff6a5f; }
.nav-principale a[aria-current] .icone { color: #ff8a80; }
.barre-marque .bouton-icone { color: var(--menu-doux); }
.barre-marque .bouton-icone:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.barre-laterale .fermer-menu { display: none; }
.voile-menu { position: fixed; inset: 0; z-index: 35; background: rgba(20, 16, 16, .45); }

/* Menu réduit aux icônes (choix mémorisé) : les libellés restent en info-bulle et pour les lecteurs d'écran. */
html.menu-reduit .barre-laterale { width: var(--largeur-menu-reduit); }
html.menu-reduit .nav-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.menu-reduit .barre-marque .marque { display: none; }
html.menu-reduit .nav-titre { height: 1px; margin: .5rem .7rem; padding: 0; overflow: hidden; color: transparent; background: rgba(255, 255, 255, .12); }
html.menu-reduit .nav-principale a { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
html.menu-reduit .replier-menu .icone { transform: rotate(180deg); }
html.menu-reduit .barre-marque { padding: 0 .5rem; justify-content: center; }

/* ===================================================================== Cadre : zone principale et en-tête */
.zone-principale { min-height: 100vh; display: flex; flex-direction: column; }
body.avec-menu .zone-principale { margin-left: var(--largeur-menu); transition: margin-left .15s ease; }
html.menu-reduit body.avec-menu .zone-principale { margin-left: var(--largeur-menu-reduit); }
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; min-height: var(--hauteur-entete);
  padding: .4rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--ligne); }
.entete .ouvrir-menu { display: none; }
.fil-ariane { flex: 1; min-width: 0; }
.fil-ariane ol { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-size: .92rem; min-width: 0; }
.fil-ariane li { display: flex; align-items: center; flex: none; color: var(--texte-doux); }
.fil-ariane li:last-child { flex: 0 1 auto; min-width: 0; }  /* seul le titre de la page se raccourcit (…) */
.fil-ariane li + li::before { content: "›"; margin: 0 .45rem; color: var(--ligne-forte); font-size: 1.1rem; }
.fil-ariane a { color: var(--texte-doux); text-decoration: none; white-space: nowrap; }
.fil-ariane a:hover { color: var(--accent); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--texte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-entete { position: relative; display: flex; align-items: center; }
.recherche-entete .icone { position: absolute; left: .6rem; color: var(--texte-doux); pointer-events: none; width: 1.05rem; height: 1.05rem; }
.recherche-entete input { font: inherit; font-size: .92rem; width: 15rem; min-height: 2.25rem; padding: .35rem .7rem .35rem 2.1rem;
  border: 1px solid var(--ligne); border-radius: 999px; background: var(--fond); color: var(--texte); }
.recherche-entete input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); background: var(--surface); }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--texte-doux); }
.entete > .marque { margin-right: auto; }
.badge-env { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-doux); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.bouton-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: var(--rayon); background: transparent; color: var(--texte-doux); cursor: pointer; }
.bouton-icone:hover { background: var(--fond); color: var(--accent); }
.pastille { position: absolute; top: .1rem; right: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.menu-utilisateur { position: relative; }
.menu-utilisateur summary { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem; border-radius: 999px;
  list-style: none; color: var(--texte); }
.menu-utilisateur summary::-webkit-details-marker { display: none; }
.menu-utilisateur summary:hover, .menu-utilisateur[open] summary { background: var(--fond); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.nom-utilisateur { font-weight: 600; white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.menu-deroulant { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; min-width: 16rem; padding: .4rem;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-grand); box-shadow: var(--ombre-haute); }
.menu-identite { margin: 0; padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--ligne); margin-bottom: .3rem; line-height: 1.35; overflow-wrap: anywhere; }
.menu-deroulant a, .menu-deroulant button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0;
  border-radius: var(--rayon); background: none; color: var(--texte); font: inherit; font-size: .93rem; text-decoration: none; text-align: left; cursor: pointer; }
.menu-deroulant a:hover, .menu-deroulant button:hover { background: var(--fond); color: var(--accent); }
.menu-deroulant form { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--ligne); }

/* ===================================================================== Zone de travail */
.page { width: 100%; max-width: 100rem; margin: 0 auto; padding: 1.5rem 2rem 3rem; display: grid; gap: 1.25rem; align-content: start; }
.page:focus { outline: none; }
body.sans-menu .page { max-width: 72rem; }
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-grand); padding: 1rem 1.25rem;
  display: grid; gap: .65rem; box-shadow: var(--ombre); min-width: 0; }
.carte-etroite { max-width: 30rem; width: 100%; margin: 1rem auto; }
.titre-page { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem 1.5rem; flex-wrap: wrap; }
.titre-page > div:first-child { min-width: 0; flex: 1 1 28rem; }
.titre-page p { margin: .35rem 0 0; max-width: 80ch; color: var(--texte-doux); }
.actions-page { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.etat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.etat::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.etat-ok { color: var(--ok); }
.etat-erreur { color: var(--danger); }
.barre-liste { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.grille-espace { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.25rem; align-items: start; }
.liste-simple { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.badge-discret { font-size: .78rem; color: var(--texte-doux); margin-left: .3rem; }
.commentaire { border-left: 3px solid var(--accent-doux); padding: .2rem .8rem; }
.commentaire p { margin: .2rem 0 0; }
.fiche { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: .45rem 1.25rem; margin: 0; }
.fiche dt { font-weight: 600; color: var(--texte-doux); }
.fiche dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }

/* Onglets d'un module : ils passent à la ligne sur ordinateur, et défilent sur une seule ligne sur téléphone. */
.onglets { display: flex; flex-wrap: wrap; gap: 0 .2rem; border-bottom: 1px solid var(--ligne); }
.onglets a { flex: none; padding: .55rem .85rem; text-decoration: none; font-weight: 600; color: var(--texte-doux); border-bottom: 2px solid transparent; white-space: nowrap; }
.onglets a:hover { color: var(--texte); }
.onglets a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ===================================================================== Messages */
.messages { display: grid; gap: .5rem; }
.message { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .7rem .9rem; border-radius: var(--rayon);
  border: 1px solid var(--ligne); border-left: 4px solid var(--info); background: var(--info-doux); color: var(--texte); }
.message > .icone { margin-top: .1rem; color: var(--info); }
.message-success { border-color: var(--ok); background: var(--ok-doux); }
.message-success > .icone { color: var(--ok); }
.message-warning { border-color: var(--alerte); background: var(--alerte-doux); }
.message-warning > .icone { color: var(--alerte); }
.message-error { border-color: var(--danger); background: var(--danger-doux); }
.message-error > .icone { color: var(--danger); }

/* ===================================================================== Boutons */
.bouton { font: inherit; font-size: .95rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.35rem; padding: .4rem 1rem; border-radius: var(--rayon); border: 1px solid var(--accent); background: var(--accent);
  color: #fff; text-decoration: none; cursor: pointer; line-height: 1.25; text-align: center; }
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.bouton-secondaire { background: var(--surface); color: var(--accent); border-color: var(--ligne-forte); }
.bouton-secondaire:hover { background: var(--accent-doux); color: var(--accent-fonce); border-color: var(--accent); }
.bouton-petit { min-height: 1.9rem; padding: .2rem .6rem; font-size: .85rem; }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }
.bouton[aria-busy="true"] { cursor: progress; }

/* ===================================================================== Formulaires */
.formulaire { display: grid; gap: .9rem; }
.champ { display: grid; gap: .3rem; max-width: 46rem; min-width: 0; }
.champ label, .champ legend { font-weight: 600; }
.champ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea),
.filtres :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  font: inherit; min-height: 2.4rem; padding: .45rem .65rem; border: 1px solid var(--ligne-forte); border-radius: var(--rayon);
  background: var(--surface); color: var(--texte); width: 100%; }
.champ textarea { min-height: 6rem; resize: vertical; line-height: 1.45; }
.champ input[type="date"], .champ input[type="number"], .champ input[type="time"] { max-width: 14rem; }
.champ input[type="file"] { font: inherit; font-size: .92rem; }
:is(.champ, .filtres) :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.champ [aria-invalid="true"] { border-color: var(--danger); background: #fffafa; }
.champ > small { font-size: .85rem; }
.champ .erreur { font-weight: 600; }
.champ-case { display: flex; align-items: center; gap: .5rem; grid-template-columns: none; }
.champ-case label { font-weight: 400; }
.champ-case input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.requis { color: var(--danger); font-weight: 700; margin-left: .15rem; }
.legende-requis { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.resume-erreurs { margin: 0; }
.transition .champ, .ligne-champs .champ, .filtres .champ, .decision .champ, .ligne-champs-editeur .champ { max-width: none; }

/* Filtres des listes : grille compacte ; au-delà de 5 critères, les moins utilisés se replient (script commun). */
.filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem 1rem; align-items: end; }
.filtres .champ label { font-size: .88rem; }
.filtres-boutons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filtres [data-filtre-secondaire][hidden] { display: none; }
.bouton-lien { border: 0; background: none; padding: .3rem .2rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.recherche-page { display: flex; gap: .5rem; flex-wrap: wrap; }
.recherche-page input { font: inherit; min-height: 2.4rem; padding: .45rem .65rem; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); flex: 1 1 16rem; }

/* ===================================================================== Tableaux */
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: .55rem .65rem; border-bottom: 1px solid var(--ligne); }
.tableau thead th { position: sticky; top: var(--hauteur-entete); z-index: 2; background: #f1eeed; color: var(--texte-doux); font-weight: 650; font-size: .86rem; border-bottom-color: var(--ligne-forte); }
.tableau thead th:first-child { border-top-left-radius: var(--rayon); }
.tableau thead th:last-child { border-top-right-radius: var(--rayon); }
.tableau tbody tr:nth-child(even) > td { background: var(--surface-alt); }
.tableau tbody tr:hover > td { background: #fbf1f0; }
.tableau tbody tr:last-child > td { border-bottom: 0; }
.ligne-historique td { color: var(--texte-doux); background: var(--fond); }
/* Un en-tête fixe n'a pas de sens dans un tableau qui défile horizontalement. */
:is(.grille-defilante, .defilement-horizontal) .tableau thead th { position: static; }
.outils-tableau { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.outils-tableau input { font: inherit; font-size: .92rem; min-height: 2.2rem; padding: .35rem .65rem; width: min(22rem, 100%);
  border: 1px solid var(--ligne-forte); border-radius: var(--rayon); }
.outils-tableau input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.compteur-lignes { font-size: .85rem; color: var(--texte-doux); }
.tri { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.tri::after { content: "↕"; font-size: .8rem; opacity: .45; }
th[aria-sort="ascending"] .tri::after { content: "↑"; opacity: 1; color: var(--accent); }
th[aria-sort="descending"] .tri::after { content: "↓"; opacity: 1; color: var(--accent); }
.tri:hover { color: var(--texte); }
.ligne-masquee { display: none; }
.aucune-ligne td { color: var(--texte-doux); font-style: italic; text-align: center; }

/* ===================================================================== Pastilles de statut et priorités */
.statut { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; line-height: 1.3; padding: .12rem .55rem;
  border-radius: 999px; border: 1px solid var(--ligne-forte); background: var(--fond); white-space: nowrap; }
.statut::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }
@supports (background: color-mix(in srgb, red 10%, white)) {
  .statut { background: color-mix(in srgb, currentColor 9%, var(--surface)); border-color: color-mix(in srgb, currentColor 45%, var(--surface)); }
}
.priorite { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.priorite::before { content: ""; width: .55rem; height: .55rem; border-radius: 2px; background: currentColor; }
.priorite-haute, .priorite-urgente, .priorite-critique { color: var(--danger); }
.priorite-moyenne, .priorite-normale { color: var(--texte); }
.priorite-basse, .priorite-faible { color: var(--texte-doux); }

/* ===================================================================== Fiches longues : sommaire, « Que faire maintenant ? » */
.sommaire-page { position: sticky; top: var(--hauteur-entete); z-index: 20; display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem; margin: 0 -.25rem;
  padding: .45rem .25rem; background: var(--fond); overflow-x: auto; scrollbar-width: thin; }
.sommaire-page > span { flex: none; font-size: .82rem; font-weight: 700; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .05em; margin-right: .3rem; }
.sommaire-page a { flex: none; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--ligne); background: var(--surface);
  font-size: .86rem; color: var(--texte); text-decoration: none; white-space: nowrap; }
.sommaire-page a:hover { border-color: var(--accent); color: var(--accent); }
.sommaire-page a.lien-que-faire { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.carte-que-faire { border-color: var(--accent); border-left: 4px solid var(--accent); }
.carte-que-faire > h2 { color: var(--accent); }
.transitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.transition { align-content: start; gap: .5rem; padding: .8rem; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface-alt); }

/* ===================================================================== Mon espace, notifications, tableau de bord */
.resume-espace { display: flex; gap: .6rem; flex-wrap: wrap; }
.resume-espace a, .resume-espace span { display: inline-flex; align-items: baseline; gap: .4rem; padding: .45rem .8rem; border-radius: var(--rayon);
  border: 1px solid var(--ligne); background: var(--surface); color: var(--texte); text-decoration: none; }
.resume-espace strong { font-size: 1.25rem; }
.resume-espace .resume-retard { border-color: var(--danger); background: var(--danger-doux); color: var(--danger); }
.bloc-a-faire { border-top: 1px solid var(--ligne); padding-top: .55rem; }
.bloc-a-faire:first-of-type { border-top: 0; padding-top: 0; }
.bloc-a-faire h3 { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .3rem; }
.compte { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--fond); border: 1px solid var(--ligne-forte); font-size: .78rem; font-weight: 700; color: var(--texte); }
.compte-retard { background: var(--danger); border-color: var(--danger); color: #fff; }
.liste-notifications { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.liste-notifications li { padding: .45rem .6rem; border-left: 3px solid transparent; border-radius: 0 var(--rayon) var(--rayon) 0; }
.liste-notifications li.non-lue { border-left-color: var(--accent); background: var(--fond); }
.groupes-indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1.25rem; align-items: start; }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .7rem; }
.indicateur { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .65rem .75rem; display: grid; gap: .25rem; align-content: start; background: var(--surface); }
.indicateur-libelle { font-size: .88rem; color: var(--texte-doux); line-height: 1.35; }
.indicateur-valeur { font-size: 1.75rem; font-weight: 700; color: var(--texte); text-decoration: none; line-height: 1.15; }
a.indicateur-valeur:hover { color: var(--accent); text-decoration: underline; }
.indicateur-indisponible .indicateur-valeur { font-size: 1rem; font-weight: 600; color: var(--texte-doux); }
.indicateur-vigilance { border-color: var(--danger); border-left: 4px solid var(--danger); background: #fffafa; }
.indicateur-vigilance .indicateur-valeur { color: var(--danger); }
.a-surveiller { border-left: 4px solid var(--danger); }
.a-surveiller ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a-surveiller li a { display: inline-flex; gap: .4rem; align-items: baseline; padding: .35rem .7rem; border-radius: var(--rayon); border: 1px solid var(--danger);
  background: var(--danger-doux); color: var(--danger); text-decoration: none; font-weight: 600; }

/* ===================================================================== Écrans moyens et petits */
@media (max-width: 1100px) {
  .barre-laterale { transform: translateX(-100%); box-shadow: none; width: min(18rem, 85vw) !important; }
  html.menu-ouvert .barre-laterale { transform: none; box-shadow: var(--ombre-haute); }
  html.menu-reduit .nav-libelle { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  html.menu-reduit .barre-marque .marque { display: inline; }
  html.menu-reduit .nav-titre { height: auto; margin: 0 0 .15rem; padding: 0 .7rem; color: var(--menu-doux); background: none; overflow: visible; }
  html.menu-reduit .nav-principale a { justify-content: flex-start; padding: .35rem .7rem; }
  html.menu-reduit .barre-marque { justify-content: space-between; padding: 0 1rem; }
  body.avec-menu .zone-principale, html.menu-reduit body.avec-menu .zone-principale { margin-left: 0; }
  .entete .ouvrir-menu, .barre-laterale .fermer-menu { display: inline-flex; }
  .barre-laterale .replier-menu { display: none; }
  .page { padding: 1.25rem 1.25rem 2.5rem; }
  /* Tableaux larges (plan d'actions, liste des actions) : ils défilent dans leur cadre au lieu de déborder. */
  .carte:has(.tableau) { overflow-x: auto; }
  .tableau thead th { position: static; }
  .entete { padding: .4rem 1rem; gap: .6rem; }
  .recherche-entete input { width: 11rem; }
  .nom-utilisateur { display: none; }
}
@media (max-width: 700px) {
  :root { --hauteur-entete: 3.25rem; }
  .fil-ariane li:not(:last-child) { display: none; }
  .fil-ariane li:last-child::before { display: none; }
  .recherche-entete input { width: 2.4rem; padding-right: 0; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
  .recherche-entete input:focus { position: absolute; right: -4rem; width: 70vw; z-index: 5; cursor: text; color: var(--texte); background: var(--surface); }
  .recherche-entete input::placeholder { color: transparent; }
  .recherche-entete input:focus::placeholder { color: var(--texte-doux); }
  .badge-env { display: none; }
  .page { padding: 1rem .9rem 2rem; gap: 1rem; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .carte { padding: .85rem .9rem; }
  h1 { font-size: 1.3rem; }
  .fiche { grid-template-columns: 1fr; gap: .1rem; }
  .fiche dd { margin-bottom: .5rem; }
  .actions-page { width: 100%; }
  .tableau thead th { position: static; }
  /* Tableau simple sur téléphone : chaque ligne devient une fiche « libellé : valeur » (libellés posés par le script). */
  .tableau.tableau-empilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau.tableau-empilable, .tableau.tableau-empilable tbody, .tableau.tableau-empilable tr, .tableau.tableau-empilable td { display: block; width: 100%; }
  .tableau.tableau-empilable tr { border: 1px solid var(--ligne); border-radius: var(--rayon); margin-bottom: .6rem; padding: .3rem 0; background: var(--surface); }
  .tableau.tableau-empilable tbody tr:nth-child(even) > td, .tableau.tableau-empilable tbody tr:hover > td { background: transparent; }
  .tableau.tableau-empilable td { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: .6rem; border: 0; padding: .3rem .7rem; }
  .tableau.tableau-empilable .contenu-cellule { min-width: 0; overflow-wrap: anywhere; }
  .statut { white-space: normal; border-radius: var(--rayon); }  /* libellés longs (« PV signé par l'animateur, à viser ») */
  .tableau.tableau-empilable td::before { content: attr(data-libelle); font-weight: 600; color: var(--texte-doux); font-size: .85rem; }
  .tableau.tableau-empilable td[data-libelle=""] { grid-template-columns: 1fr; }
  .tableau.tableau-empilable td[data-libelle=""]::before { display: none; }
  .tableau:not(.tableau-empilable) { display: block; overflow-x: auto; }
  .groupes-indicateurs { grid-template-columns: 1fr; }
  .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================== Impression : seule la page est imprimée */
@media print {
  .barre-laterale, .voile-menu, .entete, .aller-au-contenu, .sommaire-page, .outils-tableau, .filtres, .sprite-icones { display: none !important; }
  body.avec-menu .zone-principale { margin: 0 !important; }
  body { background: #fff; }
  .page { padding: 0; max-width: none; }
  .carte { box-shadow: none; break-inside: avoid; }
  .tableau thead th { position: static; }
  a { color: inherit; text-decoration: none; }
}

/* ===================================================================== Règles propres aux modules */
/* Contexte et parties intéressées (lot 2.1) */
.statut-valide { color: var(--ok); border-color: var(--ok); }
.statut-soumis { color: var(--alerte); border-color: var(--alerte); }
.statut-a_corriger { color: var(--danger); border-color: var(--danger); }
.statut-archive { color: var(--texte-doux); }
.swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.swot > .carte { border-top: 3px solid var(--ligne); align-content: start; }
.swot-force, .swot-opportunite { border-top-color: var(--ok) !important; }
.swot-faiblesse, .swot-menace { border-top-color: var(--accent) !important; }
.liste-swot { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.grille-pip { border-collapse: collapse; width: 100%; table-layout: fixed; }
.grille-pip th, .grille-pip td { border: 1px solid var(--ligne); padding: .45rem; text-align: center; vertical-align: middle; height: 3.2rem; }
.grille-pip thead th, .grille-pip tbody th { background: var(--fond); color: var(--texte-doux); font-weight: 600; }
.grille-pip td a { display: inline-block; margin: .1rem; font-size: .85rem; font-weight: 600; }
.case-fort { background: var(--accent-doux); }
.case-moyen { background: #fbf3ea; }
.case-faible { background: var(--surface); }
.decision { gap: .4rem; min-width: 14rem; }
.decision .champ select, .decision .champ textarea { font: inherit; padding: .35rem .5rem; border: 1px solid var(--ligne); border-radius: var(--rayon); width: 100%; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 800px) {
  .swot { grid-template-columns: 1fr; }
  .grille-pip { table-layout: auto; }
}
.groupe-cases { border: 0; padding: 0; margin: 0; }
.groupe-cases legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.groupe-cases > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem .9rem; }
.groupe-cases label { font-weight: 400; display: flex; gap: .45rem; align-items: flex-start; }
.groupe-cases label input { margin-top: .3rem; }

/* Actions centralisées (lot 2.2) */
.statut-action-a_qualifier, .statut-action-a_planifier { color: var(--alerte); border-color: var(--alerte); }
.statut-action-a_faire, .statut-action-en_cours { color: var(--texte); border-color: var(--texte-doux); }
.statut-action-en_attente { color: var(--alerte); }
.statut-action-a_verifier { color: var(--accent); border-color: var(--accent); }
.statut-action-cloturee { color: var(--ok); border-color: var(--ok); }
.statut-action-annulee { color: var(--texte-doux); text-decoration: line-through; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; }
.colonne-kanban { align-content: start; background: var(--fond); }
.carte-action { display: block; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .5rem .6rem; color: var(--texte); text-decoration: none; font-size: .9rem; }
.carte-action:hover { border-color: var(--accent); }
.carte-retard { border-left: 3px solid var(--danger); }
progress { width: 10rem; vertical-align: middle; accent-color: var(--accent); }
.champ div > div > label { font-weight: 400; }  /* choix multiples (boutons radio) */

/* Risques et opportunités (lot 2.3) */
.niveau { display: inline-block; min-width: 2.2rem; text-align: center; font-weight: 700; font-size: .85rem; padding: .05rem .4rem; border-radius: var(--rayon); }
.niveau-n1 { background: #f6d5d3; color: var(--danger); }
.niveau-n2 { background: #fbecd0; color: var(--alerte); }
.niveau-n3 { background: #e2efe5; color: var(--ok); }
.grille-risques { border-collapse: collapse; width: 100%; max-width: 46rem; table-layout: fixed; }
.grille-risques th, .grille-risques td { border: 1px solid var(--ligne); padding: .5rem; text-align: center; vertical-align: middle; height: 3.6rem; }
.grille-risques thead th, .grille-risques tbody th { background: var(--fond); color: var(--texte-doux); font-weight: 600; }
.grille-risques td a { font-size: 1.4rem; font-weight: 700; color: var(--texte); }
.grille-risques td small { display: block; color: var(--texte-doux); font-size: .75rem; }
.case-n1 { background: #f6d5d3; }
.case-n2 { background: #fbecd0; }
.case-n3 { background: #e2efe5; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.statut-risque-valide, .statut-risque-retenue { color: var(--accent); border-color: var(--accent); }
.statut-risque-en_traitement, .statut-risque-en_cours { color: var(--texte); border-color: var(--texte-doux); }
.statut-risque-a_reevaluer, .statut-risque-a_valider { color: var(--alerte); border-color: var(--alerte); }
.statut-risque-maitrise, .statut-risque-realisee, .statut-risque-accepte { color: var(--ok); border-color: var(--ok); }
.statut-risque-rejete, .statut-risque-clos, .statut-risque-ecartee, .statut-risque-close, .statut-risque-differee { color: var(--texte-doux); }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* --- Non-conformités (lot 3) --- */
.statut-fnc-declaree, .statut-fnc-annulation_demandee { color: var(--alerte); border-color: var(--alerte); }
.statut-fnc-correction, .statut-fnc-analyse, .statut-fnc-actions, .statut-fnc-mise_en_oeuvre { color: var(--texte); border-color: var(--texte-doux); }
.statut-fnc-verification, .statut-fnc-evaluation, .statut-fnc-a_cloturer { color: var(--accent); border-color: var(--accent); }
.statut-fnc-cloturee { color: var(--ok); border-color: var(--ok); }
.statut-fnc-annulee { color: var(--texte-doux); text-decoration: line-through; }
.etapes-fnc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem; }
.etapes-fnc li { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .35rem .6rem; background: var(--fond); }
.etapes-fnc li small { display: block; color: var(--texte-doux); }
.etapes-fnc .numero { display: inline-block; min-width: 1.4rem; font-weight: 700; }
.etapes-fnc .etape-faite { border-color: var(--ok); }
.etapes-fnc .etape-faite small { color: var(--ok); }
.etapes-fnc .etape-en_cours { border: 2px solid var(--accent); background: var(--surface); font-weight: 600; }
.etapes-fnc .etape-en_cours small { color: var(--accent); }
.etapes-fnc .etape-sans_objet, .etapes-fnc .etape-interrompue { opacity: .55; }
form.en-ligne { display: inline; }
.formulaire-fnc h2 { margin-bottom: 0; }
.tableau tr.ligne-retard td:first-child { border-left: 3px solid var(--alerte); }

/* --- Système documentaire (lot 4) --- */
.statut-doc-en_redaction { color: var(--texte); border-color: var(--texte-doux); }
.statut-doc-verif_contenu, .statut-doc-verif_coherence, .statut-doc-en_approbation { color: var(--alerte); border-color: var(--alerte); }
.statut-doc-approuvee { color: var(--accent); border-color: var(--accent); }
.statut-doc-en_vigueur { color: var(--ok); border-color: var(--ok); }
.statut-doc-perimee, .statut-doc-abandonnee { color: var(--texte-doux); text-decoration: line-through; }
.entete-section { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.contenu-section h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.onglets-sections { margin-bottom: .8rem; }
.onglets-sections a { font-size: .9rem; }

/* Éditeur du contenu structuré : une carte par ligne de tableau. */
.jeu-lignes { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .6rem .8rem; margin: 0 0 1rem; }
.jeu-lignes legend { font-weight: 700; padding: 0 .3rem; }
.ligne-editeur { border: 1px solid var(--ligne); border-left: 3px solid var(--texte-doux); border-radius: var(--rayon);
  background: var(--surface); padding: .5rem .7rem; margin-bottom: .6rem; }
.ligne-editeur.ligne-en-erreur { border-left-color: var(--danger); }
.ligne-entete { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .3rem; }
.champ-ordre { display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; color: var(--texte-doux); }
.champ-ordre input { width: 4.5rem; }
.ligne-champs-editeur { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem .8rem; }
.ligne-champs-editeur .champ-large { grid-column: 1 / -1; }
.ligne-champs-editeur textarea, .ligne-champs-editeur input, .ligne-champs-editeur select { width: 100%; box-sizing: border-box; }
.actions-formulaire { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
[data-etat-sauvegarde].erreur { color: var(--danger); }

/* Logigramme intégré au tableau des étapes (repris de l'application actuelle) : la forme de chaque étape est dans
   sa propre cellule, les traits sont des bordures (elles s'impriment toujours, contrairement aux fonds). */
.defilement-horizontal { overflow-x: auto; }
.tableau.logigramme { display: table; table-layout: fixed; width: 100%; min-width: 52rem; }
.logigramme .logi-num { width: 2.4rem; text-align: center; }
.logigramme .logi-col { width: 34%; }
.logigramme tr { page-break-inside: avoid; break-inside: avoid; }
.logi-cell { position: relative; padding: 10px 0 !important; vertical-align: middle; }
.logi-v { position: absolute; width: 0; border-left: 1.4px solid; margin-left: -0.7px; }
.logi-h { position: absolute; height: 0; border-top: 1.4px solid; margin-top: -0.7px; }
.logi-forme { position: relative; z-index: 2; width: 44%; margin: 0 auto; box-sizing: border-box;
  border: 1.4px solid #495057; border-radius: 4px; background: #fff; padding: 5px 7px; font-size: 12px;
  font-weight: 600; line-height: 1.25; text-align: center; color: #212529; }
.logi-txt { position: relative; z-index: 1; display: block; overflow-wrap: anywhere; }
.logi-fin { border-radius: 40px; border-width: 2px; background: #f1f3f5; }
.logi-par { border-style: dashed; border-color: #6f42c1; background: #eef2ff; }
.logi-prefixe { position: relative; z-index: 1; display: block; font-size: 9px; font-weight: 700; color: #6f42c1; }
.logi-decision { border: 0; background: transparent; padding: 12px 14%; }
.logi-losange { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.logi-losange polygon { fill: #fff8e1; stroke: #f0ad4e; stroke-width: 1.5; }
.logi-fl { position: absolute; width: 0; height: 0; z-index: 3; border: 4px solid transparent; }
.logi-fl-bas { top: -8px; left: 50%; margin-left: -4px; border-bottom-width: 0; border-top-width: 6px; }
.logi-fl-gauche { right: -6px; margin-top: -4px; border-right-width: 6px; border-left-width: 0; }
.logi-fl-droite { left: -6px; margin-top: -4px; border-left-width: 6px; border-right-width: 0; }
.logi-lbl { position: absolute; z-index: 4; font-size: 10px; font-weight: 700; background: #fff; padding: 0 1.5px;
  white-space: nowrap; transform: translateY(-115%); }
.logi-lbl-bas { left: 50%; bottom: -10px; transform: translate(3px, 100%); }
.logi-repli { position: relative; z-index: 2; font-size: 10px; font-weight: 700; text-align: center; margin-top: 3px; }
.role { display: inline-block; min-width: 1.6rem; }

/* Comparaison de deux versions (DOC-24) */
del { background: #fbe4e2; color: var(--danger); text-decoration: line-through; }
ins { background: #e3f1e6; color: var(--ok); text-decoration: none; }
.tableau tr.diff-ajoutee td:first-child { border-left: 3px solid var(--ok); }
.tableau tr.diff-supprimee td { color: var(--texte-doux); text-decoration: line-through; }
.tableau tr.diff-modifiee td:first-child { border-left: 3px solid var(--alerte); }
.legende-diff { margin-left: .6rem; font-size: .85rem; }

/* Fiche processus : informations reliées (PRC-05) */
.grille-processus { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem 1.2rem; }
.bloc-processus h3 { margin: .3rem 0; font-size: 1rem; }

/* Cartographie des processus (PRC-03) : bandeau « exigences » à gauche, « satisfaction » à droite ; pilotage en haut,
   réalisation au centre (enchaînement fléché), support en bas. Les cartes s'ouvrent d'un clic sur la fiche du
   processus ; au survol, ses processus liés sont mis en évidence (script commun). */
.carto { --carto-pilotage: #3d5a80; --carto-pilotage-doux: #eef2f8; --carto-support: #6b6461; --carto-support-doux: #f3f2f0;
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; gap: .6rem; align-items: stretch; }
.carto-cote { display: flex; align-items: center; justify-content: center; padding: 1rem 0; color: #fff; font-weight: 700; font-size: .85rem;
  letter-spacing: .02em; text-align: center; }
.carto-cote span { writing-mode: vertical-rl; transform: rotate(180deg); }
.carto-entree { background: linear-gradient(180deg, #8a8380, #6b6461); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); padding-right: .6rem; }
.carto-sortie { background: linear-gradient(180deg, #c0443b, var(--accent)); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); padding-right: .6rem; }
.carto-sortie span { transform: none; }
.carto-bandes { display: grid; gap: .9rem; min-width: 0; }
.carto-bande { position: relative; padding: .8rem 1rem 1rem; border-radius: var(--rayon-grand); border: 1px solid var(--ligne);
  border-left: 5px solid var(--carto-support); background: var(--carto-support-doux); }
.carto-management { border-left-color: var(--carto-pilotage); background: var(--carto-pilotage-doux); }
.carto-realisation { border-left-color: var(--accent); background: #fdf3f2; padding: 1rem .5rem 1.1rem .6rem; }
.carto-entete { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.carto-entete h2 { margin: 0; font-size: 1.05rem; }
.carto-role { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--carto-support); }
.carto-management .carto-role { background: var(--carto-pilotage); }
.carto-realisation .carto-role { background: var(--accent); }
.carto-compte { margin-left: auto; font-size: .82rem; color: var(--texte-doux); }
/* Management et support : cartes centrées dans leur bande. */
.carto-cases { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.carto-cases > .carto-case { flex: 0 1 15rem; }
.carto-case { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem; border: 1px solid var(--ligne);
  border-radius: var(--rayon-grand); background: var(--surface); box-shadow: var(--ombre);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease; }
.carto-management .carto-case { border-top: 3px solid var(--carto-pilotage); }
.carto-support .carto-case { border-top: 3px solid var(--carto-support); }
.carto-case p { margin: 0; }
.carto-lien { display: grid; gap: .1rem; color: var(--texte); text-decoration: none; }
.carto-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* toute la carte est cliquable */
.carto-lien:focus-visible { outline: none; }
.carto-repere { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--texte-doux); }
.carto-intitule { font-weight: 650; line-height: 1.3; }
.carto-pilote { font-size: .85rem; color: var(--texte-doux); }
.carto-infos { display: flex; flex-wrap: wrap; gap: .3rem; }
.carto-puce { display: inline-block; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--ligne);
  background: var(--surface-alt); font-size: .78rem; text-decoration: none; }
a.carto-puce { position: relative; z-index: 2; }  /* les liens secondaires restent cliquables au-dessus de la carte */
a.carto-puce:hover { border-color: var(--accent); }
.carto-puce-vide { color: var(--texte-doux); }
.carto-interactions { font-size: .78rem; color: var(--texte-doux); border-top: 1px dashed var(--ligne); padding-top: .3rem; }
/* Survol et clavier : la carte se soulève, ses processus liés sont soulignés, les autres s'estompent. */
.carto-case:hover, .carto-case:focus-within, .carto-case.survolee { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 27, 27, .16);
  border-color: var(--accent); }
.carto-case:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.carto-case.relie { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(179, 38, 30, .35); }
.carto-case.estompe { opacity: .45; }
.carto-case.selectionnee { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); transform: translateY(0); }
/* Réalisation : chaque carte est un chevron ; emboîtés de gauche à droite, ils figurent l'enchaînement des processus
   (sans flèche séparée). Le contour est dessiné par ::before (bord) et ::after (fond), découpés en chevron. */
.carto-chevrons { --pointe: 1.1rem; --bord-chevron: #e3aaa5; gap: .9rem 0; }
.carto-chevrons > .carto-case { flex: 1 1 0; min-width: 9.5rem; max-width: 16rem; margin-left: calc(.2rem - var(--pointe));
  padding: .75rem calc(var(--pointe) + .25rem) .75rem calc(var(--pointe) + .3rem);
  border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 1px 1.5px rgba(31, 27, 27, .16));
  transition: transform .15s ease, filter .15s ease, opacity .15s ease; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.carto-chevrons > .carto-case:first-child { margin-left: 0; padding-left: .8rem; }
.carto-chevrons > .carto-case::before, .carto-chevrons > .carto-case::after { content: ""; position: absolute; inset: 0; z-index: -1;
  transition: background .15s ease; }
.carto-chevrons > .carto-case::before { background: var(--bord-chevron);
  clip-path: polygon(0 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, 0 100%, var(--pointe) 50%); }
.carto-chevrons > .carto-case::after { background: linear-gradient(var(--accent) 0 3px, var(--surface) 3px);
  clip-path: polygon(2px 2px, calc(100% - var(--pointe) - 1px) 2px, calc(100% - 2.5px) 50%, calc(100% - var(--pointe) - 1px) calc(100% - 2px),
    2px calc(100% - 2px), calc(var(--pointe) + 1.5px) 50%); }
.carto-chevrons > .carto-case:first-child::before {
  clip-path: polygon(0 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, 0 100%); }
.carto-chevrons > .carto-case:first-child::after {
  clip-path: polygon(2px 2px, calc(100% - var(--pointe) - 1px) 2px, calc(100% - 2.5px) 50%, calc(100% - var(--pointe) - 1px) calc(100% - 2px), 2px calc(100% - 2px)); }
.carto-chevrons .carto-lien { min-width: 0; }
.carto-chevrons .carto-intitule { min-width: 0; font-size: .85rem; font-weight: 600; overflow-wrap: break-word; }  /* « approvisionnement » tient dans son chevron */
.carto-chevrons .carto-puce { font-size: .74rem; }
/* La zone cliquable suit la forme : la pointe d'une carte reste à elle, même sous l'encoche de la suivante. */
.carto-chevrons > .carto-case { pointer-events: none; }  /* le cadre rectangulaire ne capte rien… */
.carto-chevrons .carto-lien, .carto-chevrons a.carto-puce { pointer-events: auto; }  /* …seule la forme en chevron est sensible */
.carto-chevrons .carto-lien::after { border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, 0 100%, var(--pointe) 50%); }
.carto-chevrons > .carto-case:first-child .carto-lien::after {
  clip-path: polygon(0 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, 0 100%); }
.carto-chevrons > .carto-case:hover, .carto-chevrons > .carto-case:focus-within, .carto-chevrons > .carto-case.survolee {
  z-index: 3; box-shadow: none; outline: none; filter: drop-shadow(0 7px 10px rgba(31, 27, 27, .24)); }
.carto-chevrons > .carto-case:is(:hover, :focus-within, .survolee, .relie)::before { background: var(--accent); }
.carto-chevrons > .carto-case.relie { box-shadow: none; filter: drop-shadow(0 0 4px rgba(179, 38, 30, .45)); }
.carto-chevrons > .carto-case.selectionnee { box-shadow: none; filter: drop-shadow(0 0 5px rgba(179, 38, 30, .7)); }
.carto-chevrons > .carto-case.selectionnee::before { background: var(--accent-fonce); }
.carto-chevrons > .carto-case.selectionnee::after { background: linear-gradient(var(--accent) 0 3px, var(--accent-doux) 3px); }
.carto-legende { margin: .6rem 0 0; font-size: .85rem; color: var(--texte-doux); }
.matrice-interactions td, .matrice-interactions th { text-align: center; }
.matrice-interactions td.diagonale { background: var(--fond); }
@media (prefers-reduced-motion: reduce) { .carto-case, .carto-case::before, .carto-case::after { transition: none; } }
@media (max-width: 800px) {
  .carto { grid-template-columns: 1fr; }
  .carto-cote { padding: .55rem 1rem 1rem; }
  .carto-cote span, .carto-sortie span { writing-mode: horizontal-tb; transform: none; }
  .carto-entree, .carto-sortie { clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); padding-right: 1rem; }
  /* Sur un écran étroit, les chevrons s'empilent et pointent vers le bas. */
  .carto-chevrons { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .carto-chevrons > .carto-case { flex: 0 0 auto; max-width: none; min-width: 0; margin: calc(.35rem - var(--pointe)) 0 0;
    padding: calc(var(--pointe) + .45rem) 1rem calc(var(--pointe) + .5rem); }
  .carto-chevrons > .carto-case:first-child { margin-top: 0; padding: .85rem 1rem calc(var(--pointe) + .5rem); }
  .carto-chevrons > .carto-case::before, .carto-chevrons .carto-lien::after {
    clip-path: polygon(0 0, 50% var(--pointe), 100% 0, 100% calc(100% - var(--pointe)), 50% 100%, 0 calc(100% - var(--pointe))); }
  .carto-chevrons > .carto-case::after {
    clip-path: polygon(2px 2px, 50% calc(var(--pointe) + 1.5px), calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--pointe) - 1px),
      50% calc(100% - 2.5px), 2px calc(100% - var(--pointe) - 1px)); }
  .carto-chevrons > .carto-case:first-child::before, .carto-chevrons > .carto-case:first-child .carto-lien::after {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pointe)), 50% 100%, 0 calc(100% - var(--pointe))); }
  .carto-chevrons > .carto-case:first-child::after {
    clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--pointe) - 1px), 50% calc(100% - 2.5px),
      2px calc(100% - var(--pointe) - 1px)); }
}
@media print {
  .carto-case { box-shadow: none; transform: none !important; }
  .carto-cote { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Pilotage (lot 5.1) : tableau de bord d'un processus, états des valeurs (IND-06), tendance (SVG serveur). */
.grille-defilante { overflow-x: auto; }
.grille-indicateurs { font-size: .85rem; }
.grille-indicateurs th, .grille-indicateurs td { text-align: center; padding: .3rem .35rem; white-space: nowrap; }
.grille-indicateurs .col-indicateur { text-align: left; white-space: normal; min-width: 14rem; font-weight: 400; }
.grille-indicateurs .cellule-conso { background: var(--fond); font-weight: 600; }
.cellule.etat-atteint { background: #e3f1e6; color: var(--ok); }
.cellule.etat-proche { background: #fbf0d9; color: var(--alerte); }
.cellule.etat-non_atteint { background: #f6d5d3; color: var(--danger); font-weight: 700; }
.cellule-manquante { color: var(--danger); font-style: italic; }
.cellule-non_disponible, .cellule-provisoire, .cellule-en_cours { color: var(--texte-doux); font-style: italic; }
.statut-etat-atteint { color: var(--ok); border-color: var(--ok); }
.statut-etat-proche { color: var(--alerte); border-color: var(--alerte); }
.statut-etat-non_atteint { color: var(--danger); border-color: var(--danger); }
.statut-objectif-brouillon { color: var(--alerte); border-color: var(--alerte); }
.statut-objectif-en_cours { color: var(--texte); border-color: var(--texte-doux); }
.statut-objectif-evalue { color: var(--ok); border-color: var(--ok); }
.statut-objectif-abandonne { color: var(--texte-doux); text-decoration: line-through; }
.legende-grille .statut { margin-right: .3rem; }
.tendance { width: 100%; max-width: 44rem; height: auto; display: block; margin-bottom: .6rem; }
.tendance .grille { stroke: var(--ligne); stroke-width: 1; }
.tendance .axe, .tendance .manquante { fill: var(--texte-doux); font-size: 11px; font-family: var(--police); }
.tendance .cible { stroke: var(--texte); stroke-width: 1.5; stroke-dasharray: 5 4; }
.matrice-objectifs td, .matrice-objectifs th { min-width: 6rem; }
.matrice-objectifs th[scope="row"] { min-width: 14rem; font-weight: 600; }

/* Audits (lot 5.2) : statuts et classement des constats (PO-12). */
.statut-audit-planifie, .statut-audit-prepare { color: var(--texte); border-color: var(--texte-doux); }
.statut-audit-realise, .statut-audit-rapport_a_valider { color: var(--alerte); border-color: var(--alerte); }
.statut-audit-rapport_valide { color: var(--accent); border-color: var(--accent); }
.statut-audit-cloture { color: var(--ok); border-color: var(--ok); }
.statut-audit-annule { color: var(--texte-doux); text-decoration: line-through; }
.statut-constat-nc_majeure { color: #fff; background: var(--danger); border-color: var(--danger); }
.statut-constat-nc_mineure { color: var(--danger); border-color: var(--danger); }
.statut-constat-observation { color: var(--alerte); border-color: var(--alerte); }
.statut-constat-piste_progres { color: var(--accent); border-color: var(--accent); }
.statut-constat-point_fort { color: var(--ok); border-color: var(--ok); }

/* Revue de direction (lot 5.3) : éléments d'entrée (chiffres, tendances, listes). */
.titre-section { margin: .5rem 0 0; font-size: 1.15rem; }
.element-revue h2 { font-size: 1.05rem; }
.element-indisponible { border-left: 3px solid var(--alerte); }
.chiffres-revue { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem .8rem; margin: .4rem 0; }
.chiffres-revue div { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .35rem .55rem; background: var(--fond); }
.chiffres-revue dt { font-size: .82rem; color: var(--texte-doux); }
.chiffres-revue dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.statut-revue-preparation { color: var(--alerte); border-color: var(--alerte); }
.statut-revue-elements_figes, .statut-revue-tenue { color: var(--accent); border-color: var(--accent); }
.statut-revue-signee { color: var(--ok); border-color: var(--ok); }
.statut-revue-annulee { color: var(--texte-doux); text-decoration: line-through; }

/* Changements planifiés (lot 5.4). */
.statut-changement-propose { color: var(--alerte); border-color: var(--alerte); }
.statut-changement-valide, .statut-changement-en_cours { color: var(--accent); border-color: var(--accent); }
.statut-changement-resultats_revus { color: var(--texte); border-color: var(--texte-doux); }
.statut-changement-clos { color: var(--ok); border-color: var(--ok); }
.statut-changement-abandonne { color: var(--texte-doux); text-decoration: line-through; }
/* Exigences applicables et veille (lot 6) */
.statut-exigence-proposee, .statut-exigence-a_revoir, .statut-exigence-a_verifier,
.statut-veille-a_analyser { color: var(--alerte); border-color: var(--alerte); }
.statut-exigence-active, .statut-veille-decidee { color: var(--accent); border-color: var(--accent); }
.statut-exigence-conforme, .statut-veille-close { color: var(--ok); border-color: var(--ok); }
.statut-exigence-partiel, .statut-exigence-non_conforme { color: var(--danger); border-color: var(--danger); }
.statut-exigence-retiree, .statut-exigence-ecartee, .statut-veille-annulee { color: var(--texte-doux); text-decoration: line-through; }
/* Réunions et plans d'actions (lot 6.3) */
.statut-reunion-preparation, .statut-reunion-tenue, .statut-reunion-a_viser { color: var(--alerte); border-color: var(--alerte); }
.statut-reunion-convoquee { color: var(--accent); border-color: var(--accent); }
.statut-reunion-validee { color: var(--ok); border-color: var(--ok); }
.statut-reunion-annulee { color: var(--texte-doux); text-decoration: line-through; }
/* Revue mensuelle des processus (fichier 16) */
.statut-rmp-a_cloturer { color: var(--alerte); border-color: var(--alerte); }
.statut-rmp-cloturee, .statut-rmp-en_cours { color: var(--accent); border-color: var(--accent); }
.statut-rmp-transmise { color: var(--ok); border-color: var(--ok); }
.statut-retard { color: #fff; background: var(--danger); border-color: var(--danger); }
.encart-revue { border-left: 3px solid var(--accent); }
.encart-revue h2 { margin-bottom: .2rem; }
.analyse-indicateur { border-bottom: 1px solid var(--ligne); padding-bottom: .5rem; margin-bottom: .6rem; }
.analyse-indicateur:last-child { border-bottom: 0; }

/* Demandes et revues documentaires, revues du contexte (finalisation) */
.statut-demande-avis_pilote, .statut-demande-decision_rmq,
.statut-revuedoc-en_cours, .statut-revuedoc-signee_pilote, .statut-revuectx-en_cours { color: var(--alerte); border-color: var(--alerte); }
.statut-demande-acceptee, .statut-revuedoc-visee_rmq, .statut-revuectx-cloturee { color: var(--ok); border-color: var(--ok); }
.statut-demande-rejetee { color: var(--texte-doux); text-decoration: line-through; }
.tableau-plan td { vertical-align: top; }
.bloc-point { border-bottom: 1px solid var(--ligne); padding-bottom: .4rem; margin-bottom: .6rem; }

/* Logigramme : vue graphique (formes reliées par des flèches, comme l'application actuelle) et vue tableau. */
.choix-vue { display: inline-flex; gap: 0; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); overflow: hidden; margin-bottom: .6rem; }
.choix-vue button { font: inherit; font-size: .9rem; font-weight: 600; padding: .35rem .9rem; border: 0; background: var(--surface); color: var(--texte-doux); cursor: pointer; }
.choix-vue button + button { border-left: 1px solid var(--ligne-forte); }
.choix-vue button[aria-selected="true"] { background: var(--accent); color: #fff; }
.lg-outils { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.lg-boutons { display: inline-flex; gap: .3rem; }
.lg-cadre { position: relative; height: min(70vh, 560px); overflow: hidden; border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: #fafbfc; cursor: grab; touch-action: none; user-select: none; }
.lg-cadre.en-deplacement { cursor: grabbing; }
.lg-cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-cadre > svg { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; }
.lg-etape { fill: #fff; stroke: #495057; stroke-width: 1.5; }
.lg-decision { fill: #fff8e1; stroke: #f0ad4e; stroke-width: 1.5; }
.lg-parallele { fill: #eef2ff; stroke: #6f42c1; stroke-width: 1.5; stroke-dasharray: 4 2; }
.lg-fin { fill: #f1f3f5; stroke: #495057; stroke-width: 2; }
.lg-texte { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden;
  font: 600 12px/1.2 Arial, sans-serif; text-align: center; color: #212529; }
.lg-prefixe { font-size: 9px; font-weight: 700; color: #6f42c1; }
.lg-cartouche { fill: #fff; }
.lg-libelle { font: bold 11px Arial, sans-serif; }
.lg-noeud.lg-surligne rect, .lg-noeud.lg-surligne polygon { stroke: var(--accent); stroke-width: 3; }
@media print {
  .choix-vue, .lg-outils { display: none !important; }
  .lg-cadre { height: auto; overflow: visible; border: 0; }
  .lg-cadre > svg { position: static; transform: none !important; max-width: 100%; height: auto; }
}

/* Éditeur des étapes (matrice d'une fiche processus, logigramme d'une procédure) : une carte par étape. */
.editeur-etapes { display: grid; gap: .2rem; }
.aide-etapes { margin-bottom: .6rem; }
.aide-etapes .deux-colonnes { margin-top: .5rem; }
.liste-etapes { display: grid; gap: 0; }
.etape-editeur { display: grid; gap: .55rem; padding: .8rem 1rem; border: 1px solid var(--ligne); border-left: 4px solid var(--texte-doux);
  border-radius: var(--rayon); background: var(--surface); }
.etape-editeur[data-type="DECISION"] { border-left-color: #f0ad4e; }
.etape-editeur[data-type="PARALLEL_START"], .etape-editeur[data-type="PARALLEL_END"] { border-left-color: #6f42c1; }
.etape-editeur[data-type="FIN"] { border-left-color: #212529; }
.etape-editeur.membre-parallele { margin-left: 1.2rem; }
.etape-editeur.ligne-en-erreur { border-color: var(--danger); }
.etape-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.etape-titre { margin: 0; font-size: 1rem; }
.etape-outils { display: inline-flex; align-items: center; gap: .25rem; }
.etape-outils .bouton-icone { width: 2rem; height: 2rem; font-size: 1rem; border: 1px solid var(--ligne); }
.etape-outils .bouton-icone[disabled] { opacity: .35; cursor: default; }
.etape-sous-titre { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.etape-ligne { display: grid; gap: .5rem .8rem; }
.etape-principale { grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); }
.etape-roles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.etape-documents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etape-editeur .champ { max-width: none; }
.etape-editeur .champ label { font-size: .88rem; }
.champ-activite input { font-weight: 600; }
.etape-suivante { max-width: 34rem; }
.etape-suivante select { font: inherit; min-height: 2.3rem; width: 100%; padding: .35rem .5rem; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); margin-top: .3rem; }
.info-parallele { margin: 0; font-weight: 600; color: #6f42c1; }
.chemins-decision { display: grid; gap: .35rem; padding: .5rem .7rem; border-radius: var(--rayon); background: #fffbf0; border: 1px solid #f6dfa8; }
.chemin-ligne { display: grid; grid-template-columns: minmax(7rem, 12rem) auto minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.chemin-ligne input, .chemin-ligne select { font: inherit; min-height: 2.2rem; padding: .3rem .5rem; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--surface); width: 100%; }
.chemins-decision .bouton { justify-self: start; }
.inserer-etape { display: flex; justify-content: center; position: relative; height: 1.9rem; }
.inserer-etape::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--ligne-forte); }
.inserer-etape button { position: relative; z-index: 1; align-self: center; padding: .1rem .7rem; border: 1px dashed var(--ligne-forte); border-radius: 999px;
  background: var(--fond); color: var(--texte-doux); font: inherit; font-size: .8rem; cursor: pointer; opacity: .75; }
.inserer-etape button:hover, .inserer-etape button:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); background: var(--surface); }
.ajout-etape-fin { margin: .8rem 0 0; text-align: center; }
.apercu-logigramme { margin-top: 1rem; }
@media (max-width: 900px) {
  .etape-principale, .etape-documents { grid-template-columns: 1fr; }
  .etape-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chemin-ligne { grid-template-columns: 1fr auto; }
  .chemin-ligne > span { display: none; }
  .chemin-ligne select { grid-column: 1; }
  .etape-editeur.membre-parallele { margin-left: .5rem; }
}

/* Contenu structuré d'une fiche processus ou d'une procédure, à l'écran (sur le modèle de la consultation de
   l'application actuelle). */
.etiquette { margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux); }
.cles-processus { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1.2rem; margin: 0; }
.cles-processus div { padding: .5rem .7rem; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface-alt); }
.cles-processus dt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.cles-processus dd { margin: .15rem 0 0; font-weight: 600; }
.encadre-finalite { padding: .7rem .9rem; border-left: 4px solid var(--accent); background: var(--accent-doux); border-radius: 0 var(--rayon) var(--rayon) 0; }
.encadre-finalite p:last-child { margin: 0; font-size: 1.02rem; }
.blocs-texte { display: grid; gap: .8rem; }
.blocs-texte.deux-blocs { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.bloc-texte { padding: .6rem .8rem; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface-alt); }
.bloc-texte p:last-child { margin: 0; }
.flux-eas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: stretch; }
.flux-eas + .flux-eas { margin-top: .6rem; }
.flux-carte { padding: .55rem .7rem; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface-alt); }
.flux-carte p:last-child { margin: 0; }
.flux-activite { border-color: var(--accent); background: var(--surface); }
.flux-activite .etiquette { color: var(--accent); }
.flux-fleche { align-self: center; font-size: 1.3rem; color: var(--texte-doux); }
.puce-doc { display: inline-flex; align-items: baseline; gap: .35rem; margin: 0 .4rem .4rem 0; padding: .3rem .65rem; border: 1px solid var(--ligne);
  border-radius: 999px; background: var(--surface-alt); font-size: .92rem; }
.groupe-docs + .groupe-docs { margin-top: .5rem; }
.liste-objectifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.liste-objectifs li { padding: .6rem 0; border-bottom: 1px solid var(--ligne); }
.liste-objectifs li:last-child { border-bottom: 0; }
.liste-objectifs p { margin: .2rem 0 0; }
.objectif-titre { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; }
.cible { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--alerte-doux); color: var(--alerte); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.texte-procedure h3 { margin: .3rem 0 .2rem; font-size: 1rem; }
.texte-procedure p { margin: 0 0 .6rem; }
@media (max-width: 700px) {
  .flux-eas { grid-template-columns: 1fr; }
  .flux-fleche { transform: rotate(90deg); justify-self: center; }
}