/* =========================================================
   MONTREUIL FOOTBALL CLUB — STYLE
   Palette : vert blason #4C9484 / accent #6FE3B4 / encre #0B0F0D
   Display : Big Shoulders Display — Accent serif : Fraunces — Texte : Barlow
   Signature : griffures diagonales (motif panthère) + découpe en biais du hero
   ========================================================= */

:root{
  --green: #4C9484;
  --green-deep: #1D4A3E;
  --accent: #6FE3B4;
  --ink: #0B0F0D;
  --panel: #131916;
  --panel-2: #1A2119;
  --white: #F2F6F3;
  --mist: #A4B6AE;
  --gold: #C9A24B;
  --radius: 16px;
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:'Barlow', sans-serif;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  letter-spacing:.5px;
  line-height:.95;
  margin:0;
  text-transform:uppercase;
}

p{ margin:0; color:var(--mist); line-height:1.6; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  font-size:.78rem; color:var(--accent); margin:0 0 .6rem;
}
.eyebrow--light{ color:var(--green-deep); }
.claw{ width:15px; height:15px; flex:none; }
.claw path{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.claw--dark{ color:var(--green-deep); }

/* =============== HEADER / BANDE VERTE =============== */
.topbar{
  position:sticky; top:0; z-index:500;
  background:linear-gradient(180deg, var(--green) 0%, #3d7d6d 100%);
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}
.topbar__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:.6rem 1.25rem;
}
.burger{
  justify-self:start;
  width:42px; height:42px; border-radius:50%;
  background:rgba(11,15,13,.15); border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .2s;
}
.burger:hover{ background:rgba(11,15,13,.28); }
.burger span{ width:20px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.topbar__crest{ justify-self:center; }
.topbar__crest img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(11,15,13,.25);
  transition:transform .3s var(--ease);
}
.topbar__crest:hover img{ transform:scale(1.08) rotate(-4deg); }

.topbar__cta{
  justify-self:end;
  background:var(--ink); color:var(--white);
  font-weight:700; font-size:.8rem; letter-spacing:1px; text-transform:uppercase;
  padding:.6rem 1.2rem; border-radius:100px;
  transition:background .2s, transform .2s;
}
.topbar__cta:hover{ background:#000; transform:translateY(-1px); }

/* =============== MENU LATÉRAL =============== */
.offcanvas{
  position:fixed; top:0; left:0; bottom:0; width:min(320px,82vw);
  background:var(--panel); z-index:900;
  transform:translateX(-105%); transition:transform .4s var(--ease);
  padding:6.5rem 2rem 2rem; display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid rgba(255,255,255,.06);
}
.offcanvas.open{ transform:translateX(0); }
.offcanvas ul{ display:flex; flex-direction:column; gap:.4rem; }
.offcanvas a{
  display:block; padding:.75rem 0; font-family:'Big Shoulders Display'; font-weight:700; font-size:1.35rem;
  text-transform:uppercase; color:var(--white); border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s, padding-left .2s;
}
.offcanvas a:hover{ color:var(--accent); padding-left:.4rem; }
.offcanvas a.active{ color:var(--accent); }

.offcanvas details{ border-bottom:1px solid rgba(255,255,255,.06); }
.offcanvas summary{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  padding:.75rem 0; font-family:'Big Shoulders Display'; font-weight:700; font-size:1.35rem;
  text-transform:uppercase; color:var(--white); list-style:none; transition:color .2s;
}
.offcanvas summary::-webkit-details-marker{ display:none; }
.offcanvas summary::after{
  content:'+'; font-size:1.4rem; color:var(--accent); transition:transform .25s var(--ease); line-height:1;
}
.offcanvas details[open] summary::after{ transform:rotate(45deg); }
.offcanvas summary:hover{ color:var(--accent); }
.offcanvas details ul{ gap:0; padding-bottom:.5rem; }
.offcanvas details a{
  font-family:'Barlow'; font-weight:600; font-size:.95rem; text-transform:none;
  padding:.55rem 0 .55rem .9rem; border-bottom:none; color:var(--mist);
}
.offcanvas details a:hover{ color:var(--accent); padding-left:1.2rem; }
.offcanvas__socials{ display:flex; gap:.75rem; }
.offcanvas__socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  transition:border-color .2s, color .2s;
}
.offcanvas__socials a:hover{ border-color:var(--accent); color:var(--accent); }
.offcanvas__socials svg{ width:17px; height:17px; }
.offcanvas__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:890;
  opacity:0; visibility:hidden; transition:opacity .3s;
}
.offcanvas__backdrop.open{ opacity:1; visibility:visible; }

