@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/polices/BricolageGrotesque-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/polices/BricolageGrotesque-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-stretch:100%;font-display:swap;src:url(/polices/InstrumentSans-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/polices/InstrumentSans-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}
:root{
  --fond:#F4F5F7; --encre:#0F172A; --accent:#2747E8; --accent-fonce:#1B34B8; --ambre:#8A4B00; --ambre-pale:#FFF3E0;
  --gris:#475569; --trait:#E2E5EA; --bord-champ:#7A8699; --vert:#0B7A6E;
  --titre:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --texte:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --marge:20px; --large:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--fond); color:var(--encre); font-family:var(--texte); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:var(--accent)} a:hover{color:var(--accent-fonce)}
img{max-width:100%; height:auto; display:block}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.cache{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.boite{width:100%; max-width:var(--large); margin:0 auto; padding:0 var(--marge)}
.passer{position:absolute; left:12px; top:-70px; z-index:50; background:var(--encre); color:#fff; padding:12px 16px; border-radius:10px; font-weight:600; text-decoration:none}
.passer:focus{top:12px; color:#fff}

.entete{position:sticky; top:0; z-index:30; background:rgba(244,245,247,.94); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--trait)}
.entete .boite{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.marque{display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--encre)}
.marque:hover{color:var(--encre)}
.marque .duo{display:inline-flex; align-items:center; gap:3px}
.marque .duo i{width:15px; height:15px; border-radius:50%; background:var(--accent)}
.marque .duo i + i{border-radius:4px; background:var(--encre)}
.marque b{font:700 20px/1 var(--titre); letter-spacing:-.01em}
.menu{display:none; gap:26px}
.menu a{color:var(--gris); text-decoration:none; font-size:15px; font-weight:600; padding:12px 0}
.menu a:hover{color:var(--encre)}
.droite{display:flex; align-items:center; gap:10px}
.bouton{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-weight:600; font-size:16px; text-decoration:none; cursor:pointer; transition:background .15s}
.bouton:hover{background:var(--accent-fonce); color:#fff}
.bouton.petit{min-height:44px; padding:0 16px; font-size:15px; border-radius:12px; white-space:nowrap}
.langues{position:relative}
.langues summary{list-style:none; display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:44px; padding:0 12px; border:1.5px solid var(--trait); border-radius:12px; background:#fff; font-size:14px; font-weight:700; cursor:pointer}
.langues summary::-webkit-details-marker{display:none}
.langues summary::after{content:""; width:7px; height:7px; margin-left:8px; border-right:2px solid var(--gris); border-bottom:2px solid var(--gris); transform:rotate(45deg) translateY(-2px)}
.langues ul{position:absolute; right:0; top:calc(100% + 6px); min-width:170px; padding:6px; background:#fff; border:1px solid var(--trait); border-radius:14px; box-shadow:0 14px 40px rgba(15,23,42,.14)}
.langues a{display:block; padding:9px 12px; border-radius:9px; color:var(--encre); text-decoration:none; font-size:15px}
.langues a:hover{background:var(--fond)}
.langues a[aria-current]{font-weight:700; color:var(--accent)}

.surtitre{display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ambre)}
.surtitre::before{content:""; flex:none; width:22px; height:2px; background:currentColor}
.section{padding:64px 0}
h2{font:700 clamp(1.9rem,5.6vw,3.1rem)/1.06 var(--titre); letter-spacing:-.014em; margin-top:14px; text-wrap:balance}
.intro{margin-top:16px; font-size:clamp(1.05rem,2vw,1.2rem); color:var(--gris); max-width:38em}
.note{margin-top:14px; font-size:14px; color:var(--gris)}
.cap{margin-top:10px; font-size:14px; color:var(--gris); font-style:italic}

.hero{padding:30px 0 10px; overflow:hidden}
.hero .boite{display:grid; gap:30px}
h1{font:700 clamp(2.25rem,8.6vw,4.2rem)/1.03 var(--titre); letter-spacing:-.014em; margin-top:14px; text-wrap:balance; hyphens:auto}
.chapo{margin-top:18px; font-size:clamp(1.06rem,2.2vw,1.24rem); line-height:1.5; color:var(--gris); max-width:33em}
.chapo strong{color:var(--encre); font-weight:600}
.ouverture{margin-top:16px; padding:10px 14px; border-radius:12px; background:var(--ambre-pale); border:1px solid #F3DDBD; font-size:14.5px; line-height:1.45; color:#5C3200; max-width:560px}
.inscription{margin-top:18px; display:grid; gap:12px; max-width:560px}
.inscription .ligne{display:grid; gap:12px}
.inscription label{display:block; font-size:13.5px; font-weight:600; color:var(--gris); margin:0 2px 5px}
.champ{width:100%; min-height:52px; padding:0 14px; border:1.5px solid var(--bord-champ); border-radius:14px; background:#fff; font-size:16px; color:var(--encre)}
select.champ{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%); background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px; background-size:6px 6px; background-repeat:no-repeat; padding-right:36px}
.accord{display:flex !important; align-items:flex-start; gap:10px; font-weight:500 !important; font-size:14.5px !important; color:var(--encre) !important; line-height:1.4; cursor:pointer}
.accord input{flex:none; width:22px; height:22px; margin:0; accent-color:var(--accent)}
.mention{font-size:13.5px; line-height:1.45; color:var(--gris)}
.mention a{color:inherit}
.preuve{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; font-size:13.5px; font-weight:600}
.preuve li{display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 12px; border-radius:16px; background:#fff; border:1px solid var(--trait)}
.preuve li::before{content:""; width:8px; height:8px; border-radius:50%; background:#12A594}
.preuve li.test{color:var(--ambre); background:var(--ambre-pale); border-color:#F3DDBD}
.preuve li.test::before{background:none; border:2px dashed #B98A4C; border-radius:3px}
.ecrans{position:relative; padding-bottom:20px}
.bureau{border-radius:14px; overflow:hidden; border:1px solid #C9CED8; box-shadow:0 24px 60px rgba(15,23,42,.16); background:#fff}
.tel{position:absolute; right:-6px; bottom:-8px; width:30%; max-width:200px; border-radius:22px; overflow:hidden; border:5px solid var(--encre); box-shadow:0 18px 40px rgba(15,23,42,.28); background:#fff; aspect-ratio:390/700}
.tel img{width:100%; height:100%; object-fit:cover; object-position:top}

.unoutil{padding:44px 0; background:var(--encre); color:#fff}
.unoutil h2{margin-top:0; color:#fff}
.unoutil p{margin-top:14px; font-size:clamp(1.05rem,2.1vw,1.25rem); color:#DCE3F0; max-width:40em}
.unoutil .note{font-size:13.5px; color:#B6C2D9}

.trait{display:grid; gap:22px; padding:44px 0; border-top:1px solid var(--trait)}
.trait:first-of-type{border-top:0}
.section .intro + .trait,.section .cap + .trait{margin-top:20px; border-top:0}
.num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--encre); color:#fff; font:700 16px/1 var(--titre)}
.trait h3{font:700 clamp(1.45rem,3.6vw,2.05rem)/1.12 var(--titre); letter-spacing:-.01em; margin-top:14px; text-wrap:balance}
.trait p{margin-top:12px; color:var(--gris); font-size:1.06rem; max-width:32em}
.vue img,.phrase{border-radius:14px; border:1px solid #C9CED8; box-shadow:0 16px 40px rgba(15,23,42,.10); background:#fff}
.vue img.bande{border-radius:12px}
.paire{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.pile{position:relative; padding-bottom:28%}
.pile img:last-child{position:absolute; right:0; bottom:0; width:62%}
.phrase{padding:22px}
.phrase .saisi{font-size:1.15rem; font-weight:600; color:var(--encre); padding:14px 16px; border:2px solid var(--accent); border-radius:12px; margin:0}
.phrase .compris{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.phrase .compris span{display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:17px; background:#E8ECFD; border:1px solid #C9D2FA; color:#1B2A7A; font-size:14.5px; font-weight:600}

.etat{background:#fff; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait)}
.deux{display:grid; gap:18px; margin-top:28px}
.deux > div{padding:22px; border-radius:18px; border:1px solid var(--trait); background:var(--fond)}
.deux h3{font:700 1.25rem/1.2 var(--titre)}
.deux li{position:relative; padding:9px 0 9px 30px; border-top:1px solid var(--trait)}
.deux ul{margin-top:12px}
.deux li:first-child{border-top:0}
.oui li::before{content:""; position:absolute; left:4px; top:15px; width:12px; height:7px; border-left:2.5px solid var(--vert); border-bottom:2.5px solid var(--vert); transform:rotate(-45deg)}
.pasencore{background:var(--ambre-pale) !important; border-color:#F3DDBD !important}
.pasencore li{border-top-color:#F3DDBD}
.pasencore li::before{content:""; position:absolute; left:4px; top:15px; width:12px; height:12px; border:2px dashed #B98A4C; border-radius:3px}
.pasencore .note{color:#5C3200}

.plans{display:grid; gap:16px; margin-top:28px}
.plan{padding:24px; border-radius:18px; background:#fff; border:1px solid var(--trait)}
.plan.vedette{border:2px solid var(--accent); box-shadow:0 16px 40px rgba(39,71,232,.12)}
.plan h3{font:700 1.3rem/1.2 var(--titre)}
.prix{margin-top:10px} .prix b{font:700 2.6rem/1 var(--titre); letter-spacing:-.02em} .prix span{font-size:14.5px; color:var(--gris); font-weight:600}
.sous{margin-top:6px; font-size:14.5px; color:var(--gris); min-height:2.9em}
.plan ul{margin-top:14px}
.plan li{position:relative; padding:8px 0 8px 28px; border-top:1px solid var(--trait)}
.plan li::before{content:""; position:absolute; left:3px; top:14px; width:12px; height:7px; border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); transform:rotate(-45deg)}

.faq{margin-top:24px; max-width:820px}
.faq details{border-top:1px solid var(--trait)}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:10px 2px; font-weight:600; font-size:1.08rem; cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font:400 26px/1 var(--texte); color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 2px 18px; color:var(--gris); max-width:40em}

.final{padding:64px 0; background:var(--encre); color:#fff}
.final h2{margin-top:0; color:#fff}
.final .inscription{margin-top:26px}
.final .inscription label,.final .accord{color:#DCE3F0 !important}
.final .mention{color:#B6C2D9}
.final .champ{border-color:#fff}
.final :focus-visible{outline-color:#FFD79A}

.pied{padding:36px 0 44px; font-size:14.5px; color:var(--gris)}
.pied p{margin-top:10px; max-width:52em}
.pied nav{margin-top:12px; line-height:2}
.pied a{color:var(--gris)}
.pied .marque{color:var(--encre)}
.pied .fr{font-style:italic}

.simple .merci{padding:70px var(--marge) 90px; max-width:720px}
.simple .merci p{margin-top:18px}
.simple .merci .bouton{margin-top:10px}
.toutes{margin-top:24px} .toutes li{padding:8px 0; font-size:1.15rem}
.legal{max-width:780px; padding-top:40px; padding-bottom:60px}
.legal h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.legal h2{font-size:1.4rem; margin-top:34px}
.legal p,.legal ul,.legal ol{margin-top:12px}
.legal ul,.legal ol{padding-left:22px} .legal ul{list-style:disc} .legal ol{list-style:decimal}
.legal li{margin-top:6px}
.encart{margin-top:40px; padding:22px; border-radius:16px; background:#fff; border:1px solid var(--trait)}
.encart h2{margin-top:0}

@media (min-width:640px){ .inscription .ligne{grid-template-columns:1.2fr 1fr} .deux{grid-template-columns:1fr 1fr} }
@media (min-width:900px){
  :root{--marge:32px}
  .menu{display:flex}
  .section{padding:96px 0}
  .hero{padding:56px 0 30px}
  .hero .boite{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:44px; align-items:center}
  .ecrans{margin-right:-120px; margin-left:26px}
  .tel{right:auto; left:-26px; bottom:-22px; width:24%}
  .trait{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:56px; align-items:center; padding:64px 0}
  .trait.inv{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .trait.inv .mots{order:2}
  .plans{grid-template-columns:repeat(3,1fr)}
  .unoutil{padding:64px 0}
}