/* =========================================================
   AJORIS, design system « Atelier clair »
   Base blanche, accents colorés, formes douces.
   Fichier 1 sur 3, les fondations.
   Variables, primitives, en-tête et pied de page.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- fonds & surfaces --- */
  --void:#FFFFFF;             /* fond global */
  --void-soft:#F6F7FC;        /* bandes alternées */
  --panel:#FFFFFF;            /* cartes */
  --panel-2:#F7F8FD;          /* cartes secondaires */
  --panel-3:#EEF1FB;          /* surfaces enfoncées */

  --line:#E6E9F5;
  --line-strong:#D4D9EC;

  /* --- texte ---
     Les trois niveaux passent le ratio AA sur fond blanc comme sur
     les fonds teintés clairs. Le plus clair des trois monte à 4.96. */
  --text:#14172B;
  --muted:#4F5670;
  --muted-dim:#626983;

  /* --- couleurs d'accent ---
     Chaque teinte existe en trois déclinaisons.
       --x       surface pleine et pastilles décoratives
       --x-soft  fond très clair d'un badge ou d'une carte
       --x-ink   version foncée, la SEULE utilisable pour du texte,
                 les versions vives tombant à 2,5 sur blanc. */
  --indigo:#6C4CF1;
  --indigo-dark:#5636D6;
  --indigo-soft:#F0ECFE;
  --indigo-ink:#5636D6;
  --violet:#8B5CF6;
  --blue:#2563EB;
  --blue-soft:#E7EEFE;
  --blue-ink:#1D4ED8;
  --cyan:#0BB3C9;
  --cyan-soft:#E0F6F9;
  --cyan-ink:#046A7A;
  --green:#0FA968;
  --green-soft:#E2F7ED;
  --green-ink:#08794A;
  --amber:#E08A00;
  --amber-soft:#FDF0DA;
  --amber-ink:#8A5200;
  --rose:#E63958;
  --rose-soft:#FDE8EC;
  --rose-ink:#BE1B3C;
  --fuchsia:#D946EF;
  --fuchsia-soft:#FBEAFE;
  --fuchsia-ink:#A21CAF;

  /* Dégradé de marque. Chaque arrêt garde un contraste d'au moins 4,8
     avec du blanc, parce qu'il sert autant de fond de bouton que de
     remplissage pour les titres en .gradient-text. L'ancienne version
     finissait sur un cyan clair où le texte blanc tombait à 2,5. */
  --grad-brand:linear-gradient(120deg,#6C4CF1 0%,#8B3FE0 38%,#2F6BE0 76%,#0E7C99 100%);
  /* Version vive, réservée aux aplats décoratifs sans texte. */
  --grad-vivid:linear-gradient(120deg,#6C4CF1 0%,#8B5CF6 38%,#2FA8F5 78%,#0BB3C9 100%);
  --grad-warm:linear-gradient(120deg,#F97316 0%,#E63958 55%,#D946EF 100%);

  /* --- formes --- */
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px -28px rgba(24,29,66,.24);
  --shadow-sm:0 10px 26px -16px rgba(24,29,66,.24);
  --shadow-lift:0 34px 70px -30px rgba(88,63,222,.32);
  --ring:0 0 0 4px rgba(108,76,241,.16);
  --container:1200px;

  --font-display:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background-color:var(--void);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
/* Un <button> auquel personne n'a donné de fond hérite du gris et du relief
   que pose le navigateur, avec en prime une largeur qui s'arrête au texte et
   un centrage. Deux gabarits s'y étaient fait prendre, la liste des clients
   de la messagerie et la carte du kanban. On neutralise la présentation par
   défaut une bonne fois ; les boutons habillés posent la leur juste après. */
button{
  background:none;border:0;padding:0;margin:0;
  text-align:inherit;cursor:pointer;
}
::selection{background:rgba(108,76,241,.18)}

h1,h2,h4{font-family:var(--font-display);letter-spacing:-.025em;line-height:1.12;margin:0;color:var(--text);font-weight:800}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-family:var(--font-display);line-height:1.2;margin:0;color:var(--text);font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
p{margin:0}

.mono{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.01em}

/* ---------------------------------------------------------
   Mise en page
   --------------------------------------------------------- */
.container{width:min(var(--container),100% - 40px);margin-inline:auto}
.container-app{width:min(1340px,100% - 40px)}
.section{padding:96px 0}
.section-v2{padding:96px 0}
.section-soft{background:var(--void-soft)}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);
  margin-bottom:14px;
}
.section-kicker:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-brand)}

