/* ============================================
   0. FONT FACE (self-hosted Outfit)
   ============================================ */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   1. VARIABLES CSS
   ============================================ */
:root {
    --primary-color: hsl(200, 50%, 15%);
    --accent-color:  hsl(200, 50%, 58%);
    --bg-color: #f5f7fa;
    --card-bg: #ffffff;
    --text-color: #333333;
    --light-text-color: #666666;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --border-radius-small: 1rem;
    --border-radius-medium: 1.5rem;
    --border-radius-large: 3rem;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    --scl-1: 0.85;
    --scl-2: 0.75;
    --scl-3: 0.7;
    --x-pos-1: 70px;
    --x-pos-2: 130px;
    --x-pos-3: 170px;
    --x-neg-1: calc(var(--x-pos-1) * -1);
    --x-neg-2: calc(var(--x-pos-2) * -1);
    --x-neg-3: calc(var(--x-pos-3) * -1);
    --rot-pos-1: -15deg;
    --rot-pos-2: -15deg;
    --rot-pos-3: -15deg;
    --rot-neg-1: calc(var(--rot-pos-1) * -1);
    --rot-neg-2: calc(var(--rot-pos-2) * -1);
    --rot-neg-3: calc(var(--rot-pos-3) * -1);

    --col-1: hsl(0, 0%, 97%);
    --col-2: hsl(0, 0%, 94%);
    --col-3: hsl(0, 0%, 91%);

    --color-1: hsl(200, 50%, 80%);
    --color-2: hsl(200, 50%, 72%);
    --color-3: hsl(200, 50%, 60%);
    --color-4: hsl(200, 50%, 52%);
    --color-5: hsl(200, 50%, 45%);
    --color-6: hsl(200, 50%, 40%);

    --valid-color-1: hsl(160 95% 85%);
    --valid-color-2: hsl(160 95% 76%);
    --valid-color-3: hsl(160 95% 67%);
    --valid-color-4: hsl(160 95% 58%);
    --valid-color-5: hsl(160 95% 38%);
    --valid-color-6: hsl(160 95% 30%);
    --valid-color: var(--valid-color-6);

    --error-color-1: hsl(0 70% 85%);
    --error-color-2: hsl(0 70% 76%);
    --error-color-3: hsl(0 70% 67%);
    --error-color-4: hsl(0 70% 58%);
    --error-color-5: hsl(0 70% 38%);
    --error-color-6: hsl(0 70% 30%);
    --error-color: var(--error-color-6);

    /* Gradients */
    --gradient-1: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --gradient-2: linear-gradient(135deg, var(--color-6), var(--accent-color));
    --gradient-3: linear-gradient(135deg, var(--valid-color-6), var(--valid-color-5));
    --gradient-4: linear-gradient(135deg, var(--error-color-6), var(--error-color-4));

    --progress: 0;

    /* SVG icon variables */
    --icon-play: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 20 20'%3E%3Cpath d='M3 17 L17 10 L3 3Z' fill='white' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-fast-forward: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 20 20'%3E%3Cpath d='M2 3 9 8V3L18 10 9 17V12L2 17Z' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-restart: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 30 30'%3E%3Cpath d='M26 3V10.5H18.5M26 10.5A11.8 11.8 90 004 19 11.8 11.8 90 0025.5 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-send: url("data:image/svg+xml,%3Csvg stroke='black' fill='none' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M 24 12 L 0 0 L 6 12 L 0 24 L 24 12 L 6 12'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-download: url("data:image/svg+xml,%3Csvg stroke='black' fill='none' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 18 18'%3E%3Cg%3E%3Cpath d='M 9 0 L 9 13 L 13 9 L 9 13 L 5 9 M 1 12 C 1 16 1 18 6 18 L 12 18 C 17 18 17 16 17 12'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-back: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 20 20'%3E%3Cpath d='M6 5 2 9 6 13M2 9H12A6 6 0 0118 15' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 9 14'%3E%3Cpath d='M2 2 L7 7 L2 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 9 14'%3E%3Cpath d='M7 2 L2 7 L7 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 12 10'%3E%3Cpath d='M10 1 5 9 2 5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ============================================
   2. RESET & BASE STYLES
   ============================================ */
/* Scroll-snap sur html : c'est le conteneur de défilement de la page, pas body */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    background-size: auto;
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Classes utilitaires */
.hidden {
    display: none !important;
}

/* Section d'attente (affichée par défaut au chargement) */
.loading-section {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    z-index: 100;

    &.hidden {
        display: none !important;
    }
}
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin {
    to { transform: rotate(360deg); }
}
.loading-text {
    margin: 0;
    color: var(--light-text-color);
    font-size: 1rem;
}

/* Écran d'accès sans thérapeute (gate) */
.gate-section {
    min-height: 100vh;
}

.gate-message {
    margin: 1rem 0;
    color: var(--light-text-color);
}

.gate-form {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    & label {
        font-weight: 500;
        color: var(--primary-color);
    }

    & input {
        padding: 0.75rem 1rem;
        border: 1px solid #ccc;
        border-radius: var(--border-radius-small);
        font-size: 1rem;
    }
    
    & input:focus {
        outline: none;
        border-color: var(--accent-color);
    }

    & button {
        margin-top: 0.5rem;
    }
}

/* ============================================
   3. TYPOGRAPHY
   ============================================ */
h1 {
    font-weight: 700;
    font-size: 2.5rem;
    margin: 1rem 0;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

h2 {
    font-weight: 400;
    text-align: center;
    width: 100%;
    margin: -2rem -2rem 0 -2rem;
    background: var(--gradient-2);
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
    color: white;
    padding: 1rem 2rem 1rem 2rem;
    box-sizing: content-box;
    font-size: 1.5rem;
}

blockquote {
    background: var(--bg-color);
    font-size: 1.3rem;
    padding: 1.5rem;
    border-radius: var(--border-radius-small);
    margin: 0;
    position: relative;
    text-indent: 2.2rem;
    color: var(--primary-color);
    line-height: 1.6;
    --open-quotes: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 64 64'%3E%3Cpath d='M54 22Q45 26 45 33L55 33L55 52L36 52L36 34Q36 21 50 14Z M29 22Q20 26 20 33L30 33L30 52L11 52L11 34Q11 21 25 14Z'/%3E%3C/svg%3E");
    --close-quotes: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg ' viewBox='0 0 64 64'%3E%3Cpath d='M10 42Q19 38 19 31L9 31L9 12L28 12L28 30Q28 43 14 50Z M35 42Q44 38 44 31L34 31L34 12L53 12L53 30Q53 43 39 50Z'/%3E%3C/svg%3E");

    &::before, &::after {
        font-family: "Arial", "Helvetica", "sans-serif";
        font-size: 4rem;
        font-weight: 900;
        color: var(--accent-color);
        line-height: 1.5rem;
        text-indent: 0;
        position: absolute;
    }

    &::before {
        content: "";
        width: 3rem;
        height: 3rem;
        background-color: var(--accent-color);
        mask-image: var(--open-quotes);
        mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        top: -1rem;
        left: 0.2rem;
        opacity: 0.55;
    }

    &::after {
        content: "";
        width: 3rem;
        height: 3rem;
        background-color: var(--accent-color);
        mask-image: var(--close-quotes);
        mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        bottom: -1.2rem;
        right: 0.2rem;
        position: absolute;
        opacity: 0.55;
    }
}

ol {
    margin: 0;
    text-align: left;
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;

    & li {
        position: relative;
        padding-left: 3rem;
        line-height: 1.7rem;
        margin-bottom: 0.5rem;
    }

    & li::before {
        counter-increment: item;
        content: counter(item);
        display: inline-block;
        position: absolute;
        left: 0.5rem;
        top: 0.15rem;
    }
}


/* ============================================
   4. LAYOUT & STRUCTURE
   ============================================ */
.questionnaire-container {
    display: block;
    min-height: 100%;
    height: 88vh;
    padding-top: 10vh;
    position: relative;
}

.question {
    justify-content: center;
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
}

.question-number {
    font-size: 0.8rem;
    color: var(--col-3);
    font-style: italic;
    text-align: left;
    margin-bottom: 1rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}


/* ============================================
   5. CAROUSEL
   ============================================ */
#carousel {
    width: 100%;
    margin: auto;
    perspective: 1500px;

    
    & > article {
        background: white;
        z-index: 700;
        padding: 2rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        width: 340px;
        height: 500px;
        position: absolute;
        left: calc(50% - 170px - 1rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: var(--border-radius-medium);
        transition: .8s cubic-bezier(0.25, 0.8, 0.25, 1);
        contain: layout style;

        &#welcome-1 {
            align-items: flex-start;
            justify-content: space-between;
            gap: 2rem;  /* Ajout d'un espace entre les éléments */ 
        }

        &#welcome-1 .card-controls {
            align-self: flex-end;
            display: block;
        }

        &.previous_3 {
            background: var(--col-3);
            transform: scale(var(--scl-3)) translateX(var(--x-neg-3)) rotateY(var(--rot-neg-3));
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
            opacity: 0;
            /*display: none;*/
        }

        &.previous_2 {
            background: var(--col-2);
            transform: scale(var(--scl-2)) translateX(var(--x-neg-2)) rotateY(var(--rot-neg-2));
            z-index: 800;
            opacity: 0.8;
        }

        &.previous_1 {
            background: var(--col-1);
            transform: scale(var(--scl-1)) translateX(var(--x-neg-1)) rotateY(var(--rot-neg-1));
            z-index: 900;
            opacity: 0.9;
        }

        &.selected {
            background: white;
            transform: scale(1) translateX(0) rotateY(0);
            z-index: 1000;
            opacity: 1;
        }   

        &.next_1 {
            background: var(--col-1);
            transform: scale(var(--scl-1)) translateX(var(--x-pos-1)) rotateY(var(--rot-pos-1));
            z-index: 900;
            opacity: 0.9;
        }
        
        &.next_2 {
            background: var(--col-2);
            transform: scale(var(--scl-2)) translateX(var(--x-pos-2)) rotateY(var(--rot-pos-2));
            z-index: 800;
            opacity: 0.8;
        }
        
        
        &.next_3 {
            background: var(--col-3);
            transform: scale(var(--scl-3)) translateX(var(--x-pos-3)) rotateY(var(--rot-pos-3));
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
            opacity: 0;
            /*display: none;*/
        }

        &.hidden {
            display: none;
        }
    }
}

/* Contrôles du carrousel */
.card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    width: 100%;
}

