/* ============================================================
   Colore Mon Hôpital — feuille de style V2
   Base blanche + dégradés inspirés du logo (un par page).
   Police Lato. Encarts ombrés, encarts éditables (CMS).
   ============================================================ */

:root {
  --brand-grad: linear-gradient(120deg, #9f1239, #db2777);
  --ink:        #1c1c22;
  --ink-soft:   #5b626c;
  --line:       #ececf0;
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --accent:     #e8347d;   /* magenta du logo — accent CTA */
  --accent-dark:#cf246a;
  --radius:     16px;
  --radius-lg:  24px;
  --maxw:       1160px;
  --shadow-sm:  0 2px 14px rgba(28,28,34,.05);
  --shadow:     0 12px 34px rgba(28,28,34,.08);
  --shadow-lg:  0 24px 60px rgba(28,28,34,.12);

  /* Palette arc-en-ciel (logo) */
  --c-pink:   #ec4899;
  --c-red:    #ef4444;
  --c-orange: #f97316;
  --c-yellow: #f5b301;
  --c-green:  #22c55e;
  --c-teal:   #14b8a6;
  --c-blue:   #3b82f6;
  --c-purple: #8b5cf6;

  /* Dégradé par défaut (accueil + admin) = BLEU */
  --grad: linear-gradient(120deg, #1d4ed8, #3b82f6, #38bdf8);
  --grad-soft: linear-gradient(160deg, rgba(29,78,216,.10), rgba(56,189,248,.10));
  --grad-a: #1d4ed8;
  --grad-b: #38bdf8;
}

/* ---- Dégradé propre à chaque page ---- */
.page-about  { --grad: linear-gradient(120deg, #ea580c, #f59e0b); --grad-a:#ea580c; --grad-b:#f59e0b;
               --grad-soft: linear-gradient(160deg, rgba(234,88,12,.12), rgba(245,158,11,.10)); }
.page-news   { --grad: linear-gradient(120deg, #16a34a, #a3e635); --grad-a:#16a34a; --grad-b:#84cc16;
               --grad-soft: linear-gradient(160deg, rgba(22,163,74,.12), rgba(163,230,53,.12)); }
.page-contact{ --grad: linear-gradient(120deg, #7c3aed, #ec4899); --grad-a:#7c3aed; --grad-b:#ec4899;
               --grad-soft: linear-gradient(160deg, rgba(124,58,237,.12), rgba(236,72,153,.10)); }
.page-dons   { --grad: linear-gradient(120deg, #f43f5e, #fb923c); --grad-a:#f43f5e; --grad-b:#fb923c;
               --grad-soft: linear-gradient(160deg, rgba(244,63,94,.13), rgba(251,146,60,.11)); }
.page-team   { --grad: linear-gradient(120deg, #9f1239, #db2777); --grad-a:#9f1239; --grad-b:#db2777;
               --grad-soft: linear-gradient(160deg, rgba(159,18,57,.12), rgba(219,39,119,.11)); }
.page-legal  { --grad: linear-gradient(120deg, #475569, #94a3b8); --grad-a:#475569; --grad-b:#94a3b8;
               --grad-soft: linear-gradient(160deg, rgba(71,85,105,.08), rgba(148,163,184,.08)); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Lato", "Aptos", -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; font-weight: 900; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; color: var(--ink-soft); }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--soft { background: var(--bg-soft); }
.text-center { text-align: center; }
.lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 640px; }
.gradient-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; padding: 13px 28px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; border: 1.5px solid var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--cta {
  background: var(--grad); border: 0; color: #fff;
  box-shadow: 0 8px 22px rgba(232,52,125,.28);
}
.btn--cta:hover { box-shadow: 0 12px 28px rgba(232,52,125,.36); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.navbar__inner { gap: 16px; }
.nav-links { flex-wrap: nowrap; }
.navbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 92px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { width: 68px; height: 68px; object-fit: contain; }
.brand__name { font-weight: 900; letter-spacing: .05em; font-size: 1.35rem; white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .15s; position: relative;
}
.nav-links a:not(.btn):hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--grad);
}
.nav-links a.btn { color: #fff; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 104px 0 80px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-soft);
}
.hero::after {
  content: ""; position: absolute; top: -140px; right: -120px; width: 460px; height: 460px;
  background: var(--grad); filter: blur(90px); opacity: .18; border-radius: 50%; z-index: -1;
}
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { margin-bottom: 1.9rem; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__visual {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--bg-soft);
  border: 6px solid #fff;
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual--placeholder { display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }

/* ---------- Eyebrow / section head ---------- */
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 900; margin-bottom: .9em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section__head { max-width: 660px; margin: 0 auto 52px; text-align: center; }

/* ---------- Bandeau chiffres ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat {
  text-align: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 18px; box-shadow: var(--shadow-sm);
}
.stat__num { font-size: 2.7rem; font-weight: 900; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.stat__label { color: var(--ink-soft); font-size: .95rem; margin-top: 8px; }

/* ---------- Cartes / encarts ombrés ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad);
  opacity: 0; transition: opacity .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card h3 { margin-top: .2em; }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; margin-bottom: 16px;
  background: var(--grad-soft);
}

/* Encart de texte “feature” (pages de contenu) */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 36px; box-shadow: var(--shadow); margin-bottom: 26px;
  position: relative; overflow: hidden;
}
.panel::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: var(--grad);
}
.panel h3 { font-size: 1.35rem; margin-bottom: .5em; }
.panel h3 .panel__emoji { margin-right: 10px; }
.panel p:last-child { margin-bottom: 0; }
.panel--wide { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---------- Articles (blog) ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.article-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.article-card__media { aspect-ratio: 16/10; background: var(--grad-soft); overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__media--empty { display:flex; align-items:center; justify-content:center; font-size:2rem; }
.article-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.article-card__date { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.article-card h3 { margin: 8px 0 10px; font-size: 1.15rem; }
.article-card p { font-size: .95rem; }
.article-card__link { margin-top: auto; font-weight: 800; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Article détail ---------- */
.article-detail { max-width: 780px; margin: 0 auto; }
.article-detail__meta { color: var(--ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.article-detail h1 { margin: 10px 0 24px; }
.article-detail__cover { width: 100%; border-radius: var(--radius-lg); margin-bottom: 34px; box-shadow: var(--shadow); }
.article-detail p { font-size: 1.1rem; color: #33343a; }
.back-link { display: inline-block; margin-bottom: 26px; font-weight: 800; color: var(--ink-soft); }
.back-link:hover { color: var(--ink); }

/* ---------- Formulaires ---------- */
.form { max-width: 640px; }
.form label { display: block; font-weight: 700; font-size: .9rem; margin: 18px 0 6px; }
.form input, .form textarea, .form select {
  width: 100%; padding: 13px 15px; font: inherit; border: 1.5px solid var(--line);
  border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--grad-a); box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.form textarea { min-height: 160px; resize: vertical; }
.form__row { display: flex; gap: 18px; }
.form__row > * { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.checkbox-row input { width: auto; }
.field-hint { font-weight: 400; color: var(--ink-soft); font-size: .82rem; }

/* ---------- Flash ---------- */
.flash-wrap { max-width: var(--maxw); margin: 20px auto 0; padding: 0 24px; }
.flash { padding: 13px 18px; border-radius: 12px; font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
.flash--success { background: #eef7f0; color: #1e6b3b; border: 1px solid #cbe6d4; }
.flash--error   { background: #fdeeec; color: #b23a29; border: 1px solid #f3cfc8; }

/* ---------- Don ---------- */
.don-card {
  max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow);
}
.don-amounts { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.don-amount {
  flex: 1; min-width: 96px; text-align: center; padding: 22px 10px; border: 1.5px solid var(--line);
  border-radius: var(--radius); font-weight: 900; font-size: 1.3rem; cursor: pointer;
  transition: .15s; background: #fff;
}
.don-amount:hover, .don-amount.selected { border-color: transparent; color: #fff; background: var(--grad); }
.don-note { font-size: .9rem; color: var(--ink-soft); }

/* ---------- Admin ---------- */
.admin-shell { max-width: 980px; margin: 0 auto; padding: 56px 24px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.admin-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.admin-table th { background: var(--bg-soft); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: #fcfcfd; }
.admin-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.admin-thumb--empty { display:flex; align-items:center; justify-content:center; background: var(--grad-soft); font-size: 1rem; }
.tag { display:inline-block; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.tag--on { background:#eef7f0; color:#1e6b3b; }
.tag--off { background:#f1f1f4; color:#7a7a85; }
.row-actions { display: flex; gap: 14px; align-items: center; }
.row-actions a, .row-actions button { font-size: .85rem; font-weight: 800; background: none; border: 0; cursor: pointer; color: var(--ink-soft); padding: 0; }
.row-actions a:hover { color: var(--ink); }
.row-actions .danger { color: #cf246a; }
.admin-empty { padding: 60px; text-align: center; }

.login-wrap { min-height: 72vh; display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft); padding: 40px 20px; }
.login-card { width: 100%; max-width: 400px; background:#fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 42px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 1.5rem; text-align:center; margin-bottom: .2em; }
.login-card .login-sub { text-align:center; margin-bottom: 8px; }

/* Aperçu image dans le formulaire admin */
.cover-preview { margin-top: 12px; }
.cover-preview img { max-width: 260px; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* ---------- Barre CMS (édition inline) ---------- */
.cms-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: rgba(28,28,34,.94); backdrop-filter: blur(8px); border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.cms-bar__status { color: #fff; font-size: .84rem; font-weight: 700; padding: 0 6px; }
.cms-btn { border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: .84rem; cursor: pointer; color: #fff; }
.cms-btn--toggle { background: var(--grad); }
.cms-btn--save { background: #22c55e; }
.cms-btn--cancel { background: rgba(255,255,255,.16); }
.cms-btn--ghost { background: rgba(255,255,255,.10); }
.cms-editing [data-cms] {
  outline: 2px dashed rgba(139,92,246,.5); outline-offset: 3px; border-radius: 4px;
  cursor: text; transition: outline-color .15s;
}
.cms-editing [data-cms]:hover, .cms-editing [data-cms]:focus {
  outline-color: var(--grad-a); outline-style: solid; background: rgba(139,92,246,.05);
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: #fff; margin-top: 40px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 52px 24px; display: flex;
  justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer__brand { max-width: 460px; }
.footer__logo { font-weight: 900; letter-spacing: .05em; display:flex; align-items:center; gap:12px; margin-bottom: 12px; font-size: 1.05rem; }
.footer__logo-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.footer__logo-img { width: 48px; height: 48px; object-fit: contain; }
.footer__brand p { font-size: .92rem; margin: 0; }
.footer__side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.footer__mentions { font-size: .9rem; color: var(--ink-soft); font-weight: 700; }
.footer__mentions:hover { color: var(--ink); }
.footer__admin-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  font-weight: 800; font-size: .85rem; color: #fff; background: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.footer__admin-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.footer__copy { font-size: .82rem; color: var(--ink-soft); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .grid-3, .grid-2, .article-grid, .stats { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .brand__name { font-size: .95rem; }
  .nav-links {
    position: absolute; top: 92px; left: 0; right: 0; flex-direction: column; align-items: flex-start;
    gap: 4px; background: #fff; border-bottom: 1px solid var(--line); padding: 16px 24px; display: none;
  }
  body.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; }
  .form__row { flex-direction: column; }
  .cms-bar { flex-wrap: wrap; justify-content: center; width: calc(100% - 32px); border-radius: 18px; }
}

/* ============================================================
   V3 — composants additionnels
   ============================================================ */

/* ---- Bouton "Admin" navbar + panneau latéral (drawer) ---- */
.nav-admin {
  border: 0; background: var(--ink); color: #fff; border-radius: 999px;
  font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: transform .15s, box-shadow .15s; box-shadow: var(--shadow-sm);
}
.nav-admin:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Bouton "Faire un don" et "ADMIN" : même hauteur, alignés */
.nav-links .btn--cta, .nav-admin {
  height: 46px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 24px; line-height: 1;
}
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(20,20,26,.42); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity .25s;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw; z-index: 95;
  background: #fff; box-shadow: var(--shadow-lg); transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
}
body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 16px; }
.drawer__title { font-weight: 900; font-size: 1.1rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.drawer__close { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); }
.drawer__user { display: flex; align-items: center; gap: 12px; padding: 0 24px 20px; border-bottom: 1px solid var(--line); }
.drawer__user img, .drawer__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.drawer__avatar { display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; background: var(--grad); }
.drawer__user strong { display: block; font-size: .95rem; }
.drawer__nav { display: flex; flex-direction: column; padding: 16px 14px; gap: 4px; flex: 1; }
.drawer__nav a { padding: 12px 14px; border-radius: 12px; font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); transition: background .15s, color .15s; }
.drawer__nav a:hover { background: var(--bg-soft); color: var(--ink); }
.drawer__nav a.active { background: var(--grad-soft); color: var(--ink); }
.drawer__foot { padding: 18px 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer__link { font-weight: 700; font-size: .88rem; color: var(--ink-soft); }
.btn--sm { padding: 8px 16px; font-size: .82rem; }

.tag--admin { background:#e8effb; color:#1d4ed8; }
.tag--super { background:#f3e8ff; color:#7c3aed; }

/* ---- Page Équipe : cartes membres & partenaires ---- */
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.people-grid--partners { grid-template-columns: repeat(3, 1fr); }
.person {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px;
  text-align: center; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.person__photo {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.person__photo--ph { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 900; color:#fff; background: var(--grad); }
.person__name { font-weight: 900; font-size: 1.05rem; margin-bottom: 3px; }
.person__title { color: var(--ink-soft); font-size: .88rem; font-weight: 700; }
.person__more { margin-top: 12px; font-size: .8rem; font-weight: 800; letter-spacing: .03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- Modale bio ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,20,26,.5); z-index: 120;
  display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius-lg); max-width: 520px; width: 100%;
  padding: 38px; box-shadow: var(--shadow-lg); position: relative; text-align: center;
}
.modal__close { position: absolute; top: 16px; right: 18px; background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: var(--ink-soft); }
.modal__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.modal__photo--ph { display:flex; align-items:center; justify-content:center; font-size:2.6rem; font-weight:900; color:#fff; background: var(--grad); }
.modal__name { font-size: 1.4rem; margin-bottom: 2px; }
.modal__title { color: var(--ink-soft); font-weight: 700; margin-bottom: 18px; }
.modal__bio { color: #33343a; text-align: left; }
.modal__link { display: inline-block; margin-top: 14px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- Article : vidéo, like, partage, commentaires ---- */
.article-video { position: relative; padding-top: 56.25%; margin: 8px 0 34px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.article-video iframe, .article-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background:#000; object-fit: contain; }

.engage { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 34px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.like-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: .92rem; cursor: pointer; transition: .15s;
}
.like-btn:hover { border-color: var(--c-red); }
.like-btn.liked { background: #fff0f3; border-color: var(--c-red); color: var(--c-red); }
.like-btn .heart { font-size: 1.05rem; }
.share-label { font-weight: 800; font-size: .88rem; color: var(--ink-soft); margin-left: auto; }
.share-btns { display: flex; gap: 8px; }
.share-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-weight: 900; font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.share-btn:hover { transform: translateY(-2px); }
.share-facebook { background: #1877f2; }
.share-x { background: #000; }
.share-linkedin { background: #0a66c2; }
.share-whatsapp { background: #25d366; }
.share-copy { background: var(--ink-soft); }

/* Commentaires */
.comments { max-width: 780px; margin: 0 auto; }
.comments h2 { font-size: 1.5rem; }
.comment-auth { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap; }
.comment-auth__me { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; }
.comment-auth__me img { width: 34px; height: 34px; border-radius: 50%; }
.comment-form textarea { width: 100%; min-height: 90px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; resize: vertical; }
.comment-form textarea:focus { outline: none; border-color: var(--grad-a); }
.comment-list { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.comment { display: flex; gap: 14px; }
.comment__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--grad); }
.comment__avatar--ph { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; }
.comment__body { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; flex: 1; box-shadow: var(--shadow-sm); }
.comment__meta { font-size: .82rem; color: var(--ink-soft); margin-bottom: 4px; }
.comment__meta strong { color: var(--ink); font-size: .95rem; }
.comment__body p { margin: 0; color: #33343a; }
.comments-empty { color: var(--ink-soft); }
.g-signin { min-height: 40px; }

/* ---- Dashboard analytics ---- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 34px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.metric__num { font-size: 2rem; font-weight: 900; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metric__label { color: var(--ink-soft); font-size: .84rem; margin-top: 6px; }
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.dash-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.dash-panel h3 { font-size: 1.05rem; margin-bottom: 18px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bar-row__label { width: 130px; font-size: .85rem; color: var(--ink-soft); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__track { flex: 1; height: 12px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.bar-row__fill { height: 100%; background: var(--grad); border-radius: 999px; }
.bar-row__val { width: 42px; text-align: right; font-weight: 800; font-size: .85rem; }
.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-list li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.dash-list li:last-child { border-bottom: 0; }
.dash-empty { color: var(--ink-soft); font-size: .9rem; }

@media (max-width: 900px) {
  .people-grid, .people-grid--partners { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .engage { flex-direction: column; align-items: stretch; }
  .share-label { margin-left: 0; }
}

/* ---- Vue admin : navbar compacte (tout sur une ligne) ---- */
.admin-view .navbar__inner { height: 70px; gap: 14px; }
.admin-view .brand__logo { width: 42px; height: 42px; }
.admin-view .brand__name { font-size: 1rem; letter-spacing: .04em; }
.admin-view .nav-links { gap: 18px; }
.admin-view .nav-links a:not(.btn) { font-size: .74rem; letter-spacing: .05em; }
.admin-view .nav-links .btn--cta, .admin-view .nav-admin { height: 42px; padding: 0 18px; font-size: .8rem; }
@media (max-width: 1120px) {
  .admin-view .brand__name { display: none; }  /* garde le logo, libère la place */
}

/* ---- Icônes (like / partage) ---- */
.ic { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.like-btn { line-height: 1; }
.like-btn .ic-heart { fill: none; stroke: currentColor; stroke-width: 1.7; transition: fill .15s; }
.like-btn.liked .ic-heart { fill: currentColor; stroke: currentColor; }
.share-btn svg { width: 18px; height: 18px; fill: #fff; }
.share-copy svg { fill: none; }

/* ============================================================
   V4 — contact, photothèque, carrousel, cartes cliquables
   ============================================================ */

/* ---- Contact ---- */
.contact-item { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0; }
.contact-ic { width: 22px; height: 22px; flex-shrink: 0; fill: var(--grad-a); margin-top: 2px; }
.reveal-phone { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.social-row { display: flex; gap: 12px; margin-top: 10px; }
.social-btn { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .15s, box-shadow .15s; }
.social-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.social-btn svg { width: 24px; height: 24px; fill: #fff; }
.social-linkedin { background: #0a66c2; }
.social-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 65%, #285AEB 90%); }

/* ---- Cartes actualités cliquables + like ---- */
.article-card--click { cursor: pointer; }
.article-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.article-card__foot .article-card__link { margin: 0; }
.like-btn--sm { padding: 7px 13px; font-size: .85rem; gap: 7px; }
.like-btn--sm .ic-heart { width: 16px; height: 16px; }
.like-btn--sm .like-n { font-weight: 800; }

/* ---- Photothèque : modale sélecteur + grilles ---- */
.media-modal-overlay { position: fixed; inset: 0; background: rgba(20,20,26,.5); z-index: 130;
  display: none; align-items: center; justify-content: center; padding: 24px; }
.media-modal-overlay.open { display: flex; }
.media-modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 720px;
  max-height: 84vh; overflow: auto; padding: 26px; box-shadow: var(--shadow-lg); }
.media-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.media-drop { display: block; border: 2px dashed var(--line); border-radius: var(--radius); padding: 22px;
  text-align: center; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s; }
.media-drop:hover, .media-drop.drag { border-color: var(--grad-a); background: var(--grad-soft); }
.linklike { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.media-grid--page { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.media-cell { position: relative; border: 2px solid transparent; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: var(--bg-soft); padding: 0; aspect-ratio: 1; }
.media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-cell:hover { border-color: var(--grad-a); }
.media-cell--on { border-color: var(--grad-a); }
.media-cell--manage { cursor: default; }
.media-badge { position: absolute; top: 6px; left: 6px; background: rgba(29,78,216,.92); color: #fff;
  font-size: .66rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; }
.media-badge--ok { background: #22c55e; left: auto; right: 6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0; }
.media-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(207,36,106,.95); color: #fff; font-weight: 900; cursor: pointer; }
.media-lock { position: absolute; bottom: 6px; right: 6px; font-size: .8rem; opacity: .6; }
.img-editable { outline: 2px dashed var(--grad-a); outline-offset: 3px; cursor: pointer; position: relative; }
.img-editable:hover { outline-style: solid; filter: brightness(.94); }

/* ---- Messages ---- */
.msg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.msg--unread { border-left: 5px solid var(--grad-a); }
.msg a { color: var(--grad-a); font-weight: 700; }

/* ---- Réordonnancement équipe ---- */
.reorder-hint { max-width: var(--maxw); margin: 0 auto; padding: 10px 24px; text-align: center;
  color: var(--ink-soft); font-size: .88rem; font-weight: 700; }
.person[draggable="true"] { cursor: grab; }
.person.drag-ghost { opacity: .4; }

/* ---- Carrousel ---- */
.carousel { position: relative; max-width: 1080px; margin: 0 auto; }
.carousel__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 14px; scrollbar-width: thin; justify-content: safe center; }
.carousel__slide { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; margin: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; transition: transform .18s, box-shadow .18s; }
.carousel__slide:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.carousel__slide { position: relative; }
.carousel__slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.carousel__slide figcaption { padding: 12px 16px; font-size: .9rem; color: var(--ink-soft); }
.carousel__nav { position: absolute; top: 45%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px;
  border-radius: 50%; border: 0; background: #fff; box-shadow: var(--shadow); font-size: 1.4rem; cursor: pointer; color: var(--ink); }
.carousel__prev { left: -8px; } .carousel__next { right: -8px; }
.modal--photo img { width: 100%; border-radius: var(--radius); margin-bottom: 14px; }
.modal--wide { max-width: 720px; text-align: left; }

/* ---- Constructeur de carrousel ---- */
.cb-selected { display: flex; flex-direction: column; gap: 12px; max-height: 380px; overflow: auto; }
.cb-item { display: flex; align-items: center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.cb-item img { width: 70px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.cb-item input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; }
.cb-move { display: flex; gap: 4px; }
.cb-move button { width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 800; }
.cb-move button.danger { color: var(--accent-dark); }
.cb-move button:disabled { opacity: .4; cursor: default; }

@media (max-width: 900px) {
  .carousel__slide { flex-basis: 78%; }
  .carousel__prev { left: 0; } .carousel__next { right: 0; }
}

/* Numéro de contact presse : masqué jusqu'au clic, visible en mode édition */
.press-reveal { display: none; font-weight: 700; }
.press-reveal.shown { display: inline; }
body.cms-editing .press-reveal { display: inline; outline: 2px dashed var(--grad-a); outline-offset: 2px; }
body.cms-editing .reveal-phone { display: none; }

/* Carrousel : indice cliquable + étapes du gestionnaire */
.carousel__hint { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; }
.cb-steps { display: flex; gap: 8px; margin-bottom: 18px; }
.cb-dot { flex: 1; text-align: center; font-size: .78rem; font-weight: 800; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 6px; }
.cb-dot--active { color: #fff; background: var(--grad); border-color: transparent; }
.cb-item--bio { align-items: flex-start; }
.cb-item--bio textarea { flex: 1; min-height: 60px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; resize: vertical; }
.cb-name { flex: 1; font-weight: 700; color: var(--ink-soft); }

/* ---- CRUD articles depuis la page Actualités ---- */
.article-card { position: relative; }
.card-admin { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.card-admin form { margin: 0; }
.card-admin__btn { width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); font-size: .95rem; color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.card-admin__btn:hover { transform: translateY(-1px); }
.card-admin__btn svg { width: 16px; height: 16px; fill: currentColor; }
.card-admin__btn--del:hover { background: #fdeeec; color: #cf246a; }
.article-card--draft { outline: 2px dashed var(--line); }
.draft-flag { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--ink); color: #fff;
  font-size: .68rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }

/* Modale formulaire (article) — thème hérité de la page (vert sur Actualités) */
.modal--form { max-width: 640px; text-align: left; max-height: 88vh; overflow: auto; }
.modal--form h3 { font-size: 1.5rem; margin-bottom: 6px; }
.modal--form .cover-preview img { max-width: 220px; border-radius: 10px; border: 1px solid var(--line); }
.article-modal-overlay .modal--form .form label { margin-top: 14px; }

/* Carrousel : overlay titre au survol */
.carousel__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; padding: 16px; opacity: 0; transition: opacity .2s;
  background: linear-gradient(to top, rgba(10,10,15,.72) 0%, rgba(10,10,15,.15) 55%, rgba(10,10,15,0) 100%);
}
.carousel__slide:hover .carousel__overlay { opacity: 1; }
.carousel__ttl { color: #fff; font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
.carousel__cta { color: rgba(255,255,255,.85); font-size: .78rem; font-weight: 700; }
.modal--photo .modal__name { margin: 4px 0 6px; }
.cb-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cb-fields input, .cb-fields textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; }
.cb-fields textarea { min-height: 52px; resize: vertical; }

/* ============================================================
   Page Nos Actions — refonte
   ============================================================ */
/* Métriques 2x3 */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* Notre histoire — bloc blanc moderne */
.history-card { background: #fff; border-radius: var(--radius-lg); padding: 48px 52px; box-shadow: var(--shadow);
  position: relative; overflow: hidden; }
.history-card::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: var(--grad); }
.history-card h2 { margin: .3em 0 .6em; }
.history-card p { font-size: 1.08rem; color: #33343a; }
.history-card p + p { margin-top: 1rem; }

/* Nos valeurs — bande dégradée + cartes blanches */
.values-band { background: var(--grad); padding: 84px 0; }
.section__head--light { margin-bottom: 44px; }
.eyebrow--light { background: none !important; -webkit-text-fill-color: rgba(255,255,255,.9); color: #fff; }
.value-card { background: #fff; border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
.value-card__icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center;
  justify-content: center; font-size: 1.7rem; background: var(--grad-soft); margin-bottom: 16px; }
.value-card h3 { font-size: 1.3rem; margin-bottom: .5em; }
.value-card p { font-size: .96rem; color: var(--ink-soft); margin: 0; line-height: 1.7; }

/* Comment nous agissons — accordéon */
.accordion { display: flex; flex-direction: column; gap: 14px; }
.acc-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .18s; }
.acc-item.open { box-shadow: var(--shadow); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  font-size: 1.08rem; color: var(--ink); text-align: left; }
.acc-head:hover { color: var(--grad-a); }
.acc-chevron { flex-shrink: 0; font-size: 1.4rem; line-height: 1; transition: transform .25s; color: var(--grad-a); }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-item.open .acc-body { max-height: 600px; }
.acc-body p { margin: 0; padding: 0 24px 22px; color: #33343a; font-size: 1rem; line-height: 1.7; }

/* Modale photo carrousel — redesign */
.photo-modal-overlay { position: fixed; inset: 0; background: rgba(15,15,22,.62); backdrop-filter: blur(3px);
  z-index: 140; display: none; align-items: center; justify-content: center; padding: 24px; }
.photo-modal-overlay.open { display: flex; }
.photo-modal { display: flex; width: 100%; max-width: 900px; max-height: 86vh; background: #fff;
  border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative;
  animation: photoIn .25s cubic-bezier(.2,.8,.2,1); }
@keyframes photoIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.photo-modal__media { flex: 1 1 56%; background: #000; }
.photo-modal__media img { width: 100%; height: 100%; max-height: 86vh; object-fit: cover; display: block; }
.photo-modal__panel { flex: 1 1 44%; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.photo-modal__accent { width: 48px; height: 5px; border-radius: 3px; background: var(--grad); margin-bottom: 20px; }
.photo-modal__panel h3 { font-size: 1.7rem; line-height: 1.2; margin-bottom: .5em; }
.photo-modal__panel p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.photo-modal__panel h3:empty, .photo-modal__panel p:empty { display: none; }
.photo-modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); font-size: 1.1rem; color: var(--ink); z-index: 2; }
.photo-modal__close:hover { background: #fff; }

@media (max-width: 820px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-modal { flex-direction: column; max-height: 90vh; overflow: auto; }
  .photo-modal__media img { max-height: 46vh; }
  .photo-modal__panel { padding: 28px 26px; }
}
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }

/* Honeypot anti-robot : invisible pour les humains */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ============================================================
   Modale article — refonte design
   ============================================================ */
.art-modal { width: 100%; max-width: 780px; max-height: 90vh; background: #fff; border-radius: 22px;
  box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column;
  animation: photoIn .22s cubic-bezier(.2,.8,.2,1); position: relative; }
.art-modal__head { position: relative; padding: 26px 30px 18px; border-bottom: 1px solid var(--line); }
.art-modal__accent { position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: var(--grad); }
.art-modal__head h3 { margin: 0; font-size: 1.4rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.art-modal__head .modal__close { top: 20px; right: 22px; }
.art-modal__form { padding: 24px 30px; overflow: auto; }
.art-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; }
.art-col { display: flex; flex-direction: column; }
.art-col label { font-weight: 700; font-size: .88rem; margin: 14px 0 6px; }
.art-col label:first-child { margin-top: 0; }
.art-col input[type=text], .art-col textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; font: inherit; transition: border-color .15s, box-shadow .15s; }
.art-col input[type=text]:focus, .art-col textarea:focus { outline: none; border-color: var(--grad-a);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.art-col textarea { min-height: 210px; resize: vertical; flex: 1; }
.art-label { font-weight: 700; font-size: .88rem; margin: 4px 0 8px; display: block; }
.art-col--media .art-label:not(:first-child) { margin-top: 20px; }

.art-drop { display: block; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer;
  overflow: hidden; transition: border-color .15s, background .15s; background: var(--bg-soft); }
.art-drop:hover, .art-drop.drag { border-color: var(--grad-a); background: rgba(22,163,74,.05); }
.art-drop__preview { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px; text-align: center; }
.art-drop__preview img, .art-drop__preview video { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px; }
.art-drop__hint { color: var(--ink-soft); font-size: .86rem; font-weight: 600; }
.art-drop__badge { font-size: .8rem; font-weight: 800; color: var(--grad-a); }
.art-remove { display: flex !important; align-items: center; gap: 8px; font-weight: 600 !important;
  font-size: .82rem !important; margin: 8px 0 0 !important; color: var(--ink-soft); }
.art-remove input { width: auto; }
.art-switch { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 700; font-size: .9rem; }
.art-switch input { width: auto; }
.art-modal__foot { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 30px;
  border-top: 1px solid var(--line); background: var(--bg-soft); }

/* Badge vidéo sur la carte article */
.article-card__media { position: relative; }
.media-tag { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.62); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }

@media (max-width: 720px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-col textarea { min-height: 150px; }
}