/* Kidakech : console client (/pro/), maquette « Console client » (menu à gauche repliable, ☰ sur téléphone). */
body.console { background: var(--fond-2); }
/* Thème sombre des consoles : dans site.css, --fond-2 et --surface ont la même valeur en sombre ; les cartes, tuiles et chiffres
   se fondaient dans la page. Ici, la page et les zones « en creux » prennent le fond le plus sombre et les cartes gardent --surface. */
:root[data-theme="dark"] body.console { --fond-2: #12152A; --cs-creux: #262B4A; }
body.console { --cs-creux: var(--fond-2); }
:root[data-theme="dark"] body.console .cs-carte, :root[data-theme="dark"] body.console .tuile { border: 1px solid var(--bord-doux); }
/* Attente : cadre et squelette léger plutôt qu'un simple texte. */
.console-chargement { padding: 40px 24px; color: var(--texte-2); }
.console-attente { display: flex; min-height: 100vh; }
.console-attente .sq-nav { flex: 0 0 250px; background: var(--surface); border-inline-end: 1px solid var(--bord); padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.console-attente .sq-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 860px) { .console-attente { display: block; } .console-attente .sq-nav { flex-basis: auto; flex-direction: row; align-items: center; justify-content: space-between; border-inline-end: 0; border-bottom: 1px solid var(--bord); padding: 10px 16px; min-height: 65px; } .console-attente .sq-nav .sq-lien { display: none; } .console-attente .sq-main { padding: 20px 16px; } }
.squelette { display: flex; flex-direction: column; gap: 18px; }
.sq-carte { min-height: 120px; }
.sq { display: block; height: 14px; width: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--bord-doux) 0%, var(--bord) 50%, var(--bord-doux) 100%); background-size: 200% 100%; animation: sq-reflet 1.4s ease-in-out infinite; }
.sq-titre { height: 28px; width: 55%; max-width: 360px; }
.sq-lien { height: 32px; }
@keyframes sq-reflet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sq { animation: none; } }
.maj-cache { font-size: 13px; color: var(--texte-2); background: var(--cs-creux); border-radius: 10px; padding: 8px 12px; }
.maj-cache.echec { color: var(--t-corail-texte); background: var(--t-corail); }
.cs { display: flex; min-height: 100vh; }
.cs-colonne { flex: 1 1 auto; min-width: 0; }
.cs-nav { flex: 0 0 250px; width: 250px; background: var(--surface); border-inline-end: 1px solid var(--bord); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cs.plie .cs-nav { flex-basis: 72px; width: 72px; }
.cs.plie .cs-nav .lib, .cs.plie .cs-marque .sous { display: none; }
.cs-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 14px; }
.cs-marque { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.cs-marque .logo-mot { font-size: 20px; }
.cs-marque .sous { font-size: 11px; font-weight: 600; color: var(--lien); letter-spacing: .8px; text-transform: uppercase; }
.cs.plie .cs-marque { display: none; }
.cs-nav a, .cs-nav button.lien-nav { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--texte); font-size: 15px; background: none; border: 0; cursor: pointer; text-align: start; width: 100%; }
.cs-nav a:hover, .cs-nav button.lien-nav:hover { background: var(--cs-creux); }
.cs-nav a[aria-current="page"] { background: var(--t-ciel); color: var(--t-ciel-texte); font-weight: 600; }
.cs-nav svg { flex: 0 0 20px; }
.cs-nav .compteur { margin-inline-start: auto; background: var(--corail); color: var(--corail-texte); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.cs.plie .cs-nav .compteur { position: absolute; top: 4px; inset-inline-end: 4px; }
.cs-nav .bas { margin-top: auto; border-top: 1px solid var(--bord); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cs-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px 64px; display: flex; flex-direction: column; gap: 20px; }
.cs-barre { display: none; }
.cs-barre-cale { width: 44px; flex: 0 0 44px; }
.cs-nav .fermer-menu { display: none; }
@media (max-width: 860px) {
  .cs { display: block; }
  /* Tiroir fermé : caché aussi au clavier et aux lecteurs d'écran (visibility). */
  .cs-nav { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--ombre-forte); width: min(300px, 86vw); padding: max(16px, env(safe-area-inset-top)) 16px 16px max(16px, env(safe-area-inset-left)); }
  .cs.menu-ouvert .cs-nav { visibility: visible; transition: transform .2s ease, visibility 0s; }
  .cs-nav .fermer-menu { display: inline-flex; }
  .cs-nav .cs-tete { padding: 0 0 12px 4px; }
  [dir="rtl"] .cs-nav { inset: 0 0 0 auto; transform: translateX(105%); }
  .cs.menu-ouvert .cs-nav { transform: none; }
  .cs.plie .cs-nav { width: min(300px, 86vw); flex-basis: auto; }
  .cs.plie .cs-nav .lib, .cs.plie .cs-marque { display: flex; }
  .cs-nav .replier { display: none; }
  .cs-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 50; }
  .cs-main { padding: 20px 16px 64px; }
  .cs-voile { position: fixed; inset: 0; background: rgba(12,14,30,.4); z-index: 55; }
}
.cs-titre p { font-size: 14px; color: var(--texte-2); }
.cs-titre h1 { font-size: clamp(24px, 4vw, 30px); letter-spacing: -.6px; margin-top: 2px; }
.cs-carte { background: var(--surface); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cs-carte h2 { font-size: 19px; font-weight: 700; }
.cs-grille { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cs-grille > * { flex: 1 1 340px; min-width: 0; }
.cs-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bord); align-items: center; }
.cs-ligne:first-of-type { border-top: 0; }
.cs-ligne .infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-ligne .infos strong { font-weight: 600; }
.etat { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--t-gris); color: var(--texte-2); }
.etat-publiee { background: var(--t-menthe); color: var(--t-menthe-texte); }
.etat-attente { background: var(--t-soleil); color: var(--t-soleil-texte); }
.etat-a_corriger { background: var(--t-corail); color: var(--t-corail-texte); }
.barre-progres { height: 10px; border-radius: 999px; background: var(--cs-creux); overflow: hidden; }
.barre-progres span { display: block; height: 100%; background: var(--t-menthe-texte); border-radius: 999px; }
.manques { font-size: 14px; color: var(--t-corail-texte); }
.motif { background: var(--t-corail); color: var(--t-corail-texte); border-radius: 12px; padding: 10px 12px; font-size: 14px; }

