/* ============================================================
   logiciel-plan.css · la rubrique « Le logiciel » en page unique
   (test « Logiciel2 » validé, en production le 31 oct. 2026) : le panorama
   (logiciel.html) et le plan du logiciel à gauche des pages body[data-plan].
   Jetons de site-da06.css ; maquette validée le 30 oct. 2026.
   ============================================================ */
:root{--l2-w:276px;--l2-mini:46px;--l2-barre:46px}

/* ---------- commun ---------- */
.l2-bar{height:4px;background:var(--creme-2);border-radius:2px;overflow:hidden}
.l2-bar i{display:block;height:100%;background:var(--or);transition:width .3s}
.l2-ck{flex:none;width:16px;height:16px;border:1.5px solid var(--filet);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:transparent}
.vu>.l2-ck{background:var(--vert);border-color:var(--vert);color:#fff}

/* ---------- panorama ---------- */
.l2-top{background:var(--creme);border-bottom:1px solid var(--filet);padding:calc(var(--nav-h) + clamp(30px,4vw,52px)) 0 clamp(26px,3vw,38px)}
.l2-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end}
.l2-top h1{font-size:clamp(36px,4.6vw,60px);color:var(--navy);margin-top:12px}
.l2-top .dit{margin-top:14px;max-width:58ch}
.l2-cpt{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);min-width:190px}
.l2-cpt b{display:block;font-family:var(--serif);font-weight:400;font-size:42px;letter-spacing:-.02em;text-transform:none;color:var(--navy);line-height:1}
.l2-cpt .l2-bar{width:180px;margin:8px 0 6px auto}
.l2-cpt button{background:none;border:0;padding:0;font:inherit;text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:var(--encre-3);cursor:pointer;border-bottom:1px solid var(--filet)}
.l2-cpt button:hover{color:var(--violet)}

.l2-dep{background:var(--blanc);border-bottom:1px solid var(--filet);padding:18px 0}
.l2-dep-l{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.l2-dep-q{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;color:var(--navy);margin-right:6px}
.l2-prof{font:500 14px/1.2 var(--sans);background:var(--creme);border:1px solid var(--filet);border-radius:999px;padding:9px 16px;color:var(--navy);cursor:pointer}
.l2-prof:hover{border-color:var(--or)}
.l2-prof[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--creme)}
.l2-pc{display:flex;flex-wrap:wrap;align-items:stretch;margin-top:16px}
.l2-pc[hidden]{display:none}
.l2-pc-pitch{flex:0 0 100%;font-size:15px;color:var(--encre-2);margin:0 0 10px}
.l2-et{flex:1 1 150px;display:flex;gap:10px;align-items:flex-start;padding:10px 14px 10px 0;margin-right:14px;border-top:2px solid var(--filet);color:var(--encre)}
.l2-et:hover{border-top-color:var(--or);color:var(--navy)}
.l2-et .n{font-family:var(--mono);font-size:11px;color:var(--or-f);padding-top:3px;white-space:nowrap}
.l2-et .t{font-weight:600;font-size:15px;line-height:1.35}
.l2-et.vu{border-top-color:var(--vert)}
.l2-et.vu .n{color:var(--vert)}
.l2-go{align-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r);background:var(--navy);color:var(--creme);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
.l2-go:hover{background:var(--violet);color:var(--creme)}