.btn-prev {
    flex: 1 0 0;
    position: relative;
    padding-left: 2rem;
}

.btn-next {
    flex: 2 0 0;
    position: relative;
    padding-right: 2rem;
}


/* ============================================
   6. CARDS
   ============================================ */
/* Welcome Landing */
.welcome-landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow-y: auto;
}

.welcome-card-large {
    background: white;
    border-radius: var(--border-radius-large);
    padding: 2rem 6rem;
    /* Avec border-box, 600px inclurait le padding → zone texte trop étroite. On élargit comme avant (contenu ~600px). */
    max-width: min(100%, 900px);
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;

    & h2 {
        font-size: 2rem;
        margin: -2rem 0 0 0;
        padding: 2rem 6rem;
        border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    }

    & .welcome-intro {
        font-size: 1.1rem;
    }

}

/* Welcome Screen */
.welcome-screen {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    & h1 {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 2rem;
        text-align: center;
    }
}

.welcome-intro-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0;

    & .welcome-intro {
        flex: 1;
        font-size: 1.1rem;
        line-height: 1.6;
        color: var(--text-color);
        margin: 0;
        max-width: 500px;
    }
}


.welcome-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-color);
    padding: 1.5rem;
    flex-shrink: 0;

    & svg {
        transform: translateY(1px);
    }

    /* Pas de scale sur le checkmark merci : évite conflit visuel avec la relecture du tracé au survol */
    &:not(.success-checkmark-icon):hover svg {
        transform: translateY(0) scale(1.02);
        transition: transform 0.2s ease;
    }

    & .logo-rotating-part {
        transform-origin: 50% 50%;
        transform-box: fill-box;
        transition: transform 1s ease;
    }

    &:hover .logo-rotating-part {
        transform: rotate(90deg);
    }
}

