/* =======================================================================
   MAGAZINE — Feuille globale sans Bulma
   Notes perso :
   - Structure en sections : Variables → Reset → Layout → Nav → Hero → Sections →
     Cartes → Tags → Boutons → Notices → Meta-row → Animations → Utilitaires → Responsive.
   - Toutes les anciennes classes Bulma sont remplacées par des équivalents custom.
   ======================================================================= */

/* == Variables ========================================================== */
:root{
  --bg: #ffffff;
  --fg: #000000;
  --muted: #9aa0a6;
  --accent: #006BA8;
  --c-yellow: #FCC433;
  --c-rose: #C82A59;
  --c-blue: #006BA8;
  --c-green: #80B527;
  --sec-light: #ffffff;
  --sec-gray:  #f4f5f7;

  --navH-expanded: 104px;
  --navH-collapsed: 56px;

  --shadow-sm: 0 4px 10px rgba(0,0,0,.2);
  --shadow-md: 0 4px 10px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.4);
}

/* == Reset / Base ====================================================== */
*{ box-sizing:border-box; }
html { min-height:100%; margin:0; padding:0; overflow-y:auto; }
body { min-height:100%; margin:0; padding:0; overflow-x:hidden; overflow-y:visible; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }
a{ color:var(--c-yellow); text-decoration:none; }
a:hover, a:focus{ color:var(--fg); }

/* == Layout générique ================================================== */
.container{
  width: min(1200px, 92vw);
  margin-inline: auto;
}
.center { text-align:center; }
.content { word-wrap: break-word; overflow-wrap: anywhere; }

/* == Navigation (remplace .navbar Bulma) =============================== */
.app-nav{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  height: var(--navH-expanded);
  transition: height .22s ease, background-color .22s ease, box-shadow .22s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  display:flex; align-items:center; /* PATCH: nav en flex */
  overflow: visible; /* PATCH: pas de clipping */
}
.app-nav.is-scrolled{
  height: var(--navH-collapsed);
  background: rgba(0,0,0,.4);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* Brand + zones */
.nav__brand,
.nav__menu{
  height:100%;
  display:flex;
  align-items:center;
  min-height:0;
  padding-inline: 1rem;
  gap: .75rem;
}
.nav__brand{ justify-content:flex-start; }
.nav__menu{ justify-content:space-between; flex:1 1 auto; position:relative; }

/* Items génériques */
.nav__item{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  color:#fff;
  transition: transform .18s ease, opacity .18s ease;
  transform-origin:center;
}
.app-nav.is-scrolled .nav__item{ transform: scale(.95); opacity:.95; }
.nav__item:hover, .nav__item:focus{ transform: none; opacity:1; }

/* Logo */
.nav__logo img{
  height:90px; transition:height .22s ease, transform .22s ease;
}
.app-nav.is-scrolled .nav__logo img{ height:40px; transform:translateY(2px); }

/* Burger supprimé partout */
.nav__burger{ display:none !important; } /* PATCH */

/* Bande de liens horizontaux */
.nav-scroll{
  position: relative; width:100%; display:flex; align-items:center; gap:.25rem; height:100%;
  flex:1 1 auto; min-width:0; /* PATCH: rester sur une ligne */
}
.nav__start{
  display:flex; gap:.35rem;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling:touch;
  padding-right:3.25rem; scrollbar-width:none;
  flex:1 1 auto; min-width:0; /* PATCH */
}
.nav__start::-webkit-scrollbar{ display:none; }
.nav-scroll::before,
.nav-scroll::after{
  content:""; position:absolute; top:0; bottom:0; width:2.25rem; mix-blend-mode:multiply; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .15s;
}
.nav-scroll::before{ left:0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.nav-scroll::after{ right:3.25rem; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.45)); }
.nav-scroll-btn{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  border:none; background:rgba(255,255,255,.06); color:#fff;
  width:36px; height:36px; border-radius:999px; display:none;
  align-items:center; justify-content:center; z-index:3; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.35); backdrop-filter:blur(6px);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.nav-scroll-btn .fa{ font-size:.9rem; }
