/* Boyer Avocats Numérique : feuille de style unique (aucun style en ligne, compatible CSP).
   Reprise de la feuille de Boyer Avocats Services (charte commune), adaptée aux maquettes validées le 30/10/2026.
   Charte graphique Boyer Avocats (2026) : couleurs page 10, typographie page 13, logo pages 4 à 8.
   RÈGLE : aucune couleur ni police en dur hors du bloc :root ci-dessous. */

/* ---------- Police Switzer (Indian Type Foundry, licence Fontshare), hébergée sur le serveur ---------- */
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Light.3bc8668fadc3.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Regular.fcfa159a1fc9.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Medium.16948ff91558.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Semibold.bb9243699f67.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Jetons de conception ---------- */
:root {
  /* Couleurs de la charte (page 10) : les seules autorisées, avec le blanc. */
  --pinede: #244245;     /* principale : fonds foncés, en-tête, texte sur fond clair */
  --sarcelle: #1c7363;   /* secondaire : liens, boutons secondaires, titres sur fond clair */
  --glacier: #deebe8;    /* fonds clairs, cartes ; texte et logo sur fond Pinède */
  --citron: #c2eb61;     /* accent RARE : action principale, élément actif, filets */
  --blanc: #ffffff;

  /* Couleurs d'état, hors charte, validées le 16/10/2026 (contrastes WCAG AA vérifiés). */
  /* Règle de charte : aucune couleur rouge ou orange. Les alertes sont des
     blocs blancs bordés de Citron, texte Pinède ; le Citron n'est jamais
     utilisé comme couleur de texte sur fond clair (contraste insuffisant). */
  --erreur: #244245;        /* texte et bordure : Pinède */
  --erreur-fond: #ffffff;
  --alerte: #c2eb61;        /* bordure seulement : Citron */
  --alerte-fond: #ffffff;
  --succes: var(--sarcelle);/* le vert de la charte tient lieu de couleur de succès */

  /* Rôles (les composants n'utilisent que ces noms). */
  --texte: var(--pinede);
  --texte-secondaire: var(--pinede);   /* pas de gris dans la charte : distinction par la taille */
  --fond-page: var(--blanc);
  --fond-carte: var(--glacier);
  --fond-saisie: var(--blanc);
  --contour-saisie: var(--sarcelle);    /* 5,7:1 sur blanc : contour de champ perceptible (WCAG 1.4.11) */
  --filet: var(--glacier);
  --filet-sur-carte: var(--blanc);
  --lien: var(--sarcelle);
  --lien-survol: var(--pinede);
  --entete-fond: var(--pinede);
  --entete-texte: var(--glacier);
  --focus: var(--sarcelle);
  --focus-sur-fonce: var(--citron);
  --admin-fond: var(--sarcelle);
  --admin-texte: var(--glacier);        /* 4,7:1 */

  /* Typographie (page 13). */
  --police: "Switzer", system-ui, sans-serif;
  --graisse-titre: 600;      /* Semibold */
  --graisse-exergue: 500;    /* Medium : libellés, boutons */
  --graisse-texte: 400;      /* Regular sur téléphone ; Light sur grand écran (voir plus bas) */
  --interlettrage-titre: -0.025em;

  /* Formes. */
  --rayon: 6px;
  --cible: 44px;             /* taille minimale des zones cliquables */
}
/* Texte courant : Switzer Light (charte) sur ordinateur ; Regular sur téléphone et tablette, plus lisible. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root { --graisse-texte: 300; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { font-family: var(--police); }
body { margin: 0; background: var(--fond-page); color: var(--texte); font-size: 16px; line-height: 1.55; font-weight: var(--graisse-texte); }
strong, b { font-weight: var(--graisse-titre); }
a { color: var(--lien); text-underline-offset: 2px; } a:hover { color: var(--lien-survol); }
h1, h2, h3 { font-weight: var(--graisse-titre); letter-spacing: var(--interlettrage-titre); line-height: 1.2; color: var(--texte); }
h1 { font-size: 1.6rem; margin: 0 0 1.25rem; text-transform: uppercase; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem; }
.muted { color: var(--texte-secondaire); font-size: .9rem; }
.inline { display: inline; }
code { background: var(--glacier); padding: .1rem .3rem; border-radius: var(--rayon); word-break: break-all; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Focus clavier : toujours visible ; Citron sur les fonds Pinède. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.topbar :focus-visible { outline-color: var(--focus-sur-fonce); }
.tile-main:focus-visible { outline-color: var(--pinede); }
#contenu:focus { outline: none; }

/* Lien d'évitement : invisible jusqu'à la première tabulation. */
.skip-link { position: absolute; left: .5rem; top: -3rem; z-index: 100; background: var(--citron); color: var(--pinede); padding: .5rem .75rem; border-radius: var(--rayon); font-weight: var(--graisse-exergue); }
.skip-link:focus { top: .5rem; }

