/*
 * EDOUK V2 — App Stylesheet
 * V2 overrides loaded after edouk.css. Cascade wins.
*/
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 160 700;
    font-display: swap;
    src: url("/fonts/readexpro-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: "Readex Pro";
    font-style: normal;
    font-weight: 160 700;
    font-display: swap;
    src: url("/fonts/readexpro-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 160 700;
    font-display: swap;
    src: url("/fonts/readexpro-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE9F, U+10E60-10E7F, U+1EE00-1EEFF;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ubuntu-400-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: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ubuntu-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ubuntu-500-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: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ubuntu-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ubuntu-700-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: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ubuntu-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Noto Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/notosansarabic-400.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Noto Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/notosansarabic-500.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/rubik-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/rubik-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/rubik-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/cairo-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/cairo-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/cairo-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    color: var(--accent-color);
    font-size: var(--font-m);
    font-family: "Inter", "Ubuntu", sans-serif;
}
[lang="ar"] * {
    font-family: "Cairo", "Noto Sans Arabic", "Inter", sans-serif;
}
/* ========================================
   LE THÈME — sombre par défaut, clair sur demande

   Le sombre vit dans `:root`. Il est donc servi sans attribut, sans script et
   sans flash : la page est déjà dans le bon thème au premier pixel peint.

   Le clair est un choix du vendeur, porté par `data-theme="light"` sur <html>.
   Ses valeurs sont celles d'avant le pivot, recopiées à l'identique — c'est ce
   qui garantit qu'il ne régresse pas d'un pixel.

   SEULES LES COULEURS ont deux jeux. La typographie, les rayons, les transitions
   et les trois variables dérivées (`--border`, `--border-soft`, `--box-shadow`)
   ne sont déclarées qu'ici : elles pointent vers des couleurs qui, elles,
   changent, donc elles suivent toutes seules.
   ======================================== */
:root {
    /* === COULEURS BASE === */
    --default-color: #e8eefc;
    --accent-color: #93a7c8;
    --primary-color: #7aa2ff;
    --primary-color-dark: #316bff;
    --secondary-color: #ff8600;
    --background-color: #0b1222;
    --background-grey: #141d33;

    /* === BTN PRIMARY (legacy aliases — gardés pour cascade safety) === */
    --btn-primary-250: #93b6ff;
    --btn-primary-275: #87acff;
    --btn-primary-300: #7aa2ff;
    --btn-primary-325: #6d99ff;
    --btn-primary-350: #5f8fff;
    --btn-primary-450: #316bff;

    /* === GREYS / SLATE (8 niveaux) ===
       L'échelle est RETOURNÉE : `--grey-50` reste le fond le plus discret, mais
       c'est désormais le plus sombre, et `--grey-700` reste le texte le plus
       marqué, donc le plus clair. Les règles qui s'en servent n'ont pas à savoir
       dans quel thème elles sont. */
    --grey-50:  #141d33;
    --grey-100: #1b2540;
    --grey-200: #243050;
    --grey-300: #33415f;
    --grey-400: #6b7c9e;
    --grey-500: #8b9bbb;
    --grey-600: #a7b5d0;
    --grey-700: #c3cfe4;

    /* === BACKGROUND TINTÉS (mesh / cards) === */
    --bg-page:       #080d1a;
    --bg-card:       #0b1222;
    --bg-card-tint:  #101a2e;
    --bg-modal:      #0e1729;
    --bg-soft:       rgba(49, 107, 255, 0.12);

    /* === LE VERRE ===
       Une carte qui ne pose pas sa propre couleur : elle éclaircit ce qu'il y a
       dessous. Sur le fond encre du tableau de bord ça donne une surface qui se
       détache sans jamais devenir un aplat, et les halos du mesh continuent de
       transparaître au travers.

       En clair il n'y a rien à éclaircir — la carte redevient blanche et le survol
       ne bouge pas, exactement comme avant le pivot. */
    --glass:              rgba(255, 255, 255, 0.045);
    --glass-hover:        rgba(255, 255, 255, 0.07);
    --glass-border:       rgba(220, 229, 251, 0.14);
    --glass-border-hover: rgba(122, 162, 255, 0.35);
    /* Un CONTRÔLE posé sur une carte de verre. Il partage les deux bordures et le
       fond de repos, mais réagit deux fois plus fort au survol : sinon un bouton
       s'éclaircit autant que la carte qui le porte, et le geste ne se distingue
       plus de la surface. */
    --glass-hover-strong: rgba(255, 255, 255, 0.10);
    /* Ce qui se pose DANS ce contrôle. Sur le verre sombre, le libellé prend le
       blanc du texte courant et l'icône le bleu de l'interface — c'est elle qui dit
       de quelle commande il s'agit. En clair les deux restent gris ardoise, comme
       avant le pivot. */
    --glass-text:         var(--default-color);
    --glass-icon:         var(--primary-color);

    /* L'onglet courant de la navigation. Plus dense que `--bg-soft`, qui se dilue
       sur le verre du conteneur au point de ne plus distinguer l'onglet actif. */
    --nav-active-bg:      rgba(49, 107, 255, 0.20);
    --nav-active-text:    var(--primary-color);

    /* LA NOTIFICATION FLOTTE, DONC ELLE EST OPAQUE.
       Partout ailleurs un fond d'état est un voile translucide : il se compose avec
       la surface qui le porte, et on sait laquelle. Une notification, elle, passe
       au-dessus de n'importe quoi — le mesh, une carte, un tableau. Un voile y
       laisserait la page traverser et le texte deviendrait illisible.

       Les deux valeurs sont donc les teintes composées à l'avance sur le fond de
       page, figées en opaque. */
    --notification-bg:        #141f38;
    --notification-danger-bg: #2a1119;

    /* === LA ZONE DE DÉPÔT ===
       Le voile recouvre le mur de vignettes qui la remplit : sans lui le texte
       passerait par-dessus des hachures et deviendrait illisible. */
    --dropzone-bg:      rgba(255, 255, 255, 0.03);
    --dropzone-border:  rgba(122, 162, 255, 0.35);
    --dropzone-veil:    rgba(11, 17, 32, 0.82);
    --dropzone-icon-bg: rgba(49, 107, 255, 0.18);

    /* === L'ÉTAT D'UNE PAGE ===
       Deux verts et deux rouges, pas un de chaque : le libellé doit être clair pour
       se lire sur fond sombre, la pastille plus dense pour rester une pastille. Avec
       une seule teinte, soit le mot est terne, soit le point se dilue.

       En clair les deux valeurs se rejoignent sur la sémantique d'origine — c'est
       le contraste du fond qui faisait déjà le travail. */
    --status-online:      #4ade80;
    --status-online-dot:  #16a34a;
    --status-offline:     #f87171;
    --status-offline-dot: #dc2626;

    /* Ce qui se pose SUR une surface colorée — le texte d'un bouton primaire, une
       icône dans un en-tête de modale, la pastille d'un interrupteur. Blanc dans
       les deux thèmes : sur un fond de marque ou d'erreur, il se lit toujours. */
    --on-accent:     #ffffff;

    /* LE BOUTON D'ACTION GARDE LE BLEU DE LA MARQUE, dans les deux thèmes.
       `--primary-color` s'éclaircit en sombre pour rester lisible en TEXTE sur du
       bleu nuit ; un bouton, lui, est une surface pleine avec du blanc dessus, il
       n'a pas ce problème. L'éclaircir le ferait juste pâlir, et le geste principal
       de chaque écran perdrait la couleur à laquelle le vendeur le reconnaît. */
    --cta:           #316bff;
    --cta-hover:     #0037d6;

    /* La page du vendeur, telle que son visiteur la voit : le fond de l'iframe de
       preview, la capture de la landing, la page abstraite de la relecture. Elle ne
       suit PAS le thème du tableau de bord — c'est une boutique, pas notre outil. */
    --paper:         #ffffff;

    /* === COULEURS SÉMANTIQUES ===
       Les couleurs pleines remontent en luminosité pour rester lisibles sur fond
       sombre, et les fonds `-light` deviennent des voiles translucides : une
       pastille pâle opaque ferait une tache sur une carte sombre. */
    --success:        #3ddc84;
    --success-dark:   #2bb96a;
    /* LE FOND PLEIN D'UN RETOUR, sous du texte blanc — le bouton qui vient de dire
       « enregistré », celui qui vient d'échouer.

       Il ne peut pas être `--success-dark` : en sombre, ce token sert de COULEUR DE
       TEXTE sur fond foncé, il doit donc être clair, et du blanc posé dessus tombe
       à 2,4:1. Ici c'est l'inverse qu'il faut — assez profond pour porter du blanc,
       soit 4,4:1 pour le vert et 5,8:1 pour le rouge. */
    --success-solid:  #15803d;
    /* Le fond translucide part de la COULEUR PLEINE du système ( #16a34a ), pas de
       la version éclaircie au-dessus. L'éclaircie sert au texte, où elle est ce qui
       fait passer le contraste au-dessus de 7:1 sur fond encre ; en fond, elle
       délave la pastille au lieu de la teinter. */
    --success-light:  rgba(22, 163, 74, 0.16);
    --success-text:   #7ff0b0;

    --error:          #ff6b6b;
    --error-dark:     #ff8585;
    --error-solid:    #b91c1c;
    /* Même principe : la teinte vient de #dc2626, la couleur pleine. */
    --error-light:    rgba(220, 38, 38, 0.16);

    --warning:        #e8b52e;
    --warning-dark:   #ff8a4c;
    --warning-light:  rgba(232, 181, 46, 0.16);
    --warning-bg:     rgba(232, 181, 46, 0.08);
    /* Le texte de la consigne de retouche. En clair il s'obtient en assombrissant
       l'ambre ; sur fond sombre il faut l'éclaircir, donc les deux thèmes ne
       peuvent pas partager une seule formule. */
    --warning-text:   #f5cf6b;

    --info:           #7aa2ff;
    --info-light:     rgba(122, 162, 255, 0.18);
    --info-bg:        rgba(122, 162, 255, 0.08);

    /* === TEINTES D'ACCENT ===
       Les familles décoratives : la pastille d'un accordéon, la puce d'un tableau,
       la carte d'un réglage, l'icône d'une fonctionnalité. Même forme que les
       sémantiques ci-dessus — la couleur pleine, sa version claire pour un fond.

       AUCUNE N'EST FUSIONNÉE avec une voisine, même quand deux teintes sont
       proches : ce sont les valeurs exactes déjà en place côté clair, elles ne
       changent pas d'un pixel. Elles n'existent en variables que pour ça. */

    /* Violet — le module de retouche, les cartes lavande, le badge d'inscription */
    --violet:         #a78bfa;
    --violet-dark:    #8b5cf6;
    /* Les fonds pleins qui portent du blanc, même logique que `--success-solid` :
       les deux tokens ci-dessus sont des couleurs de TEXTE en sombre, donc clairs,
       et du blanc posé dessus tombe à 2,2:1. Ici il faut l'inverse. */
    --violet-solid:       #6d28d9;
    --violet-solid-hover: #5b21b6;
    --violet-light:   rgba(167, 139, 250, 0.16);
    --violet-bg:      rgba(167, 139, 250, 0.08);
    --violet-border:  rgba(167, 139, 250, 0.30);
    --violet-soft:    #c4b5fd;

    /* Pourpre — les accordéons, les puces de tableau, le rappel de rotation */
    --purple:         #c084fc;
    --purple-strong:  #d8b4fe;
    --purple-solid:   #7e22ce;
    --purple-light:   rgba(192, 132, 252, 0.18);
    --purple-bg:      rgba(192, 132, 252, 0.08);
    --purple-pale:    rgba(192, 132, 252, 0.12);

    /* Orange — la carte « offres », la puce de commande, l'icône ambre */
    --orange-light:   rgba(255, 138, 76, 0.16);
    --orange-bg:      rgba(255, 138, 76, 0.08);
    --orange-border:  rgba(255, 138, 76, 0.30);
    --orange-pill-bg:   rgba(255, 138, 76, 0.14);
    --orange-pill-text: #ffb27a;
    --amber:          #f0b429;
    --amber-light:    rgba(240, 180, 41, 0.16);
    --amber-soft:     rgba(240, 180, 41, 0.28);

    /* Verts — l'interrupteur, la légende des commandes, l'icône de fonctionnalité */
    --green-switch:   #6fc44a;
    --green-orders:      #4fd48a;
    --green-orders-icon: #3ddc84;
    --green-orders-bg:   rgba(61, 220, 132, 0.16);
    --green-feature:      #34d399;
    --green-feature-from: rgba(52, 211, 153, 0.18);
    --green-feature-to:   rgba(52, 211, 153, 0.28);
    --green-card-bg:  rgba(61, 220, 132, 0.07);

    /* Bleus tintés — les fonds de la liste des pages, les filets de tableau.
       L'échelle est retournée comme celle des gris : plus le numéro monte, plus la
       surface s'éclaire en clair, plus elle se détache en sombre. */
    --blue-tint-50:   #0b1222;
    --blue-tint-100:  #0d1526;
    --blue-tint-150:  #101a2e;
    --blue-tint-200:  #121d33;
    --blue-tint-250:  #141f38;
    --blue-tint-300:  rgba(220, 229, 251, 0.12);
    --blue-tint-350:  #1a2544;
    --blue-tint-400:  #1d2a4d;
    --blue-tint-450:  #1f2d52;
    --blue-tint-500:  #223159;
    --blue-tint-550:  rgba(122, 162, 255, 0.28);
    --blue-tint-600:  #25355f;
    --blue-visits:      #7aa2ff;
    --blue-visits-icon: #93b6ff;
    --blue-visits-bg:   rgba(122, 162, 255, 0.18);

    /* Rouges hors sémantique — l'accordéon rouge, le bouton supprimer */
    --red-accordion-icon: rgba(255, 107, 107, 0.22);
    --red-accordion-bg:   rgba(255, 107, 107, 0.07);
    --red-deep:           #ff9494;

    /* Gris hors échelle — les ascenseurs, deux textes atténués, un pied de page */
    --grey-track:     #243050;
    --grey-scrollbar: #4a5a7a;
    --grey-scrollbar-track: #33415f;
    --grey-bullet:    #243050;
    --grey-text-mid:  #93a7c8;
    --grey-text-soft: #7e8fae;
    --grey-ink:       #c3cfe4;

    /* Le voile derrière une modale. Il ne se comporte ni comme une ombre ni comme
       une surface : il assombrit ce qu'il y a dessous, quel que soit le thème. */
    --overlay:        rgba(0, 0, 0, 0.72);

    /* === L'EN-TÊTE DE MODALE ===
       En clair c'est un bandeau de marque, plein. En sombre le même aplat ferait
       un bloc de couleur au-dessus d'une surface nuit : il devient un voile de
       bleu posé SUR la surface de la modale, fermé par un filet. */
    --modal-head-bg:     rgba(49, 107, 255, 0.14);
    --modal-head-border: rgba(220, 229, 251, 0.12);
    --modal-head-sub:    #a8bde0;
    --modal-head-price:  #7aa2ff;

    /* === LE MESH DE LA PAGE ===
       Il vit sur le <body> et nulle part ailleurs. Deux halos sur mobile, trois à
       partir de 992px ( voir la media query sous le bloc clair ) : sur un écran
       étroit, quatre sources se chevauchent et la page vire au bleu uniforme.

       C'est un TOKEN et non une règle : le point de rupture réécrit sa valeur, et
       tout ce qui s'en sert suit sans avoir à redéclarer quoi que ce soit. */
    --page-mesh:
        radial-gradient(at 50% -12%, rgba(49, 107, 255, .22) 0, transparent 58%),
        radial-gradient(at 50% 104%, rgba(123, 44, 191, .10) 0, transparent 52%);

    /* Le document qui s'écrit pendant la génération : une console, pas une surface
       du tableau de bord. Elle est sombre dans les deux thèmes, ses quatre couleurs
       ne bougent donc jamais — elles sont absentes du bloc clair plus bas. */
    --console-bg:     #0f172a;
    --console-text:   #c8d6f5;
    --console-tag:    #8fb0ff;
    --console-cta:    #ffc27a;

    /* === SHADOWS ===
       Nettement plus profondes : une ombre calibrée pour du blanc disparaît sur du
       bleu nuit. C'est elle qui remplace le contraste que la carte blanche donnait
       gratuitement. */
    --shadow-flat:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow:       0 1px 2px rgba(0, 0, 0, 0.30), 0 14px 34px rgba(0, 0, 0, 0.45);
    --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lift:  0 4px 12px rgba(0, 0, 0, 0.40), 0 16px 32px rgba(0, 0, 0, 0.50);
    --shadow-modal: rgba(0, 0, 0, 0.55) 0 5px 15px;
    --shadow-focus: 0 0 0 3px rgba(122, 162, 255, 0.35);
    --shadow-focus-error: 0 0 0 3px rgba(255, 107, 107, 0.35);

    /* === BORDERS === */
    --border-color: rgba(220, 229, 251, 0.14);

    /* ---------- Ce qui ne dépend pas du thème ---------- */

    /* === TYPOGRAPHIE === */
    --font-xs: 12.25px;
    --font-s:  13.25px;
    --font-m:  14.25px;
    --font-l:  15.25px;

    /* === RADIUS === */
    --radius-sm: 4px;
    --radius-s:  7px;
    --radius:    14px;

    /* === DÉRIVÉES ===
       Elles pointent vers des couleurs qui changent, donc elles suivent le thème
       sans avoir à être redéclarées. La couleur de bordure est exposée à part
       parce que plusieurs règles posent leur propre épaisseur ou leur propre côté
       et ne peuvent pas prendre le raccourci complet. */
    --border:       1px solid var(--border-color);
    --border-soft:  1px solid var(--grey-100);
    --box-shadow:   var(--shadow-soft);

    /* === TRANSITIONS === */
    --transition:      all 200ms ease-out;
    --transition-fast: all 150ms ease-out;
    --transition-slow: all 300ms ease-out;
}

/* ========================================
   LE THÈME CLAIR

   Les valeurs d'avant le pivot, à l'identique. Rien n'y a été retouché : c'est ce
   qui rend le clair non régressif par construction.

   Les quatre couleurs de la console et les deux blancs (`--on-accent`, `--paper`)
   n'y sont pas — ils ne dépendent pas du thème.
   ======================================== */
html[data-theme="light"] {
    /* === COULEURS BASE === */
    --default-color: #0f172a;
    --accent-color: #566f8f;
    --primary-color: #316bff;
    --primary-color-dark: #0037d6;
    --secondary-color: #ff8600;
    --background-color: #eff3fe;
    --background-grey: #f5f5f5;

    /* === BTN PRIMARY (legacy aliases — gardés pour cascade safety) === */
    --btn-primary-250: #5c8aff;
    --btn-primary-275: #477bff;
    --btn-primary-300: #316bff;
    --btn-primary-325: #1f5eff;
    --btn-primary-350: #0a4eff;
    --btn-primary-450: #0037d6;

    /* === GREYS / SLATE (8 niveaux) === */
    --grey-50:  #f9fafb;
    --grey-100: #f3f4f6;
    --grey-200: #e5e7eb;
    --grey-300: #d1d5db;
    --grey-400: #9ca3af;
    --grey-500: #6b7280;
    --grey-600: #475569;
    --grey-700: #374151;

    /* === BACKGROUND TINTÉS (mesh / cards) === */
    --bg-page:       #f4f7fd;
    --bg-card:       #ffffff;
    --bg-card-tint:  #f8fafe;
    --bg-modal:      #fafcfe;
    --bg-soft:       #eef4ff;

    /* === LE VERRE ===
       Rien à éclaircir sur du blanc : la carte reste la carte, et le survol ne
       change rien — c'est le comportement d'avant le pivot, préservé tel quel. */
    --glass:              var(--bg-card);
    --glass-hover:        var(--bg-card);
    --glass-border:       var(--grey-100);
    --glass-border-hover: var(--grey-100);
    --glass-hover-strong: var(--bg-card);
    --glass-text:         var(--accent-color);
    --glass-icon:         var(--accent-color);

    /* Les valeurs d'avant : le bleu pâle et le bleu profond, qui fonctionnaient
       déjà sur une carte blanche. */
    --nav-active-bg:      var(--blue-tint-350);
    --nav-active-text:    var(--btn-primary-450);

    /* Les deux étaient déjà opaques en clair. */
    --notification-bg:        var(--blue-tint-250);
    --notification-danger-bg: #fee2e2;

    /* === ZONE DE DÉPÔT ===
       Pas de mur ni de voile en clair : le mur est éteint plus bas, et le voile
       n'aurait donc rien à couvrir. */
    --dropzone-bg:      var(--bg-card);
    --dropzone-border:  var(--primary-color);
    --dropzone-veil:    transparent;
    --dropzone-icon-bg: var(--bg-soft);

    /* === ÉTAT D'UNE PAGE === */
    --status-online:      var(--success);
    --status-online-dot:  var(--success);
    --status-offline:     var(--error);
    --status-offline-dot: var(--error);

    /* === COULEURS SÉMANTIQUES === */
    --success:        #16a34a;
    --success-dark:   #2e7d32;
    /* En clair les deux métiers se confondent : un vert foncé porte du blanc ET se
       lit sur une pastille pâle. Le token reprend donc la valeur d'avant. */
    --success-solid:  #2e7d32;
    --success-light:  #dcfce7;
    --success-text:   #006231;

    --error:          #dc2626;
    --error-dark:     #c62828;
    --error-solid:    #c62828;
    --error-light:    #fee2e2;

    --warning:        #ca8a04;
    --warning-dark:   #ea580c;
    --warning-light:  #faeba9;
    --warning-bg:     #fefaec;
    /* PAS `--warning-dark` : il vaut #ea580c, un orange rouge, et sur un fond
       jaune pâle les deux teintes se battent. On reste dans la teinte du fond en
       assombrissant `--warning`, qui en est la version saturée — le texte devient
       le même ambre, en plus profond, et passe à 5:1 de contraste. */
    --warning-text:   color-mix(in srgb, var(--warning) 65%, black);

    --info:           #1e40af;
    --info-light:     #bfdbfe;
    --info-bg:        #eff6ff;

    /* === TEINTES D'ACCENT === */
    --violet:         #7c3aed;
    --violet-dark:    #6d28d9;
    /* En clair les deux métiers se confondent : ces valeurs portaient déjà du blanc. */
    --violet-solid:       #7c3aed;
    --violet-solid-hover: #6d28d9;
    --violet-light:   #ede9fe;
    --violet-bg:      #f5f3ff;
    --violet-border:  #ddd6fe;
    --violet-soft:    #a78bfa;

    --purple:         #7b2cbf;
    --purple-strong:  #7e22ce;
    --purple-solid:   #7e22ce;
    --purple-light:   #e0c9ff;
    --purple-bg:      #f5efff;
    --purple-pale:    #f3e8ff;

    --orange-light:   #ffedd5;
    --orange-bg:      #fff7ed;
    --orange-border:  #fed7aa;
    --orange-pill-bg:   #fff4e5;
    --orange-pill-text: #b35e00;
    --amber:          #d97706;
    --amber-light:    #fef3c7;
    --amber-soft:     #fde68a;

    --green-switch:   #509c2c;
    --green-orders:      #02824a;
    --green-orders-icon: #02b15a;
    --green-orders-bg:   #d1f5e0;
    --green-feature:      #059669;
    --green-feature-from: #d1fae5;
    --green-feature-to:   #a7f3d0;
    --green-card-bg:  #f0fdf4;

    --blue-tint-50:   #fcfdff;
    --blue-tint-100:  #f7faff;
    --blue-tint-150:  #f5f8ff;
    --blue-tint-200:  #f2f5fb;
    --blue-tint-250:  #eff3ff;
    --blue-tint-300:  #eef2fb;
    --blue-tint-350:  #e4edfe;
    --blue-tint-400:  #e2ecff;
    --blue-tint-450:  #e0eaff;
    --blue-tint-500:  #dae5fd;
    --blue-tint-550:  #d8e4ff;
    --blue-tint-600:  #d5e1fc;
    --blue-visits:      #1d4ed8;
    --blue-visits-icon: #2563eb;
    --blue-visits-bg:   #dbeafe;

    --red-accordion-icon: #fecaca;
    --red-accordion-bg:   #fef2f2;
    --red-deep:           #991b1b;

    /* === GRIS HORS ÉCHELLE === */
    --grey-track:     #ccc;
    --grey-scrollbar: #7c91b8;
    --grey-scrollbar-track: #aab7cf;
    --grey-bullet:    #d6ddeb;
    --grey-text-mid:  #666;
    --grey-text-soft: #888;
    --grey-ink:       #2c3e50;

    --overlay:        rgba(0, 0, 0, 0.6);

    /* === EN-TÊTE DE MODALE ===
       Le bandeau plein d'avant le pivot. Pas de filet : l'aplat de couleur marque
       déjà la frontière avec le corps. */
    --modal-head-bg:     var(--primary-color);
    --modal-head-border: transparent;
    --modal-head-sub:    rgba(255, 255, 255, 0.78);
    --modal-head-price:  var(--on-accent);

    /* === MESH DE LA PAGE === */
    --page-mesh:
        radial-gradient(at 12% 20%, rgba(49, 107, 255, .16) 0, transparent 55%),
        radial-gradient(at 88% 15%, rgba(255, 134, 0, .08) 0, transparent 50%),
        radial-gradient(at 95% 95%, rgba(0, 55, 214, .14) 0, transparent 55%),
        radial-gradient(at 5% 95%, rgba(92, 138, 255, .16) 0, transparent 50%);

    /* === SHADOWS === */
    --shadow-flat:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow:       0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 34px rgba(15, 23, 42, 0.06);
    --shadow-soft:  0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-lift:  0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 32px rgba(15, 23, 42, 0.10);
    --shadow-modal: rgba(0, 0, 0, 0.35) 0 5px 15px;
    --shadow-focus: 0 0 0 3px rgba(49, 107, 255, 0.35);
    --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.35);

    /* === BORDERS === */
    --border-color: #dce5fb;
}

/* À partir de 992px la page est assez large pour porter un troisième halo : le
   bleu descend en haut à gauche, le violet remonte en bas à droite. En dessous,
   les deux halos verticaux du bloc principal suffisent — trois sources sur un
   écran de téléphone se recouvrent et aplatissent tout.

   Seul le token change ici : la règle qui le peint, elle, n'est écrite qu'une fois. */
@media (min-width: 992px) {
    :root {
        --page-mesh:
            radial-gradient(at 50% -8%, rgba(49, 107, 255, .22) 0, transparent 55%),
            radial-gradient(at 8% 14%, rgba(49, 107, 255, .13) 0, transparent 46%),
            radial-gradient(at 94% 86%, rgba(123, 44, 191, .13) 0, transparent 50%);
    }
}

/* LE FOND DE LA PAGE VIT ICI, sur le body, et défile avec elle. Avant, chaque
   conteneur repeignait le mesh en `attachment: fixed` — c'est ce qui faisait
   coïncider le header flottant avec la page derrière lui. Une seule surface le
   porte désormais, et le header a son propre traitement ( plus bas ). */
/* `fixed` ET NON `scroll`, PARCE QUE LE HEADER REPEINT LE MÊME MESH.

   L'attachement ne décide pas que du défilement : il décide de la zone sur laquelle
   les pourcentages se calculent. En `scroll` c'est la boîte du body, donc la hauteur
   du document ; en `fixed` c'est le viewport. Le header étant `fixed`, ses halos se
   dimensionnent sur l'écran — si le body se dimensionne sur le document, les deux
   dégradés n'ont ni la même taille ni le même centre, et un trait apparaît là où ils
   se touchent, avant même d'avoir défilé.

   Les deux surfaces doivent donc partager la même zone de référence. Conséquence
   assumée : les halos restent calés sur l'écran et ne défilent pas avec la page. */
.edouk_body {
    background-color: var(--bg-page);
    background-image: var(--page-mesh);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    color: var(--accent-color);
    font-size: var(--font-m);
    font-family: "Inter", "Ubuntu", sans-serif;
}
[lang="ar"] * {
    font-family: "Cairo", "Noto Sans Arabic", "Inter", sans-serif;
}
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] .edouk_label,
[lang="ar"] .edouk_submit,
[lang="ar"] .edouk_btn {
    font-family: "Cairo", "Ubuntu", sans-serif;
}
/* Cairo prioritaire partout en arabe. Les règles de titre en "Ubuntu" (app.css
   et blocs <style> des templates) sont plus spécifiques que [lang="ar"] * et
   gagnaient la cascade : d'où des textes hors Cairo. Le !important tranche sans
   avoir à dupliquer une variante [lang="ar"] par sélecteur.
   Les <i> et les classes fa-* sont exclus : leur font-family porte les glyphes
   Font Awesome, la forcer effacerait les icônes. */
