/*
 * starterCreative — Base
 * Reset minimal + classes utilitaires du thème
 */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--sc-font-primary);
    font-size: var(--sc-font-size-base);
    line-height: var(--sc-line-height);
    color: var(--sc-color-text);
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--sc-color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
.sc-container {
    max-width: var(--sc-container-max);
    margin-inline: auto;
    padding-inline: var(--sc-container-pad);
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sc-font-secondary);
    line-height: 1.2;
}

/* Boutons */
.sc-btn {
    display: inline-block;
    padding: var(--sc-spacing-sm) var(--sc-spacing-lg);
    border-radius: var(--sc-radius);
    font-family: var(--sc-font-primary);
    font-size: var(--sc-font-size-base);
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease;
}

.sc-btn:hover { opacity: 0.85; text-decoration: none; }

.sc-btn-primary {
    background-color: var(--sc-color-primary);
    color: var(--sc-color-secondary);
}

.sc-btn-secondary {
    background-color: transparent;
    color: var(--sc-color-primary);
    border: 1px solid var(--sc-color-primary);
}

/* Skip link */
.sc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: var(--sc-spacing-sm) var(--sc-spacing-md);
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius);
    font-weight: 600;
}

.sc-skip-link:focus {
    left: var(--sc-spacing-md);
    top: var(--sc-spacing-md);
    outline: 2px solid var(--sc-color-accent);
}

/* Utilitaires */
.sc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Responsive helpers */
@media (max-width: 768px) {
    .sc-hide-mobile { display: none; }
}

@media (min-width: 769px) {
    .sc-hide-desktop { display: none; }
}

/* Hero / responsive video */
.sc-hero__video-wrap {
    width: 100%;
    margin-bottom: var(--sc-spacing-md);
}

.sc-responsive-video iframe,
.sc-responsive-video video {
    width: 100%;
    max-width: 100%;
}

.sc-responsive-video.sc-oembed iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 200px;
}