/* ═════════════════════════════════════════════════════════════════════════
   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;
}

.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 { 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) ─────── */
.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;
  transition: opacity .2s;
  padding: 2px 0;
}
.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 { opacity: .75; }
.tpl-classic .ec-chevron,
.tpl-passport .ec-chevron,
.tpl-boarding-pass .ec-chevron,
.tpl-accordion .ec-chevron,
.tpl-side-stripe .ec-chevron {
  font-size: 10px;
  display: inline-block;
  transition: transform .28s ease;
  color: var(--text3);
}
.tpl-classic .ec-reveal-btn.open .ec-chevron,
.tpl-passport .ec-reveal-btn.open .ec-chevron,
.tpl-boarding-pass .ec-reveal-btn.open .ec-chevron,
.tpl-accordion .ec-reveal-btn.open .ec-chevron,
.tpl-side-stripe .ec-reveal-btn.open .ec-chevron { transform: rotate(90deg); }
.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); }
}

/* ═════════════════════════════════════════════════════════════════════════
   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;
}