/* Page d'accueil publique. S'appuie sur les couleurs et composants de l'application (app.css). */
.landing{padding-bottom:0}
.l-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap}
.l-logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:20px}
.l-logo img{border-radius:9px}
.l-nav nav{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.l-nav nav a:not(.btn){color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px}
.l-nav nav a:not(.btn):hover{color:var(--ink)}
.btn.big{padding:12px 20px;font-size:16px;border-radius:12px;text-decoration:none}
a.btn{display:inline-flex;align-items:center}

/* Accroche : texte à gauche, la semaine d'accueil à droite */
.l-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center;padding-block:36px 40px}
.l-hero h1{font-family:var(--display);font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.025em;font-weight:800;margin:0 0 18px;max-width:16ch}
.l-hero .lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:52ch;margin:0 0 24px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.hero-note{margin-top:14px;max-width:52ch}

.l-week{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px 18px 14px;box-shadow:0 2px 4px rgba(91,52,30,.05),0 24px 60px -20px rgba(91,52,30,.28);transform:rotate(1.2deg)}
.l-week figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.l-week figcaption b{font-family:var(--display);font-size:17px}
.l-week figcaption span{font-size:12.5px;color:var(--muted)}
.pl-grid{display:grid;grid-template-columns:34px repeat(5,minmax(0,1fr));gap:6px;height:330px}
.pl-hours{position:relative;font-size:11px;color:var(--muted)}
.pl-hours span{position:absolute;right:2px;top:calc(24px + (100% - 24px) * var(--a) / 12);transform:translateY(-50%);line-height:1}
.pl-day{position:relative;background:var(--sunk);border-radius:10px;padding-top:24px}
.pl-day>b{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}
.pl-day.off{background:repeating-linear-gradient(135deg,var(--off) 0 8px,transparent 8px 16px)}
.pl-off{position:absolute;inset:auto 6px 40% 6px;text-align:center;font-size:11.5px;font-weight:700;color:var(--off-ink);line-height:1.2}
/* --a et --d : heures d'arrivée et de départ comptées depuis 7 h (créneau de 12 h) */
.pb{position:absolute;top:calc(24px + (100% - 24px) * var(--a) / 12);height:calc((100% - 24px) * (var(--d) - var(--a)) / 12);left:3px;right:3px;border-radius:8px;padding:5px 6px;font-style:normal;font-weight:700;font-size:12px;line-height:1.15;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.pb small{font-weight:500;font-size:10.5px;opacity:.85}
.pl-day .pb:nth-of-type(2){left:28%}.pl-day .pb:nth-of-type(3){left:54%}
.pb.k0{background:var(--k0);color:var(--k0i)}.pb.k1{background:var(--k1);color:var(--k1i)}.pb.k2{background:var(--k2);color:var(--k2i)}
.pb.wait{border:1.5px dashed var(--warn);background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(151,87,0,.12) 6px 12px)}
.pl-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;background:var(--accent-soft);border-radius:12px;font-size:13.5px;line-height:1.4}
.dot-ok{flex:0 0 10px;height:10px;border-radius:50%;background:var(--good);margin-top:4px}
/* Un seul mouvement : les créneaux de la semaine se remplissent au chargement */
@media (prefers-reduced-motion:no-preference){
  .pb{animation:fill .7s cubic-bezier(.2,.7,.2,1) both}
  .pl-day:nth-child(2) .pb{animation-delay:.15s}.pl-day:nth-child(3) .pb{animation-delay:.3s}.pl-day:nth-child(4) .pb{animation-delay:.45s}.pl-day:nth-child(5) .pb{animation-delay:.6s}
  .pl-note{animation:fade .5s 1.2s both}
  @keyframes fill{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

.facts{list-style:none;margin:0 0 20px;padding:18px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-block:1px solid var(--line)}
.facts li{font-size:14px;color:var(--muted);line-height:1.4}
.facts b{display:block;font-family:var(--display);font-size:26px;color:var(--ink);letter-spacing:-.01em}

.l-section{padding-block:56px 20px}
.l-section>h2,.l-final h2{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em;line-height:1.1;margin:0 0 26px;max-width:24ch}
.l-section>.lead{font-size:17px;color:var(--muted);max-width:62ch;margin:-12px 0 22px;line-height:1.55}

.feat-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.feat-col h3{font-family:var(--display);font-size:20px;margin:0 0 12px;padding-bottom:10px;border-bottom:3px solid var(--k4)}
.feat-col:nth-child(2) h3{border-color:var(--k1)}.feat-col:nth-child(3) h3{border-color:var(--k2)}
.feat-col dl{margin:0}
.feat-col dt{font-weight:700;margin-top:14px}
.feat-col dd{margin:3px 0 0;color:var(--muted);line-height:1.5;font-size:14.5px}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 36px}
.why-grid p{margin:0;line-height:1.55;color:var(--muted);font-size:15px}
.why-grid b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:4px}

.sim-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.sim-form{padding:22px;display:flex;flex-direction:column;gap:14px}
.sim-form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.sim-form legend{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.sim-form .field input{font-size:16px}
.sim-out{background:var(--accent-soft);padding:22px;display:flex;flex-direction:column;gap:8px}
.sim-total{font-family:var(--display);font-size:44px;font-weight:800;color:var(--accent);line-height:1;letter-spacing:-.02em}
.sim-out .sub{color:var(--muted);font-size:14px;margin:0 0 6px}
.sim-l{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:5px 0;border-bottom:1px dashed rgba(91,52,30,.18)}
.sim-l b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-l.strong{font-weight:700;border-bottom:0;padding-top:10px;font-size:16px}
.sim-out .small{margin-top:6px;line-height:1.5}

.price-card{background:var(--ink);color:var(--bg);border-radius:26px;padding:40px clamp(22px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:center}
.price-card h2{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);margin:0;letter-spacing:-.02em;grid-column:1}
.price-card p{margin:0;opacity:.85;line-height:1.55;max-width:62ch;grid-column:1}
.price-card .btn{grid-column:2;grid-row:1/4}
.price-card .btn.primary{background:var(--k4);color:#3a2a00;border-color:var(--k4)}

.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;padding:14px 32px 14px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:24px;font-weight:400;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:var(--muted);line-height:1.6;max-width:72ch}
.faq a{color:var(--accent)}

.l-final{text-align:center;padding-block:64px 20px;display:flex;flex-direction:column;align-items:center}
.l-final h2{margin:0 0 10px}
.l-final p{color:var(--muted);margin:0 0 22px;font-size:17px}

@media (max-width:900px){
  .l-hero{grid-template-columns:1fr;gap:30px;padding-top:16px}
  .l-week{transform:none}
  .feat-cols,.why-grid{grid-template-columns:1fr;gap:26px}
  .facts{grid-template-columns:1fr 1fr}
  .sim-box{grid-template-columns:1fr}
  .price-card{grid-template-columns:1fr}.price-card .btn{grid-column:1;grid-row:auto;justify-self:start}
}
@media (max-width:600px){
  .l-nav nav a:not(.btn){display:none}
  .l-nav{flex-wrap:nowrap}.l-logo{font-size:18px}
  .l-hero .lead{font-size:16.5px}
  .pl-grid{height:280px;grid-template-columns:28px repeat(5,minmax(0,1fr));gap:4px}
  .pb small{display:none}.pb{font-size:10.5px;padding:4px}
  .l-section{padding-block:40px 10px}
  .btn.big{width:100%;justify-content:center}
}
:root[data-theme="sombre"] .price-card{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.sim-form .field label{text-transform:none;letter-spacing:0;font-size:12.5px}
#prix-annuel{opacity:1;font-size:17px}