/* =====================================================================
   Outils APEF — Portail interne
   Charte graphique APEF (reprise de GECO — Archives) :
     vert de marque #71BF44 et jaune #FCAF16 — prélevés dans le logo ;
     ambre d'action #F2A900 sur brun #631A02 — le bouton d'appel à l'action
     d'apef.fr ; fond crème #F6F0E4 · encre #151515 · gris chaud #726A59
     formes en pilule (999px) et cartes très arrondies (24px)
     typographie Gotham, graisses 300 à 800, interlettrage resserré
   ===================================================================== */

:root{
  --apef-vert:#71BF44;
  --apef-vert-fonce:#4E9227;
  --apef-vert-clair:#EDF7E4;
  --apef-ambre:#F2A900;
  --apef-ambre-ink:#631A02;
  --apef-ambre-clair:#FFEBC4;
  --apef-jaune:#FCAF16;
  --apef-corail:#E6805E;
  --apef-ciel:#5FC4E1;
  --apef-rose:#F5B3C4;

  --creme:#F6F0E4;
  --bg:var(--creme);
  --surface:#FFFFFF;
  --surface-2:#FBF8F1;
  --ink:#151515;
  --ink-2:#726A59;
  --ink-3:#9A9384;
  --line:#E7E0D1;
  --line-fort:#D6CDB9;

  --accent:var(--apef-vert);
  --accent-ink:#FFFFFF;
  --accent-soft:var(--apef-vert-clair);
  --focus:#151515;

  --ok:#2F7D32;      --ok-bg:#E8F5E0;
  --warn:#8A5A00;    --warn-bg:#FFF3D6;
  --danger:#A33417;  --danger-bg:#FBE7E1;
  --info:#0F6E86;    --info-bg:#E2F4F9;
  --neutre:#726A59;  --neutre-bg:#EFEADF;

  --r-pill:999px;
  --r-card:24px;
  --r-field:12px;
  --r-sm:9px;
  --ombre:0 1px 2px rgba(21,21,21,.04), 0 8px 24px -12px rgba(21,21,21,.10);
  --ombre-forte:0 2px 4px rgba(21,21,21,.06), 0 18px 40px -18px rgba(21,21,21,.22);

  --font:Gotham,"Gotham SSm","Century Gothic",Futura,"Avenir Next",
         -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.55;
  letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}

h1{font-size:30px; font-weight:700; letter-spacing:-.045em; line-height:1.15;
   margin:0 0 4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
h2{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
   color:var(--ink-2); margin:0 0 14px}
h3{font-size:17px; font-weight:650; letter-spacing:-.03em; margin:0 0 8px}

.wrap{max-width:1480px; margin:0 auto; padding:0 24px}
.muted{color:var(--ink-2)}
.sub{font-size:12.5px; color:var(--ink-2); letter-spacing:-.01em}
.lead{color:var(--ink-2); max-width:62ch; font-size:16px; margin:6px 0 26px}

/* ---------- En-tête ---------- */
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
}
.topbar .wrap{display:flex; align-items:center; gap:18px; min-height:68px}

.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.04em;
       font-size:16px; white-space:nowrap; flex-shrink:0}
.brand:hover{text-decoration:none}
.brand img{height:30px; width:auto; display:block}
.brand .sep{width:1px; height:26px; background:var(--line-fort); flex-shrink:0}
.brand .txt{display:flex; flex-direction:column; line-height:1.1}
.brand .txt b{font-weight:700}
.brand .txt span{font-size:11px; font-weight:500; color:var(--ink-2);
                 letter-spacing:.04em; text-transform:uppercase}

.topbar nav{display:flex; flex-wrap:wrap; align-items:center; gap:4px; flex:1; margin-left:8px}
.topbar nav a{
  padding:9px 16px; border-radius:var(--r-pill); color:var(--ink-2);
  font-weight:550; font-size:14.5px; letter-spacing:-.02em; white-space:nowrap;
  transition:background .15s, color .15s;
}
.topbar nav a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.topbar nav a.on{background:var(--ink); color:var(--surface)}

