/* Tour de France 2027 : le tableau des départs (bleu nuit et orange). Polices du site + Barlow Condensed. */
@font-face { font-family:"Barlow Condensed"; font-weight:500; font-display:swap; src:url(../fonts/barlowc-500-normal-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Barlow Condensed"; font-weight:500; font-display:swap; src:url(../fonts/barlowc-500-normal-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family:"Barlow Condensed"; font-weight:600; font-display:swap; src:url(../fonts/barlowc-600-normal-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Barlow Condensed"; font-weight:600; font-display:swap; src:url(../fonts/barlowc-600-normal-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
	--nuit:#0e1830; --nuit-2:#16223f; --nuit-3:#08101f; --nuit-4:#1c2a4d;
	--orange:#f37021; --orange-voile:rgba(243,112,33,.7);
	--lettre:#f4f6fa; --gris:rgba(244,246,250,.62); --filet:rgba(244,246,250,.14); --papier-gris:#4f5a70;
	--volet:#26355a; --volet-bas:#1f2c4b; --champ:rgba(14,24,48,.06);
	--gare:"Barlow Condensed", "Arial Narrow", sans-serif; --corps:"Public Sans", system-ui, sans-serif;
	--doux:cubic-bezier(.2,.7,.2,1); --ressort:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; overflow-x:clip; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
body { margin:0; background:var(--nuit); color:var(--lettre); font:400 17px/1.6 var(--corps); overflow-x:clip; -webkit-font-smoothing:antialiased; }
body::after { content:""; position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
	animation:grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform:translate(0,0); } 20% { transform:translate(-3%,2%); } 40% { transform:translate(2%,-3%); } 60% { transform:translate(-2%,-1%); } 80% { transform:translate(3%,3%); } }
a { color:inherit; }
img { display:block; max-width:100%; }
h1, h2, h3 { font-family:var(--gare); font-weight:600; margin:0; line-height:.95; letter-spacing:.005em; }
p { margin:0 0 1em; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.cadre { max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.sec { padding-top:clamp(96px,14vw,200px); }
.sur-titre { font:500 clamp(18px,1.5vw,22px) var(--gare); color:var(--orange); margin-bottom:14px; }
.titre-geant { font-size:clamp(56px,9vw,150px); line-height:.86; text-transform:uppercase; margin-bottom:clamp(32px,5vw,72px); }

/* Barre du haut */
.barre { position:fixed; left:0; right:0; top:34px; z-index:60; mix-blend-mode:difference; color:#fff; pointer-events:none; }
.barre .cadre { display:flex; justify-content:space-between; align-items:center; }
.barre a { pointer-events:auto; }
.marque { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; font-size:16px; }
.marque img { width:30px; height:30px; }
.barre .marque img { filter:brightness(0) invert(1); }
.pilule { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; padding:12px 20px; border-radius:999px; border:1px solid currentColor; font:600 14px var(--corps); text-decoration:none; }
.pilule.pleine { background:var(--orange); color:var(--nuit); border-color:var(--orange); padding:18px 28px; font-size:16px; cursor:pointer; }

/* Curseur */
.curseur, .anneau { position:fixed; left:0; top:0; z-index:100; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); }
.curseur { width:8px; height:8px; background:var(--orange); }
.anneau { width:38px; height:38px; border:1px solid var(--orange-voile); display:grid; place-items:center; transition:width .35s var(--ressort), height .35s var(--ressort), background .35s, border-color .35s; }
.anneau span { font:600 13px var(--corps); color:var(--nuit); opacity:0; transition:opacity .2s; white-space:nowrap; }
.anneau.grand { width:104px; height:104px; background:var(--orange); border-color:var(--orange); }
.anneau.grand span { opacity:1; }
@media (pointer:coarse) { .curseur, .anneau { display:none; } }

/* Révélations ligne à ligne */
.l { display:block; overflow:hidden; padding-bottom:.04em; margin-bottom:-.04em; }
.l > span { display:block; will-change:transform; }
.js .revele .l > span { transform:translateY(108%); }
.js .apparait { opacity:0; transform:translateY(30px); }

/* Les volets du tableau */
.volets { display:flex; gap:2px; }
.v { position:relative; display:inline-grid; place-items:center; width:.64em; height:1.16em; font:500 var(--t,26px)/1 var(--gare); color:var(--lettre); background:linear-gradient(var(--volet) 0 50%, var(--volet-bas) 50%); border-radius:2px; overflow:hidden; text-transform:uppercase; }
.v::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.55); }
.v.tourne { animation:volet .07s linear; }
.v.vif { color:var(--orange); }
@keyframes volet { 0% { filter:brightness(1.6); } 100% { filter:none; } }

/* Le chargeur : un tableau plein écran qui s'écrit, puis se lève */
.chargeur { position:fixed; inset:0; z-index:85; background:var(--nuit-3); display:grid; place-items:center; }
.chargeur .lignes { display:grid; gap:clamp(6px,1vw,12px); justify-items:center; }
.chargeur .v { --t:min(4.6vw,62px); }
.chargeur .gros .v { --t:min(9vw,120px); }

/* L'ouverture : le prochain départ */
.une { min-height:100svh; display:flex; align-items:center; padding:150px 0 60px; }
.une-grille { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(24px,4vw,64px); align-items:center; width:100%; }
.une .depart-l { font:500 clamp(20px,1.8vw,26px) var(--gare); color:var(--orange); margin-bottom:14px; }
.une .gv .v { --t:clamp(40px,6.6vw,120px); }
.une .gq { display:flex; gap:clamp(10px,1.4vw,22px); margin-top:14px; flex-wrap:wrap; }
.une .gq .v { --t:clamp(22px,2.6vw,46px); }
.une h1 { font-size:clamp(40px,5vw,84px); line-height:.9; text-transform:uppercase; margin:clamp(28px,4vw,56px) 0 16px; }
.une p { color:var(--gris); font-size:clamp(17px,1.5vw,21px); max-width:42ch; margin-bottom:28px; }
.surligne { display:inline-block; margin-top:14px; background:var(--orange); color:var(--nuit); font-weight:600; padding:4px 10px; border-radius:4px; }
.une-photo { position:relative; border-radius:24px; overflow:hidden; aspect-ratio:3/4; background:var(--nuit-3); }
.une-photo img { width:100%; height:118%; object-fit:cover; object-position:62% 20%; }
.tampon { position:absolute; left:-12px; bottom:28px; background:var(--orange); color:var(--nuit); font:600 clamp(20px,2vw,28px) var(--gare); padding:12px 20px; transform:rotate(-6deg); border-radius:4px; }

/* Bandeau qui défile */
.defile { overflow:hidden; white-space:nowrap; background:var(--orange); color:var(--nuit); padding:14px 0; }
.defile .piste { display:inline-flex; animation:defile 48s linear infinite; }
.defile .piste span { font:600 clamp(28px,3.4vw,46px)/1 var(--gare); text-transform:uppercase; padding-right:.9em; }
.defile .piste span i { font-style:normal; opacity:.5; margin-left:.35em; }
@keyframes defile { to { transform:translateX(-50%); } }

/* Les quatorze billets, en piste horizontale */
.rb { position:relative; }
.rb-in { height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:96px 0 70px; }
.rb-tete { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:clamp(20px,3vw,40px); }
.rb-tete .titre-geant { margin:0; }
.rb-tete p { color:var(--gris); margin:0; font-size:18px; max-width:24ch; }
.rb-piste { display:flex; gap:clamp(14px,1.6vw,24px); padding:0 clamp(16px,4vw,40px); will-change:transform; }
.ticket { all:unset; box-sizing:border-box; flex:none; cursor:pointer; width:clamp(260px,24vw,360px); height:min(56svh,500px); background:#f4f6fa; color:var(--nuit); border-radius:22px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .5s var(--ressort); }
.ticket:hover, .ticket:focus-visible { transform:translateY(-12px) rotate(-1.2deg); }
.ticket:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.ticket.complet { cursor:default; opacity:.6; transform:none; }
.ticket.complet .bas { background:#c9cfda; }
.ticket .haut { padding:22px 24px 0; flex:1; display:flex; flex-direction:column; }
.ticket small { font:500 18px var(--gare); color:#5a6478; }
.ticket b { font:600 clamp(46px,4.6vw,72px)/.9 var(--gare); text-transform:uppercase; margin:8px 0 10px; display:block; }
.ticket .q { font:500 22px/1.15 var(--gare); }
.ticket svg { margin-top:auto; width:58%; align-self:flex-end; height:auto; margin-bottom:12px; }
.ticket svg .fr { fill:#e3e7ef; stroke:#9aa3b5; stroke-width:6; }
.ticket svg circle { fill:#9aa3b5; }
.ticket svg circle.ici { fill:var(--nuit); stroke:var(--orange); stroke-width:14; }
.ticket .bas { background:var(--orange); padding:16px 24px; font:600 15px var(--corps); position:relative; }
.ticket .bas::before { content:""; position:absolute; left:14px; right:14px; top:-1px; height:2px; background:repeating-linear-gradient(90deg, #f4f6fa 0 6px, transparent 6px 14px); }
.rb-progres { position:relative; height:2px; background:var(--filet); margin:clamp(30px,4vw,48px) clamp(16px,4vw,40px) 0; }
.rb-progres span { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--orange); }
.train { position:absolute; top:50%; left:0; width:46px; aspect-ratio:1; border-radius:50%; background:#fff url(tete.webp) center/cover; box-shadow:0 0 0 3px var(--orange), 0 10px 22px -6px rgba(0,0,0,.55); transform:translate(-50%,-50%); pointer-events:none; z-index:2; }

/* La soirée : trois cartes qui s'empilent */
.pile { position:relative; }
.carte-pile { position:sticky; top:calc(14vh + var(--i) * 26px); min-height:62vh; border-radius:28px; padding:clamp(28px,5vw,64px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,5vw,80px); align-items:end; margin-bottom:6vh; transform-origin:center top; }
.carte-pile .num { font:600 clamp(120px,22vw,320px)/.78 var(--gare); }
.carte-pile h3 { font-size:clamp(48px,7vw,110px); line-height:.9; text-transform:uppercase; }
.carte-pile p { font-size:clamp(18px,1.7vw,22px); margin:16px 0 0; max-width:30ch; }
.c1 { background:#f4f6fa; color:var(--nuit); }
.c2 { background:var(--orange); color:var(--nuit); }
.c3 { background:var(--nuit-4); color:var(--lettre); }
.c3 .num { color:var(--orange); }

/* Le programme : trois lignes qui s'allument mot à mot */
.programme { margin-top:clamp(60px,10vw,140px); }
.programme ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--filet); }
.programme li { padding:clamp(20px,2.6vw,36px) 0; border-bottom:1px solid var(--filet); }
.programme li::before { content:""; display:block; width:36px; height:4px; background:var(--orange); margin-bottom:16px; }
.allume { font:600 clamp(32px,4.4vw,68px)/1 var(--gare); text-transform:uppercase; max-width:24ch; }
.allume .m { opacity:.16; transition:opacity .2s; }

/* La grande image (la place de la vidéo du Tour) */
.ecran { position:relative; width:62%; margin:0 auto; aspect-ratio:16/9; border-radius:28px; overflow:hidden; background:var(--nuit-3); }
.ecran img { width:100%; height:115%; object-fit:cover; object-position:center 24%; opacity:.72; }
.ecran figcaption { position:absolute; left:28px; right:28px; bottom:22px; font:500 clamp(20px,2vw,28px)/1.1 var(--gare); }

/* Qui je suis */
.moi { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,6vw,96px); align-items:center; }
.moi .photo { border-radius:20px; overflow:hidden; aspect-ratio:4/5; }
.moi .photo img { width:100%; height:100%; object-fit:cover; object-position:center 20%; transform:scale(1.15); }
.moi h2 { font-size:clamp(64px,9vw,140px); line-height:.86; text-transform:uppercase; margin-bottom:26px; }
.moi .titres { list-style:none; margin:0 0 26px; padding:0; border-top:1px solid var(--filet); }
.moi .titres li { font:500 clamp(22px,2vw,28px)/1.2 var(--gare); padding:10px 0; border-bottom:1px solid var(--filet); }
.moi p { font-size:clamp(18px,1.6vw,21px); color:var(--gris); max-width:40ch; margin-bottom:.6em; }
.moi .citation { margin:0; padding:2px 0 2px clamp(18px,2vw,26px); border-left:3px solid var(--orange); }
.moi .citation p { font-style:italic; color:var(--lettre); }
.moi .citation p:last-child { margin-bottom:0; }

/* Le billet : souche orange, formulaire sur papier */
.titre-insc { font-size:clamp(64px,10vw,160px); line-height:.85; text-transform:uppercase; margin-bottom:clamp(24px,4vw,48px); }
.billet { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); background:#fff; color:var(--nuit); border-radius:28px; box-shadow:0 30px 60px -34px rgba(0,0,0,.6); position:relative; overflow:hidden; }
.souche { position:relative; background:var(--orange); color:var(--nuit); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.souche::after { content:""; position:absolute; right:-1px; top:14px; bottom:14px; width:2px; background:repeating-linear-gradient(#fff 0 6px, transparent 6px 14px); }
.souche small { font-size:14px; font-weight:600; }
.souche .dest { font:600 clamp(48px,6vw,84px)/.9 var(--gare); overflow-wrap:anywhere; }
.souche .quand { font:500 22px/1.2 var(--gare); }
.souche .marque { font-size:14px; }
.souche .marque img { width:24px; height:24px; }
.composte { position:absolute; right:18px; top:18px; width:30px; height:30px; border-radius:50%; background:var(--nuit); transform:scale(0); transition:transform .25s var(--doux); }
.billet.fait .composte { transform:scale(1); }
.corps { padding:clamp(24px,3vw,44px); }
.corps .rappel { color:var(--papier-gris); margin:0 0 6px; max-width:56ch; }
form { display:grid; gap:16px; }
.deux { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.champ span { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.champ input, .champ select { width:100%; font:400 17px var(--corps); color:var(--nuit); background:var(--champ); border:1.5px solid transparent; border-radius:6px; padding:13px 14px; }
.champ input:focus, .champ select:focus { outline:none; border-color:var(--nuit); background:#fff; }
.coche { display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:15.5px; line-height:1.45; cursor:pointer; }
.coche input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--nuit); }
.piege { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bouton { display:inline-flex; align-items:center; justify-content:center; background:var(--nuit); color:#fff; border:0; border-radius:999px; padding:18px 30px; font:600 16px var(--corps); text-decoration:none; cursor:pointer; justify-self:start; transition:filter .2s; }
.bouton:hover { filter:brightness(1.25); }
.bouton[disabled] { opacity:.6; cursor:wait; }
.bouton.clair { background:transparent; color:var(--nuit); box-shadow:inset 0 0 0 1.5px var(--nuit); }
.erreur { color:#b3261e; font-weight:600; margin:0; }
.note { font-size:13.5px; color:var(--papier-gris); margin:0; }
.ok h3 { font-size:clamp(40px,4.4vw,56px); margin-bottom:12px; }
.ok .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

/* Pied géant */
.fin { padding:clamp(80px,12vw,180px) 0 40px; overflow:hidden; }
.fin-haut { display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,64px); }
.fin .geant { font:600 clamp(72px,15vw,250px)/.82 var(--gare); text-transform:uppercase; white-space:nowrap; }
.fin-photo { flex:none; width:clamp(150px,26vw,380px); aspect-ratio:4/5; border-radius:24px; overflow:hidden; transform:rotate(3deg); box-shadow:0 0 0 6px var(--orange), 0 30px 60px -30px rgba(0,0,0,.7); }
.fin-photo img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.fin .bas { display:flex; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; border-top:1px solid var(--filet); margin-top:clamp(32px,5vw,64px); padding-top:24px; font-size:14px; color:var(--gris); }
.fin nav { display:flex; gap:22px; flex-wrap:wrap; }
.fin a { text-decoration:none; }
.fin a:hover { color:var(--lettre); }

@media (max-width:860px) {
	.une-grille { grid-template-columns:1fr; }
	.une-photo { aspect-ratio:4/3; order:-1; }
	.rb-in { height:auto; padding:40px 0; }
	.rb-piste { overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; scrollbar-width:none; }
	.ticket { scroll-snap-align:center; height:430px; }
	.rb-progres { display:none; }
	.rb-tete { flex-direction:column; align-items:flex-start; }
	.carte-pile { grid-template-columns:1fr; min-height:54vh; align-items:start; }
	.moi { grid-template-columns:1fr; }
	.ecran { width:86%; border-radius:18px; }
	.barre { top:30px; }
	.barre .marque span { display:none; }
}
@media (max-width:700px) {
	.billet { grid-template-columns:1fr; }
	.souche::after { left:14px; right:14px; top:auto; bottom:-1px; width:auto; height:2px; background:repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 14px); }
	.deux { grid-template-columns:1fr; }
	.fin-haut { flex-direction:column; align-items:flex-start; }
	.fin-photo { width:min(62vw,280px); margin:8px 0 0 auto; }
}
@media (prefers-reduced-motion:reduce) {
	*, *::before, *::after { animation:none !important; transition:none !important; }
	.js .revele .l > span, .js .apparait { transform:none; opacity:1; }
	.allume .m { opacity:1; }
}