/**
 * Theme Name: Rey Child
 * Theme URI: http://reytheme.com/
 * Description: This is a child theme of Rey.
 * Author: Marius H.
 * Author URI:  https://twitter.com/mariushoria
 * Template: rey
 * Version: 1.0.0
 * License: General Public License
 * License URI: http://www.gnu.org/licenses/gpl.html
 * Text Domain: rey-child
 */

:root {

    --blue-50: #191919;
    --blue-55: #0f3c96;
    --blue-60: #d9edec;
    --blue-gradient: linear-gradient(90deg, var(--blue-55), var(--blue-50));
    --bt-gold: #AF9871;
    --bt-gold-55: #d7cbb8;

    --color-danger: #be3900;
    --color-light-danger: #ffe9df;
    --color-warning: #894b00;
    --color-light-warning: #fefce8;
    
    --color-sucess: #008236;
    --color-light-sucess: #f0fdf4;
    --color-violet: #e9e9f8;
    --color-light-violet: #fcfcfe;
    
    --muted: #949494; 
    --var--beige-on-bg: #f7f5f1;
    --var-bg: #faf9f5;

    --blackgrey: #191919;
    --black: #000000;
    --transparent: transparent;
    --color-white: #FFFFFF;
    --color-transparent: transparent;

    --error: #660100;
    --success: #226600;
    --main-container: 1328px;
    --main-container-padding: 16px;
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 32px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 40px;
    --shadow-100: 0px 0px 8px 2px rgba(0, 0, 0, .10);
    --shadow-200: 0px 0px 16px 4px rgba(0, 0, 0, .10);
    --shadow-300: 0px 0px 32px 8px rgba(0, 0, 0, .10);
    --shadow-400: 0px 0px 40px 16px rgba(0, 0, 0, .10);
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 32px;
    --radius-xl: 48px

    /* === BUTTON STYLES === */
    --btn-padding-sm: 0.5rem 1rem;
    --btn-padding-md: 0.75rem 1.5rem;
    --btn-padding-lg: 1rem 2rem;
    
    --btn-radius-sm: 0.25rem;
    --btn-radius-md: 0.5rem;
    --btn-radius-lg: 0.75rem;
    --btn-radius-full: 9999px;
    
    --btn-font-size-sm: 0.875rem;
    --btn-font-size-md: 1rem;
    --btn-font-size-lg: 1.125rem;
    
    --btn-transition: all 0.2s ease-in-out;

    /* Bouton + icône : taille icône 18px, espace texte–icône 10px */
    --btn-icon-size: 18px;
    --btn-icon-gap: 10px;

    --icon-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1231 20.2782C12.9654 20.0275 13.209 19.5567 13.3643 19.3319C14.3362 17.9196 16.3554 16.5261 17.6003 15.355C18.4298 14.5759 19.2476 13.7438 19.7806 12.7246C16.9507 12.9199 14.0868 12.8835 11.2428 12.9741C9.05189 13.0447 6.77624 13.3778 4.5759 13.3389C4.20761 13.3319 2.76974 13.2307 2.58501 13.0471C1.98492 12.4492 2.99919 12.2738 3.43808 12.2267C5.18423 12.0396 7.17277 11.9372 8.9401 11.8266C12.5477 11.6006 16.1718 11.61 19.7818 11.4394C19.224 10.5331 18.6792 9.61038 18.0368 8.75945C17.3555 7.85791 16.4989 7.08936 15.8082 6.24078C15.3811 5.71587 14.3221 4.47654 14.5398 3.82569C14.9246 3.26311 15.394 3.8916 15.68 4.18819C17.7932 6.37966 19.1617 8.17921 20.8843 10.6614C21.202 11.1192 21.7044 11.2734 21.5809 12.0125C20.5489 13.5567 19.6453 14.889 18.311 16.193C17.2143 17.2652 15.8294 18.6611 14.7104 19.6509C14.4692 19.8639 13.3937 20.7078 13.1255 20.2806L13.1231 20.2782Z' fill='%23ff4920'/%3E%3C/svg%3E");

    
    /* ===== ESPACEMENT ===== */
    --spacing-px: 1px;
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    --spacing-32: 8rem;     /* 128px */
    --spacing-40: 10rem;    /* 160px */
    --spacing-48: 12rem;    /* 192px */
    --spacing-56: 14rem;    /* 224px */
    --spacing-64: 16rem;    /* 256px */
    --spacing-72: 18rem;    /* 288px */
    --spacing-80: 20rem;    /* 320px */
    --spacing-96: 24rem;    /* 384px */
    
    /* ===== BORDURES & RAYONS ===== */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    
    --border-radius-none: 0;
    --border-radius-sm: 0.125rem;   /* 2px */
    --border-radius-base: 0.25rem;  /* 4px */
    --border-radius-md: 0.375rem;   /* 6px */
    --border-radius-lg: 0.5rem;     /* 8px */
    --border-radius-xl: 0.75rem;    /* 12px */
    --border-radius-2xl: 1rem;      /* 16px */
    --border-radius-3xl: 1.5rem;    /* 24px */
    --border-radius-full: 9999px;
    
    /* ===== TRANSITIONS ===== */
    --transition-none: none;
    --transition-all: all 150ms ease-in-out;
    --transition-fast: all 100ms ease-in-out;
    --transition-normal: all 200ms ease-in-out;
    --transition-slow: all 300ms ease-in-out;
    
    /* ===== Z-INDEX ===== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ===== LAYOUT ===== */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-4);
    --header-height: 60px;
    --footer-height: 200px;
    --sidebar-width: 250px;
    
    /* ===== RESPONSIVE BREAKPOINTS ===== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* ===== FORMULAIRES ===== */
    --input-padding: 0.5rem 0.75rem;
    --input-border: 1px solid var(--gray-300);
    --input-border-radius: var(--border-radius-base);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: 0 0 0 3px rgba(205, 29, 50, 0.1);
    --input-bg: var(--color-white);
    --input-placeholder-color: var(--gray-400);
    
    /* ===== ANIMATIONS ===== */
    --animation-spin: spin 1s linear infinite;
    --animation-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animation-bounce: bounce 1s infinite;

    /* ===== TRANSFORMS ===== */
    --translate-y-0: 0;
    --translate-y-1: 0.25rem;
    --translate-y-2: 0.5rem;
    --translate-y-3: 0.75rem;
    --translate-y-4: 1rem;
    --translate-y-5: 1.25rem;
    --translate-y-6: 1.5rem;
    --translate-y-8: 2rem;
    --translate-y-10: 2.5rem;
    --translate-y-12: 3rem;


    /* ===== EASINGS ===== */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== SPACING PIXELS ===== */
    --spacing-px-10: 10px;
    --spacing-px-20: 20px;
    --spacing-px-30: 30px;
    --spacing-px-40: 40px;
    --spacing-px-50: 50px;
    --spacing-px-60: 60px;
    --spacing-px-70: 70px;
    --spacing-px-80: 80px;
    --spacing-px-90: 90px;
    --spacing-px-100: 100px;
    --spacing-px-120: 120px;
    --spacing-px-140: 140px;
    --spacing-px-160: 160px;
    --spacing-px-180: 180px;
    --spacing-px-200: 200px;

    /* ===== SOFT SHADOWS ===== */
    --shadow-soft-xs: 0 2px 4px rgba(0, 0, 0, 0.02),
                      0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-soft-sm: 0 4px 8px rgba(0, 0, 0, 0.04),
                      0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 8px 16px rgba(0, 0, 0, 0.06),
                  0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-soft-md: 0 12px 24px rgba(0, 0, 0, 0.08),
                     0 6px 12px rgba(0, 0, 0, 0.16);
    --shadow-soft-lg: 0 16px 32px rgba(0, 0, 0, 0.10),
                     0 8px 16px rgba(0, 0, 0, 0.20);
    --shadow-soft-xl: 0 20px 40px rgba(0, 0, 0, 0.12),
                     0 10px 20px rgba(0, 0, 0, 0.24);
    --shadow-soft-2xl: 0 24px 48px rgba(0, 0, 0, 0.14),
                      0 12px 24px rgba(0, 0, 0, 0.28);
    --shadow-soft-3xl: 0 32px 64px rgba(0, 0, 0, 0.16),
                      0 16px 32px rgba(0, 0, 0, 0.32);
    
    /* ===== SHADOW TRANSITIONS ===== */
    --shadow-transition: box-shadow 0.3s ease-in-out;

    /* === Responsive Margin Classes === */

    /* Container width variants */
    --container-width-full: 100%;
    --container-width-90: 90%;
    --container-width-85: 85%;
    --container-width-80: 80%;
    --container-width-75: 75%;
    --container-width-70: 70%;
    --container-width-65: 65%;
    --container-width-60: 60%;
    --container-width-50: 50%;

    /* Margin sizes for mobile */
    --margin-mobile-xs: 10px;
    --margin-mobile-sm: 15px;
    --margin-mobile-md: 20px;
    --margin-mobile-lg: 25px;
    --margin-mobile-xl: 30px;

    /* ===== SHAPE CUT — point unique, modifiable ici ===== */
    --btn-cut: 12px;
    --shape-path:      polygon(var(--btn-cut) 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%, 0 var(--btn-cut));
    --shape-path-flip: polygon(0 0, calc(100% - var(--btn-cut)) 0, 100% var(--btn-cut), 100% 100%, var(--btn-cut) 100%, 0 calc(100% - var(--btn-cut)));

    /* ===== SHAPE CUT — variantes de taille ===== */
    --shape-path-xs:      polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    --shape-path-flip-xs: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));

    --shape-path-sm:      polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    --shape-path-flip-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));

    --shape-path-md:      polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    --shape-path-flip-md: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));

    --shape-path-lg:      polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    --shape-path-flip-lg: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));

    --shape-path-xl:      polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
    --shape-path-flip-xl: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.gallery-invert img {
    filter: invert(1);
}

