/* ═══════════════════════════════════════════════════════════════
   EXQ-FRAME — CADRE EXQ NORMÉ — V1 STANDARD UNIQUEMENT
   Statut : CODED_COMPONENT (pas encore DEPLOYED).

   Sources reproduites à l'identique :
   - _WORK/exq_card_system/candidates/exq_card_f3_life_timeline_footer_v4.html
       → .card, .cb, .ct, .cf, .rx, .ri, .dl, .dl-loss, .dl-reste,
         .dl-gain, .dbg, .tlb, .tlr, .tlg, .tlk, .tll, .tlc
   - _WORK/exq_card_system/candidates/exq_card_f3_header_author_states_v1.html
       → header 38px (variante membre + De passage), zone actions
   Header height = 38px (Q-CARD-01 tranchée — pas le .ch:36px de footer_v4).
   ColorFrame / Crazy Color / Chaîne / Partenaire = hors V1.
   Aucun style inventé. Aucune fusion avec d'autres pages.
═══════════════════════════════════════════════════════════════ */

/* Variables locales au composant (valeurs des sources). Non globales. */
.exq-frame-scope {
  --exqf-ink: #1A1816;
  --exqf-red: #C1121F;
  --exqf-green: #16A34A;
  --exqf-surface: #FDFCF9;
  --exqf-bd: #D8D3C8;
}

/* box-sizing auto-suffisant (les planches sources avaient un * box-sizing global) :
   garantit 240×340 outer / header 38px quel que soit le CSS de la page hôte. */
.exq-frame.card,
.exq-frame.card *,
.exq-frame.chain,
.exq-frame.chain *,
.exq-frame.partner,
.exq-frame.partner * {
  box-sizing: border-box;
}

/* ── CARD (footer_v4 L35-41) — scope porté par l'article (.exq-frame.card) ── */
.exq-frame.card {
  width: 240px; height: 340px;
  border: 6px solid #1A1816; border-radius: 7px;
  background: #FDFCF9;
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}

