/* ============================================================
   ARTICLES-GLOBAL.CSS
   Styles partagés — article-1-timing.html, article-2-residence.html,
   article-3-erreurs.html, article-4-preparation.html
   ============================================================ */


/* ══════════════════════════════════════
   RESET NUCLÉAIRE — avant tout le reste
══════════════════════════════════════ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}


/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  /* Fonds */
  --bg-0:#060912; --bg-1:#0A0E1C; --bg-2:#0E1424; --bg-3:#131A2E;
  /* Bordures */
  --br-0:#111826; --br-1:#182033; --br-2:#243554; --br-3:#2F4570;
  /* Accents */
  --gold:#C8A96A; --gold-b:#DEC083; --gold-d:#9A7B44;
  --blue:#3B6FD4;
  /* Sémantique */
  --red:#C45C5C; --amber:#C4924A; --green:#4AA87A;
  /* Texte */
  --t0:#EDF1FC; --t1:#8B9BB8; --t2:#495B78; --t3:#2B3A54;
  /* Polices */
  --fd:'Cormorant Garant',serif;
  --fb:'Figtree',sans-serif;
  --fm:'Space Mono',monospace;
  /* Courbes */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --slow:cubic-bezier(.16,1,.3,1);
  --sharp:cubic-bezier(.4,0,.2,1);
  /* Radius — DA v2.0 */
  --r-sm:6px;   /* boutons petits, badges  */
  --r-md:10px;  /* boutons principaux      */
  --r-lg:16px;  /* cartes piliers          */
  --r-xl:24px;  /* carte diagnostic        */
  --r-2xl:32px; /* grande card hero        */
  /* Ombres — DA v2.0 */
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:0 8px 40px rgba(0,0,0,.7);
  --shadow-gold:0 0 32px rgba(200,169,106,.18);
  /* Layout */
  --gutter:clamp(20px,4vw,48px);
  --max-w:1200px;
  --article-w:680px;
}


/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fb);background:var(--bg-1);color:var(--t0);
  line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;word-wrap:break-word;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit}


/* ══════════════════════════════════════
   GRAIN OVERLAY
══════════════════════════════════════ */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════
   PROGRESS BAR — fixed top:0, hors flux, zéro décalage
══════════════════════════════════════ */
#prog{
  position:fixed;top:0;left:0;width:0;height:1px;z-index:10000;
  margin:0 !important;padding:0 !important;
  background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-b));
  transition:width .08s linear;
}


/* ══════════════════════════════════════
   NAV — verrouillée, zéro "jour" blanc
══════════════════════════════════════ */
.nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:9999;
  height:64px;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid transparent;
  background:rgba(6,9,18,0);
  -webkit-transform:translate3d(0,0,0) !important;
  transform:translate3d(0,0,0) !important;
  will-change:transform;
  transition:background .45s var(--ease),border-color .45s;
}
.nav.solid{
  background:rgba(6,9,18,.88);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom-color:var(--br-0);
}
/* Padding horizontal sur .nav-i, jamais sur .nav */
.nav-i{
  width:100%;max-width:var(--max-w);
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:14px;color:var(--t0);transition:opacity .2s;
}
.nav-logo:hover{opacity:.8}
.nav-mark{
  width:30px;height:30px;border-radius:7px;
  background:linear-gradient(145deg,var(--gold-d),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:10px;font-weight:700;color:#08080f;flex-shrink:0;
}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:13.5px;color:var(--t1);transition:color .2s}
.nav-links a:hover{color:var(--t0)}
.nav-cta{
  font-size:13px;font-weight:500;padding:7px 16px;border-radius:6px;
  background:rgba(200,169,106,.08);color:var(--gold);
  border:1px solid rgba(200,169,106,.2);
  transition:background .2s,border-color .2s;
}
.nav-cta:hover{
  background:rgba(200,169,106,.15);
  border-color:rgba(200,169,106,.35);
  color:var(--gold);
}