[lang="ar"] *:not(i):not([class*="fa-"]) {
    font-family: "Cairo", "Noto Sans Arabic", "Inter", sans-serif !important;
}
/* L'arabe démarre à 500 : Cairo à 400 est trop fin pour être lu confortablement
   à nos tailles. Les poids 600 et 700 déjà posés restent inchangés. */
[lang="ar"] body {
    font-weight: 500;
}
[lang="ar"] .edouk_table tbody td,
[lang="ar"] .edouk_websites_web_time_info_1 label {
    font-weight: 500;
}
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5 {
    font-weight: 600;
}
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
    color: var(--default-color);
    font-weight: 500;
    font-family: "Ubuntu";
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5 {
    font-family: "Cairo", "Ubuntu";
}
h1 {
    font-size: 22px;
}
h2 {
    font-size: 20px;
}
h3 {
    font-size: 18px;
}
h4 {
    font-size: 16px;
}
h5 {
    font-size: 14px;
}
@media (min-width: 350px) {
    :root {
        --font-xs: 12.75px;
        --font-s: 13.75px;
        --font-m: 14.75px;
        --font-l: 15.75px;
    }
}
@media (min-width: 768px) {
    :root {
        --font-xs: 13.75px;
        --font-s: 14.25px;
        --font-m: 15.25px;
        --font-l: 16.25px;
    }
    h1 {
        font-size: 24px;
    }
    h2 {
        font-size: 22px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    h5 {
        font-size: 16px;
    }
}
@media (min-width: 992px) {
    :root {
        --font-s: 15.25px;
        --font-m: 16.25px;
        --font-l: 17.25px;
    }
    h1 {
        font-size: 26px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 22px;
    }
    h4 {
        font-size: 20px;
    }
    h5 {
        font-size: 18px;
    }
}
html {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}
body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}
/* PLUS DE FOND ICI. Le mesh et la couleur de page vivent sur le body, et un fond
   opaque à ce niveau les recouvrirait sur toute la hauteur de l'écran. */
.edouk_main {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding-top: 168px !important;
    padding-bottom: 30px !important;
}
/* ONBOARDING — sur preview et live le header ne rend que sa rangée logo ( voir
   header.html.twig ), donc les 168px qui dégageaient DEUX rangées deviennent
   25 + 41 + 25 de padding, plus la respiration.

   L'écran /request garde sa rangée et n'a donc PAS cette classe : il la retire par
   le bloc `mainClass` de son layout. */
.edouk_main_onboarding {
    padding-top: 96px !important;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
span,
strong,
ul,
ol,
li,
p,
a,
label,
input,
button,
textarea,
span {
    font-size: var(--font-s);
    margin: 0;
    padding: 0;
}
.edouk_container {
    padding: 0 5%;
}
@media (min-width: 576px) {
    .edouk_container {
        padding: 0 7.5%;
    }
}
@media (min-width: 768px) {
    .edouk_container {
        padding: 0 10%;
    }
}
@media (min-width: 992px) {
    .edouk_container {
        padding: 0 15%;
    }
}
@media (min-width: 1200px) {
    .edouk_container {
        padding: 0 16.5%;
    }
}
@media (min-width: 1400px) {
    .edouk_container {
        padding: 0 18%;
    }
}
@media (min-width: 1500px) {
    .edouk_container {
        padding: 0 19.5%;
    }
}
@media (min-width: 1600px) {
    .edouk_container {
        padding: 0 21%;
    }
}
@media (min-width: 1700px) {
    .edouk_container {
        padding: 0 22.5%;
    }
}
@media (min-width: 1800px) {
    .edouk_container {
        padding: 0 24%;
    }
}
/* Le header repeint le mesh de la page en `attachment: fixed` : c'est ce qui le
   fait coïncider avec le fond derrière lui, puisque les deux sont alors calés sur
   le viewport et non sur le document. */
.edouk_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    padding-top: 25px;
    padding-bottom: 25px;
    /*
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(70px);
    */
    z-index: 100;
    background: var(--bg-page);
    background-image: var(--page-mesh);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.edouk_header ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    align-items: flex-start;
    gap: 25px;
}
.edouk_header_tap {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
/* Le logo n'est plus un lien : la largeur qui vivait sur le <a> passe sur l'image.
   display:block plutôt que flex — sur une image c'est ce qui supprime l'espace de
   ligne de base que le flex du <a> masquait. */
/* LE LOGO EST UN SEUL FICHIER POUR LES DEUX THÈMES.
   Le mot « Edouk » y est noir : sur du bleu nuit il disparaît. `invert(1)` le passe
   en blanc mais retourne aussi la pastille, qui vire à l'orange — `hue-rotate(180deg)`
   la ramène à son bleu, et `brightness(.9)` évite que le blanc du texte cogne.

   C'est le traitement que la landing V3 applique au même fichier. Il évite d'avoir
   deux images à tenir à jour. */
.edouk_header_tap img {
    width: 99px;
    display: block;
    filter: invert(1) hue-rotate(180deg) brightness(0.9);
}
html[data-theme="light"] .edouk_header_tap img {
    filter: none;
}
.edouk_header_tap div {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Contrôles de verre, comme les commandes de la carte site : ils s'éclaircissent
   au-dessus du fond au lieu de poser leur propre couleur ( voir `--glass` ). */
.edouk_header_tap div button {
    width: 41px;
    min-width: 41px;
    max-width: 41px;
    height: 41px;
    min-height: 41px;
    max-height: 41px;
    background-color: var(--glass);
    border-radius: var(--radius);
    font-size: var(--font-s);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
/* `hover: hover` : sur mobile le survol resterait collé après le tap. Le décollement
   et l'ombre viennent du bloc de survol commun, plus bas. */
@media (hover: hover) {
    .edouk_header_tap div button:hover:not(:disabled) {
        background-color: var(--glass-hover-strong);
        border-color: var(--glass-border-hover);
    }
}
.edouk_header_tap div button i {
    font-size: inherit;
    color: inherit;
}
/* Sur les très petits écrans, la rangée d'icônes est passée à quatre avec la
   bascule de thème. Elles rétrécissent plutôt que de pousser le logo. */
@media (max-width: 380px) {
    .edouk_header_tap div {
        gap: 10px;
    }
    .edouk_header_tap div button {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        font-size: var(--font-xs);
    }
}
.edouk_header_route {
    width: 100%;
}
.edouk_header_route ol {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.edouk_header_route ol li {
    display: flex;
    align-items: center;
    gap: 3px;
}
.edouk_header_route_path {
    background-color: var(--glass);
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    padding: 5px 7px;
    border-radius: var(--radius);
}
.edouk_header_route ol li a {
    height: 31px;
    min-height: 31px;
    max-height: 31px;
    font-size: var(--font-s);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 19px;
    color: var(--accent-color);
    border-radius: var(--radius);
    transition: color 200ms ease-out, background-color 200ms ease-out;
}
.edouk_header_route ol li a:not(.active):hover {
    color: var(--primary-color);
}
/* L'onglet courant. En sombre il ne peut pas être un aplat : posé sur le verre du
   conteneur, une teinte opaque est forcément PLUS SOMBRE que lui et se lit comme un
   creux. C'est un voile de bleu marque qui marque l'état, et le texte prend le bleu
   clair de l'interface. */
.edouk_header_route ol li .active {
    background-color: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 500;
}
.edouk_header_route ol li button {
    min-width: 41px;
    width: 41px;
    max-width: 41px;
    height: 39px;
    min-height: 41px;
    max-height: 41px;
    border: 0;
    border-radius: var(--radius);
    font-size: var(--font-xs);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: var(--btn-primary-450);
    color: var(--on-accent);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_header_route ol li button i {
    color: inherit;
}
.edouk_header_route ol li button span {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    display: none;
}
@media (min-width: 768px) {
    .edouk_header_route ol li button {
        max-width: fit-content;
        min-width: fit-content;
        width: fit-content;
        padding: 0 19px;
    }
    .edouk_header_route ol li button span {
        display: inline;
    }
}
/* Variante rouge : sur /admin/coding ce bouton reinitialise le site. */
.edouk_header_route ol li button.edouk_header_route_reset {
    background-color: var(--error-solid);
}

/*
 * iOS UIkit modal backdrop fix (port depuis edouk.css)
 * Quand un .uk-accordion s'ouvre/ferme dans la modal, iOS recompose les couches
 * et le background du .uk-modal flashe. On decouple le backdrop dans un ::before
 * avec sa propre couche compositing (translateZ) immunise aux changements internes.
 */
.uk-modal {
    padding: 30px;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
}
.uk-modal::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay);
    z-index: -1;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.uk-modal.uk-open {
    transition: none !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.uk-modal,
.uk-modal.uk-open,
.uk-modal *,
.uk-modal-dialog * {
    -webkit-tap-highlight-color: transparent;
}

/* Backdrop blur quand activation forcée (controller `activation` ajoute `body.activation_active`) */
body.activation_active #modal-account.uk-modal::before {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}
/* Le header de l'activation touche les bords. La classe n'est posée que pendant
   l'activation : la modale Compte, qui partage #modal-account, garde son padding. */
body.activation_active #modal-account .uk-modal-body {
    padding: 0;
}
#account-frame {
    display: block;
}

.edouk_modal .uk-modal-dialog {
    width: 100%;
    max-width: 450px !important;
    box-shadow:
        rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
        rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    border-radius: 14px;
    background-color: var(--bg-modal);
    background-image: radial-gradient(at 15% 35%, rgba(49, 107, 255, 0.05) 0px, transparent 50%),
        radial-gradient(at 90% 40%, rgba(255, 134, 0, 0.025) 0px, transparent 45%),
        radial-gradient(at 95% 92%, rgba(0, 55, 214, 0.07) 0px, transparent 50%),
        radial-gradient(at 5% 95%, rgba(92, 138, 255, 0.07) 0px, transparent 45%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.uk-modal-body {
    padding: 15px 15px 20px;
}
.edouk_modal .uk-modal-close-default {
    border-radius: 7px;
    margin: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-lift);
    padding: 7px 7px;
}
html[lang="ar"] .edouk_modal .uk-modal-close-default {
    right: unset;
    left: 6px;
}
.edouk_modal .uk-modal-dialog h2 {
    font-size: calc(var(--font-l) + 3px);
    margin-bottom: 20px;
    padding: 7px;
    border-radius: 7px;
    font-weight: 600;
}
[lang="ar"] .edouk_modal .uk-modal-dialog h2 {
    text-align: right;
    direction: rtl;
}
.edouk_accordion {
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}
/* La bordure est ce qui tient la carte en sombre : son ombre est du noir sur du
   bleu nuit, elle n'y dessine plus rien. En clair elle vaut `--grey-100` entre une
   carte blanche et une page presque blanche — invisible, donc rien n'y change. */
.edouk_accordion li {
    transition: var(--transition);
    background-color: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 15px;
    border-radius: var(--radius);
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.edouk_accordion li a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: var(--transition);
}
.edouk_accordion li a i {
    min-width: 39px;
    width: 39px;
    min-height: 39px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-soft);
    border-radius: 9px;
    color: var(--primary-color);
    transform: translateY(1px);
}
.edouk_accordion li a div {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.edouk_accordion li a div span {
    font-weight: 600;
    color: var(--default-color);
    font-size: var(--font-s);
    font-family: "Ubuntu";
}
.edouk_accordion li a div p {
    color: var(--accent-color);
    font-size: var(--font-xs);
}
.edouk_accordion .uk-open {
    background-color: var(--background-color);
}
.edouk_accordion .uk-open .uk-accordion-content p i {
    color: var(--primary-color);
}
.edouk_accordion li .uk-accordion-content {
    display: flow-root;
    background-color: var(--bg-card);
    padding: 15px;
    border-radius: var(--radius);
    margin-top: 15px;
    font-size: var(--font-xs);
}
.edouk_accordion li .uk-accordion-content p {
    font-size: inherit;
    display: flex;
    align-items: center;
    gap: 9px;
    align-items: flex-start;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: none!important;
}
.edouk_accordion li .uk-accordion-content p i {
    font-size: 17px;
    transform: translateY(1.5px);
}
.edouk_accordion .uk-accordion-title::before {
    content: "";
    order: 1;
    width: 5px;
    height: 5px;
    border-right: 2px solid var(--default-color);
    border-bottom: 2px solid var(--default-color);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}
.edouk_accordion .uk-open > .uk-accordion-title::before {
    transform: rotate(-135deg);
}
.edouk_label {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    color: var(--accent-color);
    font-size: var(--font-s);
    font-family: "Ubuntu";
}
.edouk_label i {
    font-size: calc(var(--font-s) - 1px);
    color: var(--primary-color);
}
.edouk_tip {
    letter-spacing: 0.005em;
    margin-bottom: 17px;
    display: block;
    font-size: var(--font-m);
    color: var(--accent-color);
    line-height: 1.6;
    padding: 0 7px;
}
/* La landing dans la modale : une capture d'affiche fait plusieurs milliers de
   pixels de haut, elle doit défiler dans son cadre au lieu d'étirer la modale. */
.edouk_landing_view {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--grey-100);
    border-radius: var(--radius);
    margin-bottom: 15px;
}
.edouk_landing_view img {
    width: 100%;
    display: block;
}
.edouk_wrapper {
    position: relative;
    border-radius: var(--radius);
    width: 100%;
}
/* AUCUN FOND SOUS L'ICÔNE. Elle est posée en absolu par-dessus le champ et n'a
   rien à masquer. Le fond blanc qui vivait là passait inaperçu tant que tout était
   blanc ; dès que le champ et la carte ont pris deux teintes différentes, il est
   devenu une pastille visible derrière chaque icône ( vu sur la page de connexion ). */
.edouk_wrapper > i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: var(--font-s);
    pointer-events: none;
    line-height: 1;
}
.edouk_input {
    width: 100%;
    height: 45px;
    background-color: var(--bg-card);
    border-radius: 7px;
    padding: 3px 15px 3px 35px;
    font-size: var(--font-m);
    color: var(--default-color);
    border: var(--border);
    box-shadow:
        rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    box-shadow: var(--shadow-flat);
}
.edouk_input:hover {
    border: 1px solid var(--primary-color);
}
.edouk_input:focus {
    outline: 0;
    border: 1px solid var(--primary-color);
    box-shadow: var(--shadow-focus);
    background-color: var(--bg-card);
}
.edouk_input_textarea {
    height: 57px;
    min-height: 57px;
    max-height: 90px;
    padding: 5px 15px!important;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
/* Input date natif iOS/Android : le contrôle natif impose sa largeur
   intrinsèque et ignore width:100% (déborde du cadre) — appearance:none
   rend la main au CSS, le picker reste fonctionnel */
input[type="date"].edouk_input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    background-color: var(--bg-card);
}
/* iOS : la valeur est rendue dans un conteneur shadow centré — alignement texte */
input[type="date"].edouk_input::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}
html[lang="ar"] input[type="date"].edouk_input::-webkit-date-and-time-value {
    text-align: right;
}
.edouk_input.is_over_limit,
.edouk_input.is_over_limit:hover,
.edouk_input.is_over_limit:focus {
    border: 1px solid var(--error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}
html[lang="ar"] .edouk_input {
    text-align: right;
}
html[lang="ar"] .edouk_label {
    text-align: right;
    font-family: "Cairo", "Ubuntu";
}
/* LE BLEU DE LA MARQUE, PAS `--primary-color` : le bouton d'action garde la même
   couleur dans les deux thèmes ( voir `--cta` en haut du fichier ). */
.edouk_submit {
    margin-top: 15px;
    width: 100%;
    min-height: 40px;
    border-radius: var(--radius);
    border: solid 1px var(--cta);
    color: var(--on-accent);
    background-color: var(--cta);
    box-shadow: var(--shadow);
    font-size: var(--font-m);
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.15px;
    font-family: "Ubuntu";
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    transition: var(--transition);
}
.edouk_submit:hover {
    color: var(--on-accent);
    background-color: var(--cta);
}
.edouk_submit:disabled {
    opacity: 0.75 !important;
}
/* Fond plein sous du blanc, donc `-solid` et non `--violet` : celui-là est une
   couleur de texte en sombre, trop claire pour porter du blanc. */
.edouk_submit_violet {
    color: var(--on-accent) !important;
    border-color: var(--violet-solid) !important;
    background-color: var(--violet-solid) !important;
}
@media (hover: hover) {
    .edouk_submit_violet:hover:not(:disabled) {
        color: var(--on-accent) !important;
        border-color: var(--violet-solid-hover) !important;
        background-color: var(--violet-solid-hover) !important;
    }
}
.edouk_landing_block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.edouk_landing_generate {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.edouk_landing_generate .edouk_submit {
    margin-top: 0;
}
.cfg_landing_link {
    align-self: flex-start;
    font-size: 13px;
    color: var(--violet);
    text-decoration: underline;
}
.cfg_landing_link:hover {
    color: var(--violet-dark);
}
.edouk_submit_grey {
    color: var(--default-color) !important;
    border-color: var(--default-color) !important;
    background-color: var(--background-grey) !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
}
.edouk_submit_loading {
    opacity: 0.8;
    pointer-events: none;
}
/* Les deux retours du bouton. Fond plein sous du blanc, donc `-solid` et non
   `-dark` : celui-là est une couleur de texte en sombre, il est trop clair pour
   porter du blanc. */
.edouk_submit_success {
    background: var(--success-solid) !important;
    border-color: var(--success-solid) !important;
    color: var(--on-accent) !important;
}
.edouk_submit_error {
    background: var(--error-solid) !important;
    border-color: var(--error-solid) !important;
    color: var(--on-accent) !important;
}
.edouk_submit_unchanged {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--on-accent) !important;
}

/* ========================================
   EDOUK BTN (table actions / inline buttons)
   ======================================== */
.edouk_btn {
    border: var(--border);
    border-radius: var(--radius-s);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: var(--bg-card);
    height: 34px;
    padding: 0 12px;
    gap: 6px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 13.25px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-color);
    transition: all 150ms ease-out;
}
.edouk_btn span,
.edouk_btn i {
    color: inherit;
    font-size: inherit;
}
.edouk_btn i {
    font-size: 15px;
}

/* === EDOUK BTN VARIANTS === */
/* Chaque bouton d'action porte la couleur de la pastille vers laquelle il mène :
   confirmer → vert, annuler → rouge, en livraison → violet, reporter → bleu. */
/* La bordure vient de `.edouk_btn` via `--border`, dont la couleur vaut déjà
   `--glass-border` en sombre : il n'y a que le fond à changer. */
.edouk_btn_primary {
    background-color: var(--glass);
    color: var(--primary-color);
}
.edouk_btn_primary:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-soft);
}
.edouk_btn_secondary {
    background-color: var(--bg-card);
    color: var(--purple-strong);
}
.edouk_btn_secondary:hover {
    border-color: var(--purple-strong);
    background-color: var(--purple-pale);
}
.edouk_btn_confirm {
    background-color: var(--bg-card);
    color: var(--success-text);
}
.edouk_btn_confirm:hover {
    border-color: var(--success-text);
    background-color: var(--success-light);
}
.edouk_btn_danger {
    background-color: var(--bg-card);
    color: var(--error-dark);
}
.edouk_btn_danger:hover {
    border-color: var(--error-dark);
    background-color: var(--error-light);
}
.edouk_btn_reported {
    background-color: var(--bg-card);
    color: var(--primary-color);
}
.edouk_btn_reported:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-soft);
}
.edouk_btn_delete {
    width: 34px;
    padding: 0;
    background-color: var(--bg-card);
    color: var(--accent-color);
}
.edouk_btn_delete:hover {
    border-color: var(--error-dark);
    background-color: var(--error-light);
    color: var(--error-dark);
}
.edouk_btn_transparent {
    background-color: var(--bg-card-tint);
    color: var(--accent-color);
    box-shadow: none;
    cursor: default;
}
.edouk_btn_error {
    background: var(--error-solid) !important;
    border-color: var(--error-solid) !important;
    color: var(--on-accent) !important;
}

