:root {
  
  --nuit-0: #0a1015; --nuit-1: #0e161c; --nuit-2: #121b22; --nuit-3: #162029;
  --nuit-carte: #1a252e;
  --creme: #f8f5ef; --blanc-casse: #f8f7f5; --blanc-respire: #fcfbf8;
  --sauge: #e5eae3; --sable: #efe8d8;
  
  --lagon-clair: #4cc3e6; --lagon: #0e7490;
  
  --sauge-action: #93c47d;       
  --sauge-encre: #4f6f45;        
  --sauge-nuit: #a9c79c;         
  --sauge-voile: rgba(169,199,156,.14);  
  --sauge-voile-clair: #eef3ea;  
  --ombre-carte: 0 1px 3px rgba(40,30,10,.06), 0 10px 24px rgba(40,30,10,.09);  
  --lumiere: #ffd9a3; --ambre: #e0a45c; --horizon: #fcefd6; --kraft: #c9a878;
  
  --encre: #000; --encre-2: #000; --encre-3: #000;
  --texte-nuit: #fff; --texte-nuit-2: #fff;
  --filet-clair: #e4dfd4; --filet-nuit: rgba(255,255,255,.08);

  
  --graisse-texte: 300;     
  --graisse-titre: 300;     
  --graisse-intitule: 400;  
  --graisse-gras: 600;      
  --graisse-action: 500;    
  --graisse-marque: 800;    

  --rayon-pilule: 999px; --rayon-carte: 20px; --rayon-carte-grande: 24px;
  --rayon-tuile: 14px;
  --ombre-clair: 0 30px 60px -28px rgba(19,29,38,.35), 0 1px 2px rgba(19,29,38,.06);
  --ombre-nuit: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  --ombre-carte-offre: 0 48px 96px -40px rgba(20,31,40,.45);

  --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 40px; --esp-5: 64px;
  --esp-6: 96px; --esp-7: 128px; --esp-8: 144px;
  --conteneur: 1200px; --marge: 20px;

  --inter: "Inter", system-ui, -apple-system, sans-serif;
  --main: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  
  --photo-p1: ; --photo-p2: ; --photo-p3: ; --photo-p4: ;
  --photo-p5: ; --photo-p6: ; --photo-p7: ;
  
  --photo-p8: url(/photos/p8-route.jpg);

  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20filter%3D%22url(%23g)%22%2F%3E%3C%2Fsvg%3E");
}
@media (min-width: 1024px) { :root { --marge: 48px; } }
@media (min-width: 1440px) { :root { --marge: 64px; } }


*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--nuit-0); color: var(--encre);
  font: var(--graisse-texte) 17px/1.6 var(--inter); overflow-x: clip;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

ul:where(:not(.page-lecture *)) { list-style: none; margin: 0; padding: 0; }
:is(h1, h2, h3, p):where(:not(.page-lecture *)) { margin: 0; }


h1, h2 { font-family: var(--inter); font-weight: var(--graisse-titre); text-wrap: balance; text-transform: uppercase; letter-spacing: .02em; }

h1, h2 { overflow-wrap: break-word; }
h3 { font-weight: var(--graisse-intitule); }
:focus-visible { outline: 2px solid var(--lumiere); outline-offset: 3px; }
.nuit { -webkit-font-smoothing: antialiased; }

.conteneur { max-width: var(--conteneur); margin: 0 auto; padding-inline: var(--marge); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 1023px) { .grille > * { grid-column: 1 / -1; } }


.ordi { display: none; }
@media (min-width: 768px) { .ordi { display: block; } .mobile { display: none; } }
span.ordi { display: none; }
@media (min-width: 768px) { span.ordi { display: inline; } }


.surtitre {
  font: var(--graisse-intitule) 12px/1.4 var(--inter); letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-3);
}
.nuit .surtitre { color: var(--texte-nuit-2); }


