/* L'astuce de la semaine · EOC Consulting
   Chargée APRÈS la feuille du site principal (/astuces/charte/eoc.css : en-tête, pied de page, .btn, .eyebrow,
   .container-eoc, typographies). Ici, uniquement les blocs propres à la rubrique, aux jetons de la charte EOC
   (src/styles/global.css du site principal). Tout est limité à .astuces et .sous-nav pour ne pas toucher
   l'en-tête ni le pied de page repris du site. Les valeurs de repli sont celles de global.css. */
:root{
  --a-canvas:var(--color-canvas,#f4f5f7); --a-canvas2:var(--color-canvas-2,#eceef2); --a-paper:#fff;
  --a-ink:var(--color-ink,#0c0e1c); --a-eoc:var(--color-eoc,#0000d0); --a-eoc700:var(--color-eoc-700,#0000a6);
  --a-muted:var(--color-muted,#5a5f70); --a-line:var(--color-line,#e2e4ec); --a-champ:#cad5e2;
  --a-ok:#15803d; --a-bad:#b91c1c;
  --a-display:var(--font-display,"Space Grotesk Variable","Space Grotesk",ui-sans-serif,system-ui,sans-serif);
  --a-sans:var(--font-sans,"Inter",ui-sans-serif,system-ui,sans-serif);
  --a-r:1rem; --a-btn:var(--radius-btn,3px);
  /* Catégories : teintes lisibles sur fond clair (contraste AA sur blanc) */
  --c-commerce:#0000d0; --c-marketing:#be185d; --c-partenaires:#047857; --c-communication:#b45309; --c-equipe:#6d28d9; --c-clients:#0e7490;
}

/* Barre secondaire de la rubrique, sous l'en-tête du site */
.sous-nav{background:var(--a-paper);border-bottom:1px solid var(--a-line)}
.sous-nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;flex-wrap:wrap;padding-block:.5rem}
.sous-nav-titre{font-family:var(--a-display);font-weight:500;letter-spacing:-.01em;color:var(--a-ink);font-size:1.02rem}
.sous-nav-liens{display:flex;align-items:center;gap:.25rem 1.5rem;flex-wrap:wrap}
.sous-nav-liens a:not(.btn){font-size:.9rem;color:var(--a-muted);transition:color .3s}
.sous-nav-liens a:not(.btn):hover,.sous-nav-liens a[aria-current]{color:var(--a-ink)}
.sous-nav-liens a[aria-current]{text-decoration:underline;text-decoration-color:var(--a-eoc);text-underline-offset:6px}
.sous-nav .btn{padding:.65rem 1rem;font-size:.82rem}
/* Mobile : titre + bouton sur la 1re ligne, liens sur la 2e */
@media (max-width:640px){.sous-nav-in{min-height:0;padding-block:.6rem;gap:.4rem 1.25rem;justify-content:flex-start}.sous-nav-in::after{content:"";order:1;flex-basis:100%}.sous-nav-titre{font-size:.95rem}.sous-nav-liens{display:contents}.sous-nav-liens a:not(.btn){order:2;font-size:.85rem}.sous-nav .btn{order:1;margin-left:auto;padding:.55rem .85rem}}

/* Structure */
.astuces .wrap{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--spacing-gutter,1.5rem)}
.astuces .narrow{max-width:52rem}
.astuces h1{font-weight:400;font-size:2.4rem;line-height:1.04;letter-spacing:-.025em}
.astuces h2{font-weight:400;font-size:2rem;line-height:1.08;letter-spacing:-.025em}
.astuces h3{font-size:1.35rem;line-height:1.15}
@media (min-width:768px){.astuces h1{font-size:4rem}.astuces h2{font-size:2.75rem}}
.astuces .muted{color:var(--a-muted)}
.astuces .stack>*+*{margin-top:1rem}
.hide{display:none!important}

/* Boutons : ceux du site (.btn + primaire / secondaire) */
.astuces .btn,.sous-nav .btn{background:var(--a-eoc);color:#fff;border:1px solid var(--a-eoc)}
.astuces .btn:hover,.sous-nav .btn:hover{background:var(--a-eoc700);border-color:var(--a-eoc700)}
.astuces .btn.ghost{background:transparent;color:var(--a-ink);border-color:var(--a-ink)}
.astuces .btn.ghost:hover{background:var(--a-ink);color:var(--a-canvas)}
.astuces .btn.sm{padding:.65rem 1rem;font-size:.82rem}
.astuces .btn:disabled{opacity:.6;cursor:wait}
.astuces a:not(.btn):not(.wk){color:var(--a-ink);text-decoration:underline;text-decoration-color:var(--a-eoc);text-underline-offset:3px}
.astuces a:not(.btn):not(.wk):hover{color:var(--a-eoc)}

/* Héro (comme PageHero du site) */
.astuces .hero,.astuces .page-hero{background:var(--a-canvas);border-bottom:1px solid var(--a-line)}
.astuces .hero{padding-block:4rem}
.astuces .page-hero{padding-block:3rem 2.5rem}
@media (min-width:768px){.astuces .hero{padding-block:6rem}.astuces .page-hero{padding-block:4.5rem 3.5rem}}
.astuces .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:start}
.astuces .hero p.lead{font-size:1.125rem;color:var(--a-muted);margin-top:1.5rem;max-width:58ch;line-height:1.7}
.astuces .perks{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.75rem}
.astuces .perks li{position:relative;padding-left:1.75rem}
.astuces .perks li::before{content:"";position:absolute;left:0;top:.8rem;width:1rem;height:1px;background:var(--a-eoc)}
@media (max-width:1023px){.astuces .hero-grid{grid-template-columns:minmax(0,1fr)}}

/* Formulaire (comme ContactForm du site) */
.astuces .form-card{background:var(--a-paper);border-radius:var(--a-r);box-shadow:0 0 0 1px var(--a-line),0 1px 2px rgba(12,14,28,.05);padding:1.5rem}
@media (min-width:768px){.astuces .form-card{padding:2rem}}
.astuces .form-card h3{font-size:1.5rem}
.astuces .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;margin-top:1.25rem}
.astuces .form-grid .full{grid-column:1/-1}
.astuces label.f{display:grid;gap:.375rem;font-size:.875rem;font-weight:500;color:var(--a-ink);min-width:0}
.astuces label.f input,.astuces label.f select{font:1rem var(--a-sans);color:var(--a-ink);background:#fff;border:1px solid var(--a-champ);border-radius:.5rem;padding:.625rem .875rem;width:100%;outline:none}
.astuces label.f input:focus,.astuces label.f select:focus{border-color:var(--a-eoc);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-eoc) 25%,transparent)}
.astuces .consent{display:flex;gap:.625rem;align-items:flex-start;font-size:.8rem;color:var(--a-muted);line-height:1.55;margin-top:.25rem}
.astuces .consent input{margin-top:.2rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--a-eoc)}
.astuces .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.astuces .form-msg{margin-top:.75rem;font-size:.9rem}
.astuces .form-msg.err{color:var(--a-bad)}
.astuces .form-msg.ok{color:var(--a-ok)}
.astuces .form-card .btn{width:100%;margin-top:1.25rem}
@media (max-width:520px){.astuces .form-grid{grid-template-columns:1fr}}