.gallery-white img {
    filter: brightness(0) invert(1) contrast(1000%);
}

.gallery-black img {
    filter: invert(0) brightness(0%);
}
/* Utility background gradients */
.blue-gradient {
    background-color: var(--blue-50);
    background-image: var(--blue-gradient);
}

.orange-gradient {
    background-color: var(--orange-50);
    background-image: var(--orange-gradient);
}
.yellow-gradient {
    background-color: var(--yellow-50);
    background-image: var(--yellow-gradient);
}

/* =========================================================
   CONTAINER MARGIN UTILITIES
   Usage: .container-margin-{50|60|65|70|75|80|85|90}
   ========================================================= */

/* Base: centrage commun à toutes les variantes */
[class*="container-margin"] {
    --_cw: var(--container-width-70); /* défaut 70% */
    width: var(--_cw) !important;
    margin-inline: auto !important;
}

/* Variantes de largeur */
.container-margin-50  { --_cw: var(--container-width-50); }
.container-margin-60  { --_cw: var(--container-width-60); }
.container-margin-65  { --_cw: var(--container-width-65); }
.container-margin-70  { --_cw: var(--container-width-70); }
.container-margin-75  { --_cw: var(--container-width-75); }
.container-margin-80  { --_cw: var(--container-width-80); }
.container-margin-85  { --_cw: var(--container-width-85); }
.container-margin-90  { --_cw: var(--container-width-90); }