/* ══════════════════════════════════════
   BOUTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fb);font-size:14px;font-weight:500;letter-spacing:.01em;
  border-radius:10px;cursor:pointer;transition:all .22s var(--sharp);
  white-space:nowrap;border:none;outline:none;text-decoration:none;
  max-width:100%;box-sizing:border-box;
}
.btn-p{padding:13px 26px;background:var(--gold);color:#08080f;font-weight:600}
.btn-p:hover{
  background:var(--gold-b);transform:translateY(-2px);
  box-shadow:var(--shadow-gold);
  color:#08080f;
}
.btn-p:active{transform:translateY(0)}
.btn-g{padding:12px 22px;background:transparent;color:var(--t1);border:1px solid var(--br-2)}
.btn-g:hover{border-color:var(--br-3);color:var(--t0);background:rgba(255,255,255,.025)}
.btn-ic{transition:transform .2s var(--spring)}
.btn:hover .btn-ic{transform:translateX(4px)}


/* ══════════════════════════════════════
   REVEAL ON SCROLL
══════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--slow),transform .7s var(--slow)}
.rv.in{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}
.rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s}
.rv.d4{transition-delay:.4s}


/* ══════════════════════════════════════
   ARTICLE HERO
══════════════════════════════════════ */
.article-hero{
  padding:120px var(--gutter) 64px;
  position:relative;overflow:hidden;
}
.article-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(24,32,51,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,32,51,.22) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 0%,black 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 70% 90% at 50% 0%,black 20%,transparent 80%);
  pointer-events:none;
}
/* Glow doré par défaut — article-3 surcharge avec rgba(196,92,92,.05) en inline */
.article-hero::after{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:600px;height:400px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(200,169,106,.06) 0%,transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.article-hero-inner{
  max-width:var(--article-w);margin:0 auto;position:relative;z-index:1;
  width:100%;
}

/* Animations d'entrée du hero */
@keyframes up{to{opacity:1;transform:translateY(0)}}

.breadcrumb{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:10px;color:var(--t2);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px;
  opacity:0;transform:translateY(10px);
  animation:up .5s var(--slow) .1s forwards;
}
.breadcrumb a{color:var(--t2);transition:color .2s}
.breadcrumb a:hover{color:var(--t1)}
.breadcrumb-sep{color:var(--t3)}
.breadcrumb-current{color:var(--gold-d)}

.article-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:10px;color:var(--gold-d);
  text-transform:uppercase;letter-spacing:.14em;
  padding:5px 12px 5px 10px;border-radius:100px;
  background:rgba(200,169,106,.07);border:1px solid rgba(200,169,106,.18);
  margin-bottom:22px;
  opacity:0;transform:translateY(10px);
  animation:up .55s var(--slow) .18s forwards;
}
.article-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--gold-d)}

.article-h1{
  font-family:var(--fd);font-size:clamp(34px,5.5vw,58px);
  font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--t0);
  margin-bottom:24px;
  opacity:0;transform:translateY(20px);
  animation:up .75s var(--slow) .28s forwards;
}
.article-intro{
  font-family:var(--fd);font-size:clamp(16px,2.2vw,20px);
  font-weight:400;font-style:italic;color:var(--t1);
  line-height:1.7;margin-bottom:32px;
  opacity:0;transform:translateY(20px);
  animation:up .75s var(--slow) .4s forwards;
}
.article-meta{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--br-0);
  opacity:0;transform:translateY(10px);
  animation:up .6s var(--slow) .52s forwards;
}
.meta-item{
  display:flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:10px;color:var(--t2);
  letter-spacing:.1em;text-transform:uppercase;
}
.meta-item svg{opacity:.6}


/* ══════════════════════════════════════
   ARTICLE LAYOUT & TYPOGRAPHIE
══════════════════════════════════════ */
.article-layout{
  padding:0 var(--gutter) 80px;
}
.article-body{
  max-width:var(--article-w);
  margin:0 auto;
  width:100%;
  min-width:0;
}

.a-h2{
  font-family:var(--fd);font-size:clamp(24px,3.5vw,34px);font-weight:600;
  line-height:1.12;letter-spacing:-.015em;color:var(--t0);
  margin-top:56px;margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid var(--br-0);
}
.a-p{font-size:15.5px;font-weight:300;line-height:1.8;color:var(--t1);margin-bottom:22px}
.a-p strong{color:var(--t0);font-weight:500}
.a-p em{font-style:italic}
.a-ul{list-style:none;padding:0;margin-bottom:24px}
.a-ul li{
  font-size:15.5px;font-weight:300;line-height:1.75;color:var(--t1);
  margin-bottom:10px;padding-left:22px;position:relative;
}
.a-ul li::before{content:'—';position:absolute;left:0;color:var(--gold-d);font-size:13px;top:3px}
.a-ul li strong{color:var(--t0);font-weight:500}