.ios-switch {
    position: relative;
    min-width: 50px !important;
    width: 50px !important;
    max-width: 50px !important;
    display: flex;
    height: 28px;
    -webkit-appearance: none;
    background: var(--grey-track);
    outline: none;
    border-radius: 50px;
    transition: background 0.3s;
    cursor: pointer;
}
.ios-switch:checked::before {
    transform: translateX(17px);
}
.ios-switch::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    background: var(--on-accent);
    transition: transform 0.3s;
}
.ios-switch:checked {
    background: var(--green-switch);
}
.edouk_accordion li.accordion_navy a i {
    background-color: var(--info-light);
    color: var(--info);
}
.edouk_accordion li.accordion_navy.uk-open {
    background-color: var(--info-bg);
}
.edouk_accordion li.accordion_navy.uk-open .uk-accordion-content p i {
    color: var(--info);
}
.edouk_accordion li.accordion_red a i {
    background-color: var(--red-accordion-icon);
    color: var(--error);
}
.edouk_accordion li.accordion_red.uk-open {
    background-color: var(--red-accordion-bg);
}
.edouk_accordion li.accordion_red.uk-open .uk-accordion-content p i {
    color: var(--error);
}
.edouk_accordion li.accordion_purple a i {
    background-color: var(--purple-light);
    color: var(--purple);
}
.edouk_accordion li.accordion_purple.uk-open {
    background-color: var(--purple-bg);
}
.edouk_accordion li.accordion_purple.uk-open .uk-accordion-content p i {
    color: var(--purple);
}
.edouk_accordion li.accordion_purple .uk-accordion-content .edouk_submit {
    background-color: var(--purple-light);
    color: var(--purple);
    border-color: var(--purple-light);
}
@media (hover: hover) {
    .edouk_accordion li.accordion_purple .uk-accordion-content .edouk_submit:hover:not(:disabled) {
        background-color: var(--purple);
        color: var(--on-accent);
        border-color: var(--purple);
    }
}
.edouk_params {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.edouk_params_param {
    background-color: var(--glass);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius);
    padding: 15px;
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: var(--transition);
}
/* Cliquable, donc contrôle : survol franc comme les boutons. Le décollement et
   l'ombre viennent du bloc de survol commun, plus bas. */
@media (hover: hover) {
    .edouk_params_param:hover {
        background-color: var(--glass-hover-strong);
        border-color: var(--glass-border-hover);
    }
}
.edouk_params_param div {
    display: flex;
    align-items: center;
    gap: 15px;
}
.edouk_params_param div i {
    background-color: var(--bg-soft);
    color: var(--primary-color);
    min-width: 39px;
    width: 39px;
    min-height: 39px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
    overflow: hidden;
}
.edouk_params_param div i img {
    width: 100%;
    display: flex;
}
.edouk_params_param.param_lavender div i {
    background-color: var(--violet-light);
    color: var(--violet-soft);
}
.edouk_params_param_title {
    font-weight: 600;
    color: var(--default-color);
    font-size: var(--font-s);
    font-family: "Ubuntu";
}
.edouk_params_param_subtitle {
    font-size: var(--font-xs);
}
.edouk_params_param button {
    width: 41px;
    min-width: 41px;
    max-width: 41px;
    height: 41px;
    min-height: 41px;
    max-height: 41px;
    background-color: var(--bg-card);
    border-radius: 7px;
    font-size: var(--font-s);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    border: 1px solid var(--grey-100);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: none !important;
    transition:
        background-color 200ms ease-out,
        color 200ms ease-out,
        border-color 200ms ease-out,
        transform 200ms ease-out;
}
.edouk_params_param:hover button {
    background-color: var(--cta);
    color: var(--on-accent);
    border-color: var(--cta);
    transform: translateX(2px);
}
.edouk_accordion li.accordion_yellow a i {
    background-color: var(--warning-light);
    color: var(--warning);
}
.edouk_accordion li.accordion_yellow.uk-open {
    background-color: var(--warning-bg);
}
.edouk_accordion li.accordion_yellow.uk-open .uk-accordion-content p i {
    color: var(--warning);
}
.edouk_credits {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.edouk_credits strong {
    font-family: "Ubuntu";
    font-size: calc(var(--font-l) + 9px);
    font-weight: 600;
    line-height: 1;
    color: var(--default-color);
}
.edouk_credits span {
    font-size: var(--font-xs);
    color: var(--accent-color);
}

/* Delivery prices table (modal-deliveryPrices) */
.edouk_delivery_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px 0;
}
.edouk_delivery_table th:first-child,
.edouk_delivery_table td:first-child {
    width: 50px;
}
.edouk_delivery_table th {
    font-size: calc(var(--font-s) - 1px);
    font-weight: 500;
    color: var(--accent-color);
    text-align: left;
    padding: 1px 0 9px;
}
.edouk_delivery_table td input {
    margin: 0 !important;
    padding: 3px 15px !important;
}
.edouk_delivery_table td .ios-switch {
    margin-top: 5px;
}
html[lang="ar"] .edouk_delivery_table th {
    text-align: right;
}

/* Free delivery table (modal-delivery: per-website toggle) */
.edouk_freedelivery_site {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.edouk_freedelivery_site img {
    border-radius: var(--radius-s);
    object-fit: cover;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
}
.edouk_freedelivery_table td input {
    margin-bottom: 7px !important;
}

/* ---------- La zone de dépôt ----------
   Le composant rend trois enfants : l'input transparent qui couvre tout, le texte
   d'invite, et l'aperçu du fichier choisi. Les deux couches de décor sont donc des
   pseudo-éléments — il n'y a pas de balise où les accrocher.

   `overflow: hidden` : sans lui les deux couches débordent des coins arrondis. */
.dropzone-container {
    position: relative;
    overflow: hidden;
    border: 1px dashed var(--dropzone-border) !important;
    background-color: var(--dropzone-bg) !important;
    border-radius: var(--radius-s) !important;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}
/* Couche 1 : le mur de vignettes. Trois tuiles hachurées côte à côte, dessinées en
   fonds superposés plutôt qu'en grille — un pseudo-élément n'a pas d'enfants.
   Les trois teintes sont celles de la landing : sable, olive, bleu. */
.dropzone-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .30;
    background-image:
        repeating-linear-gradient(45deg, rgba(185, 131, 75, .30) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(45deg, rgba(61, 90, 76, .28) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(45deg, rgba(49, 107, 255, .26) 0 6px, transparent 6px 12px),
        linear-gradient(#f7efe6, #f7efe6),
        linear-gradient(#eef4ee, #eef4ee),
        linear-gradient(#eef4ff, #eef4ff);
    background-size: calc(100% / 3) 100%;
    background-position: 0 0, 50% 0, 100% 0, 0 0, 50% 0, 100% 0;
    background-repeat: no-repeat;
}
/* Couche 2 : le voile, qui rend le texte lisible par-dessus les hachures. */
.dropzone-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--dropzone-veil);
}
/* Le mur n'existe qu'en sombre : sur une carte blanche il n'a rien à habiller. */
html[data-theme="light"] .dropzone-container::before {
    display: none;
}
/* Le contenu repasse au-dessus des deux couches de décor — sinon le voile le
   recouvre — mais il reste TRANSPARENT AU CLIC.

   C'est le point délicat : l'input du composant est un calque invisible qui couvre
   toute la zone, et c'est lui qui ouvre le sélecteur de fichier. Il porte
   `z-index: 1`. Tout ce qui monte au même niveau APRÈS lui dans le DOM passe devant
   et lui vole le clic — il ne reste alors que les bordures pour ouvrir la zone. */
.dropzone-placeholder,
.dropzone-preview {
    position: relative;
    z-index: 1;
    pointer-events: none;
}
/* Seul le bouton d'effacement reprend le clic : c'est la seule chose à cliquer
   par-dessus l'input. */
.dropzone-preview-button {
    pointer-events: auto;
}
/* La pastille d'invite. Elle n'existe pas dans le composant — le bloc d'invite ne
   contient que du texte — donc elle est dessinée ici, flèche comprise. */
.dropzone-placeholder::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background-color: var(--dropzone-icon-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237aa2ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5'/%3E%3Cpath d='M12 3v13'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
/* En clair la pastille est un bleu très pâle posé sur du blanc : elle se devine à
   peine. Le liseré la découpe — c'est lui qui manquait, une ombre portée seule
   laisse le bord du haut se fondre — et la retombée lui donne son relief. Les deux
   sont bleus : la teinte de la pastille, pas un gris. */
html[data-theme="light"] .dropzone-placeholder::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23316bff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5'/%3E%3Cpath d='M12 3v13'/%3E%3C/svg%3E");
    box-shadow:
        0 0 0 1px rgba(49, 107, 255, 0.14),
        0 4px 12px -2px rgba(49, 107, 255, 0.30);
}
.dropzone-container:hover {
    border-color: var(--primary-color);
}

.edouk_websites {
    display: flex;
    flex-flow: wrap;
    gap: 19px;
    margin-bottom: 30px;
}
/* Même surface de verre que les cartes de la fiche produit ( voir `--glass` en haut
   du fichier ) : elle éclaircit le fond au lieu de poser sa couleur. */
.edouk_websites_web {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--glass-border);
    width: 100%;
    background-color: var(--glass);
    transition: background 200ms ease-out, border-color 200ms ease-out;
}
/* `hover: hover` : sur mobile le survol resterait collé après le tap. */
@media (hover: hover) {
    .edouk_websites_web:hover {
        background-color: var(--glass-hover);
        border-color: var(--glass-border-hover);
    }
}
.edouk_websites_web hr {
    margin: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--grey-100);
}
@media (min-width: 768px) {
    .edouk_websites_web {
        width: calc(50% - 10px);
    }
}
@media (min-width: 992px) {
    .edouk_websites_web {
        width: calc(33% - 10px);
    }
}
.edouk_websites li a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-height: 250px;
    overflow: hidden;
    width: 50%;
}
.edouk_websites li a img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 400ms ease-out;
}
.edouk_websites_web_info {
    display: flex;
    padding: 15px;
    flex-direction: column;
    gap: 7px;
    width: 50%;
}
.edouk_websites_web_info_1 {
    font-family: "Ubuntu";
    color: var(--default-color);
    font-size: var(--font-l);
    font-weight: 600;
    display: none;
}
.edouk_websites_web_info_2 {
    font-size: var(--font-xs);
    padding-bottom: 4px;
    font-family: "Ubuntu";
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.edouk_websites_web_info_2 i {
    display: none;
}
.edouk_websites_web_info_2 span {
    font-weight: 600;
    color: var(--default-color);
}
.edouk_websites_web_info_3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    font-size: calc(var(--font-xs) - 1px);
    font-weight: 500;
    background-color: var(--bg-soft);
    background-color: var(--blue-tint-450);
    background-color: var(--blue-tint-600);
    background-color: var(--blue-tint-500);
    background-color: var(--blue-tint-350);
    border-radius: var(--radius);
    width: fit-content;
    color: var(--btn-primary-450);
}
.edouk_websites_web_info_3 i {
    color: inherit;
}
.edouk_websites_web_info_3_expired {
    background-color: var(--error-light);
    color: var(--status-offline);
}
.edouk_websites_web_info_3_active {
    background-color: var(--success-light);
    color: var(--status-online);
}
/* La pastille est un glyphe, pas un carré : elle prend donc sa teinte par `color`
   et non par un fond. Elle est plus dense que le libellé — deux verts valent mieux
   qu'un, le mot reste lisible et le point reste un point. */
.edouk_websites_web_info_3_active i {
    font-size: 8px;
    display: inline-block;
    border-radius: 50%;
    color: var(--status-online-dot);
    animation: pulse-live 2s ease-out infinite;
}
/* PAS de teinte propre pour cette icône-là : elle hérite du libellé.
   La teinte dense est réservée au POINT PULSÉ de l'état en ligne, qui est une
   pastille. Ici c'est une croix, un pictogramme qui appartient à la phrase — deux
   rouges dans une même ligne se lisent comme un défaut d'alignement. */
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.edouk_websites_web_gain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    display: none;
    width: 100%;
}
.edouk_websites_web_gain li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    width: 50%;
}
.edouk_websites_web_gain li > i {
    background-color: var(--grey-bullet);
    color: var(--primary-color);
    min-width: 37px;
    width: 37px;
    min-height: 37px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}
.edouk_websites_web_gain li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.edouk_websites_web_gain li label {
    color: var(--accent-color);
    font-size: var(--font-xs);
}
.edouk_websites_web_gain li span {
    color: var(--default-color);
    font-weight: 600;
    font-size: var(--font-xs);
}
.edouk_websites_web_time {
    padding: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.edouk_websites_web_time_info_1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
a.edouk_websites_web_time_info_1,
a.edouk_websites_web_time_info_1:hover {
    color: inherit;
}
.edouk_websites_web_time_info_1 > i {
    background-color: var(--orange-light);
    color: var(--warning-dark);
    min-width: 39px;
    width: 39px;
    min-height: 39px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
}
.edouk_websites_web_time_expired .edouk_websites_web_time_info_1 > i {
    background-color: var(--error-light);
    color: var(--status-offline);
}
.edouk_websites_web_time_info_1 > div {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: var(--font-xs);
    gap: 3px;
}
.edouk_websites_web_time_info_1 label {
    font-size: var(--font-xs);
    font-weight: 400;
}
.edouk_websites_web_time_info_submit {
    width: 100%;
    margin-top: 0;
    display: flex;
    gap: 7px;
    align-items: center;
}
.edouk_websites_web_time_info_submit button {
    margin-top: 15px !important;
}
.edouk_websites_web_time_info_submit .edouk_submit {
    flex: 1;
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius);
}
/* Les deux commandes de la carte : voir les statistiques, retoucher la page.
   Contrôles de verre posés sur une carte de verre — mêmes bordures, même fond de
   repos, mais un survol plus franc ( voir `--glass-hover-strong` ). */
