/* Eldorado Demos — gabarit de la démo pas à pas.
 *
 * Les couleurs suivent les jetons du thème quand il en expose (--eldorado-*),
 * avec des replis neutres pour une installation chez un autre client.
 *
 * ⚠️ TOUS les sélecteurs sont ancrés sur `.eldodemo-page`, et ce n'est pas une
 * coquetterie : le thème du site habille ses titres et ses liens par des
 * sélecteurs à une classe et un élément (`.eldorado-design h1`, `html.dark a`,
 * spécificité 0,1,1). Une règle à une seule classe (0,1,0) perd contre eux, en
 * silence. Avec la racine devant, on est à 0,2,0 et la règle passe, sans
 * recourir à !important. Toute règle ajoutée ici doit garder ce préfixe.
 *
 * ⚠️ Les variables --eldodemo-* ne sont pas sur :root : le plugin ne salit pas
 * l'espace de noms du site. Elles sont portées par la liste de racines
 * ci-dessous ; tout nouveau composant de premier niveau doit y être ajouté,
 * sinon var(--eldodemo-accent) sort vide et la règle entière est abandonnée.
 */

.eldodemo-page, .eldodemo-page .eldodemo-hero, .eldodemo-page .eldodemo-autres{
    --eldodemo-accent: var(--eldorado-accent, #1e3a8a);
    --eldodemo-sur-accent: var(--eldorado-sur-accent, #ffffff);
    --eldodemo-surface: var(--eldorado-surface, #ffffff);
    --eldodemo-fond: var(--eldorado-fond, #f5f8fd);
    --eldodemo-bordure: var(--eldorado-bordure, #e1e8f4);
    --eldodemo-doux: var(--eldorado-texte-doux, #4a5568);
    --eldodemo-rayon: var(--eldorado-rayon-bloc, 16px);
    --eldodemo-large: 1200px;
    --eldodemo-cote: 260px;
    --eldodemo-gouttiere: 48px;
    --eldodemo-chassis: #0e1b2e;
    font-family: var(--eldorado-police-texte, inherit);
}

.eldodemo-page *, .eldodemo-page *::before, .eldodemo-page *::after{ box-sizing: border-box; }

/* 100vw compte la barre de défilement, donc le calque du bandeau dépasse de sa
   largeur. `clip` recoupe ce débordement — et, contrairement à `hidden`,
   n'établit pas de conteneur de défilement : la colonne de gauche reste collante. */
.eldodemo-page{ overflow-x: clip; }

/* Pas de gouttière ici : le gabarit vit dans le conteneur du thème, qui en
   pose déjà une. En ajouter une seconde rétrécirait le contenu de 64 px par
   rapport au reste du site. */
.eldodemo-page .eldodemo-large{
    width: 100%;
    max-width: var(--eldodemo-large, 1200px);
    margin: 0 auto;
}

/* --- Bandeau de tête --------------------------------------------------- */

/* Le fond du bandeau traverse l'écran alors que son texte reste dans la
   grille : on le peint avec un calque en 100vw plutôt que de sortir le bloc
   du conteneur, ce qui casserait l'alignement avec le reste de la page. */
.eldodemo-page .eldodemo-hero{
    position: relative;
    padding: 24px 0 32px;
}

.eldodemo-page .eldodemo-hero::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background-color: var(--eldodemo-surface);
    border-bottom: 1px solid var(--eldodemo-bordure);
    z-index: -1;
}

.eldodemo-page .eldodemo-ariane{
    margin: 0 0 14px;
    font-size: 0.875rem;
    color: var(--eldodemo-doux);
}

.eldodemo-page .eldodemo-ariane a{ color: inherit; }
.eldodemo-page .eldodemo-ariane-sep{ margin: 0 4px; opacity: 0.6; }

.eldodemo-page .eldodemo-hero-corps{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.eldodemo-page .eldodemo-hero-texte{ flex: 1 1 420px; min-width: 0; }

.eldodemo-page .eldodemo-surtitre{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    padding: 5px 10px;
    border-radius: var(--eldorado-rayon-etiquette, 6px);
    background-color: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.eldodemo-page .eldodemo-titre{
    margin: 0 0 12px;
    font-family: var(--eldorado-police-titres, inherit);
    font-size: 2.875rem; /* 46 px, la valeur de la maquette ; 34 px sous 860 */
    font-weight: 600;
    line-height: 1.1;
}

.eldodemo-page .eldodemo-chapo{
    margin: 0 0 16px;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--eldodemo-doux);
}

.eldodemo-page .eldodemo-reperes{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--eldodemo-doux);
}

.eldodemo-page .eldodemo-reperes > span{
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.eldodemo-page .eldodemo-icone{ flex-shrink: 0; color: var(--eldodemo-accent); }

/* La vidéo n'est chargée qu'au clic : le bouton porte la vignette. */
.eldodemo-page .eldodemo-video{ flex: 0 0 360px; max-width: 100%; }

.eldodemo-page .eldodemo-video-lancer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid var(--eldodemo-bordure);
    border-radius: var(--eldodemo-rayon);
    background-color: var(--eldodemo-fond);
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.eldodemo-page .eldodemo-video-fleche{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--eldodemo-accent);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-position: 56% center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
}

.eldodemo-page .eldodemo-video iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--eldodemo-rayon);
}

/* --- Corps : colonne de gauche + étapes -------------------------------- */

.eldodemo-page .eldodemo-corps{
    display: flex;
    align-items: flex-start;
    gap: var(--eldodemo-gouttiere);
    padding-top: 36px;
}

.eldodemo-page .eldodemo-cote{
    display: flex;
    flex: 0 0 var(--eldodemo-cote);
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.eldodemo-page .eldodemo-contenu{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 22px;
    /* Dans un conteneur flex, un enfant garde min-width:auto et s'élargit à la
       taille de son plus large contenu : une capture large déborderait la page. */
    min-width: 0;
}

/* --- Sommaire ----------------------------------------------------------- */

.eldodemo-page .eldodemo-sommaire{
    padding: 20px;
    border: 1px solid var(--eldodemo-bordure);
    border-radius: 14px;
    background-color: var(--eldodemo-surface);
}

.eldodemo-page .eldodemo-sommaire-titre{
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eldodemo-accent);
}

.eldodemo-page .eldodemo-sommaire-lien{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}

.eldodemo-page .eldodemo-sommaire-lien:hover, .eldodemo-page .eldodemo-sommaire-lien:focus-visible{ text-decoration: underline; }

.eldodemo-page .eldodemo-sommaire-numero{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background-color: color-mix(in srgb, var(--eldodemo-accent) 14%, transparent);
    color: var(--eldodemo-accent);
    font-size: 0.8125rem;
    font-weight: 800;
}

/* Étape en cours de lecture, posée par le script. */
.eldodemo-page .eldodemo-sommaire-lien.est-courante{ font-weight: 700; }
.eldodemo-page .eldodemo-sommaire-lien.est-courante .eldodemo-sommaire-numero{
    background-color: var(--eldodemo-accent);
    color: var(--eldodemo-sur-accent);
}

/* --- Avant de commencer -------------------------------------------------- */

.eldodemo-page .eldodemo-prerequis{
    padding: 20px 24px;
    border: 1px solid var(--eldodemo-bordure);
    border-radius: var(--eldodemo-rayon);
    background-color: var(--eldodemo-surface);
}

.eldodemo-page .eldodemo-prerequis-titre{
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eldodemo-accent);
}

.eldodemo-page .eldodemo-prerequis-liste{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eldodemo-page .eldodemo-prerequis-liste li{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9375rem;
}

/* --- Une étape ----------------------------------------------------------- */

.eldodemo-page .eldodemo-etapes{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.eldodemo-page .eldodemo-etape{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding: 24px;
    border: 1px solid var(--eldodemo-bordure);
    border-radius: var(--eldodemo-rayon);
    background-color: var(--eldodemo-surface);
    /* L'ancre du sommaire ne doit pas passer sous un en-tête collant. */
    scroll-margin-top: 90px;
}

.eldodemo-page .eldodemo-capture{
    display: flex;
    flex: 0 0 180px;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 180px;
    height: 360px;
    padding: 12px;
    /* Châssis de téléphone : une couleur d'appareil, pas le bleu de la marque
       (la maquette donne #0E1B2E). L'écran, lui, suit le fond de la page. */
    border: 7px solid var(--eldodemo-chassis, #0e1b2e);
    border-radius: 28px;
    background-color: color-mix(in srgb, var(--eldodemo-surface) 70%, var(--eldodemo-bordure));
    overflow: hidden;
}

.eldodemo-page .eldodemo-capture-image{
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
}

.eldodemo-page .eldodemo-capture-vide{
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
    color: var(--eldodemo-doux);
}

.eldodemo-page .eldodemo-etape-texte{ flex: 1 1 300px; min-width: 0; }

.eldodemo-page .eldodemo-etape-rang{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
}

.eldodemo-page .eldodemo-etape-pastille{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--eldodemo-accent);
    color: var(--eldodemo-sur-accent);
    font-family: var(--eldorado-police-titres, inherit);
    font-size: 1.375rem;
    font-weight: 700;
}

.eldodemo-page .eldodemo-etape-compte{
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eldodemo-doux);
}

.eldodemo-page .eldodemo-etape-titre{
    margin: 0 0 10px;
    font-family: var(--eldorado-police-titres, inherit);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.eldodemo-page .eldodemo-etape-corps p{
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.6;
}
.eldodemo-page .eldodemo-etape-corps p:last-child{ margin-bottom: 0; }

.eldodemo-page .eldodemo-astuce{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--eldodemo-accent) 8%, transparent);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.eldodemo-page .eldodemo-astuce .eldodemo-icone{ margin-top: 2px; }

/* --- Autres démos --------------------------------------------------------- */

.eldodemo-page .eldodemo-autres{ padding: 40px 0 48px; }

.eldodemo-page .eldodemo-autres-titre{
    margin: 0 0 18px;
    font-family: var(--eldorado-police-titres, inherit);
    font-size: 1.75rem;
    font-weight: 600;
}

.eldodemo-page .eldodemo-autres-liste{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.eldodemo-page .eldodemo-autre{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--eldodemo-bordure);
    border-radius: var(--eldodemo-rayon);
    background-color: var(--eldodemo-surface);
    color: inherit;
    text-decoration: none;
}

.eldodemo-page .eldodemo-autre-vignette{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background-color: var(--eldodemo-fond);
    overflow: hidden;
}

.eldodemo-page .eldodemo-autre-vignette img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eldodemo-page .eldodemo-autre-fleche{
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--eldodemo-accent);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-position: 56% center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

.eldodemo-page .eldodemo-autre-titre{
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.eldodemo-page .eldodemo-autre-reperes{
    font-size: 0.8125rem;
    color: var(--eldodemo-doux);
}

/* --- Écrans étroits -------------------------------------------------------- */

@media (max-width: 860px) {
    .eldodemo-page .eldodemo-titre { font-size: 2.125rem; }

    .eldodemo-page .eldodemo-corps{ display: block; }
    .eldodemo-page .eldodemo-cote{
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 22px;
    }
}

@media (max-width: 600px) {
    .eldodemo-page .eldodemo-large{ padding: 0 16px; }
    .eldodemo-page .eldodemo-etape{ padding: 16px; gap: 18px; }
    .eldodemo-page .eldodemo-capture{
        flex-basis: auto;
        width: 100%;
        max-width: 220px;
        height: auto;
        aspect-ratio: 1 / 2;
        margin: 0 auto;
    }
    .eldodemo-page .eldodemo-prerequis{ padding: 16px; }
    .eldodemo-page .eldodemo-video{ flex-basis: 100%; }
}