.l2-fond{background:var(--creme)}   /* jamais le sable C2 en fond de bloc (décision du 22 oct. 2026) */
.l2-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);padding-top:clamp(26px,3vw,40px);padding-bottom:clamp(50px,6vw,80px)}
.l2-carte{background:var(--blanc);border:1px solid var(--filet);border-top:4px solid var(--c);border-radius:var(--r);display:flex;flex-direction:column}
.l2-carte-h{padding:20px 22px 16px;border-bottom:1px solid var(--filet)}
.l2-carte-h .sur{color:var(--encre-3)}
.l2-carte-h h2{font-size:clamp(30px,2.8vw,38px);color:var(--navy);margin-top:6px}
.l2-carte-h p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--encre-2)}
.l2-carte-h .n{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--encre-3)}
.l2-carte ul{list-style:none;margin:0;padding:6px 8px 10px}
.l2-carte li a{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 8px;padding:9px 12px 9px 8px;border-radius:2px;color:var(--encre)}
.l2-carte li a .l2-ck{grid-row:span 2;margin-top:3px}
.l2-carte li a:hover{background:var(--creme)}
.l2-carte li a:hover .mt{color:var(--violet)}
.l2-carte .mt{font-weight:600;font-size:15.5px;line-height:1.35}
.l2-carte .md{font-size:13.5px;line-height:1.45;color:var(--encre-2)}
.l2-tag{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);border:1px solid var(--filet);border-radius:2px;padding:0 4px;vertical-align:2px}
@media(max-width:1000px){.l2-cartes{grid-template-columns:1fr}}
@media(max-width:900px){.l2-top .wrap{grid-template-columns:1fr}.l2-cpt{text-align:left}.l2-cpt .l2-bar{margin-left:0}}
@media(max-width:700px){.l2-et{flex-basis:100%;margin-right:0}.l2-go{margin-top:10px}}

/* ---------- plan du logiciel (pages de la rubrique : body[data-plan]) ---------- */
/* La place du plan est réservée dès le premier affichage (body[data-plan], posé dans
   chaque page) : rien ne saute quand logiciel-plan.js dessine le plan. Une page d'outil
   (data-plan="outil") arrive plan replié. Une bande vide tient la place en attendant. */
