/* ═══════════════════════════════════════════════════
   MARÉES LOIRE-ATLANTIQUE — Design System v3
   Palette marine lumineuse · WCAG AA · Mobile-first
   Auteur : Berry Yann — berry.guihal@gmail.com
   Dernière modif : avril 2026
═══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* -- Palette principale -- */
  --o900:#003F72;
  --o700:#0077B6;
  --o500:#00B4D8;
  --o300:#90E0EF;
  --o100:#CAF0F8;
  --o50 :#E0F7FA;
  --teal :#2A9D8F;
  --teal-l:#4DBDAF;
  --coral:#E76F51;
  --sand :#F8F3EA;

  /* fond page, cartes, texte */
  --bg   :#EEF6FB;
  --white:#FFFFFF;
  --text :#0D1B2A;
  --text-m:#2B4057;
  --text-l:#5A7A9A;
  --border:rgba(0,119,182,.13);

  /* -- Ombres -- */
  --sh-sm:0 2px 8px rgba(0,119,182,.08);
  --sh-md:0 6px 24px rgba(0,119,182,.13);
  --sh-lg:0 12px 40px rgba(0,119,182,.18);
  --sh-3d:0 2px 4px rgba(0,0,0,.04),
          0 8px 24px rgba(0,119,182,.11),
          0 20px 48px rgba(0,119,182,.07);

  /* -- Rayons -- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;

  /* compat anciens alias (sous-pages) */
  --blue:#0077B6;
  --blue-d:#003F72;
  --blue-l:#E0F7FA;
  --sea:#2A9D8F;
}

html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.65;
  min-height:100vh;
}
a{color:var(--o700);text-decoration:none}
a:focus-visible{outline:3px solid var(--o500);outline-offset:3px;border-radius:4px}

/* -- Skip link accessibilité -- */
.skip-link{
  position:absolute;top:-999px;left:1rem;
  background:var(--o700);color:#fff;
  padding:.55rem 1.2rem;border-radius:0 0 10px 10px;
  font-weight:700;font-size:.85rem;z-index:9999;
  transition:top .15s;
}
.skip-link:focus{top:0}


/* ══════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════ */
header{
  position:relative;
  background:linear-gradient(150deg,var(--o900) 0%,var(--o700) 55%,var(--o500) 100%);
  color:#fff;
  overflow:hidden;
  padding-bottom:56px;
}
/* cercles déco */
header::before{
  content:'';position:absolute;
  top:-60px;right:-60px;
  width:220px;height:220px;
  background:rgba(255,255,255,.05);
  border-radius:50%;
}
header::after{
  content:'';position:absolute;
  bottom:40px;left:-40px;
  width:160px;height:160px;
  background:rgba(255,255,255,.04);
  border-radius:50%;
}
.header-inner{
  position:relative;z-index:2;
  max-width:1100px;margin:0 auto;
  padding:1.3rem 1.5rem;
  display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:.75rem}
.logo-wave{
  font-size:2.1rem;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));
  animation:bob 3s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.logo-text h1{
  font-size:1.15rem;font-weight:800;
  letter-spacing:-.025em;line-height:1.2;
}
.logo-text p{font-size:.72rem;opacity:.78;font-weight:400;letter-spacing:.04em;margin-top:.1rem}
.header-nav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.header-nav a{
  color:rgba(255,255,255,.88);
  font-size:.76rem;font-weight:600;
  padding:.4rem .9rem;border-radius:20px;
  border:1.5px solid rgba(255,255,255,.22);
  transition:all .2s;white-space:nowrap;
}
.header-nav a:hover{
  background:rgba(255,255,255,.2);color:#fff;
  border-color:rgba(255,255,255,.45);transform:translateY(-1px);
}

/* ── Vagues SVG animées (3 calques) ── */
.wave-wrap{
  position:absolute;bottom:-1px;left:0;right:0;
  line-height:0;z-index:2;overflow:hidden;height:60px;
}
.wave-wrap svg{position:absolute;bottom:0;width:200%;height:60px}

