/* ==========================================================================
   Slides Studio V2 — Primitives de rendu du moteur générique (SlideRenderer)
   Remplace, à terme, les 4600 lignes de slide-styles.css indexées sur .layout-*.
   Le renderer pose la plupart des styles en inline ; ce fichier ne contient
   que les primitives partagées + les effets de texte vectoriels.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Playpen+Sans:wght@500;700&family=Pinyon+Script&display=swap');

/* Hôte de mise à l'échelle + canvas à coordonnées fixes */
.sr-host {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sr-canvas {
    box-sizing: border-box;
    font-family: 'Inter', 'Outfit', system-ui, sans-serif;
    color: #0f172a;
}

.sr-canvas * { box-sizing: border-box; }

/* Élément générique */
.sr-el {
    box-sizing: border-box;
}

.sr-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.sr-image img { user-select: none; -webkit-user-drag: none; }

.sr-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #cbd5e1;
    font-size: 2rem;
    border: 2px dashed #e2e8f0;
}

/* Cadres d'image (équivalents data-driven des anciens "card-border-*") */
.sr-image.frame-cream { border-color: #f5ede0 !important; }
.sr-image.frame-tilt  { transform: rotate(-3deg); }

.sr-icon i { line-height: 1; }
.sr-icon img { pointer-events: none; }

.sr-shape { pointer-events: none; }

/* Carte Leaflet */
.sr-map { position: absolute; }
.sr-map .leaflet-container { width: 100%; height: 100%; background: #e8eef3; }
.sr-map-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    z-index: 5;
}
.sr-map-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--slide-color, #fe4f2a);
}

/* Conteneurs group / repeater */
.sr-group, .sr-repeater { pointer-events: none; }
.sr-cell { box-sizing: border-box; }

/* ──────────────────────────────────────────────────────────────────────
   Effets de texte vectoriels (portés tels quels de slide-styles.css)
   ────────────────────────────────────────────────────────────────────── */

.font-script { font-family: 'Caveat', 'Playpen Sans', cursive !important; }
.font-formal-script { font-family: 'Pinyon Script', cursive !important; }

.kslide-text-brush-wrap {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 0.1em 0.3em;
}
.kslide-text-brush-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.kslide-text-outline {
    color: var(--text-fill-color, #ffffff);
    -webkit-text-stroke: var(--text-stroke-width, 3px) var(--text-stroke-color, #fe4f2a);
    paint-order: stroke fill;
    text-shadow:
        -1.5px -1.5px 0 var(--text-stroke-color, #fe4f2a),
         1.5px -1.5px 0 var(--text-stroke-color, #fe4f2a),
        -1.5px  1.5px 0 var(--text-stroke-color, #fe4f2a),
         1.5px  1.5px 0 var(--text-stroke-color, #fe4f2a);
}

.kslide-highlight-container {
    position: relative;
    display: inline-block;
}
.kslide-highlight-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 20px);
    height: calc(100% + 14px);
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}
.kslide-highlight-svg path {
    fill: none;
    stroke: var(--highlight-color, #ffc107);
    stroke-width: var(--highlight-stroke-width, 3px);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Placeholder d'image vide (« photo attendue ») */
.sr-image-empty .sr-img-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: #94a3b8; padding: 16px; }
.sr-image-empty .sr-img-ph i { font-size: 64px; opacity: .8; }
.sr-image-empty .sr-img-ph span { font-size: 26px; font-weight: 600; }