/* Système de design Solingobou : composants (copie de bundle.css du système de design, version 3).
   Charger après tokens.css. Racine : class="sg" (site public) ou class="sg admin" (back-office).
   La typographie vient des classes de style de tokens.css ; ce fichier fixe la mise en page,
   les couleurs, les bordures et les états. */

body { margin: 0; }

/* ---------- Base ---------- */
.sg { font-family: var(--font-sans); color: var(--texte); background: var(--fond); }
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg :focus-visible { outline: var(--anneau-focus) solid var(--focus); outline-offset: var(--anneau-focus); }
.sg a { color: var(--lien); text-underline-offset: 3px; }
.sg a:hover { color: var(--lien-survol); }
.sg :is(h1, h2, h3, h4) { margin: 0; color: var(--encre); text-wrap: balance; }
.sg strong { color: var(--encre); }
.sg.admin { background: var(--fond-admin); }
.sg .conteneur { max-width: var(--conteneur); margin: 0 auto; padding-left: var(--espace-8); padding-right: var(--espace-8); }
.sg .mesure { max-width: 34em; }
.sg .chiffres { font-variant-numeric: tabular-nums; }
.sg .visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sg .icone { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Titres ---------- */
.sg :is(.affiche, .titre-1, .titre-2, .titre-3, .titre-4, .marque) { color: var(--encre); margin: 0; }
.sg .rouge-ecusson { color: var(--rouge); }

/* ---------- Boutons ---------- */
.sg .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--hauteur-bouton); padding: 0 24px; border: var(--filet-fort) solid transparent; border-radius: var(--rayon); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; max-width: 100%; cursor: pointer; }
/* Téléphone : un intitulé long passe à la ligne dans le bouton plutôt que de sortir de l'écran. */
@media (max-width: 520px) { .sg .btn { white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; } }
.sg .btn-rouge { background: var(--rouge); color: var(--texte-inverse); }
.sg .btn-rouge:hover { background: var(--rouge-survol); color: var(--texte-inverse); }
.sg .btn-contour { background: var(--fond); color: var(--encre); border-color: var(--encre); }
.sg .btn-contour:hover { background: var(--encre); color: var(--texte-inverse); }
.sg .btn-noir { background: var(--encre); color: var(--texte-inverse); }
.sg .btn-noir:hover { background: var(--texte); color: var(--texte-inverse); }
.sg .btn-vert { background: var(--vert); color: var(--texte-inverse); }
.sg .btn-vert:hover { background: var(--vert-fonce); color: var(--texte-inverse); }
.sg .btn-danger { background: var(--fond); color: var(--erreur-texte); border-color: var(--erreur-texte); }
.sg .btn-danger:hover { background: var(--erreur-texte); color: var(--texte-inverse); }
.sg .btn-leger { background: var(--fond); color: var(--encre); border-width: var(--filet); border-color: var(--bordure-champ); }
.sg .btn-leger:hover { border-color: var(--encre); color: var(--encre); }
.sg .btn-petit, .sg.admin .btn { min-height: var(--cible-tactile); padding: 0 16px; gap: 8px; font-size: 15px; }
.sg .btn-icone { width: var(--cible-tactile); min-height: var(--cible-tactile); padding: 0; background: var(--fond); color: var(--encre); border-width: var(--filet); border-color: var(--bordure-champ); }
.sg .btn-icone:hover { border-color: var(--encre); }
.sg .btn-nu { width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--rayon); background: transparent; color: var(--encre); display: inline-grid; place-items: center; cursor: pointer; }
.sg .btn-bloc { width: 100%; }
.sg .btn:disabled, .sg .btn[aria-disabled="true"] { background: var(--bordure-forte); border-color: var(--bordure-forte); color: var(--texte-doux); cursor: not-allowed; }
.sg .btn-whatsapp { width: var(--cible-tactile); height: var(--cible-tactile); flex: 0 0 auto; border-radius: var(--rayon-rond); background: var(--vert); color: var(--texte-inverse); display: inline-grid; place-items: center; }
.sg .btn-whatsapp:hover { background: var(--vert-fonce); color: var(--texte-inverse); }