/* ---------- En-tête : fond Pinède, logo « fond foncé » (combinaison privilégiée, charte page 12) ---------- */
.topbar { background: var(--entete-fond); color: var(--entete-texte); border-bottom: 3px solid var(--citron); }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: .25rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--entete-texte); min-height: var(--cible); padding: .5rem 0; }
.brand:hover { color: var(--entete-texte); }
/* Logo original « BOYER Avocats » (charte page 4), tiré du fichier officiel sans aucune retouche du dessin ;
   le SVG garde sa marge de sécurité ; 128 px de large => logo visible d'environ 114 px (minimum charte : 100 px). */
.brand-logo { display: block; width: 128px; height: auto; }
/* « NUMÉRIQUE » à droite du logo, séparé par un filet vertical (disposition de la bannière LinkedIn, charte page 16). */
.brand-service { color: var(--citron); font-weight: var(--graisse-exergue); text-transform: uppercase; letter-spacing: .3em; font-size: .95rem; border-left: 1px solid var(--glacier); padding-left: 1rem; line-height: 2.2; }
.brand:hover .brand-service { text-decoration: underline; text-underline-offset: 4px; }
.topnav { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.topbar .link, .topbar .link-button { color: var(--entete-texte); }
.topbar .link:hover, .topbar .link-button:hover { color: var(--blanc); }
.link, .link-button { color: var(--lien); background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; min-height: var(--cible); padding: 0 .25rem; }
.link { display: inline-flex; align-items: center; }

/* Bandeau d'administration : Sarcelle, texte Glacier (combinaison « optionnelle », charte page 12). */
.admin-band { background: var(--admin-fond); color: var(--admin-texte); padding: .5rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; font-weight: var(--graisse-titre); letter-spacing: var(--interlettrage-titre); text-transform: uppercase; font-size: .9rem; }

/* Pied de page */
.site-footer { padding: 1.5rem 1rem 2rem; font-size: .9rem; text-align: center; border-top: 1px solid var(--filet); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible); padding: 0 1.1rem; border-radius: var(--rayon); border: 1px solid var(--sarcelle); background: var(--blanc); color: var(--sarcelle); font: inherit; font-weight: var(--graisse-exergue); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--glacier); color: var(--pinede); }
/* Bouton principal : fond Citron, texte Pinède (7,9:1). */
.btn-primary { background: var(--citron); border-color: var(--citron); color: var(--pinede); }
.btn-primary:hover { background: var(--pinede); border-color: var(--pinede); color: var(--citron); }
/* Bouton secondaire plein : fond Sarcelle, texte blanc (5,7:1). Un seul bouton Citron par écran : les autres actions sont secondaires. */
.btn-secondary, .btn-admin { background: var(--sarcelle); border-color: var(--sarcelle); color: var(--blanc); }
.btn-secondary:hover, .btn-admin:hover { background: var(--glacier); border-color: var(--glacier); color: var(--pinede); }
/* Sur le bandeau Sarcelle. */
.btn-ghost { background: transparent; color: var(--admin-texte); border-color: var(--admin-texte); }
.btn-ghost:hover { background: var(--glacier); color: var(--pinede); }
.btn-danger { background: var(--erreur); border-color: var(--erreur); color: var(--blanc); }
.btn-danger:hover { background: var(--blanc); color: var(--erreur); }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Cartes et mise en page ---------- */
.card { background: var(--fond-carte); border: 0; border-radius: var(--rayon); padding: 1.25rem; margin: 0 0 1rem; }
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.card-maintenance { border-left: 8px solid var(--alerte); }

