/* Typo du thème Moto Axxe (voir la section "Thème Moto Axxe" en fin de fichier).
   Les binaires ne sont téléchargés que si des éléments les utilisent : aucun coût
   réel sur les pages Maxxess / analytics / choix-enseigne. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&family=DM+Mono:wght@300;400;500&display=swap');

/* ─── Brand tokens (selon enseigne) ──────────────────────────────────── */
:root {
    --brand-primary:       #ff4500;
    --brand-primary-rgb:   255, 69, 0;
    --brand-primary-hover: #df3c00;
    --brand-tint:          #fff8f5;
    --ui-font:             'Roboto Flex', Arial, sans-serif;
    --signature-font:      'Roboto Flex', Arial, sans-serif;
    --dl-btn-bg:           #28a745;
    --dl-btn-hover:        #218838;
    --dl-btn-rgb:          40, 167, 69;
}

.enseigne-maxxess {
    --brand-primary:       #FFE600;
    --brand-primary-rgb:   255, 230, 0;
    --brand-primary-hover: #e0cc00;
    --brand-tint:          #fffdf0;
    --ui-font:             'Roboto', Arial, sans-serif;
    --signature-font:      'Fira Sans Condensed', Arial, sans-serif;
    --card-btn-text:       #1a1a1a;
    --dl-btn-bg:           var(--brand-primary);
    --dl-btn-hover:        var(--brand-primary-hover);
    --dl-btn-rgb:          var(--brand-primary-rgb);
}

/* Maxxess — nom de ville redescendu en bas à gauche (visuel horaires) */
/* spécificité html.enseigne-maxxess > :root pour gagner sur les tokens canvas */
html.enseigne-maxxess {
    --hor-city-x: 195;
    --hor-city-y: 1295;
    --hor-city-size: 32;
    --story-hor-city-x: 210;
    --story-hor-city-y: 1720;
    --story-hor-city-size: 38;
    --a4-hor-city-x: 220;
    --a4-hor-city-y: 1690;
    --a4-hor-city-size: 40;

    --hor-canvas-font:  'Fira Sans Condensed', Arial, sans-serif;
    --recr-canvas-font:  'Fira Sans Condensed', Arial, sans-serif;
    --recr-text-shadow:  0;
    --promo-text-shadow: 0;
    --of-canvas-font:   var(--recr-canvas-font);
    --promo-canvas-font: var(--recr-canvas-font);
    --story-promo-offset-y: 160;

    /* Maxxess — Post : bloc de l'offre (%, accroches) un peu réduit */
    --promo-percent-size:    385;
    --promo-percent-line-h:  540;
    --promo-line1-size:      110;
    --promo-sur-size:        42;
    --promo-l1-size:         104;
    --promo-l2-size:         104;
    --promo-offset-y:        130;

    /* Maxxess — A4 : bloc de l'offre (%, accroches) un peu réduit */
    --a4-promo-percent-size:   540;
    --a4-promo-percent-line-h: 720;
    --a4-promo-line1-size:     162;
    --a4-promo-sur-size:       45;
    --a4-promo-l1-size:        99;
    --a4-promo-l2-size:        99;
    --a4-promo-offset-y:       220;

    --city-lines: 0;

    /* Maxxess — "Homme ou Femme" entre L1 et L2 */
    --recr-gender:           1;
    --recr-gender-y:         985;
    --recr-gender-size:      62;
    --story-recr-gender-y:   1338;
    --story-recr-gender-size: 62;
    --a4-recr-gender-y:      1188;
    --a4-recr-gender-size:   74;
    --job-l2-y:              914;
    --story-job-l2-y:        1268;
    --a4-job-l2-y:           1110;

    /* Maxxess — ville recrutement : bas gauche (même position que horaires) */
    --city-x:          195;
    --city-y:          1295;
    --city-size:       32;
    --story-city-x:    210;
    --story-city-y:    1720;
    --story-city-size: 38;
    --a4-city-x:       240;
    --a4-city-y:       1685;
    --a4-city-size:    40;

    /* Maxxess — bloc coordonnées post : remonté */
    --info-zone-top:          990;
    --info-zone-bottom:       1220;
    /* Maxxess — bloc coordonnées story : remonté */
    --story-info-zone-top:    1360;
    --story-info-zone-bottom: 1600;

    /* Maxxess — contrat : fond jaune, texte noir */
    --contract-color:            var(--brand-primary);
    --contract-text-color:       #000000;
    --story-contract-color:      var(--brand-primary);
    --story-contract-text-color: #000000;
    --a4-contract-color:         var(--brand-primary);
    --a4-contract-text-color:    #000000;
    --tv-contract-color:         var(--brand-primary);
    --tv-contract-text-color:    #000000;

    /* Maxxess — tableau horaires : fond clair, typo noire, table remontée */
    --hor-frame-offset-y:        180;
    --hor-title-color:           #000000;
    --hor-sched-color:           #000000;
    --hor-sched-sep-color:       rgba(0,0,0,.12);
    --hor-sched-closed-color:    #4A0404;

    --story-hor-frame-offset-y:        200;
    --story-hor-title-color:           #000000;
    --story-hor-sched-color:           #000000;
    --story-hor-sched-sep-color:       rgba(0,0,0,.12);
    --story-hor-sched-closed-color:    #4A0404;

    --a4-hor-frame-offset-y:        210;
    --a4-hor-title-color:           #000000;
    --a4-hor-sched-color:           #000000;
    --a4-hor-sched-sep-color:       rgba(0,0,0,.12);
    --a4-hor-sched-closed-color:    #4A0404;
    --a4-hor-sched-row-h:           106;
    --a4-hor-sched-day-size:        57;
    --a4-hor-sched-hours-size:      57;

    --tv-hor-city-color:            #ffffff;
    --tv-hor-city-x:                220;
    --tv-hor-city-y:                1022;
    --tv-hor-city-size:             34;
    --tv-hor-title-color:           #000000;
    --tv-hor-sched-color:           #000000;
    --tv-hor-sched-sep-color:       rgba(0,0,0,.12);
    --tv-hor-sched-closed-color:    #4A0404;

    /* Maxxess — Ouverture/Fermeture : date fond jaune texte noir (ouvert), rouge/blanc (fermé) */
    --of-statut-ferme-color:       #ffffff;
    --of-date-bg:                  var(--brand-primary);
    --of-date-color:                #000000;
    --of-date-bg-ferme:             #ff0000;
    --of-date-color-ferme:          #ffffff;
    --of-date-text-nudge:           0.05;
    /* Post — même composition que l'A4 (ratios y/H identiques) */
    --of-context-y:                 747;
    --of-statut-y:                  877;
    --of-day-y:                     980;
    --of-date-y:                    1047;
    --of-sign-y:                    1170;

    --story-of-statut-ferme-color: #ffffff;
    --story-of-date-bg:             var(--brand-primary);
    --story-of-date-color:          #000000;
    --story-of-date-bg-ferme:       #ff0000;
    --story-of-date-color-ferme:    #ffffff;
    /* Story — même composition que l'A4 (ratios y/H identiques) */
    --story-of-context-y:           1012;
    --story-of-statut-y:            1168;
    --story-of-day-y:               1280;
    --story-of-date-y:              1360;
    --story-of-sign-y:              1550;

    --a4-of-statut-ferme-color:    #ffffff;
    --a4-of-date-bg:                var(--brand-primary);
    --a4-of-date-color:             #000000;
    --a4-of-date-bg-ferme:          #ff0000;
    --a4-of-date-color-ferme:       #ffffff;
    --a4-of-context-y:               970;
    --a4-of-statut-y:                1140;
    --a4-of-day-y:                   1273;
    --a4-of-date-y:                  1360;
    --a4-of-sign-y:                  1520;

    --tv-of-statut-ferme-color:    #ffffff;
    --tv-of-date-bg:                var(--brand-primary);
    --tv-of-date-color:             #000000;
    --tv-of-date-bg-ferme:          #ff0000;
    --tv-of-date-color-ferme:       #ffffff;

    /* Maxxess — ville promotion : même position que horaires (bas gauche), align left */
    --promo-city-size:       var(--hor-city-size);
    --promo-city-x:          var(--hor-city-x);
    --promo-city-y:          var(--hor-city-y);
    --story-promo-city-size: var(--story-hor-city-size);
    --story-promo-city-x:    var(--story-hor-city-x);
    --story-promo-city-y:    var(--story-hor-city-y);
    --a4-promo-city-size:    var(--a4-hor-city-size);
    --a4-promo-city-x:       250;
    --a4-promo-city-y:       var(--a4-hor-city-y);
    --tv-promo-city-size:    var(--tv-hor-city-size);
    --tv-promo-city-x:       var(--tv-hor-city-x);
    --tv-promo-city-y:       var(--tv-hor-city-y);

    /* Maxxess — ville ouverture/fermeture : même position que recrutement */
    --of-city-x:          var(--city-x);
    --of-city-y:          var(--city-y);
    --of-city-size:       var(--city-size);
    --story-of-city-x:    var(--story-city-x);
    --story-of-city-y:    var(--story-city-y);
    --story-of-city-size: var(--story-city-size);
    --a4-of-city-x:       var(--a4-city-x);
    --a4-of-city-y:       var(--a4-city-y);
    --a4-of-city-size:    var(--a4-city-size);

    /* Maxxess — ville ouverture/fermeture TV : même position que horaires TV */
    --tv-of-city-x:       var(--tv-hor-city-x);
    --tv-of-city-y:       var(--tv-hor-city-y);
    --tv-of-city-size:    var(--tv-hor-city-size);
    --tv-of-city-color:   var(--tv-hor-city-color);

    /* Maxxess — ville recrutement TV : même position que horaires TV */
    --tv-city-x:          var(--tv-hor-city-x);
    --tv-city-y:          var(--tv-hor-city-y);
    --tv-city-size:       var(--tv-hor-city-size);
    --tv-city-color:      var(--tv-hor-city-color);
}