/* =============== BANNIÈRE DE PAGE (pages intérieures) =============== */
.page-banner{
  position:relative; overflow:hidden;
  min-height:260px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:7rem 1.5rem 3.5rem;
  background:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
    url("assets/montreuil ciel.webp") center center / cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.page-banner__crest{
  display:none;
}
.page-banner__inner{ position:relative; z-index:1; }
.page-banner .eyebrow{ justify-content:center; }
.page-banner h1{ font-size:clamp(2.1rem,5vw,3.4rem); color:var(--white); }
.page-banner p.page-banner__sub{ margin-top:.8rem; font-size:1.05rem; max-width:52ch; margin-left:auto; margin-right:auto; }

.page-banner--actualites{
  background-image:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), url("assets/tifo-montreuillois.png");
}
.page-banner--equipes{
  background-image:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), url("assets/ecoledefoot.png");
}
.page-banner--effectif{
  background-image:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), url("assets/remerciement.png");
}
.page-banner--calendrier{
  background-image:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), url("assets/tiforouge.png");
}
.page-banner--club{
  background-image:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), url("assets/remerciement.png");
}
.page-banner--boutique{
  background-image:none;
  background-color:var(--panel);
}
.page-banner--stade{
  background-image:linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), url("assets/stade.webp");
}
/* =============== HERO (deux colonnes, découpe en biais) =============== */
.hero{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:2.5rem;
  padding:6rem clamp(1.5rem,5vw,5rem) 8rem;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.62) 100%),
    url("assets/montreuil ciel.webp") center center / cover no-repeat;
  overflow:hidden;
}
.hero h1{ font-size:clamp(2.8rem, 6.2vw, 5.4rem); color:var(--white); }
.hero h1 span{ color:var(--accent); }
.hero__tagline{ margin-top:1.1rem; font-size:1.2rem; max-width:34ch; }
.hero__actions{ margin-top:2.3rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero__clawcut{
  position:absolute; left:0; right:0; bottom:0; height:90px;
  background:var(--ink);
  clip-path:polygon(0 100%, 100% 100%, 100% 35%, 62% 100%, 40% 20%, 0 100%);
  background:var(--panel);
}

.btn{
  padding:.95rem 1.9rem; border-radius:100px; font-weight:700; font-size:.9rem;
  letter-spacing:.5px; text-transform:uppercase; transition:transform .2s, background .2s;
  display:inline-block;
}
.btn--primary{ background:var(--accent); color:var(--ink); }
.btn--primary:hover{ background:#8CF0C7; transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid rgba(255,255,255,.3); color:var(--white); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ transform:translateY(-2px); }

/* Carte "prochain match" */
.hero__col--card{ display:flex; justify-content:center; }
.matchcard{
  width:min(400px,100%);
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:1.7rem 1.8rem;
  box-shadow:0 25px 60px rgba(0,0,0,.45);
}
.matchcard__label{ font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.matchcard__teams{ display:flex; align-items:center; justify-content:space-between; margin-top:1.1rem; gap:.5rem; }
.matchcard__team{ display:flex; flex-direction:column; align-items:center; gap:.55rem; width:100px; }
.matchcard__team img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.matchcard__team-badge{
  width:46px; height:46px; border-radius:50%; background:var(--green-deep);
  color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800;
}
.matchcard__team strong{ font-size:.82rem; font-weight:600; text-align:center; }
.matchcard__vs{ display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.matchcard__vs > span{ font-size:.75rem; color:var(--mist); letter-spacing:2px; }
.matchcard__countdown{ font-family:'Barlow', sans-serif; font-style:normal; font-weight:700; font-size:1.7rem; letter-spacing:0; color:var(--white); }
.matchcard__countdown small{ font-size:.65em; font-style:normal; color:var(--mist); margin-right:.3em; }
.matchcard__meta{ text-align:center; margin-top:1.1rem; font-size:.82rem; color:var(--mist); border-top:1px solid rgba(255,255,255,.08); padding-top:.9rem; }

/* =============== BANDEAU CHIFFRES =============== */
.stats{ background:var(--panel); padding:3rem 1.5rem; }
.stats__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center;
}
.stat__num{
  display:block; font-family:'Big Shoulders Display', sans-serif; font-style:normal; font-weight:600; letter-spacing:1px;
  font-size:clamp(2rem,4.5vw,3.2rem); color:var(--accent);
}
.stat__label{ font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--mist); font-weight:600; }

/* =============== TICKER =============== */
.ticker{ background:var(--green); overflow:hidden; padding:.65rem 0; }
.ticker__track{
  display:flex; gap:3rem; white-space:nowrap; width:max-content;
  animation:scrollLeft 26s linear infinite;
}
.ticker__track span{ font-weight:800; font-size:.8rem; letter-spacing:1.5px; color:var(--ink); }
@keyframes scrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =============== SECTIONS GÉNÉRIQUES =============== */
.section{ padding:6.5rem 1.5rem; max-width:var(--maxw); margin:0 auto; }
.section--dark{ max-width:none; background:var(--panel); }
.section--dark > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.section__head{ text-align:center; margin-bottom:3.2rem; }
.section__head .eyebrow{ justify-content:center; }
.section__head h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:var(--white); }

/* =============== NEWS (grille asymétrique) =============== */
.news-grid{ 
  display:grid; 
  grid-template-columns:1.3fr 1fr; 
  gap:1.8rem; 
}

.news-grid--full{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); 
  gap:1.8rem; 
}

.news-grid--full .news-card--latest{ order:-1; }

.news-grid__side{ 
  display:flex; 
  flex-direction:column; 
  gap:1.8rem; 
}

.news-card{
  background:var(--panel-2); 
  border-radius:var(--radius); 
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06); 
  transition:transform .3s var(--ease);
  display:flex; 
  flex-direction:column;
}