@keyframes waveSlide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* vague 1 — fond plein, rapide */
.wv1{
  animation:waveSlide 9s linear infinite;
  fill:var(--bg);
}
/* vague 2 — semi-transparente, lente, sens inverse */
.wv2{
  animation:waveSlide 13s linear infinite reverse;
  fill:rgba(238,246,251,.6);
  opacity:.7;
}
/* vague 3 — très légère, rythme décalé */
.wv3{
  animation:waveSlide 17s linear infinite;
  fill:rgba(0,119,182,.08);
  opacity:.5;
}


/* ══════════════════════════════════════════════
   TOP AD & LAYOUT
══════════════════════════════════════════════ */
.ad-top{max-width:1100px;margin:0 auto;padding:.6rem 1.5rem 0}
.container{
  max-width:1100px;margin:0 auto;
  padding:1.5rem;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:1.5rem;
  align-items:start;
}
.main-col{display:flex;flex-direction:column;gap:1.4rem}
.side-col{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:1.2rem}


/* ══════════════════════════════════════════════
   PORT BAR — Sélection port + date
══════════════════════════════════════════════ */
.port-bar{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  box-shadow:var(--sh-md);
  border:1px solid var(--border);
}
.port-bar label{
  font-size:.72rem;font-weight:700;
  color:var(--text-l);text-transform:uppercase;
  letter-spacing:.09em;white-space:nowrap;
}
.port-select{
  flex:1;min-width:180px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:.55rem .9rem;font-family:inherit;font-size:.86rem;
  color:var(--text);background:#fff;cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.port-select:focus{outline:none;border-color:var(--o500);box-shadow:0 0 0 3px rgba(0,180,216,.15)}
.date-input{
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:.55rem .9rem;font-family:inherit;font-size:.86rem;
  color:var(--text);background:#fff;cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.date-input:focus{outline:none;border-color:var(--o500);box-shadow:0 0 0 3px rgba(0,180,216,.15)}
.refresh-btn{
  background:linear-gradient(135deg,var(--o700),var(--o500));
  color:#fff;border:none;border-radius:var(--r-sm);
  padding:.57rem 1.1rem;font-family:inherit;
  font-size:.82rem;font-weight:700;cursor:pointer;
  transition:all .25s;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,119,182,.25);
}
.refresh-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,119,182,.35)}
.refresh-btn:focus-visible{outline:3px solid var(--o500);outline-offset:2px}
.refresh-btn.alert-btn{
  background:linear-gradient(135deg,var(--teal),var(--teal-l));
  box-shadow:0 3px 10px rgba(42,157,143,.25);
}
.refresh-btn.alert-btn:hover{box-shadow:0 6px 18px rgba(42,157,143,.35)}


/* ══════════════════════════════════════════════
   TODAY CARD — Marées du jour
══════════════════════════════════════════════ */
.today-card{
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);overflow:hidden;
  box-shadow:var(--sh-3d);transition:box-shadow .3s;
}
.today-header{
  background:linear-gradient(135deg,var(--o900) 0%,var(--o700) 60%,var(--o500) 100%);
  color:#fff;padding:1.4rem 1.6rem 1.25rem;
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:.75rem;position:relative;overflow:hidden;
}
.today-header::after{
  content:'🌊';position:absolute;right:1.5rem;bottom:-8px;
  font-size:4.5rem;opacity:.07;line-height:1;
  pointer-events:none;
}
.today-title{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.today-date{font-size:.8rem;opacity:.82;margin-top:.2rem;font-weight:400}

/* badge coefficient — pulse quand la valeur change */
.coeff-badge{
  background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.38);
  color:#fff;padding:.45rem 1.1rem;border-radius:24px;
  font-size:.84rem;font-weight:800;white-space:nowrap;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:transform .15s;
}
.coeff-badge.pulse{animation:coeffPulse .4s ease}
@keyframes coeffPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

