/* Feuille de l'outil. Charte reprise de snc-cremation.fr : voir le skill
   `snc-design` (.claude/skills/snc-design/SKILL.md) avant d'y toucher.
   RÈGLE : toute couleur, police et taille vient de :root ; aucune valeur en
   dur plus bas (tools/verifier.sh le mesure). */
:root {
    /* Couleurs du site SNC */
    --bleu: #396597;
    --bleu-fonce: #2c4f78;
    --bleu-2: #678bb8;
    --bleu-clair: #9bb7d3;
    --bleu-pale: #e9eff6;
    --mauve: #ac7aa6;
    --mauve-fonce: #7d5077;   /* le mauve en texte (5,4:1 sur --mauve-pale) */
    --mauve-pale: #f3ebf2;
    --vert: #a0bf57;
    --vert-fonce: #5f7a2a;    /* texte vert ; blanc dessus : 4,9:1 */
    --vert-sombre: #4a5f20;   /* survol d'un bouton vert */
    --vert-pale: #eef3e1;
    /* Nécessaires à un outil, absentes du site */
    --rouge: #b42318;
    --rouge-fonce: #8f1c13;   /* survol d'un bouton rouge */
    --rouge-pale: #fbe9e7;
    --ambre: #96610f;
    --ambre-pale: #fdf3e1;
    /* Neutres */
    --encre: #396597;   /* le site écrit TOUT son texte dans le bleu */
    --titre: #396597;
    --gris: #5b6f86;    /* bleu-gris pour les métadonnées (4,7:1 sur --fond, 5,2:1 sur blanc) */
    --trait: #dfe3e8;
    --trait-fort: #c7ced6;
    --fond: #f4f3f1;
    --fond-2: #ecebe9;
    --blanc: #ffffff;
    --champ: rgba(0, 0, 0, 0.04);  /* fond des champs, comme sur le site */
    --noir: #181818;
    /* Une couleur par type de date (kanban, filtres) : prises dans la palette
       du site, assez distinctes pour se lire d'un coup d'œil. */
    --type-ceremonie: #2c4f78;        /* bleu SNC foncé */
    --type-ceremonie-pale: #e4ebf4;
    --type-soiree-pro: #1f6f78;       /* sarcelle */
    --type-soiree-pro-pale: #e2f0f1;
    --type-jpo: #8a5a1a;              /* ambre brûlé */
    --type-jpo-pale: #f8ecdd;
    --type-premiere-pierre: #6b4b8a;  /* prune */
    --type-premiere-pierre-pale: #eee8f5;
    /* Alias employés par les modules */
    --accent: var(--bleu);
    --ok: var(--vert-fonce);
    --ko: var(--rouge);
    /* Typographie */
    --police-titre: "Overpass", "Segoe UI", sans-serif;
    --police-texte: "Roboto", "Segoe UI", sans-serif;
    --police-mono: ui-monospace, Consolas, "Roboto Mono", monospace;
    --taille: 16px;
    --taille-petit: 14px;
    --taille-h1: 30px;
    --taille-h2: 22px;
    --taille-h3: 18px;
    /* Rayons mesurés sur le site : champs 4 px, boutons en pilule, cadres à coins asymétriques */
    --rayon: 4px;
    --rayon-bouton: 999px;
    --rayon-cadre: 0 15px 0 15px;
    --rayon-pastille: 999px;
    /* Overpass, mesuré le 2026-09-25 : ascender 0,88 em, descender 0,38 em pour
       une capitale de 0,70 em. Centré « à la typographie », un texte sans
       jambage paraît donc 0,1 em trop haut dans sa pilule. On le redescend
       d'autant : padding du haut + ce décalage, padding du bas - ce décalage,
       la hauteur du bouton ne bouge pas. */
    --decalage-optique: .1em;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font: var(--taille)/1.6 var(--police-texte); color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bleu-fonce); }
code { font-family: var(--police-mono); font-size: .9em; background: var(--fond-2); padding: .05em .35em; border-radius: var(--rayon); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; color: var(--titre); line-height: 1.25; }
h1 { font-size: var(--taille-h1); margin: 0 0 1.2rem; }
h2 { font-size: var(--taille-h2); margin: 2.2rem 0 .8rem; }
h3 { font-size: var(--taille-h3); margin: 1.4rem 0 .5rem; }
:focus-visible { outline: 2px solid var(--bleu-2); outline-offset: 2px; }