/* Menu déroulant « Outils » */
.nav-drop{position:relative}
.nav-drop>button{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:var(--r-pill); color:var(--ink-2);
  font:inherit; font-weight:550; font-size:14.5px; letter-spacing:-.02em;
  background:none; border:none; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s;
}
.nav-drop>button:hover, .nav-drop.open>button, .nav-drop.on-section>button{background:var(--surface-2); color:var(--ink)}
.nav-drop .car{font-size:10px; transition:transform .15s}
.nav-drop.open .car{transform:rotate(180deg)}
.nav-drop .panel{
  position:absolute; top:calc(100% + 8px); left:0; min-width:520px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--ombre-forte); padding:18px; display:none;
  grid-template-columns:1fr 1fr; gap:22px; z-index:60;
}
.nav-drop.open .panel{display:grid}
.panel-group h3{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
                 color:var(--ink-2); font-weight:700; margin:0 0 8px}
.panel-group a{
  display:block; padding:8px 10px; border-radius:var(--r-field); font-size:14px;
  font-weight:550; color:var(--ink);
}
.panel-group a:hover{background:var(--accent-soft); text-decoration:none; color:var(--apef-vert-fonce)}

.me{display:flex; align-items:center; gap:12px; flex-shrink:0}
.me .who{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:550}
.me .avatar{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--apef-ambre-clair); color:var(--apef-ambre-ink);
  font-size:12px; font-weight:700; letter-spacing:0;
}

main.wrap{padding-top:28px; padding-bottom:56px; min-height:58vh}
.foot{color:var(--ink-3); font-size:12.5px; padding:22px 24px 36px; border-top:1px solid var(--line)}

/* ---------- Blocs ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px 24px; margin:18px 0; box-shadow:var(--ombre);
}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin:18px 0}
.cols .card{margin:0}
.crumbs{margin:0 0 14px; font-size:14px}
.crumbs a{color:var(--ink-2); font-weight:550}

.liste-outils{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.liste-outils li a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px; border-radius:var(--r-field); font-size:14.5px; font-weight:550;
}
.liste-outils li a:hover{background:var(--surface-2); text-decoration:none}

/* tuiles d'accueil */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:22px 0}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; box-shadow:var(--ombre); transition:transform .15s, box-shadow .15s, border-color .15s;
  display:flex; flex-direction:column; gap:10px;
}
.tile:hover{text-decoration:none; transform:translateY(-2px);
            box-shadow:var(--ombre-forte); border-color:var(--apef-vert)}
.tile .dot{width:9px; height:9px; border-radius:50%; display:block}
.tile-titre{font-weight:700; font-size:15.5px; letter-spacing:-.02em}
.tile-desc{font-size:13.5px; color:var(--ink-2); line-height:1.4; flex:1}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:10px 20px; border-radius:var(--r-pill);
  border:1px solid var(--line-fort); background:var(--surface); color:var(--ink);
  font:inherit; font-weight:600; font-size:14.5px; letter-spacing:-.025em;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, transform .1s;
}
.btn:hover{background:var(--surface-2); text-decoration:none; border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--apef-ambre); border-color:var(--apef-ambre);
             color:var(--apef-ambre-ink); font-weight:700}
.btn-primary:hover{background:var(--apef-ambre); border-color:var(--apef-ambre-ink); filter:brightness(1.04)}
.btn-ghost{background:transparent; border-color:var(--line-fort)}
.btn.danger{color:var(--danger); border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-bg)}
.btn-sm{padding:5px 13px; font-size:13px}
.btn-block{width:100%; padding:13px; font-size:15.5px; margin-top:20px}

/* ---------- Étiquettes de phase ---------- */
.tag{
  display:inline-block; padding:3px 11px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap;
  background:var(--neutre-bg); color:var(--neutre); align-self:flex-start;
}
.tag-green{background:var(--ok-bg);   color:var(--ok)}
.tag-amber{background:var(--warn-bg); color:var(--warn)}
.tag-grey{background:var(--neutre-bg); color:var(--neutre)}

/* ---------- Formulaires ---------- */
input[type=text],input[type=password],input[type=email],input[type=date],select{
  width:100%; padding:10px 13px; border:1px solid var(--line-fort); border-radius:var(--r-field);
  background:var(--surface); color:var(--ink); font:inherit; font-size:14.5px;
  letter-spacing:-.02em; min-width:0; transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:var(--ink-3)}
