/* Voltys by CAMYnergie — charte Voltys (Téléchargements Claude.ALLIANCE-ENERGIES\Voltys, validée par Yann le 12/11/2026) :
   bleu nuit #142A46, turquoise #86DED4, fonds #F3F8FA / #DCEFEE, ardoise #244663, Segoe UI (titres gras), mascotte éclair,
   pictogrammes en tuiles turquoise, boutons « pilule » bleu nuit à flèche turquoise. Badge « by CAMYnergie » sur chaque page. */
:root {
  --nuit: #142A46; --turquoise: #86DED4; --fond: #F3F8FA; --menthe: #DCEFEE; --ardoise: #244663; --gris: #5B7085; --trait: #E1EAEE;
  --eau: #244663; --eau-clair: #DCEFEE;
  --alerte: #B42318; --alerte-clair: #FFE4E0; --attente: #7A5800; --attente-clair: #FFF1CC; --ok: #142A46; --ok-clair: #DCEFEE;
}
body { background: var(--fond); color: var(--nuit); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
h1, h2, h3 { color: var(--nuit); }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.12rem; font-weight: 700; margin-bottom: .75rem; }
a { color: var(--ardoise); }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

/* En-tête */
.bandeau { background: var(--nuit); color: #fff; }
.bandeau .marque { display: inline-flex; align-items: center; text-decoration: none; }
.bandeau .marque img { height: 34px; }
.bandeau .lien { color: #C9D6E2; text-decoration: none; padding: .45rem .8rem; border-radius: 10px; }
.bandeau .lien:hover, .bandeau .lien:focus, .bandeau .lien.actif { background: var(--ardoise); color: #fff; }
.by { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 10px; padding: 4px 10px; box-shadow: 0 2px 8px rgba(20,42,70,.12); text-decoration: none; }
.by span { font-size: 11px; font-style: italic; color: var(--gris); }
.by img { height: 24px; display: block; }

/* Cartes, tuiles, pastilles */
.carte { background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: 1.2rem 1.35rem; box-shadow: 0 1px 2px rgba(20,42,70,.03); }
.carte + .carte { margin-top: 1rem; }
.pastille { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.p-saisie { background: #EEF2F5; color: var(--gris); }
.p-attente { background: var(--attente-clair); color: var(--attente); }
.p-ade { background: var(--nuit); color: var(--turquoise); }
.p-ok { background: var(--menthe); color: var(--nuit); }
.p-alerte { background: var(--alerte-clair); color: var(--alerte); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .85rem; }
.tuile { background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: .9rem 1rem; display: flex; align-items: center; gap: .8rem; }
.tuile .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--turquoise); display: grid; place-items: center; flex: none; }
.tuile .ico img { width: 24px; }
.tuile .n { font-size: 1.6rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tuile .l { font-size: .82rem; color: var(--gris); }
.tuile.alerte { border-color: #F6C7C0; background: #FFF8F6; }
.tuile.alerte .ico { background: var(--alerte-clair); }
.ico-tuile { width: 48px; height: 48px; border-radius: 13px; background: var(--turquoise); display: inline-grid; place-items: center; }
.ico-tuile img { width: 26px; }

/* Frise d'avancement : barres comme le parcours Voltys */
.frise { display: flex; flex-wrap: wrap; gap: 6px; margin: .7rem 0 0; padding: 0; list-style: none; }
.frise li { flex: 1 1 110px; text-align: center; font-size: .78rem; padding: .55rem .3rem .35rem; color: var(--gris); border-top: 6px solid rgba(134,222,212,.45); border-radius: 4px; }
.frise li.fait { border-top-color: var(--turquoise); color: var(--nuit); font-weight: 600; }
.frise li.courant { border-top-color: var(--nuit); color: var(--nuit); font-weight: 700; }

.blocage { background: var(--alerte-clair); border: 1px solid #F6C7C0; color: #7a1a12; border-radius: 14px; padding: .9rem 1.1rem; }
.manque { background: var(--attente-clair); border: 1px solid #F3D99B; border-radius: 14px; padding: .9rem 1.1rem; }
table.table { font-size: .9rem; }
.table th { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); border-bottom-color: var(--menthe); }
.table td, .table th { vertical-align: middle; }
.journal li { padding: .45rem 0; border-bottom: 1px solid #EDF3F6; font-size: .88rem; }
.journal .quand { color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.journal .alerte { color: var(--alerte); font-weight: 600; }
.source { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--gris); text-transform: uppercase; }
.message { border-left: 3px solid var(--turquoise); padding: .4rem .8rem; margin-bottom: .6rem; background: #fafcfc; white-space: pre-line; font-size: .9rem; }
pre.carto { max-height: 480px; overflow: auto; background: var(--nuit); color: #d8e6ee; padding: 1rem; border-radius: 10px; font-size: .78rem; }

/* Boutons « pilule » Voltys */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }
.btn-primary::after { content: " →"; color: var(--turquoise); }
.btn-outline-primary { color: var(--nuit); border-color: var(--nuit); }
.btn-outline-primary:hover { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.btn-warning { background: var(--turquoise); border-color: var(--turquoise); color: var(--nuit); }
.btn-warning:hover { background: #6fd0c5; border-color: #6fd0c5; color: var(--nuit); }
.form-control, .form-select { border-radius: 10px; border-color: #D3DEE5; }
.form-control:focus, .form-select:focus { border-color: var(--turquoise); box-shadow: 0 0 0 .2rem rgba(134,222,212,.35); }
.form-check-input:checked { background-color: var(--nuit); border-color: var(--nuit); }

/* Accueil des pages : fond à vagues + mascotte */
.voltys-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; border-radius: 18px; padding: 1.6rem 1.8rem; background: #fff url('/img/voltys/fonds/bureau-clair.png') right bottom / cover no-repeat; border: 1px solid var(--trait); overflow: hidden; }
.voltys-hero h1 { margin: 0 0 .3rem; font-size: 2rem; }
.voltys-hero p { color: var(--gris); margin: 0 0 .9rem; font-size: 1.02rem; max-width: 46rem; }
.voltys-hero .mascotte { width: 150px; margin: -.6rem 0 -.9rem; }
@media (max-width: 640px) { .voltys-hero { grid-template-columns: 1fr; } .voltys-hero .mascotte { display: none; } }

/* Aide intégrée : bulles, visite guidée, bandeau de mise à jour, récapitulatif surligné. */
.btn-aide { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-weight: 700; line-height: 1; }
.btn-aide:hover, .btn-aide:focus { background: var(--ardoise); }
.btn-aide::after { content: none; }
.bandeau-maj { background: var(--turquoise); border-bottom: 2px solid #5fc7bb; color: var(--nuit); position: sticky; top: 0; z-index: 1080; }
.bandeau-maj .btn-warning { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.visite-voile { position: fixed; inset: 0; background: rgba(20,42,70,.5); z-index: 1090; }
.visite-cible { position: relative; z-index: 1091; box-shadow: 0 0 0 4px var(--turquoise); border-radius: 10px; background-color: #fff; }
.visite-bulle { position: fixed; z-index: 1092; max-width: 360px; background: #fff; border-radius: 14px; padding: .9rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); border-top: 4px solid var(--turquoise); }
.que-faire { font-weight: 700; }
details.bloc-aide { border-bottom: 1px solid #EDF3F6; padding: .55rem 0; }
details.bloc-aide summary { cursor: pointer; }
.surligne { background: #FFF6C9; box-shadow: inset 4px 0 0 #F0B400; border-radius: 8px; padding: .5rem .75rem; }
.recap-section { scroll-margin-top: 4rem; margin-top: 1.25rem; }
.recap-section.surligne h2::after { content: "Nouveau"; font-size: .7rem; font-weight: 700; background: #F0B400; color: #3d2f00; border-radius: 999px; padding: .1rem .5rem; margin-left: .5rem; vertical-align: middle; }
.recap h2 { font-size: 1.15rem; }
.nouveautes-encart { background: #FFF6C9; border: 1px solid #F0D36B; border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.sommaire { font-size: .9rem; background: var(--fond); border-radius: 10px; padding: .6rem .8rem; }
.plein-ecran { position: fixed; inset: 0; z-index: 1095; background: rgba(20,42,70,.94); overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; }
.plein-ecran-corps { background: #fff; border-radius: 18px; max-width: 760px; width: 100%; padding: 2rem; }
.plein-ecran mark { background: #FFE66B; padding: .05rem .2rem; }
.plein-ecran .changement { border-left: 5px solid #F0B400; padding-left: 1rem; margin: 1.25rem 0; }
.trv { white-space: nowrap; }
@media print { .bandeau, .pas-imprimer, .bandeau-maj, .plein-ecran { display: none !important; } body { background: #fff; } .carte { border: 0; padding: 0; } .surligne { background: none; box-shadow: none; } }

/* Cartes illustrées (illustrations et mascotte Voltys) */
.carte-photo { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; }
.carte-photo-img { border-radius: 14px; background: var(--menthe) center / 78% no-repeat; min-height: 96px; max-height: 120px; }
@media (max-width: 575px) { .carte-photo { grid-template-columns: 1fr; } .carte-photo-img { min-height: 80px; background-size: auto 80%; } }
.carte.construction { background: repeating-linear-gradient(135deg, #fff, #fff 18px, #F7FBFC 18px, #F7FBFC 36px); }
.option-suite { border: 1px dashed var(--turquoise); border-radius: 12px; padding: .7rem .8rem; background: #fff; height: 100%; }
.connexion { min-height: 100vh; margin: -1.5rem -12px; display: flex; align-items: center; justify-content: center; background: var(--nuit) url('/img/voltys/fonds/bureau-sombre.png') center / cover no-repeat; }
.connexion .carte { max-width: 30rem; border: 0; box-shadow: 0 24px 60px rgba(0,0,0,.35); text-align: center; }
.connexion .mascotte { width: 140px; margin: -5rem auto .3rem; display: block; }

/* Connexion : équipe (Microsoft) ou partenaire (mot de passe + code) */
.connexion .carte.connexion-double { max-width: 34rem; }
.choix-connexion { background: var(--fond); border-radius: 14px; padding: .9rem 1rem; }
.ico-tuile.ico-petite { width: 34px; height: 34px; border-radius: 10px; }
.ico-tuile.ico-petite img { width: 18px; }
.separateur { display: flex; align-items: center; gap: .6rem; color: var(--gris); font-size: .8rem; margin: .8rem 0; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 1px solid var(--trait); }
.schema-mini { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin: .4rem 0 1rem; font-size: .8rem; }
.schema-mini span { background: var(--fond); border: 1px solid var(--trait); border-radius: 999px; padding: .2rem .65rem; color: var(--gris); }
.schema-mini span.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; font-weight: 600; }
.schema-mini b { color: var(--turquoise); }
.regles-mdp li { padding-left: 1.4rem; position: relative; color: var(--gris); }
.regles-mdp li::before { content: "○"; position: absolute; left: .2rem; }
.regles-mdp li.ok { color: var(--nuit); font-weight: 600; }
.regles-mdp li.ok::before { content: "✓"; color: #1d7a3a; }
.code-otp { letter-spacing: .5em; font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-oeil::after { content: none; }
.partenaire-bandeau { background: var(--menthe); border-radius: 12px; padding: .5rem .9rem; font-size: .88rem; }
.onglets-admin { display: flex; gap: .4rem; }
.onglets-admin a { text-decoration: none; padding: .45rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--trait); color: var(--nuit); font-weight: 600; }
.onglets-admin a.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.chemin { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; counter-reset: c; }
.chemin li { position: relative; background: var(--fond); border-radius: 14px; padding: .8rem .7rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; counter-increment: c; }
.chemin li::before { content: counter(c); position: absolute; top: .4rem; left: .6rem; font-weight: 700; color: var(--ardoise); font-size: .8rem; }
.chemin li b { font-size: .92rem; }
.chemin li small { color: var(--gris); font-size: .76rem; line-height: 1.3; }