/* examen-cafetier.ch — v1 design (Bistrot net) */
:root{
  --ec-ink:#17161A;--ec-muted:#5B5A60;--ec-body:#4E4D53;--ec-line:#E6E2DC;
  --ec-surface:#F5F3EF;--ec-accent:#7A1F2B;--ec-accent-dark:#5C1520;--ec-accent-soft:#F6EEEF;
  --ec-ok:#1E6B4F;--ec-bad:#A3242F;--ec-bg:#FFFFFF;
  --ec-display:'Bricolage Grotesque',system-ui,sans-serif;--ec-text:'Inter',system-ui,sans-serif;
}
.ec{font-family:var(--ec-text);color:var(--ec-ink);font-size:15px;line-height:1.55;background:var(--ec-bg);-webkit-font-smoothing:antialiased}
.ec *,.ec *::before,.ec *::after{box-sizing:border-box}
.ec a{color:var(--ec-accent)}.ec a:hover{color:var(--ec-accent-dark)}
.ec h1,.ec h2,.ec h3{font-family:var(--ec-display);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ec-ink)}
.ec h1{font-size:clamp(30px,4.2vw,46px);line-height:1.06;letter-spacing:-.025em}
.ec h2{font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.ec h3{font-size:19px}
.ec p{margin:0}
.ec-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.ec-sec{padding:44px 0}
.ec-eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ec-accent)}
.ec-lead{font-size:17px;color:var(--ec-body);max-width:560px}
.ec-muted{color:var(--ec-muted)}
.ec-stack{display:flex;flex-direction:column;gap:16px}
.ec-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ec-head p{max-width:440px;color:var(--ec-muted)}

