@charset "UTF-8";   
:root {--pos:#d00;--neg:#03f;--neutre:#7cf;--L0:#f5a;--L1:#a65;--L2:#000;--L3:#888;--PE:#4c0;--off:#888;--jaune:#ff0;
--fd_Rail-img:linear-gradient(rgba(255,230,150,.15) 0 100%) center/100% 4px no-repeat,radial-gradient(circle closest-side at 10px 50%,#eee 90%,#0000) 25px 50%/40px 10px space no-repeat,radial-gradient(circle closest-side at 30px 50%,#eee 90%,#0000) 25px 50%/40px 10px space no-repeat,linear-gradient(90deg,#0000 25%,#eee 0 75%,#0000 0) 25px 50%/40px 10px space no-repeat,linear-gradient(to bottom,#8b7331 0%,#c5ac51 15%,#a68d3a 30%,#a68d3a 70%,#c5ac51 85%,#8b7331 100%);}
#remonte{display:none;}
.survol:hover .affiche{z-index:66;}
.danscours.danssimu{max-width:none;width:100%;}
.zoompos{position:absolute;bottom:10px;right:15px;z-index:59;}
.zoombouton{animation:pulserCompo 2s infinite;}
.danssimu.edition #ZoneAction{display:block;}
.borne, .bascule, .potar, .avec0, .decrem, .increm, .BtnLab
{pointer-events:all;cursor:pointer;}
.fdrougeTr{background-color:rgba(200, 0, 0, 0.4)}
.fdnoirTr{background-color:rgba(0, 0, 0, 0.4)}
.fdblancTr{background-color:rgba(255, 250, 230, 0.8)}
.fdvertTr{background-color:rgba(0, 168, 68, 0.7)}
.borne{stroke:transparent;stroke-width:16px;pointer-events:paint;}
.bascule:hover, .decrem:hover, .increm:hover, .avec0:hover, .potar:hover{stroke:#df2;stroke-width:2px;filter:brightness(1.4);}
.borne:hover{filter:brightness(2) drop-shadow(0px 0px 8px #d84);}
.masque{fill:transparent;stroke:none;}
.actif{display:none;}.inactif{display:block;}
.etat1.actif{display:block;}.etat1.inactif{display:none;}
.etat1 .actif{display:block;}.etat1 .inactif{display:none;}
#ecran11.plein_e{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:50;background-color:var(--fdcours);display:flex;flex-direction:column;overflow-y:auto;margin:0;padding:0;}
#ZoneAction{position:relative;min-height:100%;}
#fils_svg{position:absolute;top:0;left:0;width:100%;min-height:100%;z-index:54;pointer-events:none;margin:0;padding:0;}
#ecranjava11 div{max-width:100%;overflow-wrap:anywhere;}
#ecran11.plein_e #ecranjava11 #LaMission{display:none;}
#ecran11.plein_e #ecranjava11 #ZoneAction{display:block;}
body:not(:has(#ecran11.plein_e)) #voile-plexi{display:none;}

/*espace obligatoires là ! sinon le tout pas inclus | #ecranjava11 inclue pas loupe... mais inexistant en EDITION*/
#ecran11.plein_e .zoompos .zoombouton{position:fixed;bottom:0;right:0;z-index:59;touch-action:manipulation;animation:none;opacity:1;}
#balaiHUD{position:fixed;top:0;left:3px;z-index:58;}
#balai, #HUD_Erreurs{border:2px solid #888;}
#poubelle{position:fixed;bottom:6px;left:6px;z-index:58;width:40px;}
.plein_e #poubelle{display:block;}
#poubelle img{cursor:pointer;}
#btnValider{position:fixed;top:3px;right:0;z-index:58;font-size:50px;cursor:pointer;line-height:1;padding:4px;}

#ZoneAction,.poubelle, fil_physique, path, svg{touch-action:manipulation;}
/* --- STRUCTURE LABO --- */
#ennonce{
position:sticky;
top:0;
z-index:57;
width:100%;
height:68px;
overflow:visible;
text-align:center;
font-size:1.3rem;
padding:0 55px 0 85px;/* HB 0 ; GD 50 */
}
#messEtape{color:#df8;width:100%;}
div#pepelec{
margin-left:-85px;
margin-right:-55px;
max-width:none;
width:auto;
box-sizing:border-box;
}
#ecran11.plein_e ~ #message,
body:has(#ecran11.plein_e) #message{top:auto;bottom:10px;}

.clignoAvertir {
animation-name:cligno;
animation-duration:0.8s;
animation-iteration-count:2; 
animation-fill-mode:forwards;
}
.clignoAlerter{animation:cligno 0.3s infinite, pulserCompo 0.6s infinite ease-in-out;}
@keyframes pulserCompo{
0%{filter:drop-shadow(0 0 0px red);}
50%{filter:drop-shadow(0 0 10px red)saturate(2);}
100%{filter:drop-shadow(0 0 0px red);}
}

#sources1{background:#f0f8fd;}
#protections1{background:#fdfaf5;}
#commandes1{background:#f5fdf8;}
#recepteurs1{background:#faf8fd;}
#mesures1{background:#f6f6f6;}
#sources1::before{content:"Zone ALIMENTATIONS";color:#048;}
#protections1::before{content:"Zone Rail DIN";color:#840;}
#commandes1::before{content:"Zone COMMANDES";color:#084;}
#recepteurs1::before{content:"Zone RÉCEPTEURS";color:#408;}
#mesures1::before{content:"Zone MESURES";color:#555;}

.danszone{min-height:250px;position:relative;display:flex;flex-direction:row;align-items:stretch;cursor:pointer;border:2px dashed #fff;}
.danszone.magasin-ouvert{min-height:400px;}
.danszone:has(.dansmagasin:not(.fermer)){cursor:default;}
.contenuZ{flex:3;gap:8px;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;padding:8px;}
.dansmagasin
 {
flex:2;gap:20px 10px;/* Vertic Horiz */
position:relative;overflow-y:auto;padding:8px;
transition:flex 0.4s ease-in-out,padding 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
box-shadow:-2px 0 4px 2px #c8c4c0;background:#00000005;/*background:#0001;10%de noir OU 00000055 pour 55%*/
}
.dansmagasin.fermer{flex:0;width:0;height:0;gap:0;box-shadow:none;overflow:hidden;visibility:hidden;}
.FermerMag{position:absolute;top:5px;right:5px;z-index:58;}
.dansmagasin svg{width:150px;max-height:150px;}
.danssimu.edition #ennonce{position:static;max-height:none;width:100%;height:auto;padding:5px;}/*,.danssimu.edition #dansmagasin*/
.danszone::before{position:absolute;top:5px;left:10px;font-size:0.8rem;font-weight:var(--gras);opacity:0.3;pointer-events:none;transition:all 0.6s ease-in-out;z-index:0;}
.danszone:not(:has(.contenuZ svg))::before{top:10%;left:50%;transform:translate(-50%, -50%);font-size:2rem;font-weight:var(--gras);opacity:0.4;width:90%;text-align:center;}
.danszone{transition:height 0.4s ease-in-out;}
.contenuZ svg{width:220px;max-height:220px;}
svg.svglarge{width:440px;max-height:280px;}
svg.svghaut{width:auto;max-width:200px;max-height:none;height:280px;}
svg.svgThaut{width:auto;max-width:300px;max-height:none;height:500px;}
svg.curseur:hover text, svg.curseur:hover tspan, svg.curseur:hover{text-decoration:none;}
.zonesectionneur{width:100%;height:168px;text-align:center;}
body.mode_travail .danszone{min-height:0;transition:height 0.5s ease;}

.vignette-magasin,.mini-visuel,.vignette-magasin svg{cursor:default;}
.vignette-magasin button, .vignette-magasin svg rect, .vignette-magasin svg path, .vignette-magasin svg text, .vignette-magasin svg circle, .vignette-magasin svg line
{pointer-events:auto;cursor:pointer;}
.vignette-magasin.rupture *{opacity:0.5;cursor:not-allowed;}

body.mode-cablage-actif .btn_vig{display:none;}
body.mode-cablage-actif .danszone{pointer-events:none;}
body.mode-cablage-actif .fils-svg-zone, body.mode-cablage-actif .borne{pointer-events:auto;}

.contenuZ.fdrail{
  position:relative;
}

.contenuZ.fdrail::before{
  content:'';
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:35px;
  transform:translateY(-50%);
  background:var(--fd_Rail-img);
  border-top:1px solid #7d682a;
  border-bottom:1px solid #7d682a;
  box-shadow:inset 0 2px 3px rgba(80,60,0,.4), 0 2px 5px rgba(0,0,0,.3);
  pointer-events:none;
  z-index:0;
}

.contenuZ.fdrail > * {
  position:relative;
  z-index:1;
}
/* Bloqué UNIQUEMENT tant qu'on n'est PAS en mode câblage */
body:not(.mode-cablage-actif) .zonesectionneur, body:not(.mode-cablage-actif) .zoneborniers {pointer-events:none;opacity:0.4;cursor:not-allowed;}
.zoneborniers{width:100%;height:55px;text-align:center;position:relative;z-index:52;overflow:visible;background:#fff;}
.edition .zoneborniers{border:2px #000 dashed;}

.bornier_groupe{background:#fff;display:inline-flex;gap:6px;margin-top:-8px;padding:2px;border-radius:4px;}
.borne_unitaire{border:2px solid #59;border-radius:4px;width:auto;padding:2px 4px;display:flex;flex-direction:column;align-items:center;}
.rangee_vis{display:grid;justify-content:center;margin-left:-5px;}
.cols_2{grid-template-columns:repeat(2,18px);}
.cols_3{grid-template-columns:repeat(3,18px);}
.cols_4{grid-template-columns:repeat(4,18px);}
.cols_6{grid-template-columns:repeat(6,18px);}
.label_borne{font-size:11px;width:100%;text-align:center;}
.label_borne b{font-weight:var(--gras);}
.plot_actif{cursor:pointer;display:block;}
.plot_actif svg{display:block;width:24px;height:24px;}
.plot_actif circle{stroke:inherit;}
.plot_actif:hover{transform:scale(1.1);filter:brightness(1.2);}

#SocleLabo{display:block;height:68px;width:100%;pointer-events:none;}
#DebutLabo{display:block;height:13px;width:100%;pointer-events:none;}
@keyframes bSel{to {stroke-width12px;opacity:0;}}
.borne-sel{stroke:#ff9f00;stroke-width:6px;animation:bSel 0.6s infinite linear; }
#Alerter{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:59;padding:10px;border:4px solid #000;border-radius:8px;text-align:center;pointer-events:none;max-width:1600px;width:96vw;}
@keyframes flashCCT { 0%, 100% { stroke:#d00; filter:drop-shadow(0 0 8px #d00); } 50% { stroke:#fff; filter:drop-shadow(0 0 15px #fff); } }
.cct-flash{animation:flashCCT 0.3s infinite alternate;stroke-width:6px;}
.BtnLab,.bouton{white-space:nowrap;overflow-wrap:normal;word-break:normal;}

#conteneurApercu{
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
width:100%;
min-height:400px;
background-color:#edefe8;
background-image:radial-gradient(#ddd 1px, transparent 1px);
background-size:20px 20px;
padding:5px;
margin-top:10px;
display:none;
}
.boiteCarrousel
{margin:05px;display:flex;justify-content:flex-start;flex-direction:column;margin-top:10px;}
.boiteCarrousel svg{width:230px;height:230px;}
/* Boutons et badges du magasin */
.btn_vig{min-width:unset;min-height:unset;width:26px;height:26px;padding:0;border:none;font-weight:var(--gras);border-radius:50%;cursor:pointer;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.4);}
.badge_stock{background:#434;color:#fff;padding:2px 6px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.4);font-weight:var(--gras);}
/* Positions absolues sur la vignette */
.abs_hg{position:absolute;top:-4px;left:-4px;}
.abs_bg{position:absolute;bottom:0;left:0;}
.abs_bd{position:absolute;bottom:0;right:0;}

.negBleu{background-color:var(--neg);}
.posRouge{background-color:var(--pos);}
.neutre{background-color:var(--neutre);}
.phaseL0{background-color:var(--L0);}
.phaseL1{background-color:var(--L1);}
.phaseL2{background-color:var(--L2);}
.phaseL3{background-color:var(--L3);}
.terrePE{background:repeating-linear-gradient(45deg,var(--jaune),var(--jaune) 5px,var(--PE) 5px,var(--PE) 10px);}
.fil_plus{stroke:var(--pos);}
.fil_moins{stroke:var(--neg);}
.fil_neutre{stroke:var(--neutre);}
.fil_phase0{stroke:var(--L0);}
.fil_phase1{stroke:var(--L1);}
.fil_phase2{stroke:var(--L2);}
.fil_phase3{stroke:var(--L3);}
.fil_terre{stroke:var(--PE);stroke-dasharray:8,4;}
.fil_attente{stroke:var(--off);}
.fil_masse{stroke:#222;stroke-width:4.5;}
.dangerBT{position:fixed;top:68px;right:16px;width:58px;filter:drop-shadow(0px 4px 6px rgba(230,68,0,0.6));z-index:59;}

.fil_physique {
    fill:none;
    stroke-width:5px;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:stroke;
    cursor:pointer;
    transition:filter 0.2s, stroke 0.3s ease;
    filter:drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.4));
}
.fil_physique:hover{filter:brightness(1.4) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));}
svg:has(.borne:hover) .fil_physique{pointer-events:none;}

body.mode-cablage-actif .btn_vig{display:none;}

.flexEnnonce {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.flexEnnonce > * {
  position: relative;
}
.defile{position:relative;width:260px;height:360px;display:flex;justify-content:center;align-items:center;}
.defile img{position:absolute;height:100%;width:100%;object-fit:contain;opacity:0;transition:opacity 1s;}
.defile img.active{opacity:1;}
@keyframes invocationMagique {
    from {
        transform:scale(4);
        filter:drop-shadow(0 0 30px #22c55e) saturate(5) brightness(1.5);
        opacity:0;
    }
    50% {
        opacity:0.8;
    }
    to {
        transform:scale(1);
        filter:drop-shadow(0 0 0px transparent);
        opacity:1;
    }
}

.progressif2{transform-origin:center center;animation:invocationMagique 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#voile-plexi {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(255, 140, 0, 0.15);
    z-index:55;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}
#voile-plexi span {
    background:rgba(68, 0, 255, 0.4);
    color:#fe0;
    font-size:1.5rem;
    font-weight:bold;
    padding:18px 36px;
    border-radius:12px;
    text-align:center;
    pointer-events:none;
    box-shadow:0 0 40px rgba(68,0,255,0.6);
    border:2px solid #60f;
}
/* il n'y est plus lol !
#ecran11:has(#voile-plexi) .commandes,
#ecran11:has(#voile-plexi) .zonesectionneur{position:relative;z-index:56;}*/

/* ===== Étape CHOIX (QCM générique) ===== */
.chxDesc{min-height:42px;background:#fff;border:1px solid #d6deea;border-radius:10px;padding:9px 13px;margin:0 0 12px;color:#89a;font-style:italic;display:flex;align-items:center;}
.chxDesc b{color:#1a2b4a;font-style:normal;}
.chxGrille{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.chxTuile{width:104px;min-height:116px;background:#fff;border:2px solid #d6deea;border-radius:14px;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;user-select:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.chxTuile svg{width:74px;height:74px;display:block;}
.chxLbl{font-size:.74rem;line-height:1.05;text-align:center;color:#89a;}
@media (hover:hover){.chxTuile:hover{border-color:#8df;transform:translateY(-2px);}}
.chxTuile.sel{transform:scale(.9);border-color:#08d;box-shadow:0 0 0 3px #08d,0 0 18px 3px rgba(59,130,246,.5);}
.chxTuile.ok{transform:scale(1);border-color:#0a8;box-shadow:0 0 0 3px #0a8,0 0 20px 4px rgba(16,185,129,.55);}
.chxTuile.ko{transform:scale(1.1);border-color:#ef4444;box-shadow:0 0 0 3px #ef4444;animation:pulserCompo .6s ease-in-out infinite;}
.chxPied{margin-top:14px;text-align:center;}
.chxValider{font:inherit;font-weight:700;border:none;border-radius:12px;padding:13px 28px;cursor:pointer;color:#fff;min-height:48px;background:linear-gradient(180deg,#3df,#048);}
.chxValider.chxFini{background:#0a8;cursor:default;}
.chxPq{margin:10px;text-align:center;}

/* --- bande haute : pastilles + question/desc (sticky) --- */
#depHaut{position:sticky;top:0;z-index:52;width:100%;box-sizing:border-box;background:var(--fdcours);padding:8px 14px 4px;border-bottom:1px solid #08d;margin-bottom:10px;}
/*#depPastilles{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:8px;}*/
#depHaut .chxDesc{margin:0;font-size:1rem;}  /* question fixée 1rem, intégrée dans le sélecteur */
/* --- corps defilant : panneaux + diag --- */
#depCorps{width:100%;box-sizing:border-box;padding:12px 14px 16px;}
.depVide{color:#9ab;text-align:center;font-style:italic;padding:28px 12px;line-height:1.5;}
/* --- socle : 1 a 3 boutons (sticky), ~60px reserves a droite pour le calepin fixe --- */
#depSocle{position:sticky;bottom:0;z-index:52;width:100%;box-sizing:border-box;background:var(--fdcours);border-top:1px solid #08d;padding:10px 60px 12px 14px;margin-top:10px;}
#depBoutons{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-evenly;}
.depBtn{font:inherit;font-weight:700;border:none;border-radius:12px;padding:13px 22px;
  min-height:48px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#3df,#048);}
.depBtn:disabled{opacity:.7;cursor:default;}
.depBtnOK{background:linear-gradient(180deg,#3df,#048);}
.depBtnFini{background:#0a8;cursor:default;}
.depBtnAux{background:linear-gradient(180deg,#a66,#633);}  /* bouton secondaire (ex. Rearmer) */
/* --- écran final dépannage : seules classes réellement absentes (le reste = tes classes maison) --- */
.fdvertdeg{background:linear-gradient(180deg,#3d8,#184);}   /* dégradé vert réutilisable (#3d8 → #184) */
.boiteLabo{width:min(720px,92%);margin:38px auto 0;gap:20px;align-items:flex-start;justify-content:flex-start;}
.boiteLabo .depBtn{min-width:160px;}                        /* phrases alignées entre elles */

/* --- tuiles CHOIX : passage en FLUIDE (le plus grand possible, plafonne pour PC/4K) --- */
#depPanneaux .chxGrille{justify-content:space-evenly;gap:22px;margin-inline:auto;padding:12px 10px;}
#depPanneaux .chxTuile{ width:clamp(96px,40vw,240px);}
#depPanneaux .chxTuile svg{width:100%;height:auto;aspect-ratio:1/1;}
#depPanneaux .chxLbl{font-size:clamp(.72rem,2.7vw,.92rem);}
.ordreItem{position:relative;text-align:center;}
.ordreBadge{position:absolute;left:20px;top:50%;transform:translateY(-50%);}
/*#depPanneaux .chxTuile svg text{display:none;}  /* etiquette "Par/Le" du cadenas masquee sur la tuile */
/* halos des réponses (repris de tes tuiles EPI) — sélection / bon / faux */
#depPanneaux .qcmOpt.sel{ border-color:#08d;    box-shadow:0 0 0 3px #08d,    0 0 18px 3px rgba(59,130,246,.5); }
#depPanneaux .qcmOpt.ok{ border-color:#0a8;    box-shadow:0 0 0 3px #0a8,    0 0 20px 4px rgba(16,185,129,.55); }
#depPanneaux .qcmOpt.ko{ border-color:#ef4444; box-shadow:0 0 0 3px #ef4444; }
/* remplir la hauteur (sinon tout se colle en haut, ton « 30 % ») */
#depPanneaux .qcmTexte{ min-height:60vh;justify-content:space-evenly;gap:8px; }
.chxHyp{min-height:20px;margin-top:6px;font-style:italic;opacity:.85;color:#068;}

@media(orientation:portrait)
  {
	.defile{width:130px;height:130px;}
	.bornier_groupe{gap:6px;}
	.dansmagasin{gap:5px;}
	.danszone{flex-direction:column;padding-top:30px;}
	.dansmagasin svg{width:70px;}
	.contenuZ svg{width:140px;max-height:160px;}
	svg.svglarge{width:90%;max-height:200px;}
	svg.svghaut{width:auto;max-width:160px;max-height:none;height:220px;}
	svg.svgThaut{width:auto;max-width:260px;max-height:none;height:320px;}
	#ennonce{height:80px;font-size:0.85rem;}
	#DebutLabo{height:30px;}
	#poubelle{width:34px;}
	#btnValider{font-size:42px;}
	#pepelec{font-size:0.8rem;font-weight:normal;}
	.dansmagasin:not(.fermer){max-height:35vh;overflow-y:auto;box-shadow:0 -2px 4px 2px #c8c4c0;}
	.dansmagasin{padding-right:40px;} .FermerMag{right:1px;}
	.contenuZ.fdrail::before{display:none;}
  }
.zoombouton{display:none;}
body:not(.charge) #btnApercu{pointer-events:none;opacity:0.7;filter:grayscale(1);}
body:not(.charge) #btnApercu b{display:none;}
body:not(.charge) #btnApercu::after{content:"Patientez... ⏳";}
body.charge .zoombouton{display:block;}
body.charge #btnApercu{pointer-events:auto;opacity:1;filter:none;}
body.charge #btnApercu::after{content:none;}
body.charge #btnApercu b{display:inline;}