/* Pallier — app/consignes.css — V109 : la carte de sécurité (maquette operations/carte-securite-maquettes-2026-10-07/,
   couleur A « abricot doux », validée par HB le 7 octobre 2026). Partagée par index.html et suivi.html (le suivi n'a pas
   --ciel : les valeurs de repli sont celles de la charte). Verrous [hidden] (règle d'atelier n° 2) : la carte, l'icône,
   les numéros et le résumé du pli sont en flex. */
.secu{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;padding:12px 13px 13px;background:var(--abricot-doux,#FCEBE1);border:2.5px solid var(--foret,#12312A);border-radius:18px;text-align:left;color:var(--foret,#12312A)}
.secu.pratique{background:var(--blanc,#fff)}
.secu .sc-ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--abricot,#F3A57F);border:2px solid var(--foret,#12312A);display:flex;align-items:center;justify-content:center;margin-top:1px;color:var(--foret,#12312A)}
.secu.pratique .sc-ic{background:var(--ciel,#AEDCE8)}
.secu .sc-ic .ico{width:16px;height:16px;stroke-width:2.6}
.secu .sc-t{flex:1;min-width:0}
.secu .sc-txt{margin:0;font-size:.86rem;font-weight:600;line-height:1.4}
.secu .sc-txt b{font-weight:900}
.secu .sc-tels{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.secu .sc-tel{display:inline-flex;align-items:center;gap:9px;background:var(--blanc,#fff);border:2.5px solid var(--foret,#12312A);border-radius:999px;padding:6px 15px 6px 12px;box-shadow:0 3px 0 var(--foret,#12312A);color:var(--foret,#12312A);text-decoration:none;font-weight:900;font-size:1rem;line-height:1.15;min-height:46px}
.secu .sc-tel .ico{width:18px;height:18px;stroke-width:2.5}
.secu .sc-tel small{display:block;font-size:.7rem;font-weight:700;color:var(--foret-doux,#41625A);letter-spacing:0}
.secu .sc-co{margin:11px 0 0;padding:9px 0 0;border-top:2px dashed rgba(18,49,42,.28);font-size:.82rem;font-weight:600;line-height:1.4}
.secu a.n{color:var(--foret,#12312A);font-weight:900;text-decoration:underline;text-underline-offset:2px}
/* la forme courte (après la question qui l'a fait apparaître) : la phrase + le numéro ; le reste plié */
.secu details>summary{list-style:none;cursor:pointer;font-size:.8rem;font-weight:800;min-height:36px;display:flex;align-items:center;gap:5px;margin-top:4px;color:var(--foret,#12312A)}
.secu details>summary span{text-decoration:underline;text-underline-offset:2px}
.secu details>summary::-webkit-details-marker{display:none}
.secu details>summary::after{content:'▾';font-size:.8rem}
.secu details[open]>summary::after{content:'▴'}
.secu .sc-plie{margin-top:2px}
/* V128 — « bouché » en une ligne (après la question où la carte est apparue) : l'icône à la hauteur du texte, la carte plus basse */
.secu.pratique.court{align-items:center;padding:6px 13px}
.secu.pratique.court .sc-ic{width:26px;height:26px;margin-top:0}
.secu.pratique.court .sc-ic .ico{width:14px;height:14px}
/* le suivi : la carte sous l'en-tête, détachée du bloc qui suit */
#suivi-consigne{margin:0 0 16px}
#suivi-consigne .secu{margin-top:2px}
#fin-consigne[hidden],#suivi-consigne[hidden],.secu[hidden],.secu .sc-ic[hidden],.secu .sc-tels[hidden],.secu .sc-tel[hidden],.secu details>summary[hidden]{display:none!important}
/* V118 (12/10, HB : « A ») — « Vous ne trouvez pas le robinet ? » (htmlRobinet, consignes.js) : un pli fermé, dans le style de sa page
   (.pli dans le tunnel, pallier.css ; .plie dans le suivi, suivi.html), quatre phrases une par ligne, le 18 et le 112 en liens d'appel
   dont la zone de toucher monte à 44 px sans rien déplacer. Posé sous la carte, hors de ce que rendVivant réécrit toutes les 30 s :
   ouvert, il le reste. Aucune règle flex ni grid ici ; le verrou [hidden] à tout hasard (règle d'atelier n° 2). */
#fin-robinet-zone details.pli{margin:14px 0 0}
.robinet .rb-corps{padding:10px 16px 14px;text-align:left}
.robinet .rb-corps p{margin:0 0 8px;font-size:.88rem;font-weight:600;line-height:1.45;color:var(--foret-doux,#41625A)}
.robinet .rb-corps p:last-child{margin-bottom:0}
.robinet .rb-corps a.n{position:relative;color:var(--foret,#12312A);font-weight:900;text-decoration:underline;text-underline-offset:2px}
.robinet .rb-corps a.n::before{content:'';position:absolute;inset:-14px -16px}   /* V119 (F4) : 44 px de large aussi (30 et 35 avant) ; le 18 et le 112 restent séparés */
details.plie.robinet{margin-bottom:16px}   /* le suivi : la ligne « Plomberie · Houilles » suit le pli, qui garde son ombre à 4 px de lui */
details.plie.robinet .rb-corps{padding:0 14px 14px}
details.robinet summary{min-height:44px;box-sizing:border-box}
/* V119 (F3) — le focus clavier du titre : l'anneau abricot de 3 px de « Voir ma demande » (suivi), dans le tunnel comme au suivi */
#fin-robinet summary:focus-visible,#suivi-robinet summary:focus-visible,details.robinet summary:focus-visible{outline:3px solid var(--abricot,#F3A57F);outline-offset:2px}   /* le titre se touche : 44 px au moins (le pli du tunnel en faisait 43,3) */
.robinet[hidden],#fin-robinet-zone[hidden]{display:none!important}