/* ─── Canvas design tokens ───────────────────────────────────────────── */
:root {
    --canvas-font:        'Roboto', Arial, sans-serif;
    --canvas-font-sign:   'Caveat', cursive;
    --hor-canvas-font:    'Roboto Flex', Arial, sans-serif;
    --of-canvas-font:     'Roboto Flex', Arial, sans-serif;
    --recr-canvas-font:   'Roboto Flex', Arial, sans-serif;
    --recr-text-shadow:   1;
    --city-lines:         1;
    --recr-gender:        1;
    --recr-gender-y:          985;
    --recr-gender-size:       62;
    --story-recr-gender-y:    1323;
    --story-recr-gender-size: 62;
    --a4-recr-gender-y:       1188;
    --a4-recr-gender-size:    74;
    --canvas-color-or:    var(--brand-primary);
    --canvas-color-white: #ffffff;
    --canvas-color-muted: rgba(255,255,255,.58);

    /* Job title */
    --job-l1-size:        116;
    --job-l1-color:       #ffffff;
    --job-l1-style:       800;
    --job-l2-size:        38;
    --job-l2-color:       #ffffff;
    --job-l2-style:       800;
    --job-l1-y:           850;
    --job-l2-y:           914;

    /* "Nous recrutons !" */
    --recrutons-size:  60;
    --recrutons-y:    660;

    /* Contract badge */
    --contract-size:      38;
    --contract-weight:     400;
    --contract-color:      var(--brand-primary);
    --contract-text-color: #ffffff;
    --contract-y:         680;

    /* Store info block */
    --info-size:          34;
    --info-color:         #ffffff;
    --info-x:             72;
    --info-line-h:        42;
    --info-zone-top:      1035;
    --info-zone-bottom:   1265;

    /* City */
    --city-size:          28;
    --city-color:         #ffffff;
    --city-x:             540;
    --city-y:             170;

    /* ── Promotion — Ville sous logo (Moto Axxe : bas droite, align right) ── */
    --promo-city-size:       22;
    --promo-city-color:      #ffffff;
    --promo-city-x:          870;
    --promo-city-y:          1320;
    --story-promo-city-size: 26;
    --story-promo-city-x:    870;
    --story-promo-city-y:    1888;
    --a4-promo-city-size:    26;
    --a4-promo-city-x:       1015;
    --a4-promo-city-y:       1720;
    --tv-promo-city-size:    28;
    --tv-promo-city-x:       1685;
    --tv-promo-city-y:       1055;

    /* ── Recrutement canvas tokens — TV (1920×1080) ── */
    --tv-job-l1-size:         160;
    --tv-job-l1-color:        #ffffff;
    --tv-job-l1-style:        800;
    --tv-job-l2-size:         52;
    --tv-job-l2-color:        #ffffff;
    --tv-job-l2-style:        800;
    --tv-job-l1-y:            640;
    --tv-job-l2-y:            705;
    --tv-contract-size:       46;
    --tv-contract-weight:     400;
    --tv-contract-color:      var(--brand-primary);
    --tv-contract-text-color: #ffffff;
    --tv-contract-y:          417;
    --tv-info-size:           40;
    --tv-info-color:          #ffffff;
    --tv-info-x:              128;
    --tv-info-line-h:         50;
    --tv-info-zone-top:       740;
    --tv-info-zone-bottom:    1010;
    --tv-city-size:           0;
    --tv-city-color:          #ffffff;
    --tv-city-x:              960;
    --tv-city-y:              -999;
    --tv-recr-gender-y:       800;
    --tv-recr-gender-size:    100;
    --tv-recrutons-size:      130;
    --tv-recrutons-y:         380;

    /* ── Horaires canvas tokens — post (1080×1350) ── */
    --hor-city-size:          28;
    --hor-city-color:         #ffffff;
    --hor-city-x:             540;
    --hor-city-y:             145;
    --hor-frame-x:            110;
    --hor-frame-y:            185;
    --hor-frame-offset-y:     260;
    --hor-frame-border:       3;
    --hor-frame-pad:          38;
    --hor-title-size:         82;
    --hor-title-color:        #ffffff;
    --hor-title-style:        900;
    --hor-title-off-y:        76;
    --hor-sep-h:              4;
    --hor-sep-off-y:          106;
    --hor-sched-off-y:        134;
    --hor-sched-row-h:        80;
    --hor-sched-day-size:     44;
    --hor-sched-hours-size:   44;
    --hor-sched-color:        #ffffff;
    --hor-sched-closed-color: var(--brand-primary);
    --hor-sched-sep-color:    rgba(255,255,255,.12);
    --hor-split-x:            370;

    /* ── Horaires canvas tokens — story (1080×1920) ── */
    --story-hor-city-size:          30;
    --story-hor-city-color:         #ffffff;
    --story-hor-city-x:             540;
    --story-hor-city-y:             280;
    --story-hor-frame-x:            120;
    --story-hor-frame-y:            260;
    --story-hor-frame-offset-y:     200;
    --story-hor-frame-border:       3;
    --story-hor-frame-pad:          44;
    --story-hor-title-size:         76;
    --story-hor-title-color:        #ffffff;
    --story-hor-title-style:        900;
    --story-hor-title-off-y:        76;
    --story-hor-sep-h:              4;
    --story-hor-sep-off-y:          106;
    --story-hor-sched-off-y:        134;
    --story-hor-sched-row-h:        86;
    --story-hor-sched-day-size:     44;
    --story-hor-sched-hours-size:   44;
    --story-hor-sched-color:        #ffffff;
    --story-hor-sched-closed-color: var(--brand-primary);
    --story-hor-sched-sep-color:    rgba(255,255,255,.12);
    --story-hor-split-x:            380;

    /* ── Horaires canvas tokens — A4 (1240×1754) ── */
    --a4-hor-city-size:          36;
    --a4-hor-city-color:         #ffffff;
    --a4-hor-city-x:             620;
    --a4-hor-city-y:             280;
    --a4-hor-frame-x:            160;
    --a4-hor-frame-y:            280;
    --a4-hor-frame-offset-y:     320;
    --a4-hor-frame-border:       3;
    --a4-hor-frame-pad:          45;
    --a4-hor-title-size:         80;
    --a4-hor-title-color:        #ffffff;
    --a4-hor-title-style:        900;
    --a4-hor-title-off-y:        88;
    --a4-hor-sep-h:              4;
    --a4-hor-sep-off-y:          122;
    --a4-hor-sched-off-y:        156;
    --a4-hor-sched-row-h:        96;
    --a4-hor-sched-day-size:     52;
    --a4-hor-sched-hours-size:   52;
    --a4-hor-sched-color:        #ffffff;
    --a4-hor-sched-closed-color: var(--brand-primary);
    --a4-hor-sched-sep-color:    rgba(255,255,255,.12);
    --a4-hor-split-x:            450;

    /* ── Horaires canvas tokens — TV (1920×1080) ── */
    --tv-hor-city-size:          22;
    --tv-hor-city-color:         #ffffff;
    --tv-hor-city-x:             1750;
    --tv-hor-city-y:             1058;
    --tv-hor-frame-x:            700;
    --tv-hor-frame-y:            10;
    --tv-hor-frame-offset-y:     0;
    --tv-hor-frame-border:       3;
    --tv-hor-frame-pad:          30;
    --tv-hor-title-size:         66;
    --tv-hor-title-color:        #ffffff;
    --tv-hor-title-style:        900;
    --tv-hor-title-off-y:        61;
    --tv-hor-sep-h:              4;
    --tv-hor-sep-off-y:          85;
    --tv-hor-sched-off-y:        70;
    --tv-hor-sched-row-h:        105;
    --tv-hor-sched-day-size:     58;
    --tv-hor-sched-hours-size:   58;
    --tv-hor-sched-color:        #ffffff;
    --tv-hor-sched-closed-color: var(--brand-primary);
    --tv-hor-sched-sep-color:    rgba(255,255,255,.12);
    --tv-hor-split-x:            660;
    --tv-hor-frame-x-offset:     360;

    /* ── Story canvas tokens (mêmes valeurs que post, à ajuster) ── */

    /* Job title */
    --story-job-l1-size:        116;
    --story-job-l1-color:       #ffffff;
    --story-job-l1-style:       800;
    --story-job-l2-size:        38;
    --story-job-l2-color:       #ffffff;
    --story-job-l2-style:       800;
    --story-job-l1-y:           1200;
    --story-job-l2-y:           1250;

    /* "Nous recrutons !" */
    --story-recrutons-size:  60;
    --story-recrutons-y:    1020;

    /* Contract badge */
    --story-contract-size:      34;
    --story-contract-weight:     400;
    --story-contract-color:      var(--brand-primary);
    --story-contract-text-color: #ffffff;
    --story-contract-y:         1040;

    /* Store info block */
    --story-info-size:          34;
    --story-info-color:         #ffffff;
    --story-info-x:             72;
    --story-info-line-h:        42;
    --story-info-zone-top:      1390;
    --story-info-zone-bottom:   1630;

    /* City */
    --story-city-size:          28;
    --story-city-color:         #ffffff;
    --story-city-x:             540;
    --story-city-y:             210;

    /* ── Recrutement canvas tokens — A4 (1240×1754) ── */

    /* Job title */
    --a4-job-l1-size:        132;
    --a4-job-l1-color:       #ffffff;
    --a4-job-l1-style:       800;
    --a4-job-l2-size:        44;
    --a4-job-l2-color:       #ffffff;
    --a4-job-l2-style:       800;
    --a4-job-l1-y:           1042;
    --a4-job-l2-y:           1110;

    /* "Nous recrutons !" */
    --a4-recrutons-size:  70;
    --a4-recrutons-y:    820;

    /* Contract badge */
    --a4-contract-size:      38;
    --a4-contract-weight:     400;
    --a4-contract-color:      var(--brand-primary);
    --a4-contract-text-color: #ffffff;
    --a4-contract-y:         848;

    /* Store info block */
    --a4-info-size:          40;
    --a4-info-color:         #ffffff;
    --a4-info-x:             83;
    --a4-info-line-h:        45;
    --a4-info-zone-top:      1219;
    --a4-info-zone-bottom:   1506;

    /* City */
    --a4-city-size:          32;
    --a4-city-color:         #ffffff;
    --a4-city-x:             620;
    --a4-city-y:             210;

    /* ── Ouverture/Fermeture canvas tokens — post (1080×1350) ── */
    --of-date-text-nudge:    0;
    --of-city-size:          34;
    --of-city-color:         #ffffff;
    --of-city-x:             540;
    --of-city-y:             180;
    --of-context-size:       34;
    --of-context-color:      #ffffff;
    --of-context-y:          602;
    --of-statut-size:        165;
    --of-statut-color:       #ffffff;
    --of-statut-ferme-color: var(--of-statut-color);
    --of-statut-y:           760;
    --of-day-size:           112;
    --of-day-color:          #ffffff;
    --of-day-y:              868;
    --of-date-size:          66;
    --of-date-color:         #ffffff;
    --of-date-bg:            #000000;
    --of-date-color-ferme:   var(--of-date-color);
    --of-date-bg-ferme:      var(--of-date-bg);
    --of-date-y:             945;
    --of-date-pad-x:         42;
    --of-date-pad-y:         20;
    --of-sign-size:          50;
    --of-sign-color:         #ffffff;
    --of-sign-y:             1155;

    /* ── Ouverture/Fermeture canvas tokens — story (1080×1920) ── */
    --story-of-city-size:    34;
    --story-of-city-color:   #ffffff;
    --story-of-city-x:       540;
    --story-of-city-y:       190;
    --story-of-context-size: 36;
    --story-of-context-color:#ffffff;
    --story-of-context-y:    752;
    --story-of-statut-size:  180;
    --story-of-statut-color: #ffffff;
    --story-of-statut-ferme-color: var(--story-of-statut-color);
    --story-of-statut-y:     930;
    --story-of-day-size:     125;
    --story-of-day-color:    #ffffff;
    --story-of-day-y:        1058;
    --story-of-date-size:    74;
    --story-of-date-color:   #ffffff;
    --story-of-date-bg:      #000000;
    --story-of-date-color-ferme: var(--story-of-date-color);
    --story-of-date-bg-ferme:    var(--story-of-date-bg);
    --story-of-date-y:       1140;
    --story-of-date-pad-x:   46;
    --story-of-date-pad-y:   22;
    --story-of-sign-size:    54;
    --story-of-sign-color:   #ffffff;
    --story-of-sign-y:       1450;

    /* ── Ouverture/Fermeture canvas tokens — A4 (1240×1754) ── */
    --a4-of-city-size:       38;
    --a4-of-city-color:      #ffffff;
    --a4-of-city-x:          620;
    --a4-of-city-y:          260;
    --a4-of-context-size:    38;
    --a4-of-context-color:   #ffffff;
    --a4-of-context-y:       799;
    --a4-of-statut-size:     195;
    --a4-of-statut-color:    #ffffff;
    --a4-of-statut-ferme-color: var(--a4-of-statut-color);
    --a4-of-statut-y:        1010;
    --a4-of-day-size:        136;
    --a4-of-day-color:       #ffffff;
    --a4-of-day-y:           1143;
    --a4-of-date-size:       80;
    --a4-of-date-color:      #ffffff;
    --a4-of-date-bg:         #000000;
    --a4-of-date-color-ferme: var(--a4-of-date-color);
    --a4-of-date-bg-ferme:    var(--a4-of-date-bg);
    --a4-of-date-y:          1240;
    --a4-of-date-pad-x:      50;
    --a4-of-date-pad-y:      24;
    --a4-of-sign-size:       60;
    --a4-of-sign-color:      #ffffff;
    --a4-of-sign-y:          1545;

    /* ── Ouverture/Fermeture canvas tokens — TV (1920×1080) ── */
    --tv-of-city-size:       42;
    --tv-of-city-color:      #ffffff;
    --tv-of-city-x:          960;
    --tv-of-city-y:          185;
    --tv-of-context-size:    54;
    --tv-of-context-color:   #ffffff;
    --tv-of-context-y:       320;
    --tv-of-statut-size:     220;
    --tv-of-statut-color:    #ffffff;
    --tv-of-statut-ferme-color: var(--tv-of-statut-color);
    --tv-of-statut-y:        515;
    --tv-of-day-size:        150;
    --tv-of-day-color:       #ffffff;
    --tv-of-day-y:           650;
    --tv-of-date-size:       106;
    --tv-of-date-color:      #ffffff;
    --tv-of-date-bg:         #000000;
    --tv-of-date-color-ferme: var(--tv-of-date-color);
    --tv-of-date-bg-ferme:    var(--tv-of-date-bg);
    --tv-of-date-y:          750;
    --tv-of-date-pad-x:      68;
    --tv-of-date-pad-y:      32;
    --tv-of-sign-size:       80;
    --tv-of-sign-color:      #ffffff;
    --tv-of-sign-y:          920;

    /* ── Promotion canvas tokens (Moto Axxe uniquement) ── */
    --promo-canvas-font:    'Roboto Flex', Arial, sans-serif;
    --promo-percent-font:   'Anton', sans-serif;
    --promo-text-color:     #ffffff;
    --promo-text-shadow:    1;
    --promo-line1-weight:   800;
    --promo-sur-weight:     400;
    --promo-l1-weight:      800;
    --promo-l2-weight:      800;

    /* Post (1080×1350) */
    --promo-percent-size:    450;
    --promo-percent-line-h:  620;
    --promo-line1-size:      130;
    --promo-line1-line-h:    20;
    --promo-sur-size:        50;
    --promo-sur-line-h:      60;
    --promo-l1-size:         120;
    --promo-l1-line-h:       110;
    --promo-l2-size:         120;
    --promo-l2-line-h:       110;
    --promo-offset-y:        100;

    /* Story (1080×1920) */
    --story-promo-percent-size:   450;
    --story-promo-percent-line-h: 650;
    --story-promo-line1-size:     150;
    --story-promo-line1-line-h:   20;
    --story-promo-sur-size:       50;
    --story-promo-sur-line-h:     60;
    --story-promo-l1-size:        110;
    --story-promo-l1-line-h:      100;
    --story-promo-l2-size:        110;
    --story-promo-l2-line-h:      100;
    --story-promo-offset-y:       60;

    /* A4 (1240×1754) */
    --a4-promo-percent-size:   600;
    --a4-promo-percent-line-h: 800;
    --a4-promo-line1-size:     180;
    --a4-promo-line1-line-h:   20;
    --a4-promo-sur-size:       50;
    --a4-promo-sur-line-h:     60;
    --a4-promo-l1-size:        110;
    --a4-promo-l1-line-h:      100;
    --a4-promo-l2-size:        110;
    --a4-promo-l2-line-h:      100;
    --a4-promo-offset-y:       150;

    /* TV (1920×1080) — layout bicolonne : % à gauche, texte à droite */
    --tv-promo-percent-size:   460;
    --tv-promo-percent-line-h: 480;
    --tv-promo-line1-size:     140;
    --tv-promo-line1-line-h:   140;
    --tv-promo-sur-size:       65;
    --tv-promo-sur-line-h:     65;
    --tv-promo-l1-size:        130;
    --tv-promo-l1-line-h:      130;
    --tv-promo-l2-size:        130;
    --tv-promo-l2-line-h:      130;
    --tv-promo-offset-y:       180;
    --tv-promo-text-offset-y:  140;
    --tv-promo-percent-x:      500;
    --tv-promo-text-x:         1340;
}