/* ── HEADER 38px (header_states hdrMembre/hdrDePassage) ──────────── */
.exq-frame .ch {
  height: 38px; min-height: 38px;
  padding: 0 8px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid #D8D3C8;
  overflow: hidden;
}
/* Avatar CARRÉ (coins légèrement arrondis), jamais rond — DÉCISION NICOLAS 2026-06-08 (note 55). */
.exq-frame .av {
  width: 22px; height: 22px; border-radius: 3px;
  background: #1A1816; flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 900;
}
.exq-frame .av img,
.exq-frame .av video { width: 100%; height: 100%; object-fit: cover; }
.exq-frame .ps {
  font-size: 12px; font-weight: 600; color: #1A1816;
  min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* De passage : libellé seul (header_states hdrDePassage L158-160) */
.exq-frame .ch.depassage .ps-passage {
  font-size: 12px; font-weight: 600; color: #6B6560; font-style: italic;
}
/* Zone actions droite (header_states actionsZone L137-144) */
.exq-frame .ch-actions {
  margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.exq-frame .ch-vi {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
.exq-frame .ch-psl {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}

/* ── BODY (footer_v4 L60-68) ─────────────────────────────────────── */
.exq-frame .cb {
  flex: 1; display: flex; align-items: center;
  padding: 8px 10px; overflow: hidden;
}
.exq-frame .ct {
  font-weight: 900; font-style: italic;
  font-size: 16.5px; line-height: 1.38;
  color: #1A1816; word-break: break-word;
}

/* ── FOOTER (footer_v4 L71-114) ──────────────────────────────────── */
.exq-frame .cf {
  border-top: 1px solid #D8D3C8;
  padding: 5px 8px 7px;
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}

/* Réactions / scoring row */
.exq-frame .rx { display: flex; justify-content: space-between; align-items: center; }
.exq-frame .ri {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: #1A1816; line-height: 1;
}
.exq-frame .ri .em { font-size: 20px; line-height: 1; }

/* Durée + timeline */
.exq-frame .dtu { display: flex; flex-direction: column; gap: 2px; }
.exq-frame .dl {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  text-align: center; font-size: 10.5px; font-weight: 700;
  line-height: 1.25; color: #1A1816;
}
.exq-frame .dl-loss { color: #C1121F; }
.exq-frame .dl-reste { display: flex; align-items: center; justify-content: center; gap: 4px; }
.exq-frame .dl-gain { color: #16A34A; }

/* Danger badge */
.exq-frame .dbg {
  background: #C1121F; color: #fff;
  border-radius: 3px; font-size: 10px; font-weight: 700;
  padding: 2px 5px; white-space: nowrap; font-style: normal;
}

/* Timeline bar */
.exq-frame .tlb { position: relative; background: #D8D3C8; border-radius: 3px; overflow: hidden; }
.exq-frame .tlr { position: absolute; left: 0; top: 0; height: 100%; background: #C1121F; border-radius: 3px 0 0 3px; }
.exq-frame .tlg { position: absolute; left: 50%; top: 0; height: 100%; background: #16A34A; }
.exq-frame .tlk { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100%; background: #1A1816; z-index: 2; }
.exq-frame .tll { text-align: center; font-size: 9px; font-weight: 600; color: #1A1816; line-height: 1; margin-bottom: 2px; }
.exq-frame .tlc { width: 2px; background: #1A1816; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   COLORFRAME — socle commun identique + 3 palettes (note 55 §6).
   Seuls border / background / avatar / pseudo changent.
   Texte EXQ, réactions et ligne de vie restent ceux du socle.
═══════════════════════════════════════════════════════════════ */
.exq-frame.cf-gold { border-color: #D4A017; background: #FFFBF0; }
.exq-frame.cf-gold .av { background: #D4A017; }
.exq-frame.cf-gold .ps { color: #92700F; }

.exq-frame.cf-blue { border-color: #2563EB; background: #EFF6FF; }
.exq-frame.cf-blue .av { background: #2563EB; }
.exq-frame.cf-blue .ps { color: #1D4ED8; }

.exq-frame.cf-red { border-color: #C1121F; background: #FFF0F0; }
.exq-frame.cf-red .av { background: #C1121F; }
.exq-frame.cf-red .ps { color: #9B1219; }

/* ═══════════════════════════════════════════════════════════════
   CRAZY COLOR — socle commun identique, bordure 6px, + 6 VRAIS skins.
   Le fond du cadre = canvas 2D porté VERBATIM de
   _VALIDATED_UI/crazy_colors/canvas_v1/crazy_colors_canvas_v1_validated.html
   (voir exq-frame.js). AUCUN gradient CSS de remplacement.
   Header / footer gardent un fond clair translucide pour rester lisibles
   par-dessus le canvas ; texte EXQ contrasté selon la clarté du skin.
═══════════════════════════════════════════════════════════════ */
.exq-frame.crazycolor { position: relative; }
.exq-frame.crazycolor .cc-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
/* Header : bande lisible appuyée. */
.exq-frame.crazycolor .ch { background: rgba(253,252,249,.72); position: relative; z-index: 1; }
/* Footer : très estompé pour laisser voir le skin animé derrière (dégradé léger). */
.exq-frame.crazycolor .cf {
  background: linear-gradient(to bottom, rgba(253,252,249,.30), rgba(253,252,249,.18));
  position: relative; z-index: 1;
}
/* Lisibilité des chiffres/icônes du footer Crazy Color par-dessus le skin. */
.exq-frame.crazycolor .cf .ri,
.exq-frame.crazycolor .cf .dl,
.exq-frame.crazycolor .cf .tll { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.exq-frame.crazycolor .cb { position: relative; z-index: 1; }
.exq-frame.crazycolor .ct { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.82); }
/* Skins à fond clair (Frost, Rainbow) → texte sombre lisible */
.exq-frame.cc-frost   .ct,
.exq-frame.cc-rainbow .ct { color: #1A1816; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

/* Couleur de bordure par skin (reprise des fichiers sources validés) */
.exq-frame.cc-aqua    { border-color: #49d7ff; }
.exq-frame.cc-cosmic  { border-color: #8aa2ff; }
.exq-frame.cc-frost   { border-color: #d9f7ff; }
.exq-frame.cc-fire    { border-color: #ff7a22; }
.exq-frame.cc-titan   { border-color: #7f8c99; }
.exq-frame.cc-rainbow { border-color: #ffffff; }

/* ═══════════════════════════════════════════════════════════════
   CHAÎNE — 200×300 Variante A, format propre teal (note 55 §3).
   Pas de socle F3. Pas de ligne de vie V4. Pas audio / pas espace membre.
═══════════════════════════════════════════════════════════════ */
.exq-frame.chain {
  width: 200px; height: 300px;
  border: 6px solid #0D9488; border-radius: 7px;
  background: #F0FDFA;
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.exq-frame.chain .chead { display: flex; align-items: center; gap: 5px; padding: 7px 8px 5px; flex-shrink: 0; }
.exq-frame.chain .cav {
  width: 16px; height: 16px; border-radius: 3px; background: #0D9488; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 900; color: #fff; overflow: hidden;
}
.exq-frame.chain .cav img { width: 100%; height: 100%; object-fit: cover; }
.exq-frame.chain .cmeta { flex: 1; min-width: 0; }
.exq-frame.chain .cps { font-size: 9.5px; font-weight: 700; color: #0A7A70; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.exq-frame.chain .ccreator { font-size: 7.5px; font-weight: 600; color: rgba(10,122,112,.55); line-height: 1.2; }
.exq-frame.chain .cbadge { display: inline-flex; align-items: center; gap: 3px; background: #0D9488; color: #fff; font-size: 7.5px; font-weight: 800; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; white-space: nowrap; }
.exq-frame.chain .cmaillon { display: flex; align-items: center; justify-content: center; background: rgba(13,148,136,.1); padding: 3px 8px; flex-shrink: 0; font-size: 9px; font-weight: 800; color: #0A7A70; letter-spacing: .03em; }
.exq-frame.chain .cbody { flex: 1; display: flex; align-items: center; padding: 8px 10px; overflow: hidden; }
.exq-frame.chain .ctext { font-weight: 900; font-style: italic; font-size: 14.5px; line-height: 1.38; color: #1A1816; word-break: break-word; }
.exq-frame.chain .cnav { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-bottom: 1px solid rgba(13,148,136,.18); flex-shrink: 0; }
.exq-frame.chain .cnav-prev { font-size: 9px; font-weight: 700; color: #0A7A70; background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.18); border-radius: 4px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; }
.exq-frame.chain .cnav-next { flex: 1; text-align: center; font-size: 9.5px; font-weight: 800; color: #fff; background: #0D9488; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.exq-frame.chain .cnav-next.cnav-end { background: rgba(13,148,136,.35); }
.exq-frame.chain .cfoot { border-top: 1px solid rgba(13,148,136,.18); flex-shrink: 0; }
.exq-frame.chain .cacts { display: flex; padding: 5px 8px 3px; }
.exq-frame.chain .cact { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 700; color: #6B6560; }
.exq-frame.chain .cact-like { color: #C1121F; }
.exq-frame.chain .cage { padding: 2px 8px 5px; font-size: 7.5px; font-weight: 600; color: rgba(10,122,112,.5); text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   PARTENAIRE — 260×390 poster cream (note 55 §4).
   Scotch V2 mordant. Logo/nom cliquable. Audio si présent.
   Réactions noires. PAS d'espace membre. Durée sobre (pas de TL-A/V4).
═══════════════════════════════════════════════════════════════ */
.exq-frame.partner {
  position: relative; width: 260px; height: 390px; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
/* Poster : AUCUN tour / cadre / contour (DÉCISION NICOLAS). Angles DROITS.
   Feuille cream posée, ombre portée, scotchs. Placement scotch inchangé. */
.exq-frame.partner .pp {
  position: absolute; inset: 0; width: 260px; height: 390px;
  /* Fond cream + grain papier subtil (feTurbulence, ~4% alpha) */
  background-color: #EDE7DA;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border: 0; outline: 0; border-radius: 0;
  display: flex; flex-direction: column; padding: 20px 18px 14px;
  overflow: visible;                /* le scotch DOIT pouvoir déborder (effet collé au mur) */
  box-shadow: 6px 14px 38px rgba(0,0,0,.55), 2px 4px 10px rgba(0,0,0,.28);
  transform: rotate(-0.8deg);
}
/* Scotch V2 (mordant, centre 16,11) */
.exq-frame.partner .pstl,
.exq-frame.partner .psbr {
  position: absolute; width: 44px; height: 14px;
  background: rgba(255,245,175,.72); z-index: 20;        /* scotch papier visible */
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  background-image: repeating-linear-gradient(90deg,rgba(200,180,60,.06) 0,rgba(200,180,60,.06) 2px,transparent 2px,transparent 6px);
}
/* CENTRE de la bande EXACTEMENT sur la POINTE de l'angle du poster.
   Technique : ancrer sur le coin (top/left ou bottom/right = 0) puis translate(±50%,±50%)
   pour amener le MILIEU de la bande sur le coin ; la rotation -45° se fait autour du centre
   (transform-origin par défaut). → moitié sur le papier, moitié sur le mur, à parts égales.
   Les deux bandes : même taille, même rotation (parallèles), clip-path identique. */
/* Centre de la bande décalé de 8px VERS L'INTÉRIEUR du poster (le long de la diagonale)
   → ~70% sur le papier, ~30% qui déborde au coin sur le mur. Décalage IDENTIQUE des deux
   côtés (8px) + même angle (-45°) → symétrie parfaite. clip-path identique (déchirure subtile). */
.exq-frame.partner .pstl {
  top: 8px; left: 8px; transform: translate(-50%, -50%) rotate(-45deg);
  clip-path: polygon(4% 0%, 0% 50%, 4% 100%, 96% 100%, 100% 50%, 96% 0%);
}
.exq-frame.partner .psbr {
  bottom: 8px; right: 8px; transform: translate(50%, 50%) rotate(-45deg);
  clip-path: polygon(4% 0%, 0% 50%, 4% 100%, 96% 100%, 100% 50%, 96% 0%);
}
.exq-frame.partner .pactions { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; z-index: 10; }
.exq-frame.partner .pact-vi { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.exq-frame.partner .pbt { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; flex-shrink: 0; }
.exq-frame.partner .pbl { width: 58px; height: 58px; border-radius: 12px; background: rgba(26,24,22,.1); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 2px 10px rgba(0,0,0,.12); overflow: hidden; text-decoration: none; cursor: pointer; }
.exq-frame.partner .pbl img { width: 100%; height: 100%; object-fit: cover; }
.exq-frame.partner .pbl-ini { font-size: 22px; font-weight: 900; color: #1A1816; letter-spacing: .02em; }
.exq-frame.partner .pbn { font-size: 12.5px; font-weight: 900; color: #1A1816; text-align: center; text-decoration: none; cursor: pointer; }
.exq-frame.partner .pbn:hover, .exq-frame.partner .pbl:hover { opacity: .82; }
.exq-frame.partner .pbtg { font-size: 10px; font-weight: 600; color: #9A8E7E; text-align: center; line-height: 1.4; }
.exq-frame.partner .pbd { flex: 1; display: flex; align-items: center; justify-content: center; }
.exq-frame.partner .pbct { font-size: 18px; font-weight: 900; font-style: italic; color: #1A1816; line-height: 1.42; text-align: center; word-break: break-word; }
.exq-frame.partner .pfoot { flex-shrink: 0; margin-top: 14px; }
.exq-frame.partner .preacts { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; }
.exq-frame.partner .preact { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #1A1816; }
.exq-frame.partner .pdurwrap { display: flex; flex-direction: column; gap: 3px; }
.exq-frame.partner .pdur { text-align: center; font-size: 10.5px; font-weight: 700; font-style: italic; color: #1A1816; }
.exq-frame.partner .pbar { height: 4px; border-radius: 2px; background: #D8D2C8; overflow: hidden; }
.exq-frame.partner .pbarf { height: 100%; border-radius: 2px; background: #16A34A; }