/* DP – Order Now
   Chaîne à 3 niveaux : variable locale → charte → repli. */

.dp-on {
    --dp-on-text: var(--dp-color-text, #303030);
    --dp-on-text-muted: var(--dp-color-text-muted, #5b5b5b);
    --dp-on-accent: var(--dp-color-primary, #61c2d0);
    --dp-on-accent-dark: var(--dp-color-primary-dark, #52a5b1);
    --dp-on-accent-soft: var(--dp-color-primary-soft, #ecf8f9);
    --dp-on-border: var(--dp-color-border, #dedede);
    --dp-on-surface: var(--dp-color-surface, #ffffff);

    position: relative;
    font-family: var(--dp-font-base, inherit);
    font-weight: var(--dp-font-base-weight, 400);
    color: var(--dp-on-text);
}

/* Décalage de l'ancre pour ne pas passer sous un header collant. */
.dp-on__anchor {
    display: block;
    position: relative;
    top: -110px;
    visibility: hidden;
}

/* ── Bandeau « autres formats » ──────────────────────────────────── */

.dp-on__formats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--dp-on-text-muted);
}

.dp-on__formats-title {
    font-weight: 600;
    color: var(--dp-on-text);
}

.dp-on__formats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-on__formats-list a {
    display: inline-block;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--dp-on-accent-deep, var(--dp-color-primary-deep, #325f66));
    background: var(--dp-on-accent-soft);
    border: 1px solid transparent;
    border-radius: var(--dp-radius-pill, 999px);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dp-on__formats-list a:hover {
    border-color: var(--dp-on-accent);
    background: var(--dp-on-surface);
}

/* ── Bouton ──────────────────────────────────────────────────────── */

.dp-on--align-center { text-align: center; }
.dp-on--align-right  { text-align: right; }

.dp-on__button {
    /* Un contexte d'empilement, pour que la couche de survol reste dans le
       bouton : elle est posée en `z-index: -1`, donc au-dessus du fond du
       bouton et sous son libellé. C'est le seul montage qui laisse intact un
       libellé qui est un nœud texte nu. */
    position: relative;
    isolation: isolate;
    display: inline-flex;
    white-space: normal;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Le pixel de la bordure disparue est rendu au rembourrage : le bouton
       garde exactement sa taille. */
    padding: 16px 33px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    /* Le texte que la charte a calculé pour cet aplat, jamais un blanc décidé
       ici : une couleur de gamme va du noir au jaune pâle, et « Acheter » en
       blanc sur jaune pâle ne se lit pas. Voir SKILL §4e. */
    color: var(--dp-btn-text, var(--dp-on-button-text, var(--dp-color-on-primary, #ffffff)));
    /* Couleur et image séparées, et non un `background` unique : c'est ce qui
       permet au grain de se mélanger au fond sans couche supplémentaire. */
    background-color: var(--dp-btn-bg, var(--dp-on-button-color, var(--dp-on-accent)));
    background-image: var(--dp-on-button-image, none);
    background-size: cover;

    /*
     * Aucune bordure, et ce n'est pas qu'une question de goût.
     *
     * La couche de survol est posée en `position: absolute; inset: 0`, ce qui la
     * cale sur la PADDING-box : une bordure, même transparente, reste donc en
     * dehors d'elle. Au survol, le dégradé s'arrêtait à un pixel du bord et
     * laissait voir tout autour un liseré de la couleur du repos — un encadré
     * que personne n'avait dessiné.
     *
     * Le fond du bouton suffit à le détacher ; s'il en fallait un, il faudrait
     * le poser sur la couche elle-même, pas sur le bouton.
     */
    border: 0;
    border-radius: var(--dp-on-button-radius, var(--dp-radius-pill, 999px));
    cursor: pointer;
    transition: filter 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.dp-on--align-stretch .dp-on__button {
    display: flex;
    width: 100%;
}

.dp-on__button:hover {
    color: var(--dp-btn-text-hover, var(--dp-on-button-text, var(--dp-color-on-primary-dark, #ffffff)));
    background-color: var(--dp-btn-bg-hover, var(--dp-on-button-color, var(--dp-on-accent-dark)));
    transform: translateY(-1px);
}

/* Accordé à la gamme, le bouton ne change pas de teinte au survol : il
   s'assombrit. La charte n'a calculé qu'une couleur de texte pour cet aplat, et
   passer à une seconde teinte demanderait un second calcul — un filtre garde le
   rapport de contraste intact. */
.dp-on--range-button .dp-on__button:hover,
.dp-on--range-button .dp-on__button:focus {
    filter: brightness(0.94);
}

/* ── Modale ──────────────────────────────────────────────────────── */

.dp-on__overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 30, 45, 0.55);
    overflow-y: auto;
}

.dp-on__overlay[hidden] {
    display: none;
}

.dp-on__modal {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto;
    padding: 40px 36px 36px;
    text-align: left;
    background: var(--dp-on-surface);
    border-radius: var(--dp-on-modal-radius, var(--dp-radius-lg, 20px));
    box-shadow: 0 24px 60px rgba(15, 30, 45, 0.3);
}

.dp-on__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--dp-on-text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dp-on__close:hover {
    color: var(--dp-on-text);
    background: var(--dp-on-accent-soft);
}

.dp-on__step {
    display: none;
}

.dp-on__step.is-active {
    display: block;
}

.dp-on__step-title {
    margin: 0 0 8px;
    font-family: var(--dp-font-heading, inherit);
    font-weight: var(--dp-font-heading-weight, 700);
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.25;
    color: var(--dp-on-text);
}

.dp-on__step-intro {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dp-on-text-muted);
}

.dp-on__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--dp-on-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.dp-on__back:hover {
    color: var(--dp-on-accent-strong, var(--dp-color-primary-strong, #417e88));
}

/* ── Étape 1 : les deux profils ──────────────────────────────────── */

.dp-on__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dp-on__choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Le reset de Hello Elementor met white-space: nowrap sur tout <button> :
       sans cela, un libellé long sort de la carte. */
    white-space: normal;
    gap: 8px;
    padding: 24px 22px;
    text-align: left;
    font-family: inherit;
    color: var(--dp-on-text);
    background: var(--dp-on-surface);
    border: 1.5px solid var(--dp-on-border);
    border-radius: var(--dp-on-card-radius, var(--dp-radius-md, 16px));
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.dp-on__choice:hover {
    /* color explicite : le thème force color:#fff sur tout button:hover, ce qui
       rendrait le libellé illisible sur ce fond clair. */
    color: var(--dp-on-text);
    border-color: var(--dp-on-accent);
    background: var(--dp-on-accent-soft);
    transform: translateY(-2px);
}

.dp-on__choice:hover .dp-on__choice-label,
.dp-on__choice:focus-visible .dp-on__choice-label {
    color: var(--dp-on-text);
}

.dp-on__choice:hover .dp-on__choice-desc,
.dp-on__choice:focus-visible .dp-on__choice-desc {
    color: var(--dp-on-text-muted);
}

.dp-on__choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--dp-on-accent-strong, var(--dp-color-primary-strong, #417e88));
    background: var(--dp-on-accent-soft);
    border-radius: 50%;
}

.dp-on__choice:hover .dp-on__choice-icon {
    background: var(--dp-on-surface);
}

.dp-on__choice-label {
    font-family: var(--dp-font-heading, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.dp-on__choice-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dp-on-text-muted);
}

/* ── Étape 2 : listes de revendeurs ──────────────────────────────── */

.dp-on__sellers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.dp-on__seller > a,
.dp-on__seller > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 96px;
    padding: 16px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--dp-on-text);
    background: var(--dp-on-surface);
    border: 1px solid var(--dp-on-border);
    border-radius: var(--dp-on-card-radius, var(--dp-radius-md, 16px));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.dp-on__seller > a:hover {
    border-color: var(--dp-on-accent);
    box-shadow: 0 8px 20px rgba(26, 51, 83, 0.1);
    transform: translateY(-2px);
}

.dp-on__seller--inactive > span {
    background: var(--dp-color-surface-alt, #fafafa);
    opacity: 0.75;
}

.dp-on__seller-logo {
    max-width: 100%;
    max-height: 38px;
    width: auto;
    object-fit: contain;
}

.dp-on__seller-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.dp-on__seller-note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--dp-on-text-muted);
}

.dp-on__seller-note--muted {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dp-on__empty {
    margin: 18px 0 0;
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dp-on-text-muted);
    background: var(--dp-color-surface-alt, #fafafa);
    border-radius: var(--dp-radius-md, 16px);
}

.dp-on__notice {
    margin: 18px 0 0;
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--dp-on-text);
    background: var(--dp-on-accent-soft);
    border-left: 3px solid var(--dp-on-accent);
    border-radius: var(--dp-radius-sm, 10px);
}

.dp-on__all-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--dp-on-accent-strong, var(--dp-color-primary-strong, #417e88));
}

.dp-on__all-link:hover {
    color: var(--dp-on-accent-deep, var(--dp-color-primary-deep, #325f66));
}

@media (max-width: 600px) {
    .dp-on__overlay {
        padding: 0;
    }

    .dp-on__modal {
        max-width: none;
        min-height: 100%;
        padding: 56px 20px 32px;
        border-radius: 0;
    }

    .dp-on__choices {
        grid-template-columns: 1fr;
    }
}

/* ── État de focus ────────────────────────────────────────────────
   Le thème repeint tout <button>:hover/:focus en aplat foncé
   (main.css → :is([type="button"], [type="submit"], button)). Les boutons de
   ce bloc gardent donc leur propre traitement, avec un anneau de focus
   visible au clavier. */

/* `:focus-visible` et non `:focus`.
   ---------------------------------------------------------------------------
   Ces règles peignent l'état de survol. Sur `:focus`, elles s'appliquaient dès
   qu'un élément recevait le focus par un autre chemin que le clavier — et le
   premier choix de la modale, que le script focalisait à l'ouverture, se
   présentait donc comme déjà sélectionné.

   `:focus-visible` ne se déclenche que lorsque le navigateur juge l'indication
   utile, c'est-à-dire au parcours clavier. La souris n'allume plus rien. */

.dp-on__button:focus-visible {
    color: var(--dp-btn-text-hover, var(--dp-on-button-text, var(--dp-color-on-primary-dark, #ffffff)));
    background-color: var(--dp-btn-bg-hover, var(--dp-on-button-color, var(--dp-on-accent-dark)));
}

.dp-on__choice:focus-visible {
    color: var(--dp-on-text);
    background: var(--dp-on-accent-soft);
    border-color: var(--dp-on-accent);
}

.dp-on__close:focus-visible {
    color: var(--dp-on-text);
    background: var(--dp-on-accent-soft);
}

.dp-on__back:focus-visible {
    color: var(--dp-on-accent-strong, var(--dp-color-primary-strong, #417e88));
    background: transparent;
    border-color: transparent;
}

.dp-on__button:focus-visible,
.dp-on__choice:focus-visible,
.dp-on__close:focus-visible,
.dp-on__back:focus-visible {
    outline: 3px solid var(--dp-on-accent);
    outline-offset: 2px;
}

/* ── Le grain du bouton ────────────────────────────────────────────────────
   Le même grain de pellicule que celui des dégradés de la charte.

   Il est mélangé au fond — `background-blend-mode` — et non posé en couche
   au-dessus. C'est ce qui le distingue du montage de `nouvelle-charte.css` §9,
   et la raison est dans le balisage : le libellé du bouton est un nœud texte
   nu, pas un élément. Une couche en pseudo-élément lui serait passée dessus, et
   rien ne permet de le remonter d'un cran sans l'envelopper.

   Mélangé au fond, le grain ne touche ni le libellé ni l'icône. Sur un aplat il
   n'y a qu'une couche d'image — la tuile — qui se mélange à la couleur ; sur un
   dégradé de gamme il y en a deux, et seule la première porte le mélange.

   Sans la tuile — pas de GD sur le serveur —, `--dp-grain` est vide : le fond
   reste un aplat franc, et c'est tout ce qu'on perd. */

.dp-on--grained .dp-on__button {
    background-image: var(--dp-grain), var(--dp-on-button-image, none);
    background-size: var(--dp-grain-size, 128px), cover;
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light, normal;
    image-rendering: pixelated;
}

/* `image-rendering` vaut pour la tuile, pas pour le dégradé qu'elle recouvre :
   remis à la normale dès qu'il y a un dégradé dessous, sinon ses bandes
   deviennent visibles. */
.dp-on--grained.dp-on--range-button .dp-on__button {
    image-rendering: auto;
}

/* ── Le survol accordé à la gamme ──────────────────────────────────────────
   Le bouton peut rester sur l'accent de la charte au repos — donc identique
   d'un bout à l'autre du site — et ne révéler la couleur de sa gamme qu'au
   survol.

   ── Pourquoi une couche et non un changement de fond ──
   `background-image` ne s'interpole pas : passer d'un aplat à un dégradé par
   une simple transition donne une bascule sèche. La couche, elle, se fond en
   opacité, et c'est ce fondu qui fait la douceur.

   Elle est en `z-index: -1` dans un bouton isolé : au-dessus de son fond, sous
   son libellé. Le grain est mélangé DANS la couche — `background-blend-mode`,
   entre ses deux images — et non par `mix-blend-mode` avec ce qu'il y a
   dessous : un enfant en z-index négatif ne voit pas le fond de son parent
   isolé comme arrière-plan de mélange. */

.dp-on--hover-accord .dp-on__button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;

    background-color: var(--dp-btn-bg-hover, var(--dp-on-button-hover-color, transparent));
    background-image: var(--dp-on-button-hover-image, none);
    background-repeat: no-repeat;

    /* Plus large que le bouton : c'est cette marge qui donne au dégradé de quoi
       dériver sans jamais laisser voir son bord. */
    background-size: 220% 220%;
    background-position: 0% 50%;

    opacity: 0;
    transition: opacity 0.35s var(--dp-ease, cubic-bezier(.4, 0, .2, 1));
}

.dp-on--hover-accord .dp-on__button:hover::before,
.dp-on--hover-accord .dp-on__button:focus-visible::before {
    opacity: 1;
}

/* Le grain du survol : mélangé aux images de la couche, pas posé par-dessus. */
.dp-on--hover-grained .dp-on__button::before {
    background-image: var(--dp-grain), var(--dp-on-button-hover-image, none);
    background-size: var(--dp-grain-size, 128px), 220% 220%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, 0% 50%;
    background-blend-mode: soft-light, normal;
}

/* Le libellé prend l'encre calculée pour l'aplat du survol : un bouton qui
   passe d'un cyan soutenu à un jaune pâle change d'encre en même temps que de
   fond. */
.dp-on--hover-accord .dp-on__button:hover,
.dp-on--hover-accord .dp-on__button:focus {
    color: var(--dp-btn-text-hover, var(--dp-on-button-hover-text, var(--dp-on-button-text, inherit)));
    /* Le fond du bouton ne bouge pas : c'est la couche qui peint. Sans cela, on
       verrait la couleur du repos s'assombrir derrière le fondu. */
    background-color: var(--dp-btn-bg-hover, var(--dp-on-button-color, var(--dp-on-accent)));
    filter: none;
}

/* ── La dérive du dégradé ──────────────────────────────────────────────────
   Le dégradé glisse en diagonale le temps du survol, très lentement : douze
   secondes pour un aller-retour, sur une course de 100 % dans une image large
   de 220 %. Assez pour que la couleur vive, trop lent pour attirer l'œil — un
   fond qui bouge vite se lit comme une erreur d'affichage.

   Seule la position bouge, et seulement celle du dégradé : le grain reste
   ancré, sinon la pellicule se met à ramper sur le bouton. */

@keyframes dp-on-derive {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes dp-on-derive-grain {
    0%   { background-position: 0 0, 0% 50%; }
    50%  { background-position: 0 0, 100% 50%; }
    100% { background-position: 0 0, 0% 50%; }
}

.dp-on--hover-motion .dp-on__button:hover::before,
.dp-on--hover-motion .dp-on__button:focus-visible::before {
    animation: dp-on-derive 12s ease-in-out infinite;
}

.dp-on--hover-motion.dp-on--hover-grained .dp-on__button:hover::before,
.dp-on--hover-motion.dp-on--hover-grained .dp-on__button:focus-visible::before {
    animation-name: dp-on-derive-grain;
}

/* Qui a demandé moins d'animations garde le fondu — il dure un tiers de
   seconde et ne se répète pas — mais pas la dérive, qui tourne en boucle. */
@media (prefers-reduced-motion: reduce) {
    .dp-on--hover-motion .dp-on__button:hover::before,
    .dp-on--hover-motion .dp-on__button:focus-visible::before,
    .dp-on--hover-motion.dp-on--hover-grained .dp-on__button:hover::before,
    .dp-on--hover-motion.dp-on--hover-grained .dp-on__button:focus-visible::before {
        animation: none;
    }
}

/* ── L'ouverture de la modale ──────────────────────────────────────────────
   Deux mouvements, et pas un de plus : le voile se pose, la fenêtre monte de
   huit pixels en se révélant.

   ── Pourquoi une animation et non une transition ──
   La modale est masquée par l'attribut `hidden`, donc par `display: none`. Une
   transition ne part jamais de là : la propriété change dans le même cycle que
   l'affichage, et le navigateur peint directement l'état d'arrivée. Une
   animation, elle, se joue à l'apparition de l'élément — et se rejoue à chaque
   réouverture, sans que le script ait à s'en occuper.

   L'accélération est une sortie exponentielle : rapide au départ, longuement
   freinée. C'est ce qui donne l'impression que la fenêtre se pose au lieu de
   s'arrêter net. Huit pixels et deux centièmes d'échelle suffisent — au-delà,
   le mouvement se remarque, et une modale qui se remarque retarde la lecture.

   La fermeture n'est pas animée : elle doit être instantanée. Une fenêtre qui
   s'attarde après un clic sur « fermer » se lit comme une lenteur. */

@keyframes dp-on-voile {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dp-on-fenetre {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dp-on__overlay:not([hidden]) {
    animation: dp-on-voile 0.2s ease both;
}

.dp-on__overlay:not([hidden]) .dp-on__modal {
    animation: dp-on-fenetre 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Qui a demandé moins d'animations garde le fondu du voile — il situe la
   modale sans rien déplacer — et perd le mouvement de la fenêtre. */
@media (prefers-reduced-motion: reduce) {
    .dp-on__overlay:not([hidden]) .dp-on__modal {
        animation: dp-on-voile 0.2s ease both;
    }
}

/* La fenêtre reçoit le focus à l'ouverture — c'est ce qui fait annoncer son
   titre par un lecteur d'écran, et ce qui évite de désigner un choix avant que
   le lecteur n'ait lu la question. Elle n'est pas interactive pour autant : pas
   de contour. */
.dp-on__modal:focus {
    outline: none;
}