/* --- Structure ---------------------------------------------------------- */
.entete { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.25rem; background: var(--blanc); border-bottom: 1px solid var(--trait); }
.marque { display: flex; align-items: center; gap: .8rem; white-space: nowrap; text-decoration: none; color: var(--titre); font-family: var(--police-titre); font-weight: 500; }
.marque img { height: 40px; width: auto; display: block; }
.marque span { color: var(--gris); font-weight: 400; font-family: var(--police-texte); font-size: var(--taille-petit); }
.nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-left: auto; font-size: var(--taille); }
.nav a { white-space: nowrap; }
.nav a { text-decoration: none; color: var(--bleu); font-family: var(--police-titre); font-weight: 600; }
.nav a:hover { color: var(--bleu); }
.nav-form { display: inline; margin: 0; }
.nav-qui { color: var(--gris); font-family: var(--police-titre); font-weight: 600; }
.page { flex: 1; width: min(96rem, 100% - 4rem); margin: 2rem auto 2.5rem; }
.entete-page { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.aide, .meta { color: var(--gris); font-size: var(--taille-petit); }
.aide, .page > p, .carte > p { max-width: 72ch; }
.liste-inline { color: var(--gris); line-height: 2; }
/* Jauge d'avancement (helpers.php) : la barre porte la donnée, le compte la
   précise. Bleue tant qu'il reste à faire ; terminé, c'est la pastille verte. */
.jauge { display: inline-flex; align-items: center; gap: .6rem; }
.jauge__barre { appearance: none; width: 7rem; height: .5rem; border: 0; border-radius: var(--rayon-pastille); background: var(--fond-2); }
.jauge__barre::-webkit-progress-bar { border-radius: var(--rayon-pastille); background: var(--fond-2); }
.jauge__barre::-webkit-progress-value { border-radius: var(--rayon-pastille); background: var(--bleu); }
.jauge__barre::-moz-progress-bar { border-radius: var(--rayon-pastille); background: var(--bleu); }
.jauge__texte { font-size: var(--taille-petit); color: var(--gris); white-space: nowrap; }

/* --- Connexion ---------------------------------------------------------- */
.connexion { display: flex; justify-content: center; padding: 2rem 0 4rem; }
.connexion__carte { width: 100%; max-width: 27rem; padding: 2rem 2rem 1.8rem; }
.connexion__logo { height: 56px; width: auto; display: block; margin: 0 0 1.4rem; }
.connexion h1 { margin-bottom: .3rem; }
.connexion .aide { margin: 0 0 1.4rem; }
.connexion .formulaire--etroit { max-width: none; }
.connexion .bouton { width: 100%; text-align: center; }

/* --- Fil d'Ariane et cadre d'événement --------------------------------- */
.fil { font-size: var(--taille-petit); color: var(--gris); margin: 0 0 .7rem; }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--bleu); text-decoration: underline; }
.fil__sep { margin: 0 .5rem; }
/* Le seul élément fort de l'outil : le cadre bleu à coins asymétriques du site
   SNC (.nectar-fancy-box), qui porte l'identité de l'événement. */
.cadre-evenement { background: var(--bleu); color: var(--blanc); border-radius: var(--rayon-cadre); padding: 1.4rem 1.8rem 1.5rem; margin: 0 0 .2rem; }
.cadre-evenement h1 { color: var(--blanc); margin: .1rem 0 .8rem; font-size: 32px; }
.cadre-evenement__type { margin: 0; font-size: var(--taille-petit); color: var(--bleu-pale); }
.cadre-evenement__type a { color: var(--blanc); }
/* La suppression, dans le bandeau : à portée de tous les onglets (Hugo,
   2026-09-24). Elle porte le bouton --danger du site, comme tous les autres
   « Supprimer » : rouge sur blanc, signalée sans crier. */
.cadre-evenement { position: relative; }
.cadre-evenement__supprimer { position: absolute; top: 1.2rem; right: 1.6rem; margin: 0; }
@media (max-width: 40rem) { .cadre-evenement__supprimer { position: static; margin: .6rem 0 0; } }
/* L'avancement dans le bandeau : la même jauge, lue sur le bleu. */
.cadre-evenement__avancement { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; font-size: var(--taille-petit); }
.cadre-evenement__etiquette { color: var(--bleu-pale); }
.cadre-evenement__avancement .jauge__texte { color: var(--blanc); }
.cadre-evenement__avancement .jauge__barre { background: var(--bleu-fonce); }
.cadre-evenement__avancement .jauge__barre::-webkit-progress-bar { background: var(--bleu-fonce); }
.cadre-evenement__avancement .jauge__barre::-webkit-progress-value { background: var(--blanc); }
.cadre-evenement__avancement .jauge__barre::-moz-progress-bar { background: var(--blanc); }
.programme { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.programme__volet { display: inline-flex; align-items: baseline; gap: .5rem; padding: .35rem .9rem; border: 1px solid var(--bleu-2); border-radius: var(--rayon-pastille); font-size: var(--taille-petit); background: var(--bleu-fonce); }
.programme__nom { color: var(--blanc); }
.programme__date { color: var(--bleu-pale); }
.programme__volet--sans-date { border-style: dashed; background: transparent; }
.programme__volet--sans-date .programme__date { color: var(--ambre-pale); }
/* Le compte à rebours d'une date du programme. Sa couleur vient de la pastille
   (code couleur de compte_a_rebours()) et RIEN ne la repeint ici : le bandeau
   doit dire l'urgence comme les tableaux (Hugo, 2026-09-24). Il ne reste que
   la graisse, et le ton neutre d'une date passée. */
.programme__compte { font-weight: 600; }
.programme__compte--passe { font-weight: 400; }
/* Plus rien devant : le titre le dit, en blanc sur le bleu du cadre. */
.cadre-evenement__passe { display: inline-block; vertical-align: middle; margin-left: .7rem; padding: .2rem .8rem; border-radius: var(--rayon-pastille); background: var(--blanc); color: var(--bleu-fonce); font-family: var(--police-texte); font-size: var(--taille-petit); font-weight: 600; }
.onglets { margin-top: .9rem; }
.cadre-evenement--compact { padding: .9rem 1.2rem 1rem; }
.cadre-evenement--compact h2 { color: var(--blanc); margin: .1rem 0 .6rem; font-size: 24px; }
.espace-evenement { margin: 0 0 1.6rem; }
.tableau--espace { border-top: 0; }
.tableau--espace td:first-child { width: 40%; }

/* --- Messages ----------------------------------------------------------- */
.flash { padding: .8rem 1.1rem; border-radius: var(--rayon); margin: 0 0 1rem; border-left: 3px solid; }
.flash--ok { background: var(--vert-pale); color: var(--vert-fonce); border-color: var(--vert); }
.flash--erreur { background: var(--rouge-pale); color: var(--rouge); border-color: var(--rouge); }
.flash--info { background: var(--bleu-pale); color: var(--bleu); border-color: var(--bleu-2); }
.verdict { padding: 1rem 1.2rem; border-radius: var(--rayon); font-weight: 500; }
.verdict--ok { background: var(--vert-pale); color: var(--vert-fonce); }
.verdict--ko { background: var(--rouge-pale); color: var(--rouge); }

/* --- Tableaux ----------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--trait); }
.tableau th, .tableau td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau th { font-size: var(--taille-petit); color: var(--gris); font-weight: 600; background: var(--fond); }
.tableau tbody tr:hover { background: var(--bleu-pale); }
.tableau td.ok { color: var(--vert-fonce); font-weight: 600; }
.tableau td.ko { color: var(--rouge); font-weight: 600; }
.tableau td.num, .tableau th.num { text-align: right; white-space: nowrap; }
/* Un numéro de téléphone ne se coupe pas, ni son en-tête de colonne. */
.tableau td.tel, .tableau th.tel { white-space: nowrap; }
.tableau tfoot td { font-weight: 600; background: var(--fond); }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin: 0; }
.fiche dt { color: var(--gris); }
.fiche dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* --- Formulaires -------------------------------------------------------- */
.formulaire label { display: block; margin: 0 0 1.1rem; font-weight: 500; }
.formulaire input:not([type=checkbox]):not([type=radio]):not([type=file]), .formulaire select, .formulaire textarea {
    /* font-weight : ce qu'on a saisi s'écrit en graisse normale. Posé dans son
       <label>, le champ en héritait le 500 et tout paraissait en gras. */
    display: block; width: 100%; margin-top: .35rem; padding: .65rem .85rem; font: inherit; font-size: var(--taille); font-weight: 400; color: var(--encre);
    border: 2px solid transparent; border-radius: var(--rayon); background: var(--champ);
}
/* Une liste déroulante ne suit pas le line-height : sur la même ligne qu'un
   champ texte, elle était 4 px plus basse. Même hauteur que le champ : une
   ligne de texte, le padding, la bordure. */
