/* La Classe témoin accessibilité et inclusion — feuille de style Jean-François Van de Poël · CC BY-NC-SA 4.0 */ :root{ /* ── Palette HETSL ────────────────────────────────────────── Bleu institutionnel #004D7D relevé dans la charte de la HETSL. Une seule variable à changer si la teinte doit être ajustée. */ --bleu:#004D7D; --bleu-f:#00304E; --bleu-c:#2079AF; --bleu-pale:#E2EEF5; --bleu-tres-pale:#F1F7FB; --gris:#69747E; --gris-c:#98A3AD; --canvas:#F0F3F6; --canvas-2:#E1E8ED; --surface:#FFFFFF; --ink:#12212B; --ink-2:#3B4B57; --muted:#69747E; --line:#D8E0E7; --line-2:#BECAD4; /* alias conservés pour la structure existante */ --deep:var(--bleu); --deep-h:var(--bleu-f); --deep-tint:var(--bleu-pale); /* ── Rampe des états ── Teinte ET clarté changent à chaque palier. Le second canal reste le nombre de marques, lisible sans la couleur. */ --vert:#17875C; --vert-f:#0B5539; --jaune:#E8A70F; --jaune-f:#8A6100; --orange:#DE6511; --orange-f:#9C3F00; --rouge:#96162F; --rouge-f:#63091C; --indigo:#6A4B9E; --indigo-f:#432E68; --display:'Familjen Grotesk',Verdana,Geneva,sans-serif; --sans:Verdana,Geneva,'DejaVu Sans',sans-serif; --mono:'DM Mono','IBM Plex Mono',ui-monospace,Menlo,monospace; /* teintes de section : chaque partie de l'outil porte sa couleur */ --s1:#0069B4; --s1-p:#E4F0FA; /* saisie bleu vif */ --s2:#B87500; --s2-p:#FDF4E2; /* questions ambre */ --s3:#00879B; --s3-p:#E2F5F7; /* exigences turquoise */ --s4:#1E3D5C; --s4-p:#E9EEF4; /* cohorte ardoise */ --s5:#0E9B5E; --s5-p:#E6F8F0; /* pourquoi vert vif */ --s6:#7040C8; --s6-p:#F0EAFC; /* audit CUA violet vif */ --s7:#E85D00; --s7-p:#FEF0E4; /* adaptations orange vif */ --s8:#C4133F; --s8-p:#FDECF1; /* leçons framboise */ --acc-1:#0069B4; --acc-2:#00879B; --acc-3:#E85D00; --r:10px; --r-s:6px; --sh-1:0 1px 2px rgba(0,49,79,.05), 0 4px 14px -6px rgba(0,49,79,.12); --sh-2:0 2px 5px rgba(0,49,79,.08), 0 18px 44px -18px rgba(0,49,79,.26); --ease:cubic-bezier(.22,.85,.3,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--canvas);color:var(--ink); font-family:var(--sans);font-size:14.5px;line-height:1.66; hyphens:auto;-webkit-hyphens:auto; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; background-image:radial-gradient(1200px 560px at 84% -10%, #DFEBF3 0%, transparent 64%); background-attachment:fixed; } h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.022em;margin:0} p{margin:0 0 1em;text-align:justify;text-wrap:pretty} li{text-align:justify} h1,h2,h3,h4,h5,.axe-sens,.f-verdict,.reco .t,.pq-t,.au-l-t,.compteur .l,.legende,.ech-lab{text-align:left} a{color:var(--deep);text-underline-offset:3px} button{font-family:inherit;font-size:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:4px} .wrap{max-width:1240px;margin:0 auto;padding:0 32px} @media(max-width:640px){.wrap{padding:0 20px}} /* ─── éléments partagés ─── */ .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 16px} .jeton{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; padding:6px 13px;border-radius:99px;background:var(--deep-tint);color:var(--deep); border:1px solid #B9D5E6; } .jeton::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--deep);flex:none} .carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)} .carte + .carte{margin-top:20px} .pad{padding:26px 28px} @media(max-width:640px){.pad{padding:20px}} .bouton{ display:inline-flex;align-items:center;justify-content:center;gap:12px; background:var(--deep);color:#fff;border:0;border-radius:var(--r-s); padding:16px 30px;font-size:16.5px;font-weight:600;letter-spacing:-.01em; box-shadow:0 2px 0 rgba(0,0,0,.10), 0 12px 26px -14px rgba(0,77,125,.8); transition:transform .16s var(--ease), background .16s; } .bouton:hover{background:var(--deep-h);transform:translateY(-1px)} .bouton:active{transform:translateY(0)} .bouton:disabled{background:var(--line-2);box-shadow:none;cursor:not-allowed;transform:none} .bouton.pleine{width:100%} .bouton .fleche{font-family:var(--mono);transition:transform .2s var(--ease)} .bouton:hover .fleche{transform:translateX(3px)} .lien{background:none;border:0;color:var(--deep);font-size:14.5px;font-weight:500;padding:6px 2px;text-decoration:underline} /* ─── grille de figures ─── */ .grille{display:grid;grid-template-columns:repeat(10,1fr);gap:6px} .fig{ width:100%;aspect-ratio:1/1.28;background:none;border:0;padding:0;display:block; border-radius:6px;transition:transform .18s var(--ease), filter .18s; } .fig svg{width:100%;height:100%;display:block;overflow:visible} .fig:hover,.fig:focus-visible{transform:translateY(-4px) scale(1.14);z-index:3;filter:drop-shadow(0 7px 14px rgba(0,49,79,.32))} .fig:hover .corps,.fig:focus-visible .corps{stroke:var(--ink);stroke-width:6} .fig .corps{fill:#E3EAF0;stroke:#9AA5B8;stroke-width:5;transition:fill .45s var(--ease),stroke .45s var(--ease)} .fig[data-s="v"] .corps{fill:var(--vert); stroke:var(--vert-f)} .fig[data-s="o1"] .corps{fill:var(--jaune); stroke:var(--jaune-f)} .fig[data-s="o2"] .corps{fill:var(--orange); stroke:var(--orange-f)} .fig[data-s="r"] .corps{fill:var(--rouge); stroke:var(--rouge-f)} /* second canal : nombre de marques sur le torse, lisible sans la couleur aucune = rien · tension = une barre · entrave = deux barres · empêchement = croix */ .fig .trait,.fig .trait2,.fig .croix{display:none;stroke-linecap:round;fill:none} .fig[data-s="o1"] .trait{display:block;stroke:var(--jaune-f);stroke-width:6} .fig[data-s="o2"] .trait, .fig[data-s="o2"] .trait2{display:block;stroke:#fff;stroke-width:6} .fig[data-s="r"] .croix{display:block;stroke:#fff;stroke-width:7} /* troisième canal : socle indigo quand le dispositif matériel est en cause */ .fig .socle{display:none;stroke:var(--indigo);stroke-width:8;stroke-linecap:round} .fig[data-m] .socle{display:block} .fig[data-m="1"] .socle{stroke-width:6;opacity:.6} .fig.entre{animation:entre .5s var(--ease) backwards} @keyframes entre{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .fig.entre{animation:none} .fig:hover{transform:none} html{scroll-behavior:auto} *{transition-duration:.01ms !important} } .legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted)} .legende span{display:inline-flex;align-items:center;gap:7px} .puce{width:12px;height:12px;border-radius:3px;border:2px solid;flex:none} .puce.v{border-color:var(--vert-f);background:var(--vert)} .puce.o1{border-color:var(--jaune-f);background:var(--jaune)} .puce.o2{border-color:var(--orange-f);background:var(--orange)} .puce.r{border-color:var(--rouge-f);background:var(--rouge)} .marque-l{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-left:-3px} .puce.m{border:0;background:none;border-bottom:5px solid var(--indigo);border-radius:0;height:12px} /* ═══════════ ACCUEIL ═══════════ */ #accueil{padding:44px 0 90px} .entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px;gap:20px;flex-wrap:wrap} .marque{display:flex;align-items:baseline;gap:12px} .marque .n{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em} .marque .v{font-family:var(--mono);font-size:11px;color:var(--muted)} .heros{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.86fr);gap:64px;align-items:center} .heros h1{font-size:clamp(36px,4.6vw,60px);max-width:15ch;margin-top:22px} .heros h1 em{font-style:normal;color:var(--deep);position:relative;white-space:nowrap} .heros h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.16em;background:var(--deep);opacity:.16;border-radius:2px} .chapo{font-size:19.5px;line-height:1.55;color:var(--ink-2);max-width:47ch;margin-top:24px} .sous{font-size:13.5px;color:var(--muted);margin-top:18px} .vitrine{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:24px;position:relative} .vitrine::before{ content:"";position:absolute;inset:-1px;border-radius:var(--r);pointer-events:none; background:linear-gradient(160deg,rgba(12,74,90,.14),transparent 42%);mask:linear-gradient(#000,#000); } .vitrine .titre{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .vitrine .sujet{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:18px} .compteur-live{display:flex;align-items:baseline;gap:10px;margin-bottom:16px} .compteur-live .gros{font-family:var(--display);font-size:54px;font-weight:600;line-height:.9;letter-spacing:-.04em;color:var(--rouge)} .compteur-live .apres{font-size:14px;color:var(--ink-2);line-height:1.35} .filet{height:1px;background:var(--line);margin:76px 0 48px} .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .trio h3{font-size:19px;margin-bottom:12px} .trio .idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--deep);display:block;margin-bottom:12px} .trio p{font-size:14.5px;color:var(--ink-2);margin-bottom:.85em} .limites{border-left:3px solid var(--rouge)} .limites h3{font-size:20px;margin-bottom:16px} .limites ul{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-2)} .limites li{margin-bottom:10px} .limites strong{color:var(--ink)} .pied{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} .pied strong{color:var(--ink);font-weight:600} .pied p{margin-bottom:.7em} /* ═══════════ OUTIL ═══════════ */ #outil{display:none;padding-bottom:90px} .barre{ position:sticky;top:0;z-index:12;background:rgba(240,243,246,.88); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);margin-bottom:28px; } .barre .in{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap} .colonnes{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:32px;align-items:start} .colle{} /* le collant provoquait un chevauchement : retiré */ @media(max-width:1000px){.heros,.trio,.colonnes{grid-template-columns:1fr}.heros{gap:40px}.colle{position:static}} h2.bloc{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.005em;margin-bottom:14px;display:flex;align-items:center;gap:10px} h2.bloc::after{content:"";flex:1;height:1px;background:var(--line)} label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--ink-2)} textarea,input[type=text]{ width:100%;font-family:var(--sans);font-size:14.5px;line-height:1.55; padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-s); background:#FAFBFD;color:var(--ink);transition:border-color .15s,box-shadow .15s; } textarea:focus,input:focus{border-color:var(--deep);box-shadow:0 0 0 3px var(--deep-tint);outline:none} textarea{min-height:230px;resize:vertical} .depot{margin-top:12px;border:1.5px dashed var(--line-2);border-radius:var(--r-s);padding:18px;text-align:center;font-size:13.5px;color:var(--muted);transition:.15s} .depot.actif{border-color:var(--deep);background:var(--deep-tint);color:var(--deep)} .depot .cliquable{color:var(--deep);text-decoration:underline;cursor:pointer;font-weight:500} .titre-ex{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px} .puces{display:flex;flex-wrap:wrap;gap:8px} .puce-ex{background:var(--canvas-2);border:1px solid var(--line-2);color:var(--ink-2);border-radius:99px;padding:7px 15px;font-size:12.5px;font-weight:500;transition:.15s} .puce-ex:hover{background:var(--deep-tint);border-color:#BFDDE4;color:var(--deep)} .compteurs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px} .compteur{border:1px solid var(--line);border-radius:var(--r-s);padding:14px 14px 12px;background:#FAFCFD} .compteur .n{font-family:var(--display);font-size:34px;font-weight:600;line-height:.95;letter-spacing:-.03em} .compteur .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.4} .compteur.v .n{color:var(--vert-f)} .compteur.o1 .n{color:var(--jaune-f)} .compteur.o2 .n{color:var(--orange-f)} .compteur.r .n{color:var(--rouge)} .compteur.v{border-color:#AEDCC6;background:#EFF8F4} .compteur.o1{border-color:#EBD9A2;background:#FDF9EE} .compteur.o2{border-color:#EFC69E;background:#FDF4EC} .compteur.r{border-color:#E3B4BF;background:#FCF1F3} .verdict{background:var(--deep);color:#fff;border-radius:var(--r);padding:22px 24px;margin-bottom:22px;box-shadow:0 14px 32px -18px rgba(0,77,125,.85)} .verdict b{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em} .verdict .p{font-size:16px;line-height:1.5;margin:0} .verdict .q{font-size:13.5px;opacity:.82;margin:10px 0 0;line-height:1.5} .attente{color:var(--muted);font-size:14.5px;text-align:center;padding:40px 16px} .alerte{background:#F0ECF8;border:1px solid #D5C9EA;border-left:4px solid var(--indigo);border-radius:0 var(--r-s) var(--r-s) 0;padding:18px 20px;margin-top:20px} .alerte .h{display:flex;align-items:baseline;gap:11px;margin-bottom:7px} .alerte .n{font-family:var(--display);font-size:30px;font-weight:600;color:var(--indigo);line-height:1;letter-spacing:-.03em} .alerte .t{font-weight:600;font-size:14.5px} .alerte p{font-size:13.5px;color:#3E2C63;margin:0;line-height:1.55} .question{background:#FDF8EE;border:1px solid #EBDCB4;border-radius:var(--r-s);padding:20px} .question h3{font-family:var(--sans);font-weight:600;font-size:15px;margin-bottom:8px} .question > p{font-size:13.5px;color:#7A5C12;margin-bottom:14px} .coche{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin-bottom:9px;font-weight:400;color:var(--ink-2)} .coche input{margin-top:4px;flex:none;accent-color:var(--deep);width:16px;height:16px} .axe{display:grid;grid-template-columns:150px 1fr 46px;gap:12px;align-items:center;margin-bottom:6px} .axe .nom{font-size:12.5px;color:var(--ink-2)} .jauge{height:8px;background:var(--canvas-2);border-radius:99px;overflow:hidden} .jauge i{display:block;height:100%;background:var(--deep);border-radius:99px;transition:width .6s var(--ease)} .axe .v{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--muted)} .axe.chaud .jauge i{background:var(--rouge)} .axe.grise .jauge i{background:var(--line-2)} .pourquoi{font-size:12px;color:var(--muted);margin:0 0 12px 162px;line-height:1.45} @media(max-width:640px){.axe{grid-template-columns:110px 1fr 40px}.pourquoi{margin-left:0}} .reco{border-top:1px solid var(--line);padding:15px 0;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center} .reco:first-child{border-top:0} .reco .t{font-size:14.5px;font-weight:500;line-height:1.4} .reco .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:4px} .reco .g{font-family:var(--display);font-weight:600;font-size:23px;color:var(--vert);white-space:nowrap;text-align:right;letter-spacing:-.03em} .reco .g small{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.11em;font-weight:400;margin-top:3px} .intertitre{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--indigo);margin:24px 0 2px} .retour-ia{font-size:14.5px;color:var(--ink-2);line-height:1.65} .retour-ia p{margin-bottom:.85em} .retour-ia p:last-child{margin-bottom:0} .squelette{height:12px;background:linear-gradient(90deg,var(--canvas-2) 25%,#EFF2F7 50%,var(--canvas-2) 75%);background-size:200% 100%;animation:glisse 1.3s infinite;border-radius:99px;margin-bottom:10px} .squelette:nth-child(2){width:92%}.squelette:nth-child(3){width:78%} @keyframes glisse{to{background-position:-200% 0}} /* ── conseils développés ── */ .lecon{border-top:1px solid var(--line);padding:20px 0} .lecon:first-child{border-top:0;padding-top:4px} .lecon h4{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.02em;margin:0 0 4px} .lecon .etiq{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-bottom:9px} .lecon .meca{font-size:14.5px;color:var(--ink-2);margin-bottom:12px} .lecon .qui{background:var(--bleu-tres-pale);border-left:3px solid var(--deep);padding:10px 13px;font-size:13px;color:var(--ink-2);margin-bottom:13px;border-radius:0 var(--r-s) var(--r-s) 0} .lecon .qui b{color:var(--ink)} .lecon ul{margin:0 0 12px;padding-left:19px;font-size:14px;color:var(--ink-2)} .lecon li{margin-bottom:6px} .lecon .retenir{font-size:13.5px;color:var(--ink);background:#FDF8EE;border:1px solid #EBDCB4;border-radius:var(--r-s);padding:11px 14px} .lecon .retenir b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A6403;display:block;margin-bottom:4px} /* ── exigences avec référent ── */ .echelle{font-size:12.5px;color:var(--muted);line-height:1.5;margin:-6px 0 18px} .axe-bloc{padding:13px 0;border-top:1px solid var(--line)} .axe-bloc:first-child{border-top:0;padding-top:2px} .axe-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px} .axe-nom{font-size:14px;font-weight:500} .axe-nom em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);border:1px solid #D5C9EA;border-radius:99px;padding:2px 7px;margin-left:6px;vertical-align:2px} .axe-val{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--deep)} .axe-val small{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.05em} .jauge2{position:relative;height:10px;background:var(--canvas-2);border-radius:99px;overflow:visible} .jauge2 i{display:block;height:100%;background:var(--deep);border-radius:99px;transition:width .6s var(--ease)} .jauge2 b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.55;border-radius:2px} .jauge2 b::after{content:"médiane";position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--muted);white-space:nowrap} .axe-bloc.chaud .axe-val{color:var(--rouge)} .axe-bloc.chaud .jauge2 i{background:var(--rouge)} .axe-bloc.grise .axe-val{color:var(--muted)} .axe-bloc.grise .jauge2 i{background:var(--line-2)} .axe-sens{font-size:13px;color:var(--ink-2);margin:9px 0 0;line-height:1.5} .axe-sens b{color:var(--ink)} .axe-motif{color:var(--muted);display:block;font-size:12.5px;margin-top:2px} /* ── questions ── */ .q-aide{font-size:12.5px;color:#7A5C12;margin:6px 0 0;line-height:1.45} .coche-eff{display:block;font-size:12px;color:#7A5C12;line-height:1.45;margin-top:3px} .coche{margin-bottom:14px} /* ── pourquoi ce résultat ── */ .pq-intro{font-size:14px;color:var(--ink-2);margin-bottom:16px} .pq-ligne{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)} .pq-ligne:first-of-type{border-top:0} .pq-n{font-family:var(--display);font-weight:600;font-size:23px;color:var(--vert-f);text-align:right;letter-spacing:-.03em;line-height:1.15} .pq-t{font-size:14.5px;font-weight:500;line-height:1.4} .pq-pq{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.5} .pq-neutres{margin-top:14px;font-size:13px;color:var(--ink-2);background:#EFF8F4;border:1px solid #AEDCC6;border-radius:var(--r-s);padding:12px 15px;line-height:1.55} .pq-neutres b{color:var(--vert-f);display:block;margin-bottom:4px;font-size:12.5px} .pq-reste{margin-top:18px;background:var(--bleu-tres-pale);border-left:3px solid var(--deep);border-radius:0 var(--r-s) var(--r-s) 0;padding:13px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.55} .pq-reste b{color:var(--ink)} .reco{cursor:default} .reco-tete{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;cursor:pointer} .reco-plus{font-family:var(--mono);font-size:12px;color:var(--deep);margin-top:6px;display:inline-block} .reco-corps{display:none;margin-top:14px;padding:14px 16px;background:var(--bleu-tres-pale);border-radius:var(--r-s);border:1px solid var(--line)} .reco.ouvert .reco-corps{display:block} .reco-corps p{font-size:13.5px;color:var(--ink-2);margin-bottom:.7em} .reco-corps p:last-child{margin-bottom:0} .reco-corps b{color:var(--ink)} .bien{background:#EFF8F4;border:1px solid #AEDCC6;border-radius:var(--r-s);padding:16px 18px;margin-top:18px} .bien h4{font-family:var(--sans);font-weight:600;font-size:14.5px;margin:0 0 8px;color:var(--vert-f)} .bien ul{margin:0;padding-left:19px;font-size:13.5px;color:var(--ink-2)} .bien li{margin-bottom:5px} details{margin-top:16px;font-size:13px} summary{cursor:pointer;color:var(--deep);font-weight:500;padding:4px 0} details pre{background:var(--bleu-tres-pale);border:1px solid var(--line);border-radius:var(--r-s);padding:14px;overflow:auto;font-family:var(--mono);font-size:11.5px;line-height:1.55;margin-top:10px;max-height:320px} .note{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--bleu-tres-pale);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;margin-top:16px;line-height:1.55} .mode{display:flex;gap:6px;background:var(--canvas-2);padding:4px;border-radius:99px;font-size:12.5px} .mode button{border:0;background:none;padding:7px 15px;border-radius:99px;color:var(--muted);font-weight:500;transition:.15s} .mode button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)} #fiche{ position:fixed;right:22px;bottom:22px;max-width:352px;z-index:40;display:none; background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r); box-shadow:var(--sh-2);padding:20px 22px;font-size:13.5px;line-height:1.55; animation:monte .22s var(--ease); } @keyframes monte{from{opacity:0;transform:translateY(14px)}} #fiche{max-width:390px;max-height:78vh;overflow-y:auto;padding:22px 24px} #fiche h4{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:9px} #fiche .x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:21px;color:var(--muted);line-height:1;padding:2px 6px} .f-etat{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;padding:3px 9px;border-radius:99px;color:#fff} .f-v{background:var(--vert)} .f-o1{background:var(--jaune-f)} .f-o2{background:var(--orange)} .f-r{background:var(--rouge)} .f-verdict{font-size:14.5px;color:var(--ink);line-height:1.5;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line)} .f-sec{margin-bottom:18px} .f-sec h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--deep);margin:0 0 8px} .f-arch{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 8px;text-transform:none} .f-arch.f-neutre{font-weight:400;color:var(--muted)} .f-situ{margin:0 0 10px;padding-left:17px;font-size:13px;color:var(--ink-2)} .f-situ li{margin-bottom:3px} .f-situ-vide{font-size:13px;color:var(--muted);margin:0 0 10px} .f-decl{font-size:12.5px;line-height:1.5;margin:0;padding:9px 12px;border-radius:var(--r-s)} .f-decl.f-oui{background:#EFF8F4;border:1px solid #AEDCC6;color:var(--vert-f)} .f-decl.f-non{background:#FCF1F3;border:1px solid #E3B4BF;color:var(--rouge)} .f-axe{padding:10px 0;border-top:1px solid var(--line)} .f-axe:first-of-type{border-top:0;padding-top:0} .f-axe-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:3px} .f-axe-t b{font-size:14px} .f-ec{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:2px 8px;border-radius:99px;border:1px solid} .e-leger{color:var(--jaune-f);border-color:#EBD9A2;background:#FDF9EE} .e-moyen{color:var(--orange-f);border-color:#EFC69E;background:#FDF4EC} .e-fort{color:var(--rouge);border-color:#E3B4BF;background:#FCF1F3} .e-max{color:#fff;border-color:var(--rouge);background:var(--rouge)} .f-conf{border-left:2px solid var(--line-2);padding-left:12px;margin:6px 0 7px} .f-l{font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:5px} .f-l:last-child{margin-bottom:0} .f-lab{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1px} .f-motif{font-size:12px;color:var(--muted);line-height:1.5} .f-chif{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap} .f-rien{font-size:13px;color:var(--muted);margin:0;line-height:1.5} .f-mat{background:#F0ECF8;border:1px solid #D5C9EA;border-left:3px solid var(--indigo);border-radius:0 var(--r-s) var(--r-s) 0;padding:11px 13px;font-size:12.5px;color:#3E2C63;line-height:1.5;margin-bottom:18px} .f-mat b{display:block;margin-bottom:2px} .f-sauve{margin:0;padding-left:17px;font-size:13.5px;color:var(--ink-2)} .f-sauve li{margin-bottom:4px} @media(max-width:640px){#fiche{left:16px;right:16px;max-width:none}} /* ════════ PANNEAU DE L'ÉCHELLE ════════ */ .lien-ech{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;color:var(--deep);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .f-chif{background:none;border:0;padding:0;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;white-space:nowrap} .f-chif:hover{color:var(--deep)} #echelle{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,49,79,.42);backdrop-filter:blur(3px);padding:4vh 20px;overflow-y:auto} .ech-boite{max-width:880px;margin:0 auto;background:var(--surface);border-radius:var(--r);box-shadow:0 30px 80px -30px rgba(0,49,79,.6);animation:monte .24s var(--ease)} .ech-tete{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 32px;border-bottom:1px solid var(--line);background:var(--surface);border-radius:var(--r) var(--r) 0 0} .ech-tete h3{font-size:24px;margin:0} .ech-x{background:none;border:0;font-size:26px;color:var(--muted);line-height:1;padding:2px 10px;border-radius:var(--r-s)} .ech-x:hover{background:var(--canvas-2);color:var(--ink)} .ech-corps{padding:26px 32px 36px} @media(max-width:640px){.ech-tete,.ech-corps{padding-left:20px;padding-right:20px}} .ech-intro{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:26px} .ech-h{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;margin:32px 0 8px;padding-top:22px;border-top:1px solid var(--line)} .ech-sous,.ech-note{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:18px} .ech-p{font-size:14px;color:var(--ink-2);line-height:1.6} .ech-p code{font-family:var(--mono);font-size:12.5px;background:var(--canvas-2);padding:1px 5px;border-radius:4px} .ech-seuils{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0 12px} @media(max-width:640px){.ech-seuils{grid-template-columns:1fr}} .ech-s{border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;background:#FAFCFD} .ech-s-t{display:flex;align-items:center;gap:9px;font-size:14.5px;margin-bottom:4px} .ech-s-m{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-left:auto} .ech-s-e{font-family:var(--mono);font-size:10.5px;color:var(--deep);margin-bottom:6px} .ech-s p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.5} .ech-axe{border-top:1px solid var(--line);padding:20px 0} .ech-axe-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:4px} .ech-axe h5{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;margin:0} .ech-cua{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--deep)} .ech-repart{font-size:12.5px;color:var(--muted);margin:0 0 12px} .ech-repart b{color:var(--ink)} .ech-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} @media(max-width:700px){.ech-cols{grid-template-columns:1fr;gap:16px}} .ech-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 7px} .ech-b{display:grid;grid-template-columns:38px 1fr;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.45;padding:5px 0;border-top:1px solid var(--line)} .ech-b:first-of-type{border-top:0} .ech-n{font-family:var(--mono);font-size:11px;color:var(--deep);text-align:right} /* ════════ AUDIT CUA ════════ */ .au-bilan{font-size:14.5px;color:var(--ink-2);background:var(--bleu-tres-pale);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 16px;margin-bottom:20px;line-height:1.55} .au-bilan b{font-family:var(--display);font-size:17px;color:var(--ink)} .au-principe{margin-bottom:22px} .au-p-t{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;padding-bottom:7px;border-bottom:2px solid var(--deep)} .au-p-t h4{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;margin:0} .au-p-t span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .au-ligne{padding:12px 0 12px 13px;border-left:3px solid var(--line-2);margin-bottom:10px} .au-ligne.et-ok{border-left-color:var(--vert);background:linear-gradient(90deg,#EFF8F4,transparent 60%)} .au-ligne.et-mid{border-left-color:var(--jaune);background:linear-gradient(90deg,#FDF9EE,transparent 60%)} .au-ligne.et-ko{border-left-color:var(--rouge);background:linear-gradient(90deg,#FCF1F3,transparent 60%)} .au-ligne.et-neutre{border-left-color:var(--line-2);background:linear-gradient(90deg,var(--bleu-tres-pale),transparent 60%)} .au-l-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:4px} .au-l-t b{font-size:14.5px} .au-etat{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-left:auto;white-space:nowrap} .au-etat.et-ok{background:var(--vert);color:#fff} .au-etat.et-mid{background:var(--jaune);color:#5C4200} .au-etat.et-ko{background:var(--rouge);color:#fff} .au-etat.et-neutre{background:var(--canvas-2);color:var(--muted)} .au-demande{font-size:13px;color:var(--muted);font-style:italic;margin:0 0 6px;line-height:1.5} .au-obs{font-size:13.5px;color:var(--ink-2);margin:0 0 5px;line-height:1.55} .au-chiffre{font-family:var(--mono);font-size:10.5px;color:var(--muted)} .au-hors{font-size:13px;color:#3E2C63;background:#F0ECF8;border:1px solid #D5C9EA;border-radius:var(--r-s);padding:12px 15px;margin:6px 0 0;line-height:1.55} /* ════════ COMPOSITION DE LA COHORTE ════════ */ #cohorte{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,49,79,.42);backdrop-filter:blur(3px);padding:4vh 20px;overflow-y:auto} .co-t,.co-l,.co-b{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0 6px} .co-t th,.co-l th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--deep);border-bottom:1.5px solid var(--deep);padding:6px 8px} .co-t td,.co-l td,.co-b td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4} .co-t tbody tr:nth-child(even),.co-l tbody tr:nth-child(even){background:#FAFBFD} .co-t .n,.co-l .n,.co-b .n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} .co-id{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap} .co-d{color:var(--ink-2);font-size:12px} .co-d i,.co-l i{color:var(--muted);font-size:11.5px} .co-s{font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.45} .co-s b{color:var(--deep)} .co-vide{color:var(--muted);font-style:italic} .co-dec{text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted)} .co-dec b{color:var(--rouge)} .co-b td:first-child{color:var(--ink-2)} .co-b .n{font-family:var(--display);font-size:17px;font-weight:600;color:var(--deep)} .f-diag{display:block;font-size:11.5px;font-weight:400;color:var(--muted);font-style:italic;margin-top:1px} .f-arch{margin-bottom:6px} .declaration{border-left:3px solid var(--indigo);margin-top:26px} .declaration h3{font-size:19px;margin-bottom:12px} .declaration p{font-size:14px;color:var(--ink-2);margin-bottom:.8em} .declaration p:last-child{margin-bottom:0} /* ── intros de section ── */ .intro{font-size:13.5px;line-height:1.6;color:var(--ink-2);background:var(--bleu-tres-pale); border-left:3px solid var(--bleu-c);border-radius:0 var(--r-s) var(--r-s) 0; padding:11px 15px;margin:-4px 0 18px} .chapo-2{font-size:16px;line-height:1.6;color:var(--muted);max-width:47ch;margin-top:14px} .genese{border-left:3px solid var(--bleu)} .genese h3{font-size:21px;margin-bottom:12px} .genese p{font-size:14.5px;color:var(--ink-2);max-width:88ch} .genese p:last-child{margin-bottom:0} h2.bloc{color:var(--bleu)} /* ── couleur par section de l'outil ── */ #outil .carte:nth-of-type(n){--sc:var(--bleu);--scp:var(--bleu-pale)} .sec-1{--sc:var(--s1);--scp:var(--s1-p)} .sec-2{--sc:var(--s2);--scp:var(--s2-p)} .sec-3{--sc:var(--s3);--scp:var(--s3-p)} .sec-4{--sc:var(--s4);--scp:var(--s4-p)} .sec-5{--sc:var(--s5);--scp:var(--s5-p)} .sec-6{--sc:var(--s6);--scp:var(--s6-p)} .sec-7{--sc:var(--s7);--scp:var(--s7-p)} .sec-8{--sc:var(--s8);--scp:var(--s8-p)} [class*="sec-"]{border-top:3px solid var(--sc)} [class*="sec-"] h2.bloc{color:var(--sc)} [class*="sec-"] h2.bloc::after{background:color-mix(in srgb,var(--sc) 28%,transparent)} [class*="sec-"] .intro{background:var(--scp);border-left-color:var(--sc)} [class*="sec-"] .num-sec{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;border-radius:50%;background:var(--sc);color:#fff; font-family:var(--mono);font-size:12px;margin-right:9px;flex:none} h2.bloc{align-items:center} /* ── bandeau auteur ── */ .auteur{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center; background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--bleu); border-radius:var(--r);box-shadow:var(--sh-1);padding:26px 30px;margin-top:26px} .auteur img{width:112px;height:112px;border-radius:50%;object-fit:cover;display:block; border:3px solid var(--bleu-pale);box-shadow:0 4px 14px -6px rgba(0,49,79,.4)} .auteur .nom{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.4px; margin:0 0 3px;color:var(--ink);text-align:left} .auteur .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--bleu);margin:0 0 10px;text-align:left} .auteur p{font-size:13.5px;color:var(--ink-2);margin:0 0 .55em} .auteur .lic{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .auteur .lic span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; background:var(--bleu-pale);color:var(--bleu);border:1px solid #B9D5E6;border-radius:99px;padding:4px 11px} @media(max-width:640px){.auteur{grid-template-columns:1fr;text-align:center;justify-items:center} .auteur .nom,.auteur .role,.auteur p{text-align:center}} /* ── bouton retour ── */ .home{display:inline-flex;align-items:center;gap:8px;background:var(--bleu-pale); border:1px solid #B9D5E6;color:var(--bleu);border-radius:99px;padding:8px 16px; font-size:13px;font-weight:600;transition:.15s;font-family:var(--sans)} .home:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)} .home .ic{font-size:14px;line-height:1} .retour-bas{display:flex;justify-content:center;padding:34px 0 8px} /* signal visuel quand un exemple vient d'être chargé */ @keyframes pulse{0%,100%{box-shadow:0 2px 0 rgba(0,0,0,.10),0 12px 26px -14px rgba(0,77,125,.8)} 50%{box-shadow:0 2px 0 rgba(0,0,0,.10),0 0 0 6px var(--bleu-pale),0 12px 26px -14px rgba(0,77,125,.8)}} .bouton.pulse{animation:pulse .8s ease-in-out 2} @media (prefers-reduced-motion:reduce){.bouton.pulse{animation:none;outline:3px solid var(--bleu-c);outline-offset:3px}} /* bascule de langue */ .lang{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--bleu);background:var(--bleu-pale);border:1px solid #B9D5E6;border-radius:99px; padding:5px 13px;text-decoration:none;transition:.15s;white-space:nowrap} .lang:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)} /* ══════════ ICÔNES ══════════ */ .ic16{width:16px;height:16px;flex:none} .ic18{width:18px;height:18px;flex:none} .ic20{width:20px;height:20px;flex:none} .ic22{width:22px;height:22px;flex:none} svg[class^="ic"]{display:inline-block;vertical-align:-0.18em;color:currentColor} .badge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:13px;flex:none;color:#fff;box-shadow:0 3px 10px -4px rgba(0,49,79,.55)} .b-build{background:linear-gradient(140deg,#0069B4,#00879B)} .b-1{background:linear-gradient(140deg,#0069B4,#3FA3E0)} .b-2{background:linear-gradient(140deg,#00879B,#22B6A4)} .b-3{background:linear-gradient(140deg,#E85D00,#F59B2A)} .b-warn{background:linear-gradient(140deg,#C4133F,#E6543F)} .b-ia{background:linear-gradient(140deg,#7040C8,#A06BE8)} .b-comp{background:linear-gradient(140deg,#0E9B5E,#3FC489)} .tete-ic{display:flex;align-items:center;gap:16px;margin-bottom:14px} .tete-ic h3,.tete-ic .kicker{margin:0} .tete-ic .kicker{margin-bottom:4px} /* ══════════ EN-TÊTE ══════════ */ .entete-d{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .marque .mq{color:var(--bleu)} .n-petit{font-size:15px} @media(max-width:760px){.n-petit{display:none}} /* ══════════ BOUTON ACCUEIL ══════════ */ .home{display:inline-flex;align-items:center;gap:9px;background:var(--bleu);color:#fff; border:0;border-radius:99px;padding:9px 18px 9px 14px;font-size:13.5px;font-weight:700; font-family:var(--sans);box-shadow:0 2px 0 rgba(0,0,0,.12),0 8px 18px -10px rgba(0,77,125,.9); transition:transform .15s var(--ease),background .15s} .home:hover{background:var(--bleu-f);transform:translateY(-1px)} .home.grand{padding:14px 28px 14px 22px;font-size:15.5px;border-radius:99px} .retour-bas{display:flex;justify-content:center;padding:40px 0 10px} /* ══════════ TRIO COLORÉ ══════════ */ .trio article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:24px 22px;box-shadow:var(--sh-1);border-top:4px solid var(--tc,var(--bleu))} .trio .t-1{--tc:#0069B4} .trio .t-2{--tc:#00879B} .trio .t-3{--tc:#E85D00} .trio .badge{margin-bottom:14px} .trio .idx{color:var(--tc)} .trio h3{color:var(--ink)} /* ══════════ NUMÉROS DE SECTION ══════════ */ [class*="sec-"] .num-sec{width:30px;height:30px;border-radius:9px;background:var(--sc);color:#fff; display:inline-flex;align-items:center;justify-content:center;margin-right:0;flex:none} h2.bloc .nb,.question h3 .nb{font-family:var(--mono);font-size:12px;color:var(--sc,var(--bleu)); background:var(--scp,var(--bleu-pale));border-radius:99px;padding:2px 9px;margin:0 10px 0 9px;flex:none} h2.bloc{display:flex;align-items:center;gap:0} .question h3{display:flex;align-items:center;gap:0} .question h3 .num-sec{width:30px;height:30px;border-radius:9px;background:var(--s2);color:#fff; display:inline-flex;align-items:center;justify-content:center;flex:none} /* ══════════ LIENS ILLUSTRÉS ══════════ */ .lien-ext{display:inline-flex;align-items:center;gap:9px;color:var(--bleu);font-weight:600; font-size:13.5px;text-decoration:none;background:var(--bleu-pale);border:1px solid #B9D5E6; border-radius:99px;padding:8px 16px;transition:.15s} .lien-ext:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)} .lien{display:inline-flex;align-items:center;gap:7px} .lang{display:inline-flex;align-items:center;gap:7px} .bouton{display:inline-flex;align-items:center;gap:11px} .dep-ic{color:var(--bleu-c);display:block;margin:0 auto 8px} .ech-tete h3{display:flex;align-items:center;gap:11px} .ech-tete h3 svg{color:var(--bleu)} /* ══════════ BANDEAU AUTEUR ══════════ */ .auteur{border-top:4px solid var(--bleu)} .auteur img{width:132px;height:132px;border-radius:50%;object-fit:cover;display:block; border:4px solid #fff;box-shadow:0 0 0 3px var(--bleu),0 10px 26px -10px rgba(0,49,79,.55)} .auteur .lic span{border-radius:99px;padding:5px 13px;font-family:var(--mono);font-size:10px; letter-spacing:.09em;text-transform:uppercase;border:1px solid} .auteur .lic .l1{background:var(--bleu-pale);color:var(--bleu);border-color:#B9D5E6} .auteur .lic .l2{background:#E6F8F0;color:#0B6B42;border-color:#AEDCC6} .auteur .lic .l3{background:#FEF0E4;color:#9C3F00;border-color:#F2C79C} /* ══════════ VITRINE ══════════ */ .vitrine{border-top:4px solid var(--acc-3)} .compteur-live .gros{color:var(--rouge)} .genese{border-left:0;border-top:4px solid var(--acc-2)} .limites{border-left:0;border-top:4px solid var(--rouge)} .declaration{border-left:0;border-top:4px solid #7040C8} /* ══════════ COMPAGNON ══════════ */ .compagnon{background:var(--surface);border:1px solid var(--line);border-top:4px solid #0E9B5E; border-radius:var(--r);box-shadow:var(--sh-1);padding:26px 30px;margin-top:26px} .comp-tete{display:flex;align-items:center;gap:16px;margin-bottom:16px} .comp-tete h3{font-size:22px;margin:0} .comp-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:#0B6B42;margin:0 0 4px} .compagnon p{font-size:14px;color:var(--ink-2);max-width:76ch;margin-bottom:.8em} .comp-usage{border-left:3px solid #0E9B5E;padding-left:14px;color:var(--ink);background:#F2FBF7; border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 14px} .comp-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:16px 0 14px} .comp-lien{background:#0E9B5E;padding:13px 24px;font-size:15px;text-decoration:none; box-shadow:0 2px 0 rgba(0,0,0,.1),0 10px 22px -12px rgba(14,155,94,.9)} .comp-lien:hover{background:#0B7A4A} .comp-qr{margin:0;display:flex;align-items:center;gap:12px} .qr-cadre{width:96px;height:96px;padding:7px;background:#fff;border:1px solid var(--line-2); border-radius:var(--r-s);flex:none} .qr-cadre svg{width:100%;height:100%;display:block} .comp-qr figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);line-height:1.6;text-align:left} .comp-note{font-size:12.5px;color:var(--muted);margin:0} @media(max-width:640px){.compagnon{padding:22px 20px}.comp-actions{gap:16px}} /* ── v1.1 : mécanisme par profil, citations de l'énoncé, liste du panneau cohorte ── */ .f-meca{border-top:1px dashed var(--line-2);padding-top:6px;margin-top:4px;color:var(--ink)} .f-meca b{font-weight:600} .axe-cite,.lecon-cite{display:block;font-size:12.5px;color:var(--ink-2);font-style:italic;margin-top:3px;line-height:1.5} .lecon-cite{font-size:13.5px;margin:-4px 0 12px;padding-left:12px;border-left:2px solid var(--line-2)} .ech-liste{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0 0 14px 18px;padding:0} .ech-liste li{margin-bottom:4px} /* ── v1.1 : cartes pliables, mode de lecture, vérification de la lecture ── */ #outil .wrap{max-width:1360px} .cliquable-h{cursor:pointer;user-select:none} .cliquable-h:focus-visible{outline:2px solid var(--deep);outline-offset:4px;border-radius:4px} .cliquable-h .chevron{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);position:relative;margin-left:4px;transition:transform .2s var(--ease),background .15s} .cliquable-h .chevron::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)} .cliquable-h:hover .chevron{background:var(--scp,var(--bleu-pale))} .carte.replie .cliquable-h .chevron{transform:rotate(-90deg)} .carte.replie h2.bloc,.carte.replie .question h3{margin-bottom:0} .carte.replie h2.bloc::after{display:none} h2.bloc .resume,.question h3 .resume{display:none;flex:1 1 auto;min-width:0;font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:6px} .carte.replie h2.bloc .resume,.carte.replie .question h3 .resume{display:block} .carte.replie{box-shadow:none} .carte.replie h2.bloc{color:var(--ink-2)} .mode-lecture{font-size:12px} .mode-lecture button{padding:6px 12px} @media(max-width:640px){.mode-lecture{display:none !important}} .lu-grille,#lu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px} @media(max-width:640px){#lu{grid-template-columns:1fr}} .lu-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);padding:7px 8px;border-radius:var(--r-s);border:1px solid transparent;margin:0;font-weight:400;line-height:1.4} .lu-item.lu-actif{color:var(--ink);background:var(--bleu-tres-pale);border-color:var(--line)} .lu-item:hover{border-color:var(--line-2)} .lu-ctrl{flex:none;display:flex;align-items:center;gap:6px;min-width:18px;padding-top:1px} .lu-ctrl input[type=checkbox]{width:16px;height:16px;accent-color:var(--deep);margin:0} .lu-ctrl select{font-family:var(--sans);font-size:12.5px;padding:3px 6px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink);max-width:170px} .lu-num{width:64px;font-family:var(--mono);font-size:12.5px;padding:3px 6px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink)} .lu-num:disabled{background:var(--canvas);color:var(--gris-c)} .lu-unit{font-family:var(--mono);font-size:11px;color:var(--muted)} .lu-lab{flex:1;min-width:0} .lu-badge{display:inline-block;margin-left:7px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid;vertical-align:1px} .lu-ok{color:var(--vert-f);border-color:#BFE0CF;background:#EEF8F2} .lu-deduit{color:#8A4A00;border-color:#EFC69E;background:#FDF4EC} .lu-auto{color:var(--muted);border-color:var(--line-2);background:var(--canvas)} .voir-plus{display:block;width:100%;margin-top:10px;padding:10px;border:1px dashed var(--line-2);border-radius:var(--r-s);background:none;color:var(--deep);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer} .voir-plus:hover{background:var(--bleu-tres-pale);border-color:var(--deep)} .retour-maj{background:#FDF8EE;border:1px solid #EBDCB4;border-radius:var(--r-s);padding:9px 12px;font-size:12.5px;color:#7A5C12;margin-bottom:12px;line-height:1.5} .retour-maj .lien-ech{color:#7A5C12;font-weight:600} .carte.replie h2.bloc > span:not(.resume):not(.chevron),.carte.replie .question h3 > span:not(.resume):not(.chevron){flex:none;white-space:nowrap} .carte.replie h2.bloc,.carte.replie .question h3{flex-wrap:nowrap} /* ── v1.1 : progression des appels à l'API ── */ .progres{display:none;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--ink-2);line-height:1.5;background:var(--bleu-tres-pale);border:1px solid var(--line);border-radius:var(--r-s);padding:9px 12px} .progres-pt{flex:none;width:9px;height:9px;border-radius:50%;background:var(--deep);animation:pulse 1.1s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}} @media (prefers-reduced-motion:reduce){.progres-pt{animation:none}} .progres b{font-family:var(--mono);font-weight:500} .progres .lien-ech{margin-left:auto} .retour-attente{font-size:13px;color:var(--muted)} .retour-attente b{font-family:var(--mono);font-weight:500} .retour-erreur{font-size:13px;color:#7A5C12;background:#FDF8EE;border:1px solid #EBDCB4;border-radius:var(--r-s);padding:10px 12px;line-height:1.5} .retour-erreur .lien-ech{color:#7A5C12;font-weight:600;margin-left:6px}