/* Desktop-only: n'applique la largeur que sur grand écran */
@media (min-width: 1025px) {
    .container-margin-desktop    { --_cw: var(--container-width-70); }
    .container-margin-desktop-60 { --_cw: var(--container-width-60); }
    .container-margin-desktop-70 { --_cw: var(--container-width-70); }
    .container-margin-desktop-80 { --_cw: var(--container-width-80); }
    .container-margin-desktop-90 { --_cw: var(--container-width-90); }
}

/* Tablet: toutes les variantes → 85% */
@media (max-width: 1024px) {
    [class*="container-margin"] { --_cw: 85%; }
    /* -desktop: reset complet sur tablette */
    [class*="container-margin-desktop"] {
        --_cw: 100%;
        margin-inline: 0 !important;
    }
}

/* Mobile: marge fixe par défaut (md) */
@media (max-width: 767px) {
    [class*="container-margin"] {
        --_cm: var(--margin-mobile-md);
        width: calc(100% - var(--_cm) * 2) !important;
        margin-inline: var(--_cm) !important;
    }
    /* Variantes mobile */
    .container-margin-mobile-xs { --_cm: var(--margin-mobile-xs); }
    .container-margin-mobile-sm { --_cm: var(--margin-mobile-sm); }
    .container-margin-mobile-md { --_cm: var(--margin-mobile-md); }
    .container-margin-mobile-lg { --_cm: var(--margin-mobile-lg); }
    .container-margin-mobile-xl { --_cm: var(--margin-mobile-xl); }

    /* -desktop: reset complet sur mobile */
    [class*="container-margin-desktop"] {
        width: 100% !important;
        margin-inline: 0 !important;
    }
    /* Utilitaire: annuler toute marge */
    .no-margin-mobile {
        width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
}

/* =========================================================
   LBA SECTION CLIPPED SHAPE
   Effet de "séparateur" type Elementor, sans couleur propre.
   Appliquer un background sur le parent / la section.
   ========================================================= */

.lba {
    /* Largeur du biseau (valeur par défaut) */
    --wide: 40px;

    width: 100%;
    padding-block: calc(var(--wide) + 40px);

    -webkit-clip-path: polygon(
        0 var(--wide),
        100% 0,
        100% calc(100% - var(--wide)),
        0 100%
    );
    clip-path: polygon(
        0 var(--wide),
        100% 0,
        100% calc(100% - var(--wide)),
        0 100%
    );
}

/* ===== KEYFRAMES ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* === Selection Styles ===
   Styles for text selection across browsers.
*/
::-moz-selection { /* Code for Firefox */
    color: white;
    background: var(--color-primary);
}
::selection {
    color: white;
    background: var(--color-primary);
}

@property --btn-cut {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

[id^="btn-"],
[class*="btn-"] {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: .525rem 1rem;
    border-radius: 8px!important;
    transition: clip-path .2s ease, filter .2s ease;
}


  @media (prefers-reduced-motion: no-preference) {
    [id^="btn-"]::after,
    [class*="btn-"]::after {
      transition: transform .45s ease;
    }
  }

  /*
  ── B — GLITCH (désactivé) ──
  
  [id^="btn-"]:hover {
    animation: glitch .35s steps(1) forwards;
  }
  @keyframes glitch {
    0%   { filter: none; transform: translate(0); }
    15%  { filter: hue-rotate(90deg) brightness(1.2); transform: translate(-3px, 1px); }
    30%  { filter: invert(.85); transform: translate(3px, -2px); }
    45%  { filter: hue-rotate(200deg); transform: translate(-2px, 2px); }
    60%  { filter: brightness(1.4); transform: translate(2px, -1px); }
    75%  { filter: invert(.5); transform: translate(-1px, 1px); }
    100% { filter: none; transform: translate(0); }
  }
  
  
  ── C — CORNER CRAWL (désactivé) ──
  Nécessite @property --btn-cut déclaré plus haut.
  
  [id^="btn-"] {
    --btn-cut: 0px;
    transition: --btn-cut .22s ease;
  }
  [id^="btn-"]:hover {
    --btn-cut: 14px;
  }
  
  
  ── A+C — COMBO (désactivé) ──
  
  [id^="btn-"] {
    --btn-cut: 0px;
    transition: --btn-cut .22s ease;
  }
  [id^="btn-"]:hover {
    --btn-cut: 14px;
  }
  [id^="btn-"]::after { ... même chose que A }
  */

/* ── Classe utilitaire — applique la forme sur n'importe quel élément ── */
.shape-path      { clip-path: var(--shape-path)!important; }
.shape-path-flip { clip-path: var(--shape-path-flip)!important; }

/* ── Variantes de taille ── */
.shape-path-xs      { clip-path: var(--shape-path-xs); }
.shape-path-flip-xs { clip-path: var(--shape-path-flip-xs); }

.shape-path-sm      { clip-path: var(--shape-path-sm); }
.shape-path-flip-sm { clip-path: var(--shape-path-flip-sm); }

.shape-path-md      { clip-path: var(--shape-path-md); }
.shape-path-flip-md { clip-path: var(--shape-path-flip-md); }

.shape-path-lg      { clip-path: var(--shape-path-lg); }
.shape-path-flip-lg { clip-path: var(--shape-path-flip-lg); }

.shape-path-xl      { clip-path: var(--shape-path-xl); }
.shape-path-flip-xl { clip-path: var(--shape-path-flip-xl); }

/* ── Variantes ::before — pour background-image Elementor (lazy-load compatible) ──
   Le JS (shape-bg.js) transfère le background-image vers --shape-bg-image
   et masque le fond du parent une fois prêt (.shape-bg-ready).
── */
.shape-path-bg,
.shape-path-flip-bg { position: relative; }

/* Masque le fond du parent une fois que le JS a pris le relai */
.shape-path-bg.shape-bg-ready,
.shape-path-flip-bg.shape-bg-ready { background-image: none !important; }

.shape-path-bg::before,
.shape-path-flip-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--shape-bg-image, none);
    background-size: var(--shape-bg-size, cover);
    background-position: var(--shape-bg-pos, center center);
    z-index: 0;
}

