/* ═════════════════════════════════════════════════════════════════════════
   tag-render.css — styles partagés du template "classic".

   Source unique de vérité pour les styles produits par TagRender.buildClassic.
   Utilisé par :
     - tag.html  (page publique scannée via QR)
     - editor.html (preview live dans la sidebar)

   Toutes les règles sont scopées sous .tpl-classic pour éviter que les
   classes utilitaires (.field, .field-label, .note, etc.) bleedent sur le
   reste de l'éditeur (qui utilise .field-group pour ses propres formulaires).

   Phase 6 : seul le template "classic" est migré.
   Les autres templates (passport, boarding-pass, accordion, side-stripe)
   restent dupliqués entre tag.html et editor.html.

   Variables CSS attendues dans le contexte (définies dans editor.css ou
   tag.html `<style>`) :
     --tag-accent, --tag-accent-rgb, --border, --text, --text2, --text3,
     --link, --link-hover, --mono, --serif, --tag-font-body, --tag-font-display
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Field block ───────────────────────────────────────────────────────── */
.tpl-classic .field,
.tpl-passport .field,
.tpl-boarding-pass .field,
.tpl-accordion .field,
.tpl-side-stripe .field { margin-top: 0; }

.tpl-classic .field-label,
.tpl-passport .field-label,
.tpl-boarding-pass .field-label,
.tpl-accordion .field-label,
.tpl-side-stripe .field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tag-accent);
  margin-bottom: 4px;
  font-weight: 500;
}

/* v0.63.223 — Champs FYEO : même habillage "verrouillé" que sur le tag
   public après déverrouillage (tag.html, .fyeo-revealed), repris ici pour
   que la PREVIEW éditeur (seul contexte où _renderCustomFieldsClassic voit
   encore des champs fyeo:true — cf. tag-render.js) prévisualise fidèlement
   à quoi ressemblerait la révélation, plutôt que d'afficher la valeur en
   clair mêlée aux champs normaux. */
.tpl-classic .fyeo-revealed,
.tpl-passport .fyeo-revealed,
.tpl-boarding-pass .fyeo-revealed,
.tpl-accordion .fyeo-revealed,
.tpl-side-stripe .fyeo-revealed {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--tag-accent);
}
.fyeo-revealed .field-label::before { content: "🔒 "; }

.tpl-classic .field-value,
.tpl-passport .field-value,
.tpl-boarding-pass .field-value,
.tpl-accordion .field-value,
.tpl-side-stripe .field-value {
  padding: 5px 0 7px;
  border-bottom: 1px solid var(--border);
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}
.tpl-classic .field-value a,
.tpl-passport .field-value a,
.tpl-boarding-pass .field-value a,
.tpl-accordion .field-value a,
.tpl-side-stripe .field-value a { color: var(--link); font-weight: 500; text-decoration: none; }
.tpl-classic .field-value a:hover,
.tpl-passport .field-value a:hover,
.tpl-boarding-pass .field-value a:hover,
.tpl-accordion .field-value a:hover,
.tpl-side-stripe .field-value a:hover { color: var(--link-hover); }

/* Address block : conserve le même layout que les autres champs mais sans
   margin-top supplémentaire (lignes adresse compactes). */
.tpl-classic .address-block,
.tpl-passport .address-block,
.tpl-boarding-pass .address-block,
.tpl-accordion .address-block,
.tpl-side-stripe .address-block { margin-top: 0 !important; }
.tpl-classic .address-block .field-value,
.tpl-passport .address-block .field-value,
.tpl-boarding-pass .address-block .field-value,
.tpl-accordion .address-block .field-value,
.tpl-side-stripe .address-block .field-value {
  padding-top: 5px;
  padding-bottom: 7px;
  font-size: 15px;
  line-height: 1.45;
}
.tpl-classic .addr-line,
.tpl-passport .addr-line,
.tpl-boarding-pass .addr-line,
.tpl-accordion .addr-line,
.tpl-side-stripe .addr-line { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }

/* ── Phone lines (numéro + drapeau + icônes apps) ──────────────────────── */
.tpl-classic .phone-line,
.tpl-passport .phone-line,
.tpl-boarding-pass .phone-line,
.tpl-accordion .phone-line,
.tpl-side-stripe .phone-line { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.tpl-classic .phone-line a,
.tpl-passport .phone-line a,
.tpl-boarding-pass .phone-line a,
.tpl-accordion .phone-line a,
.tpl-side-stripe .phone-line a { color: var(--link); font-weight: 500; text-decoration: none; }

/* App icons : badges colorés WhatsApp / WeChat / Line à droite du numéro. */
.tpl-classic .app-icon,
.tpl-passport .app-icon,
.tpl-boarding-pass .app-icon,
.tpl-accordion .app-icon,
.tpl-side-stripe .app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  text-decoration: none;
  flex-shrink: 0;
}
.tpl-classic .app-icon::before,
.tpl-passport .app-icon::before,
.tpl-boarding-pass .app-icon::before,
.tpl-accordion .app-icon::before,
.tpl-side-stripe .app-icon::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: center/14px no-repeat;
}
.tpl-classic .app-icon.wa,
.tpl-passport .app-icon.wa,
.tpl-boarding-pass .app-icon.wa,
.tpl-accordion .app-icon.wa,
.tpl-side-stripe .app-icon.wa { background: #25d366; }
.tpl-classic .app-icon.wa::before,
.tpl-passport .app-icon.wa::before,
.tpl-boarding-pass .app-icon.wa::before,
.tpl-accordion .app-icon.wa::before,
.tpl-side-stripe .app-icon.wa::before { background-image: url("data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%22/%3E%3C/svg%3E"); }
.tpl-classic .app-icon.wc,
.tpl-passport .app-icon.wc,
.tpl-boarding-pass .app-icon.wc,
.tpl-accordion .app-icon.wc,
.tpl-side-stripe .app-icon.wc { background: #07c160; }
.tpl-classic .app-icon.wc::before,
.tpl-passport .app-icon.wc::before,
.tpl-boarding-pass .app-icon.wc::before,
.tpl-accordion .app-icon.wc::before,
.tpl-side-stripe .app-icon.wc::before { background-image: url("data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.691%202.188C3.891%202.188%200%205.476%200%209.53c0%202.212%201.17%204.203%203.002%205.55a.59.59%200%200%201%20.213.665l-.39%201.48c-.019.07-.048.141-.048.213%200%20.163.13.295.295.295a.326.326%200%200%200%20.167-.054l1.903-1.114a.864.864%200%200%201%20.717-.098%2010.16%2010.16%200%200%200%202.837.403c.276%200%20.543-.027.811-.05-.857-2.578.157-4.972%201.932-6.446%201.703-1.415%203.882-1.98%205.853-1.838-.576-3.583-3.895-6.348-7.601-6.348zM5.785%205.991c.642%200%201.162.529%201.162%201.18a1.17%201.17%200%200%201-1.162%201.178A1.17%201.17%200%200%201%204.623%207.17c0-.651.52-1.18%201.162-1.18zm4.843%200c.641%200%201.162.529%201.162%201.18a1.17%201.17%200%200%201-1.162%201.178%201.17%201.17%200%200%201-1.162-1.178c0-.651.52-1.18%201.162-1.18zm8.55%202.511c-4.553-.288-8.367%203.165-8.367%207.054%200%203.747%203.655%206.778%208.163%206.778.739%200%201.456-.095%202.14-.267a.752.752%200%200%201%20.625.083l1.662.973a.28.28%200%200%200%20.146.047.257.257%200%200%200%20.257-.257c0-.063-.026-.12-.042-.179l-.34-1.29a.514.514%200%200%201%20.186-.581%206.545%206.545%200%200%200%202.623-5.14c0-3.61-3.066-6.875-7.053-7.221zm-2.562%203.628c.559%200%201.012.462%201.012%201.031%200%20.57-.453%201.031-1.012%201.031a1.022%201.022%200%200%201-1.013-1.031c0-.569.454-1.031%201.013-1.031zm5.123%200c.559%200%201.012.462%201.012%201.031%200%20.57-.453%201.031-1.012%201.031a1.022%201.022%200%200%201-1.013-1.031c0-.569.453-1.031%201.013-1.031z%22/%3E%3C/svg%3E"); }
.tpl-classic .app-icon.li,
.tpl-passport .app-icon.li,
.tpl-boarding-pass .app-icon.li,
.tpl-accordion .app-icon.li,
.tpl-side-stripe .app-icon.li { background: #00b900; }
.tpl-classic .app-icon.li::before,
.tpl-passport .app-icon.li::before,
.tpl-boarding-pass .app-icon.li::before,
.tpl-accordion .app-icon.li::before,
.tpl-side-stripe .app-icon.li::before { background-image: url("data:image/svg+xml,%3Csvg%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M19.365%209.863c.349%200%20.63.285.63.631%200%20.345-.281.63-.63.63H17.61v1.125h1.755c.349%200%20.63.283.63.63%200%20.344-.281.629-.63.629h-2.386c-.345%200-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349%200%20.63.285.63.63%200%20.349-.281.63-.63.63H17.61v1.125h1.755zm-3.855%203.016c0%20.27-.174.51-.432.596-.064.021-.133.031-.199.031-.211%200-.391-.09-.51-.25l-2.443-3.317v2.94c0%20.344-.279.629-.631.629-.346%200-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195%200%20.375.104.495.254l2.462%203.33V8.108c0-.345.282-.63.63-.63.345%200%20.63.285.63.63v4.771zm-5.741%200c0%20.344-.282.629-.631.629-.345%200-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349%200%20.631.285.631.63v4.771zm-2.466.629H4.917c-.345%200-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348%200%20.63.285.63.63v4.141h1.756c.348%200%20.629.283.629.63%200%20.344-.281.629-.629.629M24%2010.314C24%204.943%2018.615.572%2012%20.572S0%204.943%200%2010.314c0%204.811%204.27%208.842%2010.035%209.608.391.082.923.258%201.058.59.12.301.079.766.038%201.08l-.164%201.02c-.045.301-.24%201.186%201.049.645%201.291-.539%206.916-4.070%209.436-6.975C23.176%2014.393%2024%2012.458%2024%2010.314%22/%3E%3C/svg%3E"); }

/* ── Note (texte d'info en bas, italic accent) ────────────────────────── */
.tpl-classic .note {
  margin-top: 6px;
  padding: 2px 12px;
  font-size: 13px;
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  font-weight: 700;
  color: var(--tag-accent);
  font-family: var(--tag-font-display, var(--serif));
  letter-spacing: .5px;
}

/* ── Emergency contact reveal (clic pour révéler les coordonnées) ───────
   v1.2.2 — Rendu en bouton avec bordure rouge (au lieu d'un simple texte
   centré), pour mieux signaler qu'il s'agit d'une cible cliquable et
   renforcer la sémantique « alerte / urgence » (rouge = danger). Padding
   généreux pour cible tactile confortable, hover qui inverse subtilement
   le rouge en background. */
.tpl-classic .ec-reveal-btn,
.tpl-passport .ec-reveal-btn,
.tpl-boarding-pass .ec-reveal-btn,
.tpl-accordion .ec-reveal-btn,
.tpl-side-stripe .ec-reveal-btn {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid var(--ec-red, #ff3b30);
  border-radius: 6px;
  background: rgba(255, 0, 0, 0.04);
  transition: background .15s, opacity .15s, transform .1s;
}
.tpl-classic .ec-reveal-btn:hover,
.tpl-passport .ec-reveal-btn:hover,
.tpl-boarding-pass .ec-reveal-btn:hover,
.tpl-accordion .ec-reveal-btn:hover,
.tpl-side-stripe .ec-reveal-btn:hover {
  background: rgba(255, 0, 0, 0.12);
}
.tpl-classic .ec-reveal-btn:active,
.tpl-passport .ec-reveal-btn:active,
.tpl-boarding-pass .ec-reveal-btn:active,
.tpl-accordion .ec-reveal-btn:active,
.tpl-side-stripe .ec-reveal-btn:active {
  transform: scale(0.98);
}
/* v0.30.2 — Chevron ▶ retiré du bouton EC (le bouton-bordure rouge introduit
   en v1.2.2 indique déjà clairement la cliquabilité). v0.30.4 — Code mort
   `.ec-chevron` complètement supprimé (cleanup). */
.tpl-classic .ec-body,
.tpl-passport .ec-body,
.tpl-boarding-pass .ec-body,
.tpl-accordion .ec-body,
.tpl-side-stripe .ec-body { display: none; }
.tpl-classic .ec-body.open,
.tpl-passport .ec-body.open,
.tpl-boarding-pass .ec-body.open,
.tpl-accordion .ec-body.open,
.tpl-side-stripe .ec-body.open {
  display: block;
  animation: tag-render-ec-unfold .22s ease forwards;
}
@keyframes tag-render-ec-unfold {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── v0.27.46 — EC popup modal (remplace le reveal inline) ──────────────── */
.ec-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ec-modal-overlay.is-open {
  display: flex;
  animation: tag-render-ec-modal-in .18s ease forwards;
}
@keyframes tag-render-ec-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ec-modal-content {
  background: #fff;
  color: #111;
  border-radius: 12px;
  padding: 22px 24px 20px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  border: 2px solid #ff0000;
}
.ec-modal-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ec-modal-close:hover { background: rgba(0, 0, 0, 0.06); color: #111; }
.ec-modal-title {
  color: #dc2626;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 18px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 0, 0, 0.25);
}
.ec-modal-body { --text: #111; --link: #0066cc; }
.ec-modal-body .phone-line a { color: #0066cc; text-decoration: none; font-weight: 500; }
/* Empêche le scroll du contenu sous la modale quand elle est ouverte. */
body.ec-modal-locked { overflow: hidden; }

/* ═════════════════════════════════════════════════════════════════════════
   TEMPLATE : PASSPORT (Phase 6.1)
   Header bandeau bleu marine + grille de champs + ligne MRZ stylisée.
   Migré depuis tag.html lignes 446-589.
   ═══════════════════════════════════════════════════════════════════════ */

.tpl-passport .pp-header-bar,
.tpl-boarding-pass .pp-header-bar {
  background: #0f1e48;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tpl-passport .pp-emblem,
.tpl-boarding-pass .pp-emblem {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--tag-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tag-accent);
  font-size: 16px;
  flex-shrink: 0;
}
.tpl-passport .pp-header-text,
.tpl-boarding-pass .pp-header-text { flex: 1; }
.tpl-passport .pp-doc-type,
.tpl-boarding-pass .pp-doc-type {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6a7faf;
  margin-bottom: 3px;
}
.tpl-passport .pp-title,
.tpl-boarding-pass .pp-title {
  font-family: var(--tag-font-display, var(--serif));
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--tag-accent);
  font-variant: small-caps;
  line-height: 1;
}
.tpl-passport .pp-flag,
.tpl-boarding-pass .pp-flag {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.tpl-passport .pp-body,
.tpl-boarding-pass .pp-body {
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tpl-passport .pp-grid,
.tpl-boarding-pass .pp-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tpl-passport .pp-field,
.tpl-boarding-pass .pp-field {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.tpl-passport .pp-field:last-child,
.tpl-boarding-pass .pp-field:last-child { border-bottom: none; }
.tpl-passport .pp-label,
.tpl-boarding-pass .pp-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tag-accent);
  margin-bottom: 4px;
  opacity: 0.85;
}
.tpl-passport .pp-value,
.tpl-boarding-pass .pp-value {
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
}
.tpl-passport .pp-value-name,
.tpl-boarding-pass .pp-value-name {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #e0e8ff;
}
.tpl-passport .pp-phone-line,
.tpl-boarding-pass .pp-phone-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.tpl-passport .pp-note,
.tpl-boarding-pass .pp-note {
  margin-top: 10px;
  padding: 8px 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tag-accent);
  border: 1px solid rgba(var(--tag-accent-rgb), 0.25);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

.tpl-passport .pp-mrz,
.tpl-boarding-pass .pp-mrz {
  background: #080f22;
  border-top: 2px solid #1a2744;
  padding: 8px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: 'Courier New', Courier, monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: #1e3a6a;
  line-height: 1.6;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.tpl-passport .pp-mrz-line,
.tpl-boarding-pass .pp-mrz-line { overflow: hidden; text-overflow: clip; }

/* ═════════════════════════════════════════════════════════════════════════
   TEMPLATE : BOARDING PASS (Phase 6.2)
   Stub d'embarquement avec airline label + nom + numéro de séquence en haut,
   grille de cellules, strip de séparation, note + EC en bas.
   Migré depuis tag.html lignes 594-751.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header HTML caché : boarding-pass remplace le titre par .bp-airline + .bp-name. */
.tpl-boarding-pass .header,
.tpl-accordion .header,
.tpl-side-stripe .header { display: none; }
.tpl-boarding-pass .content,
.tpl-accordion .content,
.tpl-side-stripe .content { padding: 0; }

.tpl-boarding-pass .bp-wrap {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
}

.tpl-boarding-pass .bp-top {
  padding: 14px 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 2px dashed rgba(var(--tag-accent-rgb), 0.35);
}

.tpl-boarding-pass .bp-top-left { flex: 1; min-width: 0; }

.tpl-boarding-pass .bp-airline {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 5px;
}

.tpl-boarding-pass .bp-name {
  font-family: var(--tag-font-display, var(--serif));
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
  color: var(--tag-accent);
  font-variant: small-caps;
  letter-spacing: 1px;
  line-height: 1.1;
  word-break: break-word;
}

.tpl-boarding-pass .bp-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.tpl-boarding-pass .bp-seq-label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text2);
}

.tpl-boarding-pass .bp-seq {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  color: rgba(var(--tag-accent-rgb), 0.18);
  line-height: 1;
  letter-spacing: -1px;
}

.tpl-boarding-pass .bp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.tpl-boarding-pass .bp-cell {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border);
}

.tpl-boarding-pass .bp-cell:nth-last-child(-n+2) { border-bottom: none; }

.tpl-boarding-pass .bp-cell-full {
  grid-column: 1 / -1;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border);
}

.tpl-boarding-pass .bp-cell-full:last-child { border-bottom: none; }

.tpl-boarding-pass .bp-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tag-accent);
  margin-bottom: 3px;
  opacity: 0.8;
}

.tpl-boarding-pass .bp-value {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.tpl-boarding-pass .bp-value a { color: var(--link); text-decoration: none; font-weight: 500; }

.tpl-boarding-pass .bp-phone-line {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.tpl-boarding-pass .bp-strip {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--tag-accent) 0px,
    var(--tag-accent) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 0.5;
}

.tpl-boarding-pass .bp-note {
  padding: 8px 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  text-align: center;
  line-height: 1.6;
}

/* ═════════════════════════════════════════════════════════════════════════
   TEMPLATE : ACCORDION (Phase 6.3)
   Look "billet style ancien" : header avec label + titre cursif, puis
   suite de lignes "key | value" séparées par des bordures, note finale
   centrée italique.
   Migré depuis tag.html lignes 756-828.
   ═══════════════════════════════════════════════════════════════════════ */

.tpl-accordion .ac-wrap {
  display: flex;
  flex-direction: column;
}

.tpl-accordion .ac-head {
  padding: 16px 20px 12px;
  border-bottom: 2px solid var(--tag-accent);
}

.tpl-accordion .ac-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 4px;
}

.tpl-accordion .ac-title {
  font-family: var(--tag-font-display, var(--serif));
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--tag-accent);
  font-variant: small-caps;
  letter-spacing: 1px;
  line-height: 1.1;
}

.tpl-accordion .ac-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.tpl-accordion .ac-row:last-of-type {
  border-bottom: none;
}

.tpl-accordion .ac-key {
  width: 80px;
  flex-shrink: 0;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tag-accent);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.tpl-accordion .ac-val {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.tpl-accordion .ac-val a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}

.tpl-accordion .ac-phone-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tpl-accordion .ac-note {
  padding: 10px 20px;
  font-family: var(--tag-font-display, var(--serif));
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  color: var(--tag-accent);
  text-align: center;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  font-variant-caps: small-caps;
  letter-spacing: 0.5px;
}

/* ═════════════════════════════════════════════════════════════════════════
   TEMPLATE : SIDE STRIPE (Phase 6.4)
   Bandeau vertical accent à gauche (titre rotated -90°), corps à droite avec
   nom proéminent + liste à puces dot/label/value, note + EC en bas.
   Migré depuis tag.html lignes 830-934.
   ═══════════════════════════════════════════════════════════════════════ */

.tpl-side-stripe .ss-wrap {
  display: flex;
  flex-direction: row;
  min-height: 200px;
}

.tpl-side-stripe .ss-stripe {
  width: 32px;
  background: var(--tag-accent);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.tpl-side-stripe .ss-stripe-title {
  font-family: var(--tag-font-display, var(--serif));
  font-style: italic;
  font-size: 25px;
  font-weight: 600;
  color: var(--bg);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  letter-spacing: 1.5px;
  font-variant: small-caps;
}

.tpl-side-stripe .ss-body {
  flex: 1;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tpl-side-stripe .ss-name {
  font-family: var(--tag-font-display, var(--serif));
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-variant: small-caps;
}

.tpl-side-stripe .ss-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tpl-side-stripe .ss-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.tpl-side-stripe .ss-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tag-accent);
  flex-shrink: 0;
  margin-top: 5px;
}

.tpl-side-stripe .ss-item-body {
  flex: 1;
  min-width: 0;
}

.tpl-side-stripe .ss-item-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 2px;
}

.tpl-side-stripe .ss-item-val {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.tpl-side-stripe .ss-item-val a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}

.tpl-side-stripe .ss-phone-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.tpl-side-stripe .ss-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tag-accent);
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────────────────────
   v0.21.0 — .render-error
   Affichage quand tag-render.js n'a pas pu se charger (réseau, CSP, cache
   cassé). Mutualisé entre editor.html (preview) et tag.html (page publique).
   ────────────────────────────────────────────────────────────────────────── */