.news-card:hover{ 
  transform:translateY(-6px); 
}

.news-card__img{
  width:100%;
  overflow:hidden;
}

.news-card__img img,
.news-card__img video{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
}

.news-card__body{ 
  padding:1.5rem; 
}

.news-card--feature .news-card__body{ 
  padding:1.8rem; 
}

.news-card__date{ 
  font-size:.72rem; 
  letter-spacing:1.5px; 
  text-transform:uppercase; 
  color:var(--accent); 
  font-weight:700; 
}

.news-card__body h3{ 
  font-size:1.3rem; 
  color:var(--white); 
  margin:.7rem 0 .7rem; 
  font-family:'Big Shoulders Display'; 
}

.news-card--feature .news-card__body h3{ 
  font-size:1.8rem; 
}

.news-card__body p{ 
  font-size:.92rem; 
}

/* =============== EFFECTIF / CAROUSEL (photos agrandies) =============== */
.squad-carousel{ overflow:hidden; margin-top:-1rem; }
.squad-track{
  display:flex; gap:1.6rem; width:max-content;
  animation:scrollLeft 46s linear infinite;
}
.squad-carousel:hover .squad-track{ animation-play-state:paused; }
.player-card{ width:230px; flex:0 0 auto; }
.player-photo{
  position:relative; width:230px; height:300px; border-radius:var(--radius);
  overflow:hidden; background:linear-gradient(160deg,#1c3a30,#0d1f19);
  border:1px solid rgba(111,227,180,.2);
}
.player-photo img{ width:100%; height:100%; object-fit:cover; display:none; }
.player-photo.has-photo img{ display:block; }
.player-photo:not(.has-photo)::before{
  content:attr(data-initial);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  font-size:5.5rem; color:rgba(111,227,180,.3);
}
.player-photo__caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1rem .9rem;
  background:linear-gradient(0deg, rgba(0,0,0,.82) 10%, transparent 100%);
}
.player-card__name{ font-family:'Big Shoulders Display'; font-weight:700; font-size:1.2rem; color:var(--white); text-transform:uppercase; }
.player-card__pos{ font-family:'Fraunces', serif; font-style:italic; font-size:.85rem; color:var(--accent); }

/* =============== EFFECTIF / ÉDUCATEURS / STAFF — GRILLE COMPLÈTE =============== */
.squad-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.8rem;
}
.squad-grid .player-card{ width:auto; }
.squad-grid .player-photo{ width:100%; height:280px; }

/* =============== NOS ÉQUIPES =============== */
.section--compact{ padding-top:2rem; padding-bottom:0; }
.pole-links{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.team-pole + .team-pole{ margin-top:4rem; }
.team-pole .section-title{ margin-bottom:1.5rem; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.6rem; }
.team-card{
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:1.9rem; transition:transform .3s var(--ease), border-color .3s;
}
.team-card:hover{ transform:translateY(-5px); border-color:rgba(111,227,180,.3); }
.team-card__name{ font-size:1.6rem; color:var(--white); }
.team-card__league{ font-family:'Fraunces', serif; font-style:italic; color:var(--accent); font-size:.9rem; margin:.35rem 0 1.2rem; }
.team-card__meta{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--mist); border-top:1px dashed rgba(255,255,255,.1); padding-top:.9rem; }
.team-card__meta strong{ color:var(--white); font-weight:600; }

/* =============== ORGANIGRAMMES DES PÔLES =============== */
.org-chart{ max-width:var(--maxw); margin:0 auto; }
.org-chart__top{ display:flex; justify-content:center; position:relative; padding-bottom:3rem; }
.org-chart__top::after{ content:''; position:absolute; left:50%; bottom:0; width:1px; height:2rem; background:rgba(111,227,180,.45); }
.org-chart__groups{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4rem 1.5rem; position:relative; }
.org-chart__groups::before{ content:''; position:absolute; top:-1.5rem; left:16.666%; right:16.666%; height:1px; background:rgba(111,227,180,.45); }
.org-group{ position:relative; padding-top:1.5rem; }
.org-group::before{ content:''; position:absolute; top:0; left:50%; width:1px; height:1.5rem; background:rgba(111,227,180,.45); }
.org-group h2{ color:var(--accent); font-size:1.25rem; text-align:center; margin-bottom:.8rem; }
.org-group__nodes{ display:grid; gap:.65rem; }
.org-node{ display:flex; flex-direction:column; gap:.2rem; min-height:76px; justify-content:center; padding:.85rem 1rem; text-align:center; background:linear-gradient(145deg,rgba(76,148,132,.3),var(--panel)); border:1px solid rgba(111,227,180,.25); border-radius:var(--radius); }
.org-node--lead{ width:min(100%,300px); background:linear-gradient(145deg,rgba(111,227,180,.35),var(--panel)); border-color:rgba(111,227,180,.5); }
.org-node__role{ color:var(--mist); font-size:.78rem; }
.org-node strong{ color:var(--white); font-size:1rem; }