/* Animation de succès (checkmark SVG animé) */
.success-checkmark-icon {
    color: var(--valid-color-5);
    /* Pause courte après affichage de la section merci avant de lancer le dessin */
    --checkmark-entrance-delay: 0.35s;
    /* Hover : cercle puis coche enchaînés */
    --checkmark-circle-duration: 0.6s;
    --checkmark-check-duration: 0.3s;
}

.success-checkmark-icon svg {
    width: 100%;
    height: 100%;
}

/* Entrée : une seule fois tant que .checkmark-entrance-done n’est pas posée (voir form.js) */
.success-checkmark-icon:not(.checkmark-entrance-done) .checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmark-circle-draw 0.6s ease-in-out var(--checkmark-entrance-delay) forwards;
}

.success-checkmark-icon:not(.checkmark-entrance-done) .checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmark-check-draw 0.3s ease-in-out calc(var(--checkmark-entrance-delay) + 0.4s) forwards;
}

/* Après l’entrée : état figé (même découpe que la fin du tracé), plus d’animation — évite la relance en quittant le :hover */
.success-checkmark-icon.checkmark-entrance-done .checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 0;
    animation: none;
}

.success-checkmark-icon.checkmark-entrance-done .checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 0;
    animation: none;
}

@keyframes checkmark-circle-draw {
    from { stroke-dashoffset: 166; }
    to { stroke-dashoffset: 0; }
}