.formulaire select { min-height: calc(1.6em + 1.3rem + 4px); }
/* Le champ date de Chromium ajoute 2 px à son texte : on fixe sa hauteur. */
.formulaire input[type=date], .formulaire input[type=time] { height: calc(1.6em + 1.3rem + 4px); }
.tableau select { min-height: calc(1.6em + .9rem + 4px); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--bleu-2); background: var(--blanc); outline: none; }
.formulaire textarea { min-height: 8rem; }
.formulaire--etroit { max-width: 32rem; }
.partage-nouveau { margin-top: 1.4rem; }
/* Le bouton du référentiel touchait le libellé du premier champ de la fiche. */
.referentiel-ajout { display: block; margin: -.4rem 0 1.8rem; }
.partage-nouveau label { margin-bottom: .6rem; }
.partage-nouveau .actions { margin-top: 0; }
/* Le bouton de soumission par défaut (touche Entrée) quand un bouton secondaire le précède dans le formulaire. */
.bouton-defaut { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.5rem; }
/* La tâche : le type porte le nom de la date ET son jour, il lui faut la place. */
@media (min-width: 64rem) { .formulaire .ligne--tache { grid-template-columns: 1.8fr 1fr 1fr 1.3fr; } }
.formulaire label input[type=radio], .formulaire label input[type=checkbox] { margin-right: .4rem; }
.actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 1.2rem 0 0; }
.bouton { display: inline-block; padding: calc(.6rem + var(--decalage-optique)) 1.4rem calc(.6rem - var(--decalage-optique)); border-radius: var(--rayon-bouton); border: 1px solid var(--bleu); background: var(--bleu); color: var(--blanc); font-family: var(--police-titre); font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none; }
.bouton:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--blanc); }
.bouton--secondaire { background: var(--fond-2); border-color: var(--fond-2); color: var(--bleu); }
.bouton--secondaire:hover { background: var(--bleu-pale); border-color: var(--bleu-pale); color: var(--bleu-fonce); }
.bouton--danger { background: var(--blanc); color: var(--rouge); border-color: var(--rouge); }
.bouton--danger:hover { background: var(--rouge-pale); border-color: var(--rouge); color: var(--rouge); }
/* Un bouton prend la couleur de l'état qu'il PRODUIT (Hugo, 2026-09-25 : « trop
   de boutons de la même couleur ») : les mêmes couleurs que les pastilles, si
   bien qu'on sait ce qu'il fera sans le lire.
   - bleu plein : l'action principale de l'écran, une seule ;
   - vert plein : valider, marquer comme fait ; la pastille passera au vert ;
   - contour ambre : renvoyer au travail (commentaire, retirer la validation,
     brouillon) ; la pastille repassera à l'ambre ;
   - contour rouge : supprimer, retirer, vider ;
   - contour bleu : emporter hors de l'outil (copier, exporter, télécharger),
     le geste qui remplace l'envoi que l'outil ne fait pas ;
   - gris : le reste, ouvrir, gérer, ajouter une ligne, se déconnecter. */
.bouton--valider { background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--blanc); }
.bouton--valider:hover { background: var(--vert-sombre); border-color: var(--vert-sombre); color: var(--blanc); }
.bouton--reprendre { background: var(--blanc); border-color: var(--ambre); color: var(--ambre); }
.bouton--reprendre:hover { background: var(--ambre-pale); border-color: var(--ambre); color: var(--ambre); }
.bouton--copier { background: var(--blanc); border-color: var(--bleu); color: var(--bleu); }
.bouton--copier:hover { background: var(--bleu-pale); border-color: var(--bleu); color: var(--bleu-fonce); }
/* Une ligne d'actions dont le seul bouton est l'enregistrement, caché par le JS,
   laissait sa marge en blanc au bas de la carte (« Ajouter une ligne »). */
.actions:has(> [data-auto-bouton]:only-child[hidden]) { display: none; }
.bouton--petit { padding: calc(.35rem + var(--decalage-optique)) 1rem calc(.35rem - var(--decalage-optique)); font-size: 14px; }
/* Champ fichier habillé (champ_fichier()) : l'input natif, transparent, couvre la
   pilule et le nom ; il reste le vrai bouton, au clavier comme à la souris. */