.shape-path-bg::before      { clip-path: var(--shape-path); }
.shape-path-flip-bg::before { clip-path: var(--shape-path-flip); }

/* Les enfants passent au-dessus du pseudo-élément */
.shape-path-bg > *,
.shape-path-flip-bg > * { position: relative; z-index: 1; }
/* === Typography Styles ===
   Defines text transformation classes for case styling.
*/
.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}
/* ==========================================================
   PADDING VARIANTS — étendu à tous les conteneurs carousel
   À ajouter à la suite de carousel-clean.css
   ========================================================== */


/* ----------------------------------------------------------
   MOBILE (max 768px) — padding-X et padding-right-X
   Cible : tous sauf contenaire-desktop-only
   ---------------------------------------------------------- */

   @media (max-width: 768px) {

    /* Both sides */
    .contenaire-list.padding-10,
    .contenaire-list-left.padding-10,
    .contenaire-list-both.padding-10,
    .contenaire-mobile-only.padding-10,
    .contenaire-always.padding-10 { padding: var(--spacing-px-10, 10px) var(--spacing-px-20,  20px); }

    .contenaire-list.padding-20,
    .contenaire-list-left.padding-20,
    .contenaire-list-both.padding-20,
    .contenaire-mobile-only.padding-20,
    .contenaire-always.padding-20 { padding: var(--spacing-px-20, 20px) var(--spacing-px-40,  40px); }

    .contenaire-list.padding-30,
    .contenaire-list-left.padding-30,
    .contenaire-list-both.padding-30,
    .contenaire-mobile-only.padding-30,
    .contenaire-always.padding-30 { padding: var(--spacing-px-30, 30px) var(--spacing-px-60,  60px); }

    .contenaire-list.padding-40,
    .contenaire-list-left.padding-40,
    .contenaire-list-both.padding-40,
    .contenaire-mobile-only.padding-40,
    .contenaire-always.padding-40 { padding: var(--spacing-px-40, 40px) var(--spacing-px-80,  80px); }

    .contenaire-list.padding-50,
    .contenaire-list-left.padding-50,
    .contenaire-list-both.padding-50,
    .contenaire-mobile-only.padding-50,
    .contenaire-always.padding-50 { padding: var(--spacing-px-50, 50px) var(--spacing-px-100, 100px); }

    .contenaire-list.padding-60,
    .contenaire-list-left.padding-60,
    .contenaire-list-both.padding-60,
    .contenaire-mobile-only.padding-60,
    .contenaire-always.padding-60 { padding: var(--spacing-px-60, 60px) var(--spacing-px-120, 120px); }

    /* Right only */
    .contenaire-list.padding-right-10,
    .contenaire-list-left.padding-right-10,
    .contenaire-list-both.padding-right-10,
    .contenaire-mobile-only.padding-right-10,
    .contenaire-always.padding-right-10 { padding: 0 var(--spacing-px-20,  20px) var(--spacing-px-10,  10px) 0; }

    .contenaire-list.padding-right-20,
    .contenaire-list-left.padding-right-20,
    .contenaire-list-both.padding-right-20,
    .contenaire-mobile-only.padding-right-20,
    .contenaire-always.padding-right-20 { padding: 0 var(--spacing-px-40,  40px) var(--spacing-px-20,  20px) 0; }

    .contenaire-list.padding-right-30,
    .contenaire-list-left.padding-right-30,
    .contenaire-list-both.padding-right-30,
    .contenaire-mobile-only.padding-right-30,
    .contenaire-always.padding-right-30 { padding: 0 var(--spacing-px-60,  60px) var(--spacing-px-30,  30px) 0; }

    .contenaire-list.padding-right-40,
    .contenaire-list-left.padding-right-40,
    .contenaire-list-both.padding-right-40,
    .contenaire-mobile-only.padding-right-40,
    .contenaire-always.padding-right-40 { padding: 0 var(--spacing-px-80,  80px) var(--spacing-px-40,  40px) 0; }

    .contenaire-list.padding-right-50,
    .contenaire-list-left.padding-right-50,
    .contenaire-list-both.padding-right-50,
    .contenaire-mobile-only.padding-right-50,
    .contenaire-always.padding-right-50 { padding: 0 var(--spacing-px-100, 100px) var(--spacing-px-50,  50px) 0; }

    .contenaire-list.padding-right-60,
    .contenaire-list-left.padding-right-60,
    .contenaire-list-both.padding-right-60,
    .contenaire-mobile-only.padding-right-60,
    .contenaire-always.padding-right-60 { padding: 0 var(--spacing-px-120, 120px) var(--spacing-px-60,  60px) 0; }
}


