/* Intendant : mise en page sobre, pensée d'abord pour le téléphone. Polices du système (rien de chargé ailleurs). */
:root {
  --fond: #e8eef8;
  --carte: #ffffff;
  --texte: #1c2330;
  --discret: #566074;
  --trait: #cfd5df;
  --accent: #1f5fae;
  --accent-texte: #ffffff;
  --danger: #b3261e;
  --info-fond: #e8f1fb;
  --erreur-fond: #fdecea;
  --pastille: #eceff4;
  --rayon: 14px;
  /* Le fond des champs et des boutons : un creux à peine teinté, sans contour. */
  --creux: color-mix(in srgb, var(--accent) 6%, var(--carte));
  /* Clair tant que la personne n'a pas choisi le mode sombre (bouton de l'accueil), quel que soit le thème du navigateur. */
  color-scheme: only light;
}
/* Mode sombre : choisi par la personne, posé sur <html> par js/theme.js. */
:root[data-theme="sombre"] {
  --fond: #12161d;
  --carte: #1b212b;
  --texte: #e9edf3;
  --discret: #a7b1c2;
  --trait: #3a4353;
  --accent: #7fb2f0;
  --accent-texte: #0d1520;
  --danger: #ff8a80;
  --info-fond: #1c2b3f;
  --erreur-fond: #3b1d1b;
  --pastille: #2a3240;
  color-scheme: only dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ecran { max-width: 720px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 8px 0 4px; }
h1:focus { outline: none; }
/* Un écran ouvert depuis une bulle porte sa teinte (code couleur). */
[data-partie] h1 { padding-left: 14px; border-left: 8px solid var(--teinte); border-radius: 6px; }
/* Titres, boutons, liens et cases y prennent cette teinte, foncée pour rester lisible ; le fond reste neutre. */
[data-partie] { --accent: color-mix(in srgb, var(--teinte) 62%, #000); --info-fond: color-mix(in srgb, var(--teinte) 14%, var(--carte)); }
[data-theme="sombre"] [data-partie] { --accent: color-mix(in srgb, var(--teinte) 72%, #fff); }
[data-partie] h1, [data-partie] h2 { color: var(--accent); }
h2 { font-size: 1.15rem; margin: 28px 0 8px; }
p { margin: 8px 0; }
.discret, .aide { color: var(--discret); }
.aide { font-size: 0.92rem; }
.bandeau-envois { position: sticky; top: 0; z-index: 5; margin: 0; padding: 6px 16px; background: #14406b; color: #fff; font-size: 0.9rem; text-align: center; }
.bandeau-envois.refus { background: #8a1c1c; }
.bandeau-envois .bouton { margin-left: 10px; padding: 2px 10px; font-size: 0.85rem; }
.bandeau-essai { margin: 0; padding: 6px 16px; background: #5b4300; color: #fff; font-size: 0.9rem; text-align: center; }

/* Formulaires */
.formulaire { margin-top: 16px; }
.champ { margin: 14px 0; }
.champ label, legend { display: block; font-weight: 600; font-size: 0.9rem; color: var(--discret); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: var(--rayon);
  background: var(--creux); color: var(--texte); font: inherit;
}
/* Champs sans contour : un léger creux ; le trait bleu ne vient que pendant la saisie. */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  box-shadow: inset 0 1px 2px rgba(20, 24, 40, 0.14), inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  transition: box-shadow 0.15s, background 0.15s;
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; background: var(--carte);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
input.date { width: 8.5em; min-height: 40px; padding: 6px 10px; }
fieldset.profils .fonction { color: var(--discret); font-size: 0.95rem; }
fieldset.profils .fonction input { width: 12em; min-height: 40px; padding: 6px 10px; }
textarea.lien { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; word-break: break-all; resize: none; }
input[type="checkbox"] { width: 22px; height: 22px; vertical-align: -4px; accent-color: var(--accent); }
.hors-vue { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; min-height: 0; }
fieldset.profils { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 8px 14px 4px; margin: 16px 0; }
fieldset.profils ul { list-style: none; margin: 0; padding: 0; }
fieldset.profils li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--trait); }
fieldset.profils li:first-child { border-top: 0; }
fieldset.profils label { flex: 1 1 12em; }
.fin { color: var(--discret); font-size: 0.95rem; }

/* Boutons */
.bouton, .lien, .onglets button { font: inherit; cursor: pointer; }
.bouton {
  min-height: 46px; padding: 9px 16px;
  border: 0; border-radius: var(--rayon); font-weight: 600;
  background: var(--creux); color: var(--texte);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(20, 24, 40, 0.18);
}
[data-theme="sombre"] .bouton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5); }
.bouton.principal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); color: var(--accent-texte);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 color-mix(in srgb, var(--accent) 70%, #000), 0 6px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bouton.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--carte)); }
.bouton.large { width: 100%; text-align: left; font-weight: 600; }
.bouton:disabled { opacity: 0.55; cursor: progress; }
button.lien { background: none; border: 0; padding: 10px 4px; color: var(--accent); text-decoration: underline; min-height: 46px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.actions.gauche { justify-content: flex-start; }

/* Messages */
.message { padding: 10px 12px; border-radius: var(--rayon); margin: 12px 0; }
.message.erreur { background: var(--erreur-fond); border-left: 4px solid var(--danger); }
.message.info { background: var(--info-fond); border-left: 4px solid var(--accent); }

/* Listes, cartes, pastilles */
.liste { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.carte { background: var(--carte); border: 0; border-radius: 20px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(20, 24, 40, 0.08), 0 8px 20px rgba(20, 24, 40, 0.07); }
[data-theme="sombre"] .carte { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.carte .actions { margin-top: 10px; }
.identite { display: flex; flex-direction: column; }
/* Personnes et accès : une ligne par personne, qui se déroule quand on la touche. */
.carte.membre { padding: 0; }
.carte.membre summary { cursor: pointer; padding: 6px 14px; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; }
.carte.membre summary::-webkit-details-marker { display: none; }
.carte.membre summary::after { content: '▾'; color: var(--accent); font-size: 1.2rem; transition: transform 0.15s; }
.carte.membre[open] summary::after { transform: rotate(180deg); }
.carte.membre summary strong { flex: 1; }
.raccourcis { display: flex; gap: 6px; }
.carte.membre[open] .raccourcis { display: none; }
/* Petits boutons à signe : même verre que le bouton de retour (voir « .retour »), rouge pour une suppression. */
.raccourci { width: 44px; height: 44px; font-size: 1.1rem; line-height: 1; }
.raccourci.danger { --t: var(--danger); color: #fff; }
.raccourci.danger svg, [data-theme="sombre"] .raccourci.danger svg { width: 62%; height: 62%; stroke-width: 2.2; filter: drop-shadow(0 1px 1px rgba(60, 0, 0, 0.55)); }
.fin .raccourci { width: 38px; height: 38px; margin-left: 8px; font-size: 1rem; }
.carte.membre[open] summary { border-bottom: 1px solid var(--trait); }
.carte.membre > :not(summary) { margin-left: 14px; margin-right: 14px; }
.carte.membre .adresse { overflow-wrap: anywhere; font-size: 0.92rem; }
.carte.membre .actions { margin-bottom: 12px; }
.identite span { overflow-wrap: anywhere; font-size: 0.92rem; }
.pastilles { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { background: var(--pastille); border-radius: 999px; padding: 3px 11px; font-size: 0.9rem; }
.pastille.fort { background: var(--accent); color: var(--accent-texte); font-weight: 600; }
.pastille.expire { text-decoration: line-through; opacity: 0.7; }

/* Onglets */
/* En-tête d'écran sur une ligne : flèche de retour, titre, nom de l'église à droite ; l'aide se déplie dessous. */
.entete-ecran { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 2px; }
/* Écrans à en-tête : peu d'espace au-dessus du titre, et entre le titre et ce qui le suit. */
.ecran:has(.entete-ecran) { padding-top: 8px; }
.ecran .entete-ecran + * { margin-top: 6px; }
.entete-ecran h1 { flex: 1 1 0; min-width: 0; margin: 0; font-size: 1.35rem; }
.entete-ecran .eglise { flex: 0 1 auto; max-width: 40%; font-size: 0.85rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete-ecran .aide { flex: 1 1 100%; margin: 4px 0 0; }
.bouton.rond { flex: none; width: 46px; min-width: 46px; height: 46px; min-height: 0; font-size: 1.25rem; font-weight: 800; line-height: 1; }
/* Le bouton de retour, le bouton d'aide et les petits boutons à signe : un carré de verre bombé, à la teinte de l'écran, comme les bulles
   de l'accueil ; le signe est au centre (le chevron du retour est gravé). */
.retour, .bouton.rond, .raccourci { --t: var(--teinte, var(--accent)); }
.retour { width: 46px; height: 46px; }
.retour, .bouton.rond, .raccourci {
  flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 32%; cursor: pointer; font-family: inherit;
  color: color-mix(in srgb, var(--t) 58%, #1b1016);
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 40%, rgba(255, 255, 255, 0.55)) 0%, color-mix(in srgb, var(--t) 84%, rgba(255, 255, 255, 0.3)) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 2px 3px 4px rgba(255, 255, 255, 0.85), inset -3px -4px 6px color-mix(in srgb, var(--t) 55%, rgba(27, 16, 22, 0.42)),
    0 2px 0 color-mix(in srgb, var(--t) 55%, #6b6672), 0 8px 12px color-mix(in srgb, var(--t) 34%, transparent);
  transition: transform 0.12s ease;
}
.retour:active, .bouton.rond:active, .raccourci:active { transform: translateY(2px) scale(0.96); }
.retour svg, .raccourci svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)); }
.raccourci svg { width: 55%; height: 55%; }
[data-theme="sombre"] .retour, [data-theme="sombre"] .bouton.rond, [data-theme="sombre"] .raccourci {
  color: color-mix(in srgb, var(--t) 60%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 46%, #232834) 0%, color-mix(in srgb, var(--t) 24%, #141821) 100%);
  box-shadow: inset 2px 3px 4px rgba(255, 255, 255, 0.28), inset -3px -4px 6px rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.45);
}
[data-theme="sombre"] .retour svg, [data-theme="sombre"] .raccourci svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
@media (max-width: 520px) { .entete-ecran .eglise { display: none; } }
.onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--trait); margin-top: 16px; }
.onglets[hidden] { display: none; }
.onglets button {
  min-height: 46px; padding: 8px clamp(8px, 3vw, 18px); background: none; color: var(--discret);
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600;
}
.onglets button[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--accent); }
.contenu-onglet { padding-top: 6px; }

/* Journal */
.journal { list-style: none; margin: 8px 0; padding: 0; }
.journal li { padding: 10px 0; border-top: 1px solid var(--trait); display: flex; flex-direction: column; }
.journal time { color: var(--discret); font-size: 0.88rem; }

/* Boîtes de dialogue */
.dialogue {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  border: 1px solid var(--trait); border-radius: 14px; padding: 18px 18px 16px;
  background: var(--carte); color: var(--texte);
}
/* Propositions d'un champ de texte (js/dom.js, avecSuggestions) : posées à l'écran sous le champ */
ul.suggestions {
  position: fixed; z-index: 20; margin: 0; padding: 4px 0; list-style: none; overflow: auto;
  background: var(--carte); color: var(--texte); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: 0 6px 20px rgba(8, 12, 20, 0.25);
}
ul.suggestions[hidden] { display: none; }
ul.suggestions > li.suggestion { display: block; padding: 9px 14px; border: 0; cursor: pointer; }
ul.suggestions > li.suggestion:hover { background: var(--pastille); }
.dialogue::backdrop { background: rgba(8, 12, 20, 0.55); }
.dialogue h2 { margin-top: 0; }
.qr { width: min(240px, 70vw); margin: 12px auto; background: #fff; border-radius: 8px; padding: 6px; }
.qr svg { display: block; width: 100%; height: auto; }
/* Code d'un poste de régie : gros et espacé, il se recopie à la main sur le PC. */
.code-poste {
  font-family: ui-monospace, Consolas, monospace; font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 700; letter-spacing: 0.12em;
  text-align: center; margin: 12px 0; padding: 12px 8px; border: 2px solid var(--trait); border-radius: 8px; user-select: all;
}
input.code-poste[type="text"] { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: clamp(1.6rem, 8vw, 2.4rem); padding: 12px 8px; user-select: auto; text-transform: uppercase; }
.etapes { margin: 8px 0 12px; padding-left: 1.4em; }
.etapes li { margin-bottom: 10px; }
.adresse-poste { font-family: ui-monospace, Consolas, monospace; font-size: 1.15em; white-space: nowrap; user-select: all; }

/* Accueil : des bulles, une teinte par domaine (même dessin que les bulles de plannings). */
/* Bulle « Bienvenue », en tête de l'accueil (bienvenue-view.js) : texte blanc sur un dégradé de bleus, ou les couleurs choisies
   par la personne (--fond pour la bulle, color et --trait pour le texte et les filets). */
.ecran:has(> .bienvenue) { padding-top: 10px; }
.bienvenue {
  --trait: 255, 255, 255;
  --f: #2a6fc0;
  padding: 14px 18px 18px; border-radius: 26px; color: #fff;
  background: linear-gradient(180deg, #1b5196 0%, #2a6fc0 55%, #2f7fb5 100%);
  /* Le relief du verre : bord clair en haut à gauche, sombre en bas à droite, comme les bulles de l'accueil. */
  box-shadow: inset 2px 3px 5px rgba(255, 255, 255, 0.6), inset -3px -4px 9px color-mix(in srgb, var(--f) 45%, rgba(10, 14, 30, 0.6)),
    0 2px 0 color-mix(in srgb, var(--f) 55%, #3a3f52), 0 12px 18px color-mix(in srgb, var(--f) 38%, transparent);
}
.bienvenue.choisie {
  --f: var(--fond);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fond) 78%, #000) 0%, var(--fond) 55%, color-mix(in srgb, var(--fond) 86%, #fff) 100%);
}
[data-theme="sombre"] .bienvenue { box-shadow: inset 2px 3px 4px rgba(255, 255, 255, 0.3), inset -3px -4px 8px rgba(0, 0, 0, 0.45), 0 10px 16px rgba(0, 0, 0, 0.45); }
.bienvenue p { margin: 0; }
.bienvenue .tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.bienvenue .tete > div { min-width: 0; }
.bienvenue .eglise { font-size: 0.85rem; font-weight: 700; overflow-wrap: anywhere; }
.bienvenue .logo { flex: none; box-sizing: border-box; width: auto; height: 90px; max-width: 50%; object-fit: contain; }
.bienvenue h1 { margin: 2px 0 0; font-size: 1.65rem; line-height: 1.15; }
.bienvenue h1 button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
/* Fenêtre « Couleurs de la bulle » : le sélecteur de couleur dessiné par l'appli (carré saturation / luminosité, curseur de teinte). */
.couleurs-bulle { display: grid; gap: 14px; margin: 4px 0 18px; }
.onglets-couleur { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.onglets-couleur .bouton[aria-pressed="true"] { background: var(--texte); color: var(--carte); border-color: var(--texte); }
.selecteur { display: grid; gap: 14px; }
.selecteur .carre {
  position: relative; width: 100%; min-width: 240px; height: 190px; border-radius: 14px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--teinte, #f00));
}
.selecteur .repere { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); pointer-events: none; }
.selecteur .teinte {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 11px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.selecteur .teinte::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.selecteur .teinte::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.bienvenue .prochain {
  position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px; border-radius: 18px; color: inherit; font: inherit; text-align: left;
  background: rgba(var(--trait), 0.14); border: 0;
  box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.45), inset -2px -3px 5px rgba(20, 24, 40, 0.18);
}
/* Le dessin de l'écran ouvert : à droite du prochain service, à gauche du compte dans les deux boutons. */
.bienvenue .prochain:has(.picto) { padding-right: 86px; }
.bienvenue .prochain .picto { position: absolute; right: 12px; top: 50%; width: 64px; height: 64px; margin: -32px 0 0; }
.bienvenue .chiffres .picto { width: 46px; height: 46px; margin: 0; filter: drop-shadow(0 2px 3px rgba(20, 24, 40, 0.25)); }
.bienvenue button { cursor: pointer; }
.bienvenue button:focus-visible { outline: 3px solid rgb(var(--trait)); outline-offset: 2px; }
.bienvenue .etiquette { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; }
.bienvenue .prochain strong { font-size: 1.15rem; line-height: 1.25; }
.bienvenue .prochain .avec { font-size: 0.9rem; }
.bienvenue .suivants, .bienvenue .chiffres { list-style: none; margin: 0; padding: 0; }
.bienvenue .suivants li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 2px; font-size: 0.92rem; border-bottom: 1px solid rgba(var(--trait), 0.25); }
.bienvenue .suivants li:first-child { margin-top: 6px; }
.bienvenue .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.bienvenue .chiffres:not(:empty) { margin-top: 14px; }
.bienvenue .chiffres li > * {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 10px 8px; border: 0; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)); color: #1c2330; font: inherit; text-align: left;
  box-shadow: inset 1px 2px 3px #fff, inset -2px -3px 5px rgba(20, 24, 40, 0.14), 0 3px 6px rgba(20, 24, 40, 0.18);
}
.bienvenue .chiffres .compte { display: flex; flex-direction: column; }
.bienvenue .chiffres strong { font-size: 1.3rem; line-height: 1.1; }
.bienvenue .chiffres .compte span { font-size: 0.78rem; color: #566074; }
.tuiles { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
/* Rangement des bulles au cliquer-glisser (js/glisser.js). */
.tuiles.suite li { -webkit-touch-callout: none; user-select: none; }
.tuiles.rangement .tuile { cursor: grabbing; }
.tuiles li.en-deplacement .tuile { transform: scale(1.05); opacity: 0.85; outline: 3px dashed color-mix(in srgb, var(--teinte, var(--accent)) 45%, #1f1b2e); outline-offset: 3px; }
.tuiles.suite { margin-top: 22px; padding-top: 22px; border-top: 2px solid color-mix(in srgb, currentColor 14%, transparent); }
/* Juste sous la bulle « Bienvenue », rien à séparer. */
.tuiles.suite:first-child { margin-top: 18px; padding-top: 0; border-top: 0; }
/* Bulle « verre » (tracé : js/verre.js) : une vitre teintée, qui laisse voir le fond ; le haut, pleine largeur, porte le titre (--bande :
   la hauteur du titre le plus haut de la liste), puis le corps (--corps), entaillé en bas à droite (--encoche) ; le dessin se pose dans l'entaille. */
.tuile {
  --t: var(--teinte, var(--accent)); --corps: 96px; --encoche: 96px;
  position: relative; display: block; width: 100%; height: calc(var(--bande, 54px) + var(--corps)); padding: 0;
  border: 0; background: none; color: #2b2118; font: inherit; text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
  transition: transform 0.12s ease;
}
.tuile::before { content: ""; position: absolute; inset: 0; clip-path: var(--forme); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tuile .forme { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--t) 55%, #6b6672)) drop-shadow(0 10px 14px color-mix(in srgb, var(--t) 34%, transparent)); }
.tuile strong { position: absolute; left: 16px; right: 12px; top: 16px; font-size: 1.2rem; font-weight: 800; line-height: 1.15; }
.tuile .picto { position: absolute; right: 0; bottom: 0; width: 88px; height: 88px; margin: 0; }
.tuile .v0 { stop-color: color-mix(in srgb, var(--t) 44%, #fff); stop-opacity: 0.4; } .tuile .v1 { stop-color: color-mix(in srgb, var(--t) 84%, #fff); stop-opacity: 0.58; }
.tuile .o0 { stop-color: #fff; stop-opacity: 0.95; } .tuile .o1 { stop-color: #fff; stop-opacity: 0; } .tuile .o2 { stop-color: color-mix(in srgb, var(--t) 55%, #1b1016); stop-opacity: 0.42; }
.tuile .bord { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
.tuile .galbe { fill: none; stroke-width: 22; filter: blur(5px); } .tuile .arete { fill: none; stroke-width: 3.5; filter: blur(0.7px); }
.tuile .coin { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0.95; filter: blur(1px); } .tuile .coin.faible { opacity: 0.45; }
.tuile .lueur { fill: #fff; opacity: 0.16; } .tuile .eclat { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0.9; filter: blur(0.6px); }
/* Le dessin en volume d'une bulle : toutes ses nuances, de la plus claire (--c0) à la plus sombre (--c5), viennent de la teinte de la bulle. */
.picto {
  flex: none; width: 80px; height: 80px; margin: auto -6px -8px auto; pointer-events: none; overflow: visible;
  --t: var(--teinte, var(--accent));
  --cl: color-mix(in srgb, var(--t) 18%, #fff); --c0: color-mix(in srgb, var(--t) 50%, #fff); --c1: color-mix(in srgb, var(--t) 78%, #fff);
  --c2: color-mix(in srgb, var(--t) 88%, #1b1016); --c3: color-mix(in srgb, var(--t) 62%, #1b1016);
  --c4: color-mix(in srgb, var(--t) 42%, #160d12); --c5: color-mix(in srgb, var(--t) 26%, #120a10);
  filter: drop-shadow(0 5px 6px rgba(20, 24, 40, 0.3));
}
.tuile:hover { transform: translateY(-2px); }
.tuile:active { transform: scale(0.98); }
@media (max-width: 420px) { .tuiles { grid-template-columns: repeat(2, 1fr); } .tuile { --corps: 82px; --encoche: 80px; } .tuile strong { left: 12px; right: 8px; top: 14px; } }
@media (max-width: 420px) { .picto { width: 68px; height: 68px; } .tuile .picto { width: 74px; height: 74px; } }
@media (prefers-reduced-motion: reduce) { .tuile { transition: none; } }

/* Messages : la pastille des non-lus (bulle de l'accueil et liste des canaux), la liste des canaux, le fil d'un canal. */
.non-lus { background: #d6362f; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 0.85rem; font-weight: 700; line-height: 1.4; }
.tuile .non-lus { position: absolute; top: 10px; right: 10px; min-width: 26px; text-align: center; opacity: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.canal {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px; border: 0; border-radius: 18px; color: #2b2118; font: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(155deg, color-mix(in srgb, var(--teinte) 26%, #fff) 0%, color-mix(in srgb, var(--teinte) 80%, #fff) 100%);
  box-shadow: 0 4px 10px rgba(40, 40, 60, 0.14);
}
.canal .picto { width: 48px; height: 48px; margin: 0; filter: drop-shadow(0 2px 3px rgba(20, 24, 40, 0.3)); }
.canal strong { flex: 1; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.fil { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.bulle-message { max-width: min(92%, 640px); justify-self: start; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px 16px 16px 4px; padding: 8px 12px; }
.bulle-message.mien { justify-self: end; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--teinte) 16%, var(--carte)); border-color: color-mix(in srgb, var(--teinte) 40%, var(--trait)); }
.bulle-message p { margin: 0; }
.bulle-message .qui { font-size: 0.85rem; }
.bulle-message .qui time { opacity: 0.7; white-space: nowrap; }
.bulle-message .texte { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.bulle-message .supprimer { display: block; margin: 4px 0 0 auto; padding: 4px 0; font-size: 0.85rem; color: var(--danger); background: none; border: 0; }
.bulle-message .choix { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.85rem; }
.bulle-message .choix input { width: 22px; height: 22px; }
.bulle-message.choisi { outline: 3px solid var(--danger); }
.selection { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; background: var(--fond); }
.selection[hidden] { display: none; }
.selection strong { flex: 1; }
.ecrire { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 12px; background: var(--fond); }
.ecrire textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 40vh; resize: vertical; font: inherit; }

/* Plannings */
/* Toutes les bulles de plannings à la même taille : celle de la plus haute (nom sur deux ou trois lignes). */
.tuiles-plannings { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; gap: 12px; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tuiles-plannings li { display: flex; }
.tuile-planning {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; width: 100%; height: auto; min-height: 132px; padding: 16px 14px;
  border: 0; border-radius: 22px; cursor: pointer; font: inherit; text-align: left; color: #2b2118; overflow-wrap: anywhere;
  background: linear-gradient(155deg, color-mix(in srgb, var(--teinte) 26%, #fff) 0%, color-mix(in srgb, var(--teinte) 88%, #fff) 100%);
  box-shadow: 0 8px 18px rgba(40, 40, 60, 0.18), inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease;
}
.tuile-planning strong { font-size: 1.2rem; font-weight: 800; line-height: 1.15; }
.tuile-planning span { font-size: 0.85rem; font-weight: 600; opacity: 0.8; }
.tuile-planning:hover { transform: translateY(-2px); }
.tuile-planning:active { transform: scale(0.98); }
/* La galerie de dessins d'un planning (dialogue « Régler ») : une case par dessin, à sa teinte ; la case choisie est entourée. */
fieldset.profils ul.galerie-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px 4px 8px; }
fieldset.profils ul.galerie-logos li { border-top: 0; padding: 0; display: block; }
fieldset.profils ul.galerie-logos label {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 8px; cursor: pointer;
  border: 2px solid transparent; border-radius: 14px; text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.15; color: #1f1b2e;
  background: linear-gradient(155deg, color-mix(in srgb, var(--teinte, var(--accent)) 26%, #fff) 0%, color-mix(in srgb, var(--teinte, var(--accent)) 88%, #fff) 100%);
}
fieldset.profils ul.galerie-logos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.profils ul.galerie-logos .picto { width: 50px; height: 50px; margin: 0; }
fieldset.profils ul.galerie-logos label:has(input:checked) { border-color: var(--texte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teinte, var(--accent)) 55%, transparent); }
fieldset.profils ul.galerie-logos label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .tuiles-plannings { grid-template-columns: repeat(2, 1fr); } }
/* Mode sombre : bulles foncées, teintées de leur couleur ; titre clair. */
[data-theme="sombre"] .tuile { color: #f1f4f8; }
[data-theme="sombre"] .tuile .forme { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); }
[data-theme="sombre"] .tuile .v0 { stop-color: color-mix(in srgb, var(--t) 46%, #232834); stop-opacity: 0.5; } [data-theme="sombre"] .tuile .v1 { stop-color: color-mix(in srgb, var(--t) 30%, #141821); stop-opacity: 0.6; }
[data-theme="sombre"] .tuile .o0 { stop-opacity: 0.4; } [data-theme="sombre"] .tuile .o2 { stop-color: #000; stop-opacity: 0.55; }
[data-theme="sombre"] .tuile .bord { stroke: color-mix(in srgb, var(--t) 40%, rgba(255, 255, 255, 0.25)); }
[data-theme="sombre"] .tuile .coin { opacity: 0.5; } [data-theme="sombre"] .tuile .coin.faible { opacity: 0.2; }
[data-theme="sombre"] .tuile .lueur { opacity: 0.07; } [data-theme="sombre"] .tuile .eclat { opacity: 0.6; }
[data-theme="sombre"] .tuile-planning, [data-theme="sombre"] .canal {
  color: #f1f4f8;
  background: linear-gradient(155deg, color-mix(in srgb, var(--teinte, var(--accent)) 34%, #12161d) 0%, color-mix(in srgb, var(--teinte, var(--accent)) 14%, #12161d) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px color-mix(in srgb, var(--teinte, var(--accent)) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) { .tuile-planning { transition: none; } }
select {
  min-height: 46px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--rayon);
  background: var(--creux); color: var(--texte); font: inherit; max-width: 100%;
}
input[type="radio"] { width: 22px; height: 22px; vertical-align: -4px; accent-color: var(--accent); }
input.nombre { width: 3.6em; min-height: 40px; padding: 6px 10px; text-align: center; }
.titre-carte { margin: 0 0 2px; font-size: 1.1rem; }
.tete-date { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tete-date h3, .tete-date h2 { margin: 0; font-size: 1.08rem; }
.tete-date h3::first-letter, .tete-date h2::first-letter { text-transform: uppercase; }
/* Planning en consultation : un mois, une ligne courte par date ; les jours où l'on sert ressortent. */
.mois-planning .ligne-date { padding: 10px 14px; }
.mois-planning .ligne-date.moi { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--carte)); }
.postes-courts { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.barre-mois { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 14px 0 10px; }
.choix-mois { display: flex; flex: 1 0 100%; align-items: center; justify-content: center; gap: 4px; }
.choix-mois .fleche { min-width: 56px; min-height: 52px; font-size: 2.4rem; }
/* Se déplacer d'un mois : simple signe, sans cadre. */
.fleche { min-width: 28px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.fleche:disabled { opacity: 0.3; cursor: default; }
.outils-mois { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bascule.courte button { min-width: 64px; min-height: 52px; padding: 0; font-size: 1.6rem; line-height: 1; }
.sous-titre { margin: 0 0 0 58px; font-size: 0.92rem; }
.actions .a-gauche { margin-right: auto; }
.tete-date .raccourci { width: 38px; height: 38px; font-size: 1rem; }
.choix-mois select { min-height: 52px; padding: 0 4px; border: 0; background: none; box-shadow: none; color: var(--texte); font: inherit; font-size: 1.25rem; font-weight: 700; }
.bascule { display: inline-flex; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.bascule button { min-height: 44px; padding: 0 14px; border: 0; background: var(--carte); color: var(--discret); font: inherit; cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); font-weight: 700; }
.jour.service { border-color: var(--accent); font-weight: 700; }
.grille-calendrier + .liste { margin-top: 12px; }
.tete-calendrier { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 10px 0 6px; }
.tete-calendrier h2 { margin: 0; padding: 0 4px; font-size: 1.25rem; text-align: center; }
.tete-calendrier .fleche { min-width: 56px; min-height: 52px; font-size: 2.4rem; }
.grille-calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jour-semaine { text-align: center; font-size: 0.8rem; color: var(--discret); padding: 4px 0; }
.jour {
  min-height: 42px; padding: 0; border: 1px solid var(--trait); border-radius: 10px;
  background: var(--carte); color: var(--texte); font: inherit; cursor: pointer;
}
.jour:hover:not(:disabled) { border-color: var(--accent); }
.jour:disabled { opacity: 0.35; cursor: default; }
.jour.prise:disabled { opacity: 0.6; background: var(--pastille); }
.jour.choisi { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); font-weight: 700; }
.postes { list-style: none; margin: 8px 0 0; padding: 0; }
.postes > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--trait); }
.poste { display: flex; flex-direction: column; flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
button.lien.nom-planning { padding: 0; min-height: 32px; font-weight: 600; text-align: left; }
.signalement { font-size: 0.95rem; margin: 8px 0 0; }
.lignes-postes { list-style: none; margin: 0; padding: 0; }
.lignes-postes li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0; }
.lignes-postes li:first-child { border-top: 0; }
.lignes-postes input[type="text"]:not(.nombre) { flex: 1 1 10em; width: auto; }
.lignes-postes .bouton { min-height: 40px; padding: 6px 12px; }
.lignes-postes .raccourci { width: 34px; height: 34px; font-size: 0.95rem; }
.lignes-postes li > p.aide { flex: 1 0 100%; margin: 0; }
/* Membres de l'association, compteurs, membres du conseil ajoutés à la main : un bloc par personne, qui se déroule quand on le touche (même geste que « Personnes et accès »). */
.lignes-postes.deroulants { display: grid; gap: 8px; }
.lignes-postes.deroulants > li:not(.vide) { display: block; padding: 0; border: 1px solid var(--trait); border-left: 6px solid var(--barre); border-radius: var(--rayon); background: var(--carte); }
/* Deux couleurs en alternance, pour distinguer un membre du suivant. */
.lignes-postes.deroulants > li:nth-child(odd) { --barre: #1f5fae; }
.lignes-postes.deroulants > li:nth-child(even) { --barre: #e08a1e; }
.lignes-postes.deroulants > li.vide { border: 0; }
.rubrique .lignes-postes.deroulants summary { cursor: pointer; padding: 6px 12px; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; border: 0; font-weight: 600; }
.lignes-postes.deroulants summary::-webkit-details-marker { display: none; }
.lignes-postes.deroulants summary::after { content: '▾'; color: var(--barre); font-size: 1.2rem; transition: transform 0.15s; }
.lignes-postes.deroulants details[open] summary::after { transform: rotate(180deg); }
.rubrique .lignes-postes.deroulants details[open] summary { border-bottom: 1px solid var(--trait); }
.lignes-postes.deroulants summary strong { flex: 1; overflow-wrap: anywhere; }
.lignes-postes.deroulants .corps-membre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
.lignes-postes.deroulants .corps-membre > p.aide { flex: 1 0 100%; margin: 0; }
fieldset.profils ul.en-ligne { display: flex; flex-wrap: wrap; gap: 4px 18px; }
fieldset.profils ul.en-ligne li { border-top: 0; flex: 0 0 auto; }
fieldset.profils ul.en-ligne label { flex: 0 0 auto; }

/* Écran d'accueil : même écran que celui de Comptage (croix, « Intendant », passage biblique), sur fond blanc quel que soit le thème.
   Il se retire seul : 3,4 s d'attente puis 0,4 s de fondu, sans dépendre d'aucun script. */
#splash {
  --accueil-encre: #14314f;
  --accueil-accent: #1f6fb2;
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center;
  background: #fff; color: var(--accueil-encre);
  font: normal 16px/normal -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: accueil-fondu .4s ease 3.4s forwards;
}
@keyframes accueil-fondu { to { opacity: 0; visibility: hidden; pointer-events: none; } }
#splash.fade { animation: accueil-fondu .4s ease forwards; } /* retrait immédiat (erreur à montrer) */
html.sans-accueil #splash { display: none; }
#splash .splash-top { align-self: stretch; justify-self: stretch; display: flex; align-items: center; justify-content: center; padding-top: 24px; }
#splash .splash-bottom { align-self: start; padding: 52px 20px 24px; text-align: center; }
#splash p.verse-ref { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accueil-accent); }
#splash .emblem { width: 250px; max-width: 65%; max-height: 90%; height: auto; object-fit: contain; mix-blend-mode: multiply; display: block; margin: 0 auto; }
#splash .verse { font-style: italic; font-size: 23px; line-height: 1.4; color: var(--accueil-encre); max-width: 380px; margin: 0 auto; text-align: center; }
#splash .splash-app { font-size: 40px; font-weight: 800; letter-spacing: .02em; color: var(--accueil-encre); text-align: center; }

/* Page d'accueil des Responsables : la semaine en cours, une teinte par planning. */
.bloc-semaine { margin-top: 22px; }
.carte.date.passe { opacity: 0.6; }
.services-semaine { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.service-semaine {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px;
  border-left: 6px solid var(--teinte); border-radius: 10px;
  background: color-mix(in srgb, var(--teinte) 14%, var(--carte));
}
.service-semaine strong { flex: 0 0 9em; }
.service-semaine .qui { display: flex; flex-direction: column; flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.bloc-semaine .case { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 8px; cursor: pointer; }
.bloc-semaine .case input { width: 20px; height: 20px; }

/* Écran « Mes absences » : les jours cochés, et la même marque dans le choix des personnes d'un planning. */
.jour.absent { background: var(--danger); color: var(--carte); border-color: var(--danger); font-weight: 700; }
.carte.absence { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte.absence span::first-letter { text-transform: uppercase; }
.fin.absence { color: var(--danger); font-weight: 700; }

/* Écran « Réglages de l'église » : des rubriques repliables, la barre de teinte sur le titre comme les autres écrans. */
.rubrique { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); margin: 12px 0; }
.rubrique summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; min-height: 44px; font-weight: 700; }
.rubrique[open] summary { border-bottom: 1px solid var(--trait); }
.rubrique .info-rubrique { font-weight: 400; color: var(--discret); font-size: 0.92rem; }
.rubrique .corps-rubrique { padding: 4px 16px 16px; }
.rubrique h3 { margin: 18px 0 6px; font-size: 1rem; }
.rubrique .champ input[type="text"], .rubrique .champ input[type="email"] { width: 100%; box-sizing: border-box; }
.rubrique .etiquette { font-weight: 600; margin: 0 0 4px; }
.rubrique .apercu-logo { display: flex; align-items: center; min-height: 80px; margin: 6px 0; }
.rubrique .apercu-logo img { max-width: 160px; max-height: 120px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; }
.rubrique .case { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.rubrique .case input { width: 20px; height: 20px; }
.rubrique input[type="color"] { width: 44px; height: 40px; padding: 2px; }
.prochain-service { margin-top: 18px; border-color: var(--accent); }
.prochain-service p { margin: 4px 0 0; }
.prochain-service p::first-letter { text-transform: uppercase; }
/* Code couleur du planning : une pastille devant la ligne, sans fond ni cadre. */
.postes-courts li.teinte { position: relative; padding-left: 18px; }
.postes-courts li.teinte::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--teinte); }
/* Postes sans personne : une rangée discrète, rond vide à la teinte du planning. */
.postes-vides { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.88rem; color: var(--discret, #6b7280); }
.postes-vides li.teinte { position: relative; padding-left: 16px; }
.postes-vides li.teinte::before, .rond-vide {
  content: ''; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--teinte, currentColor); background: transparent;
}
.legende-vide { position: relative; margin: 10px 0 0; padding-left: 16px; font-size: 0.85rem; color: var(--discret, #6b7280); }
/* Personne absente ce jour-là : grisée, non cochable. */
li.absent label { color: var(--discret); opacity: 0.6; cursor: not-allowed; text-decoration: line-through; }
li.absent input:disabled { cursor: not-allowed; }
/* Plannings : répéter une inscription sur les dates suivantes. */
.repeter { margin: 12px 0 4px; font-weight: 600; }
.serie { margin: 0 0 8px; padding: 2px 12px; border-left: 3px solid var(--accent); }
.serie[hidden] { display: none; }
.serie p { margin: 8px 0; }
details.suivantes { margin: 12px 0 0; }
details.suivantes summary { cursor: pointer; color: var(--discret); padding: 6px 0; }
details.suivantes .bouton { display: block; margin: 6px 0; }