input:focus,select:focus{outline:none; border-color:var(--apef-vert);
                         box-shadow:0 0 0 3px color-mix(in srgb, var(--apef-vert) 22%, transparent)}
input[type=date]{
  padding:9px 13px; color-scheme:light; cursor:pointer; font-weight:550;
}
input[type=date]:hover{border-color:var(--apef-vert)}
input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer; padding:4px; margin-left:6px; border-radius:8px;
  filter:invert(48%) sepia(64%) saturate(496%) hue-rotate(51deg) brightness(94%) contrast(88%);
  transition:background .15s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover{background:var(--apef-vert-clair)}
input[type=date]::-webkit-datetime-edit{padding:0 2px}
input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}
.champ{margin-bottom:16px}
.champ label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.champ-check{display:inline-flex; align-items:center; gap:9px}
.champ-check label{margin:0; font-size:14.5px; font-weight:550; color:var(--ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--apef-vert); width:17px; height:17px}
.grille-saisie{display:grid; gap:14px 18px; margin:0 0 16px}
input[type=file]{
  width:100%; padding:9px 12px; border:1px dashed var(--line-fort); border-radius:var(--r-field);
  background:var(--surface-2); font:inherit; font-size:14px;
}

/* ---------- Tableaux ---------- */
.tablewrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--ombre); overflow-x:auto;
}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid th,table.grid td{padding:12px 16px; text-align:left; vertical-align:top}
table.grid thead th{
  background:var(--surface-2); color:var(--ink-2); font-weight:650; font-size:12px;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; border-bottom:1px solid var(--line);
}
table.grid tbody td{border-bottom:1px solid var(--line)}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid tbody tr:hover{background:var(--surface-2)}

.droits-badges{display:flex; flex-wrap:wrap; gap:6px}
.enligne{display:flex; gap:8px; flex-wrap:wrap}
.r{text-align:right !important}

/* Groupes de droits (formulaire d'édition d'un compte) */
.groupes-droits{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:14px 0 4px}
.groupe-droits h3{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
                   color:var(--ink-2); font-weight:700; margin:0 0 10px}
.groupe-droits .champ-check{margin-bottom:9px}

/* ---------- Page non développée ---------- */
.a-venir{text-align:center; padding:56px 24px}
.a-venir .puce{
  width:56px; height:56px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--apef-vert-fonce); font-size:24px;
}
.a-venir h1{justify-content:center}
.a-venir p{color:var(--ink-2); max-width:46ch; margin:8px auto 26px}

/* ---------- Messages ---------- */
.alert{padding:12px 16px; border-radius:var(--r-field); margin:14px 0;
       font-size:14px; font-weight:550}
.alert-error{background:var(--danger-bg); color:var(--danger)}
.alert-info{background:var(--info-bg);    color:var(--info)}
.alert-ok{background:var(--ok-bg);        color:var(--ok)}

/* ---------- Connexion ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, color-mix(in srgb, var(--apef-vert) 16%, transparent), transparent 62%),
    radial-gradient(900px 480px at 92% 8%, color-mix(in srgb, var(--apef-ambre) 20%, transparent), transparent 60%),
    var(--bg);
}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:38px 34px; width:100%; max-width:410px; box-shadow:var(--ombre-forte);
}
.login-card .brand{margin-bottom:22px}
.login-card h1{font-size:23px; display:block; margin:0}
.login-card .sub{color:var(--ink-2); font-size:14.5px; margin:6px 0 24px}
.login-card label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2);
                  margin:16px 0 6px}
.login-foot{margin-top:24px; font-size:12.5px; color:var(--ink-3); text-align:center}

/* ---------- Petits écrans ---------- */
@media (max-width:1340px){ .topbar nav a, .nav-drop>button{padding:8px 12px; font-size:14px} }
@media (max-width:1180px){ .me .who span{display:none} }
@media (max-width:860px){
  .wrap{padding:0 16px}
  h1{font-size:25px}
  .topbar .wrap{min-height:58px; flex-wrap:wrap; gap:10px}
  .brand{flex:1; min-width:0}
  .brand .txt span{display:none}
  .topbar nav{flex-basis:100%; order:9}
  .nav-drop .panel{grid-template-columns:1fr; min-width:0; left:0; right:0}
  .card{padding:18px; border-radius:18px}
}