/* ---------- Liens ---------- */
.sg .lien-fort { color: var(--encre); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--filet-fort); text-underline-offset: 5px; }
.sg .lien-fort:hover { color: var(--lien); }
.sg .lien-danger { color: var(--erreur-texte); font-weight: 600; }
.sg .lien-danger:hover { color: var(--encre); }
.sg .nav-lien { display: inline-block; padding: 12px 0; color: var(--encre); font-size: 15px; font-weight: 500; text-decoration: none; }
.sg .nav-lien:hover, .sg .nav-lien[aria-current="page"] { color: var(--lien); text-decoration: underline; text-underline-offset: 6px; }
.sg .nav-lien[aria-current="page"] { text-decoration-thickness: var(--filet-fort); }
.sg .fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; color: var(--texte-aide); }
.sg .fil-ariane a { color: var(--texte-aide); }
.sg .fil-ariane a:hover { color: var(--encre); }

/* ---------- Champs ---------- */
.sg .champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg .champ > label, .sg .champ > .libelle { color: var(--encre); }
.sg .champ :is(input, select, textarea) { width: 100%; min-height: var(--hauteur-champ); padding: 0 14px; border: var(--filet) solid var(--bordure-champ); border-radius: var(--rayon); background: var(--fond); color: var(--encre); font-family: inherit; font-size: 16px; }
.sg .champ textarea { min-height: 96px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.sg .champ :is(input, select, textarea):hover { border-color: var(--encre); }
.sg .champ ::placeholder { color: var(--texte-aide); opacity: 1; }
.sg .aide { margin: 0; color: var(--texte-aide); }
.sg .champ-erreur :is(input, select, textarea) { border-color: var(--erreur-texte); box-shadow: inset 0 0 0 1px var(--erreur-texte); }
.sg .message-erreur { margin: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--erreur-texte); font-weight: 600; }
.sg .groupe-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }

/* ---------- Choix ---------- */
.sg .choix { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg .choix > legend { padding: 0; margin-bottom: 6px; color: var(--encre); }
.sg .options { display: flex; flex-wrap: wrap; gap: 10px; }
.sg .option { flex: 1 1 0; min-height: var(--hauteur-champ); padding: 0 14px; display: flex; align-items: center; gap: 10px; border: var(--filet) solid var(--bordure-champ); border-radius: var(--rayon); color: var(--encre); font-size: 16px; cursor: pointer; }
.sg .option:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.sg .option input { width: 20px; height: 20px; margin: 0; accent-color: var(--rouge); }
.sg .case { display: flex; align-items: flex-start; gap: 12px; color: var(--encre); cursor: pointer; }
.sg .case input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 22px; accent-color: var(--rouge); }
.sg .precision { margin-left: 34px; padding-left: 12px; border-left: var(--filet-fort) solid var(--bordure-carte); }
.sg .precision summary { min-height: var(--cible-tactile); display: flex; align-items: center; color: var(--encre); font-weight: 600; cursor: pointer; }

/* ---------- Étapes ---------- */
.sg .etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sg .etapes li { display: flex; flex-direction: column; gap: 6px; color: var(--texte-aide); }
.sg .etapes li::before { content: ""; height: 6px; border-radius: var(--rayon-pastille); background: var(--bordure-carte); }
.sg .etapes li.faite { color: var(--texte-doux); }
.sg .etapes li.faite::before { background: var(--encre); }
.sg .etapes li[aria-current="step"] { color: var(--encre); font-weight: 700; }
.sg .etapes li[aria-current="step"]::before { background: var(--rouge); }