.lead{color:var(--muted);font-size:1.03rem;margin-top:14px;max-width:62ch}

.section-head,.section-head-v2{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;margin-bottom:44px;flex-wrap:wrap;
}
.section-head-v2>div:first-child{max-width:680px}
.section-heading{margin-bottom:36px;max-width:680px}

.gradient-text,.gradient-text-v2{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.text-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:650;color:var(--indigo);font-size:.94rem;
  transition:gap .2s ease,color .2s ease;
}
.text-link:hover{gap:13px;color:var(--indigo-dark)}
.inline-link{color:var(--indigo);font-weight:600;border-bottom:1px solid rgba(108,76,241,.3)}
.inline-link:hover{border-color:var(--indigo)}

.divider{height:1px;background:var(--line);margin:14px 0;border:0}

/* ---------------------------------------------------------
   Boutons
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:center;
  padding:11px 20px;border-radius:999px;
  font-family:var(--font-body);font-size:.93rem;font-weight:650;
  border:1px solid var(--line-strong);background:#fff;color:var(--text);
  cursor:pointer;transition:transform .18s ease,box-shadow .22s ease,background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px);border-color:var(--indigo);color:var(--indigo);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn-primary{
  background:var(--grad-brand);border-color:transparent;color:#fff;
  box-shadow:0 14px 30px -14px rgba(108,76,241,.7);
}
.btn-primary:hover{color:#fff;border-color:transparent;box-shadow:0 22px 40px -16px rgba(108,76,241,.75)}

.btn-soft{background:var(--indigo-soft);border-color:transparent;color:var(--indigo-dark)}
.btn-soft:hover{background:#E7E1FE;color:var(--indigo-dark);border-color:transparent}

.btn-lg{padding:14px 26px;font-size:1rem}
.btn-sm{padding:8px 15px;font-size:.85rem}
.btn-block{width:100%}
.danger-soft{background:var(--rose-soft);border-color:transparent;color:var(--rose-ink)}
.danger-soft:hover{background:#FBD8DE;color:var(--rose-ink);border-color:transparent}

/* ---------------------------------------------------------
   Pastilles, badges, statuts
   --------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:.8rem;font-weight:600;color:var(--muted);
  box-shadow:var(--shadow-sm);
}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag-row span,.tag{
  display:inline-flex;align-items:center;
  padding:5px 12px;border-radius:999px;
  background:var(--panel-3);color:var(--muted);
  font-size:.76rem;font-weight:600;letter-spacing:.01em;
}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--rose-ink);color:#fff;font-size:.7rem;font-weight:700;
}

.status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:999px;
  font-size:.76rem;font-weight:650;white-space:nowrap;
  background:var(--panel-3);color:var(--muted);
}
.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.dev{background:var(--blue-soft);color:var(--blue-ink)}
.status.done,.status.ok{background:var(--green-soft);color:var(--green-ink)}
.status.wait,.status.etude{background:var(--amber-soft);color:var(--amber-ink)}
.status.attente{background:var(--panel-3);color:var(--muted)}
.status.refusee,.status.failed{background:var(--rose-soft);color:var(--rose-ink)}
.status.maintenance{background:var(--fuchsia-soft);color:var(--fuchsia-ink)}
.status.blocked{background:var(--rose-soft);color:var(--rose-ink)}
.status.paid{background:var(--green-soft);color:var(--green-ink)}
.status.pending{background:var(--amber-soft);color:var(--amber-ink)}
.status.operational{background:var(--green-soft);color:var(--green-ink)}
.status.degraded{background:var(--amber-soft);color:var(--amber-ink)}
.status.outage{background:var(--rose-soft);color:var(--rose-ink)}
.status.unknown{background:var(--panel-3);color:var(--muted)}

.status-light{width:10px;height:10px;border-radius:50%;background:var(--muted-dim);flex:none}
.status-light.done{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.status-light.wait{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.status-light.refusee{background:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}
.status-light.maintenance{background:var(--fuchsia);box-shadow:0 0 0 4px var(--fuchsia-soft)}
.status-light.attente{background:var(--muted-dim);box-shadow:0 0 0 4px var(--panel-3)}

.status-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:999px;background:var(--panel-3);color:var(--muted);
  font-size:.74rem;font-weight:650;
}

/* ---------------------------------------------------------
   Cartes & surfaces
   --------------------------------------------------------- */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:24px;
  box-shadow:var(--shadow-sm);
}