/* Formulaires de la console */
.cs-form { display: flex; flex-direction: column; gap: 14px; }
.cs-champ { display: flex; flex-direction: column; gap: 6px; }
.cs-champ > label, .cs-champ > .lib-champ { font-weight: 500; font-size: 14px; }
.cs-champ .aide { font-size: 13px; color: var(--texte-2); }
.cs-champ input:not([type=checkbox]):not([type=radio]), .cs-champ select, .cs-champ textarea { font-size: 16px; padding: 10px 12px; min-height: 48px; border: 2px solid var(--bord); border-radius: 12px; background: var(--surface); color: var(--texte); width: 100%; }
.cs-champ textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.cs-champ input:focus, .cs-champ select:focus, .cs-champ textarea:focus { border-color: var(--ciel); outline: none; }
.cs-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cs-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-onglets button { color: var(--texte); font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--bord); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cs-onglets button[aria-current="step"] { border-color: var(--ciel); background: var(--t-ciel); color: var(--t-ciel-texte); }
.cs-onglets .num { width: 22px; height: 22px; border-radius: 999px; background: var(--cs-creux); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.cs-onglets .fait .num { background: var(--t-menthe-texte); color: var(--fond); }
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; bottom: 0; background: var(--fond-2); padding: 12px 0; border-top: 1px solid var(--bord); }
.cs-actions .pousser { margin-inline-start: auto; }
.cs-carte .cs-actions { background: var(--surface); }
/* Boutons des consoles : jamais plus larges que l'écran (texte sur deux lignes au besoin). */
.cs-main .bouton, .connexion .bouton { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }
.compteur-car { font-size: 12px; color: var(--texte-2); align-self: flex-end; }
.cs-carte-lieu { position: relative; height: 340px; border-radius: 16px; overflow: hidden; background: var(--cs-creux); }
.cs-carte-lieu .gmap { position: absolute; inset: 0; }
.precision { font-size: 13px; }
.precision.faible { color: var(--t-corail-texte); font-weight: 600; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-items: start; }
/* Vignette en haut, boutons dessous (et non par-dessus) : lisibles à 360 px, cibles de 44 px. */
.photo { position: relative; border-radius: 12px; overflow: hidden; background: var(--cs-creux); border: 2px solid var(--bord); display: flex; flex-direction: column; color: var(--texte); }
.photo > img, .photo .vignette img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.photo .vignette { position: relative; aspect-ratio: 4 / 3; }
.photo .vignette img { height: 100%; }
.photo.principale { border-color: var(--corail); }
.photo .actions-photo { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--surface); }
.photo .actions-photo button { flex: 1 1 auto; font-size: 13px; font-weight: 600; border: 1px solid var(--bord); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: var(--texte); cursor: pointer; min-height: 44px; }
.photo .actions-photo button:hover { border-color: var(--texte-2); }
.photo .badge-principale { position: absolute; top: 6px; inset-inline-start: 6px; background: var(--corail); color: var(--corail-texte); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.photo .progres { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12,14,30,.55); color: #FFFFFF; font-size: 13px; font-weight: 600; text-align: center; padding: 6px; }
.jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.connexion { max-width: 520px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 18px; }
.connexion .cs-carte { padding: 22px; }
.case { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 44px; cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 0; accent-color: var(--corail); flex: none; }
.invite { background: var(--t-soleil); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .cs-actions { position: static; } .cs-actions .bouton { flex: 1 1 140px; } .cs-actions .pousser { margin-inline-start: 0; } }
/* Téléphone en paysage (hauteur faible) : barres non collantes, pour garder de la place au formulaire. */
@media (max-height: 500px) { .cs-actions, .cs-barre { position: static; } }

/* Messages, champs à corriger, confirmations */
.erreur-champ { display: block; font-size: 13px; font-weight: 600; color: var(--t-corail-texte); }
.cs-champ [aria-invalid="true"] { border-color: var(--t-corail-texte) !important; }
.case input[aria-invalid="true"] { outline: 2px solid var(--t-corail-texte); outline-offset: 2px; }
.etat-envoi .bouton-reessayer { min-height: 44px; margin-inline-start: 6px; vertical-align: middle; }
.confirmation { border: 2px solid var(--t-menthe-texte); }
.confirmation:focus { outline: none; }
.confirmation .actions, .cs-carte .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.suite { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.cs-entete-carte { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lien-carte { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-weight: 600; }
.note-source a, .connexion .note a { display: inline-block; padding-block: 10px; }
.connexion .cs-onglets button { flex: 1 1 160px; justify-content: center; }

@media print {
  body.console { background: #FFFFFF; }
  .cs-nav, .cs-barre, .cs-voile, .cs-actions, .bouton-reessayer, .evitement { display: none !important; }
  .cs { display: block; } .cs-main { padding: 0; }
  .cs-carte { break-inside: avoid; border: 1px solid #CCCCCC; }
}

/* Statistiques (cahier 7.2.1) */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.chiffre { background: var(--cs-creux); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.chiffre strong { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.chiffre span { font-size: 14px; color: var(--texte-2); }
.chiffre .evolution { font-size: 12px; color: var(--t-ciel-texte); }
.sous-titre { font-size: 15px; font-weight: 600; margin-top: 6px; }
.histo { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-bottom: 18px; }
.histo .barre { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.histo .barre span { display: block; width: 100%; min-height: 2px; background: var(--ciel); border-radius: 4px 4px 0 0; }
.histo .barre em { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; color: var(--texte-2); white-space: nowrap; }
.cs-actions-simple { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Lot 10 : photos (dépôt, barres de progression, actions), roue de chargement, connexion Google, association. */
.photos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.photo .actions-photo button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; }
.photo .actions-photo button svg { width: 18px; height: 18px; }
.photo.principale { outline: 3px solid var(--corail); outline-offset: -1px; border-radius: 10px; }
.confirmer-retrait { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; font-size: 13px; font-weight: 600; background: var(--t-corail); color: var(--t-corail-texte); }
.confirmer-retrait span { flex-basis: 100%; }
.confirmer-retrait button { flex: 1 1 auto; min-height: 44px; border-radius: 8px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); font-weight: 600; cursor: pointer; }
.confirmer-retrait button.danger { background: var(--t-corail-texte); color: #fff; border-color: transparent; }
.depot-photos { border: 2px dashed var(--bord); border-radius: 14px; padding: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; text-align: center; }
.depot-photos.survol { border-color: var(--corail); background: var(--t-corail); }
.envois { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--bord); border-radius: 12px; padding: 12px; }
.envois .ligne-globale { font-weight: 600; font-size: 14px; }
.liste-envois { display: flex; flex-direction: column; gap: 10px; }
.envoi { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.envoi .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envoi .statut { color: var(--texte-2); display: inline-flex; align-items: center; gap: 6px; }
.envoi .barre-progres { grid-column: 1 / -1; height: 8px; }
.envoi.rate .statut { color: var(--t-corail-texte); }
.envoi.rate .barre-progres span { background: var(--t-corail-texte); }
.envoi .bouton-reessayer { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
.roue { display: inline-block; width: 1.1em; height: 1.1em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cs-tourner .8s linear infinite; vertical-align: -0.2em; flex: none; }
@keyframes cs-tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 2.4s; } }
.chargement { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--texte-2); padding: 6px 2px 12px; }
.chargement .roue { width: 22px; height: 22px; border-width: 3px; color: var(--corail); }
button[aria-busy="true"], .bouton[aria-busy="true"] { cursor: progress; }
.cs-titre h1 { display: flex; align-items: center; gap: 10px; }
.cs-titre h1 .ico-titre { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; background: var(--t-ciel); color: var(--t-ciel-texte); flex: none; }
.cs-titre h1 .ico-titre svg { width: 22px; height: 22px; }
.ou { display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-size: 13px; font-weight: 600; margin: 4px 0; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.google-bouton { display: flex; justify-content: center; min-height: 44px; }
.fiche-google { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resultats-google { display: flex; flex-direction: column; gap: 6px; }
.resultats-google button { text-align: start; font: inherit; font-size: 14px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); color: var(--texte); cursor: pointer; }
.resultats-google button:hover { border-color: var(--texte-2); }
.resultats-google button small { display: block; color: var(--texte-2); }

/* Lot 11 : liste des photos, aperçus, reprise de saisie. */
.liste-photos { display: flex; flex-direction: column; gap: 10px; }
.ligne-photo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); }
.ligne-photo.une { border: 2px solid var(--corail); }
.ligne-photo .vignette { padding: 0; border: 0; background: var(--cs-creux); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; display: block; width: 100%; }
.ligne-photo .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corps-photo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.infos-photo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nom-photo { overflow-wrap: break-word; font-size: 15px; }
.badge-une { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; background: var(--corail); color: var(--corail-texte); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.badge-une svg { width: 14px; height: 14px; }
.conseil-photo { font-size: 13px; color: var(--t-soleil-texte); background: var(--t-soleil); border-radius: 8px; padding: 4px 8px; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 6px; }
.bouton-pic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); color: var(--texte); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.bouton-pic:hover { border-color: var(--texte-2); }
.bouton-pic svg { width: 18px; height: 18px; }
.bouton-pic.danger { color: var(--t-corail-texte); }
.renommer { display: flex; flex-direction: column; gap: 8px; }
.renommer label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.renommer input { font: inherit; font-size: 15px; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--bord); border-radius: 10px; background: var(--fond); color: var(--texte); }
.renommer .aide { font-weight: 400; color: var(--texte-2); }
@media (max-width: 520px) {
  .ligne-photo { grid-template-columns: 88px minmax(0, 1fr); }
  .bouton-pic span { display: none; }
}
.apercu-photo { position: fixed; inset: 0; z-index: 100; background: rgba(12, 14, 30, .78); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px; }
.apercu-cadre { background: var(--surface); color: var(--texte); border-radius: 16px; padding: 14px; max-width: min(960px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.apercu-cadre > img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: var(--cs-creux); }
.apercu-fiche { width: 420px; }
.carte-apercu { border: 2px solid var(--bord); border-radius: 16px; overflow: hidden; }
.photo-apercu { aspect-ratio: 16 / 10; background: var(--t-ciel); display: flex; align-items: center; justify-content: center; color: var(--t-ciel-texte); }
.photo-apercu img { width: 100%; height: 100%; object-fit: cover; }
.texte-apercu { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.texte-apercu .cat { color: var(--t-ciel-texte); font-size: 13px; font-weight: 600; }
.texte-apercu strong { font-size: 18px; }
.texte-apercu .age { align-self: flex-start; background: var(--t-soleil); color: var(--t-soleil-texte); font-weight: 600; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.reprise { background: var(--t-soleil); color: var(--t-soleil-texte); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.copier-jours { align-self: flex-start; margin-top: 6px; min-height: 40px; font-size: 13px; }

/* ---------- Salve 2 : profil, aide (bulles « ? », visite guidée, mode d'emploi), écran d'accueil, formules ---------- */
.avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--ciel); color: #FFFFFF; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .avatar { color: #12152A; }
.avatar-grand { width: 56px; height: 56px; flex-basis: 56px; font-size: 20px; }
.cs-nav a.lien-profil .lib { display: flex; flex-direction: column; line-height: 1.2; }
.cs-nav a.lien-profil small { font-size: 12px; color: var(--texte-2); }
.cs.plie .cs-nav a.lien-profil .lib { display: none; }
.profil-tete { flex-direction: row; align-items: center; gap: 14px; }
.profil-tete div { display: flex; flex-direction: column; gap: 2px; }
.aide .exemple { display: block; color: var(--texte-3); font-style: italic; }
.bulle-q { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin-left: 4px; border-radius: 50%; border: 1.5px solid var(--ciel); background: var(--surface); color: var(--ciel); font: 700 14px/1 inherit; cursor: pointer; vertical-align: middle; position: relative; }
.bulle-q::after { content: ""; position: absolute; inset: -9px; }
.bulle-q[aria-expanded="true"] { background: var(--ciel); color: var(--surface); }
.bulle-q-boite { position: fixed; z-index: 96; max-width: min(320px, calc(100vw - 24px)); background: var(--surface); color: var(--texte); border: 2px solid var(--ciel); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; box-shadow: var(--ombre-forte); font-weight: 400; }
.bulle-visite { position: fixed; z-index: 95; width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box; background: var(--surface); color: var(--texte); border: 2px solid var(--corail); border-radius: 14px; box-shadow: 0 10px 30px rgba(18,48,74,.28); padding: 14px 16px; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.bulle-visite .fleche { position: absolute; width: 14px; height: 14px; background: var(--surface); border: 2px solid var(--corail); transform: translateX(-50%) rotate(45deg); }
.bulle-visite.dessous .fleche { top: -9px; border-right: none; border-bottom: none; }
.bulle-visite.dessus .fleche { bottom: -9px; border-left: none; border-top: none; }
.bulle-visite.centre .fleche { display: none; }
.bulle-visite .bv-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bulle-visite .bv-tete strong { color: var(--corail); font-size: 16px; }
.bulle-visite .bv-compte { font-size: 13px; color: var(--texte-2); white-space: nowrap; }
.bulle-visite p { margin: 0; }
.bulle-visite .bv-case { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--texte-2); min-height: 32px; }
.bulle-visite .bv-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bulle-visite .bv-pousser { flex: 1; }
.bulle-visite .bv-passer { background: none; border: 0; padding: 8px 0; color: var(--lien); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; min-height: 44px; }
.bulle-visite .bouton { min-height: 44px; }
.visite-cible { outline: 3px solid #F3B61F !important; outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .bulle-visite { transition: none; } }
.sommaire ol { margin: 0; padding-left: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 20px; }
.etapes-me { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rubrique-me h2, .cs-carte h2 .ico, .cs-entete-carte h2 { display: flex; align-items: center; gap: 8px; }
.cs-carte h2 svg, .cs-entete-carte h2 svg { color: var(--ciel); flex: 0 0 auto; }
.carte-installation { border: 1.5px solid var(--ciel); background: var(--t-ciel); }
.carte-installation svg { vertical-align: middle; }
.tableau-formules-boite { overflow-x: auto; }
.tableau-formules { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tableau-formules th, .tableau-formules td { padding: 10px 8px; border-bottom: 1px solid var(--bord-doux); text-align: center; vertical-align: middle; }
.tableau-formules tbody th { text-align: left; font-weight: 400; color: var(--texte); }
.tableau-formules thead th { font-size: 16px; vertical-align: bottom; }
.tableau-formules .prix-col { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-weight: 400; }
.tableau-formules .actuelle { background: var(--t-ciel); }
.tableau-formules .oui svg { color: var(--t-menthe-texte); }
.tableau-formules .non { color: var(--texte-3); }
.tableau-formules .ligne-actions td { border-bottom: 0; }
.tableau-formules .ligne-actions .bouton { white-space: nowrap; }
.pastille-actuelle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--t-ciel-texte); }
.formules-pro .cs-entete-carte { flex-wrap: wrap; gap: 10px; }
.bandeau-abo { display: flex; gap: 8px; align-items: flex-start; border-radius: 12px; padding: 10px 12px; margin: 0; font-size: 14px; }
.bandeau-abo.info { background: var(--t-soleil); color: var(--t-soleil-texte); }
.bandeau-abo.alerte { background: var(--t-corail); color: var(--t-corail-texte); }
.bandeau-abo a { color: inherit; font-weight: 600; }
.bouton-petit { min-height: 36px; padding: 0 12px; font-size: 14px; }
.formules-pro .choix-periode { max-width: 100%; flex-wrap: wrap; }
.formules-pro .choix-periode button { white-space: normal; }
.formules-pro, .formules-pro .cs-entete-carte { min-width: 0; }
.tableau-formules-boite { width: 100%; max-width: 100%; } .formules-pro { max-width: 100%; overflow: hidden; } .cs-main > * { min-width: 0; }
.tableau-formules-boite, .tableau-boite { position: relative; }

/* Places, bons plans, demandes groupées (salve 3, 1.0.3) */
.places-pro { border-top: 1px solid var(--bord); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.places-pro p { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.choix-places { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-places .bouton { min-height: 44px; }
.pastille-etat { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--t-gris); color: var(--texte-2); }
.pastille-etat.etat-publiee { background: var(--t-menthe); color: var(--t-menthe-texte); }
.pastille-etat.etat-attente { background: var(--t-soleil); color: var(--t-soleil-texte); }
.pastille-etat.etat-a_corriger { background: var(--t-corail); color: var(--t-corail-texte); }

/* Mon cinéma (salve 3 bis) */
.choix-methode { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.choix-methode .bouton { min-height: 44px; }
.cases-autorisation { border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; margin: 12px 0; display: grid; gap: 10px; }
.cases-autorisation legend { font-weight: 600; padding: 0 6px; }
.cases-autorisation .case { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.cases-autorisation .case input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.ligne-saisie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1fr) 44px; gap: 8px; margin-bottom: 8px; align-items: center; }
.ligne-saisie input, .ligne-saisie select { min-height: 44px; min-width: 0; }
@media (max-width: 700px) { .ligne-saisie { grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--bord); border-radius: 12px; } .ligne-saisie input[name=titre] { grid-column: 1 / -1; } }
.apercu-cinema { margin-top: 12px; }
details.retrait { margin-top: 18px; }
details.retrait summary { cursor: pointer; color: inherit; min-height: 44px; display: flex; align-items: center; }
.liste-simple { padding-left: 1.2em; display: grid; gap: 6px; }

/* Turnstile : case anti-robot, visible seulement si Cloudflare a un doute */
.ts-zone { margin: 4px 0; }
.ts-zone:empty { display: none; }

/* Cloche de notifications (3 novembre 2026), console admin et espace pro */
.kc { position: fixed; z-index: 90; top: max(18px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); }
.kc[hidden] { display: none; }
.kc-bouton { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--ombre); }
.kc-bouton:hover, .kc-bouton[aria-expanded="true"] { background: var(--cs-creux, var(--fond-2)); }
.kc-bouton:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; }
.kc-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--t-ciel); color: var(--t-ciel-texte); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--surface); }
.kc-alerte .kc-badge { background: var(--corail); color: var(--corail-texte); }
.kc-sonne .kc-bouton svg { transform-origin: 50% 3px; animation: kc-sonner 3.2s ease-in-out infinite; }
@keyframes kc-sonner { 0%, 62%, 100% { transform: rotate(0); } 66% { transform: rotate(16deg); } 70% { transform: rotate(-14deg); } 74% { transform: rotate(11deg); } 78% { transform: rotate(-8deg); } 82% { transform: rotate(4deg); } 86% { transform: rotate(0); } }
.kc-sonne .kc-badge { animation: kc-pouls 3.2s ease-in-out infinite; }
@keyframes kc-pouls { 0%, 62%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .kc-sonne .kc-bouton svg, .kc-sonne .kc-badge { animation: none; } .kc-sonne .kc-bouton { border-color: var(--corail); } }
.kc-panneau { position: absolute; top: calc(100% + 8px); right: 0; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--ombre-forte); padding: 6px 0 8px; }
.kc-panneau::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.kc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 16px 8px; border-bottom: 1px solid var(--bord); }
.kc-tete strong { font-size: 16px; }
.kc-tete span { font-size: 13px; color: var(--texte-2); }
.kc-vide { padding: 18px 16px 12px; color: var(--texte-2); font-size: 15px; }
.kc-groupe h3 { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texte-2); padding: 12px 16px 4px; margin: 0; display: flex; gap: 6px; align-items: center; }
.kc-groupe h3 span { font-size: 11px; background: var(--cs-creux, var(--fond-2)); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.kc-groupe ul { list-style: none; margin: 0; padding: 0; }
.kc-el { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start; padding: 9px 16px; text-decoration: none; color: var(--texte); }
.kc-el:hover, .kc-el:focus-visible { background: var(--cs-creux, var(--fond-2)); }
.kc-el:focus-visible { outline: 2px solid var(--lien); outline-offset: -2px; }
.kc-point { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--t-ciel-texte); }
.kc-alerte .kc-el.kc-alerte .kc-point, .kc-el.kc-alerte .kc-point { background: var(--corail); }
.kc-el.kc-action .kc-point { background: var(--t-soleil-texte); }
.kc-el.kc-conseil .kc-point { background: var(--t-menthe-texte); }
.kc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kc-txt strong { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.kc-txt > span { font-size: 13px; color: var(--texte-2); line-height: 1.35; overflow-wrap: anywhere; }
.kc-neuf { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--t-corail); color: var(--t-corail-texte); border-radius: 6px; padding: 1px 5px; vertical-align: 1px; }
.kc-date { font-size: 12px; color: var(--texte-3); white-space: nowrap; padding-top: 2px; }
body.avec-cloche .cs-main > .cs-titre:first-child { padding-inline-end: 60px; }
@media (max-width: 860px) {
  .kc { z-index: 52; top: max(10px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .kc-bouton { box-shadow: none; }
  body.avec-cloche .cs-main > .cs-titre:first-child { padding-inline-end: 0; }
  .kc-panneau { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); }
}
@media (max-height: 500px) { .kc { position: absolute; } }
@media print { .kc { display: none !important; } }