/* ---------- Formulaires ---------- */
form div { margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .3rem; }
label { font-weight: var(--graisse-exergue); font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], input[type=number], input[type=search], input[type=url], input[type=file], select, textarea {
  font: inherit; font-weight: 400; padding: .6rem .75rem; border: 1px solid var(--contour-saisie); border-radius: var(--rayon); min-height: var(--cible); background: var(--fond-saisie); color: var(--texte);
}
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--sarcelle); }
.errorlist { color: var(--erreur); margin: 0; padding-left: 1.1rem; font-size: .92rem; font-weight: var(--graisse-exergue); }
.helptext { color: var(--texte-secondaire); font-size: .88rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: var(--graisse-exergue); font-size: .95rem; padding: 0; margin-bottom: .25rem; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.filters label { display: flex; flex-direction: column; gap: .25rem; }


/* ---------- Messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.msg { padding: .75rem 1rem; border-radius: var(--rayon); margin-bottom: .5rem; background: var(--glacier); border-left: 4px solid var(--sarcelle); }
.msg-success { border-left-color: var(--succes); }
.msg-error { background: var(--erreur-fond); border-left: 8px solid var(--alerte); font-weight: var(--graisse-exergue); }
.msg-warning { background: var(--alerte-fond); border-left: 8px solid var(--alerte); }
.notice { background: var(--glacier); padding: .75rem 1rem; border-radius: var(--rayon); border-left: 4px solid var(--sarcelle); }
.alert-box { background: var(--alerte-fond); border-left: 8px solid var(--alerte); border-radius: var(--rayon); padding: 1rem; margin-bottom: 1rem; color: var(--texte); }

/* ---------- Accueil : tuiles ---------- */
.greeting { font-size: 1.35rem; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; min-height: 96px; padding: 1rem; background: var(--fond-carte); border-radius: var(--rayon); text-decoration: none; color: var(--texte); font-weight: var(--graisse-titre); letter-spacing: var(--interlettrage-titre); }
.tile:hover { color: var(--texte); outline: 2px solid var(--sarcelle); outline-offset: -2px; }
/* Action principale de l'écran : le seul Citron de la page. */
.tile-main { grid-column: 1 / -1; background: var(--citron); color: var(--pinede); }
.tile-main:hover { color: var(--pinede); outline-color: var(--pinede); }
.tile-disabled { background: var(--blanc); border: 1px dashed var(--sarcelle); }
.tile-note { font-weight: var(--graisse-texte); font-size: .85rem; letter-spacing: 0; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Administration ---------- */
/* Panneau de navigation latéral (occupants et administration) */
.side-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.side-nav { display: flex; flex-direction: column; gap: .25rem; }
.side-nav-large { flex: 0 0 220px; }
.side-nav a { padding: .65rem .75rem; border-radius: var(--rayon); text-decoration: none; color: var(--texte); border-left: 4px solid transparent; }
.side-nav a:hover { background: var(--glacier); }
/* Élément actif : fond Pinède, filet Citron. */
.side-nav a[aria-current=page] { background: var(--pinede); color: var(--glacier); font-weight: var(--graisse-exergue); border-left-color: var(--citron); }
.side-nav a[aria-current=page]:focus-visible { outline-color: var(--citron); }
.side-main { flex: 1 1 560px; min-width: 0; }
.side-menu { display: none; flex: 1 1 100%; }
.side-menu summary { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 1rem; border: 1px solid var(--sarcelle); border-radius: var(--rayon); color: var(--sarcelle); font-weight: var(--graisse-exergue); cursor: pointer; list-style: none; }
.side-menu summary::-webkit-details-marker { display: none; }
.side-menu summary::before { content: "☰"; margin-right: .5rem; }
.side-menu[open] summary { background: var(--glacier); color: var(--pinede); }
.side-menu .side-nav { margin-top: .5rem; }
/* Liens de retour en haut des écrans de détail (registre → dossier, dossier → liste…) : visibles partout,
   pour revenir d'un clic sans repasser par le menu (demande du 31/10/2026). */
.back-link { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; color: var(--sarcelle); font-weight: var(--graisse-exergue); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
/* Sur téléphone, comme dans l'application Services : le menu complet au-dessus du contenu (pas de bouton replié). */
@media (max-width: 860px) {
  .side-nav-large { flex: 1 1 100%; }
  .side-nav-large a { padding: .8rem .9rem; font-size: 1.05rem; }
  .side-menu { display: none; }
  .side-layout { gap: 1rem; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--fond-carte); border-radius: var(--rayon); padding: 1rem; display: flex; flex-direction: column; }
.stat-value { font-size: 1.8rem; font-weight: var(--graisse-titre); letter-spacing: var(--interlettrage-titre); }
.stat-link { text-decoration: none; color: var(--texte); border-left: 4px solid var(--sarcelle); }
.stat-link:hover { color: var(--texte); outline: 2px solid var(--sarcelle); outline-offset: -2px; }

/* ---------- Tableaux, listes, fiches ---------- */
.table-wrap { overflow-x: auto; background: var(--blanc); border: 1px solid var(--glacier); border-radius: var(--rayon); margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: .7rem 1rem; border-top: 1px solid var(--filet); vertical-align: top; }
thead th { border-top: 0; background: var(--glacier); font-weight: var(--graisse-exergue); font-size: .88rem; }
.card .table-wrap { border-color: var(--blanc); }

.list { list-style: none; padding: 0; margin: 0 0 1rem; }
.list-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--filet); }
.card .list-row { border-top-color: var(--filet-sur-carte); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.facts dt { font-weight: var(--graisse-exergue); } .facts dd { margin: 0; }
.terms li { margin-bottom: .4rem; }
.qr { width: 220px; height: 220px; background: var(--blanc); padding: 8px; border: 1px solid var(--sarcelle); }

/* ---------- Règlement et notice d'information ---------- */
.legal { background: var(--blanc); border: 1px solid var(--glacier); }
.legal h2 { margin-top: 2rem; padding-top: 1rem; border-top: 3px solid var(--citron); }
.legal h3 { margin-top: 1.5rem; color: var(--sarcelle); }
.legal table { min-width: 0; }
.legal th, .legal td { padding: .45rem .6rem; }
.legal form { margin-top: 2rem; }

/* ---------- Pages d'accès (connexion, code, activation) : fond Pinède, carte blanche (maquettes 1 à 3 et 7) ---------- */
.mode-acces { background: var(--pinede); }
.mode-acces .topbar { border-bottom-color: var(--pinede); }
.mode-acces .card { background: var(--blanc); padding: 2rem 1.75rem; }
.mode-acces .site-footer { border-top-color: var(--pinede); color: var(--glacier); }
.mode-acces .site-footer a { color: var(--glacier); }
.mode-acces .access-note { color: var(--glacier); text-align: center; max-width: 460px; margin: 1rem auto 0; font-size: .9rem; }
.portal-tag { display: block; color: var(--sarcelle); font-size: .78rem; font-weight: var(--graisse-titre); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .25rem; }
.code-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; }
.link-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .92rem; }