/* ---------- Pièces jointes ---------- */
.sg .piece { padding: 14px; display: flex; flex-direction: column; gap: 10px; border: var(--filet) solid var(--bordure-carte); border-radius: var(--rayon-carte); background: var(--fond); }
.sg .piece-nom { color: var(--encre); font-weight: 600; }
.sg .piece-ajoutee { padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: var(--rayon); background: var(--fond-doux); }
.sg .piece-ajoutee .icone { color: var(--vert); }
.sg .piece-fichier { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; color: var(--encre); overflow-wrap: anywhere; }

/* ---------- Étiquettes ---------- */
.sg .pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--rayon-pastille); background: var(--neutre-fond); color: var(--neutre-texte); white-space: nowrap; }
.sg .pastille.succes { background: var(--succes-fond); color: var(--succes-texte); }
.sg .pastille.attente { background: var(--attente-fond); color: var(--attente-texte); }
.sg .pastille.erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.sg .compteur { min-width: 24px; height: 22px; padding: 0 7px; margin-left: auto; display: inline-grid; place-items: center; border-radius: var(--rayon-pastille); background: var(--rouge); color: var(--texte-inverse); font-weight: 700; }

/* ---------- Encadrés ---------- */
.sg .encadre { margin: 0; padding: 12px 14px; border-radius: var(--rayon); background: var(--fond-doux); color: var(--encre); }
.sg .encadre.attente { background: var(--attente-fond); color: var(--attente-texte); }
.sg .encadre.erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.sg .confirmation { width: 64px; height: 64px; display: grid; place-items: center; border: 3px solid var(--vert); border-radius: var(--rayon-rond); color: var(--vert); }