/* Sections (alternance papier / gris comme Section du site) */
.astuces section.block{padding-block:5rem;background:var(--a-paper)}
.astuces section.block:nth-of-type(odd){background:var(--a-canvas2)}
@media (min-width:768px){.astuces section.block{padding-block:7rem}}
.astuces .section-head{display:flex;justify-content:space-between;align-items:end;gap:1.25rem 2.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.astuces .section-head p{max-width:60ch}

/* Astuce en cours */
.astuces .now{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem;background:var(--a-paper);border-radius:var(--a-r);box-shadow:0 0 0 1px var(--a-line);padding:1.5rem}
@media (min-width:768px){.astuces .now{padding:1.75rem}}
.astuces .now h3{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:400;letter-spacing:-.025em}
.astuces .pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;letter-spacing:.02em;padding:.2rem .65rem;border-radius:999px;color:var(--cat);background:color-mix(in srgb,var(--cat) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 25%,transparent);white-space:nowrap}
.astuces .pill::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--cat)}
.astuces .meta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;font-size:.85rem;color:var(--a-muted)}
@media (max-width:1023px){.astuces .now{grid-template-columns:minmax(0,1fr)}}

/* Calendrier */
.astuces .months{display:grid;gap:2.5rem}
.astuces .month h3{font-size:1.25rem;display:flex;gap:.75rem;align-items:baseline;margin-bottom:1rem}
.astuces .month h3 small{font-family:var(--a-sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--a-muted)}
.astuces .weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.astuces .wk{position:relative;display:flex;flex-direction:column;gap:.5rem;min-height:8.25rem;padding:1.25rem;border-radius:var(--a-r);background:var(--a-paper);box-shadow:0 0 0 1px var(--a-line);color:var(--a-ink);min-width:0;transition:box-shadow .3s}
.astuces a.wk:hover{box-shadow:0 0 0 1px var(--a-eoc)}
.astuces .wk .d{font-size:.78rem;color:var(--a-muted)}
.astuces .wk h4{margin:0;font-family:var(--a-display);font-size:1.05rem;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.astuces .wk.locked{background:transparent;box-shadow:inset 0 0 0 1px var(--a-champ);color:var(--a-muted)}
.astuces .wk.locked h4{color:var(--a-muted);font-weight:400}
.astuces .wk.current{box-shadow:0 0 0 1px var(--a-eoc);border-left:4px solid var(--a-eoc)}
.astuces .wk .tagnow{position:absolute;top:.85rem;right:.85rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--a-eoc);color:#fff;padding:.2rem .5rem;border-radius:var(--a-btn)}
.astuces .wk .lock{margin-top:auto;font-size:.78rem;color:var(--a-muted)}

/* Page astuce */
.astuces .crumbs{font-size:.875rem;color:var(--a-muted);margin-bottom:2rem}
.astuces .crumbs a{color:var(--a-muted)!important;text-decoration:none!important}
.astuces .crumbs a:hover{color:var(--a-ink)!important}
.astuces .page-hero h1 + p{font-size:1.125rem!important;line-height:1.7}
.astuces .article{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2.5rem;align-items:start;padding-block:3.5rem 5rem}
.astuces .article aside{position:sticky;top:6rem}
@media (max-width:1023px){.astuces .article{grid-template-columns:minmax(0,1fr)}.astuces .article aside{position:static}}
.astuces .card{background:var(--a-paper);border-radius:var(--a-r);box-shadow:0 0 0 1px var(--a-line);padding:1.5rem}
@media (min-width:768px){.astuces .card{padding:1.75rem}}
.astuces .card h2{font-size:1.6rem;margin-bottom:.75rem}
.astuces .steps{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;counter-reset:s}
.astuces .steps li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.85rem;align-items:start}
.astuces .steps li::before{counter-increment:s;content:counter(s);width:2rem;height:2rem;border-radius:var(--a-btn);background:var(--a-eoc);color:#fff;display:grid;place-items:center;font-family:var(--a-display);font-weight:500}
/* Le cadre prend exactement la taille de la vidéo (16:9) : pas d'étirement dans les grilles, aucun fond noir autour */
.astuces .video-frame{align-self:start;height:auto;aspect-ratio:16/9;border-radius:var(--a-r);overflow:hidden;background:transparent;box-shadow:0 0 0 1px var(--a-line)}
.astuces .video-frame video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;background:transparent}