/* grille des horaires */
.today-tides{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.tide-item{
  padding:1.3rem 1rem 1.1rem;text-align:center;
  border-right:1px solid var(--o50);
  transition:background .2s;position:relative;
}
.tide-item::after{
  content:'';position:absolute;
  bottom:0;left:15%;right:15%;height:2px;
  border-radius:2px;opacity:0;
  transition:opacity .2s;
}
.tide-item.pm::after{background:var(--o500)}
.tide-item.bm::after{background:var(--teal)}
.tide-item:hover{background:var(--o50)}
.tide-item:hover::after{opacity:1}
.tide-item:last-child{border-right:none}
.tide-type{
  font-size:.63rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.55rem;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
}
.tide-type.pm{color:var(--o700)}
.tide-type.bm{color:var(--teal)}
.tide-time{
  font-size:1.65rem;font-weight:800;
  color:var(--text);line-height:1;margin-bottom:.45rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.tide-height{
  font-size:.92rem;font-weight:600;
  color:var(--text-m);margin-bottom:.3rem;
}
.tide-coeff{
  display:inline-block;
  background:var(--o50);color:var(--o700);
  font-size:.68rem;font-weight:800;
  padding:.25rem .65rem;border-radius:20px;
  border:1px solid var(--o100);
}


/* ══════════════════════════════════════════════
   CHART CARD — Graphique 24h
══════════════════════════════════════════════ */
.chart-card{
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);
  padding:1.25rem 1.4rem 1rem;
  box-shadow:var(--sh-md);
  transition:box-shadow .3s,transform .3s;
}
.chart-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.chart-title{
  font-size:.9rem;font-weight:800;color:var(--o900);
  margin-bottom:.85rem;letter-spacing:-.01em;
  display:flex;align-items:center;gap:.5rem;
}
.chart-title-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--o500);
  display:inline-block;
}
#tideChart{width:100%;display:block;border-radius:8px}
.chart-legend{
  display:flex;gap:1.2rem;margin-top:.7rem;flex-wrap:wrap;
}
.leg-item{
  display:flex;align-items:center;gap:.4rem;
  font-size:.72rem;color:var(--text-l);font-weight:500;
}
.leg-dot{width:8px;height:8px;border-radius:50%}


/* ══════════════════════════════════════════════
   WEEK CARD — Tableau 7 jours
══════════════════════════════════════════════ */
.week-card{
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);overflow:hidden;
  box-shadow:var(--sh-md);
}
.week-header{
  padding:1.1rem 1.4rem .9rem;
  border-bottom:1px solid var(--o50);
}
.week-header h2{font-size:.95rem;font-weight:800;color:var(--o900)}
.week-row{
  display:flex;align-items:center;
  padding:.9rem 1.4rem;
  border-bottom:1px solid var(--o50);
  gap:.8rem;
  transition:background .15s;
}
.week-row:last-child{border-bottom:none}
.week-row:hover{background:var(--o50)}
.week-row.today{
  background:linear-gradient(90deg,rgba(0,119,182,.06),transparent);
  border-left:3px solid var(--o500);
}
.week-day{min-width:80px}
.week-day-name{font-size:.8rem;font-weight:700;color:var(--text);text-transform:capitalize}
.week-day-date{font-size:.72rem;color:var(--text-l);margin-top:.1rem}
.week-tides-row{
  display:flex;gap:.5rem;flex:1;flex-wrap:wrap;
}
.wt-item{
  display:flex;align-items:center;gap:.35rem;
  font-size:.75rem;color:var(--text-m);
  white-space:nowrap;
  background:var(--bg);padding:.25rem .6rem;
  border-radius:20px;border:1px solid var(--border);
}
.wt-type{font-weight:800;font-size:.62rem;letter-spacing:.05em}
.wt-type.pm{color:var(--o700)}.wt-type.bm{color:var(--teal)}
.wt-h{font-weight:600;color:var(--text-l);font-size:.7rem}
.wt-c{
  background:var(--o700);color:#fff;
  font-size:.6rem;font-weight:800;
  padding:.12rem .45rem;border-radius:10px;
  margin-left:.15rem;
}


/* ══════════════════════════════════════════════
   SIDEBAR CARDS
══════════════════════════════════════════════ */
.port-info-card,
.coeff-card,
.info-card{
  background:var(--white);border-radius:var(--r-lg);
  border:1px solid var(--border);
  padding:1.2rem 1.3rem;
  box-shadow:var(--sh-sm);
  transition:box-shadow .25s;
}
.port-info-card:hover,.coeff-card:hover,.info-card:hover{box-shadow:var(--sh-md)}
.port-info-card h3,.coeff-card h3,.info-card h3{
  font-size:.85rem;font-weight:800;color:var(--o900);
  margin-bottom:.75rem;letter-spacing:-.01em;
}

