:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#203244;background:#eef3f7}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}.shell{max-width:1040px;margin:auto}.top{background:#12324a;color:white;padding:16px 16px 12px;position:sticky;top:0;z-index:5;box-shadow:0 3px 14px #0002}.brand{display:flex;align-items:center;gap:11px}.brand h1{font-size:18px;margin:0}.brand p{margin:2px 0 0;color:#b9d2de;font-size:12px}.logo{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#2d728f;font-size:22px}.tabs{display:flex;gap:5px;margin-top:13px}.tabs button{flex:1;border:1px solid #446176;border-radius:8px;padding:10px 5px;background:#23445a;color:#e8f5fb;font-weight:700;font-size:13px}.tabs button.active{background:white;color:#14334c}.content{padding:14px;padding-bottom:100px}.card{background:white;border:1px solid #dce5ea;border-radius:12px;box-shadow:0 2px 8px #102a3d08;padding:14px;margin-bottom:12px}.heading{font-size:17px;font-weight:800;margin:0 0 12px}.muted{font-size:13px;color:#617285}.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.field{display:block;font-size:12px;font-weight:750;color:#53687b;margin:0 0 4px}.fieldgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.fieldgrid .span2{grid-column:span 2}.control{width:100%;border:1px solid #bdcbd5;border-radius:9px;background:white;min-height:43px;padding:8px 10px;outline-color:#246e92}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.stat{border-radius:10px;background:#e5f0f5;padding:10px 8px;text-align:center}.stat b{display:block;font-size:21px;color:#13445c}.stat span{font-size:11px;color:#506979}.btn{border:1px solid #c0d0da;border-radius:9px;background:white;color:#163d56;min-height:39px;padding:8px 12px;font-size:13px;font-weight:750}.btn.primary{background:#126184;border-color:#126184;color:white}.btn.danger{color:#9a3030;border-color:#e9c2c2}.btn:disabled{opacity:.55}.small{min-height:32px;padding:5px 9px}.search{margin-bottom:12px}.search input{width:100%;border:1px solid #b6c9d4;border-radius:10px;min-height:44px;padding:10px 12px;background:white}.node{margin-bottom:6px}.treehead{display:flex;align-items:center;width:100%;gap:8px;text-align:left;border:1px solid #cfdae1;border-radius:8px;padding:12px 10px;font-weight:800;color:#19334b}.treehead .chev{font-size:18px;width:20px;text-align:center}.treehead .labeltext{flex:1}.node-level0>.treehead{background:#153c59;color:white;border-color:#153c59;font-size:14px;margin-top:11px}.node-level1>.treehead{background:#dceaf2;border-color:#b7d1df;font-size:13px}.node-level2>.treehead{background:#edf2f6;font-size:13px}.node-level1{margin-left:10px}.node-level2{margin-left:20px}.fault{padding:12px;margin:7px 0 10px;background:#fff;border:1px dashed #9cb0be;border-radius:10px}.fault.depth3{margin-left:26px}.fault.depth2{margin-left:18px}.fault.selected{border:2px solid #b64341;background:#fffdfa}.grade-label{font-size:11px;font-weight:750;color:#53687b;margin-top:9px}.fault-title{font-weight:750;font-size:14px;line-height:1.4}.breadcrumb{font-size:11px;color:#688092;margin:6px 0}.grades{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.grade{min-width:42px;height:38px;padding:0 9px;border:2px solid #c3ccd4;border-radius:7px;background:#dfe3e7;color:#55616b;font-weight:850;font-size:13px;opacity:1;transition:background-color .1s,border-color .1s,color .1s}.grade.allowed:not(.active){background:#dfe3e7;color:#55616b;border-color:#c3ccd4}.grade.active{outline:2px solid #be3131;outline-offset:1px;border-color:#9b2626;opacity:1}.grade[data-grade="1"].active{background:#53bf65;color:#0b2612}.grade[data-grade="2"].active{background:#ffde45;color:#322900}.grade[data-grade="2E"].active{background:#ff9b32;color:#402100}.grade[data-grade="3"].active{background:#a51f24;color:#fff}.grade[data-grade="3U"].active{background:#161616;color:#fff}.grade[data-grade="S"].active{background:#fff;color:#c01a20;border-color:#c01a20;font-weight:900}.fault-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.notechip{font-size:12px;font-weight:800;color:#8f2a2a}.images{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.imagewrap{position:relative;width:83px;height:92px}.imagewrap img{width:83px;height:82px;object-fit:cover;border-radius:7px;border:1px solid #c2d3dc}.imagewrap button{position:absolute;right:-4px;top:-5px;background:#912e37;color:#fff;border:0;width:25px;height:25px;border-radius:50%;font-size:17px;line-height:25px;padding:0}.obs{margin-top:8px;min-height:66px;width:100%;resize:vertical}.empty{padding:28px;text-align:center;color:#657989;background:#fff;border-radius:10px}.tablewrap{overflow:auto;max-height:70vh;border:1px solid #cad7df;border-radius:10px;background:white}.exgrid{border-collapse:collapse;min-width:740px;font-size:12px}.exgrid th{background:#173e57;color:white;position:sticky;top:0;padding:9px 4px;z-index:2}.exgrid td{border-top:1px dashed #9ca8b0;border-bottom:1px dashed #9ca8b0;padding:5px 3px;vertical-align:middle;height:36px;overflow:hidden}.exgrid tr.ex-title td{background:#173e57;color:#fff;font-weight:800}.exgrid tr.ex-page td{background:#dceaf2;font-weight:750}.exgrid tr.ex-desordre td{background:#e9eff3;font-weight:750}.exgrid .tiny{width:20px;min-width:20px;max-width:20px;white-space:nowrap;text-overflow:clip}.exgrid .wide{width:350px;min-width:350px;max-width:350px}.exgrid .note-col{width:54px;min-width:54px;text-align:center}.exgrid .grade{min-width:40px;height:30px;padding:0 4px}.summary-card{border:1px solid #d8e4eb;background:white;border-radius:10px;padding:12px;margin-bottom:9px}.summary-title{font-weight:800;margin:7px 0}.summary-badge{display:inline-block;padding:3px 9px;border-radius:7px;font-weight:800;background:#e9eff2}.bottom{position:fixed;bottom:0;left:0;right:0;z-index:6;background:#fff;border-top:1px solid #d3e0e6;padding:8px max(12px,env(safe-area-inset-left));box-shadow:0 -2px 16px #0001}.bottom .bar{max-width:1040px;margin:auto}.bottom .btn{flex:1}.notice{font-size:12px;line-height:1.5;background:#ecf6fa;border-left:3px solid #277c9f;padding:10px;border-radius:5px;margin:12px 0}.toast{position:fixed;left:12px;right:12px;bottom:78px;margin:auto;max-width:560px;background:#16374f;color:white;padding:12px 15px;border-radius:9px;z-index:10;display:none;box-shadow:0 3px 18px #0003;font-size:14px}.toast.show{display:block}.legend{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.legend span{font-size:10px;white-space:nowrap}@media(min-width:750px){.fieldgrid{grid-template-columns:repeat(4,1fr)}.fieldgrid .span2{grid-column:span 2}.fault{padding:14px}.content{padding:20px}.bottom .btn{flex:initial}.top{border-radius:0 0 10px 10px}}@media(max-width:380px){.node-level1{margin-left:6px}.node-level2{margin-left:11px}.fault.depth3{margin-left:12px}.fault.depth2{margin-left:7px}.grades{gap:4px}.grade{min-width:39px}}
.grade:disabled{opacity:.28!important;filter:grayscale(.5);cursor:not-allowed;outline:none!important}