/* Plan d'action, checklist, modèles */
.astuces .timeline{list-style:none;margin:0;padding:0;position:relative}
.astuces .timeline::before{content:"";position:absolute;left:.95rem;top:.4rem;bottom:.4rem;width:1px;background:var(--a-line)}
.astuces .timeline li{position:relative;padding:0 0 1.15rem 2.75rem}
.astuces .timeline li::before{content:"";position:absolute;left:.5rem;top:.4rem;width:.95rem;height:.95rem;border-radius:50%;background:#fff;border:2px solid var(--a-eoc)}
.astuces .timeline li.jj::before{background:var(--a-eoc)}
.astuces .timeline .when{font-size:.8rem;font-weight:600;color:var(--a-eoc);display:flex;gap:.6rem;flex-wrap:wrap}
.astuces .timeline .act{font-weight:600;margin-top:.15rem}
.astuces .timeline .who{font-size:.85rem;color:var(--a-muted)}
.astuces .check{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.5rem}
.astuces .check label{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer}
.astuces .check input{width:1.15rem;height:1.15rem;margin-top:.25rem;flex:none;accent-color:var(--a-eoc)}
.astuces .tpl{border-radius:.75rem;overflow:hidden;box-shadow:0 0 0 1px var(--a-line);margin-top:1rem}
.astuces .tpl header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--a-canvas2)}
.astuces .tpl pre{margin:0;padding:1rem;white-space:pre-wrap;word-break:break-word;font:.92rem/1.65 var(--a-sans);color:var(--a-ink);background:var(--a-paper);max-height:26rem;overflow:auto}
.astuces .errs{margin:.75rem 0 0;padding-left:1.25rem;display:grid;gap:.4rem;list-style:disc}
.astuces .locked-box{border-radius:var(--a-r);padding:1.75rem;background:var(--a-paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--a-eoc) 40%,transparent);border-left:4px solid var(--a-eoc)}
.astuces .locked-box ul{margin:.75rem 0 0;padding-left:1.25rem;color:var(--a-muted);list-style:disc}

/* Série */
.astuces .episodes{display:grid;gap:1.5rem}
.astuces .ep{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;gap:1.75rem;background:var(--a-paper);border-radius:var(--a-r);box-shadow:0 0 0 1px var(--a-line);padding:1.5rem}
.astuces .ep h2{font-size:1.75rem!important}
.astuces .ep .nouveau{display:inline-block;margin-left:.6rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;background:var(--a-eoc);color:#fff;padding:.2rem .5rem;border-radius:var(--a-btn)}
.astuces .ep .txt{white-space:pre-line;color:var(--a-muted);font-size:.98rem}
@media (max-width:860px){.astuces .ep{grid-template-columns:minmax(0,1fr)}}

/* Page introuvable / astuce pas encore dévoilée */
.astuces .bientot{display:grid;gap:1rem;max-width:44rem}
.astuces .bientot .date{font-family:var(--a-display);font-size:1.5rem;color:var(--a-eoc)}