h1 { font-size: clamp(26px, 8vw, 30px); line-height: 1.22; letter-spacing: .02em; color: #fff; }
.h2-section { font-size: clamp(24px, 7.5vw, 28px); line-height: 1.2; letter-spacing: .02em; max-width: 22ch; }
.h2-etape { font-size: 24px; line-height: 1.25; letter-spacing: .02em; }
.nuit .h2-section, .nuit .h2-etape { color: #fff; }
.phrase { font: var(--graisse-texte) 22px/1.3 var(--inter); letter-spacing: -.01em; }
.sous { font: var(--graisse-texte) 19px/1.3 var(--inter); letter-spacing: -.01em; }
.corps { font-size: 17px; line-height: 1.6; max-width: 38ch; }
.nuit .corps { color: var(--texte-nuit-2); }
.legende { font-size: 15px; line-height: 1.55; }
.lagon-clair { color: var(--lagon-clair); }
.lagon { color: var(--lagon); }
@media (min-width: 1024px) {
  .surtitre { font-size: 13px; }
  h1 { font-size: 48px; line-height: 1.14; }
  .h2-section { font-size: 40px; }
  .h2-etape { font-size: 28px; }
  .phrase { font-size: 28px; }
  .sous { font-size: 22px; }
  .corps { font-size: 19px; }
}
@media (min-width: 1280px) { h1 { font-size: 56px; } }

@media (min-width: 1280px) { .hero h1 { white-space: nowrap; } }


.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; border-radius: var(--rayon-pilule);
  
  color: #fff;
  background: var(--sauge-action);
  font: var(--graisse-action) 16px/1 var(--inter); text-decoration: none; white-space: nowrap;
  transition: transform 160ms ease;
}
.cta .fleche { display: inline-block; transition: transform 160ms ease; }
.cta:hover { transform: translateY(-1px); }
.cta:hover .fleche { transform: translateX(3px); }
.cta:active { transform: translateY(0) scale(.98); box-shadow: none; }
.cta.grand { height: 52px; }
.cta.bloc { width: 100%; }
.cta.petit { height: 36px; padding: 0 18px; font-size: 15px; }
@media (min-width: 1024px) { .cta { height: 52px; } .cta.petit { height: 40px; } }
.cta-texte {
  display: inline-flex; align-items: center; gap: 12px; color: #fff;
  font: var(--graisse-action) 15px/1 var(--inter); text-decoration: underline; text-underline-offset: 6px;
  text-decoration-color: rgba(255,255,255,.5);
}
.cta-texte .rond {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  display: none; place-items: center;
}



.apres-chapitre { margin: 48px 0 0; padding-bottom: 72px; text-align: center; }
.apres-chapitre .cta-texte { color: var(--encre); text-decoration-color: rgba(0,0,0,.28); }
.apres-chapitre .cta-texte .precision { color: var(--encre-3); }
.nuit .apres-chapitre .cta-texte { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.nuit .apres-chapitre .cta-texte .precision { color: var(--texte-nuit-2); }

.apres-chapitre .cta-texte .rond { border-color: rgba(0,0,0,.28); }
.apres-chapitre .cta-texte svg { stroke: var(--encre); }
.nuit .apres-chapitre .cta-texte .rond { border-color: rgba(255,255,255,.5); }
.nuit .apres-chapitre .cta-texte svg { stroke: #fff; }

.cta-texte svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) { .cta-texte { font-size: 17px; } .cta-texte .rond { display: grid; } }
.mention { font-size: 12px; color: var(--texte-nuit-2); }
@media (min-width: 1024px) { .mention { font-size: 13px; } }


.photo {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; z-index: 0;
  --h: 78%; --teinte: 0deg;
  background: linear-gradient(180deg,
    #0a1015 0%, #0f1820 30%, #33424d 55%,
    #b8804f calc(var(--h) - 10%), #ffd9a3 calc(var(--h) - 1%),
    #fcefd6 var(--h), #2a2f33 calc(var(--h) + 1%), #1a1f23 100%);
  filter: hue-rotate(var(--teinte));
}
.photo::before { 
  content: ""; position: absolute; left: 0; right: 0; top: var(--h); height: 1px; z-index: 0;
  background: rgba(255,220,160,.55); box-shadow: 0 0 24px 6px rgba(255,217,163,.35);
  opacity: var(--horizon-opacite, .7);
}
.photo::after { 
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 60%, transparent 40%, rgba(10,16,21,.55) 100%), var(--grain);
  background-size: auto, 200px 200px; mix-blend-mode: overlay; opacity: .07;
}

.photo > .image {
  position: absolute; inset: -40px 0 0; z-index: 1; will-change: transform;
  background-repeat: no-repeat; background-size: cover; background-position: 65% 45%;
  filter: hue-rotate(calc(-1 * var(--teinte)));
}
.photo > .scrim { position: absolute; inset: 0; z-index: 2; filter: hue-rotate(calc(-1 * var(--teinte))); }
.p1 { --h: 34%; --teinte: 0deg; }

.p1 { --horizon-opacite: 0; }
.p1 > .image { background-image: var(--photo-p1); background-position: 70% 30%; }
.p1 > .scrim { background: linear-gradient(180deg, rgba(10,16,21,.35) 0%, rgba(10,16,21,.9) 70%); }
.p2 { --h: 88%; --teinte: -12deg; }
.p2 > .image { background-image: var(--photo-p2); }
.p2 > .scrim { background: linear-gradient(180deg, rgba(20,31,40,0) 0%, rgba(20,31,40,.95) 60%); }
.p3 { --h: 60%; --teinte: 6deg; opacity: .85; } .p3 > .image { background-image: var(--photo-p3); }
.p4 { --h: 92%; --teinte: -8deg; opacity: .85; } .p4 > .image { background-image: var(--photo-p4); }
.p5 { --h: 50%; --teinte: 0deg; opacity: .85; } .p5 > .image { background-image: var(--photo-p5); }
.p6 { --h: 70%; --teinte: -4deg; }
.p6 > .image { background-image: var(--photo-p6); background-position: 50% 50%; }
.p6 > .scrim { background: rgba(30,43,53,.78); }
.p6::after { opacity: .10; }
.p8 { --h: 80%; --teinte: 0deg; --horizon-opacite: 0; } 
.p8 > .route { display: none; }  
.p8 > .image { background-image: var(--photo-p8); background-position: 50% 60%; }
.p8 > .scrim { background: linear-gradient(180deg, rgba(10,16,21,.25) 0%, rgba(10,16,21,.65) 100%); }
.p8 > .route { 
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(255,255,255,.18);
  clip-path: polygon(50% var(--h), 50.4% var(--h), 78% 100%, 74% 100%, 50% calc(var(--h) + .4%), 26% 100%, 22% 100%);
}
@media (min-width: 1024px) {
  .p1 > .image { background-position: 65% 45%; }
  .p1 > .scrim {
    background:
      linear-gradient(90deg, rgba(10,16,21,.85) 0%, rgba(10,16,21,.45) 45%, transparent 70%),
      linear-gradient(180deg, transparent 55%, rgba(10,16,21,.75) 100%);
  }
  .p2 > .scrim { background: linear-gradient(90deg, rgba(20,31,40,.92) 0%, rgba(20,31,40,.55) 55%, rgba(20,31,40,.15) 100%); }
}


.bandeau { display: none; position: relative; height: 320px; }
@media (min-width: 1024px) { .bandeau { display: block; } }



.gaufre { background-image: none; }
.creme { background-color: var(--creme); --voile: rgba(248,245,239,.95); }
.blanc-casse { background-color: var(--blanc-casse); --voile: rgba(248,247,245,.95); }
.blanc-respire { background-color: var(--blanc-respire); --voile: rgba(252,251,248,.95); }


.telephone {
  --tel: 300px; --r: calc(var(--tel) * .13);
  width: var(--tel); max-width: 100%; aspect-ratio: 390 / 844; padding: 8px; margin: 0;
  background: #0b1014; border-radius: var(--r); position: relative; overflow: hidden;
  box-shadow: var(--ombre-clair), inset 0 0 0 1px rgba(255,255,255,.10);
}
.nuit .telephone { box-shadow: var(--ombre-nuit), inset 0 0 0 1px rgba(255,255,255,.10); }
.telephone::before { 
  content: "libre !"; position: absolute; inset: 8px; border-radius: calc(var(--r) - 8px);
  background: var(--sable); color: var(--sauge-encre); font: 700 22px/1 var(--inter);
  display: grid; place-items: center;
}

.telephone > img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: calc(var(--r) - 8px);
}
.telephone.double > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); opacity: 0; transition: opacity 350ms ease; }
.telephone.double > img.actif { opacity: 1; }