.elite-page{ background:#020b08; color:var(--white); padding:0 0 2.5rem; }
.elite-hero{ display:grid; grid-template-columns:240px minmax(0,1fr); align-items:center; gap:2rem; max-width:1600px; margin:0 auto; padding:2.2rem 3.2rem 0; min-height:540px; }
.elite-hero__crest{ position:relative; display:flex; align-items:center; justify-content:center; width:210px; height:210px; margin:0 auto; border-radius:50%; border:6px solid rgba(19,232,130,.9); background:radial-gradient(circle at center, rgba(0,0,0,.4) 0, rgba(0,0,0,.8) 60%, rgba(0,0,0,.95) 100%); box-shadow:0 0 30px rgba(24,231,140,.25); }
.elite-hero__crest img{ width:72%; height:72%; object-fit:contain; filter:drop-shadow(0 0 14px rgba(24,231,140,.4)); }
.elite-hero__crest-text{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Big Shoulders Display'; color:var(--white); text-transform:uppercase; font-weight:800; letter-spacing:2px; }
.elite-hero__crest-text span{ position:absolute; font-size:1.28rem; }
.elite-hero__crest-text span:first-child{ top:32px; }
.elite-hero__crest-text span:last-child{ bottom:30px; }
.elite-hero__crest-text small{ position:absolute; font-size:1.15rem; color:var(--accent); }
.elite-hero__crest-text small:first-of-type{ left:28px; top:75px; }
.elite-hero__crest-text small:last-of-type{ right:30px; bottom:72px; }
.elite-hero__content{ position:relative; text-align:center; padding-top:1rem; }
.elite-hero__content h1{ margin:0; font-family:'Big Shoulders Display'; font-size:clamp(2.2rem,4vw,6rem); letter-spacing:2px; line-height:.9; color:var(--white); }
.elite-hero__title{ margin-top:1rem; font-family:'Big Shoulders Display'; font-size:clamp(3.4rem,8vw,8.8rem); letter-spacing:2px; line-height:.74; color:var(--white); text-transform:uppercase; font-weight:900; }
.elite-hero__tag{ display:inline-block; margin-top:1rem; padding:0 1rem; background:linear-gradient(90deg, rgba(28,189,122,.7), rgba(28,189,122,.2)); color:var(--white); font-family:'Big Shoulders Display'; font-weight:800; font-size:clamp(2rem,4vw,4.2rem); letter-spacing:2px; text-transform:uppercase; border-radius:8px; box-shadow:0 10px 30px rgba(17,189,118,.18); }
.elite-hero__sub{ margin-top:1rem; font-family:'Big Shoulders Display'; font-size:clamp(1.4rem,2.2vw,2.6rem); letter-spacing:4px; color:var(--white); text-transform:uppercase; }
.elite-hero__season{ margin-top:.2rem; font-size:1.05rem; letter-spacing:2px; color:rgba(255,255,255,.8); text-transform:uppercase; }
.elite-hero__lead{ display:inline-flex; align-items:center; gap:1rem; margin-top:2rem; padding:1rem 1.6rem; min-width:380px; border:2px solid rgba(34,243,157,.8); border-radius:12px; background:rgba(25,113,71,.18); box-shadow:0 0 0 1px rgba(23,196,118,.3) inset; }
.elite-hero__lead-icon{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(18,252,138,.2); color:var(--accent); font-size:1.5rem; }
.elite-hero__lead span{ display:block; color:var(--white); font-size:0.72rem; letter-spacing:2px; }
.elite-hero__lead strong{ display:block; margin-top:.2rem; font-family:'Big Shoulders Display'; font-size:clamp(1.6rem,2vw,2.5rem); letter-spacing:1px; }
.elite-chart{ max-width:1600px; margin:0 auto; padding:0 1rem 2rem; }
.elite-chart__row{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(180px, 1fr)); gap:1.2rem; justify-content:center; margin-top:1.4rem; }
.elite-chart__row--mid{ grid-template-columns:repeat(6, minmax(140px, 1fr)); }
.elite-chart__row::before{ content:''; position:absolute; top:-0.8rem; left:50%; transform:translateX(-50%); width:78%; height:2px; background:rgba(34,243,157,.7); }
.elite-chart__row--top::before{ width:58%; }
.elite-card{ position:relative; min-height:110px; background:linear-gradient(180deg, rgba(26,110,88,.72), rgba(5,46,35,.8)); border:2px solid rgba(29,232,143,.85); border-radius:12px; box-shadow:0 0 20px rgba(18,227,131,.12); padding:1rem 0.8rem 0.9rem; text-align:center; overflow:hidden; }
.elite-card::before{ content:''; position:absolute; left:50%; top:-1.1rem; width:1px; height:1.1rem; background:rgba(29,232,143,.8); }
.elite-card--main{ min-height:135px; }
.elite-card__avatar{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; margin:0 auto .7rem; background:rgba(15,255,150,.1); border:2px solid rgba(15,255,150,.45); color:var(--accent); font-size:1.3rem; }
.elite-card__text h3{ margin:0; font-family:'Big Shoulders Display'; font-size:clamp(1.4rem,2vw,2.4rem); line-height:1; letter-spacing:1px; color:var(--white); }
.elite-card__text p{ margin:.35rem 0 .2rem; font-size:1rem; color:var(--white); }
.elite-card__text span{ color:rgba(255,255,255,.7); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; }
.elite-chart__pitch{ display:flex; align-items:center; justify-content:center; margin-top:1.8rem; padding:1.2rem 0 0; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:3px; font-size:0.9rem; }
.elite-chart__pitch::before, .elite-chart__pitch::after{ content:''; display:block; width:100%; max-width:180px; height:2px; background:linear-gradient(90deg, transparent, rgba(34,243,157,.8), transparent); }
.elite-chart__pitch span{ margin:0 1.2rem; }

@media (max-width: 1200px){
  .elite-hero{ grid-template-columns:1fr; padding-top:1.5rem; }
  .elite-hero__crest{ width:170px; height:170px; }
  .elite-hero__content{ padding-top:0; }
}
@media (max-width: 700px){
  .elite-hero{ padding-left:1rem; padding-right:1rem; }
  .elite-chart__row{ grid-template-columns:repeat(2, minmax(140px, 1fr)); }
  .elite-chart__row--mid{ grid-template-columns:repeat(2, minmax(140px, 1fr)); }
  .elite-hero__lead{ min-width:0; width:100%; }
  .elite-hero__tag{ font-size:2.2rem; }
  .elite-hero__title{ font-size:3.2rem; }
}
@media (max-width: 480px){
  .elite-chart__row, .elite-chart__row--mid{ grid-template-columns:1fr; }
  .elite-hero__lead{ gap:.7rem; padding:1rem; }
  .elite-card{ min-height:100px; }
}

/* =============== CONTACT =============== */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; margin-bottom:2.5rem; }
.contact-card{
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:1.9rem; text-align:center;
}
.contact-card h3{ font-size:1.05rem; color:var(--white); margin-bottom:.6rem; text-transform:uppercase; }
.contact-card p, .contact-card a{ font-size:.92rem; }
.contact-card a:hover{ color:var(--accent); }