.metric{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:20px;
  display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.metric small{color:var(--muted);font-size:.8rem;font-weight:600}
.metric strong{font-family:var(--font-display);font-size:1.85rem;font-weight:800;letter-spacing:-.03em}
.metric em{font-style:normal;color:var(--muted-dim);font-size:.78rem}

.table-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);
}
.table-head,.table-row{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:14px;align-items:center;padding:14px 20px;
}
.table-head{
  background:var(--panel-2);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-dim);font-weight:600;
}
.table-row{border-bottom:1px solid var(--line);font-size:.9rem;transition:background .16s ease}
.table-row:last-child{border-bottom:0}
.table-row:hover{background:var(--panel-2)}
/* Une ligne qui ouvre une fiche. Le curseur était posé en style inline
   dans les gabarits JavaScript, il vit ici maintenant. */
.table-row.is-clickable,.proj-name.is-clickable{cursor:pointer}
.table-row.is-clickable:hover{background:var(--indigo-soft)}
.proj-name.is-clickable:hover strong{color:var(--indigo-ink)}
.table-row .proj-name,.proj-name a{display:flex;flex-direction:column;gap:2px}
.table-row .proj-name strong{font-weight:650}
.table-row .proj-name small,.table-row small{color:var(--muted-dim);font-size:.78rem}
/* Barre de progression générique. Le `display:block` est indispensable.
   Le JavaScript la génère sous forme de <span>, or une hauteur ne
   s'applique pas à un élément inline, et la barre venait alors
   recouvrir le contenu placé juste après. */
.bar{
  display:block;width:100%;height:8px;border-radius:999px;
  background:var(--panel-3);overflow:hidden;
}
.bar>span{display:block;height:100%;border-radius:999px;background:var(--grad-brand)}

.row-progress{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);font-weight:600}
.row-progress .bar{flex:1;width:auto;height:6px;min-width:56px}
.row-progress .bar span{display:block;height:100%;border-radius:999px;background:var(--grad-brand)}

.empty-state{
  padding:34px 22px;text-align:center;color:var(--muted-dim);
  font-size:.9rem;
}
.empty-state p{margin:0}

/* Les horodatages sont écrits en <time> dans cinq gabarits. Seule la
   chronologie en déclarait l'apparence, ailleurs ils sortaient à la taille
   et à la couleur du texte courant, aussi voyants que le message qu'ils
   datent. */
time{font-family:var(--font-mono);font-size:.72rem;color:var(--muted-dim)}

.doc-list{display:flex;flex-direction:column;gap:12px}
.doc-row{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 18px;
  transition:border-color .18s ease,box-shadow .2s ease,transform .18s ease;
}
.doc-row:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.doc-ico{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;font-size:1rem;
  background:var(--indigo-soft);color:var(--indigo);
}
.doc-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.doc-meta strong{font-weight:650;font-size:.94rem}
.doc-meta small{color:var(--muted-dim);font-size:.78rem}

.alert{
  border-radius:var(--radius-sm);padding:13px 16px;
  background:var(--amber-soft);color:var(--amber-ink);font-size:.88rem;
  border:1px solid rgba(224,138,0,.22);
}