/* ─── Reset / Base ────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #efefef;
    font-family: var(--ui-font);
    font-size: 16px;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Topbar ──────────────────────────────────────────────────────────── */
.topbar {
    background: #111;
    border-bottom: 5px solid var(--brand-primary);
    margin-bottom: 24px;
    height: 75px;
}

.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.topbar-logo {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.topbar-back {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #333;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 6px 14px 6px 10px;
    transition: background .18s, border-color .18s, color .18s;
}

.topbar-back::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.topbar-back:hover {
    background: rgba(var(--brand-primary-rgb),.15);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Moto Axxe — bouton "Retour" toujours en teintes de gris, jamais dans la couleur de marque */
.enseigne-motoaxxe .topbar-back {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #333;
}

.enseigne-motoaxxe .topbar-back:hover {
    background: #d0d0d0;
    border-color: #d0d0d0;
    color: #1a1a1a;
}

.topbar .sub {
    color: rgba(255, 255, 255, .8);
    font-size: .82rem;
    margin-top: 8px;
}

.topbar-inner--right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.topbar-title {
    text-align: right;
}

.topbar-title-main {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.1;
}

.topbar-title-sub {
    color: rgba(255, 255, 255, .65);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ─── Layout ──────────────────────────────────────────────────────────── */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.container--signature {
    max-width: 1400px;
}

.container--horaires {
    max-width: 1300px;
}

.layout--horaires {
    align-items: flex-start;
}

.layout--horaires .col-form:first-child {
    flex: 0 0 calc(35% - 16px);
    min-width: 0;
}

.col-form--options {
    flex: 0 0 calc(15% - 16px) !important;
    min-width: 0;
}

.layout--horaires .col-preview {
    flex: 0 0 calc(50% - 16px);
    min-width: 0;
}

.fmt-group--vertical {
    flex-direction: column;
    gap: 8px;
}

.fmt-group--vertical .fmtbtn {
    width: 100%;
    text-align: center;
}


.layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.col-form {
    flex: 0 0 42%;
    max-width: 42%;
}

.col-preview {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Signature : 3 colonnes (Magasin / Réseaux sociaux / Aperçu) au lieu des 2 colonnes standard. */
.layout--signature .col-form {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
}

.layout--signature .col-preview {
    flex: 2 1 0;
}

.layout--signature .export-buttons {
    max-width: 80%;
    margin: 0 auto;
}

.layout--signature .video-browser-hint {
    font-size: .7rem;
}

.layout--signature .export-buttons .btnDl,
.layout--signature .export-buttons .btnDlAll {
    padding: 9px 24px;
    font-size: .85rem;
}

/* ─── Panel ───────────────────────────────────────────────────────────── */
.panel {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .06);
    padding: 26px;
    margin-bottom: 20px;
}

hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 14px 0;
}

/* ─── Form grid ───────────────────────────────────────────────────────── */
.slabel {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 10px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

.form-grid--offre {
    grid-template-columns: 2fr 1fr;
}

.col-full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.text-muted {
    color: #aaa;
    font-weight: normal;
    font-size: .82rem;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 7px 10px;
    font-size: .9rem;
    font-family: inherit;
    color: #333;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: none;
    transition: border-color .15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .12);
}

.form-control::placeholder {
    color: #333;
    opacity: .2;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    margin: 0;
}

#fUrgentRow,
#fVideoBgRow {
    color: #1a73e8;
}
#fUrgentRow input[type="checkbox"],
#fVideoBgRow input[type="checkbox"] {
    accent-color: #1a73e8;
}