@keyframes checkmark-check-draw {
    from { stroke-dashoffset: 48; }
    to { stroke-dashoffset: 0; }
}

/* Même courbe que draw : nom distinct pour forcer le navigateur à relancer l’animation au :hover */
@keyframes checkmark-circle-hover {
    from { stroke-dashoffset: 166; }
    to { stroke-dashoffset: 0; }
}

@keyframes checkmark-check-hover {
    from { stroke-dashoffset: 48; }
    to { stroke-dashoffset: 0; }
}

/* Survol : le V disparaît tout de suite (from + fill-mode pendant le délai), cercle se trace, puis le V réapparaît */
.success-checkmark-icon.checkmark-entrance-done:hover .checkmark-circle {
    animation: checkmark-circle-hover var(--checkmark-circle-duration) ease-in-out forwards;
}

.success-checkmark-icon.checkmark-entrance-done:hover .checkmark-check {
    animation: checkmark-check-hover var(--checkmark-check-duration) ease-in-out var(--checkmark-circle-duration) both forwards;
}

/* Info Cards */
.info-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: var(--border-radius-medium);
}

.info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
}

.info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--col-3);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;

    & strong {
        font-size: 1rem;
        color: var(--text-color);
        font-weight: 600;
    }

    & span {
        font-size: 0.875rem;
        color: var(--light-text-color);
        line-height: 1.4;
    }
}