/* ---------------------------------------------------------
   Formulaires
   --------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:650;color:var(--text)}
.field .opt,.opt{margin-left:.4em;color:var(--muted-dim);font-weight:500;font-size:.8rem}

input[type=text],input[type=email],input[type=password],input[type=url],
input[type=number],input[type=date],input[type=search],input[type=tel],
select,textarea{
  width:100%;padding:12px 15px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line-strong);color:var(--text);
  font-size:.94rem;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
textarea{min-height:130px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:#A9AFC6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--panel-2);color:var(--muted-dim);cursor:not-allowed}
select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6180' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.form-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow);
}
.form-heading{margin-bottom:24px}
.form-note{font-size:.85rem;color:var(--muted);margin-top:12px}
.field-help{font-size:.8rem;color:var(--muted-dim)}

.settings-block{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);
}

.toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.toggle-row:last-child{border-bottom:0}
.toggle-row strong{display:block;font-size:.92rem;font-weight:650}
.toggle-row small{color:var(--muted-dim);font-size:.8rem}

.switch{position:relative;display:inline-block;width:48px;height:27px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .track{
  position:absolute;inset:0;border-radius:999px;background:var(--panel-3);
  border:1px solid var(--line-strong);transition:background .2s ease,border-color .2s ease;
}
.switch .thumb{
  position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(20,23,43,.22);
  transition:transform .2s ease;pointer-events:none;
}
.switch input:checked~.track{background:var(--grad-brand);border-color:transparent}
.switch input:checked~.thumb{transform:translateX(21px)}
.switch input:focus-visible~.track{box-shadow:var(--ring)}

/* ---------------------------------------------------------
   En-tête
   --------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.has-scrolled .topbar{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(24,29,66,.4)}
.nav{display:flex;align-items:center;gap:20px;height:74px}

.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-logo-full,.brand-logo-dark{display:none}
.brand-light-composed{display:inline-flex;align-items:center;gap:10px}
.brand-light-mark{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
}
.brand-light-mark img{width:100%;height:100%;object-fit:contain}
.brand-light-word{
  font-family:var(--font-display);font-weight:800;font-size:1.28rem;
  letter-spacing:-.03em;color:var(--text);
}

.nav-links{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.nav-links a{
  padding:8px 13px;border-radius:999px;white-space:nowrap;
  font-size:.9rem;font-weight:550;color:var(--muted);
  transition:color .18s ease,background .18s ease;
}
.nav-links a:hover{color:var(--text);background:var(--panel-2)}
.nav-links a.active,.nav-links a[aria-current=page]{color:var(--indigo);background:var(--indigo-soft)}

.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.mobile-toggle{display:none;width:44px;height:44px;padding:0;font-size:1.05rem;line-height:1}
.theme-toggle,.theme-icon,.theme-switching{display:none!important}

.nav-badge-free{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:6px 13px;border-radius:999px;
  background:var(--green-soft);color:var(--green-ink);
  font-size:.78rem;font-weight:700;letter-spacing:.01em;
}
.nav-badge-free:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

@media (max-width:1260px){
  .nav-badge-free{display:none}
}
@media (max-width:1120px){
  .nav-links{display:none}
  .nav-client{display:none}
  .mobile-toggle{display:inline-flex}
}
@media (max-width:560px){
  .nav-project{display:none}
  .nav{height:66px}
}

/* liens réservés au menu mobile */
.nav-mobile-only{display:none}

/* menu mobile ouvert (ouvert/fermé par app.js) */
.nav-links.is-mobile-open{
  display:flex!important;position:absolute;top:calc(100% + 8px);left:12px;right:12px;
  margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 26px 60px -26px rgba(24,29,66,.4);
}
.nav-links.is-mobile-open a{padding:12px 14px;border-radius:12px}
.nav-links.is-mobile-open .nav-mobile-only{display:block}
.nav-links.is-mobile-open .nav-mobile-cta{
  margin-top:8px;text-align:center;color:#fff;font-weight:700;
  background:var(--grad-brand);
  box-shadow:0 14px 28px -14px rgba(108,76,241,.7);
}
.nav-links.is-mobile-open .nav-mobile-cta:hover{color:#fff;background:var(--grad-brand)}

/* ---------------------------------------------------------
   Pied de page
   --------------------------------------------------------- */
.footer-v2{
  background:var(--void-soft);border-top:1px solid var(--line);
  padding:72px 0 32px;margin-top:0;
}
.footer-main{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);
  gap:44px;padding-bottom:44px;border-bottom:1px solid var(--line);
}
.footer-brand-block{max-width:320px}
.footer-logo,.footer-logo-dark{display:none}
.footer-logo-light{display:inline-flex;margin-bottom:16px}
.footer-brand-block p{color:var(--muted);font-size:.9rem;margin-top:6px}
.footer-free-badge{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  padding:8px 15px;border-radius:999px;background:var(--green-soft);
  color:var(--green-ink);font-size:.8rem;font-weight:700;
}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col strong{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text);margin-bottom:4px;
}
.footer-col a{color:var(--muted);font-size:.9rem;transition:color .16s ease}
.footer-col a:hover{color:var(--indigo)}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;padding-top:26px;
  color:var(--muted-dim);font-size:.83rem;
}
.footer-legal-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal-links a{transition:color .16s ease}
.footer-legal-links a:hover{color:var(--indigo)}
.footer-signal{display:inline-flex;align-items:center;gap:8px}
.footer-signal i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}

