/* Lumineth sur PLN 2. Porté depuis /Users/ian/git-perso/lumineth-next/app/globals.css (30.09.2026).
   Polices locales (sous-ensemble latin, fichiers variables), aucune ressource externe (CSP). */
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-wght.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-wght.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

/* ============================================================
   Lumineth, design system ported from itadvice.ch (same author, same
   register): cool grey ground, white panels, navy + teal, IBM Plex Sans + Source Serif 4.
   One hyphen only, AA contrast, nothing under 14.5px.
   ============================================================ */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --ink:#111A22; --muted:#4F5D6B; --line:#D8E0E7; --line-soft:#E7ECF0;
  --navy:#0F2A44; --navy-2:#173E66; --navy-ink:#0B1F33;
  --teal:#0E7C66; --teal-ink:#0A5F4E; --teal-soft:#E3F3EE; --amber:#8A5A0E; --red:#9B2C2C;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* code blocks in articles only */
  --label:500 12.5px/1.2 var(--sans);
  --r:6px; --shadow:0 1px 2px rgba(17,26,34,.06),0 8px 24px rgba(17,26,34,.06);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--navy-2);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.005em;text-wrap:balance;margin:0}
h1{font-size:clamp(32px,4.6vw,46px)}
h2{font-size:clamp(24px,3vw,31px)}
h3{font-size:20px;letter-spacing:-.006em}
h4{font-size:17px}

/* ---------- primitives ---------- */
.wrap,.shell{max-width:1120px;margin:0 auto;padding-inline:24px}
.shell.max-w-2xl p,.shell.max-w-3xl p,.shell.max-w-2xl li{line-height:1.6}
.wrap.narrow{max-width:800px}
.kicker,.eyebrow{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 14px}
.lede{font-size:20px;line-height:1.5;color:var(--muted);max-width:36em;margin:14px 0 22px}
.muted{color:var(--muted)}
.display{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.005em}
.site-frame{max-width:none;border:0}
.section-grid{display:grid;gap:28px}
@media(min-width:768px){.section-grid{grid-template-columns:13rem 1fr;gap:56px}}

/* boutons */
.btn,a.cta,.btn-gold{display:inline-block;background:var(--navy);color:#fff;font-weight:600;font-size:16px;line-height:1.2;padding:14px 22px;border-radius:var(--r);text-decoration:none;border:1px solid var(--navy);transition:background .15s}
.btn:hover,a.cta:hover,.btn-gold:hover{background:var(--navy-2)}
.btn.small{padding:10px 16px;font-size:15px}
.btn.ghost,.btn-ghost{display:inline-block;background:transparent;color:var(--navy);border:1px solid var(--navy);font-weight:600;font-size:16px;line-height:1.2;padding:14px 22px;border-radius:var(--r);text-decoration:none}
.btn.ghost:hover,.btn-ghost:hover{background:var(--surface)}
.lk-arrow{font-weight:600;text-decoration:none;color:var(--navy-2);white-space:nowrap}
.lk-arrow::after{content:" \2192"}
.link-gold{color:var(--navy-2);text-underline-offset:3px}
.actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin:22px 0 0}

