/* La Tronche Vélo Sport : maquette « Le dossard » */
:root{
  --nuit:#14213D;      /* bleu foncé des couleurs du club */
  --vert:#216B31;      /* vert de l'ellipse du logo */
  --vert-vif:#2F8A43;  /* vert éclairci, survol */
  --pre:#DCE9D5;       /* vert pâle, fonds de repère */
  --papier:#FFFFFF;    /* blanc du maillot / du dossard */
  --bitume:#F1F3F2;    /* neutre légèrement teinté */
  --encre:#111418;     /* noir des lettres TVS */
  --gris:#4D5560;
  --titre:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --texte:"Red Hat Text",Georgia,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texte);font-size:1.0625rem;line-height:1.6;color:var(--encre);background:var(--bitume)}
img{max-width:100%;display:block;height:auto}
figure{margin:0}
a{color:var(--vert)}
a:hover{color:var(--vert-vif)}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}

.demo{background:var(--nuit);color:#fff;font-size:.85rem;text-align:center;padding:.45rem 1rem}
.demo strong{font-weight:700}

/* En-tête */
.top{background:var(--papier);border-bottom:4px solid var(--vert)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--encre)}
.brand img{width:132px}
.brand span{font-family:var(--titre);font-weight:700;font-size:1.25rem;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.nav{display:flex;gap:.3rem;flex-wrap:wrap}
.nav a{font-family:var(--titre);font-weight:700;font-size:1.3rem;text-transform:uppercase;color:var(--nuit);text-decoration:none;padding:.35rem .7rem}
.nav a[aria-current]{background:var(--nuit);color:#fff}
.nav a:hover{color:var(--vert)}
.nav a[aria-current]:hover{color:#fff}

h1,h2,h3{font-family:var(--titre);line-height:.95;margin:0 0 .6rem;color:var(--nuit)}
h2{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;text-transform:uppercase}
h3{font-size:1.7rem;font-weight:700;text-transform:uppercase}
p{margin:0 0 1rem;max-width:66ch}

/* Ouverture : photo + dossard épinglé */
.depart{position:relative;background:var(--nuit)}
.depart .photo{width:100%;height:min(78vh,700px);object-fit:cover;object-position:50% 35%}
.depart figcaption{position:absolute;left:1rem;bottom:.8rem;color:#fff;font-size:.8rem;background:rgba(20,33,61,.75);padding:.2rem .5rem}
.dossard{position:absolute;right:max(1.25rem,calc((100% - 1180px)/2));top:50%;transform:translateY(-50%) rotate(-2deg);
  width:min(420px,40vw);background:var(--papier);color:var(--encre);padding:1.4rem 1.6rem 1.2rem;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.dossard::before,.dossard::after,.dossard .pins::before,.dossard .pins::after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--bitume);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.dossard::before{left:12px;top:12px}.dossard::after{right:12px;top:12px}
.dossard .pins::before{left:12px;bottom:12px}.dossard .pins::after{right:12px;bottom:12px}
.dossard .bandeau{display:block;background:var(--vert);color:#fff;font-family:var(--titre);font-weight:700;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.04em;padding:.25rem .6rem;margin:0 0 .4rem}
.dossard h1{font-size:clamp(5rem,13vw,10rem);font-weight:900;line-height:.82;margin:.1rem 0 .3rem;color:var(--encre);letter-spacing:-.01em}
.dossard p{font-size:1rem;margin:0 0 .5rem}
.dossard .bas{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;border-top:2px solid var(--encre);padding-top:.5rem;margin-top:.6rem}
.dossard .bas img{height:38px;width:auto}
.dossard .bas a{font-weight:700}

/* À la une : registre daté */
.une{padding:4.5rem 0 3rem}
.une .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:3rem;align-items:start}
.une ol{list-style:none;margin:0;padding:0;border-top:3px solid var(--nuit)}
.une li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid #c9cfcc}
.une time{font-family:var(--titre);font-weight:800;font-size:1.6rem;color:var(--vert);line-height:1}
.une li p{margin:0}
.une li .qui{display:block;font-size:.9rem;color:var(--gris)}

/* Nos deux courses */
.courses{background:var(--papier);padding:4rem 0}
.courses-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;margin-top:1.5rem}
.course{display:flex;flex-direction:column}
.course img{aspect-ratio:3/2;object-fit:cover;width:100%}
.course .quand{font-family:var(--titre);font-weight:800;font-size:2.1rem;color:var(--vert);margin:1rem 0 .2rem;line-height:1}
.course:nth-child(2) img{aspect-ratio:4/5}
.course dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:.4rem 0 1rem}
.course dt{font-weight:700}
.course dd{margin:0}
.btn{display:inline-block;background:var(--vert);color:#fff;text-decoration:none;font-weight:700;padding:.7rem 1.1rem;border-radius:2px;align-self:flex-start}
.btn:hover{background:var(--nuit);color:#fff}

/* Signature : le calendrier du challenge en feuille d'engagés */
.saison{padding:4.5rem 0;background:var(--nuit);color:#fff}
.saison h2{color:#fff}
.saison p{color:#dfe5ee}
table.data{width:100%;border-collapse:collapse;font-size:.98rem}
table.data caption{text-align:left;font-weight:700;padding-bottom:.5rem}
table.data th,table.data td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid rgba(255,255,255,.18);vertical-align:top}
table.data thead th{font-family:var(--titre);text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em;border-bottom:2px solid #fff}
table.data tbody th{font-weight:600}
table.data .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.data tr.is-tvs{background:rgba(47,138,67,.35)}
.engages{margin-top:2rem;font-size:1rem}
.engages caption{font-family:var(--titre);font-weight:800;text-transform:uppercase;font-size:1.5rem;color:#fff;padding-bottom:.8rem}
.engages thead th{color:#b9c4d6;font-size:1rem;border-bottom:3px solid #fff}
.engages td,.engages tbody th{padding:.75rem .8rem;vertical-align:baseline;border-bottom:1px solid rgba(255,255,255,.2)}
.engages .date{white-space:nowrap;width:8.5rem;color:#b9c4d6;font-weight:600}
.engages .date b{font-family:var(--titre);font-weight:900;font-size:2.3rem;line-height:1;color:#fff;margin-right:.15rem;font-variant-numeric:tabular-nums}
.engages tbody th{font-family:var(--titre);font-weight:800;font-size:1.65rem;line-height:1.05;text-transform:uppercase}
.engages .org{display:block;font-family:var(--texte);font-weight:400;font-size:.92rem;text-transform:none;color:#b9c4d6;margin-top:.2rem}
.engages .num{color:#b9c4d6}
.engages .num b{font-family:var(--titre);font-weight:800;font-size:1.6rem;color:#fff}
.engages tr.is-tvs{background:var(--vert)}
.engages tr.is-tvs td,.engages tr.is-tvs th{border-bottom-color:var(--vert)}
.engages tr.is-tvs td:first-child{box-shadow:inset 8px 0 0 #fff}
.engages tr.is-tvs .org,.engages tr.is-tvs .num,.engages tr.is-tvs .date{color:#fff}
.engages tr.open td,.engages tr.open th{border-top:2px dashed rgba(255,255,255,.35)}
.engages tr.open .date b{font-size:1.5rem}
.saison .hors{margin-top:1rem;font-size:.95rem}
.table-scroll{overflow-x:auto}

/* Club en bref */
.bref{padding:4.5rem 0}
.bref .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:center}
.couleurs{display:flex;height:16px;margin:0 0 1.2rem;max-width:280px}
.couleurs i{flex:1}
.couleurs i:nth-child(1){background:var(--vert)}.couleurs i:nth-child(2){background:#fff;border-block:1px solid #c9cfcc}.couleurs i:nth-child(3){background:var(--nuit)}

/* Pages intérieures */
.entete{background:var(--nuit);color:#fff;padding:3.5rem 0 3rem}
.entete h1{color:#fff;font-size:clamp(3rem,8vw,6rem);font-weight:900;text-transform:uppercase;margin:0}
.entete p{color:#dfe5ee;font-size:1.15rem;margin:.8rem 0 0}
.bloc{padding:4rem 0}
.bloc.blanc{background:var(--papier)}
.deux{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3rem;align-items:start}
.deux.inverse{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.horaires{list-style:none;margin:0 0 1.2rem;padding:0;border-left:4px solid var(--vert)}
.horaires li{display:grid;grid-template-columns:6.5rem 1fr;gap:.8rem;padding:.35rem 0 .35rem 1rem}
.horaires b{font-family:var(--titre);font-size:1.45rem;font-weight:800;color:var(--nuit);line-height:1.1}
.light table.data th,.light table.data td{border-bottom:1px solid #d5dad7}
.light table.data thead th{border-bottom:2px solid var(--nuit);color:var(--nuit)}
.fig-legende{font-size:.85rem;color:var(--gris);margin-top:.4rem}
.galerie{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.6rem;margin-top:1.5rem}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.galerie img:first-child{grid-row:span 2}
.partenaires{columns:3 14rem;column-gap:2rem;padding:0;list-style:none}
.partenaires li{break-inside:avoid;padding:.3rem 0;border-bottom:1px solid #d5dad7}
.adresse{font-style:normal;font-size:1.2rem;line-height:1.5}

/* Pied */
.pied{background:var(--encre);color:#cfd5dc;padding:2.5rem 0;font-size:.95rem}
.pied .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:flex-start}
.pied a{color:#fff}
.pied .affil{display:flex;gap:.8rem;align-items:center}
.pied .affil img{height:44px;width:auto;background:#fff;padding:3px}

@media (max-width:900px){
  .une .wrap,.courses-grid,.bref .wrap,.deux,.deux.inverse{grid-template-columns:1fr;gap:2rem}
  .course:nth-child(2) img{aspect-ratio:3/2}
}
@media (max-width:720px){
  .depart .photo{height:56vh}
  .dossard{position:relative;right:auto;top:auto;transform:rotate(-1.5deg);width:auto;margin:-3.5rem 1.1rem 0}
  .depart{padding-bottom:1.5rem;background:var(--bitume)}
  .depart figcaption{bottom:auto;top:.6rem}
  .brand img{width:104px}.brand span{font-size:1.05rem}
  .nav a{font-size:1.15rem;padding:.3rem .5rem}
  .une li{grid-template-columns:1fr;gap:.2rem}
  .galerie{grid-template-columns:1fr 1fr}
  .galerie img:first-child{grid-column:span 2;grid-row:auto}
}
@media (min-width:721px){
  .depart{display:block}
  .depart .photo{width:74%}
  .depart figcaption{left:1rem}
}
@media (max-width:560px){
  .engages thead{display:none}
  .engages td,.engages tbody th{padding:.6rem .45rem}
  .engages .date{width:auto}
  .engages .date b{display:block;font-size:1.9rem}
  .engages tbody th{font-size:1.3rem}
  .engages .num b{font-size:1.3rem}
}