/* ARÉEL Groupe — charte commune intranet / site agence (areel-agence360.netlify.app), 13/10/2026
   Chargée en dernier sur chaque page : typographies, couleurs, angles droits et boutons de l'Agence 360°.
   Typographies : Archivo (titres, large et gras, en capitales), Hanken Grotesk (texte), IBM Plex Mono (libellés). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --f-display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* palette Agence 360° */
  --paper:#FBFAF9; --paper-2:#F1EFED; --fg:#141111;
  --ground:#FBFAF9; --bg:#FBFAF9; --surface:#FFFFFF; --surface-2:#F1EFED;
  --ink:#141111; --ink-soft:#3B3534; --ink-faint:#A39B98; --muted:#6E6765;
  --line:rgba(20,17,17,.14); --border:rgba(20,17,17,.14);
  --red:#E42320; --red-ink:#C51A17; --red-dark:#C51A17; --red-soft:#FBE4E3;
  --accent:#E42320; --accent-ink:#FFFFFF; --accent-soft:#FBE4E3;
  --gold:#141111; --gold-ink:#141111; --gold-soft:#F1EFED;
  --shadow:0 0 #0000; --radius:2px; --focus:#E42320;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0909; --paper-2:#171313; --fg:#F5F2F0;
    --ground:#0B0909; --bg:#0B0909; --surface:#171313; --surface-2:#211B1B;
    --ink:#F5F2F0; --ink-soft:#D3CCC9; --ink-faint:#6E6765; --muted:#A39B98;
    --line:rgba(245,242,240,.16); --border:rgba(245,242,240,.16);
    --red:#E42320; --red-ink:#FF8A86; --red-dark:#C51A17; --red-soft:#3A1514;
    --accent:#E42320; --accent-ink:#FFFFFF; --accent-soft:#3A1514;
    --gold:#F5F2F0; --gold-ink:#F5F2F0; --gold-soft:#211B1B;
    --shadow:0 0 #0000; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0909; --paper-2:#171313; --fg:#F5F2F0;
  --ground:#0B0909; --bg:#0B0909; --surface:#171313; --surface-2:#211B1B;
  --ink:#F5F2F0; --ink-soft:#D3CCC9; --ink-faint:#6E6765; --muted:#A39B98;
  --line:rgba(245,242,240,.16); --border:rgba(245,242,240,.16);
  --red:#E42320; --red-ink:#FF8A86; --red-dark:#C51A17; --red-soft:#3A1514;
  --accent:#E42320; --accent-ink:#FFFFFF; --accent-soft:#3A1514;
  --gold:#F5F2F0; --gold-ink:#F5F2F0; --gold-soft:#211B1B;
  --shadow:0 0 #0000; color-scheme:dark;
}

/* ---------- Typographie ---------- */
body{font-family:var(--f-body)!important;-webkit-font-smoothing:antialiased}
input,select,textarea,button{font-family:inherit}
h1,h2{font-family:var(--f-display)!important;font-stretch:118%;font-weight:850!important;text-transform:uppercase;letter-spacing:-.01em!important;line-height:1.02!important;text-wrap:balance}
h3,h4{font-family:var(--f-display);font-stretch:112%;font-weight:800;letter-spacing:.005em}
h1 em,h2 em{font-style:normal;color:var(--red)}
th,legend,.eyebrow,.kicker,.label,.lab,.status-pill,.section-num,.result-count,.small.caps{font-family:var(--f-mono)!important;letter-spacing:.1em;text-transform:uppercase}
th{font-size:.7rem!important;font-weight:500!important}
legend{font-size:.72rem!important;font-weight:500!important}
.eyebrow{font-weight:500!important;color:var(--muted)}
code,kbd,.mono,.num-mono{font-family:var(--f-mono)}

/* ---------- Boutons : style Agence 360° (angles droits, libellés mono capitales) ---------- */
.btn,[class*="-btn"]:not([class*="close"]),.ext{
  border-radius:0!important;font-family:var(--f-mono)!important;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem!important;font-weight:500!important;box-shadow:none!important}
