/* ==========================================================================
   DOM CLIM - Style & Design System
   --------------------------------------------------------------------------
   Esthétique « Glacier » : nuit arctique, verre dépoli, halos bleu glacé.
   Toutes les couleurs sont centralisées dans :root — un changement de charte
   ne demande plus qu'une seule édition.
   ========================================================================== */

:root {
    /* --- Surfaces --- */
    --dc-bg: #060B12;
    --dc-surface: #0E1622;
    --dc-surface-lowest: #04080E;
    --dc-surface-low: #101A26;
    --dc-surface-high: #1C2939;
    --dc-outline: #24354A;
    --dc-outline-soft: #1A2736;

    /* --- Bleu d'action (contraste 4.86:1 sur blanc) --- */
    --dc-primary: #0277B6;
    --dc-primary-dark: #025C8E;

    /* --- Accents givre --- */
    --dc-frost: #7DD3FC;
    --dc-frost-dim: #38BDF8;
    --dc-frost-deep: #0C7DBE;

    /* --- Texte --- */
    --dc-text: #FFFFFF;
    --dc-text-muted: #B8C9DA;
    --dc-text-faint: #7C8FA6;

    /* --- Halos (canal RVB pour rgba) --- */
    --dc-glow: 56, 189, 248;
    --dc-glow-deep: 12, 125, 190;
}

/* --- Base & Reset Elements --- */
body {
    background-color: var(--dc-bg);
    color: var(--dc-text);
}

::selection {
    background-color: var(--dc-frost-dim);
    color: #04121C;
}

/* --- Layout Components --- */
.glass-nav {
    background-color: rgba(14, 22, 34, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(125, 211, 252, 0.10);
}

.glass-panel {
    background: rgba(20, 31, 45, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(125, 211, 252, 0.10);
    border-top: 1px solid rgba(125, 211, 252, 0.16);
}

/* --- Buttons & UI Elements --- */
.btn-primary {
    background-image: linear-gradient(135deg, var(--dc-primary) 0%, var(--dc-primary-dark) 100%);
    background-color: var(--dc-primary);
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    box-shadow: 0 0 22px rgba(var(--dc-glow), 0.42);
}

.btn-secondary {
    background-color: rgba(125, 211, 252, 0.03);
    border: 1px solid rgba(125, 211, 252, 0.28);
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: rgba(125, 211, 252, 0.10);
    border-color: rgba(125, 211, 252, 0.55);
}

/* --- Premium Cards (Hover & Micro-interactions) --- */
.surface-card {
    background-color: var(--dc-surface);
    border: 1px solid var(--dc-outline);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.surface-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--dc-glow), 0.42);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--dc-glow), 0.08);
}