/* Instructions Section */
.instructions-section {
    width: 100%;
    text-align: left;
    margin: 1rem 0;

    & h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0 0 1rem 0;
        text-align: center;
    }

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    & li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    & li span:last-child {
        flex: 1;
        color: var(--text-color);
        line-height: 1.5;
    }

    & li .check-icon {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;
        background: var(--col-3);
        border-radius: var(--border-radius-small);
        color: var(--accent-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
}

.begin-button {
    margin-top: 1rem;
    width: 100%;
    max-width: 300px;
}

.welcome-landing .begin-button {
    margin-top: 0;
}

.privacy-link {
    font-size: 0.875rem;
    color: var(--light-text-color);
    text-decoration: none;
    margin: 0 0 2rem 0;
    transition: color 0.2s ease;

    &:hover {
        color: var(--accent-color);
        text-decoration: underline;
    }
}


/* ============================================
   7. FORMS & INPUTS
   ============================================ */

.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 1.5rem;
    width: 100%;
}

.input-group {
    position: relative;

    &.full-width {
        grid-column: 1 / -1;
    }

    & input {
        width: 100%;
        max-width: none;
        height: 1.5rem;
        padding: 10px 0px;
        box-sizing: border-box;
        font-size: 1rem;
        outline: 0;
        border: 0;
        box-shadow: 0 1px 0 0 #ccc;
        transition: box-shadow 150ms ease-out;
        background: transparent;
    }

    & input:focus {
        box-shadow: 0 1px 0 0 var(--accent-color);
    }

    & input.filled {
        box-shadow: 0 1px 0 0 var(--valid-color);
    }

    & input.error {
        box-shadow: 0 1px 0 0 var(--error-color);
    }

    & input::placeholder {
        color: transparent;
    }

    & .placeholder {
        position: relative;
        top: 1.2rem;
        height: 1.2rem;
        display: block;
        color: #444;
    }

    & .placeholder.active {
        transform: translateY(-100%);
        color: #999;
        font-size: .75em;
    }
}

.welcome .primary {
    margin-top: 2rem;
}

#welcome-1 button {
    width: 100%;
}

#start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================
   8. RATING SYSTEM
   ============================================ */
.rating-container {
    width: 100%;
    margin: 10px 0;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

/* Couleurs dynamiques selon la valeur */
*[data-value="1"],
ol li:nth-child(1) {
    --accent-color: var(--color-1);
    --valid-color: var(--valid-color-1);
}

*[data-value="2"],
ol li:nth-child(2) {
    --accent-color: var(--color-2);
    --valid-color: var(--valid-color-2);
}

*[data-value="3"],
ol li:nth-child(3) {
    --accent-color: var(--color-3);
    --valid-color: var(--valid-color-3);
}

*[data-value="4"],
ol li:nth-child(4) {
    --accent-color: var(--color-4);
    --valid-color: var(--valid-color-4);
}

*[data-value="5"],
ol li:nth-child(5) {
    --accent-color: var(--color-5);
    --valid-color: var(--valid-color-5);
}

*[data-value="6"],
ol li:nth-child(6) {
    --accent-color: var(--color-6);
    --valid-color: var(--valid-color-6);
}

/* Rating Buttons */
.rating-buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    width: 100%;
    padding: 0;
    align-items: start;
}