.edouk_websites_web_time_info_settings {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin-top: 15px;
    background-color: var(--glass);
    border-radius: var(--radius);
    font-size: var(--font-s);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--glass-text);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_websites_web_time_info_settings i {
    color: var(--glass-icon);
}
/* `hover: hover` : sur mobile le survol resterait collé après le tap. Le décollement
   et l'ombre viennent du bloc de survol commun, plus bas. */
@media (hover: hover) {
    .edouk_websites_web_time_info_settings:hover:not(:disabled) {
        background-color: var(--glass-hover-strong);
        border-color: var(--glass-border-hover);
    }
}
.edouk_websites_web_time_info_settings:only-child {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}
.edouk_websites_web_time_info_submit:not(:has(.edouk_submit)) .edouk_websites_web_time_info_settings {
    width: 49%;
    min-width: 49%;
    max-width: 49%;
}

.edouk_placeholder {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 21px;
}
.edouk_placeholder h2,
.edouk_placeholder h1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.edouk_placeholder p {
    font-size: var(--font-s);
    color: var(--accent-color);
    padding: 0 3px;
}

/* Images form (modal-websiteParam: carousel + banner) */
.edouk_images_grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    contain: layout paint;
    scrollbar-width: initial;
    -webkit-overflow-scrolling: touch;
    padding: 3px 3px 10px;
}
.edouk_images_grid::-webkit-scrollbar {
    height: 6px;
}
.edouk_images_grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
/* SimpleBar (controller scrollbar) : les tuiles sont déplacées dans
   .simplebar-content — le layout flex du conteneur s'applique là.
   Track/thumb : mêmes couleurs que .edouk_table_wrapper */
/* Host monté (attribut data-simplebar posé par le JS) = block : son flex
   ne doit pas s'appliquer au wrapper SimpleBar. Avant montage, la classe
   originale (flex + scrollbar native) reste le fallback, inchangée. */
.edouk_images_grid[data-simplebar] {
    display: block;
}
.edouk_images_grid .simplebar-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
.edouk_images_grid .simplebar-track.simplebar-horizontal {
    background: transparent;
}
.edouk_images_grid .simplebar-scrollbar::before {
    background-color: var(--grey-scrollbar);
    border-radius: 10px;
}
.edouk_images_grid .simplebar-scrollbar:hover::before {
    background-color: var(--default-color);
}
.edouk_image_item {
    flex: 0 0 calc(41% - 7.5px);
    min-width: calc(41% - 7.5px);
    cursor: pointer;
    position: relative;
    padding-bottom: 15px;
}
.edouk_image_item:hover .edouk_image_preview {
    border-color: var(--default-color);
}
.edouk_image_preview {
    width: 100%;
    aspect-ratio: 1;
    box-shadow: var(--shadow-flat);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-grey);
    transition: border-color 0.2s;
}
.edouk_image_preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.edouk_color_none {
    font-size: 24px;
    color: var(--accent-color);
    opacity: 0.5;
}

/* Slug wrapper (modal-websiteParam: delivery link) */
.edouk_slug_wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}
.edouk_slug_wrapper .edouk_wrapper {
    flex: 1;
    border-radius: 7px 0 0 7px;
}
.edouk_slug_wrapper .edouk_wrapper .edouk_input {
    border-radius: 7px 0 0 7px;
}
.edouk_slug_suffix {
    background: var(--bg-card);
    box-shadow: var(--shadow-flat);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    padding: 3px 12px;
    font-size: var(--font-s);
    color: var(--grey-text-mid);
    white-space: nowrap;
    height: 48px;
    display: flex;
    align-items: center;
}
html[lang="ar"] .edouk_slug_wrapper {
    direction: ltr;
    text-align: left;
}
html[lang="ar"] .edouk_slug_wrapper .edouk_input {
    text-align: left;
}
form[name="phone_form"],
form[name="website"],
form[name="website_free_delivery"],
form[name="phone_form"],
form[name="delivery_relay"],
form[name="delivery_address"],
form[name="delivery_city"],
form[name="delivery_relay"],
form[name="delivery_email"],
form[name="delivery_email"],
form[name="email_form"],
form[name="address_form"],
form[name="website_facebook_pixel"],
form[name="website_delivery_link"],
form[name="delivery_type_form"],
form[name="total_form"],
form[name="account_email"],
form[name="account_phone"],
form[name="account_password"] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
}
/* =========================================================
   PAY MODAL v3 — Renouvellement / Paiement
   Scope: #modal-pay > .edouk_pay_dialog
   ========================================================= */

/* Header pleine largeur : on retire le padding du corps de la modale et le
   bouton de fermeture flottant d'UIkit, remplacé par celui du header bleu. */
#modal-pay .uk-modal-body { padding: 0; }
#modal-pay .uk-modal-close-default { display: none; }
#website-pay-frame { display: block; }

.edouk_pay_dialog {
    display: flex;
    flex-direction: column;
}

/* ---------- HEADER ---------- */
.edouk_pay_head {
    background: var(--modal-head-bg);
    border-bottom: 1px solid var(--modal-head-border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edouk_pay_head_top {
    display: flex; align-items: flex-start;
    gap: 12px;
}
.edouk_pay_head_title {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 3px;
}
#modal-pay .edouk_pay_head_title h2 {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-l) + 1px);
    letter-spacing: -0.1px;
    color: var(--on-accent);
    margin: 0;
    padding: 0;
}
.edouk_pay_head_title p {
    font-size: var(--font-xs);
    color: var(--modal-head-sub);
}
.edouk_pay_head_close {
    width: 30px; height: 30px;
    flex: none;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-s);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: var(--transition-fast);
}
.edouk_pay_head_close:hover { background: rgba(255, 255, 255, 0.22); }
.edouk_pay_head_close i { font-size: 14px; color: var(--on-accent); }

.edouk_pay_head_price_row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
}
.edouk_pay_head_price {
    display: flex; align-items: baseline;
    gap: 6px;
    direction: ltr;
    white-space: nowrap;
}
.edouk_pay_head_price .amount {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--modal-head-price);
}
/* La devise appartient au nombre, pas au sous-titre : elle prend sa couleur, sinon
   « 5 900 » est bleu et « DA » blanc, sur la même ligne. */
.edouk_pay_head_price .unit {
    font-size: var(--font-m);
    font-weight: 600;
    color: var(--modal-head-price);
}
.edouk_pay_head_price .per {
    font-size: 14px;
    color: var(--modal-head-sub);
}

/* ---------- ONGLETS (indicateurs) ---------- */
.edouk_pay_tabs {
    display: flex;
    padding: 0 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--grey-100);
}
.edouk_pay_tab {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--accent-color);
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}
.edouk_pay_tab.active {
    color: var(--default-color);
    border-bottom-color: var(--primary-color);
}

/* ---------- CORPS + ÉTAPES ---------- */
.edouk_pay_body { padding: 14px 16px 16px; }
.edouk_pay_step {
    display: flex; flex-direction: column;
    gap: 12px;
}
/* display:flex l'emporterait sur l'attribut hidden : garde explicite. */
.edouk_pay_step[hidden],
.edouk_pay_features_extra[hidden],
.edouk_pay_drop_preview[hidden] { display: none !important; }

/* ---------- ÉTAPE 1 · CRÉDITS ---------- */
.edouk_pay_credits {
    display: flex; align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    border: var(--border);
}
.edouk_pay_credits_ico {
    width: 34px; height: 34px;
    flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-s);
    background: var(--bg-card);
}
.edouk_pay_credits_ico i {
    font-size: 16px;
    color: var(--primary-color);
    --fa-primary-color: var(--primary-color);
    --fa-secondary-color: var(--primary-color);
    --fa-secondary-opacity: 0.4;
}
.edouk_pay_credits_text {
    display: flex; flex-direction: column;
    gap: 3px;
}
.edouk_pay_credits_text strong {
    font-family: "Ubuntu", sans-serif;
    font-size: var(--font-m);
    font-weight: 500;
    color: var(--default-color);
}
.edouk_pay_credits_text small {
    font-size: calc(var(--font-xs) - 1px);
    color: var(--primary-color-dark);
    text-wrap: pretty;
}

/* ---------- ÉTAPE 1 · AVANTAGES ---------- */
.edouk_pay_features {
    background: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.edouk_pay_features_row {
    display: flex; align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-top: 1px solid var(--grey-100);
}
.edouk_pay_features > .edouk_pay_features_row:first-child { border-top: 0; }
.edouk_pay_features_row > span:last-child {
    font-size: var(--font-xs);
    color: var(--default-color);
}
.edouk_pay_features_check {
    width: 18px; height: 18px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--success-light);
}
.edouk_pay_features_check i {
    font-size: 10px;
    color: var(--success-text);
    --fa-primary-color: var(--success-text);
    --fa-secondary-color: var(--success-text);
    --fa-secondary-opacity: 0.4;
}
.edouk_pay_features_toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 9px;
    border: 0;
    border-top: 1px solid var(--grey-100);
    background: var(--bg-card-tint);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_pay_features_toggle:hover { background: var(--bg-soft); }
.edouk_pay_features_toggle span {
    font-size: calc(var(--font-xs) - 1px);
    font-weight: 600;
    color: var(--primary-color);
}
.edouk_pay_features_toggle i {
    font-size: 12px;
    color: var(--primary-color);
    transition: transform 200ms ease-out;
}
.edouk_pay_features_toggle i.open { transform: rotate(180deg); }

/* ---------- ÉTAPE 1 · PASSAGE AU PAIEMENT ---------- */
/* Le bleu de la marque, comme `.edouk_submit` : un geste principal garde sa couleur
   dans les deux thèmes. `--primary-color` s'éclaircit en sombre pour rester lisible
   en TEXTE, ce qui délave un bouton plein. */
.edouk_pay_next {
    width: 100%;
    height: 46px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: var(--radius);
    background: var(--cta);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_pay_next:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}
.edouk_pay_next span {
    font-size: var(--font-m);
    font-weight: 600;
    color: var(--on-accent);
}
.edouk_pay_next i { font-size: 14px; color: var(--on-accent); }
[lang="ar"] .edouk_pay_next i { transform: scaleX(-1); }

/* ---------- ÉTAPE 2 · MÉTHODES ---------- */
.edouk_pay_method_list {
    display: flex; flex-direction: column;
    gap: 9px;
}
.edouk_pay_method_row {
    display: flex; align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-flat);
    cursor: pointer;
    transition: var(--transition-fast);
}
.edouk_pay_method_row.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 107, 255, 0.14);
}
.edouk_pay_method_logo {
    width: 34px; height: 34px;
    flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-s);
    background: var(--bg-soft);
    overflow: hidden;
}
.edouk_pay_method_logo img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.edouk_pay_method_text {
    display: flex; flex-direction: column;
    gap: 1px;
    flex: 1; min-width: 0;
}
.edouk_pay_method_text strong {
    font-size: var(--font-s);
    font-weight: 600;
    color: var(--default-color);
}
.edouk_pay_method_text small {
    font-size: calc(var(--font-xs) - 1px);
    color: var(--accent-color);
}
.edouk_pay_method_price {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--default-color);
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}
.edouk_pay_method_radio {
    width: 16px; height: 16px;
    flex: none;
    border: var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    transition: var(--transition-fast);
}
.edouk_pay_method_row.active .edouk_pay_method_radio {
    border: 4.5px solid var(--primary-color);
}

/* ---------- ÉTAPE 2 · COMPTE À CRÉDITER ---------- */
.edouk_pay_account {
    display: flex; align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
}
.edouk_pay_account_text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.edouk_pay_account_text small {
    font-size: calc(var(--font-xs) - 1px);
    color: var(--accent-color);
}
.edouk_pay_account_text strong {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--default-color);
    letter-spacing: 0.15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    unicode-bidi: isolate;
}
.edouk_pay_account_copy {
    display: inline-flex; align-items: center;
    gap: 6px;
    height: 29px; padding: 0 10px;
    flex: none;
    border: 0;
    border-radius: var(--radius-s);
    background: var(--bg-soft);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_pay_account_copy:hover { background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-card)); }
.edouk_pay_account_copy span {
    font-size: calc(var(--font-xs) - 1px);
    font-weight: 600;
    color: var(--primary-color);
}
.edouk_pay_account_copy i { font-size: 12px; color: var(--primary-color); }

/* ---------- ÉTAPE 2 · JUSTIFICATIF ---------- */
.edouk_pay_drop {
    height: 160px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    border: 2px dashed var(--grey-300);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: var(--transition-fast);
}
.edouk_pay_drop:hover {
    border-color: var(--primary-color);
    background: var(--bg-card-tint);
}
.edouk_pay_drop_placeholder {
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
}
.edouk_pay_drop_ico {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--bg-soft);
}
.edouk_pay_drop_ico i {
    font-size: 22px;
    color: var(--primary-color);
    --fa-primary-color: var(--primary-color);
    --fa-secondary-color: var(--primary-color);
    --fa-secondary-opacity: 0.4;
}
.edouk_pay_drop strong {
    font-size: var(--font-m);
    font-weight: 600;
    color: var(--default-color);
}
.edouk_pay_drop small {
    display: inline-flex; align-items: center;
    gap: 6px;
    font-size: calc(var(--font-xs) - 1px);
    color: var(--accent-color);
    white-space: nowrap;
}
.edouk_pay_drop small i { font-size: 4px; color: var(--grey-400); }
.edouk_pay_drop.has-file {
    border-style: solid;
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 4%, var(--bg-card));
    padding: 14px;
}
.edouk_pay_drop_preview {
    width: 100%;
    display: flex; align-items: center;
    gap: 10px;
    text-align: left;
}
[lang="ar"] .edouk_pay_drop_preview { text-align: right; }
.edouk_pay_drop_preview img {
    width: 46px; height: 46px;
    flex: none;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: 1px solid var(--grey-100);
}
.edouk_pay_drop_preview_text { flex: 1; min-width: 0; }
.edouk_pay_drop_preview_text b {
    display: block;
    font-size: var(--font-s);
    font-weight: 600;
    color: var(--default-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edouk_pay_drop_preview_text span {
    font-size: calc(var(--font-xs) - 1px);
    color: var(--accent-color);
}
.edouk_pay_drop_clear {
    width: 28px; height: 28px;
    flex: none;
    display: grid; place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--accent-color);
    cursor: pointer;
}
.edouk_pay_drop_clear:hover { color: var(--error); background: var(--error-light); }
.edouk_pay_drop_clear i { font-size: 14px; }

/* ---------- ÉTAPE 2 · ACTIONS ---------- */
.edouk_pay_actions {
    display: flex; align-items: center;
    gap: 10px;
}
.edouk_pay_back {
    width: 46px; height: 46px;
    flex: none;
    display: grid; place-items: center;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_pay_back:hover { border-color: var(--primary-color); }
.edouk_pay_back i { font-size: 15px; color: var(--accent-color); }
.edouk_pay_back:hover i { color: var(--primary-color); }
[lang="ar"] .edouk_pay_back i { transform: scaleX(-1); }

/* Le `type="submit"` de la modale. Même bleu de marque que les autres actions. */
.edouk_pay_cta {
    flex: 1; min-width: 0;
    min-height: 46px;
    display: flex; align-items: center; justify-content: center;
    gap: 9px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius);
    background: var(--cta);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_pay_cta:hover:not(:disabled) {
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}
.edouk_pay_cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: var(--shadow-flat);
}
.edouk_pay_cta,
.edouk_pay_cta > i,
.edouk_pay_cta > span { color: var(--on-accent); }
.edouk_pay_cta > span {
    font-size: var(--font-m);
    font-weight: 600;
}
.edouk_pay_cta > i {
    font-size: 14px;
    --fa-primary-color: var(--on-accent);
    --fa-secondary-color: var(--on-accent);
    --fa-secondary-opacity: 0.55;
}

/* ---------- AR ---------- */
[lang="ar"] #modal-pay .edouk_pay_head_title h2,
[lang="ar"] .edouk_pay_credits_text strong {
    font-family: "Cairo", "Noto Sans Arabic", "Inter", sans-serif;
    font-weight: 600;
}
[lang="ar"] .edouk_pay_head_price { direction: rtl; }
[lang="ar"] .edouk_pay_head_price .amount {
    direction: ltr;
    unicode-bidi: isolate;
}

@media (max-width: 480px) {
    .edouk_pay_head { padding: 14px 14px 12px; }
    .edouk_pay_head_price .amount { font-size: 23px; }
    .edouk_pay_tabs { padding: 0 14px; }
    .edouk_pay_body { padding: 13px 14px 14px; }
    .edouk_pay_drop { height: 140px; }
}


/* Language modal (#edouk-language-modal) */
#edouk-language-form .edouk_language_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#edouk-language-form .edouk_language_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: var(--radius);
    border: solid 1px transparent;
    background-color: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-m);
}
#edouk-language-form .edouk_language_active {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
}
.edouk_modal hr {
    border: none;
    border-top: solid 1px var(--bg-card);
    margin: 19px 0;
}

/* Free delivery table: hide slug, keep cover image only */
.edouk_freedelivery_site span {
    display: none;
}

/* Orders table (component OrdersTable + edouk_table_wrapper) */
.edouk_table_wrapper {
    width: 100%;
    overflow: auto;
    background-color: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 30px;
    padding: 0!important;
}
.edouk_table_wrapper::-webkit-scrollbar {
    height: 3px;
}
.edouk_table_wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.edouk_table_wrapper::-webkit-scrollbar-thumb {
    background-color: var(--grey-scrollbar-track);
    border-radius: 10px;
}
.edouk_table_wrapper .simplebar-track.simplebar-horizontal {
    background: transparent;
}
.edouk_table_wrapper .simplebar-scrollbar::before {
    background-color: var(--grey-scrollbar);
    border-radius: 10px;
}
.edouk_table_wrapper .simplebar-scrollbar:hover::before {
    background-color: var(--default-color);
}
.edouk_table {
    display: table;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: auto;
}
/* La carte porte désormais le radius (.edouk_table_wrapper), les cellules
   vont de bord à bord : plus de radius interne, il découpait des encoches. */
/* Le gap entre colonnes se fait par le padding des cellules (14px + 14px = 28px).
   border-spacing est écarté : il trouerait la ligne de séparation entre chaque td. */
.edouk_table th,
.edouk_table td {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    padding: 13px 14px;
}
.edouk_table th:first-child,
.edouk_table td:first-child {
    padding-inline-start: 22px;
}
.edouk_table th:last-child,
.edouk_table td:last-child {
    padding-inline-end: 22px;
}
.edouk_table_col_customer {
    min-width: 210px;
}
.edouk_table_col_status {
    width: 158px;
}
.edouk_table_col_order {
    width: 140px;
}
.edouk_table_col_phone {
    width: 178px;
}
.edouk_table_col_amount {
    width: 128px;
}
.edouk_table_col_action {
    width: 245px;
}
.edouk_table_col_delete {
    width: 88px;
}
.edouk_table thead th {
    font-size: 11.75px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: var(--bg-card-tint);
    border-bottom: solid 1px var(--blue-tint-300);
    color: var(--accent-color);
}
/* Les cellules ne posent AUCUN fond : c'est le cadre qui porte le verre, et une
   cellule opaque le recouvrirait ligne par ligne. Aucune colonne n'est figée ici,
   rien n'a donc besoin de se masquer pendant le défilement horizontal. */