.surface-card .material-symbols-outlined {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.surface-card:hover .material-symbols-outlined {
    transform: scale(1.15) translateY(-2px);
    color: var(--dc-frost);
}

.glow-backdrop {
    display: none;
}

@media (min-width: 768px) {
    .glow-backdrop {
        display: block;
        position: absolute;
        background: radial-gradient(circle, rgba(var(--dc-glow), 0.16) 0%, rgba(6, 11, 18, 0) 70%);
        width: 600px;
        height: 600px;
        border-radius: 50%;
        pointer-events: none;
        z-index: -1;
    }
}

.glow-effect {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-effect:hover {
    box-shadow: 0 0 22px rgba(var(--dc-glow), 0.42);
}

@keyframes floatGlow {
    0% {
        transform: translate(-50%, 0px) scale(1);
    }
    50% {
        transform: translate(-45%, 30px) scale(1.1);
    }
    100% {
        transform: translate(-50%, 0px) scale(1);
    }
}

.glow-float {
    animation: floatGlow 12s ease-in-out infinite;
}

/* --- Hero Entrance Staggered Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-fade-up {
    opacity: 0;
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-delay-1 {
    animation-delay: 0.15s;
}

.hero-delay-2 {
    animation-delay: 0.35s;
}

.hero-delay-3 {
    animation-delay: 0.55s;
}

/* --- Premium Scroll Reveal Animations --- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes revealLeft {
        from { opacity: 0; transform: translateX(-60px) scale(0.95); }
        to { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes revealRight {
        from { opacity: 0; transform: translateX(60px) scale(0.95); }
        to { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes revealUp {
        from { opacity: 0; transform: translateY(40px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* L'état masqué n'est appliqué que si JavaScript est actif. Sans script,
       l'IntersectionObserver ne peut pas révéler les blocs : le contenu doit
       rester lisible (accessibilité, référencement, navigateurs anciens). */
    html.js-ready .scroll-reveal-left,
    html.js-ready .scroll-reveal-right,
    html.js-ready .scroll-reveal-up {
        opacity: 0;
        will-change: transform, opacity;
    }

    .scroll-reveal-left.reveal-active {
        animation: revealLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .scroll-reveal-right.reveal-active {
        animation: revealRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .scroll-reveal-up.reveal-active {
        animation: revealUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

/* --- Premium Cross-Document View Transitions --- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both fade-out,
                   0.3s cubic-bezier(0.4, 0, 0.2, 1) both slide-left;
    }

    ::view-transition-new(root) {
        animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both fade-in,
                   0.3s cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
    }

    @keyframes fade-out { to { opacity: 0; } }
    @keyframes fade-in { from { opacity: 0; } }
    @keyframes slide-left { to { transform: translateX(-40px); } }
    @keyframes slide-from-right { from { transform: translateX(40px); } }
}

/* --- Utilities --- */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 252, 0.24);
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--dc-glow), 0.6);
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(125, 211, 252, 0.24) transparent;
}

/* --- Specific Page Elements (Contact Map & Input Glows) --- */
.input-glow:focus {
    border-color: var(--dc-frost-dim) !important;
    box-shadow: inset 0 0 8px rgba(var(--dc-glow), 0.10), 0 0 12px rgba(var(--dc-glow), 0.16);
}

.input-glow:focus-within {
    border-color: var(--dc-frost-dim) !important;
    box-shadow: inset 0 0 8px rgba(var(--dc-glow), 0.14), 0 0 12px rgba(var(--dc-glow), 0.10);
}

.map-mockup {
    border: 1px solid var(--dc-outline);
    position: relative;
    overflow: hidden;
    background-color: var(--dc-bg);
}

.map-mockup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/schoelcher_dark_map.png') no-repeat center center;
    background-size: cover;
    opacity: 0.55;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.ambient-glow {
    background: radial-gradient(circle at center, rgba(var(--dc-glow), 0.13) 0%, rgba(6, 11, 18, 0) 65%);
}

/* --- Custom Checkboxes & Toggles (Form Controls) --- */
input[type="checkbox"].custom-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: transparent !important;
    background-image: none !important; /* Supprime l'icône de coche par défaut de Tailwind Forms */
    margin: 0 !important;
    font: inherit !important;
    color: transparent !important; /* Cache toute couleur de texte par défaut */
    width: 1.15em !important;
    height: 1.15em !important;
    border: 2px solid var(--dc-outline) !important;
    border-radius: 0.15em !important;
    display: grid !important;
    place-content: center !important;
    cursor: pointer !important;
    transition: border-color 120ms ease-in-out, background-color 120ms ease-in-out !important;
}

input[type="checkbox"].custom-checkbox::before {
    content: "" !important;
    width: 0.65em !important;
    height: 0.65em !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    box-shadow: inset 1em 1em var(--dc-frost) !important;
    background-color: var(--dc-frost) !important;
    transform-origin: center !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important; /* Forme de la coche */
}

input[type="checkbox"].custom-checkbox:checked::before {
    transform: scale(1) !important;
}

input[type="checkbox"].custom-checkbox:checked {
    border-color: var(--dc-frost) !important;
    background-color: transparent !important; /* Empêche le fond de devenir bleu */
    background-image: none !important; /* Empêche la coche par défaut de Tailwind de réapparaître */
}

/* Neutralise complètement l'anneau de focus bleu généré par Tailwind Forms */
input[type="checkbox"].custom-checkbox:focus,
input[type="checkbox"].custom-checkbox:active,
input[type="checkbox"].custom-checkbox:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-width: 0px !important;
    --tw-ring-offset-width: 0px !important;
}