.render-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  padding: 32px 24px;
  margin: 16px auto;
  max-width: 360px;
  background: rgba(217, 119, 6, 0.08);              /* accent amber 8% */
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 12px;
  color: var(--text, #1a1a1a);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.render-error-icon {
  font-size: 32px;
  line-height: 1;
  color: rgb(217, 119, 6);
}
.render-error-msg {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  max-width: 280px;
}
/* Dark mode (editor preview) */
@media (prefers-color-scheme: dark) {
  .render-error {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: var(--text, #e5e5e5);
  }
  .render-error-icon { color: rgb(245, 158, 11); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mode Urgence (ICE) — rendu unique « EN CAS D'URGENCE »
   ───────────────────────────────────────────────────────────────────────── */
.emergency-wrap {
  padding: 4px 0;
}
/* v0.63.x — Carte blanche du mode Urgence (même style que la fiche popup
   « EN CAS D'URGENCE » : fond blanc, bordure rouge, coins arrondis). Affichée
   d'emblée comme contenu principal du tag. Force le texte foncé + liens bleus
   à l'intérieur (fond clair fixe, indépendant du thème). */
.emergency-card {
  background: #fff;
  color: #111;
  /* v0.63.204 — Lighthouse a3 signalé un contraste insuffisant (3.54:1) sur
     .emg-label : --ec-red hérite du thème AMBIANT de l'app (#ff3b30, pensé
     pour fond sombre, 3.54:1 sur blanc — insuffisant), alors que cette carte
     a un fond blanc FIXE, indépendant du thème (cf. commentaire ci-dessus,
     déjà appliqué à color/liens mais pas à --ec-red). On force ici la valeur
     "thème clair" (#d70015, 5.4:1 sur blanc — voir css/editor/03-palettes.css)
     pour les 3 usages de --ec-red dans cette carte (bordure, icône, labels). */
  --ec-red: #d70015;
  border-radius: 12px;
  padding: 22px 24px 20px;
  border: 2px solid #ff0000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  --text: #111;
  --text2: #6b7280;
  --link: #0066cc;
}
.emergency-card .phone-line a { color: #0066cc; text-decoration: none; font-weight: 500; }
.emergency-title {
  font-family: var(--tag-font-display, var(--mono));
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ec-red, #ff3b30);
  padding: 4px 8px 12px;
  line-height: 1.15;
}
/* Trait rouge sous le titre « EN CAS D'URGENCE ». */
.emergency-title {
  border-bottom: 1px solid rgba(255, 0, 0, 0.25);
  margin-bottom: 16px;
}
/* v0.63.x — Champs de la carte Urgence (classes dédiées emg-*). */
/* Point 1 : Nom en gros. Pas de filet sous le Nom. */
.emergency-body .emg-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  border: none;
}
/* Point 5 : Âge 20% / Nationalité 80%.
   Point 2 : l'espace sous la ligne Âge/Nationalité doit être le même que celui
   entre Langues parlées et Informations utiles (~14px). Les emg-field DANS la
   row2 ne portent PAS de margin (sinon cumul row2 + field = double espace) :
   c'est la row2 qui gère l'espacement. */
.emergency-body .emg-row2 {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.emergency-body .emg-row2 .emg-field { margin-bottom: 0; }
.emergency-body .emg-field { margin-bottom: 14px; }
/* Points 4 + 6 : libellés ROUGES, même taille que « Contact à prévenir » (10px). */
.emergency-body .emg-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ec-red, #ff3b30);
  font-weight: 700;
  /* Point 3 : espace réduit entre label et valeur. */
  margin-bottom: 1px;
}
/* Point 7 : valeurs à la même taille que le nom du contact (15px). */
.emergency-body .emg-value {
  font-size: 15px;
  color: var(--text);
  line-height: 1.35;
}