.annotation {
  position: absolute; pointer-events: none; font: 600 22px/1.2 var(--main);
  transform: rotate(-4deg); color: var(--sauge-nuit); max-width: 220px;
}
.annotation.encre { color: var(--sauge-encre); }
.annotation.blanche { color: var(--texte-nuit); }
.annotation svg { width: 70px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (min-width: 1024px) { .annotation { font-size: 26px; } }


@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; transition-delay: var(--d, 0ms); }
  .js [data-reveal].vu { opacity: 1; transform: none; }
  .js [data-reveal] > .annotation { opacity: 0; transition: opacity 500ms ease 400ms; transform: rotate(-4deg); }
  .js [data-reveal].vu > .annotation { opacity: 1; }
}


.barre {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 56px;
  background: linear-gradient(180deg, rgba(10,16,21,.55), transparent) top / 100% 120px no-repeat;
  transition: background-color 220ms ease, backdrop-filter 220ms ease;
}
.barre.defilee { background-color: rgba(10,16,21,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.barre .conteneur { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { font: var(--graisse-marque) 22px/1 'Inter Marque', var(--inter); color: #fff; text-decoration: none; letter-spacing: -.03em; }
.marque .lagon-clair { color: var(--lagon-clair); }
.barre nav { display: none; gap: 32px; }
.barre nav a { color: rgba(243,241,236,.8); font: var(--graisse-intitule) 15px/1 var(--inter); text-decoration: none; letter-spacing: .01em; }
.barre nav a:hover, .barre nav a[aria-current] { color: #fff; }
.barre .actions { display: flex; align-items: center; gap: 12px; }
.barre .connexion { display: none; color: #fff; font: var(--graisse-intitule) 15px/1 var(--inter); text-decoration: none; }
.menu-bouton {
  width: 44px; height: 44px; border: 0; background: none; color: #fff; padding: 10px; cursor: pointer;
  display: grid; gap: 6px; align-content: center;
}
.menu-bouton span { display: block; height: 1.5px; background: currentColor; transition: transform 220ms ease, opacity 220ms ease; }
.barre.ouvert .menu-bouton span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.barre.ouvert .menu-bouton span:nth-child(2) { opacity: 0; }
.barre.ouvert .menu-bouton span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.panneau {
  position: fixed; inset: 56px 0 0; background: var(--nuit-0); display: none;
  flex-direction: column; justify-content: center; gap: 8px; padding: 0 var(--marge);
}
.barre.ouvert .panneau { display: flex; }
.panneau a { color: #fff; font: var(--graisse-intitule) 28px/1.2 var(--inter); text-decoration: none; padding: 12px 0; }
.panneau a.connexion-mobile { color: var(--texte-nuit-2); font: var(--graisse-intitule) 17px/1 var(--inter); margin-top: 24px; }
html.menu-ouvert { overflow: hidden; }
@media (min-width: 1024px) {
  .barre { height: 64px; }
  .barre nav { display: flex; }
  .barre .connexion { display: inline; }
  .menu-bouton, .panneau { display: none !important; }
}

.barre nav a { white-space: nowrap; }
@media (min-width: 1024px) { .barre nav { gap: 22px; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .barre nav { gap: 18px; }
  .barre nav a { font-size: 14px; }
  .barre .cta.petit .ordi { display: none; }
  .barre .cta.petit .mobile { display: inline; }
}


.hero {
  
  position: relative; z-index: 3; min-height: 720px; height: 100svh;
  padding-top: 96px; overflow: visible;
}
.hero .conteneur { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
.hero .texte { max-width: 600px; }
.hero h1 { margin-top: 16px; }
.hero .sous-hero { margin-top: 24px; font-size: 17px; line-height: 1.5; color: #fff; max-width: 34ch; }


.hero .cta-texte .precision { font-size: .85em; opacity: .72; white-space: nowrap; }
@media (max-width: 420px) { .hero .cta-texte .precision { display: none; } }

.hero .ligne-fonctions {
  margin-top: 24px; font-size: 16px; line-height: 1.7; max-width: 42ch;
  color: #fff; letter-spacing: .01em;
}
.hero .rangee { margin-top: 32px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.hero .rangee .cta-texte { justify-content: center; }
.hero .mention { margin-top: 14px; text-align: center; }

.hero .ligne-auteur { margin-top: 8px; font: var(--graisse-texte) 14px/1.4 var(--inter); color: var(--texte-nuit-2); }
.hero .telephone { --tel: 240px; margin: 32px auto 0; }
.hero .annotation { display: none; }
.hero .telephone-cadre { position: relative; margin-top: auto; }
@media (min-width: 1024px) {
  
  
  .hero { height: auto; min-height: clamp(640px, 100svh, 920px); max-height: none; padding-top: 104px; }
  .hero .conteneur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .hero .texte { grid-column: 1 / 8; transform: translateY(-24px); }
  .hero .sous-hero { font-size: 21px; }
  .hero .ligne-fonctions { font-size: 18px; }
  
  .hero .rangee { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
  .hero .rangee .cta-texte { white-space: nowrap; }
  .hero .mention { text-align: left; }
  .hero .telephone-cadre { grid-column: 8 / 13; align-self: end; margin: 0; position: relative; }
  .hero .telephone { --tel: 300px; margin: 0 0 -96px auto; }
}
@media (min-width: 1280px) {
  .hero .texte { grid-column: 1 / 7; }
  .hero .telephone { --tel: 340px; }
  
  
  .hero .annotation { display: block; right: 0; left: auto; top: auto; bottom: 100%; width: 320px; margin: 0 0 8px; text-align: right; }
  .hero .annotation svg { margin-left: auto; transform: scaleY(-1); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero .anim { animation: montee 600ms ease both; animation-delay: var(--d, 0ms); }
  .js .hero .telephone { animation: montee-tel 800ms cubic-bezier(.2,.7,.2,1) both 290ms; }
  .js .hero .annotation { animation: fondu 500ms ease both 1000ms; }
  .js .p8::before { animation: horizon 1200ms ease both; }
}
@keyframes montee { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes montee-tel { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes horizon { from { opacity: .45; } to { opacity: .7; } }


.transition { position: relative; z-index: 2; padding: 88px 0 80px; }
.transition .bloc { position: relative; }
.transition .relais { margin-top: 24px; font: var(--graisse-texte) 19px/1.3 var(--inter); color: var(--sauge-encre); }
.transition .annotation { position: relative; display: block; margin: 32px 0 0; max-width: 300px; }
.benefices {
  margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--filet-clair);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px;
}
.benefices svg { width: 24px; height: 24px; stroke: var(--sauge-encre); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.benefices h3 { margin-top: 16px; font: var(--graisse-intitule) 18px/1.2 var(--inter); letter-spacing: -.01em; min-height: 2.4em; }
.benefices p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--encre-2); }
@media (min-width: 1024px) {
  .transition { padding: 128px 0 112px; }
  .transition .bloc { grid-column: 2 / 9; }
  .transition .relais { font-size: 22px; }
  .transition .annotation { position: absolute; right: -300px; top: 10%; margin: 0; max-width: 260px; }
  .benefices { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
  .benefices svg { width: 28px; height: 28px; }
  .benefices h3 { font-size: 20px; }
  .benefices p { font-size: 17px; }
}


.independance { position: relative; background: var(--nuit-1); min-height: 860px; display: flex; align-items: flex-end; }
.independance .conteneur { position: relative; z-index: 2; width: 100%; padding-bottom: 64px; padding-top: 62vh; }
.independance .texte { max-width: 600px; }
.independance .h2-section { margin-top: 12px; }
.independance .corps { margin-top: 24px; }
.independance .lignes { margin-top: 24px; font-size: 19px; line-height: 1.5; color: var(--texte-nuit-2); }
.independance .lignes > span { display: block; }
.independance .relais { margin-top: 24px; font: var(--graisse-texte) 22px/1.3 var(--inter); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .independance .lignes > span { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; transition-delay: calc(var(--n) * 120ms); }
  .js .independance .vu .lignes > span, .js .independance [data-reveal].vu .lignes > span { opacity: 1; transform: none; }
  .js .independance .relais { opacity: 0; transition: opacity 600ms ease 760ms; }
  .js .independance [data-reveal].vu .relais { opacity: 1; }
}
@media (min-width: 1024px) {
  .independance { min-height: 720px; align-items: center; }
  .independance .conteneur { padding: 0 var(--marge); }
  .independance .texte { grid-column: 1 / 7; }
}


.parcours { position: relative; }
.tete { padding: 64px 0 24px; }
.tete .h2-section { margin-top: 12px; }
.tete .corps { margin-top: 16px; }
.numero { font: var(--graisse-intitule) 15px/1 var(--inter); color: var(--sauge-encre); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.nuit .numero { color: var(--sauge-nuit); }
.etape { padding-top: 64px; }
.etape .surtitre { margin-top: 12px; }
.etape .h2-etape { margin-top: 12px; }
.etape .corps { margin-top: 16px; }
.etape .corps + .corps { margin-top: 12px; }
.etape .telephone { --tel: 300px; margin: 40px auto 0; }
.etape:last-child { padding-bottom: 72px; }
.chaine { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 16px; font: var(--graisse-intitule) 15px/1.4 var(--inter); font-variant-numeric: tabular-nums; color: var(--encre); }
.nuit .chaine { color: var(--texte-nuit); }
.epingle { display: none; }
@media (min-width: 1024px) {
  .tete { padding: 96px 0 0; }
  .tete .bloc { grid-column: 2 / 11; }
  .grille-etapes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .js .epingle { display: block; grid-column: 2 / 6; position: sticky; top: 96px; height: calc(100svh - 96px); min-height: 544px; display: flex; align-items: center; }
  
  .js .epingle .telephone { --tel: min(360px, calc((100svh - 160px) * .462)); margin: 0; }
  .etapes { grid-column: 7 / 13; }
  .js .etapes .telephone { display: none; }
  .etape { min-height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: center; }
  .etape.courte { min-height: 70svh; }
  .etape:last-child { padding-bottom: 0; }
  .miroir .js .epingle, .js .miroir .epingle { grid-column: 8 / 12; }
  .miroir .etapes { grid-column: 1 / 7; grid-row: 1; }
  .js .miroir .epingle { grid-row: 1; }
  .chapitre-a .epingle, .chapitre-c .epingle { grid-row: 1; }
  .chapitre-a .etapes, .chapitre-c .etapes { grid-row: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .epingle .telephone { transform: scale(.985); transition: transform 700ms ease; }
  .js .epingle.vu .telephone { transform: none; }
}


.moment { position: relative; padding: 72px 0; }
.moment .h2-section { margin-top: 12px; }
.moment .corps { margin-top: 16px; }
.moment .telephone { --tel: 330px; margin: 40px auto 0; }
.moment .mots { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font: var(--graisse-texte) 17px/1.4 var(--inter); color: var(--texte-nuit-2); }
.moment .mots li { transition: color 400ms ease, opacity 400ms ease, transform 400ms ease; }
.moment .mots li.fort { color: #fff; font-weight: var(--graisse-gras); }
.moment .annotation { position: relative; margin: 32px auto 0; display: block; text-align: center; max-width: none; }
.moment .conteneur { position: relative; }
.moment .annotation svg { margin: 0 auto; }
.moment .cadre-tel { position: relative; }
@media (min-width: 1024px) {
  .moment { min-height: 100svh; padding: 96px 0; display: flex; align-items: center; }
  .moment .conteneur { width: 100%; }
  .moment .question { grid-column: 1 / 5; align-self: center; }
  .moment .question .h2-section { font-size: 32px; }
  .moment .cadre-tel { grid-column: 5 / 9; justify-self: center; }
  .moment .telephone { --tel: min(420px, calc((100svh - 160px) * .462)); margin: 0; }
  .moment .mots { grid-column: 9 / 13; align-self: center; grid-template-columns: 1fr; margin: 0; }
  .moment .annotation { position: absolute; left: 50%; bottom: -84px; margin: 0; transform: translateX(-50%) rotate(-4deg); width: 300px; text-align: center; }
  .moment .minh { min-height: 760px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .moment .telephone { transform: translateY(48px); opacity: 0; transition: transform 900ms cubic-bezier(.2,.7,.2,1), opacity 900ms ease; }
  .js .moment.vu .telephone { transform: none; opacity: 1; }
  .js .moment .mots li { opacity: 0; transform: translateY(8px); transition-delay: calc(var(--n) * 70ms); }
  .js .moment.vu .mots li { opacity: 1; transform: none; }
  .js .moment .mots li.fort { color: var(--texte-nuit-2); }
  .js .moment.vu .mots li.fort { color: #fff; transition: opacity 400ms ease calc(var(--n) * 70ms), transform 400ms ease calc(var(--n) * 70ms), color 300ms ease calc(var(--n) * 70ms + 300ms); }
  .js .moment .annotation { opacity: 0; transition: opacity 500ms ease 1300ms; }
  .js .moment.vu .annotation { opacity: 1; }
}


.integrations { padding: 40px 0 96px; position: relative; }
.integrations .texte .h2-section { margin-top: 12px; }
.integrations .texte .sous { margin-top: 16px; }
.integrations .texte .corps { margin-top: 16px; }
.carte-outils {
  margin-top: 40px; background: #fff; border-radius: var(--rayon-carte); padding: 24px;
  box-shadow: var(--ombre-carte); position: relative;
}
.outils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
.outils li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.outils .logo {
  width: 100%; max-width: 56px; aspect-ratio: 1; border-radius: var(--rayon-tuile); overflow: hidden;
  background: #f3f1ec; display: grid; place-items: center;
}
.outils .logo img { width: 100%; height: 100%; object-fit: contain; }
.outils .logo.ev { background: #1d4f91; color: #fff; font: 700 18px/1 var(--inter); letter-spacing: .02em; }
.outils .nom { font: var(--graisse-intitule) 13px/1.2 var(--inter); color: var(--encre); }
.pilule { font: var(--graisse-intitule) 10px/1 var(--inter); padding: 3px 6px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; max-width: 100%; }
@media (max-width: 359px) { .pilule { white-space: normal; line-height: 1.2; } }

.pilule.brancher { color: var(--sauge-encre); background: #fff; box-shadow: inset 0 0 0 1px var(--sauge-action); }
.pilule.raccourci { color: var(--encre-2); background: #eeeeea; }
.pilule.bientot { color: var(--sauge-encre); background: var(--sauge-voile-clair); }

.pilule.marche { color: #fff; background: var(--sauge-encre); }
.legende-outils { margin-top: 32px; font-size: 15px; line-height: 1.55; color: var(--encre-2); display: grid; gap: 8px; }
.legende-outils b { color: var(--encre); font-weight: var(--graisse-gras); }
.fermeture { margin-top: 32px; font: var(--graisse-texte) 19px/1.3 var(--inter); }
@media (prefers-reduced-motion: no-preference) {
  .js .outils li { opacity: 0; transition: opacity 400ms ease; transition-delay: calc(var(--n) * 40ms); }
  .js .carte-outils.vu .outils li { opacity: 1; }
}
@media (min-width: 1024px) {
  .integrations { padding: 64px 0 128px; }
  .integrations .texte { grid-column: 1 / 6; }
  .integrations .cote { grid-column: 6 / 13; position: relative; }
  .carte-outils { margin-top: 0; padding: 32px; }
  .outils { grid-template-columns: repeat(5, 1fr); gap: 24px 12px; }
  .outils .logo { max-width: 64px; }
  .outils .logo img { width: 48px; height: 48px; }
  .pilule { font-size: 11px; padding: 4px 8px; }
  .legende-outils { grid-column: 6 / 13; }
  .fermeture { grid-column: 6 / 13; }
}


.manifeste { position: relative; background: var(--nuit-3); padding: 96px 0; }
.manifeste .conteneur { position: relative; z-index: 2; }
.manifeste .h2-section { margin-top: 12px; }
.manifeste .prose { margin-top: 32px; color: #fff; font-size: 19px; line-height: 1.6; max-width: 38ch; display: grid; gap: 20px; }
.manifeste .prose .phrase { color: #fff; margin: 12px 0; }
.manifeste .signature { margin-top: 24px; color: var(--texte-nuit-2); font-size: 15px; }
.manifeste .cote-seulement { display: none; }
@media (min-width: 1024px) { .manifeste .cote-seulement { display: block; } }
.manifeste .lien { display: inline-block; margin-top: 32px; color: #fff; font: var(--graisse-intitule) 17px/1 var(--inter); text-underline-offset: 6px; }
@media (min-width: 1024px) {
  .manifeste { padding: 144px 0; }
  .manifeste .bloc { grid-column: 2 / 12; display: grid; grid-template-columns: minmax(0, 38ch) minmax(0, 1fr); column-gap: 96px; align-items: center; }
  .manifeste .surtitre, .manifeste .h2-section { grid-column: 1 / -1; }
  .manifeste .prose { grid-column: 1; }
  .manifeste .prose .phrase { display: none; }
  .manifeste .cote { grid-column: 2; grid-row: 3 / span 3; align-self: center; }
  .manifeste .cote .phrase { font: var(--graisse-texte) 30px/1.25 var(--inter); letter-spacing: -.02em; color: #fff; margin: 0; }
  .manifeste .cote .signature { margin-top: 24px; }
  .manifeste .prose { font-size: 21px; }
}


.fondateur { background: var(--sauge); padding: 80px 0; }

.fondateur .texte { margin-top: 0; max-width: 62ch; }
.fondateur .nom { font: var(--graisse-intitule) 26px/1.1 var(--inter); letter-spacing: -.01em; }
.fondateur .fonction { margin-top: 6px; color: var(--encre-2); font-size: 17px; }
.fondateur .phrase { margin-top: 24px; font-size: 22px; }
.fondateur .corps { margin-top: 16px; }
.fondateur .filet { width: 48px; height: 2px; background: var(--kraft); margin-top: 32px; }
@media (min-width: 1024px) {
  .fondateur { padding: 80px 0; }
  
  .fondateur .texte { grid-column: 2 / 10; margin: 0; }
}


.respiration {
  position: relative; height: 140svh;
  background: linear-gradient(180deg, #0e161c 0%, #0e161c 25%, #fcfbf8 75%);
}
.respiration .colle { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; text-align: center; }
.respiration .lignes { font: var(--graisse-texte) 24px/1.35 var(--inter); color: #fff; letter-spacing: -.01em; }
.respiration .lignes span { display: block; }
.respiration .maintenant { margin-top: 32px; font: var(--graisse-titre) 40px/1.08 var(--inter); letter-spacing: -.03em; color: var(--encre); }
.respiration .fin { margin-top: 32px; font-size: 19px; color: var(--encre-2); max-width: 36ch; margin-inline: auto; }
@media (min-width: 1024px) {
  .respiration { height: 150svh; }
  .respiration .bloc { grid-column: 3 / 11; }
  .respiration .lignes { font-size: 32px; }
  .respiration .maintenant { margin-top: 48px; font-size: 56px; }
  .respiration .fin { margin-top: 48px; font-size: 22px; }
}

@supports (color: color-mix(in srgb, red, blue)) {
  .js .respiration { background: color-mix(in srgb, #fcfbf8 calc(var(--p, 0) * 125%), #0e161c); }
}
.js .respiration .lignes span { opacity: calc(1 - .75 * clamp(0, (var(--p, 0) - var(--n) * .08) / .3, 1)); }
.js .respiration .maintenant, .js .respiration .fin { opacity: clamp(0, (var(--p, 0) - .6) * 5, 1); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .respiration { animation: aube linear both; animation-timeline: view(); animation-range: contain 0% contain 80%; background-image: none; }
    .js .respiration .lignes span { animation: efface linear both; animation-timeline: view(); animation-range: contain calc(var(--n) * 8%) contain calc(var(--n) * 8% + 30%); opacity: 1; }
    .js .respiration .maintenant, .js .respiration .fin { animation: fondu linear both; animation-timeline: view(); animation-range: contain 60% contain 80%; opacity: 1; }
  }
}
@keyframes aube { from { background-color: #0e161c; } to { background-color: #fcfbf8; } }
@keyframes efface { from { opacity: 1; } to { opacity: .25; } }


.offre { padding: 80px 0 96px; }
.offre .texte .h2-section { margin-top: 12px; }
.offre .texte .sous { margin-top: 16px; }
.offre .texte .corps { margin-top: 16px; }
.carte-offre {
  margin-top: 40px; background: var(--nuit-1); color: var(--texte-nuit); border-radius: var(--rayon-carte-grande);
  padding: 32px 24px; box-shadow: var(--ombre-carte-offre);
}
.prix { display: grid; gap: 24px; }
.prix li { transition: opacity 500ms ease, transform 500ms ease; transition-delay: calc(var(--n) * 120ms); }
.prix .chiffre { font: var(--graisse-texte) 40px/1 var(--inter); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.prix .chiffre small { font-size: .45em; margin-left: .2em; letter-spacing: 0; vertical-align: .55em; }
.prix .fondateur-prix .chiffre { color: var(--sauge-nuit); }
.prix .etiquette { margin-top: 8px; font: var(--graisse-intitule) 13px/1.4 var(--inter); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-nuit-2); }
.carte-offre .reserve { margin-top: 32px; font-size: 15px; color: var(--texte-nuit); }
.carte-offre .conditions { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--texte-nuit-2); }
.carte-offre .conditions span { display: block; }
.carte-offre .cta { margin-top: 24px; }
.carte-offre .sous-cta { margin-top: 12px; font-size: 13px; color: var(--texte-nuit-2); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .carte-offre[data-reveal] { transform: translateY(24px); }
  .js .carte-offre[data-reveal].vu { transform: none; }
  .js .prix li { opacity: 0; transform: translateY(8px); }
  .js .carte-offre.vu .prix li { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .offre { padding: 96px 0 128px; }
  .offre .texte { grid-column: 2 / 7; }
  .carte-offre { grid-column: 7 / 13; margin: 0; padding: 40px; }
  .prix { gap: 32px; }
  .prix .chiffre { font-size: 56px; }
}
@media (min-width: 1600px) { .moment .question .h2-section { font-size: 40px; } }


.final { position: relative; min-height: 720px; height: 100svh; display: flex; align-items: center; text-align: center; }
.final .conteneur { position: relative; z-index: 2; width: 100%; }
.final h2 { font-size: clamp(24px, 7.5vw, 28px); line-height: 1.2; letter-spacing: .02em; color: #fff; }
.final .ligne { margin-top: 16px; color: #fff; font-size: 17px; }
.final .cta { margin-top: 32px; }
.final .annotation { position: relative; display: block; margin: 24px auto 0; text-align: center; max-width: none; }
.final .annotation svg { margin: 0 auto; }
@media (min-width: 1024px) {
  .final { min-height: 640px; max-height: 900px; }
  .final .bloc { grid-column: 3 / 11; }
  .final h2 { font-size: 52px; }
  .final .ligne { font-size: 21px; }
  .final .cta { width: auto; }
  .final .annotation { position: absolute; right: var(--marge); bottom: 64px; margin: 0; width: auto; white-space: nowrap; text-align: right; }
  .final .annotation svg { margin: 0 0 0 auto; transform: scaleX(-1); }
}


.pied { background: var(--nuit-0); color: var(--texte-nuit-2); padding: 64px 0 40px; font-size: 15px; line-height: 1.6; }
.pied .marque { display: inline-block; margin-bottom: 16px; }
.pied p + p { margin-top: 16px; }
.pied strong { color: var(--texte-nuit); }
.pied a { color: var(--texte-nuit); }
.pied .liens { display: grid; gap: 0; margin-top: 32px; align-content: start; }
.pied .liens a { display: flex; align-items: center; min-height: 48px; font-size: 17px; text-decoration: none; }

.pied .liens a { gap: .28em; }
.pied .liens a:hover { text-decoration: underline; }
.pied .legal { margin-top: 32px; }

.pied .par-quitus { display: flex; align-items: center; gap: 12px; margin: -4px 0 0; font-size: 15px; color: var(--texte-nuit-2); }
.pied .par-quitus img { display: block; width: 150px; height: auto; border-radius: 12px; }
@media (min-width: 1024px) {
  .pied .colonne-1 { grid-column: 1 / 5; }
  .pied .liens { grid-column: 6 / 9; margin: 0; }
  .pied .liens.droite { grid-column: 10 / 13; }
  .pied .liens a { min-height: 32px; font-size: 15px; }
  .pied .legal { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid var(--filet-nuit); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .photo > .image { transform: none !important; }
}



.bascule-ecrans {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 7px 8px 7px 16px;
  background: #fff; border: 1px solid var(--filet-clair); border-radius: 999px;
  box-shadow: 0 6px 18px rgba(19, 29, 38, .09);
  font: var(--graisse-intitule) 14px/1 var(--inter);
}
.bascule-titre { color: var(--encre-2); }
.bascule-ecrans button {
  appearance: none; cursor: pointer; padding: 7px 15px; min-height: 36px;
  font: var(--graisse-intitule) 14px/1 var(--inter); color: var(--encre-2);
  background: var(--creme); border: 1px solid var(--filet-clair); border-radius: 999px;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.bascule-ecrans button:hover { color: var(--sauge-encre); border-color: var(--sauge-encre); background: var(--sauge-voile-clair); }
.bascule-ecrans button[aria-pressed="true"] {
  color: #fff; background: var(--sauge-encre); border-color: var(--sauge-encre);
}
.bascule-ecrans button:focus-visible { outline: 2px solid var(--sauge-encre); outline-offset: 2px; }



.hero .photo-hero {
  margin: 32px 0 0; max-width: 640px; margin-inline: auto;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.hero .photo-hero img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .hero .photo-hero { margin: 0 0 -64px auto; max-width: none; width: 100%; }
}

@media (max-width: 1023px) {
  .hero { height: auto; }
  .hero .photo-hero { margin-bottom: -40px; }
}


.photo-section {
  margin: 32px 0 0; max-width: 640px;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}
.photo-section img { display: block; width: 100%; height: auto; }



.etape .telephone {
  aspect-ratio: 390 / 560;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.etape .telephone img { object-fit: cover; object-position: top; }


.prix .sans-engagement { color: #fff; font-weight: var(--graisse-gras); }



.page-lecture { padding: 96px 0 72px; }
@media (max-width: 767px) { .page-lecture h1 { font-size: clamp(26px, 8vw, 30px); line-height: 1.2; } }
.page-lecture,
.page-lecture h1, .page-lecture h2, .page-lecture h3, .page-lecture h4,
.page-lecture p, .page-lecture li, .page-lecture dt, .page-lecture dd,
.page-lecture td, .page-lecture th, .page-lecture strong, .page-lecture em {
  color: var(--encre);
}
.page-lecture .chapeau, .page-lecture .corps, .page-lecture figcaption { color: var(--encre-2); }


.page-lecture .appel {
  background: #fff; box-shadow: var(--ombre-carte);
  border-color: var(--filet-clair, rgba(19,29,38,.12));
}
.page-lecture .appel h2, .page-lecture .appel p { color: var(--encre); }
.page-lecture .appel .surtitre { color: var(--encre-3); }

.page-lecture .surtitre { color: var(--encre); }
.page-lecture h2, .page-lecture h3 { color: var(--encre); }
.page-lecture a { color: var(--sauge-encre); }
.page-lecture a:hover { color: var(--encre); }

.page-lecture .bouton, .page-lecture .cta { color: inherit; }


.page-lecture .bouton:not(.secondaire) { color: #fff; }


.page-lecture {
  --surface-0: #efe8d8;
  --surface-1: #f6f1e5;
  --accent: #4f6f45;
  --accent-hover: #4f6f45;
  --accent-surface: #eef3ea;
  --text-primary: #000;
  --text-muted: #000;
  --border: #ddd3bd;
  --papier: #fbf7ee;
}
.page-lecture.nuit {
  --surface-0: #16161a;
  --surface-1: #1d1d22;
  --accent: #a9c79c;
  --accent-hover: #4f6f45;
  --accent-surface: rgba(169,199,156,.14);
  --text-primary: #fff;
  --text-muted: #fff;
  --border: #33312d;
  --papier: #1d1d22;
}


.page-lecture.nuit,
.page-lecture.nuit h1, .page-lecture.nuit h2, .page-lecture.nuit h3,
.page-lecture.nuit p, .page-lecture.nuit li, .page-lecture.nuit strong {
  color: var(--texte-nuit, #f3f1ec);
}
.page-lecture.nuit .chapeau, .page-lecture.nuit .corps, .page-lecture.nuit figcaption { color: #fff; }
.page-lecture.nuit .surtitre { color: var(--sauge-nuit); }
.page-lecture.nuit a { color: var(--sauge-nuit); }
.page-lecture.entete { padding: 112px 0 56px; }
.page-lecture + .page-lecture { padding-top: 56px; }

.page-lecture .enveloppe > :is(h1, h2, h3):first-child { margin-top: 0; }
.page-lecture .enveloppe > :is(p:not([class]), ul:not([class])):last-child { margin-bottom: 0; }





.benefices.domaines p {
  font-variant-numeric: tabular-nums;
  color: var(--encre-2);
}


@media (max-width: 1023px) {
  
  .transition { padding: 96px 0 48px; }

  
  .independance { min-height: 500px; }
  .independance .conteneur { padding-top: 20vh; padding-bottom: 48px; }

  
  .etape { padding-top: 44px; }
  .etape .telephone { margin-top: 28px; }
  .etape:last-child { padding-bottom: 52px; }

  .manifeste { padding: 64px 0; }

  
  .respiration { height: 78svh; }
  .respiration .colle { height: 72svh; }

  
  .final { min-height: 0; height: auto; padding-block: 76px; }
}




.domaines li { position: relative; }
.domaines h3 a { color: inherit; text-decoration: none; }
.domaines h3 a::after { content: " →"; color: var(--sauge-encre); }
.domaines h3 a::before { content: ""; position: absolute; inset: 0; }
.domaines h3 a:focus-visible { outline: 2px solid var(--sauge-encre); outline-offset: 4px; border-radius: 4px; }


.independance.sans-photo { min-height: 0; align-items: center; }
.independance.sans-photo .photo { display: none; }
.independance.sans-photo .conteneur { padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 1024px) {
  .independance.sans-photo .conteneur { padding: 112px var(--marge); }
}


@media (max-width: 1023px) {
  
  .benefices.domaines { grid-template-columns: 1fr; gap: 28px; }
  .benefices.domaines h3 { min-height: 0; }
  .gaufre { background-image: none; }
  .barre.defilee { background-color: var(--nuit-0); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .photo, .photo > .image, .photo > .scrim { filter: none; }
  .photo::after { display: none; }
  .photo > .image { will-change: auto; }
}


[id] { scroll-margin-top: 72px; }


.rdv { margin-top: 16px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--texte-nuit-2); }
.rdv .lien-rdv { display: inline-flex; align-items: center; min-height: 44px; color: var(--sauge-nuit); font-weight: var(--graisse-intitule); text-decoration: underline; text-underline-offset: 3px; }
.rdv .lien-rdv:focus-visible { outline: 2px solid var(--sauge-nuit); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 1024px) { .hero .rdv { text-align: left; } }


.accroche-planning { margin: 16px 0 0; font: var(--graisse-texte) 17px/1.5 var(--inter); color: var(--encre-2); }
.accroche-planning strong { color: var(--encre); font-weight: var(--graisse-gras); }


.garanties { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.garanties li { display: flex; gap: 12px; align-items: flex-start; font: var(--graisse-texte) 16px/1.45 var(--inter); color: var(--encre-2); }
.garanties strong { color: var(--encre); font-weight: var(--graisse-gras); }
.garanties .picto { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--sauge-voile-clair); color: var(--sauge-encre); display: grid; place-items: center; }
.garanties svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


.places {
  position: relative; max-width: 360px; margin: 16px auto 0; padding: 14px 18px 16px;
  border: 1px solid rgba(243,241,236,.16); border-radius: var(--rayon-carte);
  background: rgba(255,255,255,.04); text-align: center;
}
.places[hidden] { display: none !important; }
.places p { margin: 0; }
.places p.places-titre {
  font: var(--graisse-intitule) 12px/1.4 var(--inter); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-nuit-2);
}
.places p.places-compte {
  margin-top: 4px; font: var(--graisse-texte) 40px/1 var(--inter); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.places .places-compte strong { color: var(--sauge-nuit); font-weight: var(--graisse-texte); }
.places p.places-reste { margin-top: 6px; font: var(--graisse-texte) 14px/1.4 var(--inter); color: var(--texte-nuit-2); }
.places .places-reste strong { color: var(--texte-nuit); font-weight: var(--graisse-gras); }
.places .places-jauge {
  display: block; height: 6px; margin-top: 12px;
  border-radius: var(--rayon-pilule); background: rgba(243,241,236,.16); overflow: hidden;
}
.places .places-plein { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sauge-nuit); }

.places .places-merci {
  position: absolute; top: 24px; right: 12px; width: 92px; margin: 0;
  font: 600 19px/1.05 var(--main); color: var(--sauge-nuit); text-align: center;
  transform: rotate(-6deg); pointer-events: none;
}
.places .places-merci[hidden] { display: none; }
.places .places-merci .merci-long { display: none; }
.places .places-merci .merci-signature { display: block; margin-top: 3px; font-size: 15px; color: var(--texte-nuit-2); }

@media (max-width: 359px) {
  .places .places-merci { top: 20px; right: 6px; width: 74px; font-size: 15px; }
  .places .places-merci .merci-signature { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  
  .places .places-merci { animation: fondu 600ms ease 400ms both; }
}

.places .pour-lecteur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 1024px) {
  .places { margin-left: 0; text-align: left; }
  .places p.places-compte { font-size: 48px; }
  .places .places-merci {
    top: 50%; right: auto; left: calc(100% + 22px); width: 210px;
    font-size: 25px; line-height: 1.1; text-align: left; transform: translateY(-50%) rotate(-4deg);
  }
  .places .places-merci .merci-long { display: inline; }
  .places .places-merci .merci-signature { font-size: 19px; margin-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .places { animation: montee 500ms ease both; }
}

.page-lecture .places { margin: 0 0 32px; text-align: left; }
.page-lecture p.places-prix { margin: -20px 0 32px; font-size: 15px; line-height: 1.5; color: #fff; }


@font-face {
  font-family: 'Inter Marque';
  src: url('/polices/inter-marque.woff2') format('woff2-variations');
  font-weight: 100 900; font-display: swap;
}
:root { --marque-excl: var(--lagon-clair); }
.creme, .blanc-casse, .blanc-respire, .fondateur, .carte-outils, .page-lecture .appel, .b-manifeste { --marque-excl: var(--lagon); }
.independance, .manifeste, .pied, .barre, .panneau, .carte-offre { --marque-excl: var(--lagon-clair); }
.marque-libre {
  white-space: nowrap; text-transform: none;  
  font-family: 'Inter Marque', var(--inter); font-weight: var(--graisse-marque); letter-spacing: -.03em;
}
.excl {
  display: inline-block;
  color: var(--marque-excl);
  transform: skewX(-14deg);
  transform-origin: 50% 100%;
  
  margin-right: .12em;
}


h1.titre-long, h2.titre-long, h1 > .titre-long, h2 > .titre-long { text-transform: none; letter-spacing: -.01em; }