/* --- Toggle Switch --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dc-outline);
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .slider {
    background-color: var(--dc-primary);
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(26px);
}

/* --- Glow Active Card States --- */
.glow-active {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--dc-glow), 0.32) !important;
    border-color: var(--dc-frost-dim) !important;
    background-color: rgba(var(--dc-glow), 0.06) !important;
}

/* --- Dark Input Focus States --- */
.dark-input:focus {
    border-color: var(--dc-frost-dim) !important;
    box-shadow: inset 0 0 5px rgba(var(--dc-glow), 0.20), 0 0 12px rgba(var(--dc-glow), 0.12) !important;
    outline: none;
}

/* --- Premium Bottom Sheet CSS Animations --- */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ==========================================================================
   Accents de marque Dom Clim
   ========================================================================== */

/* Dégradé de titre « givre » */
.text-gradient-frost {
    background: linear-gradient(100deg, #FFFFFF 0%, #CDEBFF 45%, var(--dc-frost) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Pastille d'accroche */
.badge-frost {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--dc-glow), 0.28);
    background: rgba(var(--dc-glow), 0.07);
    color: var(--dc-frost);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Cadre photo premium (hero scindé, réalisations) */
.media-frame {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(var(--dc-glow), 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(var(--dc-glow), 0.07);
    background-color: var(--dc-surface);
}

.media-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 11, 18, 0.86) 0%, rgba(6, 11, 18, 0.12) 42%, rgba(6, 11, 18, 0) 70%);
    pointer-events: none;
}

/* Grille technique discrète en fond de section */
.frost-grid {
    background-image:
        linear-gradient(rgba(var(--dc-glow), 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--dc-glow), 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
}

/* Écart de température avant / après (page Réalisations) */
.temp-gauge {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #F87171 0%, #FBBF24 42%, var(--dc-frost) 100%);
    overflow: hidden;
}

.temp-gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: rgba(6, 11, 18, 0.72);
    border-right: 2px solid rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Intro d'arrivée — « séquence de givrage » (page d'accueil uniquement)
   --------------------------------------------------------------------------
   Pilotage par deux classes sur <html> :
     .intro-pending  -> l'intro est affichée au-dessus de la page
     .intro-leaving  -> sortie : les rideaux s'ouvrent en translation GPU
   ========================================================================== */

#site-intro {
    display: none;
    cursor: pointer; /* Indique la possibilité de cliquer pour passer */
}

html.intro-pending #site-intro,
html.intro-leaving #site-intro {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
}

html.intro-pending,
html.intro-pending body {
    overflow: hidden;
}

/* Note Senior Perf : Le hero s'anime normalement en arrière-plan à t=0 sous les panneaux
   opaques. Quand les rideaux s'ouvrent, le h1 est déjà stabilisé à l'écran, ce qui supprime
   la pénalité LCP (~0.9s au lieu de ~3.9s). */

/* --- Les deux rideaux qui s'ouvrent --- */
.intro-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51%; /* Léger chevauchement pour supprimer tout gap sous-pixel sur écran mobile */
    background-color: var(--dc-bg);
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.intro-panel-left {
    left: 0;
}

.intro-panel-right {
    right: 0;
}

html.intro-leaving .intro-panel-left {
    transform: translateX(-100%);
}

html.intro-leaving .intro-panel-right {
    transform: translateX(100%);
}

/* Sortie accélérée en cas de skip (clic ou touche Échap) */
html.intro-quick .intro-panel {
    transition-duration: 0.35s;
}

html.intro-quick .intro-core {
    transition-duration: 0.2s;
}

/* --- Ligne de balayage verticale (front de gel) --- */
.intro-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -160px;
    height: 160px;
    background: linear-gradient(to bottom,
            rgba(var(--dc-glow), 0) 0%,
            rgba(var(--dc-glow), 0.18) 55%,
            rgba(255, 255, 255, 0.10) 88%,
            rgba(var(--dc-glow), 0) 100%);
    border-bottom: 1px solid rgba(var(--dc-glow), 0.55);
    will-change: transform, opacity;
    animation: introScan 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.05s both;
}