/* =============== VALEURS (À PROPOS) =============== */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem; margin-top:2.5rem; }
.value-card{ background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:1.9rem; }
.value-card h3{ font-size:1.15rem; color:var(--accent); margin-bottom:.6rem; }
.value-card p{ font-size:.92rem; }

/* =============== MUSÉE DU CLUB =============== */
.museum-intro{
  display:block; max-width:var(--maxw);
}
.museum-intro__copy{ max-width:72ch; margin:0 auto; }
.museum-intro h2,.museum-event h2,.museum-closing h2{ font-size:clamp(2rem,4vw,3.4rem); color:var(--white); margin-bottom:1.2rem; }
.museum-intro__copy > p:not(.eyebrow),.museum-event__body > p:not(.eyebrow),.museum-closing > p:not(.eyebrow){ font-size:1.02rem; }
.museum-intro__note{ margin-top:1rem; padding-left:1rem; border-left:2px solid var(--gold); color:var(--mist); font-size:.88rem !important; }
.museum-photo{ margin:0; position:relative; }
.museum-photo img{ width:100%; height:100%; min-height:210px; object-fit:cover; border:1px solid rgba(111,227,180,.2); border-radius:4px; box-shadow:12px 12px 0 rgba(29,74,62,.35); }
.museum-photo figcaption{ margin-top:.75rem; color:var(--mist); font-family:'Fraunces',serif; font-size:.82rem; font-style:italic; line-height:1.4; }
.museum-photo--intro img{ min-height:360px; max-height:460px; transform:rotate(2deg); }
.museum-timeline{ max-width:var(--maxw); position:relative; }
.museum-timeline::before{ content:''; position:absolute; top:0; bottom:0; left:12px; width:1px; background:linear-gradient(var(--accent),rgba(111,227,180,.05)); }
.museum-event{ width:100%; position:relative; padding:2rem 0 2rem 3rem; }
.museum-event::before{ content:''; position:absolute; top:2.7rem; width:12px; height:12px; background:var(--accent); border:3px solid var(--ink); border-radius:50%; box-shadow:0 0 0 1px var(--accent); }
.museum-event::before{ left:6px; }
.museum-event--wide{ width:100%; padding:2.5rem 3rem; text-align:left !important; }
.museum-event--wide::before{ left:6px !important; right:auto !important; }
.museum-event__date{ font-family:'Big Shoulders Display',sans-serif; font-size:1.15rem; letter-spacing:2px; color:var(--accent); margin-bottom:.65rem; }
.museum-event__body h2{ font-size:clamp(1.7rem,3vw,2.6rem); }
.museum-event__link{ display:inline-block; margin-top:1rem; color:var(--accent); font-weight:700; }
.museum-event__link:hover{ color:var(--white); }
.museum-gallery{ display:none; }
.museum-gallery--left{ margin-right:auto; transform:rotate(-1deg); }
.museum-gallery--right{ margin-left:auto; transform:rotate(1deg); }
.museum-gallery .museum-photo{ flex:1; }
.museum-gallery .museum-photo:nth-child(2){ margin-top:2.5rem; }
.museum-gallery .museum-photo img{ min-height:180px; max-height:280px; }
.museum-closing{ max-width:var(--maxw); text-align:center; background:linear-gradient(145deg,var(--panel),rgba(29,74,62,.5)); border-top:1px solid rgba(111,227,180,.2); border-bottom:1px solid rgba(111,227,180,.2); }
.museum-closing > p{ max-width:60ch; margin:0 auto; }
.museum-sources{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1.3rem; margin-top:2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; }
.museum-sources span{ color:var(--mist); width:100%; text-transform:uppercase; letter-spacing:1.5px; }
.museum-sources a{ color:var(--accent); }
.museum-sources a:hover{ color:var(--white); }
.museum-sources{ background:transparent; border:0; text-align:center; padding-top:1rem; }
.museum-sources .eyebrow{ justify-content:center; }
.museum-sources > div{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1.3rem; }
.museum-sources span{ width:auto; }

