/* =========================================================
   DepanneTV — styles communs à toutes les pages
   (variables, reset, header, footer, boutons, composants partagés)
   Les styles propres à chaque page sont dans leur fichier dédié.
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --blue:#1f5eff;
  --blue-hover:#174ce0;
  --blue-light:#3f7dff;
  --blue-soft:#eef3ff;
  --blue-soft-2:#e3ebff;
  --navy:#0a1325;
  --navy-2:#0e1729;
  --footer:#0f1628;
  --text:#0d1424;
  --text-2:#3b4458;
  --muted:#6b7385;
  --border:#e5e9f0;
  --bg:#f7f8fb;
  --white:#ffffff;
  --green:#16a34a;
  --radius:10px;
  --radius-sm:6px;
  --container:1180px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --shadow:0 1px 2px rgba(13,20,36,.04),0 4px 14px rgba(13,20,36,.04);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;text-align:inherit}
svg{display:block;flex-shrink:0}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:400;background:var(--blue);color:#fff;padding:10px 14px;border-radius:6px;font-size:.85rem;font-weight:600;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- Emplacements d'images ---------- */
.img-slot{position:relative;overflow:hidden;background:#152036}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.img-slot img[src=""],.img-slot img:not([src]){visibility:hidden}
.img-slot.dark{background:#152036}
.logo-slot{display:flex;align-items:center;justify-content:center}
.logo-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.logo-slot img[src=""],.logo-slot img:not([src]){display:none}
.logo-slot img:not([src=""]) + .logo-fallback{display:none}
.logo-fallback{font-weight:700;color:var(--text);white-space:nowrap}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border);transition:box-shadow .25s}
.header.scrolled{box-shadow:0 4px 18px rgba(13,20,36,.07)}
.header .container{display:flex;align-items:center;height:68px;gap:28px;max-width:1180px}
.logo{font-size:1.65rem;font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1;white-space:nowrap;display:inline-flex;align-items:center}
.logo span{color:var(--blue)}
.logo .logo-img{height:34px;width:auto;display:block}
.logo.light{color:var(--white)}
.logo.light span{color:var(--blue-light)}
.nav{display:flex;align-items:center;gap:28px;margin-left:30px}
.nav a{font-size:.83rem;font-weight:500;color:var(--text-2);transition:color .2s;position:relative}
.nav a:hover,.nav a.active{color:var(--blue)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:2px;background:var(--blue);border-radius:2px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.icon-btn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text);transition:background .2s,color .2s}
.icon-btn:hover{background:var(--bg);color:var(--blue)}
.support{display:flex;align-items:center;gap:8px;font-size:.83rem;font-weight:500;color:var(--text-2);transition:color .2s}
.support:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:var(--white);font-size:.83rem;font-weight:600;padding:11px 16px;border-radius:var(--radius-sm);transition:background .2s,transform .2s,color .2s,border-color .2s;white-space:nowrap;border:1.5px solid var(--blue)}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn:active{transform:translateY(1px)}
.btn-outline{background:var(--white);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--white)}
.btn-white{background:var(--white);color:var(--blue);border-color:var(--white)}
.btn-white:hover{background:var(--blue-soft);border-color:var(--blue-soft)}
.burger{display:none;width:42px;height:42px;border-radius:8px;align-items:center;justify-content:center;border:1px solid var(--border)}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .25s,background .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{transform:translateY(6px) rotate(45deg)}
.burger.open span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--blue);transition:width .1s linear}
.m-search{display:flex;gap:8px;padding:14px 0 6px}
.m-search input{flex:1;min-width:0;height:44px;border:1px solid var(--border);border-radius:6px;padding:0 14px;font-size:.92rem}
.m-search button{width:44px;height:44px;border-radius:6px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}

