/* Côté Tribune — feuille de style. Moderne et accueillante, conçue d'abord pour le téléphone. */

/* Police auto-hébergée (SIL Open Font License, voir fonts/OFL.txt) : aucun appel à Google,
   donc aucune adresse IP de parent envoyée à un tiers. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/static/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* Couleurs relevées sur creps-cvl.fr : bleu logo, bleu foncé, bleu nuit et orange CREPS. */
:root{
  --bleu:#0e77bd; --bleu-nuit:#094c79; --nuit:#031826; --bleu-clair:#e7f2fa; --bleu-vif:#1a8ad6;
  --orange:#f15a29; --orange-fonce:#c64a22;
  --encre:#16202c; --encre-2:#3a4956; --gris:#586573;
  --fond:#ffffff; --fond-doux:#f6f9fc; --trait:#e3eaf1; --trait-fort:#c3d0dc;
  --vert:#1f7a51; --vert-clair:#e7f4ed; --rouge:#a3271e; --rouge-clair:#fbeeec;
  --ambre:#8a5a12; --ambre-clair:#fdf3e2;
  /* dégradé horizontal : en-tête et bandeau d'accueil se prolongent sans raccord visible */
  --bandeau:linear-gradient(100deg,#0f77be 0%,#0d6fb2 55%,#0a5b93 100%);
  --r:14px; --r-s:10px;
  --ombre:0 1px 2px rgba(3,24,38,.05), 0 8px 24px rgba(3,24,38,.09);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--encre);
  font:16px/1.6 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
main{flex:1}
img{max-width:100%;height:auto}
a{color:var(--bleu-nuit)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}
kbd{font:inherit;font-size:.85em;background:var(--fond-doux);border:1px solid var(--trait);border-radius:5px;padding:1px 6px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:18px}
@media (min-width:768px){.wrap{padding-inline:28px}}
.stack{padding-block:4px 56px}
.narrow{max-width:440px;padding-block:40px 56px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px}
.skip:focus{left:18px;top:10px;z-index:10;background:#fff;border-radius:var(--r-s);padding:10px 14px;box-shadow:var(--ombre)}
.muted{color:var(--gris)}
.small{font-size:.86rem}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* En-tête, pied de page */
.topbar{background:var(--bleu-nuit);color:#fff;border-bottom:3px solid var(--orange)}
.topbar-inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand img{height:42px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.25;border-left:1px solid rgba(255,255,255,.35);padding-left:14px}
.brand-text strong{font-size:1.1rem;letter-spacing:-.02em}
.brand-text small{color:rgba(255,255,255,.82);font-size:.79rem}
.adminnav{display:flex;flex-wrap:wrap;gap:4px}
.adminnav a{padding:8px 14px;border-radius:999px;color:#fff;text-decoration:none;font-size:.92rem;font-weight:600}
.adminnav a:hover{background:rgba(255,255,255,.18)}
.adminnav a[aria-current]{background:#fff;color:var(--bleu-nuit)}
.topbar .btn-second{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.topbar .btn-second:hover{background:#fff;color:var(--bleu-nuit);border-color:#fff}
.footer{margin-top:56px;background:var(--nuit);color:#c9dbeb;border-top:4px solid var(--orange)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-block:26px;font-size:.92rem}
.footer img{height:34px;width:auto;opacity:.95}
.footer p{margin:0;flex:1 1 240px}
.footer a{color:#fff;font-weight:600}

/* Bandeau d'accueil : semis d'hexagones sur les deux côtés, repris de la charte du pôle. */
.intro{position:relative;overflow:hidden;color:#fff;padding-block:48px 52px;background:var(--bandeau)}
.intro::before,.intro::after{content:"";position:absolute;top:0;bottom:0;width:min(52%,560px);
  pointer-events:none;background:url("/static/motif-hexagones.svg?5") no-repeat left top;
  background-size:auto 100%}
.intro::before{left:0}
.intro::after{right:0;transform:scaleX(-1);opacity:.55}
@media (max-width:760px){.intro::before{opacity:.6}.intro::after{opacity:.35}}
.intro > *{position:relative;z-index:1}
.intro h1{margin:0 0 10px;font-size:clamp(1.85rem,5.5vw,2.9rem);font-weight:800;letter-spacing:-.03em;max-width:16ch}
.intro p{margin:0 0 24px;max-width:56ch;font-size:1.06rem;color:#fff}
.search{display:flex;gap:6px;max-width:560px;background:#fff;border:0;border-radius:999px;
  padding:6px;box-shadow:0 14px 34px rgba(3,24,38,.30)}
.search input{flex:1;min-width:0;width:auto;min-height:42px;border:0;background:transparent;padding:0 16px;font:inherit;color:var(--encre)}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(20,118,189,.18)}
.search button{flex:none;min-height:42px;padding:0 20px;border:0;border-radius:999px;background:var(--orange-fonce);
  color:#fff;font:inherit;font-weight:600;cursor:pointer}
.search button:hover{background:#a63c19}
.recherche-page{margin:18px 0 6px}

/* Sections */
.section{margin-top:40px}
.section > h2{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1.25rem}
.section > h2::before{content:"";width:5px;height:24px;border-radius:3px;background:var(--orange)}
.page-head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between;margin:26px 0 2px}
.page-title{margin:0;font-size:clamp(1.5rem,4vw,2.05rem)}
.fil{margin:0;padding-top:18px;font-size:.88rem;color:var(--gris)}
.fil a{color:var(--bleu-nuit);text-decoration:none}
.fil a:hover{text-decoration:underline}
.sous-nav{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.sous-nav::-webkit-scrollbar{display:none}
.sous-nav a{flex:none;padding:8px 16px;border:1px solid var(--trait);border-radius:999px;background:#fff;
  color:var(--encre-2);text-decoration:none;font-size:.92rem;font-weight:600;white-space:nowrap}
.sous-nav a:hover{border-color:var(--bleu);color:var(--bleu-nuit)}
.sous-nav a[aria-current]{background:var(--bleu);border-color:var(--bleu);color:#fff}

/* Annonce */
.annonce{display:flex;gap:14px;margin-top:28px;padding:16px 18px;border:1px solid #f0dcb8;border-radius:var(--r);
  background:var(--ambre-clair)}
.annonce svg{flex:none;color:var(--ambre);margin-top:2px}
.annonce-label{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ambre)}
.annonce p{margin:2px 0 0;white-space:pre-line;color:#4a3a1c}

/* Rubriques */
.rubriques{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(218px,1fr))}
.rubriques li:first-child{grid-column:span 2}
@media (max-width:620px){.rubriques li:first-child{grid-column:span 1}}
.rubrique{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;padding:20px;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c,var(--bleu)) 5%,#fff));
  border:1px solid color-mix(in srgb,var(--c,var(--bleu)) 24%,#fff);
  border-radius:var(--r);text-decoration:none;color:var(--encre);transition:transform .18s,box-shadow .18s,border-color .18s}
.rubrique:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:var(--c,var(--bleu))}
.mono{flex:none;width:50px;height:50px;display:grid;place-items:center;border-radius:13px;
  background:var(--c,var(--bleu));color:#fff;font-size:1.2rem;font-weight:700}
.rubrique-corps{flex:1;min-width:0}
.rubrique-nom{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.015em}
.rubrique-nb{display:block;color:var(--gris);font-size:.86rem}
.rubrique-fleche{align-self:flex-end;margin-top:-30px;color:var(--c,var(--bleu));font-size:1.15rem;transition:transform .18s}
.rubrique:hover .rubrique-fleche{transform:translateX(3px)}
.rubriques li:nth-child(5n+1) .rubrique{--c:#0e77bd}
.rubriques li:nth-child(5n+2) .rubrique{--c:#c64a22}
.rubriques li:nth-child(5n+3) .rubrique{--c:#094c79}
.rubriques li:nth-child(5n+4) .rubrique{--c:#5f7f34}
.rubriques li:nth-child(5n+5) .rubrique{--c:#8a5a12}

/* Documents */
.docs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px;background:#fff;
  border:1px solid var(--trait);border-radius:var(--r);transition:box-shadow .18s,border-color .18s}
.doc:hover{box-shadow:var(--ombre);border-color:var(--trait-fort)}
.doc-type{flex:none;width:52px;height:52px;display:grid;place-items:center;overflow:hidden;border-radius:12px;
  background:var(--bleu-nuit);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.04em}
.doc-type img,.doc-photo img{display:block;width:100%;height:100%;object-fit:cover}
.type-video{background:#2c4a63}
.type-photo{background:#0d6a6f}
.doc-photo{width:84px;height:84px;padding:0;line-height:0;border:1px solid var(--trait)}
.doc-photo:hover{border-color:var(--bleu)}
.doc-corps{flex:1 1 230px;min-width:0}
.doc h3{margin:0;font-size:1.04rem;font-weight:700;overflow-wrap:anywhere}
.doc-desc{margin:3px 0 0;color:var(--encre-2);font-size:.94rem}
.doc-meta{display:block;margin-top:5px;color:var(--gris);font-size:.84rem}
.lien-agrandir{display:inline-block;margin-top:5px;font-size:.86rem;font-weight:600}
.doc .btn{flex:none;width:100%}
@media (min-width:600px){.doc .btn{width:auto}}
.neuf{margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--vert-clair);color:var(--vert);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;vertical-align:1px}
.vide{margin:18px 0 0;padding:26px;border:1px dashed var(--trait-fort);border-radius:var(--r);
  background:var(--fond-doux);color:var(--gris);text-align:center}

/* Boutons, formulaires */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;
  border:1px solid var(--bleu);border-radius:var(--r-s);background:var(--bleu);color:#fff;font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--bleu-nuit);border-color:var(--bleu-nuit)}
.btn-second{background:#fff;color:var(--bleu-nuit);border-color:var(--trait-fort)}
.btn-second:hover{background:var(--bleu-clair);color:var(--bleu-nuit);border-color:var(--bleu)}
.btn-danger{background:#fff;color:var(--rouge);border-color:#e5c3bf}
.btn-danger:hover{background:var(--rouge-clair);color:var(--rouge);border-color:var(--rouge)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.bloc{margin-top:22px;padding:22px;background:#fff;border:1px solid var(--trait);border-radius:var(--r);box-shadow:var(--ombre)}
@media (max-width:480px){.bloc{padding:17px}}
.bloc > h2{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1.1rem}
.bloc > h2::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--bleu)}
.bloc-head{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;margin-bottom:18px}
.bloc-head h2{margin:0}
.form{display:grid;gap:16px}
label{display:grid;gap:6px;font-size:.9rem;font-weight:600}
input,select,textarea{width:100%;min-height:44px;padding:10px 13px;font:inherit;font-weight:400;color:var(--encre);
  background:#fff;border:1px solid var(--trait-fort);border-radius:var(--r-s)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(20,118,189,.18)}
.alert{margin:0;padding:12px 14px;border:1px solid #e5c3bf;border-radius:var(--r-s);background:var(--rouge-clair);color:var(--rouge)}
.inline-filter{display:flex;gap:8px}

/* Dépôt de fichiers */
.dropzone{border:2px dashed var(--trait-fort);border-radius:var(--r);background:var(--fond-doux);padding:26px 16px;
  text-align:center;color:var(--encre-2);transition:background .15s,border-color .15s}
.dropzone.is-over{border-color:var(--bleu);background:var(--bleu-clair)}
.dropzone p{margin:8px 0}
.file-btn{display:inline-flex}
.file-btn:focus-within{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:none){.drop-hint{display:none}}
.upload-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.upload-row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;font-size:.9rem;
  padding:11px 14px;border:1px solid var(--trait);border-radius:var(--r-s);background:#fff}
.upload-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-state{font-weight:600;color:var(--gris)}
.upload-row progress{grid-column:1 / -1;width:100%;height:6px;accent-color:var(--bleu)}
.upload-row.is-done{border-color:#bfe0cd}
.upload-row.is-done .upload-state{color:var(--vert)}
.upload-row.is-error{border-color:#e5c3bf;background:var(--rouge-clair)}
.upload-row.is-error .upload-state{color:var(--rouge)}

/* Administration */
.admin-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.admin-item{padding:14px;border:1px solid var(--trait);border-radius:var(--r)}
.admin-item:hover{border-color:var(--trait-fort)}
.admin-item-main{display:flex;gap:14px;align-items:center}
.admin-item .doc-type,.admin-item .doc-photo{width:48px;height:48px;font-size:.7rem}
.admin-item details{margin-top:8px}
summary{cursor:pointer;color:var(--bleu-nuit);font-size:.9rem;font-weight:600;padding:4px 0}
.admin-item details[open] .form{margin-top:12px;padding:16px;background:var(--fond-doux);border-radius:var(--r-s)}
.etat{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;font-size:.79rem;font-weight:600}
.etat-attente{background:var(--ambre-clair);color:var(--ambre)}
.etat-erreur{background:var(--rouge-clair);color:var(--rouge)}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cat-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:14px;border:1px solid var(--trait);border-radius:var(--r)}
.cat-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;flex:1}
.cat-form .grow{flex:1 1 200px}
.input-icon{width:66px;text-align:center}
.input-num{width:84px}

/* Statistiques */
.filters{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.filters label{flex:1 1 220px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:20px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:18px 20px;background:#fff;border:1px solid var(--trait);
  border-radius:var(--r);box-shadow:var(--ombre)}
.kpi-value{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--bleu-nuit);
  font-variant-numeric:tabular-nums}
.kpi-text{font-size:1.05rem;font-weight:700}
.kpi-label{color:var(--gris);font-size:.85rem}
.chart{position:relative;padding-top:20px}
.chart-max{position:absolute;top:0;left:0;font-size:.76rem;color:var(--gris);font-variant-numeric:tabular-nums}
.chart-bars{display:flex;align-items:flex-end;gap:2px;height:200px;border-top:1px dashed var(--trait);
  border-bottom:1px solid var(--trait-fort)}
.bar-col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;position:relative}
.bar{width:100%;background:var(--bleu-vif);border-radius:4px 4px 0 0;transition:background .15s}
.bar-col:hover .bar{background:var(--bleu-nuit)}
.bar-col:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--encre);color:#fff;font-size:.79rem;white-space:nowrap;padding:5px 9px;border-radius:6px;
  pointer-events:none;z-index:2}
.bar-col:nth-child(-n+4):hover::after{left:0;transform:none}
.bar-col:nth-last-child(-n+4):hover::after{left:auto;right:0;transform:none}
.chart-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:.76rem;color:var(--gris)}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--trait);white-space:nowrap}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
tbody tr:hover{background:var(--fond-doux)}
td:first-child{white-space:normal;min-width:190px;font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums}