/* Timovia — habillage commun : accessibilité, en-tête, menu mobile, pied de page.
   Chargé après la feuille de la page, il n'écrase que ce qui touche au chrome. */

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#0E1B3D;padding:12px 18px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #00A8DE;outline-offset:3px}

.hd .brand{display:flex;align-items:center}
.hd .brand img{height:30px;width:auto}
.ft img{height:28px;width:auto}
.ft a{text-decoration:none}
.ft a:hover{color:#fff}

.nav-tg{display:none;background:none;border:1px solid var(--trait);border-radius:12px;width:44px;height:44px;place-items:center;color:#fff;cursor:pointer;flex:none;margin-left:auto;padding:0}
.nav-cta{display:none}

@media (max-width:900px){
	.hd .in{position:relative}
	.hd .brand img{height:24px}
	.nav-tg{display:grid}
	.hd>.in>.btn.s{display:none}
	.hd .nav{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;gap:0;margin:0;padding:6px 16px 16px;background:var(--nuit3);border-bottom:1px solid var(--trait);box-shadow:0 20px 40px rgba(4,10,28,.45);z-index:30}
	.hd .nav.is-open{display:flex}
	.hd .nav a{padding:14px 2px;font-size:16px;border-top:1px solid var(--trait);color:var(--sur-nuit)}
	.hd .nav .nav-cta{display:flex;margin-top:14px;border-top:0;justify-content:center;color:#fff}
	.ft img{height:24px}
}

/* Confort de lecture : ancrage sous l'en-tête et défilement doux. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Contrôles réels (le canvas ne dessinait que des blocs). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button.btn{border:0;font-family:inherit;cursor:pointer;flex-direction:row;gap:10px}
button.btn.o,button.btn.o2{border-width:1.5px;border-style:solid}
input.fld{border:0;font-family:inherit;color:var(--encre)}
input.fld::placeholder{color:var(--acier);opacity:1}
.nav-tg{font:inherit}

/* Pages de contenu classiques (mentions légales, CGU…). */
.article{max-width:860px}
.entry{margin-top:24px;font-size:17px;line-height:1.7;color:var(--acier)}
.entry h2{font-size:26px;color:var(--nuit);margin:32px 0 10px;font-weight:800}
.entry h3{font-size:20px;color:var(--nuit);margin:24px 0 8px;font-weight:800}
.entry p{margin:0 0 16px}
.entry ul,.entry ol{margin:0 0 16px;padding-left:22px}
.entry li{margin-bottom:8px}
.entry a{color:var(--brand-d);text-decoration:underline}
.anchor{display:block;height:0;overflow:hidden}

/* Section dont la transition ne garde que la flèche : moins de vide sous le contenu. */
.sc.hb--s{padding-bottom:120px}
@media (max-width:900px){.sc.hb--s{padding-bottom:96px}}

/* CTA large : une seule ligne, chevron d'appel au clic, respiration verticale symétrique. */
.btn.btn--lg{flex-direction:row;align-items:center;gap:14px;font-size:20px;padding:24px 42px;line-height:1.2;box-shadow:0 18px 40px rgba(4,10,28,.28)}
.btn.btn--lg .ic{width:26px;height:26px;stroke-width:2.2;transition:transform .18s ease}
.btn.btn--lg:hover .ic{transform:translateY(4px)}
@media (max-width:900px){
	.btn.btn--lg{width:100%;justify-content:center;font-size:16px;padding:20px 18px;gap:10px;white-space:nowrap}
	.btn.btn--lg .ic{width:22px;height:22px}
}

/* Fiches « cas du quotidien » : statut en titre, activité en qualificatif. */
.cb h3 .act{color:var(--acier);font-weight:600;white-space:nowrap}

/* Le Club : rappel que le Club est compris dans l'abonnement a L'Outil. */
.inc{display:flex;align-items:center;gap:10px;margin-top:20px;padding:12px 16px;
	border-radius:14px;background:var(--azur);border:1px solid rgba(45,91,255,.2);
	color:var(--nuit);font-size:15px;font-weight:600;line-height:1.4}
.inc .ic{width:18px;height:18px;stroke-width:2.4;color:var(--brand)}
.inc b{font-weight:800;color:var(--brand-d)}

/* Tarifs : le trait de liaison Essentiel Micro -> Essentiel porte une pointe,
   pour que le sens de lecture du passage soit explicite. */
.ps .pv:before,.ps .pv:after{top:calc(58% - 6px);height:12px;background:var(--flux);
	clip-path:polygon(0 42%,68% 42%,68% 0,100% 50%,68% 100%,68% 58%,0 58%)}

/* Valeurs de gabarit sorties des attributs style= du HTML : elles restent
   réglables ici, et la feuille mobile peut les reprendre sans !important. */
.hero-k{margin-top:26px;font-weight:600;font-size:24px;color:var(--sur-nuit-bas)}
.bt2--xl{font-size:30px}
.br .h2{margin:0 auto}
.h2--lg{margin-top:12px;max-width:30ch;font-size:36px}
.h2--xl{margin:14px auto 0;max-width:26ch;font-size:52px}
.sc--tall{padding:88px 0 200px}
.sc--tall2{padding:120px 0}

/* Le sur-titre de section est centré comme le titre qu’il annonce. */
.in > .kick{text-align:center}

/* Bloc d'inscription : la lettre par défaut, la candidature à une vague
   dès qu'un bouton « prendre ma place » a été cliqué. */
.tmv-vg{display:none}
#newsletter.tmv-vague .tmv-vg{display:block}
#newsletter.tmv-vague > .in > .kick:not(.tmv-vg),
#newsletter.tmv-vague > .in > .h2:not(.tmv-vg),
#newsletter.tmv-vague > .in > .lead:not(.tmv-vg),
#newsletter.tmv-vague > .in > .pi{display:none}
/* le pictogramme suit l'intention : enveloppe pour la lettre, validation pour la vague */
#newsletter.tmv-vague form .btn .ic:not(.tmv-vg){display:none}
#newsletter.tmv-vague form .btn .ic.tmv-vg{display:block}

/* Rappel du choix : une pastille, comme ailleurs sur le site. */
.fm-choix-l{flex:0 0 100%;width:100%;display:flex;justify-content:center;margin-top:16px}
.fm-choix{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;width:auto;margin:0;
	padding:7px 16px 7px 13px;border-radius:999px;
	background:rgba(0,168,222,.12);border:1px solid rgba(0,168,222,.32);
	color:#9FE4FA;font-size:13.5px;font-weight:700;line-height:1.3;text-align:left}
.fm-choix:empty{display:none}
.fm-choix:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
	background:var(--menthe);box-shadow:0 0 0 4px rgba(16,185,129,.18)}

/* Cartes de vague et de tarif : la carte entière choisit l'option,
   le bouton garde son rôle d'action. */
/* Les heures de la journée type entrent une à une au défilement :
   même ressort que le reste, mais plus franc pour qu'on voie la journée se dérouler. */
.hrs > .hc.rv{opacity:0;transform:translate3d(0,38px,0) scale(.97);
	transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.hrs > .hc.rv.is-in{opacity:1;transform:none}
.hrs > .hc .hh time{transition:transform .6s cubic-bezier(.22,.61,.36,1) .15s}
.hrs > .hc.rv .hh time{transform:translateY(8px)}
.hrs > .hc.rv.is-in .hh time{transform:none}

.vg > .vc,.tf > .tc{cursor:pointer;
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.vg > .vc.is-sel{border-color:var(--brand);transform:translateY(-3px);
	box-shadow:0 0 0 3px rgba(45,91,255,.18),0 14px 34px rgba(45,91,255,.22)}
.tf > .tc.is-sel{border-color:var(--brand);transform:translateY(-2px);
	box-shadow:0 0 0 2px rgba(45,91,255,.14),0 10px 24px rgba(45,91,255,.14)}
/* retour au doigt, là où il n'y a pas de survol */
.vg > .vc:active,.tf > .tc:active{transform:scale(.99)}
.vc .btn,.vc .btn.o2,.tc .btn,.tc .btn.o2{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}

@media (hover:hover){
	.vg > .vc:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,27,61,.16)}
	.tf > .tc:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,27,61,.12)}
	.vc .btn:hover,.tc .btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(45,91,255,.38)}
	.vc .btn.o2:hover,.tc .btn.o2:hover{background:var(--azur);border-color:var(--brand);color:var(--brand-d)}}
}

/* Desktop : une transition sans phrase (flèche seule) n’a pas besoin
   d’autant de réserve en bas de section. */
.sc.hb:not(.hb--s):not(:has(.br .bt2,.br .h2)){padding-bottom:150px}

/* =========================================================
   RESPONSIVE MOBILE — refonte (novembre 2026)
   Objectifs : lisibilité, menu plein écran, barre sticky
   compacte, héros qui tient dans un écran sans scroller.
   Paliers : <=900 (tablette/mobile), <=560 (téléphone), <=380.
   Ce bloc est chargé après landing.css : il prime.
   ========================================================= */

@media (max-width:900px){

	/* --- En-tête collé : le menu reste accessible sur toute la page --- */
	.hd{position:sticky;top:0;z-index:60}
	.hd .in{gap:12px}
	[id]{scroll-margin-top:72px}

	/* --- Bouton menu : burger qui devient une croix --- */
	.nav-tg{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.05)}
	.nav-tg[aria-expanded="true"]{background:rgba(255,255,255,.12)}
	.nav-tg[aria-expanded="true"] .ic{display:none}
	.nav-tg[aria-expanded="true"]:before{content:"\2715";font-size:19px;font-weight:700;line-height:1}

	/* --- Panneau de navigation plein écran --- */
	.hd .nav{display:flex;position:fixed;top:60px;left:0;right:0;bottom:0;
		flex-direction:column;gap:0;margin:0;padding:10px 20px 28px;
		background:var(--nuit3);border-bottom:0;box-shadow:none;z-index:55;
		overflow-y:auto;overscroll-behavior:contain;
		opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
		transition:opacity .22s ease,transform .22s ease,visibility .22s}
	.hd .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
	.hd .nav a{display:flex;align-items:center;min-height:54px;padding:0 2px;
		font-size:17px;font-weight:600;color:#fff;border-top:1px solid var(--trait)}
	.hd .nav a:first-child{border-top:0}
	.hd .nav .nav-cta{display:flex;justify-content:center;align-items:center;
		width:100%;margin:22px 0 0;padding:16px 20px;min-height:56px;
		font-size:16px;font-weight:700;border-top:0;color:#fff;
		box-shadow:0 12px 28px rgba(45,91,255,.32)}
	/* pas de défilement derrière le menu, et on efface la barre sticky */
	html:has(.hd .nav.is-open){overflow:hidden}
	body:has(.hd .nav.is-open) .wb{opacity:0;pointer-events:none}

	/* --- Barre sticky : un seul bloc compact (~60px au lieu de 130px) --- */
	.wb{height:auto;z-index:40;padding-bottom:env(safe-area-inset-bottom,0px)}
	.wb .in{display:grid;grid-template-columns:minmax(0,1fr) auto;
		grid-template-areas:"t o" "n o";align-items:center;
		column-gap:12px;row-gap:1px;height:auto;padding:9px 16px}
	.wb-t{grid-area:t;font-size:13.5px;gap:8px;min-width:0}
	.wb-t em{font-size:9.5px;padding:3px 8px;letter-spacing:.08em}
	.wb-n{grid-area:n;margin:0;font-size:11.5px;white-space:nowrap}
	.wb-n b{font-size:12.5px}
	/* le compteur se limite a l'essentiel */
	.wb-n b.r{display:none}
	/* la jauge devient un filet plein format sur l'arête haute */
	.wb-g{display:block;position:absolute;left:0;right:0;top:0;max-width:none}
	.wb-g .bar{height:3px;border-radius:0;background:rgba(201,212,238,.16)}
	.wb-o{grid-area:o;margin:0;width:auto;gap:0}
	.wb-o .btn{width:auto;padding:12px 18px;font-size:14px;white-space:nowrap;
		box-shadow:0 10px 24px rgba(45,91,255,.3)}
	.ft{padding-bottom:76px}
	/* la lettre : les 3 pastilles répètent le chapô, inutiles sur petit écran */
	#newsletter .pi{display:none}
	/* même flèche, orientée vers le bas quand le passage s'empile */
	.ps .pv:before,.ps .pv:after{left:calc(50% - 6px);width:12px;height:26px;
		clip-path:polygon(42% 0,42% 68%,0 68%,50% 100%,100% 68%,58% 68%,58% 0)}
	.ps .pv:before{top:0;bottom:auto}
	.ps .pv:after{top:auto;bottom:0}

	/* --- Héros : l'essentiel et l'appel à l'action sans scroller --- */
	.sc.hero{padding-top:24px}
	.sc.hb.hero{padding-bottom:52px}
	.hero .pill{font-size:12.5px;padding:6px 13px 6px 11px}
	/* le gabarit pose des tailles en ligne (24/30/36/52px) qui sautent les media queries */
	.hero h1{font-size:16px;font-weight:700;letter-spacing:.01em;
		color:var(--sur-nuit-bas);margin-top:12px}
	.hook{font-size:clamp(28px,8.2vw,38px);line-height:1.06;margin-top:8px}
	.hero-p{font-size:16px;line-height:1.55;margin-top:14px}
	.hero-a{font-size:18px;line-height:1.3;margin-top:14px;gap:9px}
	.hero-c{margin-top:18px;gap:10px}
	.hero-c .btn{padding:14px 18px}
	.hero-c .btn.o{padding:12px 18px;font-size:15px}
	.photo{margin-top:22px}
	.photo img{height:200px}
	.app{margin:-30px 10px 0}
	.app .ln{padding:10px 13px}
	.app .ln b{font-size:12.5px}
	.app .ln small{font-size:11px}

	/* --- Transitions entre sections : un simple trait, rien qui bouge.
	   Le dégagement du trait est réglé ici, pas par le padding des titres. --- */
	.sc.hb{padding-bottom:52px}
	.sc.hb--s{padding-bottom:52px}
	.sc.hb:has(.br .h2){padding-bottom:52px}
	/* la phrase de transition se range juste sous les cartes, dans sa section */
	.br{position:static;bottom:auto;padding:0 24px;margin-top:32px}
	/* la section qui suit une liaison se dégage du trait sans toucher aux autres */
	.sc.hb + .sc{padding-top:52px}
	/* la phrase de liaison passe sous le titre de section, pas a son niveau */
	.bt2{font-size:17px;line-height:1.25;margin-top:6px;margin-bottom:0;max-width:22ch}
	.br .h2{font-size:17px;line-height:1.3;max-width:24ch;margin:0 auto}
	.bl{font-size:11px}
	.bc{display:none}
	/* pas de trait de liaison en mobile : seule la phrase de transition subsiste */
	.bf{display:none}
	.br:not(:has(.bt2,.h2)){display:none}
	.bf:after{display:none}

	/* --- Lisibilité générale --- */
	.sc{padding:52px 20px}
	.h2{font-size:clamp(25px,6.6vw,32px);line-height:1.14}
	.lead{font-size:16.5px;line-height:1.65}
	.in>.h2,.in>.lead{text-wrap:pretty}
	.kick{font-size:11.5px}
	.btn{font-size:15.5px}
	.fq .q{font-size:16px;gap:14px;align-items:flex-start;line-height:1.35}
	.fq p+p{font-size:15px;line-height:1.65}
	.tc .px{font-size:38px}
	.cb q{font-size:17px}
	.cq li,.tz li,.tc li{font-size:14.5px;line-height:1.5}
	.voix{font-size:14px;padding:9px 15px}
	.inc{font-size:14px;margin-top:16px;padding:11px 14px}
	.fm-rgpd{font-size:13px}
}

/* --- Téléphone : on resserre la barre sticky sur une largeur utile --- */
@media (max-width:560px){
	.wb-t em{display:none}
	/* compacte le compteur : "12 / 50 places · plus que 38" */
	.wb-n{font-size:0}
	.wb-n b{font-size:12px}
	.wb-n b:first-child:after{content:"\00A0 /\00A0 50 places";font-size:11px;
		font-weight:600;color:var(--sur-nuit-bas)}
	.wb-n b.r:before{content:"\00A0 \00B7\00A0 ";font-size:11px;color:var(--sur-nuit-bas)}
	.wb-o .btn{padding:11px 15px;font-size:13.5px}
	.hero-c .btn small{font-size:11.5px}
}

/* --- Petits écrans (<=380px) --- */
@media (max-width:380px){
	.sc{padding-left:16px;padding-right:16px}
	.wb .in{padding:9px 13px;column-gap:9px}
	.wb-t{font-size:12.5px}
	.wb-o .btn{padding:11px 13px;font-size:13px}
	.hook{font-size:27px}
	.hero h1{font-size:15px}
	.hero-a{font-size:17px}
	.h2{font-size:24px}
	.br .h2,.bt2{font-size:16px}
	.lead,.hero-p{font-size:15.5px}
	.app{margin:-28px 6px 0}
}