/* ----------------------------------------------------------
   DESKTOP (min 769px) — padding-X et padding-right-X
   Cible : contenaire-desktop-only uniquement
   ---------------------------------------------------------- */

@media (min-width: 769px) {

    /* Both sides */
    .contenaire-desktop-only.padding-10 { padding: var(--spacing-px-10, 10px) var(--spacing-px-20,  20px); }
    .contenaire-desktop-only.padding-20 { padding: var(--spacing-px-20, 20px) var(--spacing-px-40,  40px); }
    .contenaire-desktop-only.padding-30 { padding: var(--spacing-px-30, 30px) var(--spacing-px-60,  60px); }
    .contenaire-desktop-only.padding-40 { padding: var(--spacing-px-40, 40px) var(--spacing-px-80,  80px); }
    .contenaire-desktop-only.padding-50 { padding: var(--spacing-px-50, 50px) var(--spacing-px-100, 100px); }
    .contenaire-desktop-only.padding-60 { padding: var(--spacing-px-60, 60px) var(--spacing-px-120, 120px); }

    /* Right only */
    .contenaire-desktop-only.padding-right-10 { padding: 0 var(--spacing-px-20,  20px) var(--spacing-px-10,  10px) 0; }
    .contenaire-desktop-only.padding-right-20 { padding: 0 var(--spacing-px-40,  40px) var(--spacing-px-20,  20px) 0; }
    .contenaire-desktop-only.padding-right-30 { padding: 0 var(--spacing-px-60,  60px) var(--spacing-px-30,  30px) 0; }
    .contenaire-desktop-only.padding-right-40 { padding: 0 var(--spacing-px-80,  80px) var(--spacing-px-40,  40px) 0; }
    .contenaire-desktop-only.padding-right-50 { padding: 0 var(--spacing-px-100, 100px) var(--spacing-px-50,  50px) 0; }
    .contenaire-desktop-only.padding-right-60 { padding: 0 var(--spacing-px-120, 120px) var(--spacing-px-60,  60px) 0; }

    /* Reset mobile-only — zero padding sur desktop quoi qu'il arrive */
    .contenaire-mobile-only[class*="padding"] {
        padding: 0;
    }
}

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }

