/* Fraunces auto-hebergee */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/libs/fonts/fraunces-0.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/libs/fonts/fraunces-1.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:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/libs/fonts/fraunces-2.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}

/* Marketing RadioStack (thematisable clair/sombre) */

:root{ /* SIGNAL — sombre, defaut */
  --paper:#070C17; --card:#0F172A; --card2:#0B1220; --ink:#EAEEF6; --muted:#8E9BB6; --faint:#55617C;
  --line:#212C44; --line-soft:#141D31; --accent:#FF7A1A; --accent-soft:#33230F; --violet:#a78bfa;
  --fd:"Fraunces",Georgia,serif; --fb:"Inter",system-ui,sans-serif; --maxw:1080px; color-scheme:dark;
}
:root[data-theme="light"]{ /* ARDOISE CLAIRE */
  --paper:#E7EBF1; --card:#F4F6FA; --card2:#ECEFF4; --ink:#0F172A; --muted:#4B5567; --faint:#8892A3;
  --line:#D3D9E3; --line-soft:#E2E6ED; --accent:#E85D10; --accent-soft:#FBE3D2; --violet:#4c1d95; color-scheme:light;
}
/* Regles globales en @layer components : elles battent le preflight Tailwind (layer base)
   mais CEDENT aux utilitaires Tailwind (layer utilities, apres components).
   Indispensable sur les pages Tailwind (modules, inscription) : sans ca, marketing.css
   hors-layer ecrasait mb-8/mx-auto/text-center/bg-slate (texte non centre, pas d'espace). */
@layer components{
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
  body::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;background:var(--accent);z-index:60}
  :root[data-theme="light"] body::before{display:none}
  h1,h2,h3,h4{font-family:var(--fd);font-weight:430;font-style:normal;line-height:1.06;letter-spacing:-.012em;margin:0;text-wrap:balance}
  p{margin:0}a{color:inherit;text-decoration:none}img{max-width:100%}
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:28px}
.ey{font-family:var(--fb);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.ey::before{content:"";width:20px;height:2px;background:var(--accent)}
.btn{font-family:var(--fb);font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:3px;display:inline-flex;align-items:center;gap:8px;transition:.16s;cursor:pointer;border:0}
.btn.solid{background:var(--accent);color:#1a0d03}.btn.solid:hover{filter:brightness(1.08)}
:root[data-theme="light"] .btn.solid{background:var(--ink);color:var(--paper)}:root[data-theme="light"] .btn.solid:hover{background:var(--accent);filter:none}
.btn.line{border:1px solid var(--line);color:var(--ink);background:transparent}.btn.line:hover{border-color:var(--accent);color:var(--accent)}
.btn.link{padding:11px 2px;border-bottom:1px solid var(--ink);border-radius:0}.btn.link:hover{color:var(--accent);border-color:var(--accent)}

nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;padding-block:12px}
.logo{height:58px;width:auto;display:block;cursor:pointer}
nav .links{display:flex;align-items:center;gap:22px;margin-left:12px;margin-right:auto}
nav .links a{font-size:.88rem;color:var(--muted);padding-block:6px;border-top:2px solid transparent;border-bottom:2px solid transparent;transition:.15s;line-height:1}
nav .links a:hover{color:var(--ink)}nav .links a.on{color:var(--ink);border-bottom-color:var(--accent)}
.navcta{display:flex;gap:10px;align-items:center}
.tgl{background:transparent;border:1px solid var(--line);color:var(--ink);width:38px;height:34px;border-radius:100px;cursor:pointer;font-size:.95rem;display:grid;place-items:center}
.tgl:hover{border-color:var(--accent);color:var(--accent)}
.tgl .moon{display:none}.tgl .sun{display:block}
:root[data-theme="light"] .tgl .sun{display:none}:root[data-theme="light"] .tgl .moon{display:block}
.burger{display:none;background:none;border:0;cursor:pointer;font-size:1.3rem;color:var(--ink);padding:4px 8px}
@media (max-width:860px){
  nav .wrap{gap:10px;padding-block:8px}
  .logo{height:44px}
  nav .wrap>a[aria-label]{margin-right:auto}       /* le logo pousse le reste a droite */
  .burger{order:5}.navcta{order:4}                  /* burger tout a droite, apres le bloc actions */
  nav .links{position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);margin:0;padding:8px 0 6px;transform:translateY(-140%);transition:transform .2s;z-index:39;max-height:calc(100dvh - 60px);overflow-y:auto}
  nav .links.open{transform:translateY(0)}
  nav .links > a,.mdrop .mtrigger{padding:14px 28px;border-top:0;border-bottom:1px solid var(--line-soft)}
  nav .links > a.on,.mdrop .mtrigger.on{border-bottom-color:var(--line-soft);color:var(--accent)}
  .mdrop{display:block !important;position:static !important;width:100%}
  .mdrop .mtrigger{display:flex !important;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box}
  .mdrop .mtrigger i{transition:transform .2s;flex:0 0 auto}
  .mdrop.open .mtrigger i{transform:rotate(180deg)}
  .burger{display:block}
  .navcta{gap:8px}
  .navcta .log{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-weight:600;color:var(--ink);font-size:.85rem}
  .navcta .btn.solid{display:none}
  .drawer-cta{display:inline-flex !important;justify-content:center;margin:12px 24px 4px}
}
.navcta .log{color:var(--muted);font-size:.88rem}
.drawer-cta{display:none}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}
section .wrap{padding-block:70px}
.hero .wrap{padding-block:44px 40px;max-width:920px}
@media (max-width:860px){.hero .wrap{padding-block:24px 28px}}
.hero-brand{font-family:var(--fd);font-weight:500;font-size:clamp(1.7rem,7vw,2.2rem);letter-spacing:-.01em;line-height:1;color:var(--ink);margin:0 0 20px}
.hero-brand span{color:var(--accent)}
/* Signature RadioStack en tete des pages internes (suit l'alignement du parent) */
.mkt-brand{display:block;font-family:var(--fd);font-weight:500;font-size:clamp(1.5rem,4vw,1.9rem);letter-spacing:-.01em;line-height:1;color:var(--ink);margin:0 0 16px}
.mkt-brand span{color:var(--accent)}
.hero h1{font-size:clamp(2.5rem,5.8vw,4.4rem);font-weight:430;letter-spacing:-.02em;max-width:15ch}
.hero h1 .em{color:var(--accent);font-weight:500}
.hero .lead{font-size:1.24rem;color:var(--muted);max-width:52ch;margin:26px 0 34px}
.cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sub{margin-top:26px;color:var(--faint);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ptitle{border-bottom:1px solid var(--line)}.ptitle .wrap{padding-block:58px 38px}
.ptitle h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:20ch}.ptitle p{color:var(--muted);font-size:1.14rem;margin-top:16px;max-width:58ch}
.shead{margin-bottom:40px}.shead h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}.shead p{color:var(--muted);margin-top:14px;max-width:56ch;font-size:1.06rem}
.divide{border-top:1px solid var(--line)}