/* ---------- Créneaux, jours, durées ---------- */
.sg .jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sg .jour { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: var(--filet) solid var(--bordure-champ); border-radius: var(--rayon); background: var(--fond); color: var(--encre); font-family: inherit; cursor: pointer; }
.sg .jour:hover { border-color: var(--encre); }
.sg .jour[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--texte-inverse); }
.sg .jour[aria-pressed="true"] .titre-4 { color: var(--texte-inverse); }
.sg .creneaux { display: grid; grid-template-columns: 52px repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
.sg .creneaux-heure { color: var(--texte-doux); font-weight: 600; }
.sg .creneau { width: 100%; min-height: var(--cible-tactile); padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: var(--filet) solid var(--bordure-champ); border-radius: var(--rayon); background: var(--fond); color: var(--encre); font-family: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.sg .creneau:not(:disabled):hover { border-color: var(--encre); }
.sg .creneau .statut { font-size: 13px; font-weight: 500; }
.sg .creneau.reserve { background: repeating-linear-gradient(135deg, var(--bordure) 0 4px, var(--fond-doux) 4px 8px); border-color: var(--bordure-forte); color: var(--texte-doux); cursor: not-allowed; }
.sg .creneau.academie { background: var(--texte); border-color: var(--texte); color: var(--texte-inverse); cursor: not-allowed; }
.sg .creneau[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: var(--texte-inverse); }
.sg .creneau.conflit { outline: var(--filet-fort) solid var(--rouge); outline-offset: -2px; }
.sg .creneau.compact { justify-content: center; padding: 0; }
.sg .creneau.compact.reserve { text-decoration: line-through; font-weight: 500; }
.sg .tranche { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; color: var(--texte-doux); }
.sg .tranche::before, .sg .tranche::after { content: ""; flex: 1; height: var(--filet); background: var(--bordure-champ); }
.sg .durees { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sg .duree { flex: 0 0 auto; min-height: var(--cible-tactile); padding: 0 14px; border: var(--filet) solid var(--bordure-champ); border-radius: var(--rayon-pastille); background: var(--fond); color: var(--encre); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sg .duree[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--texte-inverse); }
.sg .legende-temoins { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sg .legende-temoins li { display: flex; align-items: center; gap: 8px; }
.sg .temoin { width: 18px; height: 18px; flex: 0 0 auto; border-radius: var(--rayon-petit); border: var(--filet) solid var(--bordure-champ); background: var(--fond); }
.sg .temoin.reserve { background: repeating-linear-gradient(135deg, var(--bordure) 0 4px, var(--fond-doux) 4px 8px); border-color: var(--bordure-forte); }
.sg .temoin.academie { background: var(--texte); border-color: var(--texte); }
.sg .temoin.choix { background: var(--rouge); border-color: var(--rouge); }

/* ---------- Récapitulatif ---------- */
.sg .recap { padding: var(--espace-6); display: flex; flex-direction: column; gap: 14px; border: var(--filet-fort) solid var(--encre); border-radius: var(--rayon-carte); background: var(--fond); }
.sg .recap-lignes { margin: 0; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; border-top: var(--filet) solid var(--bordure); }
.sg .recap-lignes > div { display: flex; justify-content: space-between; gap: 12px; }
.sg .recap-lignes dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg .recap-total { padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: var(--filet-fort) solid var(--encre); color: var(--encre); font-weight: 700; }
.sg .recap-total .titre-3, .sg .recap-total .titre-4 { white-space: nowrap; }
.sg .barre-recap { position: sticky; bottom: 0; padding: 14px 16px 22px; display: flex; flex-direction: column; gap: 10px; border-top: var(--filet-fort) solid var(--encre); background: var(--fond); }
.sg .barre-recap-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }

/* ---------- En-têtes ---------- */
.sg .entete { border-bottom: var(--filet) solid var(--bordure); background: var(--fond); }
.sg .entete-contenu { max-width: var(--conteneur); margin: 0 auto; padding: 16px var(--espace-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.sg .logo { display: flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; }
.sg .logo:hover { color: var(--encre); }
.sg .logo-texte { display: flex; flex-direction: column; gap: 2px; }
.sg .logo-sous-titre { color: var(--texte-aide); }
.sg .nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sg .entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg .entete-mobile { height: 68px; padding: 0 12px 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: var(--filet) solid var(--bordure); background: var(--fond); }
.sg .entete-parcours { height: 64px; padding: 0 16px 0 8px; display: flex; align-items: center; gap: 4px; border-bottom: var(--filet) solid var(--bordure); background: var(--fond); }
.sg .entete-parcours-titre { flex: 1; color: var(--encre); font-weight: 700; }
.sg .entete-parcours-etape { color: var(--texte-aide); }

/* ---------- Barre d’actions sur téléphone ---------- */
.sg .barre-mobile { position: sticky; bottom: 0; padding: 12px 16px 22px; display: flex; align-items: center; gap: 10px; border-top: var(--filet) solid var(--bordure-carte); background: var(--fond); }
.sg .barre-mobile .btn { flex: 1 1 0; padding: 0 16px; }
.sg .barre-mobile .btn-whatsapp { width: var(--hauteur-bouton); height: var(--hauteur-bouton); }

/* ---------- Pied de page ---------- */
.sg .pied { border-top: var(--filet-fort) solid var(--encre); background: var(--fond); }
.sg .pied-colonnes { max-width: var(--conteneur); margin: 0 auto; padding: 56px var(--espace-8) var(--espace-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--espace-10); }
.sg .pied-colonne { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sg .pied-colonne p { margin: 0; }
.sg .pied-colonne > a:not(.lien-fort) { color: var(--texte); }
.sg .pied-colonne > a:not(.lien-fort):hover { color: var(--lien); }
.sg .pied-bas { max-width: var(--conteneur); margin: 0 auto; padding: 20px var(--espace-8) var(--espace-10); color: var(--texte-aide); }

/* ---------- Frise des repères ---------- */
.sg .reperes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-6); border-top: var(--filet-fort) solid var(--encre); }
.sg .reperes li { position: relative; padding-top: 22px; }
.sg .reperes li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: var(--rayon-rond); background: var(--encre); }
.sg .reperes li.recent::before { background: var(--rouge); }
.sg .reperes li.recent .titre-3 { color: var(--rouge); }
.sg .reperes .titre-3 { display: block; line-height: 1; }
.sg .reperes .fait { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }

/* ---------- Cartes ---------- */
.sg .carte { padding: var(--espace-12); display: flex; flex-direction: column; gap: var(--espace-7); border-radius: var(--rayon-carte); background: var(--fond-doux); }
.sg .carte p { margin: 0; }
.sg .carte-pied { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.sg .carte-noire { background: var(--encre); color: var(--texte-inverse-doux); }
.sg .carte-noire :is(h2, h3, .titre-1, .titre-2, .titre-3, .titre-4, strong) { color: var(--texte-inverse); }
.sg .carte-noire .aide, .sg .carte-noire dt { color: var(--texte-inverse-aide); }
.sg .carte-bordee { padding: var(--espace-7); gap: 12px; border: var(--filet) solid var(--bordure-carte); background: var(--fond); }
.sg .carte-cadre { padding: 16px; gap: 6px; border: var(--filet-fort) solid var(--encre); background: var(--fond); }
.sg .carte-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sg .categories { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.sg .categories li { display: flex; flex-direction: column; }
.sg .categories .aide { color: var(--texte-aide); }

/* ---------- Actualités ---------- */
.sg .articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--espace-8); }
.sg .article-carte { display: flex; flex-direction: column; gap: 14px; }
.sg .article-carte p { margin: 0; }
.sg .article-image { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon); background: var(--fond-image); }
.sg .article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg .article-meta { color: var(--texte-aide); }
.sg .article-carte h3 a { color: inherit; text-decoration: none; }
.sg .article-carte h3 a:hover { text-decoration: underline; text-decoration-thickness: var(--filet-fort); }

/* ---------- Emplacements des maquettes ---------- */
.sg .a-fournir { display: grid; place-items: center; padding: 16px; border-radius: var(--rayon); background: var(--fond-image); color: var(--texte-aide); text-align: center; }
.sg .a-fournir.terrain { background: var(--vert); color: var(--texte-inverse); }
.sg .a-fournir-logo { display: grid; place-items: center; padding: 8px; border: var(--filet-fort) dashed var(--bordure-a-fournir); border-radius: var(--rayon); color: var(--texte-aide); text-align: center; }
.sg .a-fournir-logo.rond { width: 48px; height: 48px; padding: 0; border-radius: var(--rayon-rond); font-size: 11px; }
.sg .a-valider { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--rayon-pastille); background: var(--attente-fond); color: var(--attente-texte); white-space: nowrap; }
.sg .texte-a-fournir { color: var(--texte-aide); }

/* ---------- Back-office : menu ---------- */
.sg .menu-admin { width: 264px; padding: 20px 14px; display: flex; flex-direction: column; gap: 20px; background: var(--encre); color: var(--texte-inverse); }
.sg .menu-admin-titre { padding: 0 8px; display: flex; flex-direction: column; line-height: 1.1; }
.sg .menu-admin-titre .marque { color: var(--texte-inverse); }
.sg .menu-admin-titre .note, .sg .menu-admin-compte .note { color: var(--texte-inverse-aide); }
.sg .menu-admin ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sg .menu-lien { min-height: var(--cible-tactile); padding: 0 12px; display: flex; align-items: center; gap: 12px; border-radius: var(--rayon); color: var(--texte-inverse-doux); font-size: 15px; text-decoration: none; }
.sg .menu-lien:hover { background: var(--texte); color: var(--texte-inverse); }
.sg .menu-lien[aria-current="page"] { background: var(--fond); color: var(--encre); font-weight: 700; }
.sg .menu-admin-compte { margin-top: auto; padding: 16px 8px 0; display: flex; flex-direction: column; gap: 2px; border-top: var(--filet) solid var(--texte-doux); }
.sg .menu-admin-compte a { margin-top: 8px; color: var(--texte-inverse); }
.sg .entete-admin { height: 60px; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; background: var(--encre); color: var(--texte-inverse); }
.sg .initiales { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--rayon-rond); background: var(--fond); color: var(--encre); font-size: 14px; font-weight: 700; }
.sg .nav-bas { position: sticky; bottom: 0; height: 76px; padding: 4px 6px 14px; display: flex; border-top: var(--filet) solid var(--bordure-carte); background: var(--fond); }
.sg .nav-bas a { flex: 1 1 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--texte-doux); text-decoration: none; }
.sg .nav-bas a[aria-current="page"] { color: var(--rouge); }