.nav-scroll-btn:focus{ outline:2px solid rgba(255,255,255,.18); outline-offset:2px; }
.nav-scroll-btn:hover{ transform: translateY(-50%) scale(1.04); background: rgba(255,255,255,.1); }
.nav-scroll-btn:active{ transform: translateY(-50%) scale(.98); }
.nav-scroll.is-overflowing .nav-scroll-btn{ display:flex; }
.nav-scroll.is-overflowing::before, .nav-scroll.is-overflowing::after{ opacity:1; }

/* Pastilles article + alternance couleurs */
.nav-article{
  --padX: 1rem;
  background:#222; border-radius:999px; padding:.45rem var(--padX);
  line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.22);
  max-height:3rem;
}
.nav-article .nav__item-label{
  display:inline-block; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600; letter-spacing:.01em;
}
.nav-article--y{ background: var(--c-yellow); color:#111; }
.nav-article--r{ background: var(--c-rose);   color:#fff; }
.nav-article--b{ background: var(--c-blue);   color:#fff; }
.nav-article--g{ background: var(--c-green);  color:#111; }

/* Rétrécie : tronque puis s'agrandit au hover */
.app-nav.is-scrolled .nav__start .nav-article{
  font-size: 0.9rem; max-height: 2rem; max-width: 9rem; overflow:hidden; transition:max-width .18s ease, transform .18s ease;
}
.app-nav.is-scrolled .nav__start .nav-article:hover,
.app-nav.is-scrolled .nav__start .nav-article:focus{
  max-width: 100%;
}

/* Menu toujours visible */
.nav__menu{ display:flex !important; align-items:center; gap:.75rem; }

/* Panneau mobile jamais affiché */
.nav__mobile-panel{ display:none !important; } /* PATCH */

/* Icône “clé” */
.key-link{ padding: .5rem .75rem; }
.key-ico{ display:inline-block; font-size:1.15rem; transition: transform .12s ease, filter .12s ease; }
.key-ico:hover{ transform: scale(1.15); filter: drop-shadow(0 2px 6px rgba(255,255,255,.25)); cursor: pointer; }
.key-ico.is-pressed{ transform: scale(.95); }

/* == Hero ============================================================== */
.logo-overlay{ display:none !important; }
.hero-cover {
  height: 100svh;
  display: grid;
  place-items: end start;
  position: relative;
  overflow: hidden;
  background-attachment: local;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.hero-cover::before {
  content: "";
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center var(--hero-bg-y, 0px);
  filter: brightness(.45);
  will-change: background-position;
}
.hero-content {
  position: relative;
  padding: calc(var(--navH, var(--navH-expanded)) + 2rem) 2rem 5rem;
  max-width: 1200px;
  width: 100%;
  z-index: 2;
}
/* Titre + description “À la une” (classes dédiées, sans conflit Bulma) */
h1.headline-hero__title {margin-bottom: 0em;}
.headline-hero__title {
  color:#fff;
  margin: .25rem 0 0;
  font-weight: 800;
  letter-spacing:.02em;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: clamp(2rem, 4vw, 3rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.headline-hero__desc {
  color: rgba(255,255,255,.8);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  max-width: 60ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

.pill {
  display:inline-block;
  border:2px solid var(--c-yellow);
  color: var(--c-yellow);
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
}
.scroll-indicator {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  flex-direction: column;
  align-items:center;
  color:#fff;
  z-index:3;
}
.scroll-indicator .arrow{
  width:14px; height:14px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform: rotate(45deg);
  animation: bounce 1.4s infinite;
}
@keyframes bounce {
  0%,100%{ transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(8px) rotate(45deg); }
}

/* == Titres / textes =================================================== */
.heading{ color: var(--fg); margin:0; }
.heading--1{ font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; color:#fff; letter-spacing:.04em; }
.heading--2{ font-size: clamp(1.5rem, 3vw, 2.25rem); color:#111; }
.subheading{ color:#111; margin:.5rem 0 0; }
.subheading--lg{ font-size: clamp(1rem, 2.2vw, 1.25rem); }
.subheading--md {
    font-size: 0.9rem;
    font-style: italic;
    color: #00000091;
    margin-top: -0.5rem;
    margin-bottom: 2rem;
}
.content img{ max-width:100%; height:auto; }

/* == Sections / Articles ============================================== */
.section-block { scroll-margin-top: 4.5rem; padding: 3.5rem 0; }
.article-section { padding: 4rem 0; }
.sec-light { background: var(--sec-light); color: #111111; }
.sec-gray  { background: var(--sec-gray);  color: #111111; }

/* == Cartes article ==================================================== */
.article-card {
  background: #ffffff; color: #111111;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  border: 1px solid rgba(16,24,40,0.05);
  border-radius: 8px;
  padding: 1rem;
}
.article-card__content{ color: inherit; }
.article-section .content,
.article-section .content * { color: inherit !important; background: transparent !important; }
.article-section .content::after { content:""; display:block; clear:both; }
/* Alignements médias pour WYSIWYG */
.article-section .content .fig-inline { display:inline; float:none; margin:0; }
.article-section .content .fig-left   { float:left;  margin:0 1rem 1rem 0; }
.article-section .content .fig-right  { float:right; margin:0 0 1rem 1rem; }
.article-section .content .fig-block-center { display:block; margin:.75rem auto; float:none; }
.article-section .content .fig-tight  { float:left; margin:.25rem .75rem .5rem 0; }
.article-section .content .fig-front { position:relative; z-index:20; }
.article-section .content .fig-back  { position:relative; z-index:-1; }
.article-section .content img.fig-left,
.article-section .content video.fig-left,
.article-section .content audio.fig-left { float:left; margin:0 1rem 1rem 0; }
.article-section .content img.fig-right,
.article-section .content video.fig-right,
.article-section .content audio.fig-right { float:right; margin:0 0 1rem 1rem; }
.article-section .content img.fig-block-center,
.article-section .content video.fig-block-center,
.article-section .content audio.fig-block-center { display:block; margin:.75rem auto; float:none; }

/* == Meta ligne ======================================================== */
.meta-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.meta-row__left, .meta-row__right{ display:flex; align-items:center; gap:.5rem; }

/* == Tags =============================================================== */
.tag{
  display:inline-flex; align-items:center;
  padding:.25rem .6rem; font-size:.85rem; border-radius:.5rem;
  border:1px solid rgba(0,0,0,.12); color:#111; background:#f9fafb;
}
.tag--rounded{ border-radius:999px; }
.tag--dark {
    background: #0000001a;
    color: #797979;
    border: none;
    font-style: italic;
}

/* == Boutons ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:.6rem; border:1px solid transparent;
  cursor:pointer; background:#111; color:#fff; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover, .btn:focus-visible{ box-shadow: var(--shadow-md); }
.btn:active { transform: scale(.98); }
.btn .icon{ display:inline-flex; align-items:center; }
.btn--sm{ padding:.35rem .7rem; font-size:.9rem; }
.btn--lg{ padding:.75rem 1rem; font-size:1rem; border-radius:999px; }
.btn--ghost{ background:#222; color:#fff; border-color:#333; }
.btn--primary{ background:#006BA8; }
.btn--liked{ background: var(--c-green) !important; border-color: var(--c-green) !important; color:#fff !important; }

/* Boutons flottants bleu/vert avec blur */
.has-icon-blur{ position:relative; background:transparent !important; border:none; }
.has-icon-blur .icon{ position:relative; z-index:2; }
.floating-archives-btn,.floating-idea-btn{
  position: fixed !important;
  bottom: 1rem; right: 1rem;
  z-index: 1000;
  border-radius: 9999px;
  background: transparent !important;
  border: none;
}
.floating-idea-btn{ right: 6rem; }
.floating-idea-btn::before,
.floating-archives-btn::before{
  content:""; position:absolute; inset:auto;
  width: 44px; height:44px; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:999px; backdrop-filter: blur(10px); z-index:1;
}
.floating-idea-btn::before{ background: rgba(0,107,168,.85); }
.floating-archives-btn::before{ background: rgba(128,181,39,.85); }
.floating-archives-btn, .floating-idea-btn, .like-btn {
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.floating-archives-btn:hover, .floating-idea-btn:hover, .like-btn:hover,
.floating-archives-btn:focus-visible, .floating-idea-btn:focus-visible, .like-btn:focus-visible {
  transform: scale(1.06); opacity: .9; box-shadow: var(--shadow-lg);
}

/* == Notices ============================================================ */
.notice{
  position: absolute;
  top: 50%;
  left: 38%;
  width: min(440px);
  margin-top: 5rem;
  margin-inline: auto;
  width: min(900px, 92vw);
  padding: .85rem 1rem;
  border-radius: .6rem;
  border:1px solid transparent;
  box-shadow: 0 4px 12px rgba(16,24,40,0.06);
}
.notice--success{ background: #8bff456b; color:#d3ffce; backdrop-filter: blur(6px); }
.notice--danger { background:#fa1487a4; color:#ffd1d8; backdrop-filter: blur(6px);}
.notice__close{
  float:right; width:18px; height:18px;
  appearance:none; border:0; background:transparent; cursor:pointer;
  position:relative;
}
.notice__close::before, .notice__close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:2px; background: currentColor; transform-origin:center;
}
.notice__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.notice__close::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* == Byline ============================================================ */
.byline { color: var(--muted); font-size: .85rem; font-style: italic; margin-top: .75rem; }

/* == Animations / Fx =================================================== */
.fx-mask { opacity: 0; transform: translateY(60px); transition: opacity .9s ease, transform .9s ease; }
.is-in .fx-mask { opacity: 1; transform: none; }
.fx-slide-left { opacity: 0; transform: translateX(-80px); transition: opacity 1s ease, transform 1s ease; }
.is-in .fx-slide-left { opacity: 1; transform: none; }
.fx-slide-right { opacity: 0; transform: translateX(80px); transition: opacity 1s ease, transform 1s ease; }
.is-in .fx-slide-right { opacity: 1; transform: none; }
.fx-fade { opacity: 0; transition: opacity 1s ease; }
.is-in .fx-fade { opacity: 1; }
/* Bounce optionnel */
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-14%); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-7%); }
  80% { transform: translateY(0); }
}
.is-bouncing { animation: bounceY 1.2s ease-in-out infinite; transform-origin: center bottom; }
@media (prefers-reduced-motion: reduce) {
  .floating-archives-btn, .floating-idea-btn, .like-btn { transition: none; }
  .is-bouncing { animation: none; }
}

/* == Spine / Footer ==================================================== */
.spine {
  position: fixed;
  right: 1%; top: 80%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right top;
  z-index: 900; opacity: .8;
  letter-spacing:.2em; font-weight:700; text-transform:uppercase;
  pointer-events:none; color: rgba(255,255,255,.85); font-size:.85rem;
}
.site-footer {
  background: #000; color: #ffffff; padding: 2rem 1rem;
}

/* == Utilitaires ======================================================= */
.small { font-size: .85rem; }
.mt-2{ margin-top:.5rem; } .mt-4{ margin-top:1rem; }
.mb-3{ margin-bottom:.75rem; }

/* == Responsive ======================================================== */
@media (max-width: 1023px) {
  .app-nav{ height: var(--navH-collapsed); } /* conserve la barre compacte */
  .nav__menu{ display:flex !important; align-items:center !important; } /* PATCH */
  .nav-scroll, .nav__end{ display:flex !important; } /* PATCH */
  .hero-content { padding: 4rem 1.25rem 5rem; }
}
@media (max-width: 769px) {
  .spine { display:none; }
  .article-section { padding: 2rem 0; }
  .nav__start > a.nav__item { margin:.25rem; padding:.45rem .6rem; font-size:.85rem; }
}

/* Ajuste la marge d’ancrage selon nav réelle */
.section-block{ scroll-margin-top: var(--navH, var(--navH-expanded)); }

/* Taille des pastilles en petits écrans paysage */
@media (max-width:769px) and (orientation:landscape){
  .nav__start > a.nav-article{ padding:.35rem .6rem; }
}

/* == “Live” badge optionnel =========================================== */
.live-badge{display:inline-flex;align-items:center;gap:.5rem}
.live-text{font-weight:600}
.live-dot{
  color:#ff3b30; font-size:0.7em; line-height:1;
  animation:live-pulse 1.2s ease-in-out infinite, live-flicker 3s linear infinite;
  transform-origin:center; text-shadow:0 0 0 rgba(255,59,48,0);
}
@keyframes live-pulse{
  0%,100%{transform:scale(1); text-shadow:0 0 0 rgba(255,59,48,0); opacity:.9}
  50%    {transform:scale(1.35); text-shadow:0 0 10px rgba(255,59,48,.9),0 0 20px rgba(255,59,48,.5); opacity:1}
}
@keyframes live-flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,24%,55%{opacity:.7}
}
@media (prefers-reduced-motion: reduce){ .live-dot{animation:none} }

/* Zone droite navbar: icônes shortcuts */
.nav__end{display:flex;gap:.5rem;align-items:center;margin-left:auto}

.nav__end .nav__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  text-decoration:none;           /* liens neutres */
  outline:none;                   /* pas de contour natif */
  transition:background-color .2s ease, transform .08s;
}

.nav__end .nav__item:hover{background:rgba(255,255,255,.22)}
.nav__end .nav__item:active{transform:scale(.96)}
.nav__end .nav__item:focus-visible{
  outline:2px solid #2684ff;     /* focus accessible */
  outline-offset:2px;
}

.nav-shortcut-btn i{font-size:1rem;color:#fff}

/* logos nav (si présents) */
.shortcut-logo--nav{height:60px;max-height:60px;width:auto}


/* Héro: encarts cliquables */
.hero-ctas{position: absolute;
    right: 2rem;
    top: -30rem;
    display: flex;
    gap: 1rem;
    align-items: center;}
.hero-cta{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none}
.hero-cta__img{width:72px;height:72px;object-fit:contain;border-radius:20px;}
.hero-cta__label{margin-top:.35rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* Respect absolu de l'attribut [hidden] */
[hidden] { display: none !important; }

/* Sélecteurs spécifiques à la modale */
.modal-overlay[hidden],
.modal[hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* État visible (inchangé sinon) */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.50); backdrop-filter: blur(5px); z-index: 1000; }
.modal { position: fixed; inset: auto 4vw 6vh 4vw; top: 8vh; background: #ffffffe8; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); z-index: 1001; display: flex; flex-direction: column; max-height: 86vh; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid #0000007d; }
.modal__title { margin: 0; font-size: 1.1rem; }
.modal__close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.modal__body { padding: 0; height: calc(86vh - 56px); }
#modalFrame { width: 100%; height: 100%; border: 0; }
@media (max-width: 768px){ .modal{ left:3vw; right:3vw; top:6vh; bottom:4vh; } }

/* Logos shortcuts */
.shortcut-logo { display:block; object-fit:contain; transition:transform .18s ease, box-shadow .18s ease; }
.shortcut-logo--nav { height:60px; max-height:60px; width:auto; }
.shortcut-logo--hero {     height: 8rem;
    max-height: 8rem;
    width: auto;
    margin-bottom: .4rem;
    background: transparent;}

/* Icônes fallback alignés comme les logos */
.shortcut-icon { font-size:2rem; line-height:1; transition:transform .18s ease, box-shadow .18s ease; }
.hero-cta__icon { font-size:3rem; margin-bottom:.25rem; }

/* Hover zoom + shadow */
.nav-shortcut-btn:hover .shortcut-logo,
.nav-shortcut-btn:hover .shortcut-icon,
.hero-cta:hover .shortcut-logo,
.hero-cta:hover .shortcut-icon {
  transform:scale(1.06);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Effet bounce sur clic */
.has-bounce.is-bouncing { animation:btn-bounce .25s linear; }
@keyframes btn-bounce { 0%{transform:scale(.96)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }


/* EFFET NEIGE */
.snowflake {
    position: fixed;
    top: -10px;
    color: white;
    font-size: 10px;
    opacity: 0.8;
    pointer-events: none;
    user-select: none;
    animation-name: fall;
    animation-timing-function: linear;
}

@keyframes fall {
    to {
        transform: translateY(110vh);
        opacity: 0.2;
    }
}