/* =============== CALENDRIER =============== */
.fixtures{ display:flex; flex-direction:column; gap:.9rem; }
.fixture{
  display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:1rem;
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:1.1rem 1.5rem;
}
.fixture__date{ font-size:.72rem; letter-spacing:1.5px; color:var(--mist); font-weight:700; }
.fixture__team{ font-weight:600; }
.fixture__team:nth-of-type(1){ text-align:right; }
.fixture__score{ font-family:'Fraunces', serif; font-style:italic; font-weight:600; color:var(--white); font-size:1.2rem; padding:0 .6rem; }
.fixture__tag{ font-size:.68rem; letter-spacing:1px; text-transform:uppercase; font-weight:800; padding:.35rem .7rem; border-radius:100px; justify-self:end; }
.fixture__tag--win{ background:rgba(111,227,180,.15); color:var(--accent); }
.fixture__tag--draw{ background:rgba(201,162,75,.18); color:var(--gold); }
.fixture__tag--next{ background:rgba(255,255,255,.08); color:var(--mist); }

/* =============== TIMELINE (HISTOIRE) =============== */
.timeline{ display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto; position:relative; }
.timeline::before{ content:''; position:absolute; left:52px; top:8px; bottom:8px; width:1px; background:rgba(111,227,180,.25); }
.timeline li{ display:grid; grid-template-columns:104px 1fr; gap:1.2rem; padding:1.15rem 0; position:relative; }
.timeline__year{ font-family:'Fraunces', serif; font-style:italic; font-weight:600; font-size:1.35rem; color:var(--accent); text-align:right; }
.timeline li p{ padding-top:.2rem; }

/* =============== INFOS PRATIQUES =============== */
.practical{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:1.8rem;
}

.practical__card{
background:var(--panel);
border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius);
padding:1.9rem;
}

.practical__card h3{
font-size:1.3rem;
color:var(--white);
margin-bottom:1.1rem;
}

.practical__card p{
font-size:.95rem;
line-height:1.6;
min-height:50px;
}

.practical__map{
margin-top:1rem;
border-radius:10px;
overflow:hidden;
height:220px;
}

.practical__map iframe{
width:100%;
height:100%;
border:0;
filter:grayscale(.3) invert(.92) contrast(.9);
}
@media (max-width:600px){
  .practical{
    grid-template-columns:1fr;
  }
}

/* =============== PARTENAIRES =============== */
.partners{ background:var(--ink); padding:3rem 0 2.6rem; border-top:1px solid rgba(255,255,255,.06); text-align:center; }
.partners__title{
  font-family:'Big Shoulders Display'; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  font-size:2.6rem; letter-spacing:3px; color:var(--white); margin:0 0 3rem;
}
.partners__scroll{ overflow:hidden; }
.partners__track{ display:flex; gap:3.5rem; width:max-content; align-items:center; animation:scrollLeft 28s linear infinite; }
.partner-logo{ width:280px; height:150px; flex:none; display:flex; align-items:center; justify-content:center; }
.partner-logo img{
  max-width:100%; max-height:100%; object-fit:contain; display:none;
}
.partner-logo.has-logo img{ display:block; }
.partner-logo:hover img{ filter:grayscale(0) brightness(1) opacity(1); }
.partner-logo:not(.has-logo)::before{
  content:'LOGO'; width:100%; height:100%; border-radius:8px;
  border:1px dashed rgba(255,255,255,.15); color:rgba(255,255,255,.16);
  font-family:'Big Shoulders Display'; font-size:.8rem; letter-spacing:2px;
  display:flex; align-items:center; justify-content:center;
}

/* =============== FOOTER =============== */
.footer{ background:var(--panel); padding:4rem 1.5rem 1.5rem; border-top:1px solid rgba(255,255,255,.06); }
.footer__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:2.5rem; }
.footer__brand{ display:flex; flex-direction:column; gap:1rem; }
.footer__brand img{ width:56px; height:56px; border-radius:50%; }
.footer__brand p{ font-size:.85rem; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col h4{ font-family:'Big Shoulders Display'; color:var(--white); font-size:.95rem; margin-bottom:.3rem; }
.footer__col a, .footer__col span{ font-size:.88rem; color:var(--mist); transition:color .2s; }
.footer__col a:hover{ color:var(--accent); }
.footer__bottom{
  max-width:var(--maxw); margin:2.5rem auto 0; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.06); font-size:.78rem; color:var(--mist); text-align:center;
}