/* ---------- en-tete ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:22px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:21px;letter-spacing:-.01em;margin-right:auto;font-weight:600}
.brand-mark{width:26px;height:26px;color:var(--navy);flex:none}
.menu{display:flex;align-items:center;gap:4px}
.menu .lk{font-size:15.5px;color:var(--ink);text-decoration:none;padding:9px 11px;border-radius:var(--r);background:none;border:0;font:inherit;font-size:15.5px;cursor:pointer;white-space:nowrap}
.menu .lk:hover{background:var(--bg)}
.menu .lk.on{color:var(--teal-ink);font-weight:600}
.menu .lang{font-size:15.5px;color:var(--ink);padding:9px 11px;border-radius:var(--r);text-decoration:none}
.menu .lang:hover{background:var(--surface-2,#E7ECF0)}
.menu .btn{margin-left:8px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);width:44px;height:40px;padding:9px 10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:980px){
  .burger{display:flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 16px 18px;gap:2px;box-shadow:var(--shadow)}
  .site-head.open .menu{display:flex}
  .menu .lk{padding:12px 10px;font-size:16.5px}
  .menu .btn{margin:10px 0 0;text-align:center}
}

/* ---------- accueil ---------- */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(36px,5.2vw,54px)}
.hero .lede{font-size:21px}
.hero .who{font-size:15px;color:var(--muted);margin:8px 0 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:18px 20px 16px;font-size:14px}
.panel .ph{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:var(--label);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line-soft);padding-bottom:10px;margin-bottom:6px}
.panel .ph b{font-weight:500;color:var(--ink)}
.panel .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px;line-height:1.45}
.panel .row:last-of-type{border-bottom:0}
.panel .row span{color:var(--ink)}
.panel .st{font-size:14.5px;white-space:nowrap;color:var(--navy)}
.panel .pf{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px}
.panel .pf b{color:var(--navy);font-weight:600;font-size:16.5px;line-height:1.4}

.stats{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 40px;text-align:center;padding-block:30px}
.stats .wrap>div{max-width:34ch;margin:0 auto}
.stats .n{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.15;color:var(--navy);margin-bottom:8px}
.stats p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}

section.blk{padding:64px 0}
.shead{max-width:60ch;margin-bottom:30px}
.shead p{color:var(--muted);font-size:17.5px;margin:10px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s}

.card .ic{font:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.card h3{margin:0}
.card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);flex:1}
.card .go{font-weight:600;color:var(--navy-2);font-size:15px}
.card .go::after{content:" \2192"}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pillars>div{padding:26px 24px;border-right:1px solid var(--line)}
.pillars>div:last-child{border-right:0}
.pillars h3{margin-bottom:8px}
.pillars p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}

.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{position:relative;padding:22px 20px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--sans);font-weight:500;color:var(--teal-ink);font-size:13.5px;letter-spacing:.1em;display:block;margin-bottom:10px}
.steps h3{font-size:18px;margin-bottom:6px}
.steps p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}