.edouk_table tbody td {
    color: var(--default-color);
    font-size: 14.75px;
    font-weight: 400;
    background-color: transparent;
    border-bottom: solid 1px var(--blue-tint-300);
}
.edouk_table tfoot tr td {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: var(--bg-card-tint);
    border-top: solid 1px var(--blue-tint-300);
}
.edouk_table_customer {
    display: flex;
    align-items: center;
    gap: 11px;
}
.edouk_table_customer i {
    background-color: var(--background-color);
    padding: 7px;
    border-radius: 7px;
    color: var(--default-color);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    min-width: 39px;
    font-size: 17px;
    min-height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* La pastille est POSÉE SUR LE VERRE du cadre de tableau. Le même verre par-dessus
   lui-même ne se verrait pas — d'où la bordure, qui est ici ce qui la détache.

   En clair elle garde son fond teinté d'origine et reste sans bordure : sur un
   tableau blanc c'est la teinte qui la dessinait déjà. */
.edouk_table_customer_icon {
    width: 39px;
    height: 39px;
    flex: none;
    background-color: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
html[data-theme="light"] .edouk_table_customer_icon {
    background-color: var(--bg-page);
    border: none;
}
.edouk_table_customer_icon.is_new {
    background-color: var(--bg-soft);
    color: var(--primary-color);
}
.edouk_table_customer_icon svg {
    width: 20px;
    height: 20px;
}
.edouk_table_customer div {
    display: flex;
    flex-direction: column;
}
.edouk_table_customer div > span {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edouk_table_customer div small {
    color: var(--accent-color);
    font-size: 12.25px;
}
.edouk_table_label_phone {
    color: var(--default-color);
    font-size: 13.75px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    direction: ltr;
    transition: color 150ms ease-out;
}
.edouk_table_label_phone svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--accent-color);
}
.edouk_table_label_phone:hover,
.edouk_table_label_phone:hover svg {
    color: var(--primary-color);
}
.edouk_table_amount {
    font-family: "Ubuntu";
    font-weight: 700;
    font-size: 15.25px;
    color: var(--default-color);
    direction: ltr;
    display: inline-block;
}
.edouk_table_pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border-radius: 40px;
    font-size: 12.75px;
    font-weight: 600;
}
.edouk_table_pill i {
    font-size: 13px;
    color: inherit;
}
.edouk_table_pill_blue {
    background-color: var(--bg-soft);
    color: var(--primary-color);
}
.edouk_table_pill_green {
    background-color: var(--success-light);
    color: var(--success-text);
}
.edouk_table_pill_red {
    background-color: var(--error-light);
    color: var(--error-dark);
}
.edouk_table_pill_orange {
    background-color: var(--orange-pill-bg);
    color: var(--orange-pill-text);
}
.edouk_table_pill_purple {
    background-color: var(--purple-pale);
    color: var(--purple-strong);
}
.edouk_table_head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 21px;
}
.edouk_table_head .edouk_placeholder {
    margin-bottom: 0;
}
.edouk_table_badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 13px;
    border-radius: 40px;
    background-color: var(--cta);
    color: var(--on-accent);
    font-size: 12.75px;
    font-weight: 600;
}
.edouk_table_details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.edouk_table_details span {
    direction: ltr !important;
}
.edouk_currency {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
}
.edouk_table_actions {
    display: flex;
    gap: 6px;
}
.edouk_table_actions button {
    min-width: 100px;
}
.edouk_table_pagination {
    display: flex;
    align-items: center;
}
.edouk_table_pagination_btn {
    width: 32px;
    height: 32px;
    margin: 0 8px 0 0;
    background: var(--bg-card);
    border-radius: var(--radius-s);
    cursor: pointer;
    border: var(--border);
    transition: all 150ms ease-out;
}
.edouk_table_pagination_btn i {
    color: var(--primary-color);
}
.edouk_table_pagination_btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
}
.edouk_table_pagination_btn:hover:not(:disabled) {
    background-color: var(--info-bg);
    color: var(--primary-color);
    transition: var(--transition);
}
.edouk_table_pagination_number {
    margin: 0 10px 0 0;
}
html[lang="ar"] .edouk_table tbody td,
html[lang="ar"] .edouk_table thead th {
    text-align: right;
}

/* Telegram modal (#modal-telegram) */
.edouk_telegram_steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}
.edouk_telegram_step {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
}
.edouk_telegram_step p {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--default-color);
}
.edouk_telegram_step_number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    max-width: 24px;
    width: 24px;
    min-height: 24px;
    max-height: 24px;
    height: 24px;
    border-radius: var(--radius);
    background: var(--info-light);
    color: var(--info);
    font-weight: 600;
    font-size: 13px;
}
.edouk_telegram_command {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.edouk_telegram_command code {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--grey-100);
    border-radius: var(--radius);
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: normal;
    overflow: hidden;
}
.edouk_telegram_command .edouk_submit {
    flex: 0 0 auto;
    align-self: flex-start;
}
.edouk_telegram_ttl {
    margin-top: 12px;
    font-size: 12px;
    color: var(--grey-text-soft);
    text-align: center;
}
.edouk_submit_small {
    margin-top: 0;
    color: var(--primary-color);
    background-color: var(--bg-card);
}

/* ----- Google Sheet modal (port depuis edouk.css) ----- */
div[data-controller="googlesheet-setup"] .edouk_telegram_step {
    margin-bottom: 20px;
}
div[data-controller="googlesheet-setup"] .edouk_telegram_step textarea {
    max-height: 100px;
    border: solid 1px var(--background-color);
    padding: 10px;
    min-height: 100px;
    height: 100px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

html[lang="ar"] .edouk_wrapper > i {
    left: unset;
    right: 10px;
}
html[lang="ar"] .edouk_input {
    padding: 3px 36px 3px 15px;
    text-align: right;
}
html[lang="ar"] .edouk_params_param_title,
html[lang="ar"] .edouk_accordion li a div span {
    font-family: "Cairo", "Ubuntu", sans-serif;
}
html[lang="ar"] .edouk_accordion .uk-accordion-title::before {
    margin-left: 0;
    margin-right: auto;
}

/* Auth wrap (login/register/reset) */
.edouk_auth_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Auth grid (pages login/register : form à droite, gauche vide) */
.edouk_auth_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.edouk_auth_grid_left {
    display: none;
}
/* La carte de connexion et d'inscription : même surface de verre que le reste du
   tableau de bord ( voir `--glass` ). */
.formlogin {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 19px;
    background-color: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.formlogin label {
    margin-bottom: 10px;
}
.formlogin .edouk_wrapper {
    margin-bottom: 20px;
}
.formlogin .edouk_wrapper i {
    color: var(--primary-color);
}
.formlogin label[for="password"] {
    margin-top: -9px;
}
.formlogin a {
    margin-top: -10px;
    margin-bottom: 15px;
}
/* Badge "Bienvenue sur Edouk" — pill lavande avec pulse */
.edouk_auth_left_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    background: linear-gradient(135deg, var(--violet-light), var(--violet-bg));
    border: 1px solid rgba(124, 58, 237, 0.18);
    color: var(--violet-dark);
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    width: fit-content;
    letter-spacing: 0.2px;
    display: none!important;
}
.edouk_auth_left_badge i {
    font-size: 7px;
    color: var(--violet);
    border-radius: 50%;
    animation: pulse-live 2s ease-out infinite;
}

/* Heading principal */
.edouk_auth_left_title {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--default-color);
    letter-spacing: -0.6px;
    margin: 0;
    font-family: "Ubuntu", sans-serif;
}
.edouk_auth_left_title span {
    background: linear-gradient(135deg, var(--primary-color), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    display: inline-block;
}

/* Sous-titre descriptif */
.edouk_auth_left_subtitle {
    font-size: var(--font-m);
    color: var(--accent-color);
    line-height: 1.6;
    margin: 0;
    max-width: 460px;
}

/* Span accent (gradient) dans les titres de modal — pattern réutilisable */
.edouk_modal .uk-modal-title span,
.edouk_modal h2 span {
    background: linear-gradient(135deg, var(--primary-color), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    display: inline-block;
}

/* Liste des 3 features */
.edouk_auth_left_features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.edouk_auth_left_feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background-color: var(--bg-card);
    border: 1px solid var(--grey-100);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.edouk_auth_left_feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(124, 58, 237, 0.04));
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}
@media (hover: hover) {
    .edouk_auth_left_feature:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
        border-color: rgba(124, 58, 237, 0.25);
    }
    .edouk_auth_left_feature:hover::before {
        opacity: 1;
    }
}
.edouk_auth_left_feature > i {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 16px;
    position: relative;
    z-index: 1;
}
.edouk_auth_left_feature div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.edouk_auth_left_feature strong {
    font-size: var(--font-s);
    font-weight: 700;
    color: var(--default-color);
    line-height: 1.3;
    font-family: "Ubuntu", sans-serif;
}
html[lang="ar"] .edouk_auth_left_feature strong {
    font-family: "Cairo", "Ubuntu", sans-serif;
}
.edouk_auth_left_feature small {
    font-size: var(--font-xs);
    color: var(--accent-color);
    line-height: 1.45;
}

/* Variantes icônes — gradients subtiles pour effet premium */
.edouk_auth_left_feature_violet > i {
    background: linear-gradient(135deg, var(--violet-light), var(--violet-border));
    color: var(--violet);
    box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.25);
}
.edouk_auth_left_feature_green > i {
    background: linear-gradient(135deg, var(--green-feature-from), var(--green-feature-to));
    color: var(--green-feature);
    box-shadow: 0 2px 8px -2px rgba(5, 150, 105, 0.25);
}
.edouk_auth_left_feature_yellow > i {
    background: linear-gradient(135deg, var(--amber-light), var(--amber-soft));
    color: var(--amber);
    box-shadow: 0 2px 8px -2px rgba(217, 119, 6, 0.25);
}

form[name="website"] .dropzone-container {
    min-height: 135px!important;
}

/* Footer (auth pages) — ultra clean V3 style override */
/* margin-top: auto → pousse le footer en bas du main flex column (auto-adapt sans calc) */
.edouk_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    margin-top: auto;
    padding: 30px 0 0;
    font-size: var(--font-xs);
    gap: 22px;
    opacity: 1;
    border-top: 1px solid var(--grey-100);
}
.edouk_footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-color);
    font-size: inherit;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}
.edouk_footer a:hover {
    color: var(--primary-color);
    transform: translateY(-1px);
}
.edouk_footer a.footer_active {
    color: var(--primary-color);
    font-weight: 600;
}
.edouk_footer a i {
    font-size: inherit;
    color: inherit;
}
.edouk_footer a span {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
}

/* About page (route /about) */
.edouk_about {
    display: flex;
    flex-direction: column;
    padding: 19px;
    background-color: var(--bg-card-tint);
    box-shadow: var(--shadow);
    border-radius: var(--radius); 
}
.edouk_about_hero {
    text-align: center;
}
.edouk_about_hero p {
    font-size: var(--font-m);
    color: var(--default-color);
    line-height: 1.6;
    font-weight: 600;
    display: none;
}
.edouk_about_flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.edouk_about_step {
    display: flex;
    align-items: stretch;
    gap: 12px;
    position: relative;
}
.edouk_about_step_num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--cta);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 1;
}
.edouk_about_step:not(:last-child) .edouk_about_step_num::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 12px);
    background: linear-gradient(to bottom, var(--primary-color), rgba(49, 107, 255, 0.15));
}
.edouk_about_step:not(:last-child) {
    padding-bottom: 8px;
}
.edouk_about_step_body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(49, 107, 255, 0.03) 100%);
    border-radius: var(--radius);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.edouk_about_step_body:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--grey-200);
    transition: var(--transition);
}
.edouk_about_step_body i {
    font-size: 18px;
    color: var(--primary-color);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.edouk_about_step_body div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.edouk_about_step_body strong {
    font-size: var(--font-s);
    font-weight: 700;
    color: var(--default-color);
}
.edouk_about_step_body small {
    font-size: calc(var(--font-s) - 1px);
    color: var(--accent-color);
    line-height: 1.4;
}

/* Legal content (privacy / terms / cookies) */
.edouk_legal_content {
    max-height: calc(100vh - 52vh);
    overflow: auto;
    padding: 19px;
    background-color: var(--bg-card-tint);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.edouk_legal_content .simplebar-track.simplebar-vertical {
    background: transparent;
    width: 6px;
}
.edouk_legal_content .simplebar-scrollbar::before {
    background-color: var(--grey-scrollbar) !important;
    border-radius: 10px;
}
.edouk_legal_content .simplebar-scrollbar:hover::before {
    background-color: var(--grey-ink) !important;
}
.edouk_legal_content_updated {
    display: block;
    margin-bottom: 15px;
    font-size: var(--font-s);
}
.edouk_legal_content_row {
    margin-bottom: 15px;
}
.edouk_legal_content_row h4 {
    font-size: var(--font-m);
}
.edouk_legal_content_row p {
    margin-top: 5px;
    font-size: calc(var(--font-s) - 1px);
}
/* ---------- Alertes UIkit ----------
   Utilisées dans les modales Telegram et Google Sheet pour lister les comptes
   reliés. UIkit les rend en `background: #edfbf6` avec `color: #32d296` : un vert
   clair sur un vert presque blanc, soit 1,9:1. Illisible en clair, et en sombre ce
   fond quasi blanc fait une tache dans la modale.

   Elles reprennent donc la surface de verre du reste du tableau de bord, et la
   couleur ne porte plus que le sens — le texte dit « ce compte est actif », il n'a
   pas à être aussi le fond. */
.uk-alert {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    color: var(--default-color);
}
.uk-alert-success {
    background: var(--glass);
    color: var(--success-text);
}

/* Fond OPAQUE, et non un voile d'état : voir `--notification-bg`. */
.uk-notification-message {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background-color: var(--notification-bg)!important;
    border: 1px solid var(--primary-color);
    color: var(--primary-color)!important;
    font-weight: 600;
}
.uk-notification-message div {
    color: inherit;
}
.uk-notification-message div a {
    text-decoration: underline;
    font-weight: 700;
    margin: 0 6px;
}
.uk-notification-message-danger {
    background-color: var(--notification-danger-bg)!important;
    border-color: var(--error);
    color: var(--error)!important;
}

/* === Universal hover pattern (boutons + zones cliquables) === */
/* Hover : seulement sur devices à vrai pointeur (souris) — évite le hover "collé" sur mobile */
@media (hover: hover) {
    .edouk_submit:hover:not(:disabled),
    .edouk_submit_small:hover:not(:disabled),
    .edouk_params_param:hover,
    .edouk_header_tap div button:hover:not(:disabled),
    .edouk_header_route ol li button:hover:not(:disabled),
    .edouk_websites_web_time_info_settings:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
    }
    .edouk_submit:hover:not(:disabled) {
        color: var(--on-accent);
        background-color: var(--cta);
    }
}
/* Active (tap) : feedback pendant le clic/tap, disparaît au relâchement (mobile + desktop) */
.edouk_submit:active:not(:disabled),
.edouk_submit_small:active:not(:disabled),
.edouk_params_param:active,
.edouk_header_tap div button:active:not(:disabled),
.edouk_header_route ol li button:active:not(:disabled),
.edouk_websites_web_time_info_settings:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* === Accessibility — keyboard focus visible === */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.edouk_params_param:focus-visible,
.edouk_pay_method_row:focus-within,
.edouk_image_item:focus-visible,
.edouk_about_step_body:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .edouk_legal_content,
    .edouk_about,
    .formlogin {
        padding: unset;
        background-color: unset;
        box-shadow: unset;
        border-radius: unset;
    }
    .edouk_auth_grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    .edouk_auth_wrap {
        gap: 13px;
        padding: 20px;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-flat);
    }
    .edouk_auth_grid_left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 26px;
        padding: 10px 0;
        max-width: 520px;
        position: relative;
    }
    /* Décoration : blob coloré subtil en arrière-plan */
    .edouk_auth_grid_left::before {
        content: "";
        position: absolute;
        top: -40px;
        left: -60px;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(124, 58, 237, 0.10), transparent 70%);
        z-index: -1;
        pointer-events: none;
    }
    .edouk_auth_grid_left::after {
        content: "";
        position: absolute;
        bottom: -60px;
        left: 30%;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(49, 107, 255, 0.08), transparent 70%);
        z-index: -1;
        pointer-events: none;
    }
}

/* ========================================
   MODAL ORDER SHOW
   ======================================== */
.edouk_order_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
    padding: 15px;
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-soft);
}
.edouk_order_cell {
    flex: 1 1 calc(50% - 10px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 1px;
    border-radius: var(--radius-s);
}
.edouk_order_cell small {
    font-size: 11px;
    color: var(--accent-color);
    text-transform: uppercase;
    font-weight: 600;
}
.edouk_order_cell span {
    font-size: var(--font-m);
    color: var(--default-color);
    font-weight: 500;
}
.edouk_order_secondary {
    border-top: solid 1px var(--grey-100);
    padding: 12px 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.edouk_order_secondary_row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.edouk_order_secondary_row small {
    font-size: var(--font-xs);
    color: var(--accent-color);
    font-weight: 500;
}
.edouk_order_secondary_row span {
    font-size: var(--font-s);
    color: var(--default-color);
}

/* ========================================
   ORDER PRODUCTS (modal show)
   ======================================== */
.edouk_order_product_card {
    display: flex;
    gap: 14px;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--grey-50);
    margin-bottom: 10px;
}
.edouk_order_product_img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.edouk_order_product_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.edouk_order_product_name {
    font-size: var(--font-m);
    font-weight: 600;
    color: var(--default-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.edouk_order_product_details {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.edouk_order_product_detail {
    font-size: var(--font-xs);
    color: var(--accent-color);
}

/* ========================================
   MODAL ORDER ACTION / DELETE
   ======================================== */
.edouk_modal_action_body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
.edouk_modal_action_icon {
    padding: 0;
    width: 47px !important;
    height: 47px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 31px;
    border-radius: 50%;
}
.edouk_modal_action_icon_secondary {
    color: var(--secondary-color);
    background-color: color-mix(in srgb, var(--secondary-color) 6%, transparent);
}
.edouk_modal_action_icon_red {
    color: var(--error);
    background-color: color-mix(in srgb, var(--error) 6%, transparent);
}
.edouk_modal_action_icon_green {
    color: var(--success);
    background-color: color-mix(in srgb, var(--success) 6%, transparent);
}
.edouk_modal_action_icon_blue {
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 6%, transparent);
}
.edouk_modal_action_title {
    font-size: 21px;
    font-weight: 500;
    margin: 15px 0;
    color: var(--default-color);
}
.edouk_modal_action_message {
    text-align: center;
    padding: 0 10%;
    font-size: var(--font-l);
    color: var(--accent-color);
}
.edouk_modal_action_buttons {
    width: 100%;
    margin-top: 15px;
}
.edouk_modal_action_btn {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: var(--radius);
    color: var(--on-accent);
    font-weight: 600;
    cursor: pointer;
}
.edouk_modal_action_btn_red {
    background-color: var(--error-solid);
}
.edouk_modal_action_btn_delete {
    background-color: transparent;
    color: var(--red-deep);
    border: dashed 1px var(--red-deep);
}
.edouk_modal_action_btn_green {
    background-color: var(--success-solid);
}
.edouk_modal_action_btn_blue {
    background-color: var(--cta);
}
.edouk_modal_action_btn_secondary {
    background-color: var(--secondary-color);
    color: var(--on-accent);
}
.edouk_modal_action_btn_purple {
    background-color: var(--purple-solid);
}

/* =========================================================
   ACTIVATION MODAL v2 — Mettre sa page en ligne
   Scope: body.activation_active #modal-account > .edouk_activation
   ========================================================= */
.edouk_activation {
    display: flex;
    flex-direction: column;
}

/* ---------- HEADER ---------- */
.edouk_activation_head {
    background: var(--modal-head-bg);
    border-bottom: 1px solid var(--modal-head-border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edouk_activation_head_title {
    display: flex; flex-direction: column;
    gap: 3px;
}
#modal-account .edouk_activation_head_title h2 {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-l) + 1px);
    letter-spacing: -0.1px;
    color: var(--on-accent);
    margin: 0;
    padding: 0;
}
.edouk_activation_head_title p {
    font-size: var(--font-xs);
    color: var(--modal-head-sub);
}
.edouk_activation_head_tags {
    display: flex; flex-wrap: wrap;
    gap: 8px;
}
.edouk_activation_tag {
    display: inline-flex; align-items: center;
    gap: 5px;
    height: 25px; padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}
.edouk_activation_tag span {
    color: var(--on-accent);
    font-size: calc(var(--font-xs) - 1px);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- CORPS ---------- */
.edouk_activation_body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column;
    gap: 12px;
}

/* ---------- CRÉDITS OFFERTS ---------- */
.edouk_activation_credits {
    display: flex; align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    border: var(--border);
}
.edouk_activation_credits_ico {
    width: 34px; height: 34px;
    flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius-s);
    background: var(--bg-card);
}
.edouk_activation_credits_ico i {
    font-size: 16px;
    color: var(--primary-color);
    --fa-primary-color: var(--primary-color);
    --fa-secondary-color: var(--primary-color);
    --fa-secondary-opacity: 0.4;
}
.edouk_activation_credits_text {
    display: flex; flex-direction: column;
    gap: 3px;
}
.edouk_activation_credits_text strong {
    font-family: "Ubuntu", sans-serif;
    font-size: var(--font-m);
    font-weight: 500;
    color: var(--default-color);
}
.edouk_activation_credits_text small {
    font-size: calc(var(--font-xs) - 1px);
    color: var(--primary-color-dark);
    text-wrap: pretty;
}

/* ---------- FORMULAIRE ---------- */
.edouk_activation_form {
    display: flex; flex-direction: column;
    gap: 9px;
    width: 100%;
}
.edouk_activation_field {
    display: flex; flex-direction: column;
    gap: 4px;
}
.edouk_activation_field .edouk_label {
    font-size: calc(var(--font-xs) - 1px);
    font-weight: 500;
    color: var(--default-color);
}
.edouk_activation_form .edouk_wrapper > i {
    left: 11px;
    font-size: 14px;
    color: var(--primary-color);
}
.edouk_activation_form .edouk_input {
    height: 42px;
    padding-left: 34px;
    font-size: var(--font-s);
}

/* ---------- CTA ---------- */
.edouk_activation_cta {
    width: 100%;
    min-height: 46px;
    margin-top: 13px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: var(--radius);
    background: var(--cta);
    color: var(--on-accent);
    font-size: var(--font-m);
    font-weight: 600;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_activation_cta:hover:not(:disabled) {
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}
.edouk_activation_cta:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- AR ---------- */
[lang="ar"] #modal-account .edouk_activation_head_title h2,
[lang="ar"] .edouk_activation_credits_text strong {
    font-weight:600;
    font-family: "Cairo", "Noto Sans Arabic", "Inter", sans-serif;
}

@media (max-width: 480px) {
    .edouk_activation_head { padding: 14px 14px 12px; }
    .edouk_activation_body { padding: 13px 14px 14px; }
}






.edouk_stats_chart {
    position: relative;
    width: 100%;
    height: fit-content;
}
.edouk_stats_chart canvas {
    width: 100%;
    height: fit-content;
    max-height: 301px;
}
.edouk_stats_legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--bg-card);
    padding: 7px 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.edouk_stats_legend > span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--font-xs);
}
.edouk_stats_legend > span > i {
    min-width: 32px;
    width: 32px;
    min-height: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
}
.edouk_stats_legend_orders {
    color: var(--green-orders);
}
.edouk_stats_legend_orders > i {
    background-color: var(--green-orders-bg);
    color: var(--green-orders-icon);
}
.edouk_stats_legend_visits {
    color: var(--blue-visits);
}
.edouk_stats_legend_visits > i {
    background-color: var(--blue-visits-bg);
    color: var(--blue-visits-icon);
}

/* ==========================================================================
   BOOKING — réservation d'appel avec le fondateur (design reservation-appel)
   ========================================================================== */
.ltr-num {
    direction: ltr;
    unicode-bidi: embed;
}

/* ---------- barre dashboard ---------- */
.edouk_booking_bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 23px;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    background-color: var(--bg-card);
    cursor: pointer;
    box-shadow: var(--shadow);
    border: 1px solid var(--grey-100);
}
.edouk_booking_bar > i {
    color: var(--primary-color);
}
.edouk_booking_bar > strong {
    flex: 1;
}
.edouk_booking_bar > button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
}

