:root{
  --ground:#FBFCFD; --surface:#FFFFFF; --surface-2:#F3F6F8;
  --tint:#E9F1F7; --ink:#16232E; --muted:#5C6E7A; --line:#E3E9ED;
  --accent:#276A9C; --accent-strong:#1C5580; --accent-ink:#FFFFFF;
  --warn:#C0392B; --warn-strong:#96281B; --warn-tint:#FBEAE8; --warn-border:rgba(192,57,43,.30);
  --radius:14px; --maxw:44rem;
  --sans:"Albert Sans", system-ui, -apple-system, sans-serif;
  --display:"Albert Sans", system-ui, sans-serif;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  --ground:#0E1720; --surface:#15212C; --surface-2:#182531;
  --tint:#15293A; --ink:#E7EEF3; --muted:#9DADB8; --line:#243440;
  --accent:#63A6D8; --accent-strong:#8CC0E6; --accent-ink:#08131C;
  --warn:#E8837A; --warn-strong:#F0A79F; --warn-tint:#3A1F1C; --warn-border:rgba(232,131,122,.35);
}}
:root[data-theme="dark"]{
  --ground:#0E1720; --surface:#15212C; --surface-2:#182531;
  --tint:#15293A; --ink:#E7EEF3; --muted:#9DADB8; --line:#243440;
  --accent:#63A6D8; --accent-strong:#8CC0E6; --accent-ink:#08131C;
  --warn:#E8837A; --warn-strong:#F0A79F; --warn-tint:#3A1F1C; --warn-border:rgba(232,131,122,.35);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
img{max-width:100%; height:auto; display:block;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:100;}
.skip:focus{left:0;}

.shell{display:grid; grid-template-columns:17rem 1fr; min-height:100vh;}
.sidebar{position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--surface);
  border-right:1px solid var(--line); padding:1.6rem 1.15rem 2rem; display:flex; flex-direction:column; gap:1.3rem;}
.side-head{display:flex; flex-direction:column; gap:.55rem; padding:0 .35rem;}
.logo-link{line-height:0;}
.logo{width:220px; height:auto; max-width:100%; object-fit:contain;}
.logo-dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none;}
  :root:not([data-theme="light"]) .logo-dark{display:inline;}
}
:root[data-theme="dark"] .logo-light{display:none;}
:root[data-theme="dark"] .logo-dark{display:inline;}
:root[data-theme="light"] .logo-light{display:inline;}
:root[data-theme="light"] .logo-dark{display:none;}
.flags{display:flex; flex-wrap:wrap; gap:.4rem; margin:.1rem 0 .2rem;}
.flag{line-height:0; border-radius:3px; display:inline-block; opacity:.5; transition:opacity .15s;}
.flag img{display:block; border-radius:3px; box-shadow:0 0 0 1px var(--line);}
.flag:hover{opacity:1;} .flag.on{opacity:1;} .flag.on img{box-shadow:0 0 0 2px var(--accent);}
.flag.disabled{opacity:.3; cursor:default;}
.brand-mark{font-family:var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.01em; line-height:1.2; color:var(--ink);}
a.brand-mark:hover{text-decoration:none; color:var(--accent-strong);}
.brand-sub{font-size:.74rem; color:var(--muted); letter-spacing:.02em;}
.nav{display:flex; flex-direction:column; gap:.08rem;}
.nav a{color:var(--muted); font-size:.92rem; font-weight:500; padding:.44rem .6rem; border-radius:9px;
  display:flex; align-items:center; gap:.55rem; line-height:1.25;}
.nav a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none;}
.nav a.active{background:var(--tint); color:var(--accent-strong); font-weight:600;}
.nav a .dot{width:.42rem; height:.42rem; border-radius:50%; background:currentColor; opacity:.35; flex:none;}
.nav a.active .dot{opacity:1;}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:.7rem; padding:0 .35rem;}
.themebtn{display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:.82rem; font-weight:500;
  cursor:pointer; padding:.42rem .7rem; border-radius:9px;}
.themebtn:hover{border-color:var(--accent);}
.themebtn.small{padding:.42rem .55rem;}
.side-note{font-size:.72rem; color:var(--muted); line-height:1.5;}

main{min-width:0; display:flex; flex-direction:column;}
.topbar{display:none; position:sticky; top:0; z-index:20; flex-direction:column; gap:.55rem;
  padding:.7rem 1rem .6rem; background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line);}