/* ---------- Footer ---------- */
.footer{background:var(--footer);color:rgba(255,255,255,.82);padding-top:36px}
.footer > .container{max-width:1180px}
.footer-top{display:grid;grid-template-columns:1.8fr repeat(var(--fcols,4),minmax(0,1fr));gap:28px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .logo{font-size:1.55rem;margin-bottom:18px;display:inline-flex}
.footer-brand p{font-size:.78rem;line-height:1.65;max-width:290px;margin-bottom:18px}
.socials{display:flex;align-items:center;gap:18px}
.socials a{color:var(--white);opacity:.9;transition:opacity .2s,color .2s}
.socials a:hover{opacity:1;color:var(--blue-light)}
.footer-col h2,.footer-col h4{font-size:.76rem;font-weight:700;color:var(--white);margin-bottom:12px}
.footer-col li{margin-bottom:6px}
.footer-col a{font-size:.76rem;color:rgba(255,255,255,.78);transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 20px;font-size:.72rem;color:rgba(255,255,255,.75)}
.footer-bottom strong{color:var(--white);font-weight:600}
.footer-bottom-right{display:flex;align-items:center;gap:18px}
.footer-bottom-right a:hover{color:var(--white)}
.to-top{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--white);transition:background .2s}
.to-top:hover{background:var(--blue)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:310;transform:translate(-50%,20px);background:var(--navy);color:var(--white);font-size:.8rem;font-weight:500;padding:10px 16px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Bandeau cookies (uniquement si une mesure d'audience est active) ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:320;max-width:560px;margin:0 auto;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 20px 50px rgba(13,20,36,.18);padding:16px 18px;display:none}
.consent.show{display:block}
.consent p{font-size:.8rem;line-height:1.55;color:var(--text-2);margin-bottom:12px}
.consent p a{color:var(--blue);font-weight:600}
.consent-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.consent-actions .btn{padding:9px 14px;font-size:.78rem}

/* ---------- Barre d'administration (visible uniquement connecté) ---------- */
.admin-bar{position:fixed;right:16px;bottom:16px;z-index:300;display:flex;gap:6px;background:var(--navy);border-radius:8px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.admin-bar a{color:#fff;font-size:.74rem;font-weight:600;padding:7px 10px;border-radius:5px}
.admin-bar a:hover{background:rgba(255,255,255,.12)}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:26px 0 6px}
.pagination a,.pagination span{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:600;color:var(--text-2);background:var(--white)}
.pagination a:hover{border-color:var(--blue);color:var(--blue)}
.pagination [aria-current]{background:var(--blue);border-color:var(--blue);color:var(--white)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{gap:20px;margin-left:12px}
  .header .container{gap:18px}
}
@media (max-width:1024px){
  .nav,.header-actions .support,.header-actions .btn{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 14px 30px rgba(13,20,36,.08);max-height:0;overflow:hidden;transition:max-height .35s ease}
  .mobile-menu.open{max-height:640px}
  .mobile-menu nav{display:flex;flex-direction:column;padding:8px 24px 20px}
  .mobile-menu nav a{padding:13px 0;border-bottom:1px solid var(--border);font-size:.92rem;font-weight:500;color:var(--text-2)}
  .mobile-menu nav a.active{color:var(--blue)}
  .mobile-menu .support{padding:16px 0 14px;font-size:.92rem;border:0}
  .mobile-menu .btn{width:100%;padding:13px 16px;font-size:.9rem;color:var(--white)}
  .footer-top{grid-template-columns:repeat(var(--fcols,4),minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:460px}
}
@media (max-width:760px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .container{padding:0 16px}
  .header .container{height:60px}
  .mobile-menu nav{padding:8px 16px 18px}
  .logo{font-size:1.45rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-bottom-right{width:100%;justify-content:space-between}
}
@media (max-width:380px){
  .footer-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
  .header,.footer,.toast,.consent,.admin-bar{display:none!important}
}

/* ---------- En-têtes avec image (héros sombres) ----------
   L'image garde ses proportions, calée à droite (côté sujet) et fondue dans le bleu nuit à gauche :
   sur grand écran, elle n'est plus agrandie au point de couper le sujet. Le point d'intérêt choisi
   dans la Médiathèque (bouton « Cadrage ») règle le recadrage restant (object-position). */
.hero .hero-bg img{left:auto;width:auto;min-width:min(64%,1150px);max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
@media (min-width:901px) and (max-width:1024px){
  .hero:has(> .hero-bg img) > .hero-overlay{background:linear-gradient(90deg,var(--navy) 0%,rgba(10,19,37,.92) 42%,rgba(10,19,37,.6) 58%,rgba(10,19,37,.2) 76%,rgba(10,19,37,.06) 100%)}
}
/* Tablette en hauteur et mobile : l'image passe sous le texte, en carte arrondie (comme Ressources et Support) */
@media (max-width:900px){
  .hero:has(> .hero-bg img){display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .hero:has(> .hero-bg img) > .container{order:1}
  .hero:has(> .hero-bg img) > .hero-bg{position:relative;inset:auto;order:2;aspect-ratio:5/2;margin:-14px 24px 32px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  .hero:has(> .hero-bg img) > .hero-overlay{display:none}
  .hero .hero-bg img{left:0;width:100%;min-width:0;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
  .hero:has(> .hero-bg img) > .hero-bg{aspect-ratio:2/1;margin:-10px 16px 28px}
}

/* reCAPTCHA (formulaires protégés : contact, assistant) */
.captcha{margin:2px 0 16px}
.captcha[hidden]{display:none}
.captcha-box:empty{display:none}
.captcha-msg{margin:8px 0 0;font-size:.82rem;font-weight:600;color:#a8071a}
.captcha-note{margin-top:6px;font-size:.72rem;color:var(--muted)}
.captcha-note a{color:inherit;text-decoration:underline}
.chat-main .captcha{margin:10px 4px 0}