/* ---------- bouton booking ---------- */
.booking-body .btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 18px;
    cursor: pointer;
    transition: all 180ms ease-out;
}
.booking-body .btn-primary {
    background: var(--cta);
    color: var(--on-accent);
    box-shadow: 0 6px 16px rgba(49,107,255,.22);
}
.booking-body .btn-primary:hover:not(:disabled) {
    background: var(--primary-color-dark);
    transform: translateY(-1px);
}
.booking-body .btn-primary:disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

/* ---------- modale : panneaux ---------- */
#modal-booking .uk-modal-dialog {
    padding: 0;
    overflow: hidden;
}
.booking-panel { display: none; }
.booking-panel.is-active { display: block; }

.booking-head {
    background-color: var(--bg-page);
    background-image: var(--page-mesh);
    padding: 26px 22px 20px;
    border-bottom: 1px solid var(--border-color);
}
.booking-head .promise {
    margin: 25px 0 0;
    line-height: 1.45;
    color: var(--accent-color);
    font-weight: 500;
}
.promise strong {
    color: var(--default-color);
    margin-bottom: 10px;
    display: flex;
    font-size: var(--font-l);
}
.booking-body {
    padding: 20px 22px 22px;
    background-color: var(--bg-card);
}

/* ---------- créneaux ---------- */
.slots-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-color-dark);
    margin-bottom: 10px;
    background-color: var(--bg-soft);
    padding: 9px 15px;
    border-radius: var(--radius-s);
    letter-spacing: .01em;
}
.slots-label i {
    color: var(--primary-color-dark);
    font-size: 9px;
}
.slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.day-col {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.day-head {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-color);
    text-align: center;
    line-height: 1.2;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hour-chip {
    position: relative;
    display: block;
    text-align: center;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    padding: 9px 4px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--default-color);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 180ms ease-out;
    direction: ltr;
}
.hour-chip:hover {
    border-color: var(--primary-color);
}
.hour-chip span {
    color: inherit;
}
.hour-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hour-chip:has(input:checked) {
    border-color: var(--cta);
    background: var(--cta);
    color: var(--on-accent);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(49,107,255,.28);
}
.callback {
    font-size: 12.75px;
    color: var(--accent-color);
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.4;
}
.callback .ltr-num {
    font-weight: 600;
    color: var(--default-color);
}

/* ---------- confirmation ---------- */
.confirm-head {
    background-color: var(--bg-page);
    background-image: var(--page-mesh);
    padding: 30px 22px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.confirm-head i {
    color: var(--on-accent);
}
.confirm-check {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(49,107,255,.3);
}
.confirm-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 6px;
}
html[lang="ar"] .confirm-eyebrow {
    letter-spacing: 0;
}
.confirm-when {
    font-size: 25px;
    font-weight: 500;
    color: var(--default-color);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.confirm-rows {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 22px;
}
.confirm-row {
    font-size: 13.75px;
    line-height: 1.5;
    color: var(--default-color);
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--border-color);
    margin: 0;
}
.confirm-row.accent {
    border-inline-start-color: var(--primary-color);
}
.confirm-row .ltr-num {
    font-weight: 600;
}

@media (max-width: 359px) {
    .hour-chip { font-size: 12.5px; padding: 9px 2px; }
    .day-head { font-size: 11.5px; }
}


/* =========================================================
   MODAL HEAD — bandeau générique (reprend pay / activation)
   Scope: .edouk_modal > .uk-modal-dialog > … .edouk_modal_head
   ========================================================= */

/* Header pleine largeur : on retire le padding du corps de la modale et le
   bouton de fermeture flottant d'UIkit, remplacé par celui du bandeau. */
#modal-account .uk-modal-body,
#modal-codingReset .uk-modal-body,
#modal-delivery .uk-modal-body,
#modal-deliveryPrices .uk-modal-body,
#modal-googlesheet .uk-modal-body,
#modal-newWebsite .uk-modal-body,
#modal-order-action .uk-modal-body,
#modal-order-delete .uk-modal-body,
#modal-order-show .uk-modal-body,
#modal-telegram .uk-modal-body,
#modal-theme-update .uk-modal-body,
#modal-websiteStats .uk-modal-body,
#edouk-language-modal .uk-modal-body { padding: 0; }

#modal-account .uk-modal-close-default,
#modal-codingReset .uk-modal-close-default,
#modal-delivery .uk-modal-close-default,
#modal-deliveryPrices .uk-modal-close-default,
#modal-googlesheet .uk-modal-close-default,
#modal-newWebsite .uk-modal-close-default,
#modal-order-action .uk-modal-close-default,
#modal-order-delete .uk-modal-close-default,
#modal-order-show .uk-modal-close-default,
#modal-telegram .uk-modal-close-default,
#modal-theme-update .uk-modal-close-default,
#modal-websiteStats .uk-modal-close-default,
#edouk-language-modal .uk-modal-close-default { display: none; }

/* En sombre, le fond est un VOILE de bleu marque posé sur la surface de la modale,
   et c'est le filet du bas qui ferme le bandeau. En clair, l'aplat plein d'avant :
   les deux valeurs vivent dans `--modal-head-bg` et `--modal-head-border`. */
.edouk_modal_head {
    background: var(--modal-head-bg);
    border-bottom: 1px solid var(--modal-head-border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Variante de couleur optionnelle : le bandeau reprend la couleur de la
   pastille du statut concerné (voir .edouk_table_pill_*).

   Le bleu ne redit rien : c'est déjà la couleur du bandeau par défaut. Il reprend
   donc le même voile que la règle de base — sans ça il réimposait un aplat plein
   par-dessus, et une modale de commande au statut bleu ne ressemblait pas aux
   autres. */
.edouk_modal_head_blue {
    background: var(--modal-head-bg);
}
.edouk_modal_head_green {
    background: var(--success-solid);
}
.edouk_modal_head_red {
    background: var(--error-solid);
}
.edouk_modal_head_purple {
    background: var(--purple-solid);
}
/* LES TROIS VARIANTES SONT DES APLATS, pas le voile du bandeau par défaut. Le
   sous-titre y reprend donc du blanc atténué : `--modal-head-sub` est un bleu pâle
   calibré pour le voile sur fond encre, et sur un aplat de couleur il tombe à 1:1.

   Le token est redéfini pour le sous-arbre, la règle du sous-titre n'a pas à savoir
   dans quelle variante elle se trouve. */
.edouk_modal_head_green,
.edouk_modal_head_red,
.edouk_modal_head_purple {
    --modal-head-sub: rgba(255, 255, 255, 0.78);
}
.edouk_modal_head_top {
    display: flex; align-items: flex-start;
    gap: 12px;
}
.edouk_modal_head_title {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 3px;
}
.edouk_modal .uk-modal-dialog .edouk_modal_head_title h2 {
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: calc(var(--font-l) + 1px);
    letter-spacing: -0.1px;
    color: var(--on-accent);
    margin: 0;
    padding: 0;
}
.edouk_modal_head_title p {
    font-size: var(--font-xs);
    color: var(--modal-head-sub);
}
.edouk_modal_head_close {
    width: 30px; height: 30px;
    flex: none;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-s);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: var(--transition-fast);
}
.edouk_modal_head_close:hover { background: rgba(255, 255, 255, 0.22); }
.edouk_modal_head_close i { font-size: 14px; color: var(--on-accent); }

/* Le corps reprend le padding que le dialog vient de perdre. */
.edouk_modal_body {
    padding: 14px 16px 16px;
}

[lang="ar"] .edouk_modal .uk-modal-dialog .edouk_modal_head_title h2 {
    font-family: "Cairo", "Noto Sans Arabic", "Inter", sans-serif;
    font-weight: 600;
}

@media (max-width: 480px) {
    .edouk_modal_head { padding: 14px 14px 12px; }
    .edouk_modal_body { padding: 13px 14px 14px; }
}

/* L'attente d'une turbo-frame : la même dans les modales du compte, la liste des
   commandes, la liste des pages et la retouche. */
.edouk_frame_spinner {
    font-size: 24px;
    color: var(--primary-color);
}

/* ========================================
   FEUILLES DE PAGE

   Ce qui vivait dans un bloc `<style>` de page Twig. Ces règles arrivent ICI, en
   fin de fichier, donc APRÈS les règles générales : une page garde le dernier mot
   sur le tableau de bord, ce qui était déjà l'intention de chacun de ces blocs.

   Chaque section est scopée par le préfixe de sa page — aucune ne peut atteindre
   une autre.
   ======================================== */

/* ========================================
   ONBOARDING — écran /request
   ======================================== */
.form_onboarding_request {
    padding: 20px;
    background-color: var(--bg-card);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-flat);
}
.form_onboarding_request .edouk_wrapper {
    margin-bottom: 15px;
}
.form_onboarding_request label {
    margin-bottom: 5px;
    font-weight: 500;
}
.form_onboarding_request input {
    height: 45px;
}
.form_onboarding_request textarea {
    min-height: 100px;
    max-height: 150px;
    padding-top: 10px;
}

/* ========================================
   ONBOARDING — le layout partagé

   Ce que les DEUX écrans partagent : la colonne à hauteur fixe, le cadre navigateur
   et le rappel de rotation.
   ======================================== */

/* Hauteur fixe, rien qui déborde. Offsets du body : padding-top 96px
   ( header réduit ) + padding-bottom 30px. */
.onboarding_stage {
    height: calc(100vh - 126px);
    height: calc(100dvh - 126px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

/* --------- Le cadre navigateur --------- */
.onboarding_screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.onboarding_screen_bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--grey-100);
    background: var(--bg-modal);
}
.onboarding_screen_bar i {
    font-size: 12px;
    color: var(--success);
}
/* L'adresse ne se retourne pas en arabe : c'est une URL */
.onboarding_screen_url {
    flex: 1;
    min-width: 0;
    direction: ltr;
    text-align: left;
    font-size: 11px;
    color: var(--accent-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Une étiquette traduite, elle : elle suit la direction de la langue */
.onboarding_screen_label {
    direction: inherit;
    text-align: inherit;
}
.onboarding_screen_badge {
    flex: none;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--grey-400);
}
.onboarding_scene {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-card-tint);
    overflow: hidden;
}

/* --------- Le rappel de rotation ---------
   932px = un iPhone Pro Max couché. Le seuil vise les téléphones et les
   petites tablettes en paysage, jamais un portable qui commence à 1280px.
   En portrait la règle ne s'applique pas du tout. */
.onboarding_rotate {
    display: none;
}
@media (max-width: 932px) and (orientation: landscape) {
    .onboarding_rotate {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: var(--background-color);
    }
    .onboarding_stage {
        display: none !important;
    }
}
.onboarding_rotate_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 320px;
}
.onboarding_rotate_inner i {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--purple-light);
    color: var(--purple);
    font-size: 24px;
    animation: edoukRotateHint 1.8s ease-in-out infinite;
}
.onboarding_rotate_inner p {
    margin: 0;
    font-size: 12px;
    color: var(--accent-color);
    line-height: 1.4;
}
@keyframes edoukRotateHint {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-90deg); }
}

/* ========================================
   ONBOARDING — écran /preview
   ======================================== */

/* Le scale passe par transform + dimensions compensées : `zoom` sur une
   iframe est rendu différemment par Safari iOS ( contenu dessiné à ~85%
   dans le coin haut-gauche, bandes blanches à droite et en bas ) alors que
   transform se comporte pareil partout. */
.onboarding_frame {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / 0.85);
    height: calc(100% / 0.85);
    border: none;
    display: block;
    background: var(--paper);
    transform: scale(0.85);
    transform-origin: top left;
}
/* Le stage est en flex column — sans cette largeur le formulaire se
   réduirait à celle de son bouton. */
.onboarding_stage form {
    flex: 0 0 auto;
    width: 100%;
}

/* ========================================
   ONBOARDING — écran /live

   TOUT L'ÉCRAN SE PILOTE AVEC UN SEUL ATTRIBUT : `data-status` sur la racine,
   qui porte exactement la valeur de Landing::status — le même mot que le
   serveur écrit en base et que Mercure diffuse.

   Le regroupement des 5 étapes du worker en 3 cartes vit ICI, dans trois
   règles CSS, et nulle part ailleurs. Le contrôleur Stimulus n'a jamais à le
   connaître : il recopie le statut, le CSS choisit quoi montrer.

   La colonne, le cadre navigateur et le rappel de rotation viennent du layout
   ci-dessus : l'écran preview les partage.
   ======================================== */

/* =========================================================
   LA SÉLECTION — trois règles portent toute la mise en scène
   ========================================================= */

/* La scène : une couche visible à la fois, toutes superposées.

   SCOPÉE SOUS `.onboarding_live`, ET C'EST OBLIGATOIRE. L'écran /preview partage
   `.onboarding_scene` avec celui-ci, mais n'y met qu'une seule chose : son iframe.
   Sans ce préfixe, la règle la masque et la preview rend une page vide.

   Ça ne se voyait pas tant que cette feuille vivait dans le <style> de /live : les
   deux blocs ne se rencontraient jamais. Ils sont désormais dans le même fichier. */
.onboarding_live .onboarding_scene > * { display: none; position: absolute; inset: 0; }

[data-status="screenwriter"] .onboarding_shots,
[data-status="imagine"]      .onboarding_shots,
[data-status="dev"]          .onboarding_code,
[data-status="review"]       .onboarding_scan,
[data-status="edit"]         .onboarding_scan,
[data-status="capture"]      .onboarding_scan,
[data-status="published"]    .onboarding_page { display: block; }

/* La carte : l'étape en cours, la page prête, ou l'échec */
.onboarding_card,
.onboarding_done,
.onboarding_error { display: none; }

[data-status="screenwriter"] .onboarding_card,
[data-status="imagine"]      .onboarding_card,
[data-status="dev"]          .onboarding_card,
[data-status="review"]       .onboarding_card,
[data-status="edit"]         .onboarding_card,
[data-status="capture"]      .onboarding_card,
[data-status="published"]    .onboarding_done { display: block; }

[data-status="error"] .onboarding_error { display: block; }

/* Dans la carte : l'habillage suit la CARTE, le détail suit le STATUT.
   `.onboarding_live` EST OBLIGATOIRE ICI, ne pas le retirer : ces classes
   portent aussi les icônes, et FontAwesome est chargé en kit JS — il injecte
   `.fa-regular { display: inline-block }` dans le head À L'EXÉCUTION, donc
   après cette feuille. À spécificité égale le dernier gagne, et les trois
   icônes s'affichaient en même temps. Le préfixe passe la règle en (0,2,0) ;
   les règles d'affichage ci-dessous sont au même niveau mais viennent après,
   elles gardent donc le dernier mot. */
.onboarding_live .onboarding_for_images,
.onboarding_live .onboarding_for_layout,
.onboarding_live .onboarding_for_review,
.onboarding_live .onboarding_on_screenwriter,
.onboarding_live .onboarding_on_imagine,
.onboarding_live .onboarding_on_dev,
.onboarding_live .onboarding_on_review,
.onboarding_live .onboarding_on_edit,
.onboarding_live .onboarding_on_capture { display: none; }

[data-status="screenwriter"] .onboarding_for_images,
[data-status="imagine"]      .onboarding_for_images,
[data-status="dev"]          .onboarding_for_layout,
[data-status="review"]       .onboarding_for_review,
[data-status="edit"]         .onboarding_for_review,
[data-status="capture"]      .onboarding_for_review,
[data-status="screenwriter"] .onboarding_on_screenwriter,
[data-status="imagine"]      .onboarding_on_imagine,
[data-status="dev"]          .onboarding_on_dev,
[data-status="review"]       .onboarding_on_review,
[data-status="edit"]         .onboarding_on_edit,
[data-status="capture"]      .onboarding_on_capture { display: block; }

/* =========================================================
   LES COUCHES DE LA SCÈNE
   ========================================================= */

/* --------- Couche 1 : les images qui s'empilent --------- */

/* L'attente. Le screenwriter écrit ses scènes avant qu'une seule photo
   n'existe : sans ça la scène reste vide une quinzaine de secondes, et un
   écran vide se lit comme une panne. Elle s'efface d'elle-même dès que la
   première image entre dans la pile — aucune ligne de JS pour ça. */
/* Le conteneur est un <div>, PAS l'icône elle-même : une classe seule sur un
   <i> perd contre le `display` que le kit FontAwesome injecte à l'exécution. */
.onboarding_shots_wait {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding_shots_wait i {
    font-size: 72px;
    color: var(--primary-color);
    animation: onboardingBreathe 2.4s ease-in-out infinite;
}
.onboarding_shots:has(.onboarding_shot) .onboarding_shots_wait { display: none; }
@keyframes onboardingBreathe {
    0%, 100% { opacity: .45; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

.onboarding_shots_stack {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Le JS ne pose qu'un nombre : `--depth`. Le recul et l'estompage sont
   calculés ici, pour que la profondeur reste une affaire de CSS. */
.onboarding_shot {
    position: absolute;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: var(--border);
    background: var(--bg-soft);
    box-shadow: var(--shadow-lift);
    transition: transform 700ms ease-out, opacity 700ms ease-out;
    transform: translateY(calc(var(--depth, 0) * -13px)) scale(calc(1 - var(--depth, 0) * .07));
    opacity: calc(1 - var(--depth, 0) * .34);
    z-index: calc(20 - var(--depth, 0));
}
.onboarding_shots_dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
}
.onboarding_dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--grey-200);
    transition: var(--transition);
}
.onboarding_dot.is-done { background: var(--primary-color); }

/* --------- Couche 2 : le document qui s'écrit --------- */
.onboarding_code {
    --onboarding-code-line: 21px;
    background: var(--console-bg);
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: var(--onboarding-code-line);
    overflow: hidden;
}
/* LE BLOC EST ANCRÉ EN BAS, ET IL GRANDIT VERS LE HAUT.
   C'est ce qui fait suivre la vue : chaque ligne prend sa hauteur au moment
   où elle se tape, donc la dernière écrite touche toujours le bas du cadre
   et ce sont les premières qui sortent par le haut.

   `min-height: 100%` garde le comportement d'avant tant que ça tient : le
   bloc remplit la scène, le texte part donc du HAUT et descend normalement.
   Il ne commence à défiler qu'une fois le bas atteint.

   Aucune hauteur n'est écrite nulle part : la scène mesure ce qu'elle veut
   selon le téléphone, le défilement s'ajuste tout seul. */
.onboarding_code_body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    padding: 16px 0;
}
/* La frappe est une animation de `clip-path`, pas de `width` : le rendu est
   identique mais le navigateur ne recalcule aucun layout, il redécoupe une
   couche déjà peinte. Aucun timer JS non plus. Le bloc se tape UNE FOIS —
   une frappe qui reboucle se lit comme un bug, pas comme du travail.

   La hauteur est une SECONDE animation, de durée nulle : elle bascule la
   ligne de 0 à sa hauteur pile quand la frappe commence. Deux animations
   partagent le même `animation-delay` — la valeur est répétée pour chacune —
   donc les `nth-child` ci-dessous pilotent les deux d'un seul chiffre. */
