/* Procédures (favoris, commentaires, historique, impression), recherche, alertes, mentions, calendrier d'astreinte,
   statistiques, rappel du questionnaire, cadres de profil Admin / Admin+, ouverture de booster spectaculaire. */

/* ---------- Procédure ouverte ---------- */
.outils-proc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.outils-proc form { margin: 0; }
.btn.favori.actif { color: #b45309; border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 16%, var(--surface)); }
.commentaires-proc h2 { margin-top: 0; }
.commentaires-proc .bulle-commentaire form { margin: 0; }
.version-proc summary { cursor: pointer; }
.version-proc .contenu { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--fond); }
.epinglee { border-color: var(--accent); }
.marque-epingle { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent); }

/* ---------- Recherche sur tout le site ---------- */
.recherche-globale { display: flex; gap: 8px; margin-bottom: 16px; max-width: 640px; }
.recherche-globale input { flex: 1; min-width: 0; }
.resultats h2 { margin-top: 0; }
.resultats ul { list-style: none; margin: 0; padding: 0; }
.resultats li + li { border-top: 1px solid var(--bord); }
.resultats a { display: grid; gap: 2px; padding: 10px 6px; border-radius: 10px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.resultats a:hover { background: var(--fond); }
.resultats mark { background: color-mix(in srgb, #facc15 55%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }

/* ---------- Alertes et mentions ---------- */
.lien-alertes { position: relative; }
.lien-alertes .badge { position: absolute; top: -6px; right: -6px; }
.liste-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.liste-alertes a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface); color: inherit; text-decoration: none; }
.liste-alertes a:hover { border-color: var(--accent); }
.liste-alertes .non-lue a { border-left: 4px solid var(--accent); font-weight: 600; }
.liste-alertes .petit-texte { flex: none; }
.choix-mention { position: fixed; z-index: 120; margin: 0; padding: 4px; list-style: none; min-width: 190px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); box-shadow: 0 14px 34px -10px rgb(0 0 0 / .4); }
.choix-mention li { padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.choix-mention li.actif, .choix-mention li:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.choix-mention[hidden] { display: none; }
@media (min-width: 900px) { .qui-actions .lien-alertes, .qui-actions .lien-recherche { flex: 0 0 auto; } }

/* ---------- Calendrier d'astreinte ---------- */
.entete-cal { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.entete-cal h2 { margin: 0; text-transform: capitalize; }
.grille-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nom-jour-cal { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 4px; }
.jour-cal { min-height: 68px; padding: 5px; border-radius: 10px; background: var(--fond); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.jour-cal.hors { background: none; }
.jour-cal b { font-size: 12px; color: var(--muted); }
.jour-cal.aujourdhui { box-shadow: inset 0 0 0 2px var(--accent); }
.jour-cal.aujourdhui b { color: var(--accent); }
.puce-astreinte { font-size: 11px; font-weight: 600; line-height: 1.5; padding: 0 6px; border-radius: 6px; color: #fff; background: hsl(var(--h, 230) 60% 45%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .jour-cal { min-height: 54px; padding: 3px; } .puce-astreinte { font-size: 9px; padding: 0 3px; } }

/* ---------- Statistiques ---------- */
.chiffres-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.chiffres-stats .carte { margin: 0; display: grid; gap: 2px; }
.chiffres-stats strong { font-size: 28px; color: var(--accent); }
.barres-stats { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; }
.barres-stats > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 100%; }
.barres-stats b { font-size: 11px; }
.barres-stats i { width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--degrade, var(--accent)); }
.barres-stats span { font-size: 10px; color: var(--muted); }
.colonnes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.colonnes-stats .carte { margin: 0; }
.colonnes-stats h2 { margin-top: 0; }
.liste-stats { margin: 0; padding-left: 22px; display: grid; gap: 6px; }

/* ---------- Rappel du questionnaire ---------- */
.rappel-quiz { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; align-items: center; gap: 12px; max-width: min(400px, calc(100vw - 32px)); padding: 12px 38px 12px 14px;
  border-radius: 16px; border: 1px solid var(--bord); background: var(--surface); box-shadow: 0 18px 40px -14px rgb(0 0 0 / .45); }
.rappel-quiz[hidden] { display: none; }
.rappel-quiz p { margin: 0; font-size: 14px; }
.rappel-quiz .btn { flex: none; }
.fermer-rappel { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px; }
.fermer-rappel:hover { color: var(--texte); }
@media (min-width: 900px) { .rappel-quiz { left: auto; right: 16px; bottom: 84px; } }
@media (max-width: 899.98px) { .rappel-quiz { bottom: 84px; } } /* au-dessus des onglets du bas */
@media (prefers-reduced-motion: no-preference) {
  .rappel-quiz { animation: rappel-arrive .6s cubic-bezier(.34, 1.56, .64, 1) 1s both; }
  @keyframes rappel-arrive { from { opacity: 0; transform: translateY(30px) scale(.95); } }
}

/* ---------- Cadres de profil réservés : Admin (insigne) et Admin+ (couronne) ---------- */
.effet-insigne { --anneau: conic-gradient(from var(--angle), #ef4444 0 20%, #fff 20% 25%, #f97316 25% 45%, #fff 45% 50%, #ef4444 50% 70%, #fff 70% 75%, #f97316 75% 95%, #fff 95%); box-shadow: 0 0 14px 2px rgb(239 68 68 / .6); }
.effet-couronne { --anneau: conic-gradient(from var(--angle), #fde047, #a855f7, #fff, #f59e0b, #7c3aed, #fde047); box-shadow: 0 0 18px 4px rgb(168 85 247 / .6), 0 0 34px 6px rgb(253 224 71 / .35); }
.effet-insigne::after, .effet-couronne::after { position: absolute; left: 50%; top: -34%; transform: translateX(-50%); font-size: .62em; line-height: 1; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); pointer-events: none; }
.effet-insigne::after { content: "🛡️"; top: auto; bottom: -22%; left: auto; right: -14%; transform: none; }
.effet-couronne::after { content: "👑"; }
.avatar.effet-couronne, .avatar.effet-insigne { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .effet-insigne::before { animation-duration: 2.4s; }
  .effet-couronne::before { animation-duration: 3s; }
  .effet-couronne { animation: couronne 1.8s ease-in-out infinite alternate; }
  .effet-couronne::after { animation: couronne-flotte 2.2s ease-in-out infinite; }
  .effet-insigne { animation: insigne 1.2s ease-in-out infinite alternate; }
  @keyframes couronne { to { box-shadow: 0 0 26px 8px rgb(253 224 71 / .7), 0 0 44px 10px rgb(168 85 247 / .45); } }
  @keyframes couronne-flotte { 50% { transform: translateX(-50%) translateY(-12%) rotate(-6deg); } }
  @keyframes insigne { to { box-shadow: 0 0 22px 6px rgb(249 115 22 / .7); } }
}

/* ---------- Ouverture de booster : mise en scène ---------- */
.zone-booster { position: relative; }
/* Le reste de la page s'assombrit pendant l'ouverture : toute l'attention sur le paquet et les cartes. */
.scene-booster main::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgb(15 23 42 / .55), rgb(2 6 23 / .9)); animation: scene-arrive .5s ease-out both; }
.scene-booster .zone-booster { z-index: 61; }
.barre, .bloc-bannieres, .annonce { transition: filter .5s; }
.scene-booster .barre, .scene-booster .bloc-bannieres, .scene-booster .annonce { filter: brightness(.3); }
.scene-booster .zone-booster .muted, .scene-booster .gain-booster { color: #e2e8f0; }
@keyframes scene-arrive { from { opacity: 0; } }
/* Rayons de lumière qui tournent derrière le paquet pendant qu'il se charge. */
.zone-booster::before { content: ""; position: absolute; top: 133px; left: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgb(253 224 71 / .5) 0 8deg, transparent 8deg 24deg);
  mask: radial-gradient(circle, #000 18%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); transition: opacity .4s; }
.zone-booster.charge::before { opacity: 1; animation: rayons 5s linear infinite; }
/* Carte rare qui se charge avant de se retourner : elle tremble et sa lueur enfle. */
.carte-retournable.charge { animation: charge-carte .12s linear infinite; z-index: 3; }
.carte-retournable.charge .face-cachee { animation: charge-lueur var(--suspense, .7s) ease-in forwards; }
@keyframes charge-carte { 0% { transform: translate(-2px, 1px) rotate(-1.5deg); } 50% { transform: translate(2px, -1px) rotate(1.5deg) scale(1.04); } 100% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.06); } }
@keyframes charge-lueur { to { filter: brightness(2.2) saturate(1.5); box-shadow: 0 0 60px 18px var(--couleur-rarete, #fde047); } }
.indice-epique { --couleur-rarete: rgb(168 85 247 / .9); }
.indice-legendaire { --couleur-rarete: rgb(253 224 71 / .95); }
/* Onde de choc au moment où la carte se révèle. */
.onde-choc { position: fixed; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 4px solid currentColor; animation: onde .8s ease-out forwards; }
@keyframes onde { to { transform: scale(16); opacity: 0; border-width: 1px; } }
/* Annonce de la rareté en grand, au milieu de l'écran. */
.annonce-rarete { position: fixed; left: 0; right: 0; top: 16%; text-align: center; font-size: clamp(30px, 8vw, 76px); font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 22px currentColor, 0 4px 0 rgb(0 0 0 / .35); animation: annonce-rarete 2.2s cubic-bezier(.2, .9, .3, 1) forwards; }
.annonce-rarete.epique { color: #e9d5ff; }
.annonce-rarete.legendaire { color: #fde047; }
@keyframes annonce-rarete { 0% { transform: scale(3); opacity: 0; filter: blur(12px); } 18% { transform: scale(1); opacity: 1; filter: none; } 75% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
/* Légendaire : tout l'écran tremble un instant. */
.tremble .zone-booster { animation: tremble .5s linear; }
@keyframes tremble { 10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } }
/* Carte révélée : elle s'incline sous le doigt ou la souris, avec un reflet qui suit. */
.carte-retournable.retournee .face-visible .carte-jeu { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; }
.carte-retournable.retournee .face-visible::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: var(--reflet, 0); transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .5), transparent 45%); mix-blend-mode: soft-light; }
.carte-retournable.retournee .nouvelle-carte { animation: nouvelle-pop .7s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
@keyframes nouvelle-pop { from { transform: scale(0) rotate(-20deg); } }
@media (prefers-reduced-motion: reduce) {
  .scene-booster main::before, .zone-booster::before, .carte-retournable.charge, .annonce-rarete, .tremble .zone-booster, .onde-choc { animation: none !important; }
}

/* ---------- Impression / PDF d'une procédure : la procédure seule, sans le site autour ---------- */
@media print {
  .annonce, .barre, .bloc-bannieres, .pied, .toasts, .retour, .flash, .outils-proc, .commentaires-proc, .rappel-quiz, .bandeau-concours, dialog, .proc form, .proc-entete .btn { display: none !important; }
  body, main { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  .carte.proc { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
  .proc h1 { font-size: 22pt; }
  .contenu { font-size: 11pt; }
  .photo-inline img, .galerie img { max-width: 100% !important; max-height: 14cm; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* Menu de l’ordinateur : alertes, recherche et son sur une ligne, « Déconnexion » en dessous sur toute la largeur. */
@media (min-width: 900px) { .qui-actions > button:last-child { flex: 1 0 100%; } }

/* Profil : la couronne ou l’insigne du cadre dépasse de la photo, la carte ne doit pas le rogner. */
.profil-tete { overflow: visible; }
.profil-banniere { border-top-left-radius: inherit; border-top-right-radius: inherit; }
/* Sur grand écran, une ancienne règle mettait la carte de profil en ligne : la bannière disparaissait. */
.carte.profil-tete { display: block; padding: 0; }

/* ---------- Application : bandeau hors connexion, page d'installation ---------- */
.hors-ligne { position: sticky; top: 0; z-index: 70; padding: 8px 14px; text-align: center; font-size: 14px; font-weight: 600; color: #fff; background: #b45309; }
.hors-ligne[hidden] { display: none; }
.etapes-appli { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- « Besoin d'aide » : choix des collègues à prévenir ---------- */
.choix-destinataires { border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; margin: 0; }
.choix-destinataires legend { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 0 6px; }
.liste-destinataires { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; max-height: 170px; overflow-y: auto; margin-bottom: 6px; }
.liste-destinataires .case { margin: 0; }

/* ---------- Page d'accueil ---------- */
.hero-accueil { margin-bottom: 22px; }
.date-accueil { margin: 0 0 2px; color: var(--muted); font-weight: 600; text-transform: capitalize; }
.hero-accueil h1 { margin: 0 0 14px; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.recherche-accueil { display: flex; gap: 8px; max-width: 640px; }
.recherche-accueil input { flex: 1; min-width: 0; }
.a-faire { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 22px; }
.a-faire a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bord)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--texte); font-weight: 600; text-decoration: none; }
.a-faire a:hover { border-color: var(--accent); }
.a-faire i { font-style: normal; font-size: 22px; line-height: 1; }
.a-faire span { flex: 1; min-width: 0; }
.a-faire b { color: var(--accent); font-size: 20px; }
.tout-a-jour { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--ok, #16a34a) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 30%, var(--bord)); margin-bottom: 22px; }
.raccourcis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.raccourcis a { display: grid; gap: 4px; align-content: start; margin: 0; padding: 16px; color: var(--texte); text-decoration: none; }
.raccourcis i { font-style: normal; font-size: 28px; line-height: 1; margin-bottom: 4px; }
.raccourcis .muted { font-size: 13px; }
.colonnes-accueil { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-bottom: 14px; }
.colonnes-accueil .carte { margin: 0; }
.colonnes-accueil h2, .hero-accueil + section h2 { margin-top: 0; }
.liste-accueil { list-style: none; margin: 0; padding: 0; }
.liste-accueil li + li { border-top: 1px solid var(--bord); }
.liste-accueil a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; color: var(--texte); text-decoration: none; overflow-wrap: anywhere; }
.liste-accueil a:hover { color: var(--accent); }
.liste-accueil .tag, .liste-accueil .petit-texte { flex: none; }
.suite-accueil { display: inline-block; margin-top: 10px; font-weight: 600; }
@media (max-width: 899.98px) { .raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-faire { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Équipe & accès : une fiche par membre ---------- */
.filtre-membres { width: 100%; max-width: 420px; margin-bottom: 14px; }
.fiches-membres { display: grid; gap: 10px; margin-bottom: 26px; }
.fiche-membre { margin: 0; padding: 0; }
.fiche-membre[hidden] { display: none; }
.fiche-membre summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; list-style: none; }
.fiche-membre summary::-webkit-details-marker { display: none; }
.fiche-membre summary .avatar { width: 46px; height: 46px; font-size: 15px; flex: none; }
.fiche-identite { flex: 1 1 180px; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.fiche-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fiche-ouvrir { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--fond); }
.fiche-membre[open] .fiche-ouvrir { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.fiche-membre.inactif summary { opacity: .65; }
.fiche-membre > p { padding: 0 16px 14px; margin: 0; }
.fiche-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 4px 16px 18px; border-top: 1px solid var(--bord); }
.bloc-fiche { max-width: none; margin: 0; }
.bloc-fiche h3 { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bloc-fiche .ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bloc-fiche .ligne input, .bloc-fiche .ligne select { flex: 1 1 160px; min-width: 0; }
.bloc-fiche form { margin: 0; }
.tag.gris { background: var(--fond); color: var(--muted); }

/* ---------- Mini-annonces (même petite fenêtre que le rappel du questionnaire) ---------- */
.mini-annonce p { font-size: 14px; line-height: 1.4; }
.mini-annonce .tuile-icone { flex: none; }

/* ---------- Entreprise des membres ---------- */
[name="entreprise_autre"][hidden] { display: none !important; }
[name="entreprise_autre"] { margin-top: 6px; }
.tag.entreprise { background: color-mix(in srgb, #0ea5e9 14%, var(--surface)); color: #0284c7; }