/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* Spacing Utilities */
.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Position */
.pos-relative { position: relative !important; }
.pos-absolute { position: absolute !important; }
.pos-fixed { position: fixed !important; }
.pos-sticky { position: sticky !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-base) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Text Utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Hover Effects */
.hover\:shadow-md:hover { box-shadow: var(--shadow-md) !important; }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg) !important; }

/* Transitions */
.transition-all { transition: var(--transition-all) !important; }
.transition-fast { transition: var(--transition-fast) !important; }
.transition-slow { transition: var(--transition-slow) !important; }

/* Responsive Utilities */
@media (min-width: 640px) {
    .sm\:d-none { display: none !important; }
    .sm\:d-block { display: block !important; }
    .sm\:d-flex { display: flex !important; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (min-width: 768px) {
    .md\:d-none { display: none !important; }
    .md\:d-block { display: block !important; }
    .md\:d-flex { display: flex !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (min-width: 1024px) {
    .lg\:d-none { display: none !important; }
    .lg\:d-block { display: block !important; }
    .lg\:d-flex { display: flex !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Aspect Ratios */
.aspect-square { aspect-ratio: 1 / 1 !important; }
.aspect-video { aspect-ratio: 16 / 9 !important; }
.aspect-portrait { aspect-ratio: 3 / 4 !important; }

/* Object Fit */
.object-cover { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.object-fill { object-fit: fill !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* === Texture Classes === */

/* Opacity variants for texture */

/* === Offset Container Classes === */
body .elementor-element .container-margin-offset,
.elementor .container-margin-offset {
    width: var(--container-width-70) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-90,
.elementor .container-margin-offset-90 {
    width: var(--container-width-90) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-85,
.elementor .container-margin-offset-85 {
    width: var(--container-width-85) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-80,
.elementor .container-margin-offset-80 {
    width: var(--container-width-80) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-75,
.elementor .container-margin-offset-75 {
    width: var(--container-width-75) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-70,
.elementor .container-margin-offset-70 {
    width: var(--container-width-70) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-65,
.elementor .container-margin-offset-65 {
    width: var(--container-width-65) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-60,
.elementor .container-margin-offset-60 {
    width: var(--container-width-60) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .elementor-element .container-margin-offset-50,
.elementor .container-margin-offset-50 {
    width: var(--container-width-50) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tablet Responsive (max-width: 1024px) */
@media (max-width: 1024px) {
    body .elementor-element [class*="container-margin-offset"],
    .elementor [class*="container-margin-offset"] {
        width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Mobile Responsive (max-width: 767px) */
@media (max-width: 767px) {
    body .elementor-element [class*="container-margin-offset"],
    .elementor [class*="container-margin-offset"] {
        width: calc(100% - var(--margin-mobile-md)) !important;
        margin-left: var(--margin-mobile-md) !important;
        margin-right: 0 !important;
    }

    /* Mobile margin variants */
    body .elementor-element .container-margin-offset-mobile-xs,
    .elementor .container-margin-offset-mobile-xs {
        width: calc(100% - var(--margin-mobile-xs)) !important;
        margin-left: var(--margin-mobile-xs) !important;
        margin-right: 0 !important;
    }

    body .elementor-element .container-margin-offset-mobile-sm,
    .elementor .container-margin-offset-mobile-sm {
        width: calc(100% - var(--margin-mobile-sm)) !important;
        margin-left: var(--margin-mobile-sm) !important;
        margin-right: 0 !important;
    }

    body .elementor-element .container-margin-offset-mobile-md,
    .elementor .container-margin-offset-mobile-md {
        width: calc(100% - var(--margin-mobile-md)) !important;
        margin-left: var(--margin-mobile-md) !important;
        margin-right: 0 !important;
    }

    body .elementor-element .container-margin-offset-mobile-lg,
    .elementor .container-margin-offset-mobile-lg {
        width: calc(100% - var(--margin-mobile-lg)) !important;
        margin-left: var(--margin-mobile-lg) !important;
        margin-right: 0 !important;
    }

    body .elementor-element .container-margin-offset-mobile-xl,
    .elementor .container-margin-offset-mobile-xl {
        width: calc(100% - var(--margin-mobile-xl)) !important;
        margin-left: var(--margin-mobile-xl) !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   MOBILE-ONLY SINGLE-SIDE MARGIN UTILITIES
   Applique uniquement un margin-left OU margin-right sur mobile.
   Aucun effet sur desktop/tablette. Ne touche pas à la width.
   Usage : mobile-ml-md  /  mobile-mr-md
   ========================================================= */
@media (max-width: 767px) {
    body .elementor-element .mobile-ml-xs, .elementor .mobile-ml-xs { margin-left: var(--margin-mobile-xs) !important; }
    body .elementor-element .mobile-ml-sm, .elementor .mobile-ml-sm { margin-left: var(--margin-mobile-sm) !important; }
    body .elementor-element .mobile-ml-md, .elementor .mobile-ml-md { margin-left: var(--margin-mobile-md) !important; }
    body .elementor-element .mobile-ml-lg, .elementor .mobile-ml-lg { margin-left: var(--margin-mobile-lg) !important; }
    body .elementor-element .mobile-ml-xl, .elementor .mobile-ml-xl { margin-left: var(--margin-mobile-xl) !important; }

    body .elementor-element .mobile-mr-xs, .elementor .mobile-mr-xs { margin-right: var(--margin-mobile-xs) !important; }
    body .elementor-element .mobile-mr-sm, .elementor .mobile-mr-sm { margin-right: var(--margin-mobile-sm) !important; }
    body .elementor-element .mobile-mr-md, .elementor .mobile-mr-md { margin-right: var(--margin-mobile-md) !important; }
    body .elementor-element .mobile-mr-lg, .elementor .mobile-mr-lg { margin-right: var(--margin-mobile-lg) !important; }
    body .elementor-element .mobile-mr-xl, .elementor .mobile-mr-xl { margin-right: var(--margin-mobile-xl) !important; }
}


.sj-summary__ai {
    --borderWidth: 2px;
    position: relative;
    margin: 4px 4px 16px 4px; /* espace en bas */
    background: var(--blue-50);
    border-radius: 8px;
  }
  
  .sj-summary__ai:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    width: calc(100% + var(--borderWidth) * 2);
    height: calc(100% + var(--borderWidth) * 2);
    border-radius: calc(8px + var(--borderWidth));
  
    background: linear-gradient(
      60deg,
      #f79533,
      #f37055,
      #ef4e7b,
      #a166ab,
      #5073b8,
      #1098ad,
      #07b39b,
      #6fba82
    );
    background-size: 300% 300%;
    animation: animatedgradient 3s ease alternate infinite;
  
    /* creuse le centre pour garder seulement la bordure */
    padding: var(--borderWidth);
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  
  @keyframes animatedgradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  
/* ════════════════════════════════════════════════════════════════════
   #BTN — Système de boutons unifié
   ════════════════════════════════════════════════════════════════════

   Couleurs : white · black · grey · blue · gold
   Familles :
     1. solid       — fond plein, bordure assortie
     2. overline    — bordure 1px tout autour (clip-path + flip hover)
     3. underline   — ligne 1px juste en bas, pas de padding latéral
     4. transparent — aucune bordure visible, fond transparent

   Base commune sur [id^="btn-"] :
     clip-path, padding, position, overflow, sweep-scanner ::after
   ════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   1. SOLID — fond plein
   Couleurs : white · black · grey · blue · gold · beige · glass
   ────────────────────────────────────────────────────────────────── */

#btn-white, .btn-white { color: var(--black); background-color: var(--color-white); border: 1px solid var(--color-white); }
#btn-white:hover, .btn-white:hover { opacity: 0.92; }

#btn-black, .btn-black { color: var(--color-white); background-color: var(--black); border: 1px solid var(--black); }
#btn-black:hover, .btn-black:hover { opacity: 0.92; }

/* grey = alias de blackgrey — les deux noms sont valides */
#btn-grey, .btn-grey,
#btn-blackgrey, .btn-blackgrey { color: var(--color-white); background-color: var(--blackgrey); border: 1px solid var(--blackgrey); }
#btn-grey:hover, .btn-grey:hover,
#btn-blackgrey:hover, .btn-blackgrey:hover { opacity: 0.92; }

#btn-blue, .btn-blue { color: var(--color-white); background-color: var(--blue-50); border: 1px solid var(--blue-50); }
#btn-blue:hover, .btn-blue:hover { opacity: 0.92; }

/* Gold : clip-path flip au hover (cohérent avec overline-gold) */
#btn-gold, .btn-gold {
    color: var(--color-white);
    background-color: var(--bt-gold);
    border: none;
    box-shadow: inset 0 0 0 1px var(--bt-gold);
}
#btn-gold:hover, .btn-gold:hover { filter: invert(.9); clip-path: var(--shape-path-flip); }

/* Beige : dégradé subtil en ::before */
#btn-beige, .btn-beige {
    color: var(--blue-50);
    background-color: var(--beige-on-bg);
    position: relative;
    isolation: isolate;
}
#btn-beige::before, .btn-beige::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#f8f8f800 35%, #c5c5c5);
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}
#btn-gradient, .btn-gradient {
    background-color: rgb(243, 242, 245);
    background-image:
      radial-gradient(97.06% 130.36% at 97.06% 96.67%,
        rgb(210, 220, 240) 0%,
        rgba(210, 220, 240, 0.85) 11.56%,
        rgba(243, 242, 245, 0) 100%
      ),
      radial-gradient(31.68% 50% at 80.93% 100%,
        rgba(190, 210, 255, 0.2) 0%,
        rgba(190, 210, 255, 0) 100%
      ),
      radial-gradient(51.08% 50% at 63.71% 100%,
        rgba(220, 228, 245, 0.74) 0%,
        rgb(205, 218, 242) 0.01%,
        rgba(243, 242, 245, 0) 100%
      );
}

/* Glass : glassmorphism */
#btn-glass, .btn-glass {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
#btn-glass-white, .btn-glass-white {
    background: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: white;
    fill: white;
}
#btn-glass-black, .btn-glass-black {
    background: rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: white;
    fill: white;
}

[id^="btn-glass"].sm, [class*="btn-glass"].sm           { padding: var(--btn-padding-sm); font-size: var(--btn-font-size-sm); }
[id^="btn-glass"].lg, [class*="btn-glass"].lg           { padding: var(--btn-padding-lg); font-size: var(--btn-font-size-lg); }
[id^="btn-glass"].rounded, [class*="btn-glass"].rounded { border-radius: var(--btn-radius-full); }
[id^="btn-glass"]:disabled, [class*="btn-glass"]:disabled { opacity: 0.6; cursor: not-allowed; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
[id^="btn-glass"]:active, [class*="btn-glass"]:active   { transform: translateY(1px); box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1); }


/* ──────────────────────────────────────────────────────────────────
   2. OVERLINE (btol-*) — bordure 1px tout autour, clip-path + flip au hover
   Couleurs : white · black · grey · blue · gold · transparent
   ────────────────────────────────────────────────────────────────── */

/* Catchall : clip-path + inset border (box-shadow), pas de padding */
[id^="btol-"],
[class*="btol-"],
.elementor-button[id^="btol-"],
.elementor-button[class*="btol-"] {
    border-radius: 6px !important;
    border: 1px solid currentColor !important;
    background-color: transparent !important;
    background: transparent !important;
    transition: clip-path .2s ease, filter .2s ease;
}
[id^="btol-"]:hover,
[class*="btol-"]:hover {
    filter: invert(.9);
}

#btol-white,       .btol-white       { color: var(--color-white) !important; }
#btol-black,       .btol-black       { color: var(--black) !important; }
#btol-grey,        .btol-grey        { color: var(--blackgrey) !important; }
#btol-blue,        .btol-blue        { color: var(--blue-50) !important; }
#btol-gold,        .btol-gold        { color: var(--bt-gold) !important; }
#btol-transparent, .btol-transparent { color: currentColor !important; }

/* Overline simple — sans clip-path, bordure CSS classique */
#btol, .btol { color: var(--black); background-color: transparent; border: 1px solid var(--black); }
#btol:hover, .btol:hover { opacity: 0.88; }


/* ──────────────────────────────────────────────────────────────────
   3. UNDERLINE (btul-*) — ligne 1px juste en bas, pas de padding latéral
   Couleurs : white · black · grey · blue · gold · transparent
   ────────────────────────────────────────────────────────────────── */

/* Catchall underline : pas de padding, bordure bottom = currentColor */
[id^="btul-"],
[class*="btul-"],
.elementor-button[id^="btul-"],
.elementor-button[class*="btul-"] {
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid currentColor !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
}
[id^="btul-"]:hover,
[class*="btul-"]:hover { opacity: 0.88; }

#btul-white,       .btul-white       { color: var(--color-white) !important; }
#btul-black,       .btul-black       { color: var(--black) !important; }
#btul-grey,        .btul-grey        { color: var(--blackgrey) !important; }
#btul-blue,        .btul-blue        { color: var(--blue-50) !important; }
#btul-gold,        .btul-gold        { color: var(--bt-gold) !important; }
#btul-transparent, .btul-transparent { color: currentColor !important; }

/* Combo underline + overline (bordures haut + bas sur fond plein) */
#btulol-blue, .btulol-blue {
    color: var(--color-white) !important;
    background-color: var(--blue-50) !important;
    border: none !important;
    border-top: 1px solid var(--color-white) !important;
    border-bottom: 1px solid var(--color-white) !important;
}
#btulol-blue:hover, .btulol-blue:hover { opacity: 0.92; }


/* ──────────────────────────────────────────────────────────────────
   4. TRANSPARENT (bttr-*) — aucune bordure visible, fond transparent
   Couleurs : white · black · grey · blue · gold
   ────────────────────────────────────────────────────────────────── */

/* Catchall : pas de padding, pas de bordure visible */
[id^="bttr-"],
[class*="bttr-"],
.elementor-button[id^="bttr-"],
.elementor-button[class*="bttr-"] {
    padding: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}
[id^="bttr-"]:hover,
[class*="bttr-"]:hover { opacity: 0.88; }

#bttr-white, .bttr-white { color: var(--color-white) !important; }
#bttr-black, .bttr-black { color: var(--black) !important; }
#bttr-grey,  .bttr-grey  { color: var(--blackgrey) !important; }
#bttr-blue,  .bttr-blue  { color: var(--blue-50) !important; }
#bttr-gold,  .bttr-gold  { color: var(--bt-gold) !important; }