/* ── GUIDE CAPTURE D'ÉCRAN (25/10/2026) ───────────────────────────────────
   Carte « Capture d'écran » adaptée au téléphone détecté, bandeau d'aide et
   fenêtre d'aide en 3 étapes. Chargé par l'accueil et /verifier-un-message.
   Voir NOTE-GUIDE-CAPTURE.md. */

/* Carte de l'accueil : dessin du téléphone détecté */
.cmcap-card{display:flex;flex-direction:column;align-items:center;gap:4px}
.cmcap-card svg{display:block;height:76px;width:auto}
.cmcap-pill{display:inline-flex;align-items:center;gap:4px;background:#E8F7EE;color:#14532D;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:800;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
[data-theme=dark] .cmcap-pill{background:rgba(34,197,94,.18);color:#86EFAC}
@keyframes cmcapPulse{0%,100%{opacity:1}50%{opacity:.35}}
.cmcap-hl{animation:cmcapPulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.cmcap-hl{animation:none}}

/* Ordinateur : touches du clavier dans la carte */
.cmcap-keys{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px}
.cmcap-key{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;border-radius:9px;background:#FFFFFF;border:1.5px solid #C9C7F2;border-bottom-width:4px;color:#12113A;font-weight:800;font-size:14px;line-height:1;box-sizing:border-box}
.cmcap-key.hl{border-color:#EA580C;color:#9A3412;background:#FFF7ED}
.cmcap-plus{font-weight:800;color:#6B7280;font-size:14px}
[data-theme=dark] .cmcap-key{background:#1B1B3A;border-color:#3D3B7A;color:#FFFFFF}
[data-theme=dark] .cmcap-key.hl{background:#3B1D0B;border-color:#F97316;color:#FFEDD5}

/* Bandeau « Comment faire une capture d'écran ? » */
.cmcap-band{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:56px;margin:10px 0 0;padding:8px 14px;border-radius:16px;background:#FFFFFF;border:2px solid #EA580C;color:#12113A;font-family:inherit;font-size:16px;font-weight:800;line-height:1.25;text-align:left;cursor:pointer}
.cmcap-band:hover{background:#FFF7ED}
.cmcap-band:focus-visible{outline:3px solid #5856D6;outline-offset:2px}
.cmcap-band-i{flex:0 0 36px;height:36px;border-radius:18px;background:#EA580C;display:flex;align-items:center;justify-content:center}
[data-theme=dark] .cmcap-band{background:#1B1B3A;color:#FFFFFF;border-color:#F97316}
#cmd .cmcap-band{min-height:48px;font-size:15px;margin-top:12px}

/* Fenêtre d'aide */
.cmcap{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif}
.cmcap[hidden]{display:none}
.cmcap-scrim{position:absolute;inset:0;background:rgba(18,17,58,.62)}
.cmcap-sheet{position:relative;width:100%;max-width:560px;max-height:94vh;max-height:94dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;background:#FFFFFF;color:#12113A;border-radius:28px 28px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:cmcapUp .25s ease-out}
@keyframes cmcapUp{from{transform:translateY(40px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cmcap-sheet{animation:none}}
@media (min-width:700px){.cmcap{align-items:center}.cmcap-sheet{border-radius:24px;max-height:90vh;padding:18px 28px 28px}}
.cmcap-grab{align-self:center;width:44px;height:5px;border-radius:3px;background:#D1D5DB}
@media (min-width:700px){.cmcap-grab{display:none}}
.cmcap-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmcap-dev{display:inline-flex;align-items:center;gap:8px;background:#E8F7EE;color:#14532D;border-radius:999px;padding:7px 14px;font-size:16px;font-weight:800;min-width:0}
.cmcap-dev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmcap-x{flex:0 0 48px;width:48px;height:48px;border-radius:24px;border:0;background:#F3F4F6;color:#12113A;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cmcap-x:focus-visible,.cmcap-btn:focus-visible,.cmcap-link:focus-visible,.cmcap-choice:focus-visible{outline:3px solid #5856D6;outline-offset:2px}
.cmcap-steps{display:flex;gap:6px}
.cmcap-steps i{width:28px;height:8px;border-radius:4px;background:#E5E7EB}
.cmcap-steps i.on{background:#5856D6}
.cmcap h2{margin:0;font-size:28px;line-height:1.15;font-weight:800;color:#12113A;letter-spacing:-.3px}
.cmcap-say{font-size:21px;font-weight:700;text-align:center;line-height:1.35;margin:0}
.cmcap-p{font-size:18px;line-height:1.5;margin:0;color:#374151}
.cmcap-small{font-size:16px;line-height:1.45;margin:0;color:#4B5563;text-align:center}
.cmcap-art{display:flex;justify-content:center}
.cmcap-art svg{max-width:100%;height:auto}
.cmcap-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cmcap-legend li{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;line-height:1.35}
.cmcap-legend b{flex:0 0 32px;height:32px;border-radius:16px;background:#EA580C;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:17px}
.cmcap-tip{background:#FFF1E6;border-radius:16px;padding:14px 16px;font-size:17px;line-height:1.45;color:#12113A}
.cmcap-quote{background:#F4F4FB;border-radius:22px;padding:20px 16px;text-align:center;font-size:25px;font-weight:800;line-height:1.25;color:#12113A}
.cmcap-mic{width:96px;height:96px;border-radius:48px;background:#5856D6;display:flex;align-items:center;justify-content:center;align-self:center}
.cmcap-acts{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.cmcap-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmcap-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 16px;border-radius:18px;border:2px solid #5856D6;background:#5856D6;color:#FFFFFF;font-family:inherit;font-size:21px;font-weight:800;text-decoration:none;cursor:pointer;box-sizing:border-box;text-align:center}
.cmcap-btn.sec{background:#FFFFFF;color:#4341B8}
.cmcap-btn.big{min-height:84px;font-size:23px;border-radius:22px}
.cmcap-link{align-self:center;background:none;border:0;padding:10px;font-family:inherit;font-size:17px;font-weight:700;color:#4341B8;text-decoration:underline;cursor:pointer}
.cmcap-ok{font-size:24px;font-weight:800;text-align:center;color:#15803D}
.cmcap-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cmcap-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:16px;border:2px solid #DDDCF5;background:#FFFFFF;font-family:inherit;font-size:16px;font-weight:700;color:#12113A;cursor:pointer;min-height:64px;justify-content:center;text-align:center}
.cmcap-choice svg{height:56px;width:auto}
.cmcap-share{display:inline-flex;width:38px;height:38px;border-radius:19px;background:#EA580C;align-items:center;justify-content:center;vertical-align:middle}
.cmcap-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:21px;font-weight:700}
.cmcap-keys.big .cmcap-key{min-width:56px;height:56px;font-size:20px;border-radius:12px}
.cmcap-keys.big .cmcap-plus{font-size:22px}
.cmcap-ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:cc}
.cmcap-ol li{counter-increment:cc;position:relative;padding-left:44px;font-size:18px;line-height:1.45;color:#12113A}
.cmcap-ol li::before{content:counter(cc);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:16px;background:#5856D6;color:#FFFFFF;font-weight:800;display:flex;align-items:center;justify-content:center}
html.cmcap-open,html.cmcap-open body{overflow:hidden}

/* Fenêtre d'aide en mode sombre */
[data-theme=dark] .cmcap-sheet{background:#12113A;color:#FFFFFF}
[data-theme=dark] .cmcap h2,[data-theme=dark] .cmcap-quote,[data-theme=dark] .cmcap-tip,[data-theme=dark] .cmcap-legend li,[data-theme=dark] .cmcap-ol li,[data-theme=dark] .cmcap-choice{color:#FFFFFF}
[data-theme=dark] .cmcap-p,[data-theme=dark] .cmcap-small{color:#D1D5DB}
[data-theme=dark] .cmcap-quote{background:#1B1B3A}
[data-theme=dark] .cmcap-tip{background:#3B1D0B}
[data-theme=dark] .cmcap-x{background:#1B1B3A;color:#FFFFFF}
[data-theme=dark] .cmcap-btn.sec{background:#12113A;color:#C7C6FF;border-color:#8B89F0}
[data-theme=dark] .cmcap-link{color:#C7C6FF}
[data-theme=dark] .cmcap-choice{background:#1B1B3A;border-color:#3D3B7A}
[data-theme=dark] .cmcap-dev{background:rgba(34,197,94,.18);color:#86EFAC}
[data-theme=dark] .cmcap-ok{color:#4ADE80}
[data-theme=dark] .cmcap-steps i{background:#3D3B7A}
[data-theme=dark] .cmcap-steps i.on{background:#8B89F0}

/* Carte mobile : « Capture d'écran / de votre message » (25/10/2026) */
#cmq .cmq-tt-sub{display:block;font-size:12px!important;font-weight:600!important;line-height:1.2;opacity:.85;margin-top:2px}
/* Les cartes s'allongent au lieu de faire chevaucher titre, dessin et pastille */
#cmq .cmq-tile{height:auto!important;min-height:196px!important}
#cmq label[for="cmq-file"] .cmq-vis{min-height:100px}

/* Lien « Comment faire ? » dans la carte Capture d'écran (remplace le bandeau, 25/10/2026) */
.cmcap-how{display:block;width:100%;margin:0;padding:6px 2px 0;background:none;border:0;font-family:inherit;font-size:13px;font-weight:700;line-height:1.2;color:#4341B8;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cmcap-how:focus-visible{outline:3px solid #5856D6;outline-offset:2px;border-radius:6px}
[data-theme=dark] .cmcap-how{color:#C7C6FF}
#cmq label.cmcap-hascard{grid-template-rows:auto minmax(0,1fr) 32px auto!important}
#cmq .cmcap-how{padding-top:0;min-height:24px}
#cmd .cmcap-how{font-size:14px;padding-top:8px;text-align:center}
/* Plusieurs captures : bouton « Ajouter la suite du message » sous le verdict */
.cmcap-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;min-height:56px;margin:12px 0 0;padding:10px 16px;border-radius:16px;border:2px solid #5856D6;background:#FFFFFF;color:#4341B8;font-family:inherit;font-size:17px;font-weight:800;text-align:center;cursor:pointer}
.cmcap-more small{display:block;font-size:13px;font-weight:600;color:#4B5563}
[data-theme=dark] .cmcap-more{background:#12113A;color:#C7C6FF;border-color:#8B89F0}
[data-theme=dark] .cmcap-more small{color:#D1D5DB}
.cmcap-count{display:inline-block;margin-top:4px;font-size:13px;font-weight:700;color:#4B5563}
#cmd .cmd-b{height:auto!important;min-height:256px}
#cmd label.cmcap-hascard{grid-template-rows:auto minmax(64px,1fr) 40px auto!important}
#cmd .cmcap-how{padding-top:0}

/* Zone de collage du guide ordinateur (25/10/2026, -10) */
.cmcap-paste{width:100%;box-sizing:border-box;min-height:84px;border:2px dashed #5856D6;border-radius:14px;padding:12px 14px;font:inherit;font-size:17px;line-height:1.45;color:#12113A;background:#F7F7FE;resize:vertical}
.cmcap-paste:focus{outline:3px solid rgba(88,86,214,.35);outline-offset:2px;border-style:solid}
[data-theme=dark] .cmcap-paste{background:#1B1B3A;color:#FFFFFF;border-color:#8B89F0}
.cmcap-tip .cmcap-keys{display:flex;margin:8px 0}
.cmcap-ol li > .cmcap-keys:not(.big){display:inline-flex;vertical-align:middle;margin:0 0 0 6px;width:auto}

/* ── Accueil mobile (25/10/2026, -13, choix de Bill) : 2 blocs puis 2 lignes ──
   Blocs : même largeur, même hauteur, titres titre + sous-titre, boutons de
   40 px alignés, ligne « Comment faire ? » alignée.
   Lignes WhatsApp et Code : même gabarit (pastille 44 px, titre + sous-titre,
   bouton de 96 x 40 px aligné à droite, même largeur que les blocs). */
#cmq .cmq-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;align-items:stretch}
#cmq .cmq-tile{height:auto!important;min-height:0!important;padding:14px 10px 10px!important;gap:8px!important;grid-template-rows:auto minmax(84px,1fr) 40px 24px!important}
#cmq label.cmcap-hascard,#cmq .cmq-tile.cmcap-hascard{grid-template-rows:auto minmax(84px,1fr) 40px 24px!important}
#cmq .cmq-btn{height:40px!important}
#cmq .cmq-tt{line-height:1.2}
#cmq .cmq-tt-sub{display:block;font-size:12px!important;font-weight:600!important;line-height:1.2;opacity:.85;margin-top:2px}
#cmq label[for="cmq-file"] .cmq-vis{min-height:84px!important}
#cmq .cmq-tile.txt .cmq-field{height:100%;min-height:84px}
#cmq .cmcap-how{min-height:24px;padding:0!important;display:flex;align-items:center;justify-content:center}
/* Pastille du modèle : petite, à droite du téléphone */
#cmq .cmcap-card{flex-direction:row!important;align-items:center;justify-content:center;gap:0!important}
#cmq .cmcap-card svg{height:72px;margin:0 -8px 0 -2px}
#cmq .cmcap-pill{font-size:9.5px!important;padding:2px 6px;align-self:center}
/* Lignes */
#cmq .cmq-row{margin-top:10px;width:100%;box-sizing:border-box;min-height:68px;display:grid;grid-template-columns:44px minmax(0,1fr) 96px;align-items:center;gap:12px;border-radius:14px;padding:12px 10px 12px 12px;text-align:left;text-decoration:none;font-family:inherit;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
#cmq .cmq-row.wa{background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.40)}
#cmq .cmq-row.code{background:rgba(167,139,250,.10);border:1px solid rgba(167,139,250,.45)}
#cmq .cmq-row-i{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center}
#cmq .cmq-row-i.wa{background:#25D366;color:#fff;font-size:26px}
#cmq .cmq-row-i.code{background:rgba(167,139,250,.18)}
#cmq .cmq-row-i .cm-codetag{font-size:9.5px!important;padding:3px 4px;letter-spacing:.5px}
#cmq .cmq-row-t{display:flex;flex-direction:column;gap:2px;min-width:0}
#cmq .cmq-row-t b{font-size:14.5px;font-weight:800;line-height:1.2}
#cmq .cmq-row-t span{font-size:12.5px;font-weight:600;line-height:1.25;opacity:.85}
#cmq .cmq-row .cmq-btn{width:96px;margin:0}
#cmq .cmq-btn.code{background:#7C6CF0}
#cmq .cmq-row:active{transform:scale(.98)}
html[data-theme=light] #cmq .cmq-row{color:#141320}
html[data-theme=light] #cmq .cmq-row.wa{background:#F0FDF4;border-color:#A7E9BE}
html[data-theme=light] #cmq .cmq-row.code{background:#FFFFFF;border-color:#DCCBF8}
html[data-theme=light] #cmq .cmq-row-i.code{background:#F3EEFF}
html[data-theme=light] #cmq .cmq-btn.code{background:linear-gradient(90deg,#7C6CF0 0%,#9B7BF0 100%)!important}
#cmq .cmq-row{min-height:78px}
#cmq .cmq-row-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){#cmq .cmq-row{grid-template-columns:40px minmax(0,1fr) 80px;gap:10px}#cmq .cmq-row .cmq-btn{width:80px}#cmq .cmq-row-i{width:40px;height:40px}#cmq .cmq-row-t b{font-size:14px}}

/* Transfert d'email (-14), même gabarit que les autres lignes */
#cmq .cmq-row.email{background:rgba(88,86,214,.12);border:1px solid rgba(147,145,255,.45)}
#cmq .cmq-row-i.email{background:#5856D6;color:#fff;font-size:24px}
#cmq .cmq-row[hidden],#cmd .cmd-email[hidden],[data-email-tip][hidden]{display:none!important}
#cmq .cmq-email-tip{margin:8px 2px 0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.88)}
html[data-theme=light] #cmq .cmq-row.email{background:#F4F3FF;border-color:#CFCDF6}
html[data-theme=light] #cmq .cmq-email-tip{color:#141320}
#cmd .cmd-email{box-sizing:border-box;width:100%;min-height:84px;display:grid;grid-template-columns:44px minmax(0,1fr) 170px;align-items:center;gap:14px;border-radius:16px;background:rgba(88,86,214,.12);border:1px solid rgba(147,145,255,.45);padding:14px 16px;margin-bottom:12px}
#cmd .cmd-email-i{width:44px;height:44px;border-radius:22px;background:#5856D6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}
#cmd .cmd-email-b{background:#5856D6}
html[data-theme=light] #cmd .cmd-email{background:#F4F3FF;border-color:#CFCDF6}
html[data-theme=light] #cmd .cmd-email .cmd-code-t b{color:#141320}
html[data-theme=light] #cmd .cmd-email .cmd-code-t span{color:#5B5A75}