@keyframes introScan {
    from { transform: translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    85%  { opacity: 1; }
    to   { transform: translateY(calc(100vh + 320px)); opacity: 0; }
}

/* --- Bloc central --- */
.intro-core {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    padding: 1.5rem;
    text-align: center;
    will-change: opacity, transform;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.intro-leaving .intro-core {
    opacity: 0;
    transform: scale(0.96);
}

/* Logo officiel avec halo lumineux et pulsation */
.intro-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(140px, 32vw, 210px);
    height: clamp(140px, 32vw, 210px);
    will-change: transform, opacity;
    animation: introBadgeIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes introBadgeIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.intro-logo-glow {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    /* Gradient multi-stops naturel : supprime le besoin d'un lourd filter: blur() */
    background: radial-gradient(circle, rgba(var(--dc-glow), 0.50) 0%, rgba(var(--dc-glow), 0.18) 42%, rgba(var(--dc-glow), 0) 70%);
    will-change: transform, opacity;
    animation: introGlowPulse 2.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes introGlowPulse {
    0%, 100% { transform: scale(0.95); opacity: 0.6; }
    50%      { transform: scale(1.12); opacity: 0.95; }
}

.intro-logo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 16px rgba(var(--dc-glow), 0.55));
    will-change: transform;
    animation: introLogoPulse 2.2s ease-in-out infinite;
}

@keyframes introLogoPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

/* Traits néon symétriques (haut et bas) - 100% GPU scaleX (0 layout reflow) */
.intro-rule {
    position: relative;
    width: min(300px, 68vw);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--dc-glow), 0), var(--dc-frost-dim), rgba(var(--dc-glow), 0));
    box-shadow: 0 0 12px rgba(var(--dc-glow), 0.55);
    overflow: hidden;
    transform: scaleX(0);
    transform-origin: center;
    will-change: transform;
}

.intro-rule-top,
.intro-rule-bottom {
    animation: introRuleExpand 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

@keyframes introRuleExpand {
    to { transform: scaleX(1); }
}

/* Faisceau d'énergie glacé - 100% GPU translateX (0 layout reflow) */
.intro-beam-pulse {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -120px;
    width: 110px;
    opacity: 0;
    background: linear-gradient(90deg,
        rgba(var(--dc-glow), 0) 0%,
        rgba(56, 189, 248, 0.75) 35%,
        rgba(240, 250, 255, 0.98) 50%,
        rgba(56, 189, 248, 0.75) 65%,
        rgba(var(--dc-glow), 0) 100%
    );
    box-shadow: 0 0 6px #ffffff, 0 0 14px var(--dc-frost-dim);
    will-change: transform, opacity;
    animation: introBeamCharge 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.65s both;
}

@keyframes introBeamCharge {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(min(300px, 68vw) + 130px));
        opacity: 0;
    }
}

.intro-tagline {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: clamp(0.7rem, 2vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(237, 244, 251, 0.75);
    opacity: 0;
    animation: introFade 0.6s ease 0.35s forwards;
}

@keyframes introFade {
    to { opacity: 1; }
}

/* Accessibilité : mouvement réduit => pas d'intro du tout */
@media (prefers-reduced-motion: reduce) {
    #site-intro {
        display: none !important;
    }

    html.intro-pending,
    html.intro-pending body {
        overflow: auto;
    }
}


/* ==========================================================================
   Bandeau « site de démonstration »
   --------------------------------------------------------------------------
   Cette vitrine est une démonstration : les tarifs, les réalisations et les
   témoignages sont fictifs. Le bandeau rend la chose explicite pour toute
   personne qui tomberait sur l'adresse publique.
   ========================================================================== */
.demo-ribbon {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 9998;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 20px 9px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%);
    color: #1C1408;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 640px) {
    .demo-ribbon {
        padding: 14px 6px;
        font-size: 9px;
        letter-spacing: 0.14em;
    }
}

/* Respecte les zones sûres des téléphones à encoche */
@supports (padding: env(safe-area-inset-right)) {
    .demo-ribbon { right: env(safe-area-inset-right); }
}