.btn.primary,.btn-primary,.primary.btn{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
.btn.primary:hover,.btn-primary:hover{background:var(--red-ink)!important;border-color:var(--red-ink)!important}

/* ---------- Surfaces : aplats, filets fins, angles droits ---------- */
.tile,.card,.kpi,.panel,fieldset,.lot,.table-wrap,.clock,.callout,.notice,.box,.bloc,.block,.stat,.widget,.modal,.dialog,
input,select,textarea{border-radius:2px!important}
.tile,.card,.kpi,.panel,.lot,.table-wrap,.clock,.box,.stat,.widget{box-shadow:none!important}

/* ---------- Puces rouges et filets (signature du site) ---------- */
::selection{background:var(--red);color:#fff}
a{text-underline-offset:3px}
:focus-visible{outline-color:var(--red)!important}

/* =====================================================================
   Coque de l'intranet (index.html, <html class="areel-shell">) — en-tête et accueil façon Agence 360°
   ===================================================================== */
.areel-shell .bar{background:var(--paper)!important;border-bottom:1px solid var(--line)!important;color:var(--fg)}
.areel-shell .bar::after{display:none!important}
.areel-shell .bar .logo-l{display:block!important} .areel-shell .bar .logo-d{display:none!important}
.areel-shell .bar-top{padding:12px var(--gutter,24px) 0!important}
.areel-shell .brand-txt{border-left:1px solid currentColor!important;padding-left:.85rem!important;gap:0!important;opacity:.9}
.areel-shell .brand .bt-k{font-family:var(--f-mono);font-size:.8rem!important;font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase;color:var(--muted)!important;line-height:1.1}
.areel-shell .brand .bt-n{font-family:var(--f-display);font-stretch:118%;font-size:1.35rem!important;font-weight:850!important;letter-spacing:-.005em!important;text-transform:uppercase;color:var(--fg)!important;line-height:1.05}
.areel-shell .logo{height:46px!important}
@media (max-width:520px){ .areel-shell .brand .bt-n{font-size:1rem!important} .areel-shell .brand .bt-k{font-size:.66rem!important} .areel-shell .logo{height:36px!important} }
.areel-shell .ext{color:var(--fg)!important;border:1px solid currentColor!important;padding:.55rem .85rem!important;background:transparent!important}
.areel-shell .ext:hover{background:var(--fg)!important;color:var(--paper)!important}
.areel-shell .ext.admin,.areel-shell a.ext[href*="admin"]{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
.areel-shell nav.tabs{padding:6px var(--gutter,24px) 0!important;gap:1.4rem!important}
.areel-shell .tab{font-family:var(--f-mono)!important;font-size:.72rem!important;font-weight:400!important;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)!important;padding:12px 0 12px!important;border-radius:0!important;border-bottom:2px solid transparent!important;background:none!important}
.areel-shell .tab:hover{color:var(--fg)!important;background:none!important}
.areel-shell .tab[aria-selected="true"]{color:var(--fg)!important;border-bottom-color:var(--red)!important}
.areel-shell .tab[aria-selected="true"]::before{content:"● ";color:var(--red);font-size:.6rem;vertical-align:1px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .areel-shell .bar .logo-l, :root:not([data-theme="light"]).areel-shell .bar .logo-l{display:none!important} :root:not([data-theme="light"]).areel-shell .bar .logo-d{display:block!important} }
:root[data-theme="dark"].areel-shell .bar .logo-l{display:none!important} :root[data-theme="dark"].areel-shell .bar .logo-d{display:block!important}

/* Accueil : bandeau noir encre, titre display géant, point rouge */
.areel-shell .home{max-width:1360px!important;padding-inline:var(--gutter,24px)!important}
.areel-shell .hero{border:0!important;box-shadow:none!important;border-radius:0!important;background:#0B0909!important;color:#F5F2F0!important;margin-bottom:clamp(28px,4vw,48px)!important}
.areel-shell .hero::before{background-image:linear-gradient(rgba(245,242,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,242,240,.05) 1px,transparent 1px)!important}
.areel-shell .hero-in{padding:clamp(28px,5vw,64px)!important}
.areel-shell .hero-k{font-family:var(--f-mono);font-weight:400!important;letter-spacing:.14em!important;color:#A39B98!important;font-size:.74rem!important}
.areel-shell .hero-rule{background:var(--red)!important;width:22px!important;height:1px!important}
.areel-shell .hero h1{font-size:clamp(2.4rem,6vw,5.2rem)!important;line-height:.95!important;color:#F5F2F0!important;margin:18px 0 18px!important}
.areel-shell .hero-name{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#F5F2F0!important}
.areel-shell .hero-name::after{content:".";color:var(--red)}
.areel-shell .hero-lede{color:#A39B98!important;font-size:1.05rem!important;max-width:58ch!important}
.areel-shell .hero-btn{border-radius:0!important;padding:.95rem 1.35rem!important;background:var(--red)!important;color:#fff!important;border:1px solid var(--red)!important}
.areel-shell .hero-btn:hover{background:var(--red-ink,#C51A17)!important;transform:none!important}
.areel-shell .hero-btn.ghost{background:transparent!important;color:#F5F2F0!important;border:1px solid #F5F2F0!important}
.areel-shell .hero-btn.ghost:hover{background:#F5F2F0!important;color:#0B0909!important}
.areel-shell .hero-side{border-left:1px solid rgba(245,242,240,.16)!important}
.areel-shell .hero-logo{filter:none!important}
.areel-shell .hero-date{font-family:var(--f-mono);font-size:.78rem!important;letter-spacing:.08em;text-transform:uppercase;font-weight:400!important}
.areel-shell .hero-sig{font-family:var(--f-mono);color:#6E6765!important}

/* Raccourcis de l'accueil : liste éditoriale (titre display, flèche rouge) */
.areel-shell .eyebrow{color:var(--muted)!important}
.areel-shell .group h2{font-family:var(--f-mono)!important;font-stretch:100%;font-size:.74rem!important;font-weight:400!important;letter-spacing:.14em!important;color:var(--muted)!important;border-top:2px solid var(--fg);padding-top:12px}
.areel-shell .tile{border-radius:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;padding:18px 4px!important}
.areel-shell .tile:hover{transform:none!important;background:var(--paper-2)!important}
.areel-shell .tile b{font-family:var(--f-display);font-stretch:112%;font-weight:800;text-transform:uppercase;font-size:1.05rem!important;letter-spacing:.01em}
.areel-shell .tile .go{color:var(--red)!important}
.areel-shell .tag{border-radius:0!important;font-family:var(--f-mono);font-weight:400!important;letter-spacing:.08em;text-transform:uppercase;background:transparent!important;border:1px solid var(--line);color:var(--muted)!important}
.areel-shell .clock{border-radius:0!important;border-left:3px solid var(--red)!important}
.areel-shell .clk-btn{border-radius:0!important}
.areel-shell .clk-btn.dark{background:var(--fg)!important;color:var(--paper)!important}

/* Bandeau « Aujourd'hui » et badge du jour (Priorités & Actions) : --gold vaut l'encre dans la charte,
   on force un fond noir encre avec texte clair et filet rouge (correctif 17/10/2026). */
.today-event-banner{background:#0B0909!important;color:#F5F2F0!important;border-left:4px solid var(--red)!important;border-radius:0!important}
.today-event-banner .today-event-title{font-family:var(--f-mono)!important;font-weight:500!important;letter-spacing:.14em!important;color:#FF8A86!important;opacity:1!important}
.today-event-banner .today-event-item{color:#F5F2F0!important;font-size:16px!important}
.today-event-banner .today-event-item span{color:#A39B98!important;opacity:1!important}
.today-badge:not(.done){background:var(--red)!important;color:#FFFFFF!important;border-radius:0!important}
tr.today-row td:first-child{box-shadow:inset 3px 0 0 var(--red)!important}

/* Titres harmonisés sur toutes les pages (20/10/2026, demande de Marlène : titres plus petits et identiques partout).
   La page d'accueil (html.areel-shell) garde son grand bandeau. */
html:not(.areel-shell) h1{font-size:clamp(1.35rem,1.9vw,1.6rem)!important;line-height:1.1!important;letter-spacing:-.005em!important;margin-top:0}
html:not(.areel-shell) h2{font-size:clamp(1rem,1.3vw,1.125rem)!important;line-height:1.2!important}
html:not(.areel-shell) h3{font-size:1rem!important}
html:not(.areel-shell) .sec-t h2{font-size:13px!important}

/* Navigation regroupée de l'accueil (menus déroulants, 20/10/2026) */
.tabg{position:relative;display:inline-flex;flex:none}
.areel-shell .tabg-t{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.areel-shell .tabg-t .tabg-c{font-size:.62rem;opacity:.8}
.tabg-m{position:fixed;z-index:80;min-width:260px;background:var(--paper,#FBFAF9);border:1px solid var(--line);border-top:2px solid var(--red);box-shadow:0 18px 40px -18px rgba(11,9,9,.45);padding:6px 0;display:flex;flex-direction:column}
.tabg-m[hidden]{display:none!important}
.areel-shell .tabg-m .tab{display:block!important;width:100%;text-align:left;padding:11px 18px!important;border-bottom:0!important;white-space:nowrap;color:var(--fg)!important}
.areel-shell .tabg-m .tab:hover{background:var(--paper-2)!important}
.areel-shell .tabg-m .tab[aria-selected="true"]{background:var(--paper-2)!important}