figure.shot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.03),0 26px 54px -28px rgba(0,0,0,.5)}
:root[data-theme="light"] figure.shot{box-shadow:0 22px 48px -30px rgba(15,23,42,.4)}
figure.shot img{display:block;width:100%;height:auto}
figure.shot.crop img{height:340px;object-fit:cover;object-position:top}
.cap{font-family:var(--fb);font-size:.74rem;color:var(--faint);margin-top:10px}.cap b{color:var(--muted);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}

.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.mini{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 20px}
.mini h3{font-family:var(--fb);font-weight:600;font-size:1.02rem;margin-bottom:8px;letter-spacing:-.01em}
.mini p{color:var(--muted);font-size:.9rem}
.mini .n{font-family:var(--fb);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}

.idx{border-top:1px solid var(--ink)}
.entry{display:grid;grid-template-columns:52px 1fr;gap:26px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.entry .no{font-family:var(--fb);font-size:.78rem;color:var(--accent);font-weight:600;padding-top:6px}
.entry h3{font-size:1.55rem}
.entry .role{font-family:var(--fb);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.entry p{font-family:var(--fb);color:var(--muted);font-size:1rem;margin-top:6px;max-width:60ch}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-block:52px;border-top:1px solid var(--line)}
.split:nth-of-type(even) .txt{order:2}
.split h3{font-size:1.8rem;margin-bottom:6px}
.split .role{font-family:var(--fb);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.split p{font-family:var(--fb);color:var(--muted);font-size:1.04rem}
.split ul{font-family:var(--fb);color:var(--muted);font-size:.96rem;margin:16px 0 0;padding-left:0;list-style:none}
.split li{padding:6px 0 6px 22px;position:relative}.split li::before{content:"→";position:absolute;left:0;color:var(--accent)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 24px}
.step .n{font-family:var(--fb);font-size:.8rem;color:var(--accent);font-weight:600}
.step h3{font-size:1.35rem;margin:14px 0 10px}.step p{font-family:var(--fb);color:var(--muted);font-size:1rem}

.signals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.sig{border:1px solid var(--line);border-radius:10px;padding:18px 18px;background:var(--card2)}
.sig h4{font-family:var(--fb);font-weight:600;font-size:.95rem;margin-bottom:6px}
.sig p{font-family:var(--fb);color:var(--muted);font-size:.86rem}

.stats{border-top:1px solid var(--line);background:var(--card2)}
.stats .wrap{padding-block:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.stat .k{font-family:var(--fd);font-weight:430;font-size:2.7rem;line-height:1;letter-spacing:-.02em}
.stat .l{font-family:var(--fb);color:var(--muted);font-size:.88rem;margin-top:12px}

.plan{max-width:720px;margin:8px auto 0;background:var(--card);border:1px solid var(--accent);border-radius:16px;padding:36px 32px;text-align:center}
.plan .badge{font-family:var(--fb);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.plan h3{font-size:2rem;margin:10px 0 6px}
.plan .desc{font-family:var(--fb);color:var(--muted);max-width:46ch;margin:0 auto 22px}
.plan .opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.plan .opt{border:1px solid var(--line);border-radius:10px;padding:16px 20px;text-align:left;min-width:210px}
.plan .opt b{font-family:var(--fb);font-weight:600;display:block;margin-bottom:4px}
.plan .opt span{font-family:var(--fb);color:var(--muted);font-size:.86rem}
.plan .adapt{font-family:var(--fb);font-size:.9rem;color:var(--muted);margin-bottom:22px}
.pricenote{font-family:var(--fb);text-align:center;color:var(--faint);font-size:.82rem;margin-top:22px}

.faq{border-top:1px solid var(--line);max-width:800px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{font-family:var(--fd);font-size:1.22rem;padding:24px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--accent);font-family:var(--fb);font-weight:500}.qa[open] summary::after{content:"–"}
.qa p{font-family:var(--fb);color:var(--muted);padding:0 0 24px;max-width:66ch;font-size:1rem}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.field{margin-bottom:16px}
.field label{font-family:var(--fb);font-size:.78rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:var(--fb);font-size:.95rem;padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.cinfo dt{font-family:var(--fb);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:22px}
.cinfo dd{margin:6px 0 0;font-size:1.05rem}

.pull{border-top:1px solid var(--line);background:var(--card2)}.pull .wrap{padding-block:82px;text-align:center}
.pull h2{font-size:clamp(2rem,4.6vw,3.2rem);max-width:22ch;margin:0 auto 16px}
.pull p{color:var(--muted);max-width:44ch;margin:0 auto 26px}.pull .cta{justify-content:center}

footer{border-top:1px solid var(--ink)}
footer .wrap{padding-block:44px 34px}
.ftop{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-logo{height:48px;width:auto}
.fcol h5{font-family:var(--fb);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.fcol a{display:block;color:var(--muted);font-size:.9rem;padding:4px 0;cursor:pointer}.fcol a:hover{color:var(--accent)}
.fcols{display:flex;gap:52px;flex-wrap:wrap}
.fbot{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:.8rem}

@media (max-width:860px){.two,.contact,.split,.steps,.signals,.cards4{grid-template-columns:1fr}.split .txt{order:0 !important}.stats .wrap{grid-template-columns:1fr 1fr;gap:26px}.plan .opts{flex-direction:column}figure.shot.crop img{height:230px}}

/* Bandeau d'annonce (landingContent.announce) */
.announce{background:var(--violet);color:#fff}
.announce .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;padding-block:9px;flex-wrap:wrap;font-family:var(--fb);font-size:.86rem}
.announce b{font-weight:700}
.announce a{font-weight:600;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.5)}
.announce a:hover{border-color:#fff}

/* Avis / temoignages (landingContent.testimonials) */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.avis-card{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 24px;display:flex;flex-direction:column}
.avis-card .q{font-family:var(--fd);font-size:1.06rem;line-height:1.42;color:var(--ink);flex:1}
.avis-card .q::before{content:"\201C";color:var(--accent);font-family:var(--fd);font-size:2.4rem;line-height:.2;display:block;margin-bottom:6px}
.avis-card figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.avis-card .nm{font-family:var(--fb);font-weight:600;font-size:.92rem}
.avis-card .rl{font-family:var(--fb);color:var(--muted);font-size:.8rem;margin-top:2px}
@media (max-width:860px){.avis{grid-template-columns:1fr}}

/* Menu Modules deroulant */
.mdrop{position:relative;display:flex;align-items:center}
.mdrop .mtrigger{display:inline-flex;align-items:center;gap:6px}
.mpanel{position:absolute;left:0;top:100%;padding-top:12px;display:none;z-index:50}
.mdrop:hover .mpanel,.mdrop:focus-within .mpanel{display:block}
.mpanel-in{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px -24px rgba(0,0,0,.5);padding:8px;width:256px}
.mpanel-in a{display:flex;gap:12px;align-items:flex-start;padding:9px 11px;border-radius:8px;color:var(--muted);font-size:.9rem;border:0}
.mpanel-in a:hover{background:var(--card2);color:var(--ink)}
.mpanel-in a i{color:var(--accent);width:18px;text-align:center;padding-top:3px}
.mpanel-in a small{display:block;color:var(--faint);font-size:.72rem;margin-top:1px}
@media (max-width:860px){
  .mpanel{position:static !important;display:none;padding:0;width:100%;box-shadow:none}
  .mdrop:hover .mpanel,.mdrop:focus-within .mpanel{display:none}
  .mdrop.open .mpanel{display:block}
  .mpanel-in{display:block !important;width:auto;border:0;box-shadow:none;background:var(--card2);border-radius:0;padding:6px 0}
  .mpanel-in a{display:flex;width:100%;box-sizing:border-box;padding:11px 28px 11px 42px;font-size:.88rem;border-bottom:1px solid var(--line-soft)}
  .mpanel-in a small{font-size:.7rem}
}

/* Contenu CMS (pages legales, FAQ) rendu dans le shell marketing */
.cms-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 30px}
.cms-content{font-family:var(--fb);color:var(--muted);font-size:1rem;line-height:1.7}
.cms-content h1,.cms-content h2,.cms-content h3,.cms-content h4{font-family:var(--fd);color:var(--ink);line-height:1.15;margin:1.6em 0 .5em}
.cms-content h1{font-size:1.9rem}.cms-content h2{font-size:1.5rem}.cms-content h3{font-size:1.2rem}
.cms-content h1:first-child,.cms-content h2:first-child,.cms-content h3:first-child{margin-top:0}
.cms-content p{margin:0 0 1em}.cms-content ul,.cms-content ol{margin:0 0 1em;padding-left:1.3em}.cms-content li{margin:.3em 0}
/* Le contenu CMS (TinyMCE) contient parfois des classes Tailwind figees (text-slate-300…)
   d'une ancienne version sombre : illisibles en theme clair. On force la couleur via les tokens
   (regle hors-layer -> bat les utilitaires Tailwind), pour que le CMS suive toujours le theme. */
.cms-content,.cms-content p,.cms-content li,.cms-content td,.cms-content dd,.cms-content span{color:var(--muted)}
.cms-content h1,.cms-content h2,.cms-content h3,.cms-content h4,.cms-content h5,.cms-content strong,.cms-content b,.cms-content th{color:var(--ink)}
.cms-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cms-content hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.cms-content table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.92rem}
.cms-content th,.cms-content td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.cms-content th{background:var(--card2);color:var(--ink);font-weight:600}
.cms-content details{border-bottom:1px solid var(--line);padding:2px 0}
.cms-content summary{cursor:pointer;color:var(--ink);font-family:var(--fd);font-size:1.1rem;padding:14px 0}

/* Encart icone + grille 2 colonnes generique */
.icobox{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;background:var(--card2);border:1px solid var(--line);font-size:1.05rem}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini .icobox{margin-bottom:12px}
.mini.row{display:flex;gap:16px;align-items:flex-start}.mini.row .icobox{margin-bottom:0;flex:0 0 auto}
@media (max-width:860px){.cards2{grid-template-columns:1fr}}

/* Tarifs : selecteur, bascule, prix, comparatif */
.ctpills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ct-pill{font-family:var(--fb);font-weight:600;font-size:.85rem;padding:9px 16px;border-radius:100px;border:1px solid var(--line);color:var(--muted);background:transparent;cursor:pointer;transition:.15s}
.ct-pill:hover{border-color:var(--accent);color:var(--ink)}
.ct-pill.active{background:var(--accent);color:#1a0d03;border-color:var(--accent)}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:4px}
.seg button{font-family:var(--fb);font-weight:600;font-size:.86rem;padding:9px 18px;border-radius:100px;border:0;background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.seg button .off{color:var(--accent)}
.seg button.active{background:var(--accent);color:#1a0d03}.seg button.active .off{color:#1a0d03}
.pricebig{text-align:center;background:var(--card);border:1px solid var(--accent);border-radius:20px;padding:40px 32px}
.pricebig .tag{display:inline-block;font-family:var(--fb);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:100px;padding:5px 14px;margin-bottom:18px}
.pricebig .amount{font-family:var(--fd);font-size:clamp(3rem,7vw,4.2rem);font-weight:500;line-height:1}
.pricebig .cur{color:var(--muted);font-size:1rem;margin-left:8px}
.pricebig .hint{color:var(--muted);font-size:.9rem;margin:12px 0 24px}
.incl{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-top:24px}
.incl h3{font-family:var(--fb);font-weight:600;text-align:center;margin-bottom:16px}
.incl .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:.92rem;color:var(--muted)}
.incl .grid div{display:flex;gap:10px;align-items:center}.incl .grid i{color:#1a8a4f}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;margin-top:16px}
.cmp .col{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.cmp .col.us{border-color:var(--accent)}
.cmp .col .head{padding:14px 20px;border-bottom:1px solid var(--line);font-family:var(--fb);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp .col .head small{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint);margin-top:2px}
.cmp .col.us .head{color:var(--accent)}
.cmp .row{display:flex;justify-content:space-between;gap:16px;padding:11px 20px;border-top:1px solid var(--line-soft);font-size:.9rem}
.cmp .row:first-child{border-top:0}.cmp .row .lbl{color:var(--ink)}.cmp .row .lbl small{display:block;color:var(--faint);font-size:.7rem;font-style:italic}
.cmp .row .pr{font-weight:700;color:var(--muted);white-space:nowrap}.cmp .row .pr.off{color:var(--faint)}
.cmp .usline{display:flex;gap:10px;align-items:flex-start;padding:9px 20px;font-size:.9rem;color:var(--ink)}.cmp .usline i{color:#1a8a4f;padding-top:3px}
.cmp .tot{margin-top:auto;padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-weight:700}
.cmp .col.us .tot{background:var(--accent-soft)}
.cmpfoot{margin-top:16px;text-align:center;background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:12px 18px;font-weight:600;color:var(--accent);font-size:.92rem}
@media(max-width:860px){.cmp{grid-template-columns:1fr}.incl .grid{grid-template-columns:1fr}}

/* AUTH (connexion / inscription / mot de passe) */
.auth{min-height:62vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:56px 20px}
.auth::before{content:"";position:fixed;inset:0;background:radial-gradient(900px 520px at 50% -8%,var(--accent-soft),transparent 60%);z-index:0}
.auth-card{position:relative;z-index:1;width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:38px 34px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.auth-card.wide{max-width:560px}
.auth-head{text-align:center;margin-bottom:26px}
.auth-head img{height:64px;width:auto;object-fit:contain;margin:0 auto 16px;display:block}
.auth-head h1{font-size:1.7rem;margin-bottom:6px}
.auth-head p{color:var(--muted);font-size:.92rem}
.auth-alert{border-radius:10px;padding:12px 14px;font-size:.88rem;margin-bottom:18px;display:flex;gap:9px;align-items:center;border:1px solid}
.auth-alert.err{background:color-mix(in srgb,#d64c3b 14%,transparent);border-color:color-mix(in srgb,#d64c3b 45%,transparent);color:#e06a5a}
.auth-alert.ok{background:color-mix(in srgb,#1a8a4f 14%,transparent);border-color:color-mix(in srgb,#1a8a4f 45%,transparent);color:#2fae6a}
.auth-field{margin-bottom:16px}
.auth-field label{font-family:var(--fb);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px}
.auth-input{position:relative}
.auth-input>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.auth-field input,.auth-field select{width:100%;font-family:var(--fb);font-size:.95rem;padding:12px 14px 12px 40px;border:1px solid var(--line);border-radius:9px;background:var(--card2);color:var(--ink)}
.auth-field.plain input{padding-left:14px}
.auth-field input:focus,.auth-field select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.auth-row a{font-size:.85rem;color:var(--accent)}.auth-row a:hover{filter:brightness(1.12)}
.auth-btn{width:100%;justify-content:center;padding:13px 20px;font-size:.95rem}
.auth-foot{margin-top:24px;text-align:center;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:.85rem}
.auth-foot a{color:var(--ink);font-weight:600}.auth-foot a:hover{color:var(--accent)}
.auth-tgl{position:fixed;top:16px;right:16px;z-index:5}
.auth-two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.auth-check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin-bottom:18px}
.auth-check input{margin-top:3px;flex-shrink:0}
.auth-check a{color:var(--accent)}
@media(max-width:520px){.auth-two{grid-template-columns:1fr}.auth-card{padding:30px 22px}}