/* =============== SCROLL REVEAL =============== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =============== RESPONSIVE =============== */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; text-align:center; padding-bottom:6rem; }
  .hero__actions{ justify-content:center; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:1fr; }
  .practical{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .fixture{ grid-template-columns:auto 1fr auto; }
  .fixture__team:last-of-type, .fixture__tag{ grid-column:1/-1; justify-self:start; }
  .org-chart__groups{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .org-chart__groups::before{ left:25%; right:25%; }
  .museum-intro{ grid-template-columns:1fr; gap:2.5rem; }
  .museum-photo--intro{ max-width:560px; margin:0 auto; }
}
@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; }
  .matchcard__teams{ gap:.3rem; }
  .matchcard__team{ width:78px; }
  .player-card, .player-photo{ width:190px; }
  .player-photo{ height:250px; }
  .squad-grid .player-photo{ width:100%; height:250px; }
  .org-chart__groups{ grid-template-columns:1fr; gap:1.5rem; }
  .org-chart__groups::before{ display:none; }
  .org-group{ padding-top:0; }
  .org-group::before{ display:none; }
  .museum-timeline::before{ left:12px; }
  .museum-event,.museum-event--wide{ width:100%; margin:0; padding:1.5rem 0 1.5rem 2.2rem; text-align:left !important; }
  .museum-event::before,.museum-event--wide::before{ left:6px !important; right:auto !important; top:2rem; }
  .museum-gallery,.museum-gallery--left,.museum-gallery--right{ width:100%; margin:1rem 0 2rem 1rem; transform:none; flex-direction:column; max-width:calc(100% - 1rem); }
  .museum-gallery .museum-photo:nth-child(2){ margin-top:0; }
  .museum-photo--intro img{ min-height:250px; }
}

/* =============== CALENDRIER SAISON (mois par mois) =============== */
.calendar-legend{ display:flex; gap:2.5rem; justify-content:center; margin-bottom:3rem; flex-wrap:wrap; }
.calendar-legend__item{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--mist); font-weight:600; }
.calendar-legend__item svg{ width:22px; height:22px; color:var(--accent); flex:none; }

.season-calendar{ display:flex; flex-direction:column; gap:3.5rem; }
.month-block__title{
  font-size:1.7rem; color:var(--white); margin-bottom:1.1rem;
}
.month-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; }
.month-grid__weekday{
  text-align:center; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--mist); font-weight:700; padding-bottom:.5rem;
}
.day-cell{
  aspect-ratio:1/1; border-radius:10px; background:var(--panel);
  border:1px solid rgba(255,255,255,.05);
  position:relative; overflow:hidden; /* garde l'image dans les coins arrondis */
}
.day-cell--empty{ background:transparent; border:none; }
.day-cell__num{
  position:absolute; top:.3rem; left:.4rem; z-index:2;
  font-size:.72rem; color:var(--mist); font-weight:600;
}
.day-cell--match{ border-color:rgba(111,227,180,.4); }
.day-cell--match .day-cell__num{
  color:#fff; background:rgba(0,0,0,.55); padding:.1rem .35rem; border-radius:5px;
}
.day-cell__icon{
  position:absolute; top:.3rem; right:.3rem; z-index:2; width:16px; height:16px; color:var(--accent);
  background:rgba(0,0,0,.55); border-radius:5px; padding:2px;
}
.day-cell__crest{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1c3a30,#0d1f19);
}
.day-cell__crest img{
  width:100%; height:100%; object-fit:cover; display:none;
}
.day-cell__crest.has-img img{ display:block; }
.day-cell__crest:not(.has-img)::before{
  content:attr(data-initial); font-family:'Fraunces', serif; font-style:italic; font-weight:700;
  font-size:1.6rem; color:rgba(111,227,180,.55);
}
.day-cell__opponent{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  font-size:.56rem; text-align:center; color:#fff; line-height:1.1; padding:.25rem .2rem .3rem;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 20%, transparent 100%);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width:700px){
  .day-cell__opponent{ display:none; }
  .day-cell__num{ font-size:.62rem; }
}
/* =============== CRESTS DYNAMIQUES DANS LA CARTE "PROCHAIN MATCH" =============== */
.matchcard__crest{
  width:46px; height:46px; border-radius:50%; overflow:hidden; position:relative;
  background:var(--green-deep); display:flex; align-items:center; justify-content:center;
}
.matchcard__crest img{ width:100%; height:100%; object-fit:cover; display:none; }
.matchcard__crest.has-img img{ display:block; }
.matchcard__crest:not(.has-img)::before{
  content:attr(data-initial); font-family:'Fraunces', serif; font-style:italic; font-weight:700;
  color:var(--accent); font-size:1.1rem;
}

/* =============== MISE EN VALEUR DU PROCHAIN MATCH DANS LE CALENDRIER =============== */
.day-cell--next{
  outline:2px solid var(--accent); outline-offset:2px;
  animation: nextMatchPulse 2s ease-in-out infinite;
}
@keyframes nextMatchPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(111,227,180,.5); }
  50%{ box-shadow:0 0 0 6px rgba(111,227,180,0); }
}
/* =============== INTRO D'OUVERTURE (une fois par session) =============== */
html.no-intro #intro{ display:none; }
#intro{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#intro.intro--out{ animation: introOut .6s var(--ease) forwards; }
@keyframes introOut{ to{ opacity:0; transform:scale(1.04); visibility:hidden; } }