@media (max-width:900px){
  .footer-main{grid-template-columns:1fr 1fr;gap:34px}
  .footer-brand-block{grid-column:1/-1;max-width:none}
}
@media (max-width:560px){
  .footer-main{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   Modale
   --------------------------------------------------------- */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;
  background:rgba(20,23,43,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal-overlay.hidden{display:none}
.modal-card{
  width:min(640px,100%);max-height:86vh;overflow:auto;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;
  box-shadow:0 40px 90px -30px rgba(24,29,66,.5);
}
.modal-card p{color:var(--muted)!important}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.modal-head h3{font-size:1.2rem}
.modal-close{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  transition:background .16s ease,color .16s ease;
}
.modal-close:hover{background:var(--rose-soft);color:var(--rose);border-color:transparent}

/* ---------------------------------------------------------
   Centre de notifications
   --------------------------------------------------------- */
.notification-center{position:relative}
.notification-bell{
  position:relative;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  transition:border-color .18s ease,color .18s ease,box-shadow .2s ease;
}
.notification-bell:hover{border-color:var(--indigo);color:var(--indigo);box-shadow:var(--shadow-sm)}
.notification-bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notification-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--rose-ink);color:#fff;font-size:.68rem;font-weight:700;
  display:grid;place-items:center;border:2px solid #fff;
}
.notification-popover{
  position:absolute;top:calc(100% + 12px);right:0;z-index:80;
  width:min(380px,88vw);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 30px 70px -28px rgba(24,29,66,.45);overflow:hidden;
}
.notification-popover-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.notification-popover-head span{
  display:block;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);
}
.notification-popover-head strong{font-family:var(--font-display);font-size:.98rem}
.notification-popover-head button{
  background:none;border:0;cursor:pointer;color:var(--indigo);
  font-size:.8rem;font-weight:650;
}
.notification-list{max-height:400px;overflow:auto}
.notification-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 18px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .16s ease;
}
.notification-item:hover{background:var(--panel-2)}
.notification-item:last-child{border-bottom:0}
.notification-icon{
  width:34px;height:34px;border-radius:11px;flex:none;
  display:grid;place-items:center;font-size:.9rem;
  background:var(--indigo-soft);color:var(--indigo);
}
.notification-copy{flex:1;min-width:0}
.notification-copy strong{display:block;font-size:.9rem;font-weight:650}
.notification-copy small,.notification-copy p{display:block;color:var(--muted);font-size:.82rem;margin:2px 0 0}
.notification-dot{width:8px;height:8px;border-radius:50%;background:var(--indigo);flex:none;margin-top:6px}
.notification-empty{padding:30px 18px;text-align:center;color:var(--muted-dim);font-size:.86rem}

/* ---------------------------------------------------------
   Révélation au défilement & utilitaires
   --------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
[data-reveal].in{opacity:1;transform:none}
.aj-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.aj-reveal.is-visible,.aj-motion-ready .aj-reveal.is-visible{opacity:1;transform:none}

/* L'attribut HTML `hidden` ne pose qu'un display:none de faible
   priorité. N'importe quelle règle d'auteur qui fixe un display le
   neutralise, et c'est ce qui arrivait avec .notification-badge en
   display:grid, la pastille restant affichée à « 0 ». On rétablit
   ici le comportement attendu pour tout le site. */
[hidden]{display:none!important}
.hidden{display:none!important}
.fade-out{opacity:0;transition:opacity .3s ease}
.loading{opacity:.55;pointer-events:none}
.full{grid-column:1/-1}
.compact{padding:16px}
.text-center{text-align:center}
.mt-0{margin-top:0}

@media (max-width:760px){
  .section,.section-v2{padding:64px 0}
  .container,.container-app{width:min(100% - 32px,var(--container))}
  .section-head,.section-head-v2{margin-bottom:32px}
}