.fichier { position: relative; display: inline-flex; align-items: center; gap: .7rem; max-width: 100%; vertical-align: middle; }
.formulaire label > .fichier { display: flex; margin-top: .35rem; }
.fichier input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.fichier__bouton { flex: 0 0 auto; padding: calc(.35rem + var(--decalage-optique)) 1rem calc(.35rem - var(--decalage-optique)); border-radius: var(--rayon-bouton); background: var(--fond-2); color: var(--bleu); font-family: var(--police-titre); font-size: 14px; font-weight: 600; line-height: 1.3; }
.fichier:hover .fichier__bouton { background: var(--bleu-pale); color: var(--bleu-fonce); }
.fichier input:focus-visible + .fichier__bouton { outline: 2px solid var(--bleu-2); outline-offset: 2px; }
.fichier__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier--choisi .fichier__nom { color: var(--encre); }

/* --- Cartes, onglets, pastilles ----------------------------------------- */
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-cadre); padding: 1.4rem 1.6rem; margin: 0 0 1.4rem; }
.carte h2 { margin: 0 0 .3rem; }
/* Le titre d'une carte en touche le haut : un h3 gardait sa marge de texte
   courant et laissait 50 px de blanc sous le bord (mail, version). */
.carte > h3:first-child { margin-top: 0; }
/* Une carte qu'on déplie : longue liste qu'on ne lit qu'au moment de s'en servir. */
.repliable > summary { cursor: pointer; font-family: var(--police-titre); font-weight: 500; font-size: var(--taille-h2); color: var(--titre); line-height: 1.25; }
.repliable > summary::marker { color: var(--gris); }
.repliable[open] > summary { margin-bottom: 1rem; }
.repliable > summary .meta { font-family: var(--police-texte); font-weight: 400; }
/* Plusieurs blocs l'un sous l'autre : leurs jauges commencent au même endroit,
   c'est ce qui permet de les comparer d'un coup d'œil. 18,5 rem tiennent le
   plus long des types de date (« Soirée des pompes funèbres »). */
.repliable__titre { display: inline-block; min-width: 18.5rem; }
.repliable .tableau { margin-top: .8rem; }
.disposition { display: grid; grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr); gap: 1.5rem 2rem; align-items: start; }
.disposition__cote > .carte:last-child { margin-bottom: 0; }
@media (max-width: 64rem) { .disposition { grid-template-columns: minmax(0, 1fr); } }
.liste-liens { padding-left: 1.2rem; margin: .6rem 0 0; }
.liste-liens li { margin: .2rem 0; }
/* Un seul niveau d'onglets, tous de même rang (Hugo, 2026-09-25) : ils passent
   à la ligne plutôt que de défiler. Un défilement horizontal cachait les
   derniers sans le dire ; deux lignes se lisent d'un coup d'œil. */