.topbar-main{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.topbar-langs{display:flex; justify-content:center;}
.topbar-langs .flags{margin:0; justify-content:center; gap:.5rem;}
.topbar-langs .flag{opacity:1;}
.topbar-langs .flag img{box-shadow:0 0 0 1px var(--line);}
.topbar-langs .flag.on img{box-shadow:0 0 0 2px var(--accent);}
.topbar .brand-mark{font-size:1rem;}
.topbar-logo{flex:1; display:flex; justify-content:center; align-items:center; line-height:0; min-width:0;}
.topbar-logo .logo{width:auto; max-width:100%; max-height:80px; height:auto;}
.hamb{display:inline-flex; flex-direction:column; gap:4px; justify-content:center; width:2.4rem; height:2.4rem;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer; padding:0 .6rem;}
.hamb span{height:2px; background:var(--ink); border-radius:2px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:2.6rem 1.6rem 4rem; width:100%;}
main > .wrap{flex:1;}
.wrap.wide{max-width:52rem;}

/* Full-bleed hero */
.phero{position:relative; width:100%; overflow:hidden; display:flex; align-items:flex-end;
  min-height:clamp(220px,34vh,380px); background:var(--surface-2);}
.phero-home{min-height:min(72vh,640px);}
.phero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.phero-scrim{position:absolute; left:0; right:0; bottom:0; height:140px;
  background:linear-gradient(to bottom, rgba(6,14,22,0) 0%, rgba(6,14,22,.30) 100%);}
.phero-inner{position:relative; z-index:1; width:100%; padding:2.2rem 1.6rem; color:#fff;}
.phero h1{color:#fff; margin:0; text-shadow:0 1px 20px rgba(0,0,0,.35);}
.phero-sub{color:rgba(255,255,255,.92); font-size:1.15rem; line-height:1.5; margin:.7rem 0 0; max-width:34rem;
  text-shadow:0 1px 16px rgba(0,0,0,.4);}
.phero-img{transform-origin:center;}
@media (prefers-reduced-motion: no-preference){
  .phero-img{animation:kenburns 26s ease-in-out infinite alternate;}
}
@keyframes kenburns{from{transform:scale(1.001);} to{transform:scale(1.09);}}

/* Liens internes soulignés dans le texte */
.prose a, .callout a, .checklist a{text-decoration:underline; text-underline-offset:2px;}

/* Reveal on scroll */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;}
.js .reveal.is-in{opacity:1; transform:none;}

.eyebrow{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:600; color:var(--accent); margin:0 0 .7rem;}
h1{font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:clamp(2rem,4.4vw,2.85rem);
  line-height:1.08; margin:0 0 1.4rem; text-wrap:balance;}
h2{font-family:var(--display); font-weight:700; font-size:1.32rem; letter-spacing:-.01em; margin:2.4rem 0 .8rem; text-wrap:balance;}
.prose p{margin:0 0 1.15rem;} .prose{font-size:1.06rem;}
.prose ul{margin:0 0 1.15rem; padding-left:1.2rem;} .prose li{margin:0 0 .5rem;}
.lead{font-size:1.2rem; line-height:1.6; margin:0 0 1.6rem;}

.banner{margin:0 0 2rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}
.banner img{width:100%; aspect-ratio:16/5; object-fit:cover;}

.callout{background:var(--tint); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-left:3px solid var(--accent); border-radius:12px; padding:1.05rem 1.2rem; margin:1.7rem 0;}
.callout-tag{font-family:var(--display); text-transform:uppercase; letter-spacing:.11em; font-size:.66rem;
  font-weight:700; color:var(--accent-strong); display:inline-block; margin-bottom:.4rem;}
.callout-title{font-weight:600; margin:0 0 .35rem; color:var(--ink);}
.callout p{margin:0;}
.callout.warn{background:var(--warn-tint); border-color:var(--warn-border); border-left-color:var(--warn);}
.callout.warn .callout-tag{color:var(--warn-strong);}
.warn-note{border-left:3px solid var(--warn); padding-left:.85rem; margin:.2rem 0 0;}
.contact-langs{color:var(--muted); font-size:.92rem; margin:.2rem 0 0;}
.jotform-embed{margin-top:1.4rem; min-height:420px;}

.pratique{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem 1.4rem; margin:2.6rem 0 .5rem;}
.pratique h3{font-family:var(--display); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em;
  font-weight:700; color:var(--muted); margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem;}
.prat-ic{width:1.2rem; height:1.2rem; color:var(--accent); flex:none;}
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.checklist li{position:relative; padding-left:1.5rem; font-size:.98rem; line-height:1.5;}
.checklist li::before{content:""; position:absolute; left:0; top:.5em; width:.5rem; height:.5rem; border-radius:2px;
  background:var(--accent); transform:rotate(45deg);}
.apps-inline{color:var(--muted); font-size:.9rem;}

/* Home blocks (single column, icon rows) */
.home-top{margin:0 0 2.2rem;}
.home-top .prose{font-size:1.12rem;}
.home-blocks{margin-bottom:2.8rem;}
.cards{display:flex; flex-direction:column; gap:.7rem;}
.card{display:flex; flex-direction:row; align-items:center; gap:1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;}
.card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,40,60,.08); text-decoration:none;}
.card-ic{width:2.9rem; height:2.9rem; flex:none; border-radius:11px; background:#E8F0F8; display:grid; place-items:center;}
.card-ic .ic{width:1.6rem; height:1.6rem; display:block;}
.card-tx{display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:0;}
.card .ct{font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em;}
.card .cd{color:var(--muted); font-size:.92rem; line-height:1.45;}
.card .arw{color:var(--accent); flex:none; font-size:1.1rem; transition:transform .18s;}
.card:hover .arw{transform:translateX(3px);}
.home-intro{border-top:1px solid var(--line); padding-top:2rem;}

/* Apps */
.appgroup{margin:2.2rem 0 0;} .appgroup h2{margin-bottom:1rem;}
.appgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.8rem;}
.app{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem;
  display:flex; flex-direction:column; gap:.55rem;}