/* Port info rows */
.pi-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.32rem 0;border-bottom:1px solid var(--o50);
  font-size:.74rem;
}
.pi-row:last-child{border-bottom:none}
.pi-label{color:var(--text-l);font-weight:500}
.pi-val{color:var(--text);font-weight:700;text-align:right}

/* Échelle coefficients */
.coeff-scale{display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem}
.cs-row{display:flex;align-items:center;gap:.6rem}
.cs-label{font-size:.7rem;color:var(--text-l);font-weight:600;min-width:76px}
.cs-bar{height:7px;border-radius:4px;transition:width .4s}
.cs-range{font-size:.65rem;color:var(--text-l);font-weight:700;white-space:nowrap;margin-left:auto}

/* Info card */
.info-card p{font-size:.79rem;color:var(--text-m);line-height:1.6;margin-bottom:.55rem}
.info-card p:last-child{margin-bottom:0}
.info-card a{color:var(--o700);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.info-card a:hover{color:var(--o900)}


/* ══════════════════════════════════════════════
   ESPACES PUBLICITAIRES
══════════════════════════════════════════════ */
.ad-wrap{
  text-align:center;
}
.ad-label{
  font-size:.6rem;color:var(--text-l);
  text-transform:uppercase;letter-spacing:.08em;
  display:block;margin-bottom:.25rem;opacity:.7;
}
.ad-slot{
  background:var(--o50);
  border:1.5px dashed var(--o300);
  border-radius:var(--r-md);
  padding:1rem;
  text-align:center;
  font-size:.75rem;color:var(--text-l);
  font-weight:500;
}
.ad-rect{min-height:70px;display:flex;align-items:center;justify-content:center;gap:.5rem}
.ad-square{width:100%;min-height:250px;display:flex;align-items:center;justify-content:center}
.ad-banner{min-height:60px;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-direction:column}

/* AdSense ins tags */
ins.adsbygoogle{display:block}


/* ══════════════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════════════ */
#cookieBanner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:rgba(0,63,114,.97);
  color:rgba(255,255,255,.82);
  padding:1rem 1.5rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;line-height:1.5;
  border-top:2px solid var(--o500);
  box-shadow:0 -4px 20px rgba(0,0,0,.2);
}
#cookieBanner p{flex:1;margin:0}
.ck-btn{
  background:linear-gradient(135deg,var(--o700),var(--o500));
  color:#fff;border:none;padding:.45rem 1.1rem;border-radius:8px;
  font-size:.78rem;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:all .2s;
}
.ck-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,119,182,.4)}
.ck-btn-r{
  background:transparent;color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.25);padding:.45rem 1rem;
  border-radius:8px;font-size:.78rem;cursor:pointer;
  font-family:inherit;transition:all .2s;
}
.ck-btn-r:hover{border-color:rgba(255,255,255,.5);color:#fff}


/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer{
  background:linear-gradient(135deg,var(--o900),#002850);
  color:rgba(255,255,255,.6);
  text-align:center;padding:2.2rem 1.5rem;margin-top:2.5rem;
  font-size:.77rem;line-height:1.9;
}
footer strong{color:#fff;font-weight:700}
footer a{color:var(--o300);font-weight:500;transition:color .2s}
footer a:hover{color:#fff}
.footer-wave{font-size:1.4rem;display:block;margin-bottom:.6rem;opacity:.5}


/* ══════════════════════════════════════════════
   MOBILE STICKY AD
══════════════════════════════════════════════ */
.mobile-sticky-ad{
  display:none;position:fixed;bottom:0;left:0;right:0;
  height:58px;z-index:100;
  background:var(--o50);
  border-top:1.5px dashed var(--o300);
  align-items:center;justify-content:center;
  font-size:.68rem;color:var(--text-l);
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;
}


/* ══════════════════════════════════════════════
   ANIMATIONS GLOBALES
══════════════════════════════════════════════ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}
.today-card   {animation:fadeUp .45s ease both .05s}
.chart-card   {animation:fadeUp .45s ease both .12s}
.week-card    {animation:fadeUp .45s ease both .18s}
.port-bar     {animation:fadeUp .45s ease both 0s}
.port-info-card{animation:fadeUp .45s ease both .08s}
.coeff-card   {animation:fadeUp .45s ease both .14s}
.info-card    {animation:fadeUp .45s ease both .2s}


/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:768px){
  .container{grid-template-columns:1fr;padding:1rem}
  .side-col{position:static}
  .today-tides{grid-template-columns:repeat(2,1fr)}
  .tide-item:nth-child(2){border-right:none}
  .header-nav{display:none}
  .port-bar{flex-direction:column;align-items:stretch;gap:.6rem}
  .port-select,.date-input{width:100%}
  .refresh-btn{width:100%;text-align:center;padding:.65rem}
  .ad-square{width:100%;min-height:160px}
  body{padding-bottom:58px}
  .mobile-sticky-ad{display:flex!important}
  .week-row{flex-wrap:wrap;padding:.75rem 1rem}
  .week-tides-row{width:100%}
}
@media(max-width:480px){
  .tide-time{font-size:1.4rem}
  .today-header{padding:1.1rem 1.2rem}
  .today-title{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ══════════════════════════════════════════════
   SITE-NAV — Barre de navigation secondaire
══════════════════════════════════════════════ */
.site-nav{
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,119,182,.06);
  position:sticky;top:0;z-index:100;
}
.site-nav-inner{
  max-width:1100px;margin:0 auto;
  padding:.4rem 1.5rem;
  display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;
}
.site-nav-item{position:relative}
.site-nav-item>a{
  display:block;
  color:var(--text-m);font-size:.8rem;font-weight:600;
  padding:.5rem .8rem;border-radius:var(--r-sm);
  transition:all .2s;white-space:nowrap;
}
.site-nav-item>a:hover{background:var(--o50);color:var(--o700)}
.site-nav-item>a.has-drop::after{content:'▾';margin-left:.3rem;font-size:.7rem;opacity:.6}
.site-nav-drop{
  position:absolute;top:calc(100% + 4px);left:0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
  min-width:200px;padding:.5rem;z-index:200;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .2s;
}
.site-nav-item:hover .site-nav-drop,
.site-nav-item:focus-within .site-nav-drop{
  opacity:1;visibility:visible;transform:translateY(0);
}
.site-nav-drop a{
  display:block;color:var(--text-m);font-size:.78rem;font-weight:500;
  padding:.4rem .75rem;border-radius:8px;transition:all .15s;
}
.site-nav-drop a:hover{background:var(--o50);color:var(--o700)}
.drop-section{
  display:block;font-size:.65rem;font-weight:800;
  color:var(--text-l);text-transform:uppercase;letter-spacing:.1em;
  padding:.5rem .75rem .2rem;
}
@media(max-width:768px){.site-nav{display:none}}


/* ══════════════════════════════════════════════
   STYLES SOUS-PAGES (guides, pêche à pied, etc.)
══════════════════════════════════════════════ */
.site-header{
  background:linear-gradient(150deg,var(--o900),var(--o700));
  color:#fff;padding:0;
}
.site-header-inner{
  max-width:1100px;margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.site-logo{display:flex;align-items:center;gap:.65rem;color:#fff}
.site-logo:hover{color:rgba(255,255,255,.85)}
.site-logo-wave{font-size:1.7rem}
.site-logo-text h2{font-size:.95rem;font-weight:800;letter-spacing:-.02em}
.site-logo-text p{font-size:.66rem;opacity:.75;margin-top:.05rem}
.site-header-btn{
  font-size:.75rem;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.3);
  padding:.35rem .85rem;border-radius:20px;
  transition:all .2s;
}
.site-header-btn:hover{background:rgba(255,255,255,.15);color:#fff}


/* ══════════════════════════════════════════════
   PAGE DE CONTENU — Sous-pages générées
   (wrappées dans .page-wrap par site.js)
══════════════════════════════════════════════ */

/* Wrapper principal */
.page-wrap{
  max-width:860px;
  margin:0 auto;
  padding:2rem 1.5rem 3rem;
}

/* Article de contenu */
article{
  background:var(--white);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:var(--sh-md);
  padding:2rem 2.2rem;
  line-height:1.75;
  color:var(--text);
}

/* Titres dans l'article */
article h1{
  font-size:1.7rem;
  font-weight:800;
  color:var(--o900);
  letter-spacing:-.03em;
  line-height:1.2;
  margin-bottom:1rem;
  padding-bottom:.75rem;
  border-bottom:2px solid var(--o100);
}
article h2{
  font-size:1.15rem;
  font-weight:800;
  color:var(--o900);
  margin:1.8rem 0 .75rem;
  padding-left:.75rem;
  border-left:3px solid var(--o500);
  line-height:1.3;
}
article h3{
  font-size:.95rem;
  font-weight:700;
  color:var(--text-m);
  margin:1.2rem 0 .5rem;
  display:flex;align-items:center;gap:.4rem;
}
article h3::before{
  content:'';display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--o500);flex-shrink:0;
}
article h4{
  font-size:.88rem;font-weight:700;
  color:var(--text-m);margin:1rem 0 .4rem;
}

/* Paragraphes */
article p{
  font-size:.9rem;
  color:var(--text-m);
  line-height:1.75;
  margin-bottom:.9rem;
}
article p:last-child{margin-bottom:0}

/* Premier paragraphe : légèrement mis en valeur */
article>p:first-of-type{
  font-size:.95rem;
  color:var(--text);
  background:var(--o50);
  border-left:3px solid var(--o500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.75rem 1rem;
  margin-bottom:1.2rem;
}

/* Listes */
article ul,
article ol{
  margin:.5rem 0 1rem 1.2rem;
  display:flex;flex-direction:column;gap:.3rem;
}
article li{
  font-size:.88rem;
  color:var(--text-m);
  line-height:1.65;
  padding-left:.2rem;
}
article ul li::marker{color:var(--o500);font-size:.8em}

/* Liens dans l'article */
article a{
  color:var(--o700);
  text-decoration:none;
  font-weight:600;
  border-bottom:1.5px solid var(--o100);
  padding-bottom:.05em;
  transition:color .15s,border-color .15s;
}
article a:hover{
  color:var(--o900);
  border-bottom-color:var(--o500);
}

/* Strong / em */
article strong{color:var(--text);font-weight:700}
article em{color:var(--text-m);font-style:italic}

/* Tables dans les articles */
article table{
  width:100%;border-collapse:collapse;
  font-size:.83rem;margin:1rem 0 1.2rem;
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:var(--sh-sm);
}
article table thead tr{background:var(--o700);color:#fff}
article table thead th{
  padding:.6rem .9rem;text-align:left;
  font-weight:700;font-size:.75rem;
  letter-spacing:.04em;text-transform:uppercase;
}
article table tbody tr{border-bottom:1px solid var(--o50)}
article table tbody tr:nth-child(even){background:rgba(0,119,182,.03)}
article table tbody tr:hover{background:var(--o50)}
article table td{padding:.6rem .9rem;vertical-align:top;color:var(--text-m)}

/* Blockquote / encart info */
article blockquote{
  background:rgba(0,119,182,.06);
  border-left:3px solid var(--o500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.85rem 1.1rem;
  margin:1rem 0;
  font-size:.86rem;color:var(--text-m);
  font-style:italic;
}

/* Nav aria interne (liens associés) */
article nav[aria-label]{
  margin-top:1.8rem;
  padding-top:1.2rem;
  border-top:1px solid var(--o50);
}
article nav[aria-label] ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.4rem;
}
article nav[aria-label] li::marker{display:none}
article nav[aria-label] a{
  display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:600;
  color:var(--o700);
  background:var(--o50);
  border:1px solid var(--border);
  border-bottom:1.5px solid var(--border);
  border-radius:var(--r-sm);
  padding:.55rem .9rem;
  transition:all .2s;
}
article nav[aria-label] a:hover{
  background:var(--o100);
  border-color:var(--o300);
  color:var(--o900);
  transform:translateX(3px);
}
article nav[aria-label] a::before{content:'→';opacity:.5;font-size:.75rem}

/* Bandeau pub dans .page-wrap */
.page-wrap .ad-wrap{
  margin:1.5rem 0;
  text-align:center;
}

/* Responsive */
@media(max-width:600px){
  .page-wrap{padding:1rem 1rem 2rem}
  article{padding:1.3rem 1.2rem}
  article h1{font-size:1.35rem}
  article h2{font-size:1rem}
}