.onglets { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1.2rem 0 1.8rem; border-bottom: 1px solid var(--trait); }
.onglets a { white-space: nowrap; padding: .6rem 1.1rem; text-decoration: none; color: var(--gris); font-family: var(--police-titre); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a.actif, .onglets a:hover { border-bottom-color: var(--bleu); color: var(--bleu); }
/* Le titre d'un onglet est à la même distance de la barre sur tous les onglets.
   Posé dans un .entete-page (flex), sa marge ne fusionnait plus avec celle des
   onglets et s'y ajoutait : 64 px sous la barre au lieu de 29. */
.onglets + h2, .onglets + .entete-page > h2 { margin-top: 0; }
.pastille { display: inline-block; font-size: 13px; padding: .15rem .65rem; border-radius: var(--rayon-pastille); background: var(--fond-2); color: var(--gris); white-space: nowrap; }
.pastille--ok { background: var(--vert-pale); color: var(--vert-fonce); }
.pastille--attention { background: var(--ambre-pale); color: var(--ambre); }
.pastille--ko { background: var(--rouge-pale); color: var(--rouge); }
.pastille--numeria { background: var(--bleu-pale); color: var(--bleu); }
.pastille--snc { background: var(--mauve-pale); color: var(--mauve-fonce); }

/* Champs DANS un tableau (volets, plan de com) : compacts, sans marge. */
.tableau input:where(:not([type=checkbox]):not([type=radio])), .tableau select {
    width: 100%; min-width: 8rem; padding: .45rem .6rem; font: inherit; font-size: var(--taille-petit); color: var(--encre);
    border: 2px solid transparent; border-radius: var(--rayon); background: var(--champ);
}
/* Un tableau DANS un formulaire (dirigeants, parties prenantes) : le champ du
   formulaire l'emportait, si bien que les champs texte étaient plus grands que
   les listes de la même ligne. */
.formulaire .tableau input:not([type=checkbox]):not([type=radio]):not([type=file]), .formulaire .tableau select {
    margin-top: 0; padding: .45rem .6rem; font-size: var(--taille-petit); min-height: calc(1.6em + .9rem + 4px);
}
.tableau input:focus, .tableau select:focus { border-color: var(--bleu-2); background: var(--blanc); outline: none; }
/* Un formulaire DANS un tableau garde les champs compacts du tableau : sinon le
   select suit le tableau, l input suit le formulaire, et les deux se décalent. */
.tableau .formulaire input:not([type=checkbox]):not([type=radio]):not([type=file]), .tableau .formulaire select, .tableau .formulaire textarea {
    padding: .45rem .6rem; font-size: var(--taille-petit); margin-top: .15rem;
}
.tableau input[type=number] { width: 6rem; min-width: 0; }
.tableau input[type=date] { width: 11rem; min-width: 0; }
.tableau input[type=date], .tableau input[type=time] { height: calc(1.6em + .9rem + 4px); }
.tableau td.volets__actions, .tableau td.plan-com__actions { white-space: nowrap; }
.tableau .bouton { white-space: nowrap; }
.tableau .bouton + .bouton { margin-left: .4rem; }
.volets th.num, .volets td.num, .volets td.volets__actions { width: 1%; }
.volets input[type=text] { min-width: 18rem; }
.volets td .pastille { margin-left: .3rem; }
.volets__nouveau td { background: var(--fond); }
.actions { margin-bottom: 1rem; }

.creneaux__ligne { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .3rem; }
.creneaux__ajout { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 0; }
.tableau .creneaux__ligne input[type=date] { width: 11rem; min-width: 0; flex: 0 0 auto; }
.tableau .creneaux__ligne input[type=time] { width: 7rem; min-width: 0; flex: 0 0 auto; }
/* Une date simple et un créneau de JPO se lisent en colonnes : la colonne Date
   est juste assez large pour son champ, et l'heure d'un créneau commence là où
   commence la colonne Heure (le padding des deux cellules : 2 rem). */
.volets th:nth-child(2) { width: 1%; }
.volets th:first-child { width: 30%; }
.tableau.volets td > input[type=date] { width: 11rem; min-width: 0; }
.tableau.volets input[type=time] { width: 7rem; min-width: 0; }
.tableau .creneaux__ligne input[type=date] { margin-right: 1.6rem; }

/* --- module checklist --- */
/* Le champ de recherche par crématorium, au-dessus d'une liste. Les
   propositions sont celles du navigateur (<datalist>) : rien à styler. */
.recherche { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.recherche input[type=search] {
    margin: 0; min-width: 18rem; padding: .5rem .85rem; font: inherit; font-size: var(--taille); color: var(--encre);
    border: 2px solid transparent; border-radius: var(--rayon); background: var(--champ);
}
.recherche input[type=search]:focus { border-color: var(--bleu-2); background: var(--blanc); outline: none; }
/* La liste déroulante des propositions : elle sort du flux sous le champ, sans
   ombre (charte), le trait et le fond blanc suffisent à la détacher. */
.recherche__champ { position: relative; display: inline-block; }
.recherche__liste { position: absolute; z-index: 20; top: calc(100% + .2rem); left: 0; right: 0;
    margin: 0; padding: .2rem; list-style: none; max-height: 16rem; overflow-y: auto;
    background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: var(--rayon); }
.recherche__option { display: block; width: 100%; text-align: left; padding: .4rem .6rem; font: inherit;
    font-size: var(--taille-petit); color: var(--encre); background: none; border: 0; border-radius: var(--rayon); cursor: pointer; }
.recherche__option:hover, .recherche__option.actif { background: var(--bleu-pale); color: var(--bleu); }
.recherche__option strong { font-weight: 600; }
/* Dans une cellule de tableau, le champ prend toute la largeur : la liste se
   pose dessous, à la même largeur que lui. */
.tableau .suggestions { display: block; width: 100%; }
.recherche__compte { white-space: nowrap; }
/* Sur un petit ecran, le champ prend la ligne : il est l entree de la page. */
@media (max-width: 40rem) {
    .recherche__champ { display: block; width: 100%; }
    .recherche input[type=search] { width: 100%; min-width: 0; }
}
.recherche__tout { font-size: var(--taille-petit); }
.filtres { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 1.2rem; font-size: var(--taille-petit); }
.filtres a { padding: .3rem .8rem; border-radius: var(--rayon-pastille); text-decoration: none; color: var(--encre); border: 1px solid var(--trait); background: var(--blanc); }
.filtres a.actif, .filtres a:hover { border-color: var(--bleu); color: var(--bleu); }
.filtres__sep { flex: 0 0 .6rem; }
.kanban__actions { margin: 0; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
@media (max-width: 64rem) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .kanban { grid-template-columns: 1fr; } }
.kanban__colonne { background: var(--fond-2); border-radius: var(--rayon); padding: .8rem; min-height: 8rem; border-top: 3px solid var(--gris); }
.kanban__colonne h3 { margin: 0 0 .8rem; font-size: var(--taille); font-family: var(--police-texte); color: var(--gris); font-weight: 600; }
.kanban__colonne--fait { border-top-color: var(--vert); }
.kanban__colonne--bloque { border-top-color: var(--rouge); }
.kanban__groupe { margin: .9rem 0 .5rem; padding: 0 0 .3rem; font-family: var(--police-titre); font-weight: 600; font-size: 14px; color: var(--type, var(--gris)); border-bottom: 2px solid var(--type-pale, var(--trait)); }
/* La couleur dit le type de la date. Elle s'écrit en tag sous le titre de la
   tâche, et le filtre du même nom porte exactement le même tag : la barre de
   filtres est donc aussi la légende. */
/* Les familles de modèles reprennent la même palette que les types de date :
   quatre teintes distinctes, aucune ne dit un état. */
.modele--mail { --type: var(--type-ceremonie); --type-pale: var(--type-ceremonie-pale); }
.modele--page { --type: var(--type-soiree-pro); --type-pale: var(--type-soiree-pro-pale); }
.modele--checklist { --type: var(--type-jpo); --type-pale: var(--type-jpo-pale); }
.modele--prompt { --type: var(--type-premiere-pierre); --type-pale: var(--type-premiere-pierre-pale); }
.modeles__groupe { color: var(--type, var(--titre)); border-bottom: 2px solid var(--type-pale, var(--trait)); padding-bottom: .3rem; }
/* Quatre tableaux l'un sous l'autre : mêmes colonnes, sinon celui des prompts
   (des noms plus longs) décalait les siennes. */
.tableau--modeles th:first-child { width: 45%; }
.tableau--modeles th:nth-child(2) { width: 25%; }
.type--ceremonie { --type: var(--type-ceremonie); --type-pale: var(--type-ceremonie-pale); }
.type--soiree_pro { --type: var(--type-soiree-pro); --type-pale: var(--type-soiree-pro-pale); }
.type--jpo { --type: var(--type-jpo); --type-pale: var(--type-jpo-pale); }
.type--premiere_pierre { --type: var(--type-premiere-pierre); --type-pale: var(--type-premiere-pierre-pale); }
.pastille--type { background: var(--type-pale, var(--fond-2)); color: var(--type, var(--gris)); }
.filtres a.pastille--type { background: var(--type-pale); color: var(--type); border-color: transparent; padding: .25rem .8rem; font-size: 13px; }
.filtres a.pastille--type:hover { border-color: var(--type); }
.filtres a.pastille--type.actif { border-color: var(--type); font-weight: 600; }
.kanban__colonne h3 + .kanban__groupe { margin-top: 0; }
.kanban__carte { background: var(--blanc); border-radius: var(--rayon); padding: .8rem .9rem; margin: 0 0 .7rem; font-size: var(--taille-petit); }
.kanban__carte p { margin: 0 0 .3rem; }
.kanban__libelle { font-weight: 500; font-size: var(--taille); }
.kanban__libelle a { text-decoration: none; color: var(--titre); }
.kanban__libelle a:hover { text-decoration: underline; }
.kanban__meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.kanban__fait { color: var(--vert-fonce); }
.kanban__notes { color: var(--gris); white-space: pre-line; }
.kanban__statut { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .6rem 0 0; padding-top: .6rem; border-top: 1px solid var(--trait); }
.kanban__statut select, .kanban__statut input { font: inherit; font-size: 14px; padding: .3rem .4rem; border: 2px solid transparent; border-radius: var(--rayon); background: var(--champ); min-width: 0; }
/* Statut et « Fait le » sur la même ligne quand la carte le permet : sur une
   ligne chacun, une carte faite prenait quatre lignes, et la colonne Fait
   devenait trois fois plus longue que les autres. */
.kanban__statut select { flex: 1 1 6rem; min-width: 0; }
.kanban__statut .bouton { flex: 0 0 auto; padding: calc(.3rem + var(--decalage-optique)) .8rem calc(.3rem - var(--decalage-optique)); font-size: 14px; }
.kanban__date { flex: 2 1 12rem; display: flex; gap: .5rem; align-items: center; margin: 0; white-space: nowrap; }
.kanban__date input[type=date] { flex: 1 1 auto; min-width: 0; }
.kanban__date[hidden] { display: none; }
.kanban__aide-glisser { margin: 0 0 .6rem; }
.kanban__carte[draggable="true"] { cursor: grab; }
.kanban__carte--glissee { opacity: .4; }
.kanban__colonne--survolee { background: var(--bleu-pale); }
.tableau--historique { max-width: 48rem; }

/* --- module mails --- */
.mail-texte { font-family: var(--police-mono); font-size: var(--taille); line-height: 1.55; min-height: 24rem; white-space: pre-wrap; }
.mail-source .fiche { margin-top: .5rem; }
.mail-validation .formulaire { margin-top: .8rem; }

/* --- module evenements --- */
/* Une seconde ligne sous une valeur de tableau : le compte à rebours sous la
   prochaine date. */
.sous-ligne { display: block; }
/* Les deux tableaux portent les mêmes colonnes : elles s'alignent, ce qui les
   fait lire comme une seule liste coupée en deux. */
/* Seulement là où il y a la place : en dessous, un tableau défile
   horizontalement, il ne s'écrase pas (charte, mesuré à 390 px). */
@media (min-width: 64rem) {
    .tableau--evenements { table-layout: fixed; }
    .tableau--evenements th:nth-child(1) { width: 42%; }
    .tableau--evenements th:nth-child(2) { width: 24%; }
    .tableau--evenements th:nth-child(3) { width: 16%; }
    /* Un tableau de totaux n'a pas d'en-tête : ses cellules reprennent les
       mêmes largeurs, sinon les montants ne s'alignent plus avec ceux du
       tableau du dessus (facturation, 2026-09-24). */
    .tableau--evenements td:nth-child(1) { width: 42%; }
    .tableau--evenements td:nth-child(2) { width: 24%; }
    .tableau--evenements td:nth-child(3) { width: 16%; }
}

/* Les adresses des invités se copient depuis la page du mail : le bloc est le
   premier de la page, il se lit avant l'objet et le corps. */
.mail-destinataires { margin-top: 0; margin-bottom: 1rem; }

/* La carte du kanban dit où la tâche se fait : un lien discret, à côté des
   pastilles, qui ne doit pas leur voler la vedette. */
.kanban__vers { font-size: var(--taille-petit); text-decoration: underline; text-underline-offset: 2px; }

/* --- module invites --- */
/* L'aperçu d'un import : au-dessus de chaque colonne, ce qu'elle deviendra. */
.import-colonne { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; font-weight: 400; }
.import-colonne select { width: 100%; }

/* --- module formulaires --- */
.formulaires-resume { margin: 0 0 .8rem; }
/* Une ligne = une date : son type en tête, l'état de sa page dessous, ses
   actions à droite. Le lien se tronque au lieu d'étirer le tableau. */
.formulaires-type { display: block; font-weight: 500; }
.formulaires-etat { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.formulaires-etat + p { margin-top: .3rem; }
.formulaires-lien { display: inline-block; max-width: 34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.formulaires-actions { white-space: nowrap; width: 1%; }
.formulaires-actions form { display: inline-block; margin: 0 0 0 .4rem; }
.formulaires-actions form:first-child { margin-left: 0; }

/* --- module plan_com --- */
.plan-com--edition input { width: 100%; padding: .45rem .6rem; font: inherit; font-size: var(--taille-petit); border: 2px solid transparent; border-radius: var(--rayon); background: var(--champ); }
.tableau.plan-com--edition input[name=support] { min-width: 15rem; }
/* Le support est la seule colonne de texte libre : sans largeur, il était
   tronqué au premier mot pendant que les dates flottaient dans les leurs. */
@media (min-width: 64rem) {
    .plan-com--edition th:first-child { width: 36%; }
}
.tableau.plan-com--edition input[name=budget] { width: 7rem; min-width: 0; }
.plan-com--edition input[type=number] { width: 7rem; }
.plan-com--edition input[type=date] { width: 10rem; }
.plan-com__actions { white-space: nowrap; }
.plan-com__actions .bouton + .bouton { margin-left: .4rem; }
/* Un lien à transmettre : le champ, le bouton Copier. Une seule règle pour
   tous les écrans qui en posent un (comptes, partage d'un discours). */
.copier { display: flex; gap: .4rem; align-items: center; margin: .3rem 0; }
.copier input { flex: 1; min-width: 14rem; padding: .3rem .5rem; font: inherit; font-size: var(--taille-petit); border: 2px solid transparent; border-radius: var(--rayon); background: var(--champ); }
.plan-com-liens__revoquer { margin: 0; }

.plan-com__visuel { min-width: 9rem; }
.plan-com__vignette { display: block; max-width: 7rem; max-height: 4rem; object-fit: contain; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); }
.plan-com__visuel .fichier { flex-wrap: wrap; margin-top: .3rem; }
.plan-com__visuel .fichier:not(.fichier--choisi) .fichier__nom { display: none; }
.plan-com__visuel .fichier__nom { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
.plan-com__visuel .fichier__bouton { padding: calc(.25rem + var(--decalage-optique)) .8rem calc(.25rem - var(--decalage-optique)); font-size: 13px; }
.plan-com__retirer { margin-top: .3rem; }

.taches-modele td:nth-child(2) { width: 9rem; }
.taches-modele td:last-child { width: 1%; white-space: nowrap; }

/* Une adresse e-mail doit se lire en entier : c est ce qu on vient verifier. */
.comptes input[name=email] { min-width: 18rem; }
.comptes input[name=nom] { min-width: 10rem; }
/* La colonne des actions d un compte : la pilule ne se coupe jamais. */
.comptes__actions { white-space: nowrap; width: 1%; }

.etat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0 2rem; }
.etat-grille section { min-width: 0; }
.etat-grille .fiche { grid-template-columns: max-content minmax(0, 1fr); }
.etat-grille .fiche dd { overflow-wrap: anywhere; }
.etat-attention { color: var(--ambre); font-weight: 600; }
.fiche dd.ko { color: var(--rouge); font-weight: 600; }
.etat-journal { font-family: var(--police-mono); font-size: 12px; line-height: 1.45; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .7rem .9rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

.logo-champ { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 .9rem; }
.logo-champ label { flex: 0 1 auto; margin: 0; }
.logo-champ__apercu { max-height: 56px; max-width: 160px; object-fit: contain; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .3rem; }
.auto-etat { display: block; margin-top: .4rem; }

/* --- module documents --- */
.documents-texte { min-height: 26rem; line-height: 1.55; }
.documents-prompt { min-height: 30rem; font-family: var(--police-mono); font-size: var(--taille); line-height: 1.55; }
.documents-commentaire { white-space: normal; }

/* --- Petits écrans ------------------------------------------------------ */
@media (max-width: 40rem) {
    .entete { padding: .6rem 1rem; gap: .5rem .8rem; flex-wrap: wrap; }
    .marque img { height: 32px; }
    .repliable__titre { min-width: 0; }
    .marque span { display: none; }
    /* Le menu passe sous le logo, sur une ligne qui défile plutôt que de s'empiler. */
    .nav { order: 3; flex: 1 0 100%; margin: 0; gap: .9rem; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: .1rem; }
    .entete-page { flex-direction: column; align-items: flex-start; gap: .3rem; margin-bottom: .9rem; }
    /* Une fiche en une colonne : à 390 px, deux colonnes coupent les mots. */
    .fiche { grid-template-columns: 1fr; gap: 0; }
    .fiche dt { margin-top: .6rem; }
    .fiche dt:first-child { margin-top: 0; }
    .page { width: calc(100% - 2rem); margin-top: 1rem; }
    .tableau { display: block; overflow-x: auto; }
    .cadre-evenement h1 { font-size: 26px; }
    .cadre-evenement { padding: 1.1rem 1.2rem 1.2rem; }
}

/* --- module medias --- */
.medias-bloc { margin-top: 0; }
/* Hors écran et non « hidden » : le bouton Copier lit sa valeur, et le repli
   Ctrl+C a besoin de pouvoir la sélectionner. */
.medias-emails, .emails-caches { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* La colonne des cases a cocher : aussi etroite que possible, la case au
   milieu. On coche qui l on contacte, le bouton ne copie que ceux-la. */
.medias-choix, .colonne-choix { width: 1%; text-align: center; }
.medias-choix input, .colonne-choix input { margin: 0; }
/* La liste des invités : la personne et ce que le fichier disait d'elle
   prennent la place. Sans largeur, l'adresse e-mail (un seul mot, insécable)
   gardait la sienne et la personne tenait en 200 px, sur cinq lignes. */
@media (min-width: 64rem) {
    .tableau--invites .invites__personne { width: 30%; }
    .tableau--invites .invites__organisme { width: 18%; }
    .tableau--invites .invites__email { width: 24%; }
}
/* Une adresse très longue se coupe plutôt que d'élargir sa colonne. */
.tableau--invites td.invites__email { overflow-wrap: anywhere; }
/* Les outils de la liste, au-dessus d elle : des pilules sur une ligne. Un
   outil ouvert prend toute la largeur et se détache sur le fond. */
/* Déposer un fichier et ajouter une personne sont deux gestes différents :
   deux blocs empilés, chacun son titre et sa règle, et non deux pilules
   voisines qu'on prenait l'une pour l'autre (Hugo, 2026-09-25). */
.invites-outils { display: grid; gap: .5rem; margin: 0 0 1rem; }
.invites-outil { background: var(--fond); border-radius: var(--rayon); padding: .7rem 1.1rem; }
.invites-outil > summary { cursor: pointer; }
.invites-outil > summary .meta { margin-left: .6rem; }
.invites-outil > summary::marker { color: var(--gris); }
.invites-outil__titre { font-family: var(--police-titre); font-weight: 600; color: var(--titre); }
.invites-outil[open] { padding-bottom: .2rem; }
.invites-outil[open] > summary { margin-bottom: .8rem; }
/* Ce qui porte sur la liste entière se lit à part, sous les deux blocs. */
.actions--liste { margin-top: 0; }
.medias-bloc td:last-child { white-space: nowrap; }
.dirigeants td:first-child { width: 9rem; }
.parties td:first-child, .parties th:first-child { width: 21%; }
/* Sept colonnes de champs : l'écart entre deux champs suffit, le padding
   d'un tableau de lecture leur prenait 32 px chacun. */
.parties th, .parties td { padding-left: .4rem; padding-right: .4rem; }
.parties th:first-child, .parties td:first-child { padding-left: 1rem; }
.parties th:last-child, .parties td:last-child { padding-right: 1rem; }
@media (min-width: 64rem) {
    .parties { table-layout: fixed; }
    .parties th:nth-child(2) { width: 14%; }
    .parties th:nth-child(3) { width: 14%; }
    .parties th:nth-child(4) { width: 17%; }
    .parties th:nth-child(5) { width: 11%; }
    .parties th:nth-child(6) { width: 13%; }
    /* Il reste 10 % au bouton « Retirer » : à 7 %, il débordait du tableau. */
}
.dirigeants td.dirigeants__actions { width: 1%; white-space: nowrap; }
.dirigeants__nouveau td { background: var(--fond); }
/* Un exemple grisé ne se lit que sur la ligne à remplir : dans le champ vide
   d une ligne posée, « 04 73 00 00 00 » passait pour un vrai numéro. */
.dirigeants tbody tr:not(.dirigeants__nouveau) input::placeholder { color: transparent; }

/* --- module inscriptions --- */
.inscriptions-resume { margin: 0 0 .8rem; }
/* Le tableau récapitulatif, puis les listes date par date : de l'air entre les
   deux, sinon le premier déroulé semble collé au tableau. */
.inscriptions-date { margin: 0 0 1rem; }
.inscriptions-date:first-of-type { margin-top: 1.8rem; }
.inscriptions-import { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: .8rem 0 0; }
.inscriptions-import label { margin: 0; font-weight: 400; font-size: var(--taille-petit); }
/* La liste des ecarts avec le referentiel commun, dans un bandeau. */
.ecart { margin: .3rem 0 .6rem; padding-left: 1.2rem; }

/* --- En-tête entre 40 et 75 rem ------------------------------------------
   Mesuré le 2026-09-25 : à 1024 px, le menu de Numéria passait à la ligne au
   hasard (96 px de haut, « Se déconnecter » seul dessous). Entre le mobile et
   le grand écran, il prend donc SA ligne sous le logo, comme sur mobile, et
   défile s'il n'y tient pas : deux rangées voulues plutôt qu'une coupure. */
@media (min-width: 40rem) and (max-width: 75rem) {
    /* Le menu reste d'un seul bloc : s'il tient à côté du logo (Catherine), il
       y reste ; sinon il descend ENTIER sur la ligne du dessous, et ne défile
       que s'il n'y tient toujours pas. */
    .entete { flex-wrap: wrap; row-gap: .5rem; }
    .nav { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
}

/* --- module historique --- */
/* La date et la rubrique ne se coupent pas : c'est le texte du détail qui prend la place. */
.historique__quand, .historique td:nth-last-child(2) { white-space: nowrap; }

/* --- relecture (Catherine) --------------------------------------------------
   Dans la colonne de côté, la carte de validation passe devant les repères :
   elle vient relire et répondre, et son bouton doit se voir sans défiler. */
.disposition__cote--relecture { display: flex; flex-direction: column; gap: 1.4rem; }
/* La validation passe en tête par « order », mais reste la dernière du DOM :
   son margin-bottom à 0 collait les deux cartes. L écart vient du gap. */
.disposition__cote--relecture > .carte { margin: 0; }
.disposition__cote--relecture .mail-validation { order: -1; }

/* --- module modifications --- */
/* Ce que Catherine a changé dans un texte, vu par Marie-Anne : le bord mauve
   dit SNC. Côte à côte : avant à gauche, ce qui est parti barré en rouge ;
   après à droite, ce qui est arrivé surligné en vert. Chaque passage est une
   rangée de la grille : les deux côtés restent alignés quelle que soit leur
   longueur. Un paragraphe intact prend les deux colonnes, en gris. */
.modifications { border-left: 4px solid var(--mauve); }
.modifications .entete-page { margin-bottom: .6rem; }
.modifications .entete-page h3 { margin: 0; }
.comparaison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1rem; align-items: start; }
.comparaison__tete { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: var(--taille-petit); color: var(--gris); }
.comparaison__ou { grid-column: 1 / -1; margin: .4rem 0 -.2rem; }
.comparaison__cote { white-space: pre-wrap; padding: .6rem .8rem; background: var(--fond); border-radius: var(--rayon); }
.comparaison__cote del { background: var(--rouge-pale); color: var(--rouge); text-decoration: line-through; }
.comparaison__cote ins { background: var(--vert-pale); color: var(--vert-fonce); text-decoration: none; font-weight: 600; }
.comparaison__intact { grid-column: 1 / -1; white-space: pre-wrap; padding: 0 .8rem; color: var(--gris); }
.comparaison__etiquette { display: none; }
.modifications__tout { margin-top: 1rem; }
.modifications__tout > summary { cursor: pointer; font-family: var(--police-titre); font-weight: 600; }
.modifications__tout > .comparaison { margin-top: .8rem; }
@media (max-width: 40rem) {
    .comparaison { grid-template-columns: minmax(0, 1fr); }
    .comparaison__tete { display: none; }
    .comparaison__etiquette { display: block; font-family: var(--police-titre); font-weight: 600; font-size: var(--taille-petit); color: var(--gris); }
    .comparaison__cote--apres { margin-bottom: .8rem; }
}
.onglets__signal { margin-left: .3rem; }