/* ---------- Pages des portails : fond Glacier, cartes blanches (maquettes 4 à 11) ---------- */
.mode-app { background: var(--glacier); }
.mode-app .card, .mode-app .tile { background: var(--blanc); }
.mode-app .tile-main { background: var(--citron); }
.mode-app .site-footer { border-top-color: var(--blanc); }
.dossier-ref { color: var(--sarcelle); font-size: .78rem; font-weight: var(--graisse-titre); letter-spacing: .08em; text-transform: uppercase; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 1em; background: var(--pinede); color: var(--blanc); font-size: .78rem; font-weight: var(--graisse-exergue); letter-spacing: 0; }
.status { display: inline-block; padding: .1rem .6rem; border-radius: 1em; font-size: .85rem; background: var(--glacier); }
.status-invitation { background: var(--blanc); border: 1px solid var(--sarcelle); color: var(--sarcelle); }
.status-suspendu, .status-cloture { background: var(--pinede); color: var(--blanc); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .2rem .7rem; border-radius: 1em; background: var(--glacier); font-size: .85rem; }
.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.param-grid input[type=number] { max-width: 7rem; }
.unit-row { display: flex; align-items: center; gap: .5rem; font-weight: var(--graisse-texte); }
.recovery-codes { columns: 2; font-family: ui-monospace, monospace; font-size: 1.1rem; list-style: none; padding: 0; }
.recovery-codes li { padding: .25rem 0; }
.danger-zone { border-left: 8px solid var(--alerte); }
.checklist ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.checklist label { font-weight: var(--graisse-texte); display: flex; gap: .6rem; align-items: center; min-height: 40px; padding: .25rem .75rem; border: 1px solid var(--sarcelle); border-radius: var(--rayon); background: var(--blanc); }
.radio-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.radio-list label { font-weight: var(--graisse-texte); display: flex; gap: .6rem; align-items: center; }
.admin-band .btn { text-transform: none; letter-spacing: 0; }
/* Bandeau d'administration aligné sur la largeur du contenu. */
.admin-band { padding-left: max(1rem, calc((100% - 1100px) / 2 + 1rem)); padding-right: max(1rem, calc((100% - 1100px) / 2 + 1rem)); }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.page-head h1 { margin-bottom: .25rem; }
.pagination { display: flex; gap: 1rem; align-items: center; }