.rating-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rating-btn {
    aspect-ratio: 1;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rating-radio:checked + .rating-btn,
.rating-btn:hover {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.rating-btn:focus + .rating-btn {
    border: 1px solid var(--accent-color);
    outline: 1px solid var(--accent-color);
}

.rating-btn:focus,
.rating-btn:focus-visible {
    border: 1px solid var(--accent-color);
    outline: 1px solid var(--accent-color);
}

/* Rating Labels */
.rating-labels {
    display: grid;
    grid-template-columns: 80px auto 80px;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    width: calc(100% + 20px);
    margin-top: 0.5rem;
    margin-left: -10px;
    padding: 0;
    font-size: 0.8rem;
    height: 3rem;

    & span:nth-child(1) {
        text-align: left;
        color: var(--light-text-color);
        font-style: italic;
    }
    
    
    & span:nth-child(2) {
        text-align: center;
    }

    & span:nth-child(3) {
        text-align: right;
        color: var(--light-text-color);
        font-style: italic;
    }

    & span.hover-text {
        font-weight: 600;
        font-style: normal;
        transition: opacity 0.2s ease;
        opacity: 0;
        color: var(--primary-color);
    }
    
    & span.hover-text.visible {
        opacity: 1;
    }
}


/* ============================================
   9. BUTTONS
   ============================================ */
button {
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    border: none;
    padding: 1rem;
    margin: 1rem 0;
}

/* Primary Button */
.primary {
    border: 1px solid var(--accent-color);
    background: var(--gradient-2);
    color: white;
    font-weight: 600;

    &:hover {
        background: white;
        color: var(--accent-color);
    }

    &:disabled, &:disabled:hover {
        opacity: 0.5;
        background: lightgrey;
        border-color: grey;
        cursor: not-allowed;
        color: grey;
    }

}


.error .primary {
    border: 1px solid var(--error-color);
    background: var(--gradient-4);
    color: white;

    &:hover {
        background: white;
        color: var(--error-color);
    }
}

/* Secondary Button */
.secondary {
    border: 1px solid #ddd;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 500;

    &:hover {
        background-color: #f0f0f0;
    }
}

.btn-finish {
    background: var(--gradient-3);
    border-color: var(--valid-color-6);

    &:hover {
        color: var(--valid-color-6);
    }
}

/* Button Sizes */
.btn-sm {
    height: 1.75rem;
    font-size: 0.875rem;
}

.btn-md {
    height: 2rem;
    font-size: 1rem;
}

.btn-lg {
    height: 2.5rem;
    font-size: 1.125rem;
}

.btn-xl {
    height: 3rem;
    font-size: 1.25rem;
}



/* Button Icons */
/* Styles communs pour toutes les icônes de boutons */
.btn-icon::after {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-left: 0.5rem;
    background-color: currentColor;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    vertical-align: middle;
}

/* Icônes spécifiques (référencent les variables --icon-* de :root) */
#start-questionnaire::after,
#start-btn::after {
    mask-image: var(--icon-play);
    -webkit-mask-image: var(--icon-play);
}

#continue-btn::after {
    mask-image: var(--icon-fast-forward);
    -webkit-mask-image: var(--icon-fast-forward);
}

#restart-btn::after,
#restart-questionnaire::after,
#retry-btn::after {
    mask-image: var(--icon-restart);
    -webkit-mask-image: var(--icon-restart);
}

#send::after {
    mask-image: var(--icon-send);
    -webkit-mask-image: var(--icon-send);
}

#mesReponses::after,
#download-answers::after {
    mask-image: var(--icon-download);
    -webkit-mask-image: var(--icon-download);
}

#goto-unanswered::after {
    position: absolute;
    left: 2.5rem;
    mask-image: var(--icon-back);
    -webkit-mask-image: var(--icon-back);
}

.btn-next::after {
    position: absolute;
    right: 1rem;
    mask-image: var(--icon-arrow-right);
    -webkit-mask-image: var(--icon-arrow-right);
}

.btn-prev::after {
    position: absolute;
    left: 1rem;
    margin-left: 0;
    background-color: grey;
    mask-image: var(--icon-arrow-left);
    -webkit-mask-image: var(--icon-arrow-left);
}

.btn-finish::after {
    mask-image: var(--icon-check);
    -webkit-mask-image: var(--icon-check);
}

/* ============================================
   10. PROGRESS BAR
   ============================================ */