.onboarding_code_line {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 14px;
    color: var(--console-text);
    white-space: pre;
    clip-path: inset(0 100% 0 0);
    animation: onboardingType 1.1s steps(40) forwards,
               onboardingLine 0s linear forwards;
}
.onboarding_code_line.is-tag { color: var(--console-tag); }
.onboarding_code_line.is-cta { color: var(--console-cta); }

.onboarding_code_line:nth-child(1)  { animation-delay: 0s; }
.onboarding_code_line:nth-child(2)  { animation-delay: 0.9s; }
.onboarding_code_line:nth-child(3)  { animation-delay: 1.8s; }
.onboarding_code_line:nth-child(4)  { animation-delay: 2.7s; }
.onboarding_code_line:nth-child(5)  { animation-delay: 3.6s; }
.onboarding_code_line:nth-child(6)  { animation-delay: 4.5s; }
.onboarding_code_line:nth-child(7)  { animation-delay: 5.4s; }
.onboarding_code_line:nth-child(8)  { animation-delay: 6.3s; }
.onboarding_code_line:nth-child(9)  { animation-delay: 7.2s; }
.onboarding_code_line:nth-child(10) { animation-delay: 8.1s; }
.onboarding_code_line:nth-child(11) { animation-delay: 9.0s; }
.onboarding_code_line:nth-child(12) { animation-delay: 9.9s; }
.onboarding_code_line:nth-child(13) { animation-delay: 10.8s; }
.onboarding_code_line:nth-child(14) { animation-delay: 11.7s; }
.onboarding_code_line:nth-child(15) { animation-delay: 12.6s; }
.onboarding_code_line:nth-child(16) { animation-delay: 13.5s; }
.onboarding_code_line:nth-child(17) { animation-delay: 14.4s; }
.onboarding_code_line:nth-child(18) { animation-delay: 15.3s; }

.onboarding_code_caret {
    display: block;
    width: 7px;
    height: 13px;
    margin: 2px 14px;
    background: var(--console-tag);
    animation: onboardingCaret 1s step-end infinite;
}
@keyframes onboardingType  { to { clip-path: inset(0 0 0 0); } }
@keyframes onboardingLine  { to { height: var(--onboarding-code-line); } }
@keyframes onboardingCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --------- Couche 3 : la relecture --------- */
.onboarding_scan {
    background: var(--paper);
}
/* Une page abstraite : on montre qu'il y a quelque chose à lire sans
   prétendre montrer le vrai document, qui n'existe pas encore.
   PAS DE `filter: blur()` ici — flouter des rectangles gris n'ajoute
   aucune information et force une recomposition à chaque passage du
   balayage, ce qui se sent sur un téléphone. */
/* Elle occupe TOUTE la scène : les blocs de texte gardent leur taille, le
   visuel du haut absorbe le reste. Avec des hauteurs figées, la page
   s'arrêtait en cours de route et le balayage passait sur du vide. */
.onboarding_scan_page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px;
}
.onboarding_scan_page span {
    display: block;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--grey-100);
}
.onboarding_scan_page span:nth-child(1) { flex: 1 1 auto; min-height: 90px; background: var(--bg-soft); border-radius: var(--radius-s); }
.onboarding_scan_page span:nth-child(2) { height: 15px; width: 82%; background: var(--grey-200); }
.onboarding_scan_page span:nth-child(3) { height: 15px; width: 54%; }
.onboarding_scan_page span:nth-child(4) { height: 26px; width: 40%; background: var(--grey-300); }
.onboarding_scan_page span:nth-child(5) { height: 38px; border-radius: var(--radius-s); }
.onboarding_scan_page span:nth-child(6) { height: 44px; border-radius: var(--radius-s); background: var(--primary-color); }

/* Le balayage est une bande de 36px posée en haut d'une couche pleine
   hauteur : la translation de 100% la fait descendre jusqu'en bas, quelle
   que soit la hauteur de la scène. */
.onboarding_scan_beam {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(49, 107, 255, 0) 0%, rgba(49, 107, 255, .16) 100%);
    background-size: 100% 36px;
    background-repeat: no-repeat;
    animation: onboardingScan 2.6s linear infinite;
}
@keyframes onboardingScan {
    from { transform: translateY(-36px); }
    to   { transform: translateY(100%); }
}

/* --------- Couche 4 : la page terminée ---------
   LA CAPTURE, pas le HTML. C'est le JPEG que la boutique sert au visiteur,
   donc le vendeur voit exactement ce que son client verra. Et une image se
   met à l'échelle toute seule, là où le document — un canvas de 1080px à
   l'échelle d'une affiche — aurait demandé un zoom recalculé à chaque
   redimensionnement. */
.onboarding_page {
    overflow-y: auto;
    background: var(--paper);
}
.onboarding_page img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   LA CARTE D'ÉTAPE
   ========================================================= */
.onboarding_card,
.onboarding_done,
.onboarding_error {
    flex: 0 0 auto;
    background: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 17px 15px;
}
.onboarding_card_head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.onboarding_card_icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--radius-s);
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--primary-color);
}
.onboarding_card_icon i {
    color: var(--primary-color);
}
.onboarding_card_body {
    flex: 1;
    min-width: 0;
}
.onboarding_card_title {
    font-size: var(--font-l);
    font-weight: 500;
    line-height: 1.25;
    color: var(--default-color);
}
.onboarding_card_detail {
    margin: 2px 0 0;
    font-size: var(--font-s);
    color: var(--accent-color);
}
.onboarding_card_spin {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--bg-soft);
    border-top-color: var(--primary-color);
    animation: onboardingSpin 700ms linear infinite;
}
@keyframes onboardingSpin { to { transform: rotate(360deg); } }

.onboarding_card_track {
    margin-top: 13px;
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    overflow: hidden;
}
.onboarding_card_bar {
    width: 0;
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    transition: width 500ms ease-out;
}
.onboarding_card_foot {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--font-xs);
    color: var(--accent-color);
}
.onboarding_card_foot > span { letter-spacing: .03em; text-transform: uppercase; }
/* Le pourcentage reste un nombre latin, même en arabe */
.onboarding_card_percent { direction: ltr; text-transform: none; }

/* =========================================================
   LA PAGE PRÊTE
   ========================================================= */
.onboarding_done_head {
    display: flex;
    align-items: center;
    gap: 11px;
}
.onboarding_done_head > i {
    font-size: 24px;
    color: var(--success);
}
.onboarding_done_head h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.onboarding_done_head p {
    margin: 3px 0 0;
    font-size: var(--font-s);
    color: var(--accent-color);
}
.onboarding_done_link {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--border);
    background: var(--bg-card-tint);
    border-radius: var(--radius-s);
    padding: 9px 10px;
}
.onboarding_done_link > i {
    flex: none;
    font-size: 15px;
    color: var(--accent-color);
}
.onboarding_done_link > span {
    flex: 1;
    min-width: 0;
    direction: ltr;
    text-align: left;
    font-size: var(--font-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.onboarding_done_copy {
    flex: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-s);
    font-weight: 500;
    color: var(--primary-color);
    background: var(--bg-soft);
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    white-space: nowrap;
    transition: var(--transition);
}
.onboarding_done_copy:hover { background: var(--blue-tint-400); }


/* =========================================================
   L'ÉCHEC
   ========================================================= */
.onboarding_error_head {
    display: flex;
    align-items: center;
    gap: 11px;
}
.onboarding_error_head > i {
    font-size: 24px;
    color: var(--error);
}
.onboarding_done form,
.onboarding_error form { margin-top: 14px; }
.onboarding_error h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.onboarding_error p {
    margin: 3px 0 0;
    font-size: var(--font-s);
    color: var(--accent-color);
}

/* ========================================
   CODING — la page de retouche
   ======================================== */

/* LA PAGE DÉFILE, LA BARRE FLOTTE.

   Plus de découpe en deux, plus de conteneur de défilement à nous : l'iframe
   reçoit la hauteur réelle de son document ( voir le contrôleur ), elle est
   donc dépliée en entier et c'est la page qui défile.

   Deux problèmes tombent d'un coup. L'ascenseur est celui de la page, donc à
   droite en français et en anglais sans qu'on ait rien à négocier avec un
   document arabe. Et il n'y a plus qu'une seule zone qui défile.

   Le dégagement du bas empêche la barre de recouvrir la fin de la page. Il ne
   peut plus être une constante : la barre change de hauteur d'un état à l'autre,
   d'une ligne à cinq. `--coding-bar` est mesurée par le contrôleur et vaut la
   hauteur réelle ; la valeur de repli est celle de l'état d'attente, servie
   avant la première mesure. */
/* Le header ne rend plus ici que sa rangée de navigation ( voir
   `header.html.twig` ), donc les 168px qui dégageaient DEUX rangées sont de
   trop. Même raison que `.edouk_main_onboarding` plus haut.

   UNE CLASSE À NOUS, ET NON `.edouk_main` : cette classe n'existe que sur la page
   de retouche, elle ne peut donc atteindre aucune autre page.

   `main.` et `!important` : `.edouk_main` pose son propre `!important`, donc la
   spécificité tranche — `main.coding_page` la dépasse d'un cran. */
main.coding_page {
    padding-top: 94px !important;
}

/* `relative` : c'est le repère du clic qui se place dedans, en absolu. */
.coding_stage {
    position: relative;
    padding-bottom: calc(var(--coding-bar, 120px) + 26px);
}

/* --------- Le repère du clic ---------
   Posé sur le point exact où le vendeur a cliqué, d'où les marges négatives
   qui le recentrent sur ses propres coordonnées. Il vit dans NOTRE page et
   non dans l'iframe : le document du vendeur n'est jamais modifié, et le
   repère garde sa taille réelle au lieu d'être réduit avec lui. */
.coding_marker {
    display: none;
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.coding_stage[data-picked] .coding_marker {
    display: block;
}
.coding_marker_close {
    position: absolute;
    top: -9px;
    left: 13px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--error-solid);
    color: var(--on-accent);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: var(--transition);
}
.coding_marker_close i {
    color: inherit;
}
.coding_marker_close:active {
    transform: translateY(-1px);
}

/* `min-height` remplit l'écran quand le document est court — c'est le cas des
   deux écrans d'attente, que le contrôleur laisse tels quels. 186px = les
   124px de padding de `.edouk_main` une fois remonté ci-dessus, plus les 36px
   du bandeau qui précède l'iframe, plus les 26px de respiration sous la barre.
   La barre elle-même s'ajoute par sa variable, comme au-dessus.

   `max()` pose le PLANCHER : sur un écran court la soustraction ne laisserait
   presque rien ( 400px d'écran donnent 66px ), donc en dessous de 300px le
   cadre refuse de rétrécir et la page défile. La barre étant fixe, elle reste
   atteignable de toute façon.

   Une landing, elle, reçoit du contrôleur une hauteur explicite bien plus
   grande, qui prend le dessus.

   Le filet marque la frontière entre le tableau de bord et la page du
   vendeur : sans lui la landing, blanche elle aussi, semble flotter. */
/* --------- Le bandeau du cadre ---------
   Sa propre copie de celui du layout d'onboarding, plus haut : la page de
   retouche n'étend pas ce layout, elle ne peut donc pas en hériter. */
/* Le bandeau posé juste au-dessus de l'iframe : même surface de verre que le reste,
   et son filet devient celui du verre pour marquer la frontière avec la landing. */
.coding_screen_bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass);
}
.coding_screen_bar i {
    font-size: 12px;
    color: var(--success);
}
/* `pulse-live` est déclarée plus haut, où la liste des sites l'utilise déjà : c'est la
   même pastille et le même battement, on ne redéclare pas l'animation.
   Scopée sous la barre pour passer devant les 12px de `.coding_screen_bar i`. */
.coding_screen_bar .coding_screen_live {
    font-size: 8px;
    display: inline-block;
    border-radius: 50%;
    animation: pulse-live 2s ease-out infinite;
}
/* L'adresse ne se retourne pas en arabe : c'est une URL */
.coding_screen_url {
    flex: 1;
    min-width: 0;
    direction: ltr;
    text-align: left;
    font-size: 11px;
    color: var(--accent-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coding_iframe {
    display: block;
    width: 100%;
    min-height: max(300px, calc(100dvh - 186px - var(--coding-bar, 120px)));
    border: solid 5px var(--paper);
    border-radius: 0;
    background-color: var(--paper);
}
/* Toute la largeur, aux mêmes gouttières que `.edouk_container` — elle est
   `fixed`, donc hors du flux du conteneur : ses marges sont recopiées ici
   palier par palier, sinon la barre déborderait du reste de la page. */
.coding_form {
    position: fixed;
    left: 5%;
    right: 5%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 90;
    padding: 9px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    transition: var(--transition);
    /* Surface de verre, ET un flou derrière — sans lui la barre disparaîtrait.
       Elle flotte au-dessus de la landing du vendeur, qui est blanche : un voile
       clair posé sur du blanc ne se voit pas. Le flou est ce qui donne au verre
       quelque chose à éclaircir. */
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
}
.coding_form .edouk_submit {
    margin-top: 0!important;
}
@media (min-width: 576px) {
    .coding_form { left: 7.5%; right: 7.5%; }
}
@media (min-width: 768px) {
    .coding_form { left: 10%; right: 10%; }
}
@media (min-width: 992px) {
    .coding_form { left: 15%; right: 15%; }
}
@media (min-width: 1200px) {
    .coding_form { left: 16.5%; right: 16.5%; }
}
@media (min-width: 1400px) {
    .coding_form { left: 18%; right: 18%; }
}
@media (min-width: 1500px) {
    .coding_form { left: 19.5%; right: 19.5%; }
}
@media (min-width: 1600px) {
    .coding_form { left: 21%; right: 21%; }
}
@media (min-width: 1700px) {
    .coding_form { left: 22.5%; right: 22.5%; }
}
@media (min-width: 1800px) {
    .coding_form { left: 24%; right: 24%; }
}
/* LA BARRE EST UNE PILE. Un seul état s'y montre à la fois, et c'est
   `data-state` sur la scène qui décide lequel. */
.coding_form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Deux formulaires sans contenu : ils n'existent que pour porter leur URL,
   leurs boutons vivent dans la carte de réponse. */
#coding-keep,
#coding-discard {
    display: none;
}

/* --------- Ce qui se montre, et quand ---------
   Les quatre cartes d'état sont écrites toutes les quatre et masquées ; le
   composeur, lui, se retire pendant l'appel et pendant la décision. Rien n'est
   construit en JavaScript : le contrôleur ne fait qu'écrire un mot. */
.coding_state {
    display: none;
}
.coding_stage[data-state="thinking"] .coding_thinking,
.coding_stage[data-state="answer"]   .coding_answer,
.coding_stage[data-state="saved"]    .coding_saved,
.coding_stage[data-state="error"]    .coding_error {
    display: flex;
}
.coding_stage[data-state="thinking"] #coding-edit,
.coding_stage[data-state="answer"]   #coding-edit {
    display: none;
}

/* --------- L'état d'attente : le composeur ---------
   Une carte dans la carte, comme le fichier : la barre est le panneau blanc,
   le composeur son cadre intérieur. */
.coding_compose {
    border: var(--border);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: var(--shadow-flat);
    background-color: var(--bg-card);
}
/* La consigne. Elle dit au vendeur ce qu'on attend de lui MAINTENANT : cliquer
   un élément, puis écrire. `data-picked` bascule d'un texte à l'autre.

   ET DE COULEUR AVEC. Tant que rien n'est désigné, elle est en ambre : c'est
   une attente, quelque chose lui est demandé avant de pouvoir écrire. Une fois
   l'élément désigné elle passe au bleu de la marque, la barre est à lui. */
.coding_hint {
    display: inline-flex;
    padding: 5px 10px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background-color: var(--warning-light);
    /* Le raisonnement derrière `--warning-text` est écrit avec le token, en haut
       du fichier : il ne peut pas être le même dans les deux thèmes. */
    color: var(--warning-text);
    font-size: 11.5px;
    font-weight: 500;
}
.coding_stage[data-picked] .coding_hint {
    background-color: var(--bg-soft);
    color: var(--primary-color);
}
.coding_hint_ask,
.coding_stage[data-picked] .coding_hint_pick {
    display: none;
}
.coding_stage[data-picked] .coding_hint_ask {
    display: inline;
}

.coding_row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}
/* Le champ perd son cadre : c'est le composeur qui en porte un désormais.
   Scopé sous `.coding_form` à DESSEIN — la règle générale du champ vit plus
   haut dans ce fichier, et à spécificité égale c'est elle qui gagnerait. */
.coding_form .coding_prompt {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: 110px;
    padding: 9px 0;
    border: var(--border);
    background-color: transparent;
    resize: none;
}
/* Tant qu'aucun élément n'est désigné il n'y a rien à écrire. Le fond de la
   barre ne change pas : seul le champ se voit fermé. */
.coding_stage:not([data-picked]) .coding_prompt {
    pointer-events: none;
    background-color: var(--background-grey);
}

/* Le bouton d'envoi. IL NE JUGE QUE LA DÉSIGNATION, pas ce qui est écrit :
   s'éteindre à chaque frappe qui vide le champ serait du clignotement, et un
   champ vide se signale très bien tout seul — `required` s'en charge.

   Il garde donc sa couleur et perd son opacité, ce qui se lit comme « pas
   encore », là où le gris se lirait comme « jamais ». */
.coding_send {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background-color: var(--cta);
    color: var(--on-accent);
    cursor: pointer;
    transition: var(--transition);
}
.coding_send i {
    font-size: 17px;
    color: inherit;
}
.coding_send:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-1px);
}
.coding_stage:not([data-picked]) .coding_send {
    opacity: .4;
    pointer-events: none;
}

/* --------- L'état en cours ---------
   Le filet qui balaie dit que ça travaille sans prétendre savoir combien de
   temps : c'est un appel de modèle, on n'a aucun pourcentage honnête à donner. */
.coding_thinking {
    flex-direction: column;
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.coding_track {
    height: 3px;
    background-color: var(--bg-soft);
}
.coding_track span {
    display: block;
    width: 28%;
    height: 100%;
    background-color: var(--primary-color);
    animation: coding_sweep 1.15s ease-in-out infinite;
}
@keyframes coding_sweep {
    from { transform: translateX(-110%); }
    to   { transform: translateX(420%); }
}
.coding_thinking_row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
}
.coding_thinking_row > i {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--primary-color);
}
.coding_thinking_text {
    flex: 1;
    min-width: 0;
}
.coding_thinking_text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--default-color);
}
/* L'écho de la demande, sur une ligne : elle peut être longue. */
.coding_echo {
    margin-top: 1px;
    font-size: 12px;
    color: var(--accent-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coding_stop {
    flex-shrink: 0;
    padding: 9px 13px;
    border: 0;
    border-radius: var(--radius-s);
    background-color: var(--grey-100);
    color: var(--accent-color);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.coding_stop:hover {
    background-color: var(--grey-200);
    color: var(--default-color);
}

/* --------- L'état réponse ---------
   Une bulle, parce que c'est quelqu'un qui répond. Le coin cassé est du côté
   de la pastille, donc en logique : il suit la langue. */
.coding_answer {
    flex-direction: column;
    gap: 10px;
}
.coding_bubble {
    padding: 11px 13px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-card-tint);
}
.coding_bubble p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--default-color);
}
/* Les deux décisions, côte à côte. Valider est plus large : c'est celle qu'il
   prend neuf fois sur dix. */
.coding_decide {
    display: flex;
    gap: 8px;
}
.coding_decide button {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--radius-s);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.coding_decide button i {
    font-size: 15px;
    color: inherit;
}
.coding_discard {
    flex: 1;
    border: 1px solid color-mix(in srgb, var(--error) 30%, var(--bg-card));
    background-color: var(--bg-card);
    color: var(--error);
    font-weight: 500;
}
.coding_discard:hover {
    border-color: var(--error);
    background-color: var(--error-light);
}
/* Garder est un `.edouk_submit` : sa couleur, son état de chargement et son
   vert de réussite sont déclarés plus haut, et on ne les redit pas ici — sinon
   le pourcentage s'afficherait sur un fond qui ne change plus. Ne reste que la
   place qu'il prend, scopée pour passer devant ses `width` et `margin`. */