/* ---------- Module 1 — Échange de pièces (maquettes P1 à P6, L1 à L3) ---------- */
.side-title { font-size: .75rem; font-weight: var(--graisse-exergue); letter-spacing: .1em; text-transform: uppercase; color: var(--sarcelle); padding: .9rem .75rem .3rem; border-top: 1px solid var(--glacier); margin-top: .3rem; }
.side-menu .side-title { border-top-color: var(--blanc); }
.badge-alerte { background: var(--citron); color: var(--pinede); }
.badge-fonce { background: var(--pinede); color: var(--citron); }
.badge-neutre { background: var(--blanc); color: var(--pinede); border: 1px solid var(--pinede); }
.row-new td { font-weight: var(--graisse-exergue); }
.nowrap { white-space: nowrap; }
.dropzone { border: 2px dashed var(--sarcelle); border-radius: var(--rayon); padding: 1.25rem; text-align: center; background: var(--blanc); margin: .75rem 0; }
.dropzone p { margin: .4rem 0; }
.dropzone-active { border-color: var(--pinede); background: var(--glacier); outline: 4px solid var(--citron); }
.upload-list:empty { display: none; }
.upload-list { background: var(--blanc); border-radius: var(--rayon); padding: 0 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.check label { display: inline-flex; gap: .5rem; align-items: center; }
.check input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--sarcelle); }
.lien-url { flex: 1 1 320px; min-width: 0; font-family: inherit; }
.dl { display: block; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lien-carte { background: var(--blanc); border: 1px solid var(--glacier); border-left: 8px solid var(--pinede); }
.lien-attention { border-left-color: var(--citron); }
.public-envoi { max-width: 760px; margin: 0 auto; border-top: 8px solid var(--citron); }
.tout-telecharger { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; background: var(--glacier); border-radius: var(--rayon); padding: 1rem; margin: 1rem 0; }
.tout-telecharger .btn { min-height: 3.2rem; font-size: 1.05rem; }
.upload label[for=message], .upload textarea, #id_message { display: block; width: 100%; box-sizing: border-box; }
.dropzone .btn { display: inline-flex; width: auto; }

/* ---------- Module 2 — Annuaire des juridictions ---------- */
.annuaire-filtres { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0 1rem; align-items: end; }
@media (max-width: 720px) { .annuaire-filtres { grid-template-columns: 1fr; } }
.service-carte { background: var(--blanc); border: 1px solid var(--glacier); }
.service-tete { border-top: 0; padding-top: 0; }
.coordonnees .list-row { padding: .5rem 0; }
.coord { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.coord-nature { font-size: .78rem; font-weight: var(--graisse-exergue); text-transform: uppercase; letter-spacing: .05em; color: var(--sarcelle); min-width: 5.5rem; }
.coord-actions { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.archivee { opacity: .6; }
.ajout summary { cursor: pointer; font-weight: var(--graisse-exergue); color: var(--sarcelle); padding: .4rem 0; }
.fiche-actions { align-items: center; }
.chip-actif { background: var(--pinede); color: var(--glacier); }
.version .facts { margin-bottom: .5rem; }
.annuaire-filtres input, .annuaire-filtres select { width: 100%; box-sizing: border-box; }
.coord-actions .badge { font-size: .72rem; }
.coordonnees .link, .coordonnees .link-button { font-size: .88rem; }
.narrow-form > p > label:not(:has(input[type=checkbox])) { display: block; margin-bottom: .3rem; }
.narrow-form input[type=text], .narrow-form input[type=email], .narrow-form select, .narrow-form textarea { width: 100%; max-width: 560px; box-sizing: border-box; }
.ajout label { display: block; }
.ajout .check label { display: inline-flex; }
.ajout input[type=text], .ajout select, .ajout textarea { width: 100%; box-sizing: border-box; }
.greffe-partage { border-left: 4px solid var(--sarcelle, #1c7363); padding-left: .75rem; margin: .5rem 0; }
.greffe-commun { border-left: 4px solid var(--sarcelle, #1c7363); padding-left: .75rem; }

/* Administration de l'annuaire : étapes numérotées et blocs repliables */
.card h2 + p + h3, .card form + h3 { margin-top: 1.5rem; }
details.card > summary, .card details > summary { cursor: pointer; min-height: var(--cible); display: flex; align-items: center; }

/* Fiche de l'annuaire allégée (31/10/2026) : seule l'alerte « à vérifier » est visible ; dates, source et
   actions secondaires dans un volet « ⋯ » ou « Détails ». */
.a-verifier { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .25em; background: var(--citron); color: var(--pinede); border-radius: var(--rayon); font-size: .85rem; line-height: 1; cursor: help; }
h1 .a-verifier { font-size: .55em; vertical-align: middle; letter-spacing: 0; }
.legende { margin-top: -.5rem; }
.coordonnees .list-row { flex-wrap: wrap; }
.plus > summary { list-style: none; cursor: pointer; color: var(--sarcelle); font-weight: var(--graisse-exergue); min-width: var(--cible); min-height: var(--cible); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rayon); }
.plus > summary::-webkit-details-marker { display: none; }
.plus > summary:hover, .plus[open] > summary { background: var(--glacier); }
.coordonnees .plus { margin-left: auto; }
.plus[open] { flex: 1 1 100%; display: flex; flex-direction: column; }
.coordonnees .plus[open] > summary { align-self: flex-end; }
.plus-large[open] > summary { align-self: flex-start; }
.plus-contenu { padding: .5rem .75rem; border-left: 3px solid var(--glacier); margin: .25rem 0 .5rem; }
.plus-contenu .actions { margin: .25rem 0; }
.plus-large > summary { justify-content: flex-start; padding: 0 .5rem; font-size: .92rem; }

/* Retour au menu du portail (pages des modules) : bouton secondaire au contour Sarcelle, chevron dessiné en CSS
   (aucune flèche typographique), même hauteur et mêmes coins que les autres entrées du menu. */
.side-nav a.side-retour { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; border: 1px solid var(--sarcelle); border-left-width: 1px; background: var(--blanc); color: var(--sarcelle); font-weight: var(--graisse-exergue); }
.side-nav a.side-retour::before { content: ""; width: .45rem; height: .45rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: .2rem; }
.side-nav a.side-retour:hover { background: var(--glacier); color: var(--pinede); }
.back-link::before { content: ""; width: .45rem; height: .45rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }