/* Identité d'Arobas, reprise d'agencearobas.ca : marine #21213e, cyan #42c4f0, crème #f3f2e8,
   titres et boutons en Archivo 700, texte en Open Sans, boutons en pastille. */
:root {
  --marine: #21213e; --marine-2: #374775; --cyan: #42c4f0; --cyan-pale: #cddfeb; --creme: #f3f2e8; --trait: #e7e6e1;
  --texte: #21213e; --note: #5f6480; --carte: #fff;
  --titre: "Archivo", "Helvetica Neue", Arial, sans-serif; --corps: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14.5px/1.55 var(--corps); color: var(--texte); background: var(--creme); display: flex; min-height: 100vh; }
a { color: var(--marine-2); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--marine); text-decoration-thickness: 2px; }

/* Barre latérale marine, comme l'en-tête du site */
nav.lateral { width: 220px; flex: none; background: var(--marine); color: #fff; padding: 22px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; }
nav.lateral .logo { margin: 0 10px 22px; }
nav.lateral .logo img { display: block; width: 132px; height: auto; }
nav.lateral .logo small { display: block; margin-top: 8px; font: 500 12px var(--titre); color: var(--cyan); letter-spacing: .04em; text-transform: uppercase; }
nav.lateral .demo { margin-left: 6px; font-size: 10px; background: var(--cyan); color: var(--marine); padding: 1px 7px; border-radius: 10px; font-weight: 700; }
nav.lateral a { padding: 9px 12px; border-radius: 10px; color: rgba(255,255,255,.82); text-decoration: none; font: 500 15px var(--titre); }
nav.lateral a:hover { background: rgba(255,255,255,.08); color: #fff; }
nav.lateral a.actif { color: var(--cyan); background: rgba(66,196,240,.12); font-weight: 700; }
nav.lateral a.nouveau, nav.lateral a.nouveau:hover { margin-top: 18px; text-align: center; background: var(--cyan); color: #fff; font-weight: 700; border-radius: 32px; padding: 12px 18px; }
nav.lateral a.nouveau:hover { background: #fff; color: var(--marine); }
nav.lateral .pied { margin-top: auto; font-size: 12px; color: rgba(255,255,255,.7); display: flex; justify-content: space-between; align-items: center; padding: 0 10px; gap: 8px; }
nav.lateral .pied button.lien { color: var(--cyan); }

main { flex: 1; padding: 30px 38px; max-width: 1320px; min-width: 0; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.entete > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h1 { font: 700 30px/1.15 var(--titre); margin: 0; color: var(--marine); }
h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--cyan); margin-top: 8px; }
h2 { font: 700 16px/1.3 var(--titre); margin: 0 0 12px; color: var(--marine); }
.note { color: var(--note); font-size: 12.5px; } .grand { font: 700 22px var(--titre); margin: 4px 0; }

.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 20px 22px; margin-bottom: 18px; }
.carte.etroite { max-width: 660px; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille .carte { margin-bottom: 0; } section.grille { margin-bottom: 18px; }

.compteurs { display: flex; gap: 14px; margin-bottom: 20px; }
.compteur { flex: 1; background: #fff; border: 1px solid var(--trait); border-top: 5px solid var(--note); border-radius: 18px; padding: 14px 18px; color: var(--texte); text-decoration: none; }
.compteur:hover { border-color: var(--cyan); }
.compteur b { display: block; font: 700 30px/1.1 var(--titre); } .compteur span { color: var(--note); font-size: 12.5px; }
.compteur.niv-critique { border-top-color: #7f1d1d } .compteur.niv-eleve { border-top-color: #c2410c } .compteur.niv-moyen { border-top-color: #b45309 } .compteur.niv-faible { border-top-color: #4d7c0f } .compteur.niv-info { border-top-color: #64748b }

table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font: 700 12.5px var(--titre); color: var(--marine); }
table.liste { background: #fff; border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; margin-bottom: 20px; border-collapse: separate; border-spacing: 0; }
table.liste th { background: var(--marine); color: #fff; border-bottom: 0; padding: 11px 10px; }
table.liste tr:hover td { background: #fafaf6; }
table.fiche th { width: 160px; }
tr.revoquee td { color: var(--note); text-decoration: line-through; }

.sev { display: inline-block; padding: 2px 10px; border-radius: 12px; font: 700 11.5px var(--titre); color: #fff; white-space: nowrap; }
.sev-critique { background: #7f1d1d } .sev-eleve { background: #c2410c } .sev-moyen { background: #b45309 } .sev-faible { background: #4d7c0f } .sev-info { background: #64748b }
.sevs .sev { min-width: 30px; text-align: center; }
.score { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font: 700 15px/1 var(--titre); color: #fff; vertical-align: middle; }
.carte svg { max-width: 100%; height: auto; }
.score-A { background: #15803d } .score-B { background: #b45309 } .score-C { background: #b91c1c }
h1 .score { width: 38px; height: 38px; line-height: 38px; font-size: 18px; margin-right: 6px; }
.statut { display: inline-block; padding: 2px 10px; border-radius: 12px; font: 500 12px var(--titre); background: #eceae0; color: var(--marine); vertical-align: middle; }
.statut-en_cours { background: var(--cyan); color: var(--marine) } .statut-termine, .statut-corrige { background: #dcfce7; color: #166534 } .statut-echec, .statut-refuse { background: #fee2e2; color: #991b1b }
.statut-partiel { background: #fef3c7; color: #92400e } .statut-ouvert { background: #fee2e2; color: #991b1b } .statut-accepte { background: var(--cyan-pale); color: var(--marine) }
.pastille { display: inline-block; padding: 3px 12px; border-radius: 12px; font: 500 12px var(--titre); background: #eceae0; }
.pastille.ok { background: #dcfce7; color: #166534 } .pastille.ko { background: #fee2e2; color: #991b1b }
.etiq { display: inline-block; padding: 1px 9px; border-radius: 10px; background: var(--cyan-pale); font-size: 11.5px; }
.puce { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #d5d3c8; margin-right: 3px; }
.puce-en_cours { background: var(--cyan); animation: battre 1s infinite alternate } .puce-termine { background: #16a34a } .puce-echec { background: #dc2626 }
@keyframes battre { to { opacity: .35 } }

.flash { padding: 12px 18px; border-radius: 14px; margin-bottom: 18px; background: #dcfce7; color: #166534; font-weight: 600; }
.flash.erreur { background: #fee2e2; color: #991b1b; }

form label { display: block; margin-bottom: 12px; font: 500 13px var(--titre); color: var(--marine); }
form label small { display: block; color: var(--note); font: 400 12.5px var(--corps); margin-top: 4px; }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--cyan-pale); border-radius: 10px; font: 14.5px var(--corps); color: var(--texte); margin-top: 4px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(66,196,240,.25); }
input[type=checkbox], input[type=radio] { accent-color: var(--cyan); }
textarea { resize: vertical; }

.bouton { display: inline-block; padding: 9px 20px; border: 2px solid var(--marine); border-radius: 32px; background: transparent; color: var(--marine); font: 700 14px var(--titre); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.bouton:hover { background: var(--marine); color: #fff; }
.bouton.principal { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.bouton.principal:hover { background: var(--marine); border-color: var(--marine); color: #fff; }
.bouton.grand { padding: 15px 28px; font-size: 16px; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
button.lien { background: none; border: 0; color: var(--marine-2); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
button.lien.danger { color: #b91c1c; text-decoration-color: #b91c1c; }

.barre { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .barre input, .barre select { width: auto; min-width: 160px; margin: 0; flex: 1 1 160px; }
.ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; } .ligne label { flex: 1 1 170px; margin: 0; }
fieldset { border: 1.5px solid var(--trait); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; } legend { font: 700 12.5px var(--titre); color: var(--marine); padding: 0 8px; }
.choix { display: flex; gap: 10px; } .choix .bloc { flex: 1; border: 2px solid var(--cyan-pale); border-radius: 32px; padding: 10px; text-align: center; cursor: pointer; margin: 0; font-weight: 700; }
.choix .bloc:has(input:checked) { border-color: var(--cyan); background: var(--cyan); color: #fff; }
.choix .bloc input { position: absolute; opacity: 0; }
.encadre { background: var(--creme); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
label.case { display: flex; gap: 8px; align-items: center; font-family: var(--corps); }
pre { background: var(--marine); color: #e6f6fd; padding: 12px 14px; border-radius: 12px; overflow: auto; font-size: 12px; max-height: 320px; }
pre.texte { white-space: pre-wrap; font: inherit; background: none; color: inherit; padding: 0; max-height: none; }
details summary { cursor: pointer; font: 700 14px var(--titre); }
.apercu-logo { max-height: 44px; max-width: 200px; display: block; margin-bottom: 10px; background: var(--marine); padding: 8px 12px; border-radius: 10px; }

/* Connexion : plein écran marine, comme la bannière du site */
body.connexion { align-items: center; justify-content: center; flex-direction: column; gap: 26px; background: var(--marine); }
body.connexion > img { width: 210px; }
body.connexion .carte { width: 380px; padding: 28px; }
body.connexion h1 { font-size: 22px; margin-bottom: 18px; }
body.connexion .bouton { width: 100%; padding: 13px; }

@media (max-width: 900px) {
  body { flex-direction: column; } nav.lateral { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; }
  nav.lateral .logo { margin: 0 12px 0 4px; } nav.lateral .logo small { display: none; } nav.lateral a.nouveau { margin: 0 0 0 auto; padding: 8px 16px; } nav.lateral .pied { margin: 0; }
  main { padding: 18px; } .grille, .grille.deux { grid-template-columns: minmax(0, 1fr); } .compteurs { flex-wrap: wrap; } .compteur { flex: 1 1 28%; }
  table.liste { display: block; overflow-x: auto; }
}