.coding_form .coding_keep {
    flex: 1.35;
    width: auto;
    margin-top: 0;
    border-radius: var(--radius-s);
}
.coding_form .coding_keep:hover:not(:disabled) {
    background-color: var(--primary-color-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}
/* --------- Les cinq étoiles ---------
   À la place de la ligne qui répétait ce que les deux boutons disaient déjà.
   Le vendeur juge la retouche, et la note part AVEC sa décision : les radios
   sont rattachées au formulaire par `form=`, comme les boutons au-dessus.

   TOUT EST EN CSS, y compris le survol et le choix. Les étoiles sont écrites de
   la cinquième à la première et remises à l'endroit par `row-reverse` : c'est ce
   qui permet à `~` d'atteindre celles qui PRÉCÈDENT visuellement l'étoile visée,
   ce que les sélecteurs de frère ne savent pas faire dans l'autre sens. */
.coding_stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 6px;
}
.coding_stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.coding_stars label {
    padding: 2px;
    color: var(--grey-300);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}
.coding_stars label i {
    color: inherit;
}
.coding_stars label:hover,
.coding_stars label:hover ~ label,
.coding_stars input:checked ~ label {
    color: var(--warning);
}

/* --------- L'état gardé ---------
   Le filet épais est du côté du début de ligne, donc en logique. */
.coding_saved {
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--success);
    border-inline-start-width: 4px;
    border-radius: var(--radius-s);
    background-color: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}
.coding_saved i {
    flex-shrink: 0;
    font-size: 17px;
    color: var(--success);
}
.coding_saved span {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--success-text);
}

/* --------- L'état échec ---------
   Il porte la question de l'agent quand il en a posé une, le message du
   serveur sinon. Une seule phrase, la sienne : rien n'est ajouté autour. */
.coding_error {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--error) 30%, var(--bg-card));
    border-radius: var(--radius);
    background-color: var(--error-light);
}
.coding_error > i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 17px;
    color: var(--error-dark);
}
.coding_error p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--error-dark);
}
.coding_retry {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--error) 30%, var(--bg-card));
    border-radius: var(--radius-s);
    background-color: var(--bg-card);
    color: var(--error-dark);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.coding_retry:hover {
    background-color: var(--grey-50);
}

/* Le fichier de dessin anime le filet, la pastille et l'apparition des cartes.
   Un vendeur qui a demandé moins de mouvement à son système en a moins. */
@media (prefers-reduced-motion: reduce) {
    .coding_track span,
    .coding_thinking_row > i,
    .coding_screen_live {
        animation: none;
    }
}

/* ========================================
   FICHE PRODUIT — show_v2

   UNE carte = UN formulaire = UNE route = UN bouton enregistrer. Tout est scopé
   sous `.edouk_cfg`, la turbo-frame de la page.
   ======================================== */

/* --- Scope racine : la frame porte la mise en page --- */
.edouk_cfg {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-bottom: 34px;
}

/* --- En-tête de section --- */
.edouk_cfg .cfg_section { display: flex; flex-direction: column; gap: 14px; }
.edouk_cfg .cfg_section_head { display: flex; flex-direction: column; gap: 4px; padding: 0 3px; }
.edouk_cfg .cfg_section_head h2 {
    font-family: "Ubuntu", system-ui, sans-serif;
    font-size: 21px; font-weight: 700; letter-spacing: -0.5px;
    color: var(--default-color); margin: 0;
}
.edouk_cfg .cfg_section_head p { font-size: var(--font-s); color: var(--accent-color); margin: 0; }

/* Bandeau de mise à jour du modèle : carte blanche au même langage que
   les cartes de réglage ci-dessous. L'espacement vient du gap de la
   frame, aucune marge propre. */
.edouk_cfg .cfg_announce {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.edouk_cfg .cfg_announce_ico {
    width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-s);
    background: var(--bg-soft);
    color: var(--primary-color);
    font-size: 21px;
}
.edouk_cfg .cfg_announce_ico i {
    color: inherit;
}
.edouk_cfg .cfg_announce_text {
    flex: 1; min-width: 240px;
    display: flex; flex-direction: column; gap: 2px;
}
.edouk_cfg .cfg_announce_title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-family: "Ubuntu", system-ui, sans-serif;
    font-size: 16px; font-weight: 500;
    color: var(--default-color);
}
.edouk_cfg .cfg_announce_badge {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px;
    border-radius: var(--radius-sm);
    background: rgba(49, 107, 255, 0.08);
    color: var(--primary-color-dark);
    font-size: 11.75px; font-weight: 600; letter-spacing: 0.02em;
    white-space: nowrap;
}
.edouk_cfg .cfg_announce_sub {
    font-size: var(--font-s); color: var(--accent-color); text-wrap: pretty;
}
.edouk_cfg .cfg_announce_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 37px; padding: 0 16px;
    border: none; border-radius: var(--radius-s);
    background: var(--cta);
    color: var(--on-accent); font-family: inherit;
    font-size: var(--font-s); font-weight: 500; white-space: nowrap;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: var(--transition);
}
.edouk_cfg .cfg_announce_btn i {
    color: inherit;
    font-size: 16px;
}
.edouk_cfg .cfg_announce_btn:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .edouk_cfg .cfg_announce { align-items: flex-start; gap: 12px; padding: 14px; }
    .edouk_cfg .cfg_announce_ico { width: 39px; height: 39px; font-size: 19px; }
    .edouk_cfg .cfg_announce_text { min-width: 140px; }
    .edouk_cfg .cfg_announce_title { font-size: var(--font-l); }
    .edouk_cfg .cfg_announce_sub { font-size: var(--font-xs); }
    .edouk_cfg .cfg_announce_btn { width: 100%; height: 46px; }
}

/* --- Liste d'accordéons : une carte = un <li> repliable --- */
.edouk_cfg .cfg_cards {
    display: flex; flex-direction: column; gap: 14px;
    list-style: none; margin: 0; padding: 0;
}

/* --- Carte de réglage ---
   Une surface de verre : elle éclaircit le fond au lieu de poser sa couleur
   ( voir `--glass` en haut du fichier ). */
.edouk_cfg .cfg_card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
    transition: background 200ms ease-out, border-color 200ms ease-out;
}
/* Le survol éclaircit d'un cran et allume la bordure. Il ne concerne que les
   cartes REPLIÉES : les règles `.uk-open` ci-dessous portent deux classes de plus,
   donc une carte ouverte garde la teinte de sa famille même sous la souris.

   `hover: hover` : sur mobile le survol resterait collé après le tap. */
@media (hover: hover) {
    .edouk_cfg .cfg_card:hover {
        background: var(--glass-hover);
        border-color: var(--glass-border-hover);
    }
}
.edouk_cfg .cfg_head { display: flex; align-items: flex-start; gap: 12px; }

/* --- En-tête cliquable : icône + titre + chevron. Les interrupteurs
   descendent dans le corps de l'accordéon : dans l'en-tête, les basculer
   replierait la carte au passage. --- */
.edouk_cfg .uk-accordion-title {
    display: flex; align-items: flex-start; gap: 12px;
    flex: 1; min-width: 0; cursor: pointer;
}
.edouk_cfg .uk-accordion-title::before {
    content: ""; order: 1; align-self: flex-start;
    width: 5px; height: 5px; flex-shrink: 0; margin-left: auto; margin-top: 6px;
    border-right: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    transform: rotate(45deg);
    transition: transform 200ms ease-out;
}
.edouk_cfg .uk-open .uk-accordion-title::before { transform: rotate(-135deg); }
[dir="rtl"] .edouk_cfg .uk-accordion-title::before { margin-left: 0; margin-right: auto; }

/* Corps replié : même rythme vertical qu'avant (gap 14) + filet de séparation */
.edouk_cfg .uk-accordion-content {
    display: flex; flex-direction: column; gap: 14px;
    border-top: 1px solid var(--grey-100); padding-top: 14px;
}
.edouk_cfg .cfg_icon {
    width: 39px; height: 39px; min-width: 39px;
    background: var(--bg-soft); border-radius: 9px;
    color: var(--primary-color); display: grid; place-items: center;
    font-size: 18px;
}
.edouk_cfg .cfg_icon i {
    color: inherit;
}
.edouk_cfg .cfg_head_text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.edouk_cfg .cfg_title {
    font-family: "Ubuntu", system-ui, sans-serif; font-weight: 500;
    font-size: var(--font-m); color: var(--default-color);
}
.edouk_cfg .cfg_tip { font-size: var(--font-xs); color: var(--accent-color); margin: 0; line-height: 1.45; }

/* --- Couleurs de carte : icône teintée + fond de carte à l'ouverture.
   Mêmes familles que les accordions plus haut (navy, violet, jaune),
   étendues au vert, à l'orange et au lavande pour varier sur 13 cartes.
   Le lavande est repris un cran plus foncé que .param_lavender : sur un
   fond lavande, #a78bfa ne se lit pas. --- */
.edouk_cfg .cfg_card.card_blue .cfg_icon { background: var(--bg-soft); color: var(--primary-color); }
.edouk_cfg .cfg_card.card_blue.uk-open { background: var(--blue-tint-150); border-color: var(--blue-tint-550); }

.edouk_cfg .cfg_card.card_navy .cfg_icon { background: var(--info-light); color: var(--info); }
.edouk_cfg .cfg_card.card_navy.uk-open { background: var(--info-bg); border-color: var(--info-light); }

.edouk_cfg .cfg_card.card_purple .cfg_icon { background: var(--purple-light); color: var(--purple); }
.edouk_cfg .cfg_card.card_purple.uk-open { background: var(--purple-bg); border-color: var(--purple-light); }

.edouk_cfg .cfg_card.card_lavender .cfg_icon { background: var(--violet-light); color: var(--violet); }
.edouk_cfg .cfg_card.card_lavender.uk-open { background: var(--violet-bg); border-color: var(--violet-border); }

.edouk_cfg .cfg_card.card_green .cfg_icon { background: var(--success-light); color: var(--success); }
.edouk_cfg .cfg_card.card_green.uk-open { background: var(--green-card-bg); border-color: var(--success-light); }

.edouk_cfg .cfg_card.card_yellow .cfg_icon { background: var(--warning-light); color: var(--warning); }
.edouk_cfg .cfg_card.card_yellow.uk-open { background: var(--warning-bg); border-color: var(--warning-light); }

.edouk_cfg .cfg_card.card_orange .cfg_icon { background: var(--orange-light); color: var(--warning-dark); }
.edouk_cfg .cfg_card.card_orange.uk-open { background: var(--orange-bg); border-color: var(--orange-border); }

/* --- Un formulaire par carte : même rythme vertical que le corps
   d'accordéon, et le bouton enregistrer en dernier --- */
.edouk_cfg .cfg_form { display: flex; flex-direction: column; gap: 14px; }
/* .edouk_submit porte un margin-top: 15px plus haut qui ferait doublon avec le gap */
.edouk_cfg .cfg_form .edouk_submit { margin-top: 0; }

/* --- Bloc révélé par un toggle (masqué par le controller quand off) --- */
.edouk_cfg .cfg_reveal {
    display: flex; flex-direction: column; gap: 12px;
    border-top: 1px solid var(--grey-100); padding-top: 14px;
}

/* --- Label de champ --- */
.edouk_cfg .cfg_label {
    font-size: var(--font-xs); color: var(--accent-color);
    font-family: "Ubuntu", system-ui, sans-serif; margin: 0;
}
.edouk_cfg .cfg_group { display: flex; flex-direction: column; gap: 6px; }

/* --- Inputs / select / textarea (scopé, hors checkbox & color) --- */
.edouk_cfg input:not([type="checkbox"]):not([type="color"]),
.edouk_cfg select,
.edouk_cfg textarea {
    width: 100%; height: 44px; background: var(--bg-card);
    border-radius: var(--radius-s); padding: 3px 14px;
    font-size: var(--font-s); color: var(--default-color);
    border: 1px solid var(--border-color); box-shadow: var(--shadow-flat);
    outline: 0; font-family: inherit; transition: var(--transition-fast);
}
.edouk_cfg textarea { height: auto; min-height: 104px; padding: 11px 14px; line-height: 1.5; resize: vertical; }
.edouk_cfg input:not([type="checkbox"]):not([type="color"]):hover,
.edouk_cfg select:hover,
.edouk_cfg textarea:hover { border-color: var(--primary-color); }
.edouk_cfg input:not([type="checkbox"]):not([type="color"]):focus,
.edouk_cfg select:focus,
.edouk_cfg textarea:focus { border-color: var(--primary-color); box-shadow: var(--shadow-focus); }
.edouk_cfg ::placeholder { color: var(--grey-400); }

/* --- Select : flèche custom --- */
.edouk_cfg select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.edouk_cfg .cfg_select { position: relative; width: 100%; }
.edouk_cfg .cfg_select > i {
    position: absolute; top: 50%; right: 13px; transform: translateY(-50%);
    color: var(--accent-color); pointer-events: none; font-size: 15px;
}

/* --- Input avec icône à gauche --- */
.edouk_cfg .cfg_field { position: relative; width: 100%; }
.edouk_cfg .cfg_field > i.cfg_lead {
    position: absolute; top: 50%; left: 13px; transform: translateY(-50%);
    color: var(--accent-color); font-size: 16px; pointer-events: none;
}
.edouk_cfg .cfg_field.has-lead input { padding-left: 40px; }

/* --- Lien de la page : champ + suffixe .edouk.com collés ---
   direction ltr forcée : le slug est toujours alphanumérique latin,
   le suffixe reste à droite même en arabe. */
.edouk_cfg .cfg_slug_row { display: flex; align-items: center; width: 100%; direction: ltr; }
.edouk_cfg .cfg_slug_row input[type="text"] {
    flex: 1; min-width: 0; text-align: left;
    border-radius: var(--radius-s) 0 0 var(--radius-s);
}
.edouk_cfg .cfg_slug_suffix {
    display: flex; align-items: center; height: 44px; padding: 0 13px;
    background: var(--bg-soft); border: 1px solid var(--border-color); border-left: 0;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    font-size: var(--font-xs); color: var(--accent-color); white-space: nowrap;
}

/* --- Input couleur --- */
.edouk_cfg .cfg_color_row { display: flex; gap: 10px; }
.edouk_cfg .cfg_color_row .cfg_group { flex: 1; }
.edouk_cfg input[type="color"] {
    width: 100%; height: 44px; background: var(--bg-card);
    border-radius: var(--radius-s); border: 1px solid var(--border-color);
    box-shadow: var(--shadow-flat); padding: 5px; cursor: pointer;
    transition: var(--transition-fast);
}
.edouk_cfg input[type="color"]:hover { border-color: var(--primary-color); }

/* --- Toggle : restyle de .ios-switch (46x26, vert) --- */
.edouk_cfg .ios-switch {
    -webkit-appearance: none; appearance: none;
    width: 46px !important; min-width: 46px !important; height: 26px !important;
    border-radius: 13px; background: var(--grey-200);
    position: relative; cursor: pointer; margin: 0; padding: 0; border: 0;
    flex: 0 0 auto;
    transition: background 200ms ease-out;
}
.edouk_cfg .ios-switch::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--on-accent);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform 200ms ease-out;
}
.edouk_cfg .ios-switch:checked { background: var(--success); }
.edouk_cfg .ios-switch:checked::before { transform: translateX(20px); }


/* --- Prix : rangées toggle internes (promo / offres) --- */
.edouk_cfg .cfg_toggles { display: flex; flex-direction: column; }
.edouk_cfg .cfg_toggle_row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; border-top: 1px solid var(--grey-100);
}
.edouk_cfg .cfg_toggle_row > span { font-size: var(--font-s); color: var(--default-color); font-weight: 500; }
.edouk_cfg .cfg_offer_row { display: flex; align-items: center; gap: 10px; }
.edouk_cfg .cfg_offer_row .cfg_suffix_field { flex: 1; }

/* --- Suffixe d'unité (DA, +DA, %) --- */
.edouk_cfg .cfg_suffix_field { position: relative; width: 100%; }
.edouk_cfg .cfg_suffix_field input { padding-right: 48px; }
.edouk_cfg .cfg_suffix {
    position: absolute; top: 50%; right: 13px; transform: translateY(-50%);
    font-size: var(--font-xs); font-weight: 600; color: var(--accent-color); pointer-events: none;
}
/* Arabe (RTL) : suffixe (دج / %) à gauche, pas à droite */
[dir="rtl"] .edouk_cfg .cfg_suffix { left: 13px; right: auto; }
[dir="rtl"] .edouk_cfg .cfg_suffix_field input { padding-left: 48px; padding-right: 13px; }
/* Espacement entre les 3 offres (2/3/4 articles) */
.edouk_cfg .cfg_group[data-product-form-target="offerBlock"] { margin-top: 12px; }

/* --- Photos produit : défilement horizontal + SimpleBar via edouk_images_grid
   (plus haut) ; seule la corbeille edouk_image_delete_btn n'y est pas --- */
.edouk_cfg .edouk_image_delete_btn {
    position: absolute; top: 5px; right: 5px; width: 25px; height: 25px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgb(255 255 255 / 68%);
    color: var(--error); font-size: 15px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: background 0.15s, transform 0.15s; z-index: 2; margin-top: 0 !important;
}
.edouk_cfg .edouk_image_delete_btn i { font-size: inherit; color: inherit; }
.edouk_cfg .edouk_image_delete_btn:hover { background: var(--error-solid); color: var(--on-accent); transform: scale(1.05); }
.edouk_cfg .edouk_image_delete_btn:hover i { color: var(--on-accent); }
/* Plus de photos visibles en tablette/desktop (scopé à la carte photos) */
@media (min-width: 768px) {
    .edouk_cfg .cfg_card .edouk_image_item { flex: 0 0 calc(25% - 7.5px); min-width: calc(25% - 7.5px); }
}
@media (min-width: 992px) {
    .edouk_cfg .cfg_card .edouk_image_item { flex: 0 0 calc(20% - 8px); min-width: calc(20% - 8px); }
}

/* --- Rangée variante (couleur / taille / perso) --- */
.edouk_cfg .cfg_variant_row { display: flex; align-items: center; gap: 10px; }
.edouk_cfg .cfg_variant_row .cfg_grow { flex: 1; }
.edouk_cfg .cfg_variant_row input[type="color"] { width: 44px; min-width: 44px; flex: 0 0 44px; padding: 3px; }
.edouk_cfg .edouk_variant_image_btn {
    flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
    border: 1.5px dashed var(--primary-color); border-radius: var(--radius-s);
    background: var(--bg-soft); cursor: pointer; overflow: hidden;
    display: grid; place-items: center;
}
.edouk_cfg .edouk_variant_image_btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Champ masqué mais soumis (10ᵉ slot photo, urls de variantes) */
.edouk_cfg .cfg_hidden { display: none !important; }

/* --- Retour à la liste : plus de barre fixe, chaque carte enregistre
   elle-même, il ne reste qu'une sortie --- */
.edouk_cfg .cfg_back {
    align-self: center; display: flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 20px; border-radius: 10px;
    border: 1px solid var(--grey-200); background: var(--bg-card);
    color: var(--accent-color);
    font-family: "Ubuntu", system-ui, sans-serif; font-weight: 500; font-size: var(--font-s);
    transition: var(--transition);
}
.edouk_cfg .cfg_back:hover {
    color: var(--default-color); border-color: var(--grey-300); text-decoration: none;
}

/* --- Modal picker de variant : dimensions + contour de sélection (repris de v1) --- */
#modal-variant-image .edouk_image_item { flex: 0 0 110px; min-width: 110px; }
#modal-variant-image .edouk_variant_picker_item.is-selected .edouk_image_preview { outline: 3px solid var(--primary-color); border-radius: 7px; }
#modal-variant-image .edouk_variant_picker_empty .edouk_image_preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 110px; background: var(--bg-card); border: var(--border); border-radius: 7px;
}

/* Tooltips Jodit (montés hors iframe) : re-force le look d'origine */
.jodit-ui-tooltip { background-color: rgba(0, 0, 0, 0.75); }
.jodit-ui-tooltip, .jodit-ui-tooltip__content { color: var(--on-accent); font-size: var(--jd-font-size-small, 12px); }

/* ========================================
   PAGE 404

   Elle n'a pas de header — la garde vit dans `header.html.twig`, par route. Elle
   porte donc son propre logo et sa seule sortie, centrés sur toute la hauteur.
   ======================================== */
.edouk_notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    text-align: center;
    padding: 2rem;
}
/* Même traitement que le logo du header : le mot « Edouk » est noir dans le
   fichier, il disparaîtrait sur le fond encre. */
.edouk_notfound img {
    width: 120px;
    margin-bottom: 2rem;
    filter: invert(1) hue-rotate(180deg) brightness(0.9);
}
html[data-theme="light"] .edouk_notfound img {
    filter: none;
}
.edouk_notfound h1 {
    font-size: 5rem;
    font-weight: 700;
    margin: 0;
    color: var(--default-color);
}
.edouk_notfound p {
    font-size: 1.25rem;
    color: var(--accent-color);
    margin: 1rem 0 2rem;
}
/* La seule sortie de la page : c'est le geste principal, donc le bleu de marque. */
.edouk_notfound a {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--cta);
    color: var(--on-accent);
    border-radius: var(--radius-s);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}
@media (hover: hover) {
    .edouk_notfound a:hover {
        background: var(--cta-hover);
    }
}