.dark{background:var(--navy);color:#E8EEF4}
.dark h2{color:#fff}
.dark .shead p{color:#B9C8D6}
.dark .aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.dark .aud a,.dark .aud div{display:block;padding:18px 20px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r);color:#fff;text-decoration:none;font-weight:600;font-size:16.5px;transition:background .15s}
.dark .aud small{display:block;font-weight:400;color:#B9C8D6;font-size:14.5px;margin-top:4px;line-height:1.45}
.dark .aud a:hover{background:rgba(255,255,255,.08)}
.trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);font-family:var(--sans);font-weight:500;font-size:13.5px;color:#D6E0EA}
.trust span::before{content:"\2713";color:#5FD3B4;margin-right:8px}

.next{background:var(--teal-soft);border-top:1px solid #CFE7DF;padding:52px 0;margin-top:30px}
.next h2{margin-bottom:10px}
.next p{max-width:60ch}

/* ---------- pages de contenu ---------- */
main.page,.page{padding:56px 0 30px}
.prose{max-width:760px;line-height:1.6}
.prose h1{margin-bottom:6px}
.prose h2{margin:44px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.prose h3{margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:24px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--teal-ink);font-weight:600}
.prose .box{background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:18px 0;font-size:16.5px}
.faq details{border-top:1px solid var(--line);padding:10px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--teal-ink);font-size:20px;line-height:1;flex:none}
.faq details[open] summary::after{content:"-"}
.tbl{overflow-x:auto;margin:10px 0 18px}
table{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--bg)}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--navy)}

/* ---------- pied de page ---------- */
/* ---- about ---- */
.about{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.about .portrait{margin:0;max-width:300px}
.about .portrait img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
@media (max-width:900px){.about{grid-template-columns:1fr}.about .portrait{max-width:240px;order:-1}}

/* ---- contact form (itadvice model) ---- */
.cform{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px;display:flex;flex-direction:column;gap:22px}
.cform .cfield{border:0;padding:0;margin:0;min-width:0}
.cform .clabel{display:block;font-weight:600;font-size:15px;margin-bottom:10px}
.cform .pills{display:flex;flex-wrap:wrap;gap:8px}
.cform .pills button{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.cform .pills button:hover{border-color:var(--navy)}
.cform .pills button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cform .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
.cform .slots-day{display:flex;flex-direction:column;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.cform .slots-day>span{font-weight:600;font-size:14px;margin-bottom:2px}
.cform .slots-day label{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer;color:var(--muted)}
.cform .slots-day label.on{color:var(--navy);font-weight:600}
.cform .slots-day input{accent-color:var(--navy);width:16px;height:16px;margin:0}
.cform .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;font:inherit;font-size:15.5px;color:var(--ink)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.cform textarea{resize:vertical}
.cform .btn:disabled{opacity:.45;cursor:not-allowed}
.cform .cnote{margin:0;font-size:14px;color:var(--muted)}
.cform .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cform .cerr{margin:0;font-size:14px;color:var(--red);font-weight:600}
@media (max-width:560px){.cform{padding:18px 16px}.cform .cgrid{grid-template-columns:1fr}}

.site-foot{background:var(--navy-ink);color:#C9D5E0;margin-top:40px;padding:50px 0 26px;font-size:15px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-cols a{display:block;color:#E3EAF1;text-decoration:none;padding:4px 0}
.foot-cols a:hover{color:#fff;text-decoration:underline}
.foot-cols span{display:block;padding:4px 0}
.ft{font:var(--label);letter-spacing:.08em;text-transform:uppercase;color:#8FA3B7;margin-bottom:8px}
.foot-legal{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:6px 24px;font-size:13.5px;color:#8FA3B7}
.foot-legal a{color:#C9D5E0}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .stats .wrap{grid-template-columns:1fr;gap:26px}
  .pillars{grid-template-columns:1fr}
  .pillars>div{border-right:0;border-bottom:1px solid var(--line)}
  .pillars>div:last-child{border-bottom:0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .wrap,.shell{padding-inline:18px}
  .steps{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  section.blk{padding:46px 0}
  .hero{padding:40px 0 30px}
  main.page,.page{padding:36px 0 20px}
}

/* ---------- ajouts PLN 2 ---------- */
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:var(--r);z-index:100}
.skip:focus{left:12px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{opacity:.6}
.article{max-width:760px;margin:0 auto}
.article .meta{font-size:14px;color:var(--muted);margin:10px 0 26px}
.article h2{margin:40px 0 12px}
.article h3{margin:26px 0 8px}
.article p,.article li{line-height:1.65}
.article ul{padding-left:22px}
.article li::marker{color:var(--teal-ink)}
.article .callout{background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:28px 0}
.article .callout p{margin:0 0 12px}
.article .tbl{margin:18px 0 26px}
.svc-problem{font-size:19px;line-height:1.6;color:var(--ink);max-width:62ch}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.svc-grid .card h3{font-size:19px}
.svc-grid .card .num{font:var(--label);letter-spacing:.12em;color:var(--teal-ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.tags li{font:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);background:var(--teal-soft);border-radius:999px;padding:6px 10px}
.hidden-when-off{display:none}
.blk-in{margin:34px 0}
.card-media{margin:-20px -20px 14px;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.card-media img{display:block;width:100%;height:auto}
.next--inpage{margin:48px calc(50% - 50vw) 0;padding-inline:calc(50vw - 50% + 24px)}
.rich p{margin:0 0 14px}
.rich p:last-child{margin-bottom:0}
.blk--tight{padding-top:0}
.mt-0{margin-top:0}
.mt-l{margin-top:32px}
.mt-xl{margin-top:48px}
.kicker--dark{color:#5FD3B4}
.hero h1 + .kicker{margin-top:14px}
.prose h1 + .kicker,.article h1 + .kicker{margin:12px 0 0}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cards--3,.cards--4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards--2,.cards--3,.cards--4{grid-template-columns:1fr}}
/* revue web-design-guidelines (30.09) : tap mobile, ancres sous l'en-tête collant */
html{touch-action:manipulation;-webkit-tap-highlight-color:rgba(15,42,68,.12)}
[id]{scroll-margin-top:84px}
/* revue interactions (Emil Kowalski, 30.09) : appui ressenti, survol réservé aux souris */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.btn,a.cta,.btn-gold{transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.btn:active,a.cta:active,.btn-gold:active{transform:scale(.97)}
a.card{transition:border-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--ease-out)}
a.card:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){a.card:hover{border-color:var(--navy);box-shadow:var(--shadow)}}

/* ============================================================
   Maquette A « Console » (validée le 30.09.2026) : en-tête et bandeaux bleu nuit, icônes (sprite icons.svg),
   aperçu du Hub, bouton principal vert. Couleurs de la charte uniquement (navy, teal, #5FD3B4 sur fond sombre).
   ============================================================ */
.i{flex:none;display:inline-block;vertical-align:middle}
.btn,a.cta{display:inline-flex;align-items:center;gap:8px;background:var(--teal);border-color:var(--teal)}
.btn:hover,a.cta:hover{background:var(--teal-ink)}
.btn.ghost{display:inline-flex;align-items:center;gap:8px}

/* en-tête */
.site-head{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
.site-head .brand{color:#fff}
.menu .lk,.menu .lang{color:#D6E0EA}
.menu .lk.on{color:#5FD3B4}
.burger{border-color:rgba(255,255,255,.25)}
.burger span{background:#fff}
@media (hover:hover) and (pointer:fine){.menu .lk:hover,.menu .lang:hover{background:rgba(255,255,255,.08);color:#fff}}
@media (max-width:980px){.menu{background:var(--navy);border-bottom-color:rgba(255,255,255,.08)}}

/* héros de l'accueil */
.hero--dark{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-ink) 100%);color:#fff;padding:64px 0 84px}
.hero--dark .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}
.hero--dark h1{color:#fff;font-size:clamp(36px,4.8vw,54px);line-height:1.06}
.hero--dark .kicker{color:#5FD3B4}
.hero--dark .lede{color:#C4D2DF;font-size:19px;max-width:44ch}
.hero--dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){.hero--dark .btn.ghost:hover{background:rgba(255,255,255,.08)}}
.proof{display:flex;flex-wrap:wrap;gap:18px 32px;margin:36px 0 0}
.proof dt{font:600 26px/1.1 var(--serif);color:#fff}
.proof dd{margin:4px 0 0;font-size:14.5px;color:#9FB3C6}

/* aperçu de la console (illustration) */
.console{background:var(--navy-ink);border:1px solid #20405F;border-radius:14px;box-shadow:0 30px 60px -20px rgba(11,31,51,.45);color:#E6EEF5;font-size:14.5px;overflow:hidden}
.c-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--navy);border-bottom:1px solid #20405F}
.c-bar span{width:10px;height:10px;border-radius:50%;background:#2B4A69}
.c-bar b{margin-left:10px;color:#9FB3C6;font-size:13px;font-weight:500}
.c-body{display:grid;grid-template-columns:170px 1fr}
.c-side{padding:18px 14px;border-right:1px solid #20405F}
.c-lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8FA3B7;margin:0 0 10px}
.c-role{display:flex;gap:8px;align-items:center;color:#5FD3B4;font-weight:600;margin:0 0 18px}
.c-nav{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.c-nav li{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:6px;color:#C4D2DF}
.c-nav li.on{background:var(--navy-2);color:#fff}
.c-nav li.off{color:#6B8399}
.c-main{padding:18px}
.c-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:8px;background:#122F4B;margin-bottom:8px}
.c-ic{color:#5FD3B4;display:flex}
.pill{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:#20405F;color:#C4D2DF;white-space:nowrap}
.pill.ok{background:rgba(95,211,180,.16);color:#5FD3B4}
.pill.warn{background:rgba(233,181,90,.16);color:#E9B55A}
.c-foot{display:flex;gap:6px;align-items:center;color:#8FA3B7;font-size:13px;margin:12px 0 0}
@media (max-width:640px){.c-body{grid-template-columns:1fr}.c-side{display:none}}

/* cartes à icône */
.card--ic{padding:26px}
.card .ib{width:44px;height:44px;border-radius:10px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;margin-bottom:6px}
.card--hl{background:var(--navy);border-color:var(--navy);color:#fff}
.card--hl p{color:#B9C8D6}
.card--hl .ib{background:var(--navy-2);color:#5FD3B4}
.card .ic{display:inline-flex;align-items:center;gap:8px}
a.card--ic{transition:border-color 200ms ease,box-shadow 200ms ease,transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.card--ic:hover{transform:translateY(-3px);border-color:var(--teal)}a.card--hl:hover{border-color:#5FD3B4}}

/* Hub : rôles et intégrations */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split h2{margin:0 0 10px}
.sub{color:var(--muted);font-size:17.5px;margin:0;max-width:52ch}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:26px}
.role{padding:16px 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:15px;line-height:1.5}
.role b{display:flex;gap:8px;align-items:center;font-size:16px;margin-bottom:4px}
.role .i{color:var(--teal)}
.role span{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:22px 0 0}
.chips li{display:inline-flex;gap:8px;align-items:center;padding:9px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:15px;font-weight:500}
.chips .i{color:var(--teal)}

/* méthode */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr)}
.flow li{position:relative;padding-right:22px}
.flow .ib{width:48px;height:48px;border-radius:50%;background:var(--surface);border:1.5px solid var(--teal);color:var(--teal);display:grid;place-items:center;margin-bottom:14px;position:relative;z-index:1}
.flow li:not(:last-child)::after{content:"";position:absolute;top:24px;left:48px;right:0;height:1.5px;background:var(--line)}
.flow h3{font-size:18px;margin-bottom:4px}
.flow p{margin:0;color:var(--muted);font-size:15.5px}

/* appel final */
.end{background:var(--navy);color:#fff;border-radius:16px;padding:48px 56px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.end h2{color:#fff;margin:0}
.end p{color:#B9C8D6;margin:8px 0 0}
.lk-arrow--light{color:#fff}

/* bandeau de titre des pages intérieures (texte seul) */
.phead{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-ink) 100%);color:#fff;padding:56px 0 52px}
.phead h1{color:#fff;max-width:24ch}
.phead .kicker{color:#5FD3B4;margin:14px 0 0}
.phead .lede{color:#C4D2DF;margin:16px 0 0;max-width:52ch}
.phead .meta{color:#9FB3C6;font-size:14.5px;margin:10px 0 0}
.phead--split .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
main .page{padding-top:40px}
.page .blk-in:first-child{margin-top:0}
.article>.blk-in:first-child .rich--lead,.page .rich--lead{font-size:19px;color:var(--ink)}

@media (max-width:900px){
  .hero--dark .wrap,.phead--split .wrap,.split{grid-template-columns:1fr;gap:36px}
  .flow{grid-template-columns:1fr 1fr;gap:28px}
  .flow li::after{display:none}
  .end{flex-direction:column;align-items:flex-start;padding:32px 26px}
}
@media (max-width:560px){.hero--dark{padding:40px 0 56px}.phead{padding:40px 0 36px}.flow{grid-template-columns:1fr}}
.proof{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:18px 36px}
.blk-in .prose h2{border-top:0;padding-top:0;margin-top:0}
.blk-in{margin:56px 0}
.blk-in>.prose{margin-bottom:22px}
@media (max-width:560px){.proof{grid-template-columns:1fr 1fr}}
.btn{white-space:nowrap}

/* Variante Claire, choisie le 30.09.2026 : en-tête et bandeaux clairs ; seuls l aperçu du Hub et le pied de page restent sombres */
.site-head{background:var(--surface);border-bottom-color:var(--line)}
.site-head .brand{color:var(--ink)}
.menu .lk,.menu .lang{color:var(--ink)}.menu .lk.on{color:var(--teal-ink)}
.burger{border-color:var(--line)}.burger span{background:var(--ink)}
@media (hover:hover) and (pointer:fine){.menu .lk:hover,.menu .lang:hover{background:var(--bg);color:var(--ink)}}
@media (max-width:980px){.menu{background:var(--surface);border-bottom-color:var(--line)}}
.hero--dark,.phead{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);color:var(--ink);border-bottom:1px solid var(--line)}
.hero--dark h1,.phead h1{color:var(--ink)}
.hero--dark .kicker,.phead .kicker{color:var(--teal-ink)}
.hero--dark .lede,.phead .lede{color:var(--muted)}
.phead .meta{color:var(--muted)}
.hero--dark .btn.ghost{color:var(--navy);border-color:var(--navy)}
.proof dt{color:var(--navy)}.proof dd{color:var(--muted)}
.end{background:var(--teal-soft);color:var(--ink);border:1px solid #CFE7DF}.end h2{color:var(--ink)}.end p{color:var(--muted)}
.card--hl{background:var(--teal-soft);border-color:#CFE7DF;color:var(--ink)}.card--hl p{color:var(--muted)}.card--hl .ib{background:var(--surface);color:var(--teal)}
.proof dt{white-space:nowrap}.proof dd{max-width:22ch}

/* Revue de toutes les pages (30.09.2026, skills ton-et-rythme, web-design-guidelines, emil-design-eng) */
/* chapeau dans le bandeau */
.phead-lead{margin-top:16px;max-width:60ch}
.phead-lead .b-text{margin:0}
.phead-lead .rich--lead,.phead-lead .rich--lead p{font-size:19px;line-height:1.55;color:var(--muted)}
/* pages à blocs : titre à gauche, texte à droite, une idée par rangée */
.page--split .b-text{margin:0;padding-block:34px;border-top:1px solid var(--line)}
.page--split .b-text--titled{display:grid;grid-template-columns:minmax(0,320px) minmax(0,62ch);gap:12px 56px;align-items:start}
.page--split .b-text--titled h2{font-size:24px;margin:0}
.page--split .b-text .rich{font-size:17px;line-height:1.65}
.page--split .blk-in{margin:44px 0}
.page--split .blk-in .prose h2,.page--split > .wrap > .prose h2{font-size:26px}
.page--split .prose{max-width:none}
.page--split .faq{max-width:860px}
.page--split .b-text + .blk-in,.page--split .blk-in + .b-text{margin-top:10px}
@media (max-width:900px){.page--split .b-text--titled{grid-template-columns:1fr}.page--split .b-text{padding-block:26px}}
/* listes de liens du journal */
.linklist{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.linklist li{border-top:1px solid var(--line)}
.linklist a{display:flex;justify-content:space-between;gap:14px;padding:13px 2px;text-decoration:none;color:var(--ink);font-weight:500;font-size:16px;line-height:1.4}
.linklist a::after{content:"\2192";color:var(--teal);flex:none}
@media (hover:hover) and (pointer:fine){.linklist a:hover{color:var(--teal-ink)}}
@media (max-width:700px){.linklist{grid-template-columns:1fr}}
.page .shead.mt-l{margin-top:56px}
.card h3{font-size:19px}
/* grilles sans orpheline : la première carte (et la dernière si besoin) s'élargit pour remplir la dernière rangée */
@media (min-width:901px){
  .cards--3>:first-child:nth-last-child(3n+2),.cards--3>:first-child:nth-last-child(3n+4),.cards--3>:last-child:nth-child(3n+4){grid-column:span 2}
}
@media (min-width:561px) and (max-width:900px){.cards--3>:last-child:nth-child(odd),.cards--4>:last-child:nth-child(odd){grid-column:span 2}}
.list-head{font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);margin:40px 0 10px}
.page--split>.wrap>.b-text:first-child{border-top:0;padding-top:0}
/* menu mobile : site.js bascule la classe sur #menu */
@media (max-width:980px){.menu.open{display:flex}}
/* page Contact : coordonnées à gauche, formulaire à droite */
.ct{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.ct-side{display:flex;flex-direction:column;gap:22px}
.ct-side .kicker{margin:0}
.ct-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.ct-item .ib{width:42px;height:42px;border-radius:10px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center}
.ct-item p{margin:0 0 4px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ct-k{font:var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)!important}
.ct-v{font-size:18px!important;font-weight:600;color:var(--navy)!important}
.ct-v a{color:var(--navy);text-decoration:none}
.ct-reply{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.ct-reply b{font:600 18px/1.3 var(--serif)}
.ct-reply span{color:var(--muted);font-size:15px}
.pill-opt{position:relative;display:inline-flex}
.pill-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill-opt span{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;font-size:15px;color:var(--ink);transition:background-color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
.pill-opt:active span{transform:scale(.97)}
.pill-opt input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.pill-opt input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.pill-opt:hover span{border-color:var(--navy)}}
.slots-wrap{display:none}
.cform:has(input[name=format]:checked:not([value=email])) .slots-wrap{display:block}
.form-alert{border-radius:10px;padding:16px 18px;font-size:15.5px}
.form-alert--success{background:var(--teal-soft);border:1px solid #CFE7DF;color:var(--ink)}
.form-alert--error{background:#FBEFEF;border:1px solid #E7C4C4;color:var(--red)}
.form-alert ul{margin:8px 0 0;padding-left:20px}
@media (max-width:900px){.ct{grid-template-columns:1fr;gap:32px}}
/* maillage « Pour aller plus loin » */
.related{margin:56px 0 8px;padding-top:30px;border-top:1px solid var(--line)}
.related h2{font-size:24px;margin:0 0 16px}
.related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);transition:border-color 150ms ease,transform 160ms var(--ease-out)}
.related-list a:active{transform:scale(.99)}
.rk{font:var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.rt{font-weight:600;font-size:16px;line-height:1.4}
.rt::after{content:" \2192";color:var(--teal)}
@media (hover:hover) and (pointer:fine){.related-list a:hover{border-color:var(--teal)}}
@media (max-width:900px){.related-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.related-list{grid-template-columns:1fr}}
.article .related{margin-top:48px}
/* « Pour aller plus loin » : la marge intérieure reste dans la hauteur de la case (plus de débordement), rangées pleines */
.related-list li{display:flex;min-width:0}
.related-list a{box-sizing:border-box;width:100%;height:auto}
@media (min-width:901px){
  .related-list>li:first-child:nth-last-child(3n+2),.related-list>li:first-child:nth-last-child(3n+4),.related-list>li:last-child:nth-child(3n+4){grid-column:span 2}
}
@media (min-width:561px) and (max-width:900px){.related-list>li:last-child:nth-child(odd){grid-column:span 2}}
/* en-tête : menu des langues (code + nom dans sa langue) et icône d'appel */
.site-head .bar{gap:14px}
.ldd{position:relative;order:3}
.ldd-btn{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:8px 10px;border-radius:var(--r);font-weight:600;font-size:14.5px;color:var(--ink);min-height:40px}
.ldd-btn::-webkit-details-marker{display:none}
.ldd-btn .i{color:var(--muted)}
.ldd-chev{transition:transform 160ms var(--ease-out)}
.ldd[open] .ldd-chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.ldd-btn:hover{background:var(--bg)}}
.ldd-list{position:absolute;right:0;top:calc(100% + 6px);z-index:50;list-style:none;margin:0;padding:6px;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);transform-origin:top right;animation:ldd-in 160ms var(--ease-out)}
@keyframes ldd-in{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.ldd-list a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:6px;text-decoration:none;color:var(--ink);font-size:15px}
.ldd-list b{font:600 12.5px/1 var(--sans);letter-spacing:.08em;color:var(--muted);min-width:22px}
.ldd-list a[aria-current]{background:var(--teal-soft)}
.ldd-list a[aria-current] b{color:var(--teal-ink)}
@media (hover:hover) and (pointer:fine){.ldd-list a:hover{background:var(--bg)}}
.hd-tel{order:4;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);color:var(--teal);border:1px solid var(--line);transition:transform 160ms var(--ease-out),border-color 150ms ease}
.hd-tel:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.hd-tel:hover{border-color:var(--teal)}}
.burger{order:5}
@media (prefers-reduced-motion:reduce){.ldd-list{animation:none}.ldd-chev{transition:none}}
.foot-cols a.ft-ic{display:inline-flex;align-items:center;gap:8px}
.foot-cols a.ft-ic .i{color:#5FD3B4}
.hd-wa{order:4}
.hd-tel,.burger,.ldd{flex:none}
.burger{width:44px}
@media (max-width:560px){.site-head .bar{gap:6px}.ldd-btn{padding:8px 6px}.brand{font-size:19px}}
/* « Me contacter » tout à droite sur ordinateur ; dans le menu déroulant sur mobile */
.head-cta{order:6;margin-left:4px}
.menu .menu-cta{display:none}
@media (max-width:980px){.head-cta{display:none}.menu .menu-cta{display:block}}
.foot-cols .ft-ic{display:flex;align-items:center;gap:8px}
.foot-cols .ft-ic .i{color:#5FD3B4;flex:none}
.foot-cols .ft-ic .tel-obf{padding:0}
.foot-cols .ft-ic .tel-obf a{padding:0}
.foot-cols a.ft-ic{display:flex}
.brand-mark{width:30px;height:30px}
.foot-cols .ft-sign{font:600 19px/1.3 var(--serif);color:#fff;margin-bottom:6px}
/* bas de page : logo + copyright à gauche, liens rapides à droite */
.foot-legal{align-items:center;justify-content:space-between;gap:16px 24px}
.fl-left{display:flex;align-items:center;gap:12px}
.fl-mark{width:26px;height:26px;flex:none}
.fl-right{display:flex;align-items:center;gap:8px}
.fl-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.16);color:#C9D5E0;transition:border-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.fl-ic:active{transform:scale(.96)}
.fl-top{margin-left:8px;color:#C9D5E0;text-decoration:none;font-size:13.5px}
@media (hover:hover) and (pointer:fine){.fl-ic:hover{border-color:#5FD3B4;color:#fff}.fl-top:hover{color:#fff}}
@media (max-width:560px){.foot-legal{flex-direction:column;align-items:flex-start}}
.ft-brand{display:inline-flex!important;align-items:center;gap:12px;margin-bottom:14px;padding:0!important;font:600 24px/1 var(--serif);color:#fff!important;text-decoration:none!important}
.ft-brand svg{width:40px;height:40px;flex:none}
.fl-left{flex-wrap:wrap;gap:6px 18px}
.fl-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.fl-links a{color:#C9D5E0;text-decoration:none}
@media (hover:hover) and (pointer:fine){.fl-links a:hover{color:#fff;text-decoration:underline}}

/* Écriture du nom (30.09.2026) : A « Maison » dans l'en-tête, B « Étiquette » dans le pied de page */
.brand .bn{font:300 19px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;margin-right:-.3em}
.ft-brand{align-items:center!important}
.ft-brand .lbl{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.ft-brand .lbl .n{font:400 22px/1 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:#fff}
.ft-brand .lbl .r{align-self:stretch;height:1px;background:rgba(255,255,255,.35);margin-right:.26em}
.ft-brand .lbl .s{font:500 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#5FD3B4}
@media (max-width:560px){.brand .bn{font-size:17px;letter-spacing:.24em}}
.foot-cols .ft-brand .lbl span{padding:0}
.foot-cols .ft-brand .lbl .r{height:1px}
@media (max-width:560px){.brand .bn{font-size:14.5px;letter-spacing:.2em;margin-right:-.2em}.brand{gap:7px}.brand-mark{width:26px;height:26px}}
@media (max-width:380px){.brand .bn{display:none}}