body[data-plan]{padding-left:var(--l2-w)}
body[data-plan="outil"]{padding-left:var(--l2-mini)}
html.l2:not(.l2-replie) body[data-plan]{padding-left:var(--l2-w)}
body[data-plan]::before{content:"";position:fixed;z-index:54;left:0;top:var(--nav-h);bottom:0;width:var(--l2-w);background:var(--blanc);border-right:1px solid var(--filet)}
body[data-plan="outil"]::before{width:var(--l2-mini)}
html.l2 body[data-plan]::before{content:none}
.l2-plan{position:fixed;z-index:55;left:0;top:var(--nav-h);bottom:0;width:var(--l2-w);overflow:auto;background:var(--blanc);border-right:1px solid var(--filet);font-family:var(--sans);font-size:13.5px;line-height:1.35;scrollbar-width:thin}
.l2-h{position:sticky;top:0;z-index:2;background:var(--blanc);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 8px 14px;border-bottom:1px solid var(--filet)}
.l2-pano-l{display:flex;align-items:center;min-height:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.l2-pano-l:hover{color:var(--violet)}
.l2-tog{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--filet);border-radius:var(--r);background:var(--creme);color:var(--navy);font-size:15px;cursor:pointer}
.l2-tog:hover{border-color:var(--or)}
.l2-prog{padding:10px 14px 12px;border-bottom:1px solid var(--filet)}
.l2-prog-l{display:flex;justify-content:space-between;margin-bottom:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--encre-2)}
.l2-pcbox{margin:10px 10px 0;padding:9px 11px;background:var(--creme);border:1px solid var(--filet);border-left:3px solid var(--violet);border-radius:2px;font-size:12.5px}
.l2-pcbox b{display:block;margin-bottom:2px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.l2-pcbox button{margin-top:4px;padding:0;background:none;border:0;border-bottom:1px solid var(--filet);font:inherit;font-size:12px;color:var(--encre-3);cursor:pointer}
.l2-pcbox button:hover{color:var(--violet)}
.l2-grp{border-bottom:1px solid var(--filet)}
.l2-grp-t{width:100%;display:grid;grid-template-columns:8px minmax(0,1fr) auto 12px;align-items:center;gap:9px;padding:12px 12px 12px 14px;background:none;border:0;text-align:left;cursor:pointer}
.l2-grp-t .pt{width:8px;height:8px;border-radius:50%;background:var(--c)}
.l2-grp-t .nm{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.l2-grp-t .n{font-family:var(--mono);font-size:10px;color:var(--encre-3)}
.l2-grp-t svg{color:var(--encre-3);transition:transform .15s}
.l2-grp.open .l2-grp-t svg{transform:rotate(180deg)}
.l2-grp>ul{display:none;list-style:none;margin:0;padding:0 6px 8px}
.l2-grp.open>ul{display:block}
.l2-grp>ul>li>a{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:2px;color:var(--encre)}
.l2-grp>ul>li>a .l2-ck{width:14px;height:14px;margin-top:1px;font-size:9px}
.l2-grp>ul>li>a:hover{background:var(--creme);color:var(--violet)}
.l2-grp>ul>li>a[aria-current]{background:var(--creme);box-shadow:inset 3px 0 0 var(--or);font-weight:600;color:var(--navy)}
.l2-secs{list-style:none;margin:2px 0 6px 31px;padding:0;border-left:1px solid var(--filet)}
.l2-secs a{display:block;margin-left:-1px;padding:3px 8px 3px 10px;border-left:2px solid transparent;font-size:12.5px;line-height:1.35;color:var(--encre-2)}
.l2-secs a:hover{color:var(--violet)}
.l2-secs a.on{border-left-color:var(--violet);color:var(--violet)}
/* plan replié : une bande étroite */
.l2-mini{display:none}
@media(min-width:1000px){
  html.l2-replie body[data-plan]{padding-left:var(--l2-mini)}
  html.l2-replie .l2-plan{width:var(--l2-mini);overflow:hidden}
  html.l2-replie .l2-plan>*:not(.l2-mini){display:none}
  html.l2-replie .l2-mini{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0}
}
.l2-mini-v{writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 0;background:none;border:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);cursor:pointer}
.l2-mini-v:hover{color:var(--violet)}
.l2-mini-n{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:10px;color:var(--encre-3)}

/* précédent / suivant, juste avant le pied */
.l2-suite{background:var(--blanc);border-top:1px solid var(--filet);padding:30px 0 56px}
.l2-suite .wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.l2-sv{display:block;padding:14px 18px;border:1px solid var(--filet);border-radius:var(--r);background:var(--creme);color:var(--encre)}
.l2-sv:hover{border-color:var(--or);color:var(--navy)}
.l2-sv.nx{grid-column:2;text-align:right}
.l2-sv span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.l2-sv b{display:block;margin-top:4px;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.15;letter-spacing:-.015em;color:var(--navy)}
.l2-sv em{display:block;margin-top:2px;font-style:normal;font-size:13px;color:var(--encre-2)}

/* barre du plan et feuille, sous 1 000 px */
.l2-barre,.l2-feuille{display:none}
@media(max-width:999px){
  body[data-plan],body[data-plan="outil"],html.l2:not(.l2-replie) body[data-plan]{padding-left:0;padding-top:var(--l2-barre)}
  body[data-plan]::before,body[data-plan="outil"]::before{right:0;bottom:auto;width:auto;height:var(--l2-barre);border-right:0;border-bottom:1px solid var(--filet)}
  body>.l2-plan{display:none}
  .l2-barre{display:flex;position:fixed;z-index:58;left:0;right:0;top:var(--nav-h);height:var(--l2-barre);align-items:center;gap:10px;padding:0 var(--pad);background:var(--blanc);border-bottom:1px solid var(--filet);font-size:13.5px}
  .l2-barre button{flex:none;display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;background:var(--creme);border:1px solid var(--filet);border-radius:var(--r);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);cursor:pointer}
  .l2-barre .ou{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--encre-2)}
  .l2-barre .ou b{font-weight:600;color:var(--navy)}
  .l2-barre .n{flex:none;margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--encre-3)}
  .l2-feuille.on{display:block;position:fixed;inset:0;z-index:9300;background:rgba(27,20,38,.42)}
  .l2-feuille .l2-plan{display:block;top:0;width:min(340px,88vw);box-shadow:8px 0 30px rgba(27,20,38,.2)}
  .l2-suite .wrap{grid-template-columns:1fr}
  .l2-sv.nx{grid-column:1}
}
@media print{.l2-plan,.l2-barre,.l2-feuille,.l2-suite{display:none!important}body[data-plan]{padding:0!important}body[data-plan]::before{content:none}}