/* =========================================================
   Elicio by Daïmo : feuille de style globale
   Les styles de mise en page détaillés sont dans index.html
   (attributs style="…", repris tels quels du mockup).
   ========================================================= */

/* ---- Polices auto-hébergées (aucun appel à Google Fonts : RGPD) ---- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/caveat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/caveat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Base (reprise du bloc <helmet> du mockup) ---- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F9FAFD}
a{color:#0D1221}a:hover{color:#006DB2}
summary{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[role="tabpanel"]:focus-visible,[tabindex="-1"]:focus-visible{outline:2px solid #006DB2;outline-offset:2px}
@media (max-width:900px){.hide-sm{display:none !important}}
img{max-width:100%}
[hidden]{display:none !important}

/* ---- Accessibilité ---- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#0D1221;color:#F6F5EE;padding:10px 16px;border-radius:10px;font:600 15px/1.2 "Instrument Sans",system-ui,sans-serif;text-decoration:none}
.skip-link:focus{top:12px;color:#F6F5EE}

/* ---- Livrables : onglets ---- */
.dtab{position:relative;display:block;width:100%;text-align:left;cursor:pointer;font-family:"Instrument Sans",sans-serif;color:#0D1221;
  border:1.5px solid transparent;border-radius:2px;padding:16px 18px;background:#FFFFFF;
  box-shadow:0 1px 1px rgba(13,19,33,0.14),0 8px 14px -6px rgba(13,19,33,0.28);transition:transform .15s}
.dtab:nth-child(odd){transform:rotate(-0.8deg)}
.dtab:nth-child(even){transform:rotate(0.8deg)}
.dtab.is-on{background:#FFE933;border-color:#0D1221;transform:translateX(10px);
  box-shadow:0 1px 1px rgba(13,19,33,0.14),0 12px 20px -8px rgba(13,19,33,0.35)}
.dtab .tape{position:absolute;left:50%;top:-9px;width:54px;height:18px;margin-left:-27px;background:rgba(255,255,255,0.6);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(13,19,33,0.12)}
.dtab-title{display:flex;justify-content:space-between;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;line-height:1.1;letter-spacing:-0.02em}
.dtab-chev{visibility:hidden}
.dtab.is-on .dtab-chev{visibility:visible}
.dtab-sub{display:block;margin-top:5px;font-size:14px;line-height:1.35}
@media (prefers-reduced-motion:reduce){.dtab{transition:none}}

/* ---- Test 3 minutes ---- */
.quiz-segs{display:flex;gap:6px}
.quiz-segs span{flex:1;height:6px;border-radius:3px;background:#E2E5EA}
.quiz-segs span.is-done{background:#FFE933}
.quiz-segs span.is-current{background:#0D1221}
.quiz-answer{font-family:"Instrument Sans",sans-serif;font-size:16px;font-weight:600;background:#FFFFFF;color:#0D1221;border:1.5px solid #0D1221;border-radius:10px;padding:12px 22px;cursor:pointer}
.quiz-answer:hover{background:#F9FAFD}
.hl{background-image:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%);padding:0 0.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- Pages légales ---- */
.legal{max-width:760px;margin:0 auto;padding:clamp(24px,5vw,64px) clamp(20px,5vw,40px) 80px;font-family:"Instrument Sans",system-ui,sans-serif;color:#0D1221;line-height:1.6}
.legal h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(32px,5vw,48px);line-height:1.05;letter-spacing:-0.03em;margin:24px 0 24px}
.legal h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:22px;margin:36px 0 8px}

/* ---- Téléphone : corrections de mise en page (le rendu ordinateur n'est pas modifié) ---- */
@media (max-width:600px){
  /* Bloc « Écrivez-nous » : ne dépasse pas de l'écran */
  .contact-card{flex-basis:100% !important;min-width:0 !important;max-width:100%}
  .contact-card a{overflow-wrap:anywhere}
  /* Post-it du haut de page : posés côte à côte au lieu de se chevaucher */
  .hero-notes{height:auto !important;display:flex;flex-wrap:wrap;gap:22px 14px;padding-top:12px}
  .hero-notes > div{position:relative !important;left:auto !important;top:auto !important;width:calc(50% - 7px) !important;min-width:0 !important;padding:18px 14px 14px !important}
  .hero-notes > div > div:first-of-type{font-size:25px !important}
}