/* ---------- Back-office : panneaux ---------- */
.sg .panneau { min-width: 0; padding: var(--espace-5); display: flex; flex-direction: column; gap: 12px; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-carte); background: var(--fond); }
.sg .panneau-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sg .panneau p { margin: 0; }
.sg .ligne { padding: 12px 0; display: flex; align-items: center; gap: 12px; border-top: var(--filet) solid var(--neutre-fond); }
.sg .ligne-corps { flex: 1; min-width: 0; }
.sg .ligne-titre { color: var(--encre); font-weight: 700; }
.sg .meta { color: var(--texte-aide); }
.sg .indicateurs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.sg .indicateurs dd { margin: 0; }
.sg .barre-decision { padding: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-carte); background: var(--fond); }
.sg .separateur-vertical { width: var(--filet); height: 28px; margin: 0 4px; background: var(--bordure-carte); }

/* ---------- Back-office : fiche et fil ---------- */
.sg .fiche { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 24px; }
.sg .fiche dt { color: var(--texte-aide); }
.sg .fiche dd { margin: 2px 0 0; color: var(--encre); }
.sg .citation { margin: 0; padding: 12px 14px; border-radius: var(--rayon); background: var(--fond-admin); }
.sg .fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sg .fil li { display: flex; flex-direction: column; gap: 2px; }
.sg .fil .note-interne { padding: 12px; gap: 4px; border-radius: var(--rayon); background: var(--fond-admin); }
.sg .note-interne-entete { display: flex; align-items: center; gap: 6px; color: var(--texte-aide); }