.resp-opts {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.resp-opt-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
}

.resp-opt-label input[type="checkbox"] {
    accent-color: var(--brand-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ─── Format buttons (segmented control) ─────────────────────────────── */
.fmt-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: #f2f2f4;
    border-radius: 14px;
    padding: 4px;
    margin-top: 6px;
}

.fmtbtn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    color: #777;
    transition: background .2s, color .2s, box-shadow .2s;
}

.fmtbtn:hover {
    color: #1a1a1a;
}

.fmtbtn.active {
    background: var(--brand-primary);
    color: var(--card-btn-text, #fff);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb),.35);
}


.video-bg-choice-group {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.video-bg-choice {
    flex: 1;
    min-width: 0;
    border: 2px solid transparent;
    background: #f2f2f4;
    border-radius: 10px;
    padding: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.video-bg-choice video,
.video-bg-choice img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 7px;
    background: #888;
    pointer-events: none;
}

.video-bg-choice span {
    display: block;
    margin-top: 5px;
    font-size: .76rem;
    font-weight: 600;
    color: #777;
    text-align: center;
}

.video-bg-choice:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.video-bg-choice.active {
    border-color: var(--brand-primary);
    background: var(--brand-tint);
}

.video-bg-choice.active span {
    color: #1a1a1a;
}

/* ─── Preview ─────────────────────────────────────────────────────────── */
.preview-area {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    gap: 14px;
}

.signature-preview {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    border: 1px dashed #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

#signatureInner {
    transform-origin: top left;
}

#cv {
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    display: block;
    max-width: 100%;
    height: auto !important;
}

/* ─── Info format ─────────────────────────────────────────────────────── */
.format-info {
    background: #eaf4fd;
    border: 1px solid #cfe6fb;
    border-radius: 10px;
    padding: 18px 20px;
    font-size: .85rem;
    line-height: 1.55;
    color: #355169;
}

.format-info h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1c5c8a;
}

.format-info p {
    margin: 0 0 8px;
}

.format-info ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.format-info li {
    margin-bottom: 4px;
}

.format-info p:last-child {
    margin-bottom: 0;
}

#exportButtons {
    margin-top: 16px;
}

.col-preview #exportButtons {
    margin-top: 0;
}

/* ─── Download buttons ────────────────────────────────────────────────── */
.btnDl,
.btnDlAll {
    background: var(--dl-btn-bg);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 0;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--dl-btn-rgb),.32);
    transition: background .15s, transform .15s, box-shadow .15s;
    margin-top: 10px;
}

.btnDl:hover,
.btnDlAll:hover {
    background: var(--dl-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--dl-btn-rgb),.4);
}

/* Maxxess — fond jaune : texte noir pour le contraste */
.enseigne-maxxess .btnDl,
.enseigne-maxxess .btnDlAll {
    color: #000;
}

.export-buttons {
    display: flex;
    gap: 12px;
}

.export-buttons .btnDl,
.export-buttons .btnDlAll {
    width: auto;
    flex: 1;
    margin-top: 0;
}

.export-buttons + .export-buttons {
    margin-top: 12px;
}

.export-buttons .btnNotify {
    width: auto;
    flex: 1;
    margin-top: 0;
}

.export-buttons .btnDl,
.export-buttons .btnDlAll,
.export-buttons .btnNotify {
    font-size: 1rem;
}

.export-buttons button i {
    margin-right: 6px;
}

#videoButtons {
    flex-wrap: wrap;
}

.video-browser-hint {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 20px;
    padding: 10px 14px;
    background: #eaf4fd;
    border: 1px solid #cfe6fb;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: #355169;
    line-height: 1.4;
}

.video-browser-hint i {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cfe6fb;
    color: #1c5c8a;
    font-size: .7rem;
}

/* ─── Export vidéo : barre de progression ───────────────────────────────── */
.video-progress-wrap {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;    
    margin: 10px 0 20px;
}

.video-progress-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff4e5;
    border: 2px solid #ff9800;
    border-radius: 10px;
    padding: 12px 16px;
}

.video-progress-warning-icon {
    font-size: 1.15rem;
    color: #e65100;
    line-height: 1.4;
}

.video-progress-warning-msg {
    font-size: .85rem;
    font-weight: 700;
    color: #9a4300;
    line-height: 1.5;
    margin: 0;
}

.video-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-progress-track {
    flex: 1;
    height: 8px;
    background: #e5e5e5;
    border-radius: 999px;
    overflow: hidden;
}

.video-progress-bar {
    height: 100%;
    width: 0%;
    background: #1a73e8;
    border-radius: 999px;
    transition: width .2s ease;
}