/* Saisie tactile et zones de sécurité Safari iOS / Chrome Android */
input,textarea,select{font-size:16px!important}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #1d89aa;outline-offset:1px}
.bottom{padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.top{padding-top:max(16px,env(safe-area-inset-top))}
@media(max-width:420px){.bottom .btn{font-size:12px;padding:9px 7px;min-width:0}.bottom .bar{gap:5px}.tabs button{min-height:44px}.grade{min-height:42px;min-width:43px}}

.preview-warn{border:2px solid #b64341;background:#fff7e8;color:#693718;line-height:1.5;font-size:14px}
.preview-warn strong{display:block;font-size:16px;margin-bottom:5px}
.fault .grades span.grade{display:inline-flex;align-items:center;justify-content:center}
@supports (-webkit-touch-callout:none){button,input,textarea{appearance:auto}}

/* Identification CD21, adaptée tactile Android / iOS */
.oa-offline-plan{margin-top:12px;padding:10px;background:#f4f8f5;border:1px solid #cddfd3;border-radius:10px;text-align:center}
.oa-offline-plan[hidden]{display:none!important}.oa-offline-plan img{display:block;max-width:100%;max-height:380px;margin:auto;object-fit:contain}
.oa-section{padding:14px 14px 0}.oa-card{border-top:4px solid #2e8760}.oa-title{color:#17633e;font-size:18px;letter-spacing:.04em}.oa-picker{max-width:850px}
.oa-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.oa-filter-row label,.oa-fieldgrid label,.oa-ident-label{min-width:0;display:block}
.oa-filter-row label span,.oa-fieldgrid label span,.oa-ident-label span{display:block;color:#526b5d;font-size:12px;font-weight:750;margin-bottom:5px}
.oa-picker select{font-weight:650}.oa-ident-label{display:block;margin-top:14px}.oa-ident-label span{font-size:14px;color:#166641}
.oa-ident-label select{border:2px solid #7eba98;color:#195f3f;font-weight:750}
.oa-fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.oa-fieldgrid input[readonly]{background:#f1f6f2;color:#335c41}
.oa-indicator{font-size:12px;color:#647c6e;margin-top:7px}.oa-visuals[hidden]{display:none!important}
.oa-cover-card{padding:12px}.oa-photo-box{display:flex;align-items:center;justify-content:center;min-height:110px;border-radius:10px;background:#f4f9f6;overflow:hidden}
.oa-photo-box img{display:block;max-width:100%;max-height:350px;object-fit:contain}.oa-photo-box img[hidden],.oa-photo-empty[hidden]{display:none!important}
.oa-photo-empty{padding:16px;text-align:center;color:#6a7b6d;font-size:13px}.oa-photo-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.oa-caption{color:#6c796d;font-size:12px;margin-top:7px}.oa-map-card>.heading{color:#225e41}
.oa-map{height:350px;min-height:265px;border:1px solid #bdcfc2;background:#eaf3ed;border-radius:10px;position:relative;overflow:hidden;isolation:isolate}
.oa-map-fallback,.oa-map-tiles{position:absolute;inset:0;overflow:hidden}.oa-map-fallback{z-index:0}.oa-map-fallback svg{width:100%;height:100%;display:block}
.oa-map-tiles{z-index:1;pointer-events:none}.oa-map-tiles img{width:256px;height:256px;position:absolute;max-width:none;object-fit:fill}
.oa-map-marker{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);font-size:40px;color:#c8232d;text-shadow:0 1px 3px white,0 2px 7px #252525;pointer-events:none;line-height:1}
.oa-map-marker[hidden]{display:none}.oa-map-status{position:absolute;top:8px;left:8px;max-width:75%;z-index:3;background:#fffffff0;color:#295a3d;padding:6px 9px;border-radius:6px;font-size:11px}
.oa-map-zoom{position:absolute;z-index:4;right:8px;top:8px;display:flex;flex-direction:column;box-shadow:0 2px 7px #0003;border-radius:6px;overflow:hidden}
.oa-map-zoom button{border:0;border-bottom:1px solid #ddd;background:white;min-width:39px;min-height:39px;color:#245c3e;font-size:22px;font-weight:bold}
.oa-map-credit{position:absolute;z-index:3;right:7px;bottom:5px;background:#fffffff0;padding:2px 5px;border-radius:4px;font-size:10px;color:#4a6a50}
.oa-coordinates{margin-top:7px;font-size:12px;color:#496f55}.oa-map-note{font-size:12px;color:#637767;margin:8px 0 0}
@media(min-width:800px){.oa-section{padding:18px 20px 0}.oa-filter-row{grid-template-columns:repeat(3,minmax(0,1fr))}.oa-fieldgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:450px){.oa-section{padding:10px 10px 0}.oa-filter-row{grid-template-columns:1fr;gap:8px}.oa-map{height:285px;min-height:285px}.oa-photo-tools .btn{flex:1}.oa-fieldgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.oa-filter-row select{padding:8px 5px}}
@media print{.oa-section{display:block!important;padding:0}.oa-visuals[hidden]{display:none}.oa-map-tiles img{print-color-adjust:exact;-webkit-print-color-adjust:exact}.bottom,.tabs,.oa-photo-tools,.oa-map-zoom{display:none!important}}

/* CD21 BLEU — nouvelle identité visuelle du PV MUR */
:root{color:#1d3550;background:#f1f6fc}
body{background:#f1f6fc;color:#1d3550}
.top{background:linear-gradient(110deg,#0d3158,#175c9e 85%);color:#fff;box-shadow:0 3px 14px #0b31552f}
.brand{gap:15px}.brand h1{font-size:clamp(21px,3.2vw,29px);letter-spacing:.01em}.brand p{color:#e0efff}
/* Logo couleur déjà présent dans le modèle Entretien CD21 */
.cd21-logo{display:flex;align-items:center;justify-content:center;flex:0 0 105px;width:105px;height:75px;border-radius:9px;background:#fff;gap:4px;padding:7px 5px;box-shadow:0 2px 9px #0a27445c}
.cd21-logo-words{color:#e5a500;font-family:Arial,Helvetica,sans-serif;line-height:.78;white-space:nowrap}
.cd21-logo-words strong{font-weight:800;font-size:28px;letter-spacing:-1.4px;display:block}
.cd21-logo-words small{display:block;margin-top:7px;font-size:6.3px;font-weight:800;letter-spacing:-.2px}
.cd21-logo-ribbon{width:19px;height:57px;display:flex;flex-direction:column;gap:2px;flex:none}
.cd21-logo-ribbon i{display:block;flex:1;background:#048dce}
.cd21-logo-ribbon i:nth-child(2){background:#e9a900;clip-path:polygon(0 0,100% 0,100% 100%,0 73%)}
.cd21-logo-ribbon i:nth-child(3){background:#e30635;clip-path:polygon(0 0,100% 20%,100% 100%,0 100%)}
/* Bandeau demandé : blanc sur bleu foncé */
.oa-section{padding-top:16px}
.oa-card{padding:0 0 16px;border:1px solid #c6d9ed;border-top:0;overflow:hidden}
.oa-title{background:#103d6d!important;color:#fff!important;font-size:18px;font-weight:850;letter-spacing:.04em;margin:0 0 16px;padding:15px 16px}
.oa-picker{max-width:none;margin-inline:16px}.oa-fieldgrid{margin-inline:16px}
.oa-filter-row{display:flex;flex-direction:column;gap:10px}
.oa-filter-row label{min-width:0}
.oa-filter-center select{display:block;width:100%;text-align:center;text-align-last:center;color:#124c82;font-weight:750;border-color:#b2cce6;background:#fafdff}
.oa-filter-center option{text-align:center}
.oa-rd-pr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.oa-rd-pr label{min-width:0}
.oa-ident-label span{color:#164d80}.oa-ident-label select{border-color:#8eb5d9;color:#174775}
.oa-filter-row label span,.oa-fieldgrid label span{color:#466682}
.oa-fieldgrid input[readonly]{background:#f1f6fc;color:#315776}
.oa-card .control:focus,.oa-section select:focus{outline:2px solid #3381c6;outline-offset:1px}
.oa-photo-box{background:#f2f7fd}.oa-cover-card,.oa-map-card{border-color:#cbddef}
.oa-photo-empty,.oa-indicator,.oa-caption,.oa-map-note,.oa-coordinates{color:#52738f}
.oa-map,.oa-map-fallback{background:#eef5fe;border-color:#c6d9ef}
.oa-map-status{color:#164d7c}.oa-map-zoom button{color:#17558d}
.oa-map-marker span{color:#1764a1}
.oa-map-credit{color:#416a8c}
.oa-offline-plan{background:#f3f8fe;border-color:#cadcf0}
.btn.primary{background:#155c98;border-color:#155c98;color:#fff}.btn{color:#1a507d;border-color:#bbcee0}
.card{border-color:#d3e0ed}.stat{background:#e8f2fd}.stat b{color:#144b7e}
.notice{background:#eaf4ff;border-color:#226eae}
/* Navigation déplacée au bas du contenu, avant les actions d'exportation */
.tabs{margin:15px 14px 25px;padding:8px;border:1px solid #c9dff1;border-radius:12px;background:#e5f0fa;box-shadow:0 2px 8px #102a3d12}
.tabs button{background:#fff;color:#1f527e;border-color:#b9d2e8;min-height:48px}
.tabs button.active{background:#134f87;color:white;border-color:#134f87}
.content{padding-bottom:28px;scroll-margin-top:115px}
.shell{padding-bottom:135px} /* espace pour ne pas cacher les onglets sous les boutons d’export fixes */
.bottom{border-color:#c0d7e9}
@media(max-width:450px){
 .brand{gap:10px}.brand h1{font-size:21px}
 .brand p{font-size:11px;line-height:1.3}
 .cd21-logo{flex-basis:79px;width:79px;height:62px;padding:5px 3px}
 .cd21-logo-words strong{font-size:21px;letter-spacing:-1px}
 .cd21-logo-words small{font-size:4.7px;margin-top:5px}
 .cd21-logo-ribbon{width:14px;height:47px;gap:1px}
 .oa-picker,.oa-fieldgrid{margin-inline:11px}
 .oa-title{font-size:16px;padding:12px 13px}
 .oa-rd-pr{gap:8px}
 .oa-rd-pr select{padding:8px 5px;font-size:16px!important}
 .tabs{margin-inline:10px}.tabs button{font-size:13px}
}

/* V2 — logo couleur à droite sur fond transparent, titre cartographique retiré */
.top .brand{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .brand-text{flex:1;min-width:0}
.top .cd21-logo{order:2;flex-shrink:0;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-left:auto}
@media(max-width:520px){.top .brand{gap:10px}.top .cd21-logo{margin-left:auto}}

/* V3 — bandeau CD21, commandes principales accessibles sur une seule ligne */
.top .brand h1{font-weight:800;letter-spacing:.02em;font-size:clamp(19px,3.2vw,31px);line-height:1.15;margin:0}
.top .brand .brand-subtitle{font-size:clamp(15px,2.5vw,23px);font-weight:770;letter-spacing:.025em;color:#fff;line-height:1.28;margin:8px 0 0}
.top .header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0 0;max-width:570px}
.top .header-action{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:43px;border:1px solid #b9d6f1;background:#fff;color:#114e85;border-radius:9px;padding:10px 13px;font-weight:760;font-size:15px;line-height:1.15;white-space:normal}
.top .header-action.reset{background:#eaf3ff}
.top .header-action:hover,.top .header-action:focus-visible{background:#d9eaff;border-color:#75a9d9}
.top .cd21-logo{background:transparent!important}
@media(max-width:520px){.top{position:relative}.top .brand h1{font-size:clamp(18px,5vw,23px)}.top .brand .brand-subtitle{font-size:clamp(14px,4.15vw,18px)}.top .header-actions{margin-top:12px;gap:7px;max-width:none}.top .header-action{min-width:0;padding:9px 5px;font-size:14px;min-height:44px}}

/* V4 — priorité visuelle au titre du PV ; sous-marque CD21 plus discrète. */
.top .brand h1{font-size:clamp(13px,1.9vw,18px);font-weight:720;letter-spacing:.075em;line-height:1.3}
.top .brand .brand-subtitle{font-size:clamp(24px,3.7vw,36px);font-weight:850;letter-spacing:.015em;line-height:1.15;margin:6px 0 0}
@media(max-width:520px){
  .top .brand h1{font-size:clamp(12px,3.5vw,15px)}
  .top .brand .brand-subtitle{font-size:clamp(21px,5.5vw,27px);line-height:1.14}
}