.progress-container {
    width: 340px;
    position: absolute;
    top: calc(10vh + 500px + 6rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
    pointer-events: none;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: #ddd;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--accent-color);
    width: calc(var(--progress) * 1%);
    transition: width 0.3s ease;
}

.progress-fill::after {
    display: block;
    position: absolute;
    content: " ";
    background-color: var(--accent-color);
    width: 9px;
    height: 9px;
    border-radius: 4px;
    left: calc(var(--progress) / 100 * (100% - 8px));
    margin-top: -2px;
    transition: left 0.3s ease;
}

.progress-text {
    color: var(--text-color);
    font-size: 0.8rem;
    line-height: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.progress-text::before {
    content: attr(data-progress) "%";
}


/* ============================================
   11. SETTINGS MENU
   ============================================ */


/* Popover paramètres (ancré au bouton cliqué via --settings-btn) */
#settings {
    /* Apparence */
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);

    /* Positionnement ancré */
    position-anchor: --settings-btn;
    position-area: bottom span-left;
    margin: initial;
    transform-origin: top center;

    /* Transition avec allow-discrete pour display et overlay */
    transition: transform, opacity, display allow-discrete, overlay allow-discrete;
    transition-duration: 0.2s;
    transition-timing-function: ease;

    /* Styles de fin (fermeture) */
    transform: translateY(-10px);
    opacity: 0;

    /* Styles ouverts */
    &:popover-open {
        transform: translateY(0);
        opacity: 1;

        @starting-style {
            transform: translateY(-10px);
            opacity: 0;
        }
    }

    & input[type="checkbox"]{
        width: 1.1rem;
        height: 1.1rem;
        cursor: pointer;
        accent-color: var(--color-4);
        flex-shrink: 0;
    }

    & label {
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text-color);
        user-select: none;
        white-space: nowrap;
    }

}


/* ============================================
   12. SETTINGS QUESTION CARD
   ============================================ */
.settings-question-card {
    position: absolute;
    top: 0.5rem;
    right: 1.7rem;
    z-index: 5000;
    opacity: 0.5;
    width: 2rem;
    height: 2rem;
    padding: 0.5rem;
    /* Évite le fondu à chaque carte (button a transition: all en global ; sur mobile l’opacité passe 0.5 → 0.9 au sélection) */
    transition: none;

    &:hover {
        opacity: 1;
        background-color: var(--bg-color);
    }

    &:hover svg {
        transform: rotate(90deg);
    }

    & svg {
        transition: transform 0.2s ease;
    }

    & svg path {
        fill: var(--accent-color);
    }
}




/* Ancre pour le popover : le bouton de la carte sélectionnée */
#carousel > article.selected .settings-question-card {
    anchor-name: --settings-btn;
}


/* ============================================
   12. FOOTER & SPECIAL STATES
   ============================================ */
#footer {
    width: calc(100% + 4rem);
    margin: 0 -2rem -2rem -2rem;
    background-color: var(--accent-color);
    border-radius: 0rem 0 3rem 3rem;
    color: white;
    text-align: center;
}

/* Error cards (validation + loading failures) */
#carousel > article.error {
    background-color: #fff0f0;
    border: 2px solid var(--error-color);
    border-radius: calc(var(--border-radius-medium) +  2px);
}

#carousel > article.error h2,
#carousel > article.error h3 {
    color: white;
    background: var(--gradient-4);
}

#carousel > article.error .error-body {
    padding: 1rem 0;
}

#carousel > article.error .error-main-message {
    margin-bottom: 1rem;
    color: var(--text-color);
}

#carousel > article.error .error-help-text {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

#carousel > article.error .error-help-list {
    text-align: left;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