.intro__aura{
  position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(111,227,180,.55) 0%, rgba(111,227,180,.18) 45%, transparent 72%);
  filter:blur(30px); opacity:0;
  animation: introAuraIn 1s ease-out .1s forwards;
}
@keyframes introAuraIn{ 0%{ opacity:0; transform:scale(.6); } 100%{ opacity:1; transform:scale(1); } }

.intro__claws{ position:absolute; inset:0; pointer-events:none; }
.intro__claws span{
  position:absolute; top:50%; left:50%; height:2px; width:140vmax;
  background:linear-gradient(90deg, transparent, rgba(111,227,180,.9) 45%, transparent 60%);
  transform-origin:left center; opacity:0;
}
.intro__claws span:nth-child(1){ transform:translate(-50%,-50%) rotate(-18deg) scaleX(0); animation: clawSweep .55s ease-out .35s forwards; }
.intro__claws span:nth-child(2){ top:calc(50% + 18px); transform:translate(-50%,-50%) rotate(-18deg) scaleX(0); animation: clawSweep .55s ease-out .45s forwards; }
.intro__claws span:nth-child(3){ top:calc(50% + 36px); transform:translate(-50%,-50%) rotate(-18deg) scaleX(0); animation: clawSweep .55s ease-out .55s forwards; }
@keyframes clawSweep{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(-18deg) scaleX(0); }
  15%{ opacity:1; }
  70%{ opacity:.8; }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(-18deg) scaleX(1); }
}

.intro__content{ position:relative; z-index:2; text-align:center; }
.intro__crest{
  width:min(30vw,150px); height:min(30vw,150px); border-radius:50%; object-fit:cover;
  opacity:0; transform:scale(.7); box-shadow:0 0 50px 12px rgba(111,227,180,.55);
  animation: introCrestIn .7s var(--ease) .15s forwards;
}
@keyframes introCrestIn{ to{ opacity:1; transform:scale(1); } }

.intro__wordmark{
  margin:1.3rem 0 0; font-family:'Big Shoulders Display'; font-weight:800;
  font-size:clamp(1.3rem,3.4vw,2rem); letter-spacing:2px; color:var(--white);
  opacity:0; transform:translateY(14px);
  animation: introTextIn .6s var(--ease) 1s forwards;
}
@keyframes introTextIn{ to{ opacity:1; transform:translateY(0); } }

#introSkip{
  position:absolute; bottom:2rem; right:2rem; z-index:3;
  background:transparent; border:1px solid rgba(243,247,245,.3); color:var(--white);
  font-family:'Barlow'; font-weight:600; letter-spacing:1px; font-size:.82rem;
  padding:.55rem 1.1rem; border-radius:100px; cursor:pointer;
  opacity:0; animation: introTextIn .5s ease .4s forwards;
}
#introSkip:hover{ background:rgba(243,247,245,.1); }

@media (prefers-reduced-motion: reduce){
  #intro{ display:none !important; }
}

.reload-tip{
  text-align:center; font-size:.85rem; color:var(--mist);
  margin:1.5rem auto 0; max-width:640px;
}

.news-card__img--maillots{
  background-image:url('assets/maillot.jpg');
  background-size:cover;
  background-position:center 20%;
}
/* =============== BOUTIQUE =============== */
.boutique-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:2.2rem; }
.product{
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  overflow:hidden; transition:transform .3s var(--ease);
}
.product:hover{ transform:translateY(-4px); }
.product__gallery{
  display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:.4rem; padding:.4rem;
}
.product__photo{
  position:relative; border-radius:8px; overflow:hidden; background:linear-gradient(160deg,#1c3a30,#0d1f19);
  min-height:90px;
}
.product__photo--main{ grid-row:1 / 3; min-height:190px; }
.product__photo img{ width:100%; height:100%; object-fit:cover; display:none; }
.product__photo.has-photo img{ display:block; }
.product__photo:not(.has-photo)::before{
  content:'PHOTO'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Big Shoulders Display'; font-size:.8rem; letter-spacing:2px; color:rgba(111,227,180,.35);
  border:1px dashed rgba(111,227,180,.2);
}
.product__body{ padding:1.6rem; }
.product__body h3{ font-size:1.4rem; color:var(--white); }
.product__body p{ margin-top:.5rem; font-size:.92rem; }

.product__cta{
  margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed rgba(255,255,255,.1);
}
.product__cta p{
  font-family:'Big Shoulders Display'; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  font-size:.85rem; color:var(--accent); margin-bottom:.8rem;
}
/* =============== NOUS SUIVRE =============== */
.socials-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.6rem; }
.social-card{
  display:flex; flex-direction:column; align-items:center; gap:.9rem; padding:2.2rem;
  background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  transition:transform .3s var(--ease), border-color .3s;
}
.social-card:hover{ transform:translateY(-5px); border-color:rgba(111,227,180,.4); }
.social-card svg{ width:36px; height:36px; color:var(--accent); }
.social-card span{
  font-family:'Big Shoulders Display'; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:var(--white); font-size:1.05rem;
}
.news-more{ text-align:center; margin-top:2.5rem; }
.link-accent{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.link-accent:hover{ color:var(--green-light, var(--accent)); }