/* Livret d'accueil INORIX — appli mobile (charte INORIX 2030) */
:root{
  --marine:#003142; --marine2:#0b4457; --teal:#00989A; --teal2:#00b3b5; --tealpale:#e3f3f3; --tealpale2:#f1f8f8;
  --texte:#1d2b33; --gris:#5f6f78; --ligne:#dde6ea; --fond:#f4f7f8; --carte:#ffffff;
  --rouge:#c0392b; --jaune:#fff4d6; --jauneb:#e0a92e; --ok:#1e9e5a;
  --r:16px; --ombre:0 2px 10px rgba(0,49,66,.08);
  --nav:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --texte:#e6eef1; --gris:#9db0b8; --ligne:#24414d; --fond:#071d26; --carte:#0e2b37;
    --tealpale:#123c46; --tealpale2:#0f3540; --jaune:#4a3b12; --ombre:0 2px 10px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --texte:#e6eef1; --gris:#9db0b8; --ligne:#24414d; --fond:#071d26; --carte:#0e2b37;
  --tealpale:#123c46; --tealpale2:#0f3540; --jaune:#4a3b12; --ombre:0 2px 10px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--fond);color:var(--texte);font-size:16px;line-height:1.5;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom))}
#app{max-width:620px;margin:0 auto;min-height:100vh;background:var(--fond)}
a{color:var(--teal)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.2;color:inherit}
p{margin:.5em 0}

/* ---------- barre du haut ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));background:var(--marine);color:#fff}
.top .logo{height:20px;width:auto}
.top .titre{flex:1;font-size:14px;font-weight:bold;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top button{background:none;border:0;color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.top button:active{background:rgba(255,255,255,.12)}
.top svg{width:22px;height:22px}
.barre-prog{position:sticky;top:calc(58px + env(safe-area-inset-top));z-index:19;height:3px;background:transparent}
.barre-prog i{display:block;height:100%;width:0;background:var(--teal2);transition:width .2s}

/* ---------- navigation basse ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--carte);border-top:1px solid var(--ligne);
  padding-bottom:env(safe-area-inset-bottom)}
.nav ul{list-style:none;margin:0 auto;padding:0;display:flex;max-width:620px;height:var(--nav)}
.nav li{flex:1}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;
  text-decoration:none;color:var(--gris);font-size:11px;font-weight:bold}
.nav a svg{width:23px;height:23px}
.nav a.on{color:var(--teal)}

/* ---------- héros d'accueil ---------- */
.hero{position:relative;min-height:440px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--marine)}
.hero img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,49,66,.05) 20%,rgba(0,49,66,.85) 62%,var(--marine) 92%)}
.hero .in{position:relative;z-index:1;padding:20px 16px 24px}
.sur{font-size:11px;letter-spacing:.2em;font-weight:bold;color:#7fd0d1;text-transform:uppercase}
.hero h1{font-size:36px;margin:.25em 0 .2em}
.hero h1 b{color:var(--teal2)}
.hero p{color:#cfe2e6;margin:0 0 14px}
.tiret{width:56px;height:4px;background:var(--teal);border-radius:2px;margin:10px 0 14px}

.prog{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:12px 14px}
.anneau{--p:0;width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--teal2) calc(var(--p)*1%),rgba(255,255,255,.15) 0)}
.anneau span{width:46px;height:46px;border-radius:50%;background:var(--marine);display:grid;place-items:center;font-weight:bold;font-size:14px}
.prog .t{font-size:14px;color:#cfe2e6}
.prog .t b{color:#fff;display:block;font-size:15px}

/* ---------- blocs ---------- */
.pad{padding:16px}
.sec-t{position:relative;font-size:17px;font-weight:bold;color:var(--marine);letter-spacing:-.01em;text-transform:none;margin:26px 0 12px;padding-left:13px;line-height:1.25}
.pad > .sec-t:first-child{margin-top:4px}
.raccourcis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.raccourcis a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;background:var(--carte);border-radius:14px;
  box-shadow:var(--ombre);text-decoration:none;color:var(--texte);font-size:11.5px;font-weight:bold;text-align:center;line-height:1.2}
.raccourcis .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tealpale);color:var(--teal)}
.raccourcis .ic.r{background:#fde8e6;color:var(--rouge)}
.raccourcis svg{width:22px;height:22px}

.chapitres{display:grid;gap:12px}
.chap{position:relative;display:block;border-radius:var(--r);overflow:hidden;min-height:150px;color:#fff;text-decoration:none;background:var(--marine);box-shadow:var(--ombre)}
.chap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,49,66,.95) 30%,rgba(0,49,66,.35))}
.chap .in{position:relative;z-index:1;padding:16px;max-width:78%}
.chap .num{font-size:30px;font-weight:bold;color:var(--teal2);line-height:1}
.chap h3{font-size:19px;margin:4px 0}
.chap small{color:#cfe2e6;font-size:13px;display:block}
.chap .etat{position:absolute;z-index:1;right:12px;bottom:12px;font-size:12px;font-weight:bold;background:rgba(255,255,255,.14);padding:4px 10px;border-radius:20px}
.chap .etat.ok{background:var(--teal)}

.carte{background:var(--carte);border-radius:var(--r);box-shadow:var(--ombre);padding:16px;margin:0 0 12px}
.carte.p{background:var(--tealpale)}
.carte.m{background:var(--marine);color:#fff}
.carte.m .sur{color:#7fd0d1}
.carte h3{font-size:17px;margin-bottom:6px;color:var(--marine)}
.carte.m h3{color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .carte h3{color:#bfe6e7}}
:root[data-theme="dark"] .carte h3{color:#bfe6e7}
.carte.m h3{color:#fff}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g2 .carte{margin:0}
@media (max-width:380px){.g2{grid-template-columns:1fr}}

ul.puces{margin:6px 0;padding-left:0;list-style:none}
ul.puces li{position:relative;padding-left:18px;margin:6px 0}
ul.puces li::before{content:"";position:absolute;left:3px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
ul.puces.non li::before{border-radius:2px;background:var(--rouge)}
.note{border-left:4px solid var(--teal);background:var(--tealpale2);padding:12px 14px;border-radius:0 12px 12px 0;margin:12px 0}
.ac{display:inline-block;background:var(--jaune);border:1px dashed var(--jauneb);color:#9a6a00;font-weight:bold;font-size:.82em;padding:1px 7px;border-radius:6px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ac{color:#ffd57a}}
:root[data-theme="dark"] .ac{color:#ffd57a}
.photo{position:relative;border-radius:var(--r);overflow:hidden;margin:0 0 12px;background:var(--marine)}
.photo img{width:100%;height:220px;object-fit:cover}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.puce-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-weight:bold;font-size:13px;flex:none}
.etapes{display:grid;gap:8px}
.etape{display:flex;gap:12px;align-items:flex-start;background:var(--carte);border-radius:14px;padding:12px;box-shadow:var(--ombre)}
.etape > div > b{display:block}
.etape small{color:var(--gris)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{background:var(--tealpale);color:var(--marine);font-weight:bold;font-size:12.5px;padding:5px 11px;border-radius:20px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tags span{color:#cfeeee}}
:root[data-theme="dark"] .tags span{color:#cfeeee}

/* ---------- page section ---------- */
.entete{position:relative;color:#fff;background:var(--marine);overflow:hidden}
.entete img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.entete .in{position:relative;padding:22px 16px 20px}
.entete h1{font-size:27px;margin-top:6px}
.entete p{color:#cfe2e6;margin:8px 0 0;font-size:14.5px}
.fil{font-size:12px;color:#9fc9cf;margin-bottom:2px}
.fil a{color:#9fc9cf;text-decoration:none}
.sommaire-chap a{display:flex;align-items:center;gap:12px;padding:14px;background:var(--carte);border-radius:14px;margin-bottom:8px;
  box-shadow:var(--ombre);text-decoration:none;color:var(--texte)}
.sommaire-chap a b{display:block}
.sommaire-chap a small{color:var(--gris)}
.sommaire-chap .coche{margin-left:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--ligne);display:grid;place-items:center;flex:none;color:#fff}
.sommaire-chap .coche.ok{background:var(--ok);border-color:var(--ok)}
.sommaire-chap .coche svg{width:14px;height:14px}

.contenu{padding:16px}
.contenu h2{font-size:20px;color:var(--marine);margin:22px 0 10px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .contenu h2{color:#bfe6e7}}
:root[data-theme="dark"] .contenu h2{color:#bfe6e7}
.contenu > h2:first-child{margin-top:4px}
.lu-bar{display:flex;gap:10px;padding:0 16px 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 16px;font-weight:bold;
  background:var(--teal);color:#fff;text-decoration:none;font-size:15px}
.btn.sec{background:var(--tealpale);color:var(--marine)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.sec{color:#cfeeee}}
:root[data-theme="dark"] .btn.sec{color:#cfeeee}
.btn.plein{width:100%}
.btn.ok{background:var(--ok)}
.btn:disabled{opacity:.45}
.btn svg{width:18px;height:18px}
.suivant{display:flex;gap:10px;padding:0 16px 24px}
.suivant a{flex:1;display:block;padding:12px 14px;border-radius:14px;background:var(--carte);box-shadow:var(--ombre);text-decoration:none;color:var(--texte);font-size:14px}
.suivant a small{display:block;color:var(--gris);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.suivant a.d{text-align:right}

/* ---------- vidéo ---------- */
.video{border-radius:var(--r);overflow:hidden;margin:0 0 14px;background:#000;aspect-ratio:16/9}
.video iframe,.video video{width:100%;height:100%;border:0;display:block}
.video-vide{display:flex;gap:12px;align-items:center;border:2px dashed var(--ligne);border-radius:var(--r);padding:12px 14px;margin:0 0 14px;color:var(--gris);font-size:13.5px}
.video-vide .ic{width:42px;height:42px;border-radius:50%;background:var(--tealpale);color:var(--teal);display:grid;place-items:center;flex:none}
.video-vide b{display:block;color:var(--texte)}

/* ---------- widgets ---------- */
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chiffre{background:var(--tealpale);border-radius:14px;padding:14px}
.chiffre b{font-size:28px;color:var(--marine);display:block;line-height:1.1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chiffre b{color:#fff}}
:root[data-theme="dark"] .chiffre b{color:#fff}
.chiffre small{color:var(--gris);font-size:12.5px;line-height:1.3;display:block;margin-top:4px}

.ca{display:flex;align-items:flex-end;gap:5px;height:190px;padding-top:24px}
.ca button{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;background:none;border:0;padding:0;gap:4px;color:var(--texte)}
.ca .b{width:100%;border-radius:6px 6px 0 0;background:var(--teal);height:0;transition:height .8s cubic-bezier(.2,.8,.2,1);position:relative}
.ca .b.prev{background:repeating-linear-gradient(45deg,var(--teal) 0 5px,var(--teal2) 5px 9px)}
.ca button.on .b{background:var(--marine)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ca button.on .b{background:#fff}}
:root[data-theme="dark"] .ca button.on .b{background:#fff}
.ca .v{font-size:10px;font-weight:bold;white-space:nowrap}
.ca .a{font-size:11px;font-weight:bold;color:var(--teal)}
.ca-detail{margin-top:10px;background:var(--tealpale2);border-radius:12px;padding:10px 12px;font-size:14px;min-height:46px}

.flip{perspective:900px;height:150px;border:0;background:none;padding:0;width:100%;text-align:left}
.flip .f{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip.on .f{transform:rotateY(180deg)}
.flip .fa,.flip .fb{position:absolute;inset:0;border-radius:14px;padding:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.flip .fa{background:var(--tealpale);color:var(--texte);justify-content:space-between}
.flip .fa b{font-size:17px;color:var(--marine)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .flip .fa b{color:#fff}}
:root[data-theme="dark"] .flip .fa b{color:#fff}
.flip .fa small{color:var(--gris);font-size:12px}
.flip .fb{background:var(--marine);color:#fff;transform:rotateY(180deg);font-size:13.5px;line-height:1.4;justify-content:center}

.carte-fr{position:relative}
.carte-fr svg{width:100%;height:auto;display:block}
.carte-fr .pays{fill:var(--tealpale);stroke:var(--teal);stroke-width:.6}
.carte-fr .pt{cursor:pointer}
.carte-fr .pt circle.h{fill:var(--teal);opacity:.25}
.carte-fr .pt circle.c{fill:var(--marine);stroke:#fff;stroke-width:.5}
.carte-fr .pt.on circle.c{fill:var(--teal)}
.carte-fr .pt text{font-size:3.4px;font-weight:bold;fill:var(--texte)}
.agence{margin-top:10px}
.agence h3{display:flex;justify-content:space-between;gap:8px}
.agence .act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.agence .act .btn{padding:9px 12px;font-size:13.5px}

.orga-dir{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
@media (max-width:440px){.orga-dir{grid-template-columns:1fr}}
.pers{display:flex;align-items:center;gap:10px;background:var(--carte);border-radius:14px;padding:10px;box-shadow:var(--ombre);border:0;width:100%;text-align:left;color:var(--texte)}
.pers.d{background:var(--marine);color:#fff}
.pers img,.pers .ini{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--teal);flex:none}
.pers .ini{display:grid;place-items:center;background:var(--tealpale);color:var(--marine);font-weight:bold}
.pers b{display:block;font-size:14px;line-height:1.2}
.pers small{color:var(--gris);font-size:12px;line-height:1.25;display:block}
.pers.d small{color:#b9d3d8}
.orga-onglets{display:flex;gap:6px;margin:14px 0 10px;overflow-x:auto}
.orga-onglets button{border:0;border-radius:20px;padding:7px 13px;background:var(--tealpale);color:var(--marine);font-weight:bold;font-size:13px;white-space:nowrap}
.orga-onglets button.on{background:var(--marine);color:#fff}
.orga-liste{display:grid;gap:8px}
.ligne-h{display:flex;flex-direction:column;gap:4px}
.ligne-h div{background:var(--marine);color:#fff;font-weight:bold;font-size:14px;padding:10px 14px;border-radius:10px;position:relative;text-align:center}
.ligne-h div:nth-child(even){background:var(--teal)}
.ligne-h i{display:block;text-align:center;color:var(--teal);font-style:normal;line-height:1}

.simu .champs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.simu label{font-size:12px;font-weight:bold;color:var(--gris)}
.simu input{width:100%;font-size:18px;font-weight:bold;padding:10px;border-radius:10px;border:1.5px solid var(--ligne);background:var(--carte);color:var(--texte);margin-top:3px}
.simu table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
.simu th{font-size:11px;text-align:left;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;padding:4px}
.simu td{padding:8px 4px;border-top:1px solid var(--ligne)}
.simu td.hs{font-weight:bold;color:var(--teal)}
.simu .res{margin-top:10px;font-weight:bold}

.marches{display:flex;align-items:flex-end;gap:4px;height:120px}
.marches button{flex:1;border:0;border-radius:6px 6px 0 0;background:#b3e0e1;padding:0}
.marches button:nth-child(n+4){background:var(--teal)}
.marches button:last-child{background:var(--marine)}
.marches button.on{outline:3px solid var(--jauneb);outline-offset:1px}
.marches-detail{margin-top:10px;background:var(--tealpale2);border-radius:12px;padding:10px 12px;font-size:14px}

.pyramide{display:grid;gap:6px}
.pyramide details{background:var(--tealpale);border-radius:12px;overflow:hidden}
.pyramide summary{list-style:none;padding:12px 14px;font-weight:bold;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--texte)}
.pyramide summary::-webkit-details-marker{display:none}
.pyramide summary .n{width:24px;height:24px;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
.pyramide details p{padding:0 14px 12px 48px;margin:0;font-size:14px;color:var(--gris)}

details.acc{background:var(--carte);border-radius:14px;box-shadow:var(--ombre);margin-bottom:8px}
details.acc summary{list-style:none;padding:14px;font-weight:bold;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";color:var(--teal);font-size:20px;line-height:1}
details.acc[open] summary::after{content:"–"}
details.acc .in{padding:0 14px 14px}

.urg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.urg a{display:flex;align-items:center;gap:10px;background:var(--marine);color:#fff;text-decoration:none;border-radius:14px;padding:12px}
.urg a b{font-size:24px;color:var(--teal2);min-width:44px}
.urg a small{font-size:12.5px;line-height:1.2}
.urg a.l{grid-column:1/-1}

/* ---------- parcours / checklist ---------- */
.check{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--carte);border-radius:14px;margin-bottom:8px;box-shadow:var(--ombre);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--teal);flex:none;margin:0;display:grid;place-items:center;background:var(--carte)}
.check input:checked{background:var(--teal)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.check.fait span{color:var(--gris);text-decoration:line-through}
.check small{display:block;color:var(--gris);text-decoration:none}

/* ---------- quiz ---------- */
.q{background:var(--carte);border-radius:var(--r);box-shadow:var(--ombre);padding:16px;margin-bottom:12px}
.q .qn{font-size:12px;color:var(--teal);font-weight:bold;letter-spacing:.08em}
.q h3{font-size:17px;margin:6px 0 12px;color:var(--texte)}
.q .rep{display:grid;gap:8px}
.q .rep button{text-align:left;border:1.5px solid var(--ligne);background:var(--carte);color:var(--texte);border-radius:12px;padding:12px 14px;font-size:15px}
.q .rep button.bon{border-color:var(--ok);background:#e3f6ec;color:#11502e}
.q .rep button.faux{border-color:var(--rouge);background:#fdecea;color:#7b1d14}
.q .expl{margin-top:10px;font-size:14px;color:var(--gris)}
.score{text-align:center;padding:24px 16px}
.score .gros{font-size:54px;font-weight:bold;color:var(--teal);line-height:1}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{text-align:center;padding:12px 6px;border-radius:14px;background:var(--carte);box-shadow:var(--ombre);font-size:12px;font-weight:bold;color:var(--gris)}
.badge .m{width:48px;height:48px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:var(--ligne);color:#fff}
.badge .m svg{width:24px;height:24px}
.badge.on{color:var(--texte)}
.badge.on .m{background:linear-gradient(135deg,var(--teal),var(--marine))}

/* ---------- engagements ---------- */
.eng{display:flex;gap:12px;align-items:center;background:var(--marine);color:#fff;border-radius:14px;padding:12px;margin-bottom:8px;border:0;width:100%;text-align:left;font-size:14.5px}
.eng .puce-n{background:var(--teal2)}
.eng .ok{margin-left:auto;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.4);flex:none;display:grid;place-items:center}
.eng.on .ok{background:var(--teal2);border-color:var(--teal2)}
.eng .ok svg{width:14px;height:14px}
.champ{display:block;margin:10px 0}
.champ span{font-size:12.5px;font-weight:bold;color:var(--gris)}
.champ input{width:100%;font-size:16px;padding:12px;border-radius:10px;border:1.5px solid var(--ligne);background:var(--carte);color:var(--texte);margin-top:3px}

/* ---------- recherche ---------- */
.rech{position:sticky;top:calc(58px + env(safe-area-inset-top));z-index:10;background:var(--fond);padding:12px 16px}
.rech input{width:100%;font-size:16px;padding:13px 14px;border-radius:12px;border:1.5px solid var(--ligne);background:var(--carte);color:var(--texte)}
.res-r a{display:block;padding:12px 14px;background:var(--carte);border-radius:12px;margin-bottom:8px;text-decoration:none;color:var(--texte);box-shadow:var(--ombre)}
.res-r small{color:var(--teal);font-weight:bold;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.res-r p{margin:3px 0 0;font-size:13.5px;color:var(--gris)}
mark{background:#ffe08a;color:inherit;border-radius:3px;padding:0 1px}

/* ---------- feuille / toast ---------- */
.voile{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.feuille{background:var(--carte);color:var(--texte);width:100%;max-width:620px;border-radius:20px 20px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto;animation:monte .22s ease-out}
@keyframes monte{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.feuille .poignee{width:40px;height:4px;border-radius:2px;background:var(--ligne);margin:-6px auto 12px}
.toast{position:fixed;left:50%;bottom:calc(var(--nav) + 18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;background:var(--marine);color:#fff;
  padding:11px 18px;border-radius:24px;font-size:14px;font-weight:bold;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:monte .2s}
.installer{display:flex;gap:12px;align-items:center}
.installer img{width:46px;height:46px;border-radius:12px}
.pied{text-align:center;color:var(--gris);font-size:12px;padding:10px 16px 26px;line-height:1.5}
.projet{display:inline-block;background:var(--jaune);color:#8a5d00;font-weight:bold;font-size:11px;letter-spacing:.1em;padding:4px 10px;border-radius:6px}
@media (min-width:640px){ body{background:#dfe8eb} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body{background:#03131a}} #app{box-shadow:0 0 30px rgba(0,0,0,.08)} }

.hero.hero-court{min-height:200px}
.hero.hero-court::after{background:linear-gradient(180deg,rgba(0,49,66,.55),rgba(0,49,66,.92) 70%)}

/* ---------- accueil MY INORIX : affectation, diplômes, communication, modules ---------- */
.aff{border-radius:var(--r);overflow:hidden;background:var(--carte);box-shadow:var(--ombre);margin-bottom:12px}
.aff-h{display:flex;align-items:center;gap:10px;padding:11px 14px;background:linear-gradient(120deg,var(--marine),#0a5568);color:#fff;font-size:12px;font-weight:bold;letter-spacing:.1em;text-transform:uppercase}
.aff-h i{margin-left:auto;font-style:normal;letter-spacing:.02em;text-transform:none;background:rgba(255,255,255,.16);padding:3px 10px;border-radius:12px;font-size:12px}
.aff-i{width:30px;height:30px;border-radius:9px;background:rgba(0,179,181,.3);display:grid;place-items:center}.aff-i svg{width:18px;height:18px}
.aff-c{padding:14px}
.aff-c b{display:block;font-size:17px;line-height:1.25;color:var(--marine)}
.aff-c p{margin:4px 0 12px;color:var(--gris);font-size:14px}
.aff-c .btn{padding:10px 16px;font-size:14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aff-c b{color:#fff}}
.dip-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-decoration:none;color:inherit;margin-bottom:12px}
@media (min-width:560px){.dip-g{grid-template-columns:repeat(4,1fr)}}
.dip{position:relative;background:var(--carte);border-radius:14px;box-shadow:var(--ombre);padding:12px 12px 12px 16px;overflow:hidden;display:flex;flex-direction:column;gap:3px}
.dip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.dip-i{width:34px;height:34px;border-radius:10px;background:var(--f);color:var(--c);display:grid;place-items:center;margin-bottom:4px}.dip-i svg{width:19px;height:19px}
.dip b{font-size:14px;line-height:1.2}
.dip small{color:var(--c);font-weight:bold;font-size:11.5px;line-height:1.3}
.comm{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0 -2px 4px}
.comm::-webkit-scrollbar{height:0}
.comm-c{flex:0 0 78%;max-width:280px;scroll-snap-align:start;position:relative;border-radius:16px;padding:14px;min-height:150px;text-decoration:none;color:#fff;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(140deg,var(--marine) 0%,#0b5a6c 100%);box-shadow:var(--ombre);overflow:hidden}
.comm-c.b{background:linear-gradient(140deg,#00797b 0%,var(--teal) 100%)}
.comm-c::after{content:"";position:absolute;right:-40px;bottom:-40px;width:130px;height:130px;border-radius:50%;border:22px solid rgba(255,255,255,.08)}
.comm-i{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;margin-bottom:6px}.comm-i svg{width:21px;height:21px}
.comm-c b{font-size:16px;line-height:1.2}.comm-c small{color:#cfe6ea;font-size:12.5px;line-height:1.35}
.comm-c em{position:absolute;top:12px;right:12px;font-style:normal;background:var(--rouge);font-size:10.5px;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:10px}
.comm-l{margin-top:auto;font-weight:bold;font-size:13px;color:#7fe0e2}
.mod-l{position:relative;display:block;border-radius:var(--r);overflow:hidden;min-height:150px;margin-bottom:10px;text-decoration:none;color:#fff;background:var(--marine);box-shadow:var(--ombre)}
.mod-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mod-l::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,49,66,.95) 35%,rgba(0,49,66,.35))}
.mod-in{position:relative;z-index:1;padding:16px;max-width:82%;display:flex;flex-direction:column;gap:3px}
.mod-in small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7fd0d1;font-weight:bold}
.mod-in b{font-size:20px}.mod-in span{font-size:13px;color:#cfe2e6}
.mod-p{height:6px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:10px;overflow:hidden}.mod-p i{display:block;height:100%;background:var(--teal2);border-radius:3px}
.mod-in em{font-style:normal;font-size:11.5px;color:#9fc9cf;margin-top:2px}
.mod-pt a{display:flex;gap:10px;align-items:center;background:var(--carte);border-radius:14px;box-shadow:var(--ombre);padding:12px;text-decoration:none;color:var(--texte)}
.mod-pt span{width:40px;height:40px;border-radius:12px;background:var(--tealpale);color:var(--teal);display:grid;place-items:center;flex:none}
.mod-pt span.r{background:#fde8e6;color:var(--rouge)}
.mod-pt b{display:block;font-size:14.5px}.mod-pt small{color:var(--gris);font-size:11.5px}
.mod-pt{margin-bottom:12px}
.inst{display:flex;gap:12px;align-items:center;border:1.5px dashed var(--teal);border-radius:14px;padding:10px 12px;background:var(--tealpale2);margin-top:4px}
.inst img{width:40px;height:40px;border-radius:11px;flex:none}
.inst b{display:block;font-size:14.5px}.inst small{display:block;color:var(--gris);font-size:12px;line-height:1.3}
.inst .btn{padding:8px 12px;font-size:13px}
.inst-x{border:0;background:none;color:var(--gris);font-size:22px;line-height:1;padding:0 4px;cursor:pointer}
.g2.mod-pt{grid-template-columns:1fr 1fr}
.mod-pt a{padding:11px 10px;gap:9px}

/* titres de section : barre turquoise à gauche, texte marine en casse normale */
.sec-t::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.05em;border-radius:3px;background:linear-gradient(180deg,var(--teal2),var(--teal))}
.sec-t a{font-size:13px;font-weight:bold;color:var(--teal);text-decoration:none}
.sec-t .st{font-size:11.5px;letter-spacing:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sec-t{color:#e6f4f5}}
:root[data-theme="dark"] .sec-t{color:#e6f4f5}

/* ---------- accueil « tableau de bord » (proposition A, photo conservée) ---------- */
.hero-a{position:relative;overflow:hidden;color:#fff;background:var(--marine);border-radius:0 0 28px 28px}
.hero-a > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-a::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(0,49,66,.62) 0%,rgba(0,49,66,.88) 55%,rgba(4,58,74,.97) 100%)}
.hero-a .in{position:relative;z-index:1;padding:calc(14px + env(safe-area-inset-top)) 16px 20px}
.ha-top{display:flex;justify-content:space-between;align-items:center}
.ha-av{width:40px;height:40px;border-radius:50%;background:var(--teal2);color:#fff;font-weight:bold;font-size:14px;display:grid;place-items:center;text-decoration:none;border:2px solid rgba(255,255,255,.35)}
.hero-a h1{font-size:28px;margin:18px 0 2px}
.hero-a p{margin:0;color:#b9d6dc;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-stat{display:flex;margin-top:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:18px;backdrop-filter:blur(4px)}
.ha-stat a{flex:1;text-align:center;padding:11px 6px;border-right:1px solid rgba(255,255,255,.13);color:#fff;text-decoration:none}
.ha-stat a:last-child{border:0}
.ha-stat b{display:block;font-size:24px;line-height:1.1}.ha-stat small{font-size:10.5px;color:#b9d6dc}
.ha-stat a.r b{color:#ff9a8b}.ha-stat a.o b{color:#ffd27a}
.hero-a + .pad{padding-top:18px}