/* Z'Impro - QG (la couleur principale vient des réglages : --zi-accent) */
:root { --zi-fond-appli:#fff; --zi-rayon-sm:6px; --zi-rayon-bouton:10px; --zi-accent:#EB6624; --zi-sur-accent:#fff; --zi-secondaire:#2b2b2a; --zi-texte:#2b2b2a; --zi-doux:#6b6b68; --zi-doux-2:#8a8a86; --zi-fond:#f6f5f2; --zi-surface:#eeece7; --zi-champ:#fff; --zi-filet:#e2e0da; --zi-ok:#2e9e4c; --zi-erreur:#b3412c; --zi-police-texte:inherit; --zi-police-titre:inherit; --zi-rayon:10px; --zi-rayon-lg:20px; }
.zi-qg { font-family:var(--zi-police-texte);
  max-width:1100px; margin:0 auto; padding:16px; color:var(--zi-texte); font-size:16px; line-height:1.5; box-sizing:border-box; }
.zi-qg *, .zi-qg *::before, .zi-qg *::after { box-sizing:inherit; }
.zi-qg .zi-entete { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-bottom:12px; border-bottom:3px solid var(--zi-secondaire); }
.zi-qg .zi-marque { font-weight:700; font-size:1.25rem; color:var(--zi-texte); text-decoration:none; }
.zi-qg .zi-marque span { color:var(--zi-accent); }
.zi-qg .zi-compte { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:.9rem; }
.zi-qg .zi-nom { font-weight:600; }
.zi-qg .zi-bascule { background:var(--zi-fond); border:1px solid var(--zi-filet); border-radius:999px; padding:4px 12px; color:var(--zi-texte); text-decoration:none; }
.zi-qg.zi-mode-bureau .zi-bascule { background:var(--zi-accent); border-color:var(--zi-accent); color:var(--zi-sur-accent); }
.zi-qg .zi-inline { display:inline; margin:0; }
.zi-qg .zi-lien { background:none; border:0; padding:0; color:var(--zi-doux); text-decoration:underline; cursor:pointer; font:inherit; }
.zi-qg .zi-onglets { display:flex; gap:4px; overflow-x:auto; min-width:0; }
.zi-qg .zi-onglets a { white-space:nowrap; padding:8px 14px; border-radius:var(--zi-rayon); color:var(--zi-texte); text-decoration:none; }
.zi-qg .zi-onglets a[aria-current="page"] { background:var(--zi-accent); color:var(--zi-sur-accent); }
.zi-qg .zi-pastille { display:inline-block; min-width:1.4em; padding:0 .4em; margin-left:.3em; border-radius:999px; background:var(--zi-erreur); color:#fff; font-size:.75rem; text-align:center; }
.zi-qg .zi-contenu h1 { font-size:1.6rem; margin:0 0 16px; }
.zi-qg .zi-message { padding:12px 16px; border-radius:var(--zi-rayon); margin:0 0 16px; }
.zi-qg .zi-message.zi-ok { background:#e8f0eb; border-left:4px solid var(--zi-ok); }
.zi-qg .zi-message.zi-erreur { background:#f8e9e5; border-left:4px solid var(--zi-erreur); }
.zi-qg .zi-note, .zi-qg .zi-aide { color:var(--zi-doux); }
.zi-qg .zi-aide { margin:0 0 12px; font-size:.9rem; }
.zi-qg .zi-tuiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.zi-qg .zi-tuile { display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--zi-filet); border-top:4px solid var(--zi-secondaire); border-radius:var(--zi-rayon); background:#fff; color:var(--zi-texte); text-decoration:none; }
.zi-qg .zi-tuile span { color:var(--zi-doux); font-size:.9rem; }
.zi-qg .zi-form { margin:0 0 20px; }
.zi-qg .zi-bloc { border:1px solid var(--zi-filet); border-radius:var(--zi-rayon); padding:16px; margin:0 0 16px; background:#fff; }
.zi-qg .zi-bloc legend { font-weight:700; padding:0 6px; }
.zi-qg .zi-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 16px; }
.zi-qg .zi-champ { margin:0 0 12px; display:flex; flex-direction:column; gap:4px; }
.zi-qg .zi-champ.zi-large { grid-column:1 / -1; }
.zi-qg .zi-form label { font-weight:600; font-size:.9rem; }
.zi-qg .zi-form input[type=text], .zi-qg .zi-form input[type=email], .zi-qg .zi-form input[type=tel], .zi-qg .zi-form input[type=date], .zi-qg .zi-form input:not([type]), .zi-qg .zi-form select, .zi-qg .zi-form textarea {
  width:100%; padding:10px 12px; border:1px solid var(--zi-filet); border-radius:var(--zi-rayon); font:inherit; background:#fff; }
.zi-qg .zi-form input:focus, .zi-qg .zi-form select:focus, .zi-qg .zi-form textarea:focus { outline:2px solid var(--zi-accent); outline-offset:1px; }
.zi-qg .zi-case { display:flex !important; align-items:center; gap:8px; font-weight:400 !important; margin:0 0 6px; }
.zi-qg .zi-droits { border:0; padding:0; margin:0 0 12px; }
.zi-qg .zi-droits legend { font-weight:700; margin-bottom:6px; }
.zi-qg .zi-bouton { display:inline-block; background:var(--zi-accent); color:var(--zi-sur-accent); border:0; border-radius:var(--zi-rayon-bouton); padding:11px 20px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.zi-qg .zi-bouton:hover { filter:brightness(.92); color:#fff; }
.zi-qg .zi-danger { background:var(--zi-erreur); }
.zi-qg .zi-attente { display:block; font-size:.85rem; background:#fdf3e7; border-radius:var(--zi-rayon-sm); padding:6px 10px; }
.zi-qg .zi-photo { width:96px; height:96px; object-fit:cover; border-radius:var(--zi-rayon); }
.zi-qg .zi-titre-actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.zi-qg .zi-titre-actions h1 { margin:0; }
.zi-qg .zi-tableau-defile { overflow-x:auto; margin:0 0 20px; }
.zi-qg .zi-tableau { width:100%; border-collapse:collapse; background:#fff; }
.zi-qg .zi-tableau th, .zi-qg .zi-tableau td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--zi-filet); vertical-align:top; }
.zi-qg .zi-tableau th { font-size:.85rem; color:var(--zi-doux); }
.zi-qg .zi-modif { display:grid; grid-template-columns:160px 1fr 1fr auto; gap:12px; padding:10px 0; border-bottom:1px solid var(--zi-filet); align-items:start; }
.zi-qg .zi-modif:last-child { border-bottom:0; }
.zi-qg .zi-modif-champ { font-weight:600; }
.zi-qg .zi-modif-avant { color:var(--zi-doux); text-decoration:line-through; }
.zi-qg .zi-modif-choix { display:flex; flex-direction:column; gap:2px; }
.zi-qg .zi-modif-choix label { font-weight:400; }
.zi-qg.zi-connexion { max-width:440px; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding-top:24px; padding-bottom:24px; }
.zi-qg.zi-connexion h1 { display:flex; align-items:center; gap:.35em; }
.zi-qg.zi-connexion h1 .zi-logo { height:1.15em; width:auto; max-width:none; flex:none; }
.zi-qg.zi-connexion h1 .zi-titre-nom span { font-weight:700; color:var(--zi-accent); }
.zi-qg.zi-connexion h1 { font-size:2em; line-height:1.15; font-weight:500; margin:0 0 20px; }
.zi-qg.zi-connexion .zi-form { display:flex; flex-direction:column; gap:8px; }
@media (max-width:640px) {
  .zi-qg .zi-modif { grid-template-columns:1fr; }
  .zi-qg .zi-modif-avant::before { content:"Avant : "; }
  .zi-qg .zi-modif-apres::before { content:"Après : "; font-weight:600; }
}
.zi-qg .zi-libelle { font-weight:600; font-size:.9rem; }

/* Titres : police des titres réglée dans Z'Impro → Réglages */
.zi-qg h1, .zi-qg h2, .zi-qg h3, .zi-qg legend, .zi-qg .zi-marque { font-family:var(--zi-police-titre); }

/* Barre : onglets à gauche, pictos des applis à droite ; espace doublé avant le contenu */
.zi-qg .zi-barre { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 40px; }
.zi-qg .zi-applis { display:flex; gap:4px; flex:none; }
.zi-qg .zi-applis a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--zi-rayon); color:var(--zi-texte); }
.zi-qg .zi-applis a:hover { background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); }
.zi-qg .zi-applis a[aria-current="page"] { background:var(--zi-accent); color:var(--zi-sur-accent); }
.zi-qg .zi-picto { width:22px; height:22px; display:block; }

/* Tuiles de l'accueil : fond blanc, picto dans sa pastille */
.zi-qg .zi-tuiles .zi-tuile { background:#fff; }
.zi-qg .zi-tuile:hover { border-color:var(--zi-secondaire); }
.zi-qg .zi-tuile .zi-tuile-picto { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:4px; border-radius:var(--zi-rayon); background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); }
.zi-qg .zi-tuile .zi-tuile-picto .zi-picto { width:24px; height:24px; }
.zi-qg .zi-tuile .zi-tuile-texte { color:var(--zi-doux); font-size:.9rem; }

/* En-tête : « Voir comme » et déconnexion */
.zi-qg .zi-voir-comme { display:inline-flex; align-items:center; gap:6px; }
.zi-qg .zi-voir-comme label { color:var(--zi-doux); }
.zi-qg .zi-voir-comme select { font:inherit; font-size:.9rem; padding:4px 8px; border:1px solid var(--zi-filet); border-radius:999px; background:#fff; color:var(--zi-texte); max-width:220px; }
.zi-qg.zi-simulation .zi-voir-comme select { background:var(--zi-accent); border-color:var(--zi-accent); color:var(--zi-sur-accent); }
.zi-qg .zi-sortie { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--zi-filet); border-radius:999px; background:#fff; color:var(--zi-texte); cursor:pointer; }
.zi-qg .zi-sortie:hover { color:var(--zi-erreur); border-color:var(--zi-erreur); }
.zi-qg .zi-sortie .zi-picto { width:18px; height:18px; }
.zi-qg .zi-bandeau-simulation { margin:12px 0 0; padding:8px 14px; border-radius:var(--zi-rayon); background:var(--zi-accent-teinte, #fdeee6); border-left:4px solid var(--zi-accent); font-size:.9rem; }
.zi-qg .zi-bandeau-simulation a { color:inherit; font-weight:600; }
.zi-qg .zi-bloc legend { color:var(--zi-secondaire); }
@media (max-width:640px) {
  .zi-qg .zi-barre { flex-direction:column; align-items:stretch; }
  .zi-qg .zi-applis { justify-content:flex-end; }
}

/* Menu du QG : survol et page en cours (dans une appli, c'est son picto à droite qui est marqué) */
.zi-qg .zi-onglets a { transition:background-color .15s ease, color .15s ease; }
.zi-qg .zi-onglets a:hover, .zi-qg .zi-onglets a:focus-visible { background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); text-decoration:none; }
.zi-qg .zi-onglets a:focus-visible { outline:2px solid var(--zi-accent); outline-offset:1px; }
.zi-qg .zi-onglets a[aria-current="page"], .zi-qg .zi-onglets a[aria-current="page"]:hover { background:var(--zi-accent); color:var(--zi-sur-accent); }
.zi-qg .zi-applis a { transition:background-color .15s ease, color .15s ease; }
.zi-qg .zi-applis a:focus-visible { outline:2px solid var(--zi-accent); outline-offset:1px; }
.zi-qg .zi-applis a[aria-current="page"]:hover { background:var(--zi-accent); color:var(--zi-sur-accent); }

/* Accueil : 5 cases par ligne, espacement de 16 px, cases centrées quand la ligne n'est pas complète */
.zi-qg .zi-tuiles { --zi-colonnes:5; --zi-ecart:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--zi-ecart); }
.zi-qg .zi-tuiles .zi-tuile { flex:0 0 calc((100% - (var(--zi-colonnes) - 1) * var(--zi-ecart)) / var(--zi-colonnes)); min-width:0; }
@media (max-width:1024px) { .zi-qg .zi-tuiles { --zi-colonnes:3; } }
@media (max-width:640px) { .zi-qg .zi-tuiles { --zi-colonnes:2; } }
@media (max-width:400px) { .zi-qg .zi-tuiles { --zi-colonnes:1; } }

/* Survol : texte en gras, sans décaler le menu (largeur réservée par une copie invisible en gras) */
.zi-qg .zi-onglet-texte { display:inline-flex; flex-direction:column; }
.zi-qg .zi-onglet-texte::after { content:attr(data-texte); font-weight:700; height:0; visibility:hidden; overflow:hidden; user-select:none; pointer-events:none; }
.zi-qg .zi-onglets a:hover .zi-onglet-texte, .zi-qg .zi-onglets a:focus-visible .zi-onglet-texte { font-weight:700; }

/* Place de la barre de défilement toujours réservée : pas de décalage entre une page courte et une page longue (feuille chargée sur le QG seulement) */
html { scrollbar-gutter:stable; }

/* Contenu d'une appli : sur le fond réglé (blanc par défaut), le même pour toutes les applis */
.zi-qg.zi-dans-appli .zi-contenu { background:var(--zi-fond-appli, #fff); border-radius:var(--zi-rayon-lg); }

/* Menu principal d'une appli (class « zi-menu-item » + data-texte) : mêmes états que le menu du QG.
   Page en cours : couleur principale pleine ; survol : couleur principale tamisée, texte en gras sans décalage. */
.zi-qg .zi-menu-item { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; font-weight:400; border-radius:var(--zi-rayon); transition:background-color .15s ease, color .15s ease; cursor:pointer; }
.zi-qg .zi-menu-item::after { content:attr(data-texte); font-weight:700; height:0; visibility:hidden; overflow:hidden; user-select:none; pointer-events:none; }
.zi-qg .zi-menu-item:hover, .zi-qg .zi-menu-item:focus-visible { background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); -webkit-text-fill-color:var(--zi-accent); font-weight:700; text-decoration:none; }
.zi-qg .zi-menu-item:focus-visible { outline:2px solid var(--zi-accent); outline-offset:1px; }
.zi-qg .zi-menu-item.is-active, .zi-qg .zi-menu-item.active, .zi-qg .zi-menu-item[aria-current="page"],
.zi-qg .zi-menu-item.is-active:hover, .zi-qg .zi-menu-item.active:hover, .zi-qg .zi-menu-item[aria-current="page"]:hover { background:var(--zi-accent); color:var(--zi-sur-accent); -webkit-text-fill-color:var(--zi-sur-accent); }
/* Applis : titre avec 25 px au-dessus, aligné sur le contenu (retrait de 20 px du cadre blanc) */
.zi-qg.zi-dans-appli { --zi-retrait-appli:20px; }
.zi-qg.zi-dans-appli .zi-contenu > h1:first-child { padding:25px var(--zi-retrait-appli) 0; margin:0 0 16px; }
/* Applis sans bandeau pleine largeur (Réservations, Compta) : le retrait est une marge intérieure du cadre */
.zi-qg.zi-appli-compta .zi-contenu, .zi-qg.zi-appli-reservations .zi-contenu { padding:25px var(--zi-retrait-appli) var(--zi-retrait-appli); }
.zi-qg.zi-appli-compta .zi-contenu h1, .zi-qg.zi-appli-reservations .zi-contenu h1 { margin-top:0; }
@media (max-width:640px) { .zi-qg.zi-dans-appli { --zi-retrait-appli:12px; } }
/* Tableaux de Réservations et de Compta : ni bordure autour ni entre les cases (les filets du thème sont retirés) ;
   seule la ligne du total garde son trait de séparation. */
.zi-qg.zi-appli-reservations table, .zi-qg.zi-appli-reservations th, .zi-qg.zi-appli-reservations td,
.zi-qg.zi-appli-compta table, .zi-qg.zi-appli-compta th, .zi-qg.zi-appli-compta td { border:0; }
.zi-qg.zi-appli-reservations .zi-res-tableau tfoot td { border-top:2px solid var(--zi-texte); }
.zi-qg.zi-appli-compta .zc-table tr.total td { border-top:2px solid var(--zi-texte); }
/* Titres des applis : capitales, gras, couleur secondaire (décors) */
.zi-qg.zi-dans-appli .zi-contenu > h1, .zi-qg.zi-dans-appli .zc-titre h1, .zi-qg.zi-dans-appli .zi-res-titre h1 { text-transform:uppercase; font-weight:700; letter-spacing:.02em; color:var(--zi-secondaire); }
/* Menus principaux des applis : même hauteur, même taille de texte partout */
.zi-qg.zi-dans-appli .zi-menu-item { box-sizing:border-box; min-height:36px; padding:8px 14px; border:0; font-size:.9rem; line-height:1.25; white-space:nowrap; background:transparent; color:var(--zi-menu-texte, var(--zi-texte)); -webkit-text-fill-color:var(--zi-menu-texte, var(--zi-texte)); }
/* États, plus forts que l'aspect de base (le texte blanc des bandeaux passe par --zi-menu-texte) */
.zi-qg.zi-dans-appli .zi-menu-item:hover, .zi-qg.zi-dans-appli .zi-menu-item:focus-visible { background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); -webkit-text-fill-color:var(--zi-accent); font-weight:700; }
.zi-qg.zi-dans-appli .zi-menu-item.is-active, .zi-qg.zi-dans-appli .zi-menu-item.active, .zi-qg.zi-dans-appli .zi-menu-item[aria-current="page"],
.zi-qg.zi-dans-appli .zi-menu-item.is-active:hover, .zi-qg.zi-dans-appli .zi-menu-item.active:hover, .zi-qg.zi-dans-appli .zi-menu-item[aria-current="page"]:hover { background:var(--zi-accent); color:var(--zi-sur-accent); -webkit-text-fill-color:var(--zi-sur-accent); }
/* Réservations et Compta : le titre partage sa ligne avec un choix de période ; il reste en haut, aligné sur les titres des autres applis */
.zi-qg.zi-dans-appli .zc-titre, .zi-qg.zi-dans-appli .zi-res-titre { align-items:flex-start; margin:0 0 16px; font-size:inherit; }
.zi-qg.zi-dans-appli .zc-titre h1, .zi-qg.zi-dans-appli .zi-res-titre h1 { margin:0; line-height:inherit; }

/* Passage d'une page du QG à l'autre : fondu, en-tête et menu immobiles (navigateurs qui le permettent) */
@view-transition { navigation:auto; }
.zi-qg .zi-entete { view-transition-name:zi-entete; }
.zi-qg .zi-barre { view-transition-name:zi-barre; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.18s; }
@media (prefers-reduced-motion:reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; } }
/* Ligne de titre d'une appli : titre à gauche, choix de la saison ou de la période à droite (même aspect partout) */
.zi-qg.zi-dans-appli .zi-contenu > .zi-titre-appli { padding:25px var(--zi-retrait-appli, 20px) 0; margin:0 0 16px; align-items:flex-start; }
.zi-qg.zi-dans-appli .zi-titre-appli h1 { margin:0; text-transform:uppercase; font-weight:700; letter-spacing:.02em; color:var(--zi-secondaire); }
.zi-qg .zi-titre-outils:empty { display:none; }
.zi-qg .zi-titre-outils > * { display:flex; align-items:center; gap:8px; margin:0; padding:0; background:none; }
.zi-qg .zi-titre-outils label, .zi-qg .zc-periode-choix, .zi-qg .zi-res-saison { font-size:.9rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--zi-doux); -webkit-text-fill-color:var(--zi-doux); }
.zi-qg .zi-titre-outils select, .zi-qg .zc-periode-choix select, .zi-qg .zi-res-saison select { height:40px; padding:8px 10px; border:1px solid var(--zi-filet); border-radius:var(--zi-rayon); background:#fff; color:var(--zi-texte); -webkit-text-fill-color:var(--zi-texte); font:inherit; font-size:.9rem; font-weight:400; }
/* Bandeau titre des applis : même hauteur partout (25 px au-dessus, 25 px dessous, contenu calé en bas) */
.zi-qg.zi-dans-appli { --zi-titre-haut:25px; --zi-titre-bas:25px; --zi-titre-hauteur:calc(var(--zi-titre-haut) + 40px + var(--zi-titre-bas)); }
.zi-qg.zi-dans-appli .zi-contenu > h1:first-child,
.zi-qg.zi-dans-appli .zi-contenu > .zi-titre-appli,
.zi-qg.zi-dans-appli .zc-titre,
.zi-qg.zi-dans-appli .zi-res-titre { box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; min-height:var(--zi-titre-hauteur); margin:0; padding-top:var(--zi-titre-haut); padding-bottom:var(--zi-titre-bas); }
.zi-qg.zi-dans-appli .zi-contenu > h1:first-child, .zi-qg.zi-dans-appli .zi-contenu > .zi-titre-appli { padding-left:var(--zi-retrait-appli); padding-right:var(--zi-retrait-appli); }
.zi-qg.zi-dans-appli .zc-titre h1, .zi-qg.zi-dans-appli .zi-res-titre h1, .zi-qg.zi-dans-appli .zi-titre-appli h1 { margin:0; line-height:1.2; }
/* Réservations et Compta : la marge du haut est portée par le bandeau titre, comme ailleurs */
.zi-qg.zi-appli-compta .zi-contenu, .zi-qg.zi-appli-reservations .zi-contenu { padding-top:0; }
.zi-qg.zi-appli-reservations .zi-res { margin-top:0; }
/* Menu du QG en pictos (même dessin que les pictos des applis) ; pastille du nombre à valider sur le picto */
.zi-qg .zi-menu-qg a { position:relative; }
.zi-qg .zi-menu-qg .zi-pastille { position:absolute; top:2px; right:2px; margin:0; min-width:16px; height:16px; padding:0 4px; line-height:16px; font-size:.65rem; font-weight:700; }
@media (max-width:640px) { .zi-qg .zi-barre { flex-direction:row; flex-wrap:wrap; align-items:center; } .zi-qg .zi-menu-qg { justify-content:flex-start; } }
/* Libellés sur deux lignes : interlignage aéré (le thème Hello met tous les « label » à un interlignage de 1) */
.zi-qg label, .zi-qg legend { line-height:1.35; }
/* Champs côte à côte (grilles des formulaires de toutes les applis) : libellés calés en haut, champs calés en bas,
   pour que les champs d'une même ligne restent alignés même quand un libellé passe sur deux lignes. */
.zi-qg .zc-champ:not(.case), .zi-qg .zicr-field, .zi-qg .zis-field, .zi-qg .zi-champ { display:flex; flex-direction:column; justify-content:flex-start; }
.zi-qg .zc-champ:not(.case) > label + *, .zi-qg .zicr-field > label + *, .zi-qg .zis-field > label + *, .zi-qg .zi-champ > label + * { margin-top:auto; }
/* Bandeau violet des applis, vide (Réservations) : bord à bord, même hauteur qu'un bandeau avec menu (10 + 36 + 10 px) */
.zi-qg.zi-dans-appli .zi-bandeau-appli { height:56px; margin:0 calc(-1 * var(--zi-retrait-appli, 20px)) 20px; background:var(--zi-secondaire); }
.zi-qg.zi-dans-appli .zi-bandeau-appli { box-sizing:border-box; display:flex; align-items:center; gap:4px; padding:0 var(--zi-retrait-appli, 20px); --zi-menu-texte:#fff; }
.zi-qg .zi-bandeau-appli .zi-menu-item { flex-direction:row; gap:8px; text-decoration:none; }
.zi-qg .zi-bandeau-appli .zi-menu-item::after { display:none; }
.zi-qg .zi-bandeau-appli .zi-picto { width:20px; height:20px; }
/* Menu du QG : libellés lus par les lecteurs d'écran, visibles seulement dans le menu replié (mobile) */
.zi-qg .zi-menu-libelle { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zi-qg .zi-burger { display:none; }
/* Smartphone, dans une appli : menu du QG replié derrière un bouton, pour que tout tienne sur une ligne avec les pictos des applis */
@media (max-width:640px) {
  .zi-qg.zi-dans-appli .zi-barre { position:relative; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; }
  .zi-qg.zi-dans-appli .zi-burger { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; padding:0; border:0; border-radius:var(--zi-rayon); background:transparent; color:var(--zi-texte); cursor:pointer; }
  .zi-qg.zi-dans-appli .zi-burger:hover, .zi-qg.zi-dans-appli .zi-burger[aria-expanded="true"] { background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); }
  .zi-qg.zi-dans-appli .zi-menu-qg { display:none; position:absolute; z-index:40; top:calc(100% + 6px); left:0; flex-direction:column; align-items:stretch; gap:2px; min-width:210px; padding:6px; background:#fff; border:1px solid var(--zi-filet); border-radius:var(--zi-rayon); box-shadow:0 10px 28px rgba(0,0,0,.14); }
  .zi-qg.zi-dans-appli .zi-menu-qg.zi-menu-ouvert { display:flex; }
  .zi-qg.zi-dans-appli .zi-menu-qg a { width:auto; justify-content:flex-start; gap:10px; padding:0 12px; }
  .zi-qg.zi-dans-appli .zi-menu-qg .zi-menu-libelle { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .zi-qg.zi-dans-appli .zi-menu-qg .zi-pastille { position:static; margin-left:auto; }
  .zi-qg.zi-dans-appli .zi-applis:not(.zi-menu-qg) { gap:2px; justify-content:flex-end; }
  .zi-qg.zi-dans-appli .zi-applis:not(.zi-menu-qg) a { width:38px; height:38px; }
}
/* Smartphone : pas de zoom automatique quand on touche un champ (iPhone zoome sous 16 px, ce qui fait sortir les
   fenêtres de l'écran) ; le zoom à deux doigts reste possible. Les fenêtres ne dépassent jamais la largeur de l'écran. */
@media (max-width:640px) {
  body.zi-page-qg input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  body.zi-page-qg select, body.zi-page-qg textarea { font-size:16px !important; }
  body.zi-page-qg .zc-modale__carte, body.zi-page-qg .zic-modale__carte, body.zi-page-qg .zicr-modal__box, body.zi-page-qg .zi-res-modale { box-sizing:border-box; max-width:100%; overflow-x:auto; }
  body.zi-page-qg .zc-modale, body.zi-page-qg .zic-modale, body.zi-page-qg .zicr-modal { padding:10px; }
  body.zi-page-qg .zc-modale__carte img, body.zi-page-qg .zic-modale__carte img, body.zi-page-qg .zicr-modal__box img { max-width:100%; height:auto; }
}
/* Menu replié d'une appli (bouton ☰ + onglet en cours), smartphone uniquement : Sélection, Compta */
.zi-qg .zi-burger-appli { display:none; }
@media (max-width:640px) {
  .zi-qg .zi-burger-appli { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:8px 12px; border:0; border-radius:var(--zi-rayon); background:transparent; color:#fff; -webkit-text-fill-color:#fff; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; white-space:nowrap; }
  .zi-qg .zi-burger-appli:hover, .zi-qg .zi-burger-appli[aria-expanded="true"] { background:var(--zi-accent-teinte, #fdeee6); color:var(--zi-accent); -webkit-text-fill-color:var(--zi-accent); }
  .zi-qg .zi-burger-appli .zi-picto { width:20px; height:20px; }
}
/* En-tête sur smartphone, en deux colonnes :
   gauche « Troupe QG » puis le nom ; droite « Voir comme » puis la liste et le bouton de sortie. */
@media (max-width:640px) {
  .zi-qg .zi-entete { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-areas:"marque libelle libelle" "nom liste sortie"; column-gap:8px; row-gap:6px; align-items:center; }
  .zi-qg .zi-entete .zi-compte, .zi-qg .zi-entete .zi-voir-comme { display:contents; }
  .zi-qg .zi-entete .zi-marque { grid-area:marque; align-self:end; }
  .zi-qg .zi-entete .zi-nom { grid-area:nom; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .zi-qg .zi-entete .zi-voir-comme label { grid-area:libelle; align-self:end; font-size:.8rem; }
  .zi-qg .zi-entete .zi-voir-comme select { grid-area:liste; max-width:150px; }
  .zi-qg .zi-entete .zi-compte > form:not(.zi-voir-comme) { grid-area:sortie; }
}
/* Pages annexes d'une appli (Réglages de Sélection, de Consos, de Créance…) : ce sont des formulaires du QG,
   pas des applis avec bandeau ; elles ont donc une marge intérieure dans le cadre blanc. */
.zi-qg.zi-sous-vue .zi-contenu { padding:var(--zi-titre-haut, 25px) var(--zi-retrait-appli, 20px) var(--zi-retrait-appli, 20px); }
.zi-qg.zi-sous-vue .zi-contenu > h1 { padding:0; }
/* Leurs tableaux sans le quadrillage du thème, comme dans Réservations et Compta */
.zi-qg.zi-sous-vue table, .zi-qg.zi-sous-vue th, .zi-qg.zi-sous-vue td { border:0; }
.zi-qg.zi-sous-vue thead th { border-bottom:1px solid var(--zi-filet); }
/* Réglages de Sélection → Types de spectacles : champ « Nom » assez large ; sur smartphone, une fiche par type
   (capsule, puis nom et couleur, puis comportement et suppression) au lieu d'un tableau trop étroit. */
.zi-qg .zis-types input[type=text] { width:100%; min-width:140px; box-sizing:border-box; }
.zi-qg .zis-types select { max-width:100%; }
@media (max-width:640px) {
  .zi-qg .zis-types thead { display:none; }
  .zi-qg .zis-types, .zi-qg .zis-types tbody { display:block; width:100%; }
  .zi-qg .zis-types tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--zi-filet); background:none !important; }
  .zi-qg .zis-types td { display:block; padding:0 !important; min-width:0; }
  .zi-qg .zis-types td:nth-child(1) { grid-column:1 / -1; }
  .zi-qg .zis-types td:nth-child(2) { grid-column:1; }
  .zi-qg .zis-types td:nth-child(3) { grid-column:2; }
  .zi-qg .zis-types td:nth-child(4) { grid-column:1; }
  .zi-qg .zis-types td:nth-child(5) { grid-column:2; }
  .zi-qg .zis-types td:empty { display:none; }
  .zi-qg .zis-types input[type=text], .zi-qg .zis-types select { width:100%; min-width:0; }
}
/* Cases à cocher : la case s'aligne sur la première ligne de son texte quand celui-ci passe sur plusieurs lignes */
.zi-qg .zi-case, .zi-qg .zc-champ.case, .zi-qg .zic-check-row, .zi-qg .zic-checkbox-row, .zi-qg .zicr-check-label { align-items:flex-start !important; }
.zi-qg .zi-case > input[type=checkbox], .zi-qg .zi-case > input[type=radio],
.zi-qg .zc-champ.case input[type=checkbox], .zi-qg .zic-check-row input[type=checkbox], .zi-qg .zic-checkbox-row input[type=checkbox],
.zi-qg .zicr-check-label > input[type=checkbox] { flex:none; margin-top:calc((1.35em - 1em) / 2 - 2px); }
/* Réglages de Sélection → Droits des postes : sur smartphone, une seule colonne (poste en titre, cases dessous) */
@media (max-width:640px) {
  .zi-qg .zis-droits-postes thead { display:none; }
  .zi-qg .zis-droits-postes, .zi-qg .zis-droits-postes tbody, .zi-qg .zis-droits-postes tr, .zi-qg .zis-droits-postes td { display:block; width:100%; box-sizing:border-box; }
  .zi-qg .zis-droits-postes tr { padding:12px 0; border-bottom:1px solid var(--zi-filet); background:none !important; }
  .zi-qg .zis-droits-postes td { padding:0 !important; }
  .zi-qg .zis-droits-postes td:first-child { margin-bottom:8px; font-size:1.05rem; }
}
/* Réglages de Sélection : pas de fond gris alterné dans les tableaux des types et des droits des postes */
.zi-qg .zis-droits-postes tr, .zi-qg .zis-droits-postes td, .zi-qg .zis-droits-postes th, .zi-qg .zis-types tr, .zi-qg .zis-types td, .zi-qg .zis-types th { background:none !important; }
/* Choix de couleur (QG) : pastille ronde, jamais étirée (sur iPhone la largeur et la hauteur différaient) */
.zi-qg input[type=color] { -webkit-appearance:none; appearance:none; box-sizing:border-box; width:40px; height:40px; min-width:40px; padding:0; border:1px solid var(--zi-filet); border-radius:50%; background:none; cursor:pointer; overflow:hidden; }
.zi-qg input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.zi-qg input[type=color]::-webkit-color-swatch { border:0; border-radius:50%; }
.zi-qg input[type=color]::-moz-color-swatch { border:0; border-radius:50%; }
/* Bouton carré à symbole (ex. « + » pour ajouter) : même hauteur que les champs */
.zi-qg .zi-bouton.zi-bouton-carre { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; padding:0; font-size:1.5rem; font-weight:700; line-height:1; }
/* La barre du QG (et son menu déroulant) passe au-dessus du contenu des applis et de leurs bandeaux (z-index 40 max),
   mais sous les fenêtres des applis (z-index 50 et plus) */
.zi-qg .zi-barre { position:relative; z-index:45; }
/* Rôles : titres des groupes de droits (QG, Compta…) alignés à gauche sur les cases */
.zi-qg .zi-droits legend, .zi-qg .zi-bloc .zi-droits legend { padding:0 !important; margin-left:0; }
/* Smartphone : « Troupe QG » et le nom plus proches l'un de l'autre */
@media (max-width:640px) {
  .zi-qg .zi-entete { row-gap:0; }
  .zi-qg .zi-entete .zi-marque { line-height:1.1; margin-bottom:0; }
  .zi-qg .zi-entete .zi-nom { line-height:1.2; align-self:start; }
  .zi-qg .zi-entete .zi-voir-comme label { margin-bottom:2px; }
}
/* Listes du QG (Membres, Rôles) : sans quadrillage du thème ; sur smartphone, une fiche par ligne
   (nom en titre, les autres colonnes dessous avec leur intitulé). */
.zi-qg .zi-tableau-fiches th, .zi-qg .zi-tableau-fiches td { border:0; border-bottom:1px solid var(--zi-filet); background:none !important; }
@media (max-width:640px) {
  .zi-qg .zi-tableau-fiches thead { display:none; }
  .zi-qg .zi-tableau-fiches, .zi-qg .zi-tableau-fiches tbody { display:block; width:100%; }
  .zi-qg .zi-tableau-fiches tr { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:12px 0; border-bottom:1px solid var(--zi-filet); }
  .zi-qg .zi-tableau-fiches td { display:block; padding:0 !important; border:0; font-size:.9rem; color:var(--zi-doux); }
  .zi-qg .zi-tableau-fiches td:first-child { flex:1 1 100%; font-size:1.05rem; font-weight:700; color:var(--zi-texte); }
  .zi-qg .zi-tableau-fiches td.zi-fiche-email { flex:1 1 100%; overflow-wrap:anywhere; }
  .zi-qg .zi-tableau-fiches td[data-label]::before { content:attr(data-label) " : "; color:var(--zi-doux-2); }
}
/* Smartphone : fiches des listes (Membres, Rôles) en cadres blancs avec marge intérieure ; Rôles : une info par ligne */
@media (max-width:640px) {
  .zi-qg .zi-tableau-fiches { background:none; border-collapse:separate; }
  .zi-qg .zi-tableau-fiches tbody { display:flex; flex-direction:column; gap:10px; }
  .zi-qg .zi-tableau-fiches tr { padding:12px 14px; background:#fff !important; border:1px solid var(--zi-filet); border-radius:var(--zi-rayon); }
  .zi-qg .zi-fiches-lignes tr { flex-direction:column; align-items:stretch; gap:4px; }
  .zi-qg .zi-fiches-lignes td { flex:none; }
}
/* Champs date et heure : ne dépassent jamais de leur cadre (iPhone leur donne une largeur minimale propre) */
.zi-qg input[type=date], .zi-qg input[type=time], .zi-qg input[type=datetime-local], .zi-qg input[type=month] { box-sizing:border-box; max-width:100%; min-width:0; }
@supports (-webkit-touch-callout:none) {
  .zi-qg input[type=date], .zi-qg input[type=time], .zi-qg input[type=datetime-local], .zi-qg input[type=month] { -webkit-appearance:none; appearance:none; display:block; min-height:44px; text-align:left; }
  .zi-qg input::-webkit-date-and-time-value { text-align:left; margin:0; }
}
/* Ordinateur et tablette : champs, listes et boutons standard à la même hauteur (40 px) dans le QG et toutes les
   applis, pour qu'ils s'alignent quand ils sont sur la même ligne. Les petites commandes (cases, +/-, boutons
   « petit », pastilles, menus) gardent leur taille ; sur smartphone, les applis gardent leurs tailles tactiles. */
@media (min-width:641px) {
  .zi-qg input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]),
  .zi-qg select:not([multiple]) { box-sizing:border-box; height:40px !important; min-height:40px !important; padding-top:0 !important; padding-bottom:0 !important; line-height:normal; }
  .zi-qg .zi-bouton:not(.zi-bouton-carre), .zi-qg .zc-btn:not(.petit), .zi-qg .zis-btn, .zi-qg .zicr-btn,
  .zi-qg .zic-btn-accent, .zi-qg .zic-btn-neutre, .zi-qg .zic-btn-danger, .zi-qg .zic-dest-btn, .zi-qg .zic-mode-btn, .zi-qg .zic-export-btn, .zi-qg .zic-scroll-bas,
  .zi-qg #zic-app .zic-encodage__actions button, .zi-qg .zic-login__form button, .zi-qg .zc-ligne-poste button, .zi-qg .zis-icon-btn,
  .zi-qg .zc-filtres-menu > summary, .zi-qg input[type=submit], .zi-qg input[type=button] {
    box-sizing:border-box; height:40px !important; min-height:40px !important; padding-top:0 !important; padding-bottom:0 !important;
    display:inline-flex; align-items:center; justify-content:center; line-height:1.2 !important; vertical-align:middle;
  }
  .zi-qg .zis-icon-btn, .zi-qg .zc-ligne-poste button { min-width:40px; }
}
@media (min-width:641px) { .zi-qg .zi-sortie { width:40px; height:40px; } } /* même hauteur que « Voir comme » à côté */
/* Ordinateur : « Troupe QG » calé sur le bas du choix « Voir comme » */
@media (min-width:641px) { .zi-qg .zi-entete { align-items:flex-end; } .zi-qg .zi-entete .zi-marque { line-height:1; padding-bottom:4px; } }
/* Smartphone : la colonne de gauche (troupe, nom) calée sur le bas du choix « Voir comme », comme sur ordinateur */
@media (max-width:640px) { .zi-qg .zi-entete .zi-nom { align-self:end; padding-bottom:4px; line-height:1.1; } }
/* Le nom n'est plus dans l'en-tête (il figure sur la page) : sur smartphone, « Troupe QG » prend sa place, sur la ligne du choix « Voir comme » */
@media (max-width:640px) {
  .zi-qg .zi-entete { grid-template-areas:". libelle libelle" "marque liste sortie"; }
  .zi-qg .zi-entete .zi-marque { align-self:end; padding-bottom:6px; }
}
/* Smartphone : « Troupe QG » plus grand (2 rem) */
@media (max-width:640px) { .zi-qg .zi-entete .zi-marque { font-size:2rem; line-height:1; padding-bottom:2px; } }
/* Smartphone : sans le libellé « Voir comme » (la liste reste nommée pour les lecteurs d'écran) ; en-tête sur une ligne */
@media (max-width:640px) {
  .zi-qg .zi-entete { grid-template-areas:"marque liste sortie"; align-items:center; }
  .zi-qg .zi-entete .zi-voir-comme label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .zi-qg .zi-entete .zi-marque { align-self:center; padding-bottom:0; }
}
/* Onglets des applis (Sélection, Créance) : texte sur ordinateur, pictos sur smartphone à la place du menu replié */
.zi-qg .zi-picto-onglet { display:none; }
@media (max-width:640px) {
  .zi-qg .zis-barre .zi-burger-appli, .zi-qg .zicr-topbar .zi-burger-appli { display:none !important; }
  .zi-qg .zis-barre .zis-tabs, .zi-qg .zicr-topbar .zicr-menu-onglets { display:flex !important; position:static !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center; gap:2px !important; min-width:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; --zi-menu-texte:#fff !important; }
  .zi-qg .zis-barre .zis-tabs .zi-menu-item, .zi-qg .zicr-menu-onglets .zi-menu-item { width:40px; min-width:40px; height:36px; padding:0 !important; flex-direction:row; align-items:center; justify-content:center; }
  .zi-qg .zis-barre .zi-menu-item::after, .zi-qg .zicr-menu-onglets .zi-menu-item::after { display:none; }
  .zi-qg .zis-barre .zi-picto-onglet, .zi-qg .zicr-menu-onglets .zi-picto-onglet { display:block; width:22px; height:22px; }
  .zi-qg .zis-barre .zis-tabs .zi-onglet-libelle, .zi-qg .zicr-menu-onglets .zi-onglet-libelle { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
/* Réservations : bouton « Scanner les billets » sur toute la largeur du bandeau */
.zi-qg .zi-bandeau-appli .zi-res-scanner { flex:1 1 auto; justify-content:center; }
/* Pictos des onglets : même case pour tous (active ou non), picto centré */
@media (max-width:640px) {
  .zi-qg .zis-barre .zis-tabs .zi-menu-item, .zi-qg .zicr-menu-onglets .zi-menu-item { display:inline-flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; margin:0 !important; border:0 !important; line-height:0 !important; vertical-align:middle; }
  .zi-qg .zis-barre .zi-picto-onglet, .zi-qg .zicr-menu-onglets .zi-picto-onglet { flex:none; margin:0 !important; }
  .zi-qg .zis-barre { align-items:center; }
}
/* Pastille du nombre à traiter sur un picto d'onglet (Créance → Demandes de frais) : smartphone uniquement,
   sur ordinateur le nombre est déjà dans le libellé. */
.zi-qg .zi-onglet-nb { display:none; }
@media (max-width:640px) {
  .zi-qg .zicr-menu-onglets .zi-menu-item { position:relative; }
  .zi-qg .zi-onglet-nb { display:block; position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:var(--zi-erreur, #b3261e); color:#fff; -webkit-text-fill-color:#fff; font-size:.65rem; font-weight:700; line-height:16px; text-align:center; }
}
/* Smartphone : une seule colonne de cases d'applis sur l'accueil */
@media (max-width:640px) { .zi-qg .zi-tuiles { --zi-colonnes:1; } }
/* Smartphone : cases d'applis en ligne, picto à gauche, titre et description à droite */
@media (max-width:640px) {
  .zi-qg .zi-tuiles .zi-tuile { display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; column-gap:14px; row-gap:2px; align-items:center; }
  .zi-qg .zi-tuile .zi-tuile-picto { grid-column:1; grid-row:1 / span 2; margin:0; align-self:center; }
  .zi-qg .zi-tuile > strong { grid-column:2; grid-row:1; align-self:end; }
  .zi-qg .zi-tuile .zi-tuile-texte { grid-column:2; grid-row:2; align-self:start; }
}
/* Animation d'entrée du QG : nom de la troupe lettre par lettre, « QG » qui glisse depuis la droite, 3 s, puis tout
   descend et dévoile le QG. Voile visible dès le chargement ; les animations démarrent avec .zi-intro-joue. */
#zi-intro { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; background:var(--zi-intro-fond); color:var(--zi-intro-texte); overflow:hidden; cursor:pointer; }
#zi-intro .zi-intro-marque { display:flex; align-items:baseline; gap:.35em; font-family:var(--zi-police-titre, inherit); font-weight:700; font-size:clamp(2.2rem, 9vw, 5.5rem); line-height:1; white-space:nowrap; }
#zi-intro .zi-intro-nom span { display:inline-block; opacity:0; transform:translateY(.25em); }
#zi-intro .zi-intro-qg { display:inline-block; color:var(--zi-intro-qg); opacity:0; transform:translateY(150px); }
#zi-intro.zi-intro-joue { animation:zi-intro-sortie .7s cubic-bezier(.6,0,.35,1) var(--zi-intro-sortie) forwards; }
#zi-intro.zi-intro-joue .zi-intro-nom span { animation:zi-intro-lettre .35s ease-out forwards; }
#zi-intro.zi-intro-joue .zi-intro-qg { animation:zi-intro-qg .6s cubic-bezier(.2,.8,.2,1) var(--zi-intro-qg-debut) forwards; }
@keyframes zi-intro-lettre { to { opacity:1; transform:none; } }
@keyframes zi-intro-qg { to { opacity:1; transform:none; } }
@keyframes zi-intro-sortie { to { transform:translateY(100%); } }
/* Animation d'entrée : deux lignes blanches de la largeur du texte, 20 px au-dessus (arrive de la gauche) et
   25 px en dessous (arrive de la droite), une fois tout le texte affiché ; elles descendent avec le reste. */
#zi-intro .zi-intro-marque { position:relative; }
#zi-intro .zi-intro-marque::before, #zi-intro .zi-intro-marque::after { content:""; position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:2px; opacity:0; }
#zi-intro .zi-intro-marque::before { top:-20px; transform:translateX(-100vw); }
#zi-intro .zi-intro-marque::after { bottom:-25px; transform:translateX(100vw); }
#zi-intro.zi-intro-joue .zi-intro-marque::before, #zi-intro.zi-intro-joue .zi-intro-marque::after { animation:zi-intro-ligne .6s cubic-bezier(.2,.8,.2,1) var(--zi-intro-lignes) forwards; }
@keyframes zi-intro-ligne { to { opacity:1; transform:none; } }
/* Ordinateur et tablette : « Troupe QG » deux fois plus grand dans l'en-tête, sur toutes les pages du QG */
@media (min-width:641px) { .zi-qg .zi-entete .zi-marque { font-size:2.5rem; } }
/* Cases d'applis de l'accueil : bordure de couleur secondaire en bas plutôt qu'en haut */
.zi-qg .zi-tuiles .zi-tuile { border-top:1px solid var(--zi-filet); border-bottom:4px solid var(--zi-secondaire); }
/* Bandeaux mauves des applis : toujours la même hauteur (56 px), avec ou sans boutons à l'intérieur */
.zi-qg.zi-dans-appli { --zi-bandeau-hauteur:56px; }
.zi-qg .zis-barre, .zi-qg .zicr-topbar, .zi-qg .zc-menu, .zi-qg.zi-dans-appli .zi-bandeau-appli, .zi-qg #zic-app .zic-entete {
  box-sizing:border-box; min-height:var(--zi-bandeau-hauteur); padding-top:0 !important; padding-bottom:0 !important; display:flex; align-items:center; /* min-height : un menu qui passe sur deux lignes (écran étroit) garde sa place */
}
.zi-qg .zicr-topbar .zicr-topbar__inner { width:100%; height:100%; display:flex; align-items:center; }
/* Bandeau rappel du mode maintenance (visible des administrateurs) */
.zi-qg .zi-bandeau-maintenance { border-left-color:var(--zi-erreur, #b3261e); background:#fbe9e7; }

/* Pas de zoom au double toucher dans les applis du QG (le zoom à deux doigts reste possible) */
body.zi-page-qg, .zi-qg { touch-action: manipulation; }

/* Accueil : répartition des applis en lignes équilibrées sur grand écran (nombre de colonnes calculé par le QG au-delà de 5 applis) */
@media (min-width:1025px) { .zi-qg .zi-tuiles { --zi-colonnes: var(--zi-colonnes-auto, 5); } }

/* Membres : petite icône « fiche + crayon » à droite de chaque ligne pour demander au membre de compléter sa fiche ;
   un point signale qu'une demande a déjà été envoyée (date dans l'infobulle) */
.zi-qg .zi-tableau-fiches td.zi-fiche-actions { width:1%; text-align:right; white-space:nowrap; }
.zi-qg button.zi-bouton-icone { position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; min-width:32px; min-height:0; padding:0; margin:0; border:0; border-radius:8px; background:transparent; color:var(--zi-doux); cursor:pointer; box-shadow:none; transition:color .15s, background .15s; }
.zi-qg button.zi-bouton-icone:hover, .zi-qg button.zi-bouton-icone:focus-visible { color:var(--zi-accent); background:rgba(0,0,0,.05); }
.zi-qg button.zi-bouton-icone .zi-picto { width:20px; height:20px; }
.zi-qg .zi-fiche-actions form.zi-inline { display:inline-flex; margin:0; vertical-align:middle; }
@media (min-width:641px) {
  /* Texte des lignes centré verticalement sur l'icône (sinon le texte reste collé en haut de la cellule) */
  .zi-qg .zi-tableau-fiches td { vertical-align:middle; }
}
.zi-qg button.zi-bouton-icone.zi-demande-faite::after { content:''; position:absolute; top:4px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--zi-accent); }
@media (max-width:640px) {
  .zi-qg .zi-tableau-fiches td.zi-fiche-actions { width:auto; text-align:left; }
  .zi-qg .zi-tableau-fiches td.zi-fiche-actions:empty { display:none; }
}

/* Accueil du QG (administrateurs) : engrenage en haut à droite d'une case, vers les réglages de l'appli */
.zi-qg .zi-tuiles .zi-tuile-bloc { position:relative; display:grid; flex:0 0 calc((100% - (var(--zi-colonnes) - 1) * var(--zi-ecart)) / var(--zi-colonnes)); min-width:0; }
.zi-qg .zi-tuiles .zi-tuile-bloc > .zi-tuile { min-width:0; }
.zi-qg .zi-tuile-reglages { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; color:var(--zi-doux); text-decoration:none; transition:color .15s, background .15s; }
.zi-qg .zi-tuile-reglages:hover, .zi-qg .zi-tuile-reglages:focus-visible { color:var(--zi-accent); background:rgba(0,0,0,.05); }
.zi-qg .zi-tuile-reglages .zi-picto { width:20px; height:20px; }
@media (max-width:640px) { .zi-qg .zi-tuiles .zi-tuile-bloc > .zi-tuile { padding-right:52px; } .zi-qg .zi-tuile-reglages { top:50%; transform:translateY(-50%); } }