/* ---------- Onglets ---------- */
.sg .onglets { display: flex; gap: 4px; border-bottom: var(--filet) solid var(--bordure); }
.sg .onglet { min-height: var(--cible-tactile); padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--texte-doux); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sg .onglet:hover { color: var(--encre); }
.sg .onglet[aria-selected="true"] { border-bottom-color: var(--encre); color: var(--encre); }
.sg .segments { padding: 4px; display: flex; gap: 4px; border-radius: var(--rayon-carte); background: var(--bordure); }
.sg .segment { flex: 1 1 0; min-height: var(--cible-tactile); border: 0; border-radius: var(--rayon); background: transparent; color: var(--texte-doux); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sg .segment[aria-pressed="true"] { background: var(--fond); color: var(--encre); box-shadow: var(--contour-onglet); }
.sg .bascule { display: inline-flex; overflow: hidden; border: var(--filet) solid var(--bordure-champ); border-radius: var(--rayon); }
.sg .bascule button { min-height: var(--cible-tactile); padding: 0 14px; border: 0; background: var(--fond); color: var(--encre); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sg .bascule button[aria-pressed="true"] { background: var(--encre); color: var(--texte-inverse); }

/* ---------- Planning ---------- */
.sg .planning { overflow: hidden; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-carte); background: var(--fond); }
.sg .planning-jours, .sg .planning-grille { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.sg .planning-jours { border-bottom: var(--filet) solid var(--bordure); text-align: center; }
.sg .planning-jours > span { padding: 10px 0; border-left: var(--filet) solid var(--bordure); }
.sg .planning-jours > span:first-child { border-left: 0; }
.sg .planning-jours .aujourdhui { background: var(--encre); color: var(--texte-inverse); }
.sg .planning-jours .aujourdhui strong { color: var(--texte-inverse); }
.sg .planning-heure { height: 44px; padding: 2px 8px 0 0; color: var(--texte-aide); text-align: right; }
.sg .planning-heure.nuit { color: var(--encre); font-weight: 700; }
.sg .planning-colonne { position: relative; height: 704px; border-left: var(--filet) solid var(--bordure); background-image: repeating-linear-gradient(to bottom, transparent 0 43px, var(--neutre-fond) 43px 44px); }
.sg .planning-nuit { position: absolute; left: 0; right: 0; background: var(--fond-doux); }
.sg .evenement { position: absolute; left: 4px; right: 4px; padding: 4px 6px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; border: 0; border-radius: var(--rayon); font-family: inherit; font-size: 13px; line-height: 1.25; text-align: left; }
.sg .evenement.confirme { background: var(--encre); color: var(--texte-inverse); }
.sg .evenement.confirme strong, .sg .evenement.academie strong { color: var(--texte-inverse); }
.sg .evenement.attente { background: var(--attente-fond); color: var(--attente-texte); border: var(--filet-fort) solid var(--attente-bordure); cursor: pointer; }
.sg .evenement.attente strong { color: var(--attente-texte); }
.sg .evenement.propose { background: var(--fond); color: var(--encre); border: var(--filet-fort) dashed var(--encre); }
.sg .evenement.academie { background: repeating-linear-gradient(135deg, var(--texte) 0 6px, var(--texte-doux) 6px 12px); color: var(--texte-inverse); }
.sg .evenement[aria-pressed="true"] { box-shadow: var(--anneau-selection); }
.sg .temoin.confirme { background: var(--encre); border-color: var(--encre); }
.sg .temoin.attente { background: var(--attente-fond); border: var(--filet-fort) solid var(--attente-bordure); }
.sg .temoin.propose { background: var(--fond); border: var(--filet-fort) dashed var(--encre); }
.sg .temoin.academie-planning { background: repeating-linear-gradient(135deg, var(--texte) 0 4px, var(--texte-doux) 4px 8px); border-color: var(--texte); }
.sg .temoin.nuit { background: var(--fond-doux); border-color: var(--bordure-carte); }

/* ---------- Boîte de dialogue ---------- */
.sg dialog::backdrop { background: var(--voile); opacity: 0.9; }
.sg .voile { padding: 32px 40px; background: var(--voile); }
.sg .dialogue { width: 100%; max-width: 680px; margin: 0 auto; padding: 28px; display: flex; flex-direction: column; gap: 18px; border: 0; border-radius: var(--rayon-dialogue); background: var(--fond); color: var(--texte); }
.sg .dialogue-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sg .dialogue-pied { padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: var(--filet) solid var(--bordure); }
.sg .dialogue-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sg .apercu-message { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: var(--filet) solid var(--bordure); border-radius: var(--rayon); background: var(--fond-admin); overflow-wrap: anywhere; }
.sg .apercu-message p { margin: 0; }

/* ---------- Tableau ---------- */
.sg .tableau-cadre { position: relative; overflow-x: auto; border: var(--filet) solid var(--bordure); border-radius: var(--rayon-carte); background: var(--fond); }
.sg .tableau { width: 100%; border-collapse: collapse; }
.sg .tableau th { padding: 12px 16px; border-bottom: var(--filet) solid var(--bordure); color: var(--texte-aide); text-align: left; white-space: nowrap; font-weight: 600; }
.sg .tableau td { padding: 12px 16px; border-top: var(--filet) solid var(--neutre-fond); color: var(--texte); vertical-align: middle; }
.sg .tableau tbody tr:first-child td { border-top: 0; }
.sg .tableau tbody tr:hover { background: var(--fond-admin); }
.sg .tableau .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg .tableau .tableau-titre { color: var(--encre); font-weight: 700; text-decoration: none; }
.sg .tableau .tableau-titre:hover { color: var(--lien); text-decoration: underline; }

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  .sg .corps { font-size: 16px; }
  .sg .conteneur, .sg .entete-contenu, .sg .pied-colonnes, .sg .pied-bas { padding-left: var(--espace-5); padding-right: var(--espace-5); }
  .sg .carte { padding: var(--espace-6); }
  .sg .jour { min-height: 56px; }
  .sg .reperes { gap: 12px; }
}