/* Buttons */
.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease;font-family:inherit}
.ec-btn:active{transform:scale(.98)}
.ec-btn--primary{background:var(--ec-accent);color:#fff !important}
.ec-btn--primary:hover{background:var(--ec-accent-dark)}
.ec-btn--ghost{background:#fff;color:var(--ec-ink) !important;border-color:var(--ec-ink)}
.ec-btn--ghost:hover{background:var(--ec-surface)}
.ec-btn--dark{background:var(--ec-ink);color:#fff !important}
.ec-btn--block{width:100%}
.ec-btn:focus-visible,.ec a:focus-visible,.ec button:focus-visible{outline:3px solid #C98A93;outline-offset:2px}

/* Hero */
.ec-hero{padding:52px 0 36px}
.ec-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.ec-prices{display:flex;flex-wrap:wrap;gap:10px}
.ec-price{border:1px solid var(--ec-line);border-radius:12px;padding:9px 14px;display:flex;flex-direction:column;text-decoration:none;color:var(--ec-ink) !important}
.ec-price--best{border:2px solid var(--ec-accent);padding:8px 13px}
.ec-price small{font-size:13px;color:var(--ec-muted)}
.ec-price b{font-family:var(--ec-display);font-size:20px}

/* Quiz preview card */
.ec-qcard{position:relative;background:var(--ec-surface);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:12px}
.ec-qmeta{display:flex;justify-content:space-between;font-size:13px;color:var(--ec-muted)}
.ec-qmeta b{color:var(--ec-accent);font-weight:600}
.ec-bar{height:6px;background:var(--ec-line);border-radius:99px;overflow:hidden}
.ec-bar i{display:block;height:100%;background:var(--ec-accent);border-radius:99px;transition:width .3s ease}
.ec-qtext{font-weight:600;font-size:16px;line-height:1.4}
.ec-opt{display:flex;gap:12px;align-items:center;width:100%;min-height:50px;padding:10px 13px;border-radius:12px;background:#fff;border:1px solid var(--ec-line);color:var(--ec-ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s ease}
.ec-opt:hover{border-color:#B9B4AC}
.ec-opt__l{flex:none;width:26px;height:26px;border-radius:8px;background:var(--ec-surface);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.ec-opt__t{flex:1}
.ec-opt__b{font-size:13px;font-weight:600}
.ec-opt.is-ok{border:2px solid var(--ec-ok);padding:9px 12px}.ec-opt.is-ok .ec-opt__b{color:var(--ec-ok)}
.ec-opt.is-bad{border:2px solid var(--ec-bad);padding:9px 12px}.ec-opt.is-bad .ec-opt__b{color:var(--ec-bad)}
.ec-opt[disabled]{cursor:default}
.ec-note{background:#fff;border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--ec-body)}
.ec-note strong{color:var(--ec-ink)}
.ec-note--soft{background:var(--ec-surface)}
.ec-note--line{border:1px solid var(--ec-line)}
.ec-ref{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--ec-accent)}
.ec-float{position:absolute;right:-10px;bottom:-18px;background:var(--ec-ink);color:#fff;border-radius:14px;padding:10px 14px;font-size:13px;display:flex;gap:10px;align-items:center}
.ec-float b{font-family:var(--ec-display);font-size:20px}
.ec-float span{color:#D9D6D0;line-height:1.3}

/* Cards / grids */
.ec-grid{display:grid;gap:12px}
.ec-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ec-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ec-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ec-g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.ec-canton{text-decoration:none;color:var(--ec-ink) !important;border:1px solid var(--ec-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:140px;background:#fff;transition:border-color .15s ease,transform .15s ease}
.ec-canton:hover{border-color:var(--ec-accent);transform:translateY(-2px)}
.ec-canton__c{font-family:var(--ec-display);font-weight:700;font-size:26px;color:var(--ec-accent)}
.ec-canton__n{font-weight:600}
.ec-canton__l{font-size:13px;color:var(--ec-muted);margin-top:auto}
.ec-tag{display:inline-block;align-self:flex-start;font-size:13px;font-weight:600;color:var(--ec-accent);background:var(--ec-accent-soft);padding:3px 9px;border-radius:99px}
.ec-tag--grey{color:var(--ec-muted);background:var(--ec-surface)}
.ec-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px}
.ec-tile{border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;background:var(--ec-surface)}
.ec-tile--soft{background:var(--ec-accent-soft)}
.ec-tile--dark{background:var(--ec-ink);color:#fff}
.ec-tile--dark .ec-muted{color:#D9D6D0}
.ec-tile--big{grid-column:span 2;grid-row:span 2;padding:26px;gap:14px}
.ec-tile b{font-weight:600}
.ec-tile p{color:var(--ec-body);font-size:14px}
.ec-tile--dark p{color:#D9D6D0}
.ec-num{font-family:var(--ec-display);font-weight:700;font-size:38px;line-height:1}
.ec-num--xl{font-size:56px}
.ec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ec-chip{border:1px solid #3A3940;border-radius:99px;padding:6px 12px;font-size:13px}
.ec-chip--light{border-color:var(--ec-line)}

/* Plans */
.ec-plan{border:1px solid var(--ec-line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;background:#fff}
.ec-plan--best{border:2px solid var(--ec-accent);padding:23px}
.ec-plan__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ec-plan__badge{font-size:13px;font-weight:600;color:#fff;background:var(--ec-accent);padding:4px 10px;border-radius:99px}
.ec-plan__price{font-family:var(--ec-display);font-weight:700;font-size:40px;line-height:1}
.ec-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.ec-plan li{display:flex;gap:8px;align-items:flex-start}
.ec-plan .ec-btn{margin-top:auto}
.ec-check{flex:none;margin-top:3px}

/* Panels, lists, FAQ */
.ec-panel{border:1px solid var(--ec-line);border-radius:20px;padding:22px}
.ec-band{background:var(--ec-surface);border-radius:24px;padding:30px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.ec-band p{color:var(--ec-body);max-width:620px}
.ec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ec-list li{display:flex;gap:8px;align-items:flex-start}
.ec-rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #F0EDE8}
.ec-rows div:first-child{border-top:0}
.ec-faq details{border-top:1px solid var(--ec-line);padding:16px 0}
.ec-faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.ec-faq summary::after{content:"+";font-weight:400;color:var(--ec-muted)}
.ec-faq details[open] summary::after{content:"–"}
.ec-faq details p{margin-top:10px;color:var(--ec-body)}
.ec-canton-hero__code{font-family:var(--ec-display);font-weight:700;font-size:64px;line-height:.9;color:var(--ec-accent)}
.ec-alert{border-radius:16px;padding:16px 18px;background:var(--ec-accent-soft);color:var(--ec-ink)}
.ec-prose{max-width:760px}
.ec-prose h2{margin:28px 0 10px;font-size:22px}
.ec-prose p,.ec-prose li{color:var(--ec-body);margin-bottom:10px}

/* Form */
.ec-form{display:grid;gap:14px;max-width:560px}
.ec-form label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:14px}
.ec-form input,.ec-form textarea,.ec-form select{font:inherit;padding:12px 14px;border:1px solid #CFCAC2;border-radius:10px;background:#fff;color:var(--ec-ink);min-height:46px}
.ec-form input:focus,.ec-form textarea:focus,.ec-form select:focus{outline:3px solid #E7C3C8;border-color:var(--ec-accent)}
.ec-form small{color:var(--ec-muted);font-weight:400}

/* Quiz page */
.ec-quiz{max-width:640px;margin:0 auto}
.ec-quiz .ec-qcard{background:#fff;border:1px solid var(--ec-line);padding:20px}
.ec-quiz__foot{display:flex;gap:10px;margin-top:4px}
.ec-quiz__foot .ec-btn{flex:1}
.ec-quiz__result{text-align:center;padding:24px 8px}
.ec-quiz__score{font-family:var(--ec-display);font-weight:700;font-size:64px;line-height:1;color:var(--ec-accent)}

/* Global chrome: ticker + search */
.ec-ticker{background:var(--ec-ink);color:#F5F3EF;font-family:var(--ec-text);font-size:13px;height:34px;overflow:hidden;white-space:nowrap;display:flex;align-items:center;position:relative;z-index:50}
.ec-ticker__track{display:inline-flex;gap:48px;padding-left:24px;animation:ec-tick 40s linear infinite}
.ec-ticker:hover .ec-ticker__track{animation-play-state:paused}
@keyframes ec-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ec-search{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--ec-ink);color:#fff !important;text-decoration:none;font-family:var(--ec-text);font-weight:600;font-size:14px;padding:12px 16px;border-radius:99px;display:inline-flex;gap:8px;align-items:center;box-shadow:0 8px 24px rgba(23,22,26,.18)}
.ec-search:hover{background:#000}

@media (prefers-reduced-motion:reduce){.ec-ticker__track{animation:none}.ec *{transition:none !important}}
@media (max-width:980px){.ec-g6{grid-template-columns:repeat(3,minmax(0,1fr))}.ec-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .ec-hero__grid,.ec-g2,.ec-g3{grid-template-columns:minmax(0,1fr)}
  .ec-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ec-hero{padding:28px 0 20px}.ec-sec{padding:28px 0}
  .ec-wrap{padding:0 16px}
  .ec-float{right:8px}
}
@media (max-width:560px){
  .ec{font-size:14px}
  .ec-g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ec-bento{grid-template-columns:minmax(0,1fr)}
  .ec-tile--big{grid-column:auto;grid-row:auto}
  .ec-num--xl{font-size:44px}
  .ec-hero .ec-row .ec-btn{width:100%}
  .ec-search{right:12px;bottom:12px;padding:11px 14px}
  .ec-canton-hero__code{font-size:48px}
}

/* En-tête du socle : à 390 px, le bouton garde son libellé, le prix passe sous le titre des pages */
@media (max-width:440px){.qz-header__price{display:none}}