.section-sep{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--br-1) 20%,var(--br-1) 80%,transparent);
  margin:52px 0;
}


/* ══════════════════════════════════════
   ALERT BOXES (toutes variantes)
══════════════════════════════════════ */
.alert{
  border-radius:12px;padding:24px 26px 24px 22px;
  border-left:3px solid;margin:32px 0;
  position:relative;overflow:hidden;
}
.alert-label{
  font-family:var(--fm);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.alert-label-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.alert-title{
  font-family:var(--fd);font-size:18px;font-weight:600;
  line-height:1.2;margin-bottom:12px;
}
.alert p{font-size:14px;font-weight:300;line-height:1.72;margin:0}
.alert p+p{margin-top:10px}
.alert strong{font-weight:500}
.alert em{font-style:italic}

.alert-red{border-color:var(--red);background:rgba(196,92,92,.06)}
.alert-red .alert-label{color:var(--red)}
.alert-red .alert-title{color:#D98080}
.alert-red p{color:#B8A0A0}

.alert-amber{border-color:var(--amber);background:rgba(196,146,74,.06)}
.alert-amber .alert-label{color:var(--amber)}
.alert-amber .alert-title{color:#D4A870}
.alert-amber p{color:#B8AA98}

.alert-green{border-color:var(--green);background:rgba(74,168,122,.06)}
.alert-green .alert-label{color:var(--green)}
.alert-green .alert-title{color:#72C49A}
.alert-green p{color:#A0BEA8}
.alert-green strong{color:#A0D8BC}

.alert-gold{border-color:var(--gold-d);background:rgba(200,169,106,.05)}
.alert-gold .alert-label{color:var(--gold-d)}
.alert-gold .alert-title{color:var(--gold)}
.alert-gold p{color:var(--t1)}


/* ══════════════════════════════════════
   CASE STUDY (articles 2 et 3)
══════════════════════════════════════ */
.case-study{
  background:var(--bg-2);border:1px solid var(--br-1);
  border-radius:14px;padding:28px 28px 28px 26px;
  margin:32px 0;position:relative;overflow:hidden;
}
.case-study::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--amber),rgba(196,146,74,.2));
  border-radius:3px 0 0 3px;
}
.case-study-label{
  font-family:var(--fm);font-size:10px;color:var(--amber);
  text-transform:uppercase;letter-spacing:.13em;
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.case-study-label-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.case-study h4{
  font-family:var(--fd);font-size:19px;font-weight:600;
  color:var(--t0);margin-bottom:10px;line-height:1.25;
}
.case-study p{font-size:14px;font-weight:300;color:var(--t1);line-height:1.72;margin:0}
.case-study p+p{margin-top:10px}
.case-study p strong{color:var(--t0);font-weight:500}


/* ══════════════════════════════════════
   ARTICLE CTA
══════════════════════════════════════ */
.article-cta{
  background:var(--bg-2);border:1px solid var(--br-1);
  border-radius:24px;padding:48px 40px;margin-top:64px;
  text-align:center;position:relative;overflow:hidden;
}
.article-cta::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-d) 35%,var(--gold) 50%,var(--gold-d) 65%,transparent);
  opacity:.6;
}
.article-cta::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(200,169,106,.045) 0%,transparent 70%);
}
.article-cta-inner{position:relative;z-index:1}
.article-cta h3{
  font-family:var(--fd);font-size:clamp(22px,3.5vw,32px);font-weight:600;
  color:var(--t0);margin-bottom:14px;line-height:1.12;
}
.article-cta p{
  font-size:14.5px;font-weight:300;color:var(--t1);
  line-height:1.72;max-width:460px;margin:0 auto 28px;
}
.cta-badges{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;margin-top:16px;
}
.cta-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:9.5px;color:var(--green);
  background:rgba(74,168,122,.08);border:1px solid rgba(74,168,122,.18);
  padding:4px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.1em;
}
.cta-badge-dot{width:4px;height:4px;border-radius:50%;background:currentColor}