#carousel > article.error .error-icon {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1rem auto;
    color: var(--error-color-5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Saved Data Notice */
.saved-data-notice {
    display: block;
}

.saved-data-notice p {
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0 0 -1rem 0;
    text-align: left;
    opacity: 0.8;
    font-style: italic;
}


/* ============================================
   13. MEDIA QUERIES - MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Augmenter la taille de base du texte */
    body {
        font-size: 18px;
    }

    /* Titres */
    h1 {
        font-size: 2rem;
        margin: 2rem 0;
    }

    article h2 {
        font-size: 1.3rem;
        padding: 0.75rem 1.5rem;
        margin: -4rem -2rem 0 -2rem;
        border-radius: 0;
    }

    /* Welcome Card */
    .welcome-intro-container {
        flex-direction: column;
        margin: 0;
    }

    /*
     * Sur étroit écran, padding 2rem 6rem laisse ~0 px pour le texte (border-box).
     * 1rem de marge intérieure réelle + titres sans compensation négative / 6rem latéral.
     */
    .welcome-card-large {
        padding: 1rem;
        border-radius: 0;
    }

    .welcome-card-large > h2 {
        margin: 0 0 0.75rem 0;
        padding: 0;
        border-radius: 0;
        font-size: 1.65rem;
    }

    /* Bloc unique : pas d’arrondi ni d’espace entre les cartes info */
    .welcome-card-large .info-cards {
        gap: 0;
        width: calc(100% + 2rem);
    }

    .welcome-card-large .info-card {
        border-radius: 0;
    }

    .info-content span {
        font-size: 0.95rem;
    }

    /* Questions */
    blockquote {
        font-size: 1.5rem;
        padding: 1.25rem;
    }

    /* Boutons */
    button {
        font-size: 1.1rem;
        padding: 1.1rem;
    }

    .btn-sm {
        font-size: 1rem;
    }

    .btn-md {
        font-size: 1.1rem;
    }

    .btn-lg {
        font-size: 1.2rem;
    }

    .btn-xl {
        font-size: 1.3rem;
    }

    /* Rating buttons */
    .rating-btn {
        font-size: 1.2rem;
    }

    .rating-labels {
        font-size: 0.9rem;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        margin-left: 0;
    }

    /* Inputs */
    .input-group input {
        font-size: 1.1rem;
        height: 1.75rem;
    }

    .input-group .placeholder {
        font-size: 1.1rem;
    }

    .input-group .placeholder.active {
        font-size: 0.85rem;
    }

    /* Carousel */
    #carousel {
        perspective: none;
        margin-top: 0;
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: hidden;
    }

    #carousel > article {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transform: none !important;
        transition: none !important;
        border-radius: 0;
        z-index: 1500;
        overflow-y: auto;
        padding: 4rem 1rem 1rem;
        box-sizing: border-box;
        background: white;
        box-shadow: none;
    }
    
    /* Bouton de paramètres en mobile */
    .global-settings {
        /*position: fixed;
        top: 1rem;
        right: 1rem;*/
        z-index: 5000;
    }

    /*
     * La barre de progression est en z-index 2000, au-dessus des cartes (1600).
     * Sans position fixed + z-index supérieur, la roue dentée reste sous la zone
     * de progression et semble « invisible ».
     */
    #carousel > article.selected .settings-question-card {
        top:1rem;
        right:2rem;
        z-index: 2100;
        opacity: 0.9;
    }

    #carousel > article.selected .question-number {
        top:2.2rem;
    }

    #carousel > article.selected .question {
        top:1rem;
        left:2rem;
        z-index: 2100;
        opacity: 0.9;
        font-size: 0.9rem;
    }

    #carousel > article.selected {
        visibility: visible;
        opacity: 1;
        z-index: 1600;
    }

    /* Progress Bar Mobile */
    .progress-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        z-index: 2000;
        border-radius: 0;
        padding: 1rem;
        /*background-color: var(--bg-color);*/
    }

    .progress-fill::after {
        left: calc(1rem + var(--progress) / 100 * (100% - 2.5rem));
    }

    .progress-text {
        font-size: 0.9rem;
        background-color: var(--col-3);
    }

    .card-settings {
        top: 6rem;
    }

    #carousel > article.selected .card-settings {
        opacity: 1;
        visibility: visible;
    }


    /* Question number */
    .question-number {
        font-size: 0.9rem;
    }
}

/* ============================================
   SECTION DE CLÔTURE (Thank You)
   ============================================ */
.thank-you-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

.thank-you-actions button {
    min-width: 200px;
}

@media (max-width: 768px) {
    .thank-you-actions {
        flex-direction: column;
    }
    
    .thank-you-actions button {
        width: 100%;
        min-width: unset;
    }
}