.app .an{font-family:var(--display); font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:.5rem;}
.app .fav{width:20px; height:20px; flex:none; border-radius:4px;}
.app .ap{color:var(--muted); font-size:.86rem; line-height:1.4; flex:1;}
.storelinks{display:flex; gap:.45rem; flex-wrap:wrap;}
.store{font-size:.78rem; font-weight:600; padding:.34rem .6rem; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink);}
.store:hover{border-color:var(--accent); color:var(--accent-strong); text-decoration:none;}

/* Form */
.contact-form{display:flex; flex-direction:column; gap:1.05rem; margin-top:1.4rem; max-width:34rem;}
.field{display:flex; flex-direction:column; gap:.35rem; margin:0;}
.field label{font-weight:600; font-size:.92rem;}
.field input, .field select, .field textarea{font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); outline:none;}
.field.consent label{font-weight:400; font-size:.9rem; display:flex; gap:.55rem; align-items:flex-start; line-height:1.45; color:var(--muted);}
.field.consent input{width:auto; margin-top:.2rem;}
.btn{font-family:var(--display); font-weight:600; font-size:1rem; background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:10px; padding:.8rem 1.5rem; cursor:pointer;}
.btn:hover{background:var(--accent-strong);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--accent);}

/* Eyebrow sur le hero */
.phero-eyebrow{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  font-weight:700; color:rgba(255,255,255,.85); margin:0 0 .6rem; text-shadow:0 1px 12px rgba(0,0,0,.45);}

/* Lien "gérer les cookies" dans le pied */
.cookies-link{background:none; border:none; padding:0; margin:0; font:inherit; color:var(--accent);
  font-weight:500; font-size:.92rem; cursor:pointer;}
.cookies-link:hover{text-decoration:underline;}

/* Bandeau de consentement */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:.9rem 1rem;
  background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(10,20,30,.14);}
.consent[hidden]{display:none;}
.consent-inner{max-width:64rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;}
.consent-text{margin:0; font-size:.92rem; color:var(--muted); line-height:1.5; flex:1; min-width:16rem;}
.consent-text a{color:var(--accent);}
.consent-btns{display:flex; gap:.6rem; flex:none;}
.consent .btn{padding:.55rem 1.1rem; font-size:.9rem;}
body.has-banner{padding-bottom:88px;}

/* Pager */
.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line);}
.pager a{display:flex; flex-direction:column; gap:.15rem; font-size:.92rem; max-width:48%;}
.pager .pl{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-family:var(--display); font-weight:600;}
.pager a.next{text-align:right; margin-left:auto;}

/* Footer */
.site-foot{border-top:1px solid var(--line); background:var(--surface); margin-top:auto;}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:2rem 1.6rem; display:flex; flex-direction:column; gap:.6rem;}
.foot-nav{display:flex; gap:1.2rem; flex-wrap:wrap;}
.foot-nav a{font-weight:500; font-size:.92rem;}
.foot-note{font-size:.78rem; color:var(--muted); margin:0; line-height:1.5;}

.backdrop{display:none;}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;}
  .topbar{display:flex;}
  .sidebar{position:fixed; top:0; left:0; z-index:40; width:min(19rem,84vw); height:100vh;
    transform:translateX(-102%); transition:transform .28s ease; box-shadow:0 12px 40px rgba(0,0,0,.18);}
  body.drawer .sidebar{transform:none;}
  body.drawer .backdrop{display:block; position:fixed; inset:0; z-index:30; background:rgba(4,12,20,.42);}
  .wrap{padding:2rem 1.15rem 3rem;}
  .phero-inner{padding:1.6rem 1.15rem;}
  .phero-home{min-height:min(58vh,440px);}
  .phero{min-height:clamp(180px,28vh,300px);}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important;}}