.video-progress-label {
    font-size: .82rem;
    color: #555;
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

/* ─── Notify button ───────────────────────────────────────────────────── */
.btnNotify {
    display: block;
    width: 100%;
    padding: 11px 0;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(26,115,232,.32);
    transition: background .15s, transform .15s, box-shadow .15s;
    margin-top: 8px;
    margin-top: 15px;
}
.btnNotify:hover {
    background: #1557b0;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(26,115,232,.4);
}
.btnNotify:disabled {
    opacity: .45;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.notify-sub {
    display: block;
    width: 100%;
    text-align: center;
    color: #1a73e8;
    font-size: .72rem;
    margin-top: 6px;
}

.btnDlVideo {
    background: #1e8e3e;
    box-shadow: 0 6px 16px rgba(30,142,62,.32);
}
.btnDlVideo:hover {
    background: #166a2e;
    box-shadow: 0 8px 20px rgba(30,142,62,.4);
}

.notify-feedback {
    margin-top: 8px;
    font-size: .8rem;
    text-align: center;
    padding: 7px 10px;
    border-radius: 6px;
    min-height: 0;
    transition: opacity .2s;
}
.notify-feedback:empty {
    display: none;
    margin-top: 0;
    padding: 0;
}
.notify-loading { color: #888; }

.required-star { color: #e00; margin-left: 2px; }

.form-control.input-error {
    border-color: #e00;
    box-shadow: 0 0 0 3px rgba(220,0,0,.12);
}
.notify-ok  { color: #1a7a1a; background: #edfaed; border: 1px solid #b2dfb2; }
.notify-err { color: #a00;    background: #faeaea; border: 1px solid #f5b8b8; }

/* ─── Upload zone (réservé) ───────────────────────────────────────────── */
.upload-zone {
    display: block;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    color: #888;
    transition: .2s;
    font-size: .88rem;
}

.upload-zone:hover {
    border-color: var(--brand-primary);
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.upload-zone.ok {
    border-color: #198754;
    background: #f0fff4;
    color: #198754;
}

/* ─── Lobby (index) ───────────────────────────────────────────────────── */
.lobby {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px 60px;
}

.lobby-heading {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    margin-bottom: 30px;
}

.lobby-sub {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 30px;
}

/* ─── Lobby (accueil) : image carrée à gauche, générateurs en lignes à droite ──── */
.lobby-rows {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 28px;
    align-items: stretch;
}

.lobby-rows-hero {
    flex: 0 0 500px;
    width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0,0,0,.13);
}

.lobby-rows-hero-img {
    display: block;
    width: 100%;
    height: 100%;
}

.lobby-rows-hero-zoomable {
    cursor: zoom-in;
    transition: opacity .2s;
}
.lobby-rows-hero-zoomable:hover {
    opacity: .88;
}

/* ─── Lightbox ─── */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.lightbox.is-open {
    display: flex;
}
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.82);
    cursor: zoom-out;
}
.lightbox-img {
    position: relative;
    max-width: min(90vw, 1200px);
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.lightbox-close:hover {
    background: rgba(255,255,255,.3);
}

.lobby-rows-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.lobby-row {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 16px 20px;
    text-decoration: none;
    box-shadow: 0 2px 14px rgba(0,0,0,.05);
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.lobby-row:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(var(--brand-primary-rgb),.18);
}

.lobby-row-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    background: linear-gradient(145deg, var(--brand-primary), rgba(var(--brand-primary-rgb),.75));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

.lobby-row-icon i {
    font-size: 20px;
    color: #fff;
}

/* Maxxess — fond d'icône jaune : icône en noir pour rester lisible */
.enseigne-maxxess .lobby-row-icon i {
    color: #000;
}

.lobby-row-text {
    flex: 1;
    min-width: 0;
}

.lobby-row-title {
    color: #1a1a1a;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lobby-row-desc {
    color: #888;
    font-size: .78rem;
    line-height: 1.45;
}

.lobby-row-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ff0084;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
}

.lobby-row-arrow {
    flex: 0 0 auto;
    color: #ccc;
    font-size: 16px;
    transition: transform .25s, color .25s;
}

.lobby-row:hover .lobby-row-arrow {
    color: var(--brand-primary);
    transform: translateX(4px);
}

@media (max-width: 760px) {
    .lobby-rows {
        flex-direction: column;
    }

    .lobby-rows-hero {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ─── Footer (accueil) ────────────────────────────────────────────────── */
.site-footer {
    text-align: center;
    padding: 18px 20px;
    font-size: .78rem;
    color: #999;
    border-top: 1px solid #e0e0e0;
}

.site-footer-brand {
    font-weight: 700;
}

/* Maxxess — accueil (index) : même typographie que le visuel horaires */
.enseigne-maxxess .lobby {
    font-family: var(--hor-canvas-font);
}

/* Maxxess — bandeau topbar (titre + sous-titre) : même typographie que le visuel horaires */
.enseigne-maxxess .topbar-title {
    font-family: var(--hor-canvas-font);
}

.badge-soon {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #eee;
    color: #aaa;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 4px 10px;
    border: 1px solid #ddd;
}

/* ─── Page de choix de l'enseigne (thème Sadem / bleu) ───────────────── */
.page-choix-enseigne {
    background: #ffffff;
    --ui-font: 'Roboto', Arial, sans-serif;
}

.sadem-topbar {
    background: #eaf6fd;
    border-bottom: 5px solid #00aeef;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sadem-topbar-logo {
    max-height: 46px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.page-choix-enseigne .lobby-sub {
    color: #00aeef;
}

.enseigne-picker {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 60px;
}

.enseigne-cards {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.enseigne-card {
    background: #111;
    border-radius: 16px;
    border-bottom: 5px solid var(--ec-accent);
    width: 320px;
    padding: 44px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.enseigne-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(var(--ec-accent-rgb),.25);
}

.enseigne-card-logo {
    width: 100%;
    height: auto;
    margin-bottom: 36px;
}

.enseigne-card-btn {
    display: block;
    background: var(--ec-accent);
    font-family: inherit;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 12px 0;
    width: 100%;
    text-align: center;
}

.enseigne-card--motoaxxe {
    --ec-accent: #ff4500;
    --ec-accent-rgb: 255, 69, 0;
}
.enseigne-card--motoaxxe .enseigne-card-btn { color: #fff; }

.enseigne-card--maxxess {
    --ec-accent: #FFE600;
    --ec-accent-rgb: 255, 230, 0;
}
.enseigne-card--maxxess .enseigne-card-btn { color: #111; }

@media (max-width: 700px) {
    .enseigne-card { width: 100%; max-width: 360px; }
}

/* ─── Schedule rows (horaires form) ──────────────────────────────────── */
.sched-row {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.sched-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sched-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.sched-day {
    flex: 0 0 80px;
    font-size: 1.2em;
    font-weight: 800;
    color: #333;
    text-transform: uppercase;
}

.sched-chk-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
    color: #666;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sched-chk-lbl input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    margin: 0;
}

.sched-times {
    display: flex;
    align-items: center;
    gap: 4px;
}

select.sched-time {
    width: 70px;
    padding: 4px 2px 4px 6px;
    font-size: .82rem;
    font-family: inherit;
    color: #333;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}

select.sched-time:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb),.12);
}

.sched-presets {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.sched-preset {
    padding: 3px 9px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #f7f7f7;
    color: #777;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}

.sched-preset:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--brand-tint);
}

.sched-preset--ferme:hover {
    border-color: #aaa;
    color: #555;
    background: #f0f0f0;
}

.sched-dash, .sched-slash {
    color: #bbb;
    font-size: .88rem;
    font-weight: 700;
}

.sched-ap-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-copy-all {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    padding: 4px 12px 4px 9px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}

.btn-copy-all:hover {
    background: var(--brand-tint);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 2px 6px rgba(var(--brand-primary-rgb),.12);
}

/* ─── Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay[hidden] { display: none; }

.modal {
    background: #fff;
    border-radius: 14px;
    padding: 36px 32px 28px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    text-align: center;
}

.modal-icon {
    font-size: 2rem;
    margin-bottom: 14px;
    line-height: 1;
}

.modal-icon--success { color: #1a9850; }

.modal-msg {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    line-height: 1.55;
    margin-bottom: 28px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-btn {
    padding: 11px 32px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    font-family: inherit;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.modal-btn--cancel {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
}
.modal-btn--cancel:hover { background: #b71c1c; border-color: #b71c1c; }

.modal-btn--ok {
    background: #1a9850;
    color: #fff;
    border-color: #1a9850;
}
.modal-btn--ok:hover { background: #14793f; border-color: #14793f; }

/* ─── Statut toggle (ouverture/fermeture) ───────────────────────────── */
.statut-group {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.statutbtn {
    flex: 1;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 12px 8px;
    font-size: .92rem;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 1px;
    transition: .15s;
    color: #777;
}

.statutbtn[data-statut="ferme"]:hover,
.statutbtn[data-statut="ferme"].active { border-color: #cc2200; color: #cc2200; background: #fff5f5; }

.statutbtn[data-statut="ouvert"]:hover,
.statutbtn[data-statut="ouvert"].active { border-color: #1a7a1a; color: #1a7a1a; background: #f0fff0; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .layout {
        flex-direction: column;
        gap: 20px;
        /* La base (desktop) a align-items:flex-start ; en colonne, ça empêche les enfants
           (panel/preview-area/exportButtons/format-info, désormais flex directs via
           display:contents) de s'étirer sur toute la largeur. */
        align-items: stretch;
    }

    /* col-form/col-preview ne créent plus de boîte propre : panel, preview-area,
       exportButtons et format-info deviennent des enfants flex directs de .layout,
       réordonnables individuellement via "order" (sinon ils restent groupés par paire). */
    .col-form,
    .col-preview {
        display: contents;
    }

    .panel { order: 1; margin-bottom: 0; }
    .preview-area { order: 2; }
    #exportButtons { order: 3; }
    .format-info { order: 4; }

    .preview-area {
        min-height: auto;
    }

        .export-buttons {
        margin-top: 10px;
    }
}

@media (max-width: 560px) {
    .topbar {
        height: auto;
        padding: 14px 0;
    }

    .topbar-inner--right {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .topbar-back {
        position: static;
        transform: none;
    }

    .topbar-title {
        text-align: left;
        width: 100%;
    }

    .container {
        padding: 0 12px 32px;
    }

    .panel {
        padding: 16px;
        margin-bottom: 0px;
    }

    .sched-row-top {
        flex-wrap: wrap;
    }

    .sched-times {
        flex-wrap: wrap;
        gap: 6px;
    }

    .sched-morning {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .fmt-group {
        flex-wrap: nowrap;
    }

    .statut-group {
        flex-wrap: wrap;
    }

    .btnDl,
    .btnDlAll {
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .btnNotify {
        width: 100%;
        box-sizing: border-box;
        margin-top: 0px;
    }
}

/* ─── Page Analytics ──────────────────────────────────────────────────── */
.page-analytics, .page-analytics *, .page-analytics *::before, .page-analytics *::after { box-sizing: border-box; margin: 0; padding: 0; }
.page-analytics {
    --an-bg: #f4f5f7;
    --an-surface: #ffffff;
    --an-border: #e2e5eb;
    --an-text: #1a1a2e;
    --an-text-soft: #6b7280;
    --an-accent: #ff4500;
    --an-accent2: #3b82f6;
    --an-radius: 10px;
    --an-shadow: 0 1px 4px rgba(0,0,0,.08);
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--an-bg);
    color: var(--an-text);
    min-height: 100vh;
}
@media (prefers-color-scheme: dark) {
    .page-analytics { --an-bg:#111827; --an-surface:#1f2937; --an-border:#374151; --an-text:#f9fafb; --an-text-soft:#9ca3af; }
}
.page-analytics[data-theme="dark"]  { --an-bg:#111827; --an-surface:#1f2937; --an-border:#374151; --an-text:#f9fafb; --an-text-soft:#9ca3af; }
.page-analytics[data-theme="light"] { --an-bg:#f4f5f7; --an-surface:#ffffff; --an-border:#e2e5eb; --an-text:#1a1a2e; --an-text-soft:#6b7280; }

.page-analytics .an-topbar { background: var(--an-surface); border-bottom: 1px solid var(--an-border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.page-analytics .an-topbar-title { font-size: 16px; font-weight: 700; }
.page-analytics .an-topbar-back { font-size: 13px; color: var(--an-text-soft); text-decoration: none; }
.page-analytics .an-topbar-back:hover { color: var(--an-accent); }

.page-analytics .container { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }

/* Filters */
.page-analytics .filters { background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 16px 20px; margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.page-analytics .filters label { font-size: 12px; color: var(--an-text-soft); display: flex; flex-direction: column; gap: 4px; }
.page-analytics .filters select, .page-analytics .filters input { font-size: 13px; padding: 6px 10px; border: 1px solid var(--an-border); border-radius: 6px; background: var(--an-bg); color: var(--an-text); }
.page-analytics .filters button { padding: 7px 18px; background: var(--an-accent); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.page-analytics .filters button:hover { opacity: .88; }
.page-analytics .filters .btn-reset { display: inline-flex; align-items: center; padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--an-text-soft); background: transparent; border: 1px solid var(--an-border); border-radius: 6px; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s; }
.page-analytics .filters .btn-reset:hover { color: var(--an-accent); border-color: var(--an-accent); }

/* KPI cards */
.page-analytics .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.page-analytics .kpi { background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 20px; box-shadow: var(--an-shadow); }
.page-analytics .kpi-value { font-size: 36px; font-weight: 800; color: var(--an-accent); line-height: 1; }
.page-analytics .kpi-label { font-size: 12px; color: var(--an-text-soft); margin-top: 6px; }

/* Grid */
.page-analytics .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 720px) { .page-analytics .grid-2 { grid-template-columns: 1fr; } }
.page-analytics .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .page-analytics .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .page-analytics .grid-3 { grid-template-columns: 1fr; } }

/* Cards */
.page-analytics .card { background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 20px; box-shadow: var(--an-shadow); }
.page-analytics .card-title { font-size: 13px; font-weight: 700; color: var(--an-text-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; }

/* Bar rows */
.page-analytics .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.page-analytics .bar-row:last-child { margin-bottom: 0; }
.page-analytics .bar-label { width: 130px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-analytics .bar-track { flex: 1; background: var(--an-border); border-radius: 4px; height: 10px; overflow: hidden; }
.page-analytics .bar-fill { height: 100%; border-radius: 4px; background: var(--an-accent); transition: width .4s; }
.page-analytics .bar-fill--blue { background: var(--an-accent2); }
.page-analytics .bar-count { width: 32px; text-align: right; color: var(--an-text-soft); font-size: 12px; }

/* Sparkline */
.page-analytics .spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 4px; }
.page-analytics .spark-bar { position: relative; flex: 1; background: var(--an-accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .8; cursor: default; }
.page-analytics .spark-bar:hover { opacity: 1; }
.page-analytics .spark-label { font-size: 10px; color: var(--an-text-soft); text-align: center; margin-top: 4px; }

/* Tooltip custom sur les barres du sparkline (plus visible que le title natif) */
.page-analytics .spark-bar[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--an-text);
    color: var(--an-surface);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 5;
}
.page-analytics .spark-bar[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--an-text);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 5;
}
.page-analytics .spark-bar[data-tooltip]:hover::after,
.page-analytics .spark-bar[data-tooltip]:hover::before { opacity: 1; }

/* Table */
.page-analytics .tbl-wrap { overflow-x: auto; }
.page-analytics table { width: 100%; border-collapse: collapse; font-size: 13px; }
.page-analytics th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--an-text-soft); padding: 6px 10px; border-bottom: 2px solid var(--an-border); }
.page-analytics td { padding: 8px 10px; border-bottom: 1px solid var(--an-border); }
.page-analytics tr:last-child td { border-bottom: none; }
.page-analytics tr:hover td { background: rgba(0,0,0,.03); }
.page-analytics .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.page-analytics .badge-motoaxxe { background: rgba(255,69,0,.12); color: #ff4500; }
.page-analytics .badge-maxxess { background: rgba(255,230,0,.18); color: #a07700; }

.page-analytics .error-box { background: #fee; border: 1px solid #fcc; border-radius: var(--an-radius); padding: 20px; color: #c00; }

/* ═══════════════════════════════════════════════════════════════════════
   THÈME MOTO AXXE — "Atelier" (light)
   ───────────────────────────────────────────────────────────────────────
   Refonte UI réservée à l'enseigne Moto Axxe. TOUT est scopé sous
   `html.enseigne-motoaxxe` : Maxxess conserve intégralement l'ancien design,
   et les pages sans classe d'enseigne (choix-enseigne.php, analytics.php)
   ne sont pas concernées.

   ⚠ Ne redéfinit AUCUN token canvas : les tokens introduits ici sont tous
   préfixés `--ma-`. `--brand-primary` et `--signature-font` sont laissés
   intacts car lus en JS (js/signature.js) et par les 4 générateurs.
   ═══════════════════════════════════════════════════════════════════════ */

html.enseigne-motoaxxe {
    /* Encres & papier */
    --ma-ink:          #16130F;
    --ma-ink-2:        #3B342B;
    --ma-muted:        #8C8478;
    --ma-faint:        #C9C2B6;
    --ma-line:         #E6E0D6;
    --ma-line-soft:    #F1EDE5;
    --ma-paper:        #fffefb;
    --ma-surface:      #FFFFFF;
    --ma-surface-2:    #FBFAF7;

    /* Accent de marque (miroir de --brand-primary, jamais réécrit) */
    --ma-accent:       #FF4500;
    --ma-accent-deep:  #C63500;
    --ma-accent-wash:  #FFF2EC;

    /* Sémantiques */
    --ma-go:           #12794F;
    --ma-go-deep:      #0D5D3C;
    --ma-info:         #1B5FD9;
    --ma-info-deep:    #1447A6;
    --ma-stop:         #C62828;

    /* Typo */
    --ma-display:      'Archivo', 'Roboto Flex', Arial, sans-serif;
    --ma-mono:         'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --ui-font:         var(--ma-display);

    /* Formes */
    --ma-r-lg:         18px;
    --ma-r-md:         12px;
    --ma-r-sm:         9px;
    --ma-shadow-card:  0 1px 2px rgba(22,19,15,.04), 0 18px 40px -24px rgba(22,19,15,.30);
    --ma-shadow-lift:  0 2px 4px rgba(22,19,15,.05), 0 26px 52px -26px rgba(22,19,15,.40);
}

/* ─── Papier + trame technique ───────────────────────────────────────── */
html.enseigne-motoaxxe body {
    background-color: var(--ma-paper);
    background-image:
        radial-gradient(880px 460px at 90% -10%, rgba(255,69,0,.10), transparent 62%),
        radial-gradient(720px 420px at -8% 106%, rgba(22,19,15,.05), transparent 60%),
        linear-gradient(rgba(22,19,15,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,19,15,.026) 1px, transparent 1px);
    background-size: auto, auto, 30px 30px, 30px 30px;
    background-attachment: fixed;
    color: var(--ma-ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.enseigne-motoaxxe ::selection {
    background: rgba(255,69,0,.20);
    color: var(--ma-ink);
}

html.enseigne-motoaxxe :focus-visible {
    outline: 2px solid var(--ma-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

html.enseigne-motoaxxe * {
    scrollbar-width: thin;
    scrollbar-color: #D8D1C5 transparent;
}
html.enseigne-motoaxxe ::-webkit-scrollbar { width: 10px; height: 10px; }
html.enseigne-motoaxxe ::-webkit-scrollbar-track { background: transparent; }
html.enseigne-motoaxxe ::-webkit-scrollbar-thumb {
    background: #D8D1C5;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
html.enseigne-motoaxxe ::-webkit-scrollbar-thumb:hover { background: #BFB6A8; background-clip: content-box; }

/* ─── Bandeau (masthead sombre — le logo est blanc/orange détouré) ───── */
html.enseigne-motoaxxe .topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #1E1A16 0%, #100D0A 100%);
    border-bottom: none;
    margin-bottom: 34px;
    box-shadow: 0 16px 34px -26px rgba(22,19,15,.9);
}

html.enseigne-motoaxxe .topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--ma-accent) 0%,
        var(--ma-accent) 34%,
        rgba(255,69,0,.30) 64%,
        rgba(255,69,0,0) 100%);
}

html.enseigne-motoaxxe .topbar-title-main {
    font-family: var(--ma-display);
    font-stretch: 115%;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #FFFFFF;
}

html.enseigne-motoaxxe .topbar-title-sub {
    font-family: var(--ma-mono);
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: .16em;
    color: rgba(255,255,255,.52);
    margin-top: 6px;
}

/* Bouton "Retour" : volontairement hors couleur de marque (neutre) */
html.enseigne-motoaxxe .topbar-back,
html.enseigne-motoaxxe .topbar-back:hover {
    font-family: var(--ma-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .14em;
    border-radius: 999px;
    padding: 7px 16px 7px 12px;
    transition: background .2s, border-color .2s, color .2s;
}

html.enseigne-motoaxxe .topbar-back {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.72);
}

html.enseigne-motoaxxe .topbar-back:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.30);
    color: #FFFFFF;
}

/* ─── Cartes / panneaux ──────────────────────────────────────────────── */
html.enseigne-motoaxxe .panel {
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-r-lg);
    box-shadow: var(--ma-shadow-card);
    padding: 28px;
    margin-bottom: 22px;
    transition: border-color .25s, box-shadow .25s;
}

html.enseigne-motoaxxe .panel:focus-within {
    border-color: rgba(255,69,0,.35);
    box-shadow: var(--ma-shadow-lift);
}

html.enseigne-motoaxxe hr {
    border-top: 1px solid var(--ma-line-soft);
    margin: 22px 0 20px;
}

/* Intitulé de section : micro-label mono + filet — signature du thème */
html.enseigne-motoaxxe .slabel {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--ma-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ma-muted);
    margin-bottom: 16px;
}

html.enseigne-motoaxxe .slabel::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--ma-accent);
    clip-path: polygon(0 0, 100% 0, 100% 66%, 66% 100%, 0 100%);
}

html.enseigne-motoaxxe .slabel::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--ma-line), rgba(230,224,214,0));
}

/* ─── Formulaires ────────────────────────────────────────────────────── */
html.enseigne-motoaxxe .form-grid { gap: 14px; margin-bottom: 6px; }

html.enseigne-motoaxxe .form-label {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ma-ink-2);
    margin-bottom: 6px;
}

html.enseigne-motoaxxe .text-muted {
    font-family: var(--ma-mono);
    font-size: .68rem;
    color: var(--ma-faint);
}

html.enseigne-motoaxxe .form-control,
html.enseigne-motoaxxe .form-select,
html.enseigne-motoaxxe select.sched-time {
    background: var(--ma-surface-2);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-r-sm);
    color: var(--ma-ink);
    transition: background .18s, border-color .18s, box-shadow .18s;
}

html.enseigne-motoaxxe .form-control,
html.enseigne-motoaxxe .form-select {
    padding: 10px 13px;
    font-size: .88rem;
}

html.enseigne-motoaxxe .form-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px 15px;
    cursor: pointer;
}

html.enseigne-motoaxxe .form-control:hover,
html.enseigne-motoaxxe .form-select:hover,
html.enseigne-motoaxxe select.sched-time:hover { border-color: #D6CEC1; }

html.enseigne-motoaxxe .form-control:focus,
html.enseigne-motoaxxe .form-select:focus,
html.enseigne-motoaxxe select.sched-time:focus {
    background: var(--ma-surface);
    border-color: var(--ma-accent);
    box-shadow: 0 0 0 4px rgba(255,69,0,.13);
}

html.enseigne-motoaxxe .form-control::placeholder {
    color: var(--ma-faint);
    opacity: 1;
}

html.enseigne-motoaxxe .form-control.input-error {
    border-color: var(--ma-stop);
    box-shadow: 0 0 0 4px rgba(198,40,40,.12);
}

html.enseigne-motoaxxe .required-star { color: var(--ma-accent); }

html.enseigne-motoaxxe .form-check { font-size: .82rem; color: var(--ma-ink-2); }

html.enseigne-motoaxxe .resp-opt-label { color: var(--ma-muted); font-size: .78rem; }

html.enseigne-motoaxxe #fUrgentRow,
html.enseigne-motoaxxe #fVideoBgRow { color: var(--ma-info); }
html.enseigne-motoaxxe #fUrgentRow input[type="checkbox"],
html.enseigne-motoaxxe #fVideoBgRow input[type="checkbox"] { accent-color: var(--ma-info); }

/* ─── Contrôle segmenté (formats / thèmes) ───────────────────────────── */
html.enseigne-motoaxxe .fmt-group {
    background: #EFEBE3;
    border: 1px solid rgba(22,19,15,.05);
    border-radius: var(--ma-r-md);
    padding: 4px;
    gap: 3px;
}

html.enseigne-motoaxxe .fmtbtn {
    border-radius: var(--ma-r-sm);
    padding: 9px 14px;
    font-family: var(--ma-mono);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ma-muted);
    transition: background .2s, color .2s, box-shadow .2s;
}

html.enseigne-motoaxxe .fmtbtn:hover {
    background: rgba(255,255,255,.7);
    color: var(--ma-ink);
}

html.enseigne-motoaxxe .fmtbtn.active {
    background: var(--ma-accent);
    color: #FFFFFF;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(22,19,15,.18), 0 8px 16px -8px rgba(255,69,0,.75);
}

html.enseigne-motoaxxe .fmtbtn.active:hover { background: var(--ma-accent); color: #FFFFFF; }

/* ─── Choix de fond vidéo (promotion) ────────────────────────────────── */
html.enseigne-motoaxxe .video-bg-choice {
    background: var(--ma-surface-2);
    border: 2px solid var(--ma-line);
    border-radius: var(--ma-r-md);
    padding: 5px;
}
html.enseigne-motoaxxe .video-bg-choice span {
    font-family: var(--ma-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ma-muted);
}
html.enseigne-motoaxxe .video-bg-choice:hover {
    border-color: #D6CEC1;
    box-shadow: 0 8px 18px -12px rgba(22,19,15,.5);
}
html.enseigne-motoaxxe .video-bg-choice.active {
    border-color: var(--ma-accent);
    background: var(--ma-accent-wash);
}
html.enseigne-motoaxxe .video-bg-choice.active span { color: var(--ma-accent-deep); }

/* ─── Statut Ouvert / Fermé ──────────────────────────────────────────── */
html.enseigne-motoaxxe .statutbtn {
    border: 1.5px solid var(--ma-line);
    background: var(--ma-surface-2);
    border-radius: var(--ma-r-md);
    font-family: var(--ma-display);
    font-stretch: 112%;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--ma-muted);
    padding: 13px 8px;
}

html.enseigne-motoaxxe .statutbtn[data-statut="ouvert"]:hover,
html.enseigne-motoaxxe .statutbtn[data-statut="ouvert"].active {
    border-color: var(--ma-go);
    color: var(--ma-go);
    background: #F1F9F5;
    box-shadow: 0 8px 18px -12px rgba(18,121,79,.8);
}

html.enseigne-motoaxxe .statutbtn[data-statut="ferme"]:hover,
html.enseigne-motoaxxe .statutbtn[data-statut="ferme"].active {
    border-color: var(--ma-stop);
    color: var(--ma-stop);
    background: #FDF3F3;
    box-shadow: 0 8px 18px -12px rgba(198,40,40,.8);
}

/* ─── Horaires : lignes de jours ─────────────────────────────────────── */
html.enseigne-motoaxxe .sched-row {
    border-bottom: 1px solid var(--ma-line-soft);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

html.enseigne-motoaxxe .sched-day {
    font-family: var(--ma-display);
    font-stretch: 112%;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ma-ink);
}

html.enseigne-motoaxxe .sched-chk-lbl { color: var(--ma-muted); font-size: .74rem; }

html.enseigne-motoaxxe select.sched-time { padding: 5px 4px 5px 7px; font-size: .8rem; }

html.enseigne-motoaxxe .sched-preset,
html.enseigne-motoaxxe .btn-copy-all {
    font-family: var(--ma-mono);
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--ma-line);
    background: var(--ma-surface-2);
    color: var(--ma-muted);
    border-radius: 999px;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}

html.enseigne-motoaxxe .sched-preset { padding: 4px 11px; font-size: .66rem; }
html.enseigne-motoaxxe .btn-copy-all { padding: 5px 13px 5px 10px; font-size: .66rem; }

html.enseigne-motoaxxe .sched-preset:hover,
html.enseigne-motoaxxe .btn-copy-all:hover {
    background: var(--ma-accent-wash);
    border-color: rgba(255,69,0,.45);
    color: var(--ma-accent-deep);
    box-shadow: 0 6px 14px -10px rgba(255,69,0,.9);
}

html.enseigne-motoaxxe .sched-preset--ferme:hover {
    background: #F2EFE9;
    border-color: #D6CEC1;
    color: var(--ma-ink-2);
    box-shadow: none;
}

html.enseigne-motoaxxe .sched-dash,
html.enseigne-motoaxxe .sched-slash { color: var(--ma-faint); }

/* ─── Aperçu ─────────────────────────────────────────────────────────── */
html.enseigne-motoaxxe .preview-area {
    background:
        linear-gradient(rgba(22,19,15,.024) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(22,19,15,.024) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(180deg, #FCFBF9, #F3F0EA);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-r-md);
    padding: 28px;
}

html.enseigne-motoaxxe #cv {
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(22,19,15,.08),
        0 30px 60px -28px rgba(22,19,15,.55);
}

html.enseigne-motoaxxe .signature-preview {
    background: var(--ma-surface);
    border: 1px dashed var(--ma-line);
    border-radius: var(--ma-r-md);
}

/* ─── Boutons d'export ───────────────────────────────────────────────── */
html.enseigne-motoaxxe {
    --dl-btn-bg:    var(--ma-go);
    --dl-btn-hover: var(--ma-go-deep);
    --dl-btn-rgb:   18, 121, 79;
}

html.enseigne-motoaxxe .btnDl,
html.enseigne-motoaxxe .btnDlAll,
html.enseigne-motoaxxe .btnNotify {
    font-family: var(--ma-display);
    font-stretch: 108%;
    border-radius: var(--ma-r-md);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 14px 20px;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}

html.enseigne-motoaxxe .btnDl {
    background: var(--ma-go);
    box-shadow: 0 1px 2px rgba(22,19,15,.14), 0 14px 26px -16px rgba(18,121,79,.95);
}
html.enseigne-motoaxxe .btnDl:hover {
    background: var(--ma-go-deep);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(22,19,15,.16), 0 20px 34px -16px rgba(18,121,79,1);
}

/* "Télécharger tout" en action secondaire : hiérarchie plus lisible */
html.enseigne-motoaxxe .btnDlAll {
    background: var(--ma-surface);
    color: var(--ma-ink);
    border: 1.5px solid var(--ma-line);
    box-shadow: 0 1px 2px rgba(22,19,15,.04);
}
html.enseigne-motoaxxe .btnDlAll:hover {
    background: var(--ma-surface);
    color: var(--ma-ink);
    border-color: var(--ma-ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -18px rgba(22,19,15,.9);
}

html.enseigne-motoaxxe .btnNotify {
    background: var(--ma-info);
    box-shadow: 0 1px 2px rgba(22,19,15,.14), 0 14px 26px -16px rgba(27,95,217,.95);
}
html.enseigne-motoaxxe .btnNotify:hover {
    background: var(--ma-info-deep);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(22,19,15,.16), 0 20px 34px -16px rgba(27,95,217,1);
}

html.enseigne-motoaxxe .btnDlVideo {
    background: var(--ma-go);
    box-shadow: 0 1px 2px rgba(22,19,15,.14), 0 14px 26px -16px rgba(18,121,79,.95);
}
html.enseigne-motoaxxe .btnDlVideo:hover {
    background: var(--ma-go-deep);
    box-shadow: 0 2px 4px rgba(22,19,15,.16), 0 20px 34px -16px rgba(18,121,79,1);
}

html.enseigne-motoaxxe .btnDl:active,
html.enseigne-motoaxxe .btnDlAll:active,
html.enseigne-motoaxxe .btnNotify:active { transform: translateY(0); }

html.enseigne-motoaxxe .notify-sub {
    font-family: var(--ma-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--ma-muted);
    margin-top: 8px;
}

html.enseigne-motoaxxe .notify-feedback {
    font-family: var(--ma-mono);
    font-size: .72rem;
    border-radius: var(--ma-r-sm);
    padding: 9px 12px;
}
html.enseigne-motoaxxe .notify-ok  { color: var(--ma-go);   background: #F1F9F5; border-color: #C6E4D4; }
html.enseigne-motoaxxe .notify-err { color: var(--ma-stop); background: #FDF3F3; border-color: #F0CFCF; }
html.enseigne-motoaxxe .notify-loading { color: var(--ma-muted); }

/* ─── Encarts d'information ──────────────────────────────────────────── */
html.enseigne-motoaxxe .format-info {
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-left: 3px solid var(--ma-accent);
    border-radius: var(--ma-r-md);
    padding: 22px 24px;
    font-size: .82rem;
    line-height: 1.65;
    color: var(--ma-ink-2);
    box-shadow: var(--ma-shadow-card);
}

html.enseigne-motoaxxe .format-info h3 {
    font-family: var(--ma-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ma-muted);
    margin-bottom: 12px;
}

html.enseigne-motoaxxe .format-info strong { color: var(--ma-ink); }
html.enseigne-motoaxxe .format-info ul { padding-left: 18px; }
html.enseigne-motoaxxe .format-info li::marker { color: var(--ma-accent); }

html.enseigne-motoaxxe .video-browser-hint {
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-left: 3px solid var(--ma-info);
    border-radius: var(--ma-r-md);
    font-size: .78rem;
    font-weight: 500;
    color: var(--ma-ink-2);
}
html.enseigne-motoaxxe .video-browser-hint i {
    background: #E8EFFC;
    color: var(--ma-info);
}

html.enseigne-motoaxxe .video-progress-warning {
    background: var(--ma-accent-wash);
    border: 1px solid rgba(255,69,0,.35);
    border-left: 3px solid var(--ma-accent);
    border-radius: var(--ma-r-md);
}
html.enseigne-motoaxxe .video-progress-warning-icon { color: var(--ma-accent); }
html.enseigne-motoaxxe .video-progress-warning-msg { color: var(--ma-accent-deep); font-weight: 600; }

html.enseigne-motoaxxe .video-progress-track { background: #E8E3DA; height: 7px; }
html.enseigne-motoaxxe .video-progress-bar { background: linear-gradient(90deg, var(--ma-info), #4A8CF0); }
html.enseigne-motoaxxe .video-progress-label {
    font-family: var(--ma-mono);
    font-size: .72rem;
    color: var(--ma-muted);
}

html.enseigne-motoaxxe .upload-zone {
    border: 2px dashed var(--ma-line);
    border-radius: var(--ma-r-md);
    background: var(--ma-surface-2);
    color: var(--ma-muted);
}
html.enseigne-motoaxxe .upload-zone:hover {
    border-color: var(--ma-accent);
    background: var(--ma-accent-wash);
    color: var(--ma-accent-deep);
}

/* ─── Modales ────────────────────────────────────────────────────────── */
html.enseigne-motoaxxe .modal-overlay {
    background: rgba(22,19,15,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

html.enseigne-motoaxxe .modal {
    border-radius: var(--ma-r-lg);
    border: 1px solid var(--ma-line);
    box-shadow: 0 40px 90px -30px rgba(22,19,15,.6);
    animation: ma-pop .28s cubic-bezier(.2,.9,.25,1) both;
}

html.enseigne-motoaxxe .modal-icon { color: var(--ma-accent); }
html.enseigne-motoaxxe .modal-icon--success { color: var(--ma-go); }

html.enseigne-motoaxxe .modal-msg {
    font-size: .95rem;
    font-weight: 500;
    color: var(--ma-ink-2);
}

html.enseigne-motoaxxe .modal-btn {
    font-family: var(--ma-display);
    font-stretch: 108%;
    border-radius: var(--ma-r-md);
    border-width: 1.5px;
    padding: 12px 30px;
    transition: background .18s, border-color .18s, transform .18s;
}
html.enseigne-motoaxxe .modal-btn:hover { transform: translateY(-1px); }

html.enseigne-motoaxxe .modal-btn--cancel {
    background: var(--ma-surface);
    color: var(--ma-ink-2);
    border-color: var(--ma-line);
}
html.enseigne-motoaxxe .modal-btn--cancel:hover {
    background: var(--ma-surface);
    color: var(--ma-ink);
    border-color: var(--ma-ink);
}

html.enseigne-motoaxxe .modal-btn--ok {
    background: var(--ma-ink);
    color: #FFFFFF;
    border-color: var(--ma-ink);
}
html.enseigne-motoaxxe .modal-btn--ok:hover { background: #000000; border-color: #000000; }

@keyframes ma-pop {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ─── Accueil ────────────────────────────────────────────────────────── */
html.enseigne-motoaxxe .lobby { padding: 26px 20px 70px; }

html.enseigne-motoaxxe .lobby-heading {
    font-family: var(--ma-display);
    font-stretch: 118%;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ma-ink);
    margin-bottom: 14px;
    animation: ma-rise .6s cubic-bezier(.2,.8,.2,1) both;
}

html.enseigne-motoaxxe .lobby-sub {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--ma-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .22em;
    color: var(--ma-muted);
    margin-bottom: 38px;
    animation: ma-rise .6s cubic-bezier(.2,.8,.2,1) .06s both;
}
html.enseigne-motoaxxe .lobby-sub::before,
html.enseigne-motoaxxe .lobby-sub::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--ma-line);
}

html.enseigne-motoaxxe .lobby-rows { gap: 34px; }

html.enseigne-motoaxxe .lobby-rows-hero {
    border-radius: 20px;
    animation: ma-rise .7s cubic-bezier(.2,.8,.2,1) .1s both;
}

html.enseigne-motoaxxe .lobby-rows-list {
    counter-reset: ma-row;
    gap: 12px;
}

html.enseigne-motoaxxe .lobby-row {
    position: relative;
    gap: 16px;
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-r-lg);
    padding: 17px 22px;
    box-shadow: 0 1px 2px rgba(22,19,15,.03);
    transition: border-color .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
    animation: ma-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
html.enseigne-motoaxxe .lobby-row:nth-child(1) { animation-delay: .14s; }
html.enseigne-motoaxxe .lobby-row:nth-child(2) { animation-delay: .20s; }
html.enseigne-motoaxxe .lobby-row:nth-child(3) { animation-delay: .26s; }
html.enseigne-motoaxxe .lobby-row:nth-child(4) { animation-delay: .32s; }
html.enseigne-motoaxxe .lobby-row:nth-child(5) { animation-delay: .38s; }
html.enseigne-motoaxxe .lobby-row:nth-child(6) { animation-delay: .44s; }

/* Numérotation façon fiche technique */
html.enseigne-motoaxxe .lobby-row::before {
    counter-increment: ma-row;
    content: counter(ma-row, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: var(--ma-mono);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--ma-faint);
    transition: color .25s;
}

/* Liseré d'accent au survol */
html.enseigne-motoaxxe .lobby-row::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--ma-accent);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.2,.8,.2,1);
}

html.enseigne-motoaxxe .lobby-row:hover {
    border-color: #D8D0C3;
    transform: translateX(5px);
    box-shadow: 0 20px 38px -26px rgba(22,19,15,.6);
}
html.enseigne-motoaxxe .lobby-row:hover::after { height: 58%; }
html.enseigne-motoaxxe .lobby-row:hover::before { color: var(--ma-accent); }

html.enseigne-motoaxxe .lobby-row-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    background: var(--ma-ink);
    border-radius: var(--ma-r-md);
    box-shadow: 0 10px 20px -12px rgba(22,19,15,.9);
    transition: background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
html.enseigne-motoaxxe .lobby-row-icon i {
    font-size: 18px;
    color: var(--ma-accent);
    transition: color .25s;
}
html.enseigne-motoaxxe .lobby-row:hover .lobby-row-icon {
    background: var(--ma-accent);
    transform: rotate(-5deg) scale(1.05);
}
html.enseigne-motoaxxe .lobby-row:hover .lobby-row-icon i { color: #FFFFFF; }

html.enseigne-motoaxxe .lobby-row-title {
    font-family: var(--ma-display);
    font-stretch: 112%;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--ma-ink);
    margin-bottom: 4px;
}

html.enseigne-motoaxxe .lobby-row-desc {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ma-muted);
}

html.enseigne-motoaxxe .lobby-row-badge {
    font-family: var(--ma-mono);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .12em;
    padding: 3px 9px;
}

html.enseigne-motoaxxe .lobby-row-arrow { color: var(--ma-faint); font-size: 14px; }
html.enseigne-motoaxxe .lobby-row:hover .lobby-row-arrow {
    color: var(--ma-accent);
    transform: translateX(5px);
}

html.enseigne-motoaxxe .badge-soon {
    font-family: var(--ma-mono);
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .14em;
    background: var(--ma-surface-2);
    border: 1px solid var(--ma-line);
    color: var(--ma-faint);
}

/* ─── Lightbox ───────────────────────────────────────────────────────── */
html.enseigne-motoaxxe .lightbox-backdrop {
    background: rgba(22,19,15,.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html.enseigne-motoaxxe .lightbox-img {
    border-radius: 14px;
    animation: ma-pop .32s cubic-bezier(.2,.9,.25,1) both;
}
html.enseigne-motoaxxe .lightbox-close {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
}
html.enseigne-motoaxxe .lightbox-close:hover {
    background: var(--ma-accent);
    border-color: var(--ma-accent);
}

/* ─── Pied de page ───────────────────────────────────────────────────── */
html.enseigne-motoaxxe .site-footer {
    font-family: var(--ma-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--ma-faint);
    border-top: 1px solid var(--ma-line);
    padding: 22px 20px;
}
html.enseigne-motoaxxe .site-footer-brand { color: var(--ma-ink-2); font-weight: 500; }

@keyframes ma-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    html.enseigne-motoaxxe .panel { margin-bottom: 0; }
}

@media (max-width: 760px) {
    html.enseigne-motoaxxe .lobby-rows-hero { box-shadow: 0 24px 46px -28px rgba(22,19,15,.55); }
    html.enseigne-motoaxxe .lobby-row::before { display: none; }
}

@media (max-width: 560px) {
    /* Pas de sticky sur petit écran (topbar sur 2 lignes), mais on garde
       "relative" : le filet orange ::after est en position absolue. */
    html.enseigne-motoaxxe .topbar { position: relative; margin-bottom: 24px; }
    html.enseigne-motoaxxe body { background-attachment: scroll; }
    html.enseigne-motoaxxe .panel { padding: 20px; border-radius: 14px; }
    html.enseigne-motoaxxe .preview-area { padding: 16px; }
    html.enseigne-motoaxxe .lobby-heading { letter-spacing: -.01em; }
    html.enseigne-motoaxxe .lobby-sub { letter-spacing: .16em; }
    html.enseigne-motoaxxe .lobby-sub::before,
    html.enseigne-motoaxxe .lobby-sub::after { width: 20px; }
    html.enseigne-motoaxxe .lobby-row:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.enseigne-motoaxxe .lobby-heading,
    html.enseigne-motoaxxe .lobby-sub,
    html.enseigne-motoaxxe .lobby-rows-hero,
    html.enseigne-motoaxxe .lobby-row,
    html.enseigne-motoaxxe .modal,
    html.enseigne-motoaxxe .lightbox-img { animation: none; }

    html.enseigne-motoaxxe .lobby-row:hover,
    html.enseigne-motoaxxe .lobby-row:hover .lobby-row-icon,
    html.enseigne-motoaxxe .btnDl:hover,
    html.enseigne-motoaxxe .btnDlAll:hover,
    html.enseigne-motoaxxe .btnNotify:hover,
    html.enseigne-motoaxxe .modal-btn:hover { transform: none; }
}