/* ══════════════════════════════════════
   NAVIGATION INTER-ARTICLES
══════════════════════════════════════ */
.articles-nav{
  max-width:var(--article-w);margin:48px auto 0;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.articles-nav-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--t2);padding:10px 16px;
  border-radius:8px;border:1px solid var(--br-1);transition:all .2s;
}
.articles-nav-back:hover{color:var(--t1);border-color:var(--br-2)}
.articles-nav-next{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--t1);padding:10px 16px;
  border-radius:8px;border:1px solid var(--br-1);
  background:var(--bg-2);transition:all .2s;
}
.articles-nav-next:hover{color:var(--t0);border-color:var(--br-2)}
/* article-1 = .nav-next-ic / articles 2-3 = .nav-ic — les deux déclarés */
.nav-next-ic,.nav-ic{transition:transform .2s var(--spring)}
.articles-nav-next:hover .nav-next-ic,
.articles-nav-next:hover .nav-ic{transform:translateX(3px)}
/* article-4 uniquement — bouton CTA final */
.articles-nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--gold);padding:10px 18px;
  border-radius:8px;border:1px solid rgba(200,169,106,.22);
  background:rgba(200,169,106,.07);transition:all .2s;
}
.articles-nav-cta:hover{
  background:rgba(200,169,106,.13);
  border-color:rgba(200,169,106,.35);
  color:var(--gold-b);
}
.articles-nav-cta:hover .nav-ic{transform:translateX(3px)}


/* ══════════════════════════════════════
   DISCLAIMER STRIP
══════════════════════════════════════ */
.disc-strip{
  background:var(--bg-0);border-top:1px solid var(--br-0);
  padding:10px var(--gutter);margin-top:64px;
}
.disc-i{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:flex-start;gap:14px;padding:12px 0;
}
.disc-ico{
  width:30px;height:30px;border-radius:6px;
  background:rgba(200,169,106,.06);border:1px solid rgba(200,169,106,.12);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.disc-txt{font-size:11.5px;color:var(--t2);line-height:1.55}
.disc-txt strong{color:var(--t1);font-weight:500}


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer{
  border-top:1px solid var(--br-0);
  padding:60px var(--gutter) 36px;
  background:var(--bg-0);
}
.footer-i{max-width:var(--max-w);margin:0 auto}
.f-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid var(--br-0);
}
.f-logo-row{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;margin-bottom:14px;
}
.f-tag{
  font-family:var(--fd);font-size:15px;font-style:italic;
  color:var(--t1);margin-bottom:14px;line-height:1.5;
}
.f-disc{
  font-size:11.5px;color:var(--t2);line-height:1.6;
  padding:12px 13px;border-radius:10px;
  background:rgba(255,255,255,.014);border:1px solid var(--br-0);
}
.f-nav-lbl{
  font-family:var(--fm);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--t3);margin-bottom:14px;
}
.f-nav{list-style:none;display:flex;flex-direction:column;gap:10px}
.f-nav a{font-size:13.5px;color:var(--t1);transition:color .2s}
.f-nav a:hover{color:var(--t0)}
.f-btm{
  padding-top:28px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.f-copy{font-family:var(--fm);font-size:10.5px;color:var(--t3);letter-spacing:.05em}
/* f-legal — une seule ligne propre, identique à l'accueil */
.f-legal{display:flex;align-items:center;gap:20px}
.f-legal a{font-size:12px;color:var(--t2);transition:color .2s}
.f-legal a:hover{color:var(--t1)}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:768px){
  :root{--gutter:20px}

  /* Nav opaque, collée, zéro "jour" sur iOS/Android */
  .nav{
    background:rgba(6,9,18,.97) !important;
    border-bottom-color:var(--br-0) !important;
    -webkit-transform:translate3d(0,0,0) !important;
    transform:translate3d(0,0,0) !important;
  }
  .nav-links{display:none}

  .article-layout{grid-template-columns:1fr;padding:0 var(--gutter) 60px}
  .article-body{grid-column:1}
  .article-cta{padding:32px 20px}
  .article-cta .btn-p{
    white-space:normal;
    text-align:center;
    width:100%;
    padding:14px 16px;
  }
  .articles-nav{flex-direction:column;align-items:stretch}
  .f-grid{grid-template-columns:1fr;gap:28px}
  .f-btm{flex-direction:column;text-align:center}
  .f-legal{justify-content:center}
}