/*
  Theme Name: louyet-mini
  Theme URI: http://localhost:8888/louyet.mini
  Version: 1.0.0
  Template: Divi
  Author: designer@arpeggio.be
  Author URI: https://www.arpeggio.be/fr
  Description: designed with flow by Arpeggio
  Text Domain: louyet-mini
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/*
  Child theme shared CSS (Arpeggio)
*/

/* =========================================================
   Arpeggio - REFACTO v2 
   1. Variables
   2. Fonts
   3. Base / Scope front-end
   4. Typography
   5. Components
   6. Utilities
   7. Responsive + Compatibility
   8. Legacy / Archive
   ========================================================= */


/* =========================================
   1) VARIABLES (Design tokens)
   - Typo scale
   - Weights
   - Spacing
   ========================================= */

:root{
  /* Headings */
  --fs-h1: clamp(2.1875rem, 1.5rem + 1.5vw, 3rem);
  --fs-h2: clamp(2rem, 1.7rem + 0.9vw, 2.1875rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;

  /* Body */
  --fs-body: clamp(16px, 15.5px + 0.3vw, 18px);
  --fs-body-small: 0.875rem; /* fallback desktop */
  --fs-body-large: 1.0625rem;/* fallback desktop */
  --fs-small: 0.8125rem;     /* fallback desktop */

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* Weights (numeric for font-weight usage) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

    /* Display scale (text & headings) */
  --arp-fz-small-scale: 0.9;
  --arp-fz-large-scale: 1.15;
  --arp-fz-x-large-scale: 1.35;

  /* Layout */
  --arp-gap: 24px;
  --arp-vertical-gap-stack: 24px;
}



/* =========================================
   2) FONTS (brand-agnostic)
   - Put your font files in: /fonts/
   ========================================= */

/* MINISerif — Headline */
@font-face{
  font-family: 'MINISerif-Headline';
  src:
    url('fonts/MINISerif-Headline.woff2') format('woff2'),
    url('fonts/MINISerif-Headline.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* MINISerif — Regular (family principale) */
@font-face{
  font-family: 'MINISerif';
  src:
    url('fonts/MINISerif-Regular.woff2') format('woff2'),
    url('fonts/MINISerif-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Alias conservé (pour compat avec ton CSS existant) */
@font-face{
  font-family: 'MINISerif-Regular';
  src:
    url('fonts/MINISerif-Regular.woff2') format('woff2'),
    url('fonts/MINISerif-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* MINISerif — Bold (family principale) */
@font-face{
  font-family: 'MINISerif';
  src:
    url('fonts/MINISerif-Bold.woff2') format('woff2'),
    url('fonts/MINISerif-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Alias conservé (pour compat avec ton CSS existant) */
@font-face{
  font-family: 'MINISerif-Bold';
  src:
    url('fonts/MINISerif-Bold.woff2') format('woff2'),
    url('fonts/MINISerif-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* MINISerif — Italic (family séparée conservée pour compat avec ton helper) */
@font-face{
  font-family:'MINISerif-Italic';
  src:
    url('fonts/MINISerif-Italic.woff2') format('woff2'),
    url('fonts/MINISerif-Italic.woff') format('woff');
  font-weight:400;
  font-style:normal; /* le fichier est déjà italique */
  font-display:swap;
}

/* MINISansSerif — Regular */
@font-face{
  font-family: 'MINISansSerif';
  src:
    url('fonts/MINISansSerif-Regular.woff2') format('woff2'),
    url('fonts/MINISansSerif-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* MINISansSerif — Bold */
@font-face{
  font-family: 'MINISansSerif';
  src:
    url('fonts/MINISansSerif-Bold.woff2') format('woff2'),
    url('fonts/MINISansSerif-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================
   3) BASE / SCOPE FRONT-END
   ========================================= */


/* =========================================
   3) Apply font FRONT-END only
   - NOT wp-admin
   - NOT Divi Visual Builder / Theme Builder UI
   Notes:
   - Divi builder often adds body classes: et-fb, et-db, et-bfb
   - We scope to the public front-end only.
   ========================================= */

body:not(.wp-admin):not(.et-fb):not(.et-db):not(.et-bfb) #page-container,
body:not(.wp-admin):not(.et-fb):not(.et-db):not(.et-bfb) #main-content,
body:not(.wp-admin):not(.et-fb):not(.et-db):not(.et-bfb) .et_pb_text,
body:not(.wp-admin):not(.et-fb):not(.et-db):not(.et-bfb) .et_pb_blurb,
body:not(.wp-admin):not(.et-fb):not(.et-db):not(.et-bfb) .et_pb_button {
  font-family: 'MINISerif', 'Georgia', serif !important;
}

/* =========================================
   4) TYPOGRAPHY
   ========================================= */
/* Base body (front-end only again to avoid builder/admin) */
body.et_divi_theme:not(.et-fb):not(.et-db):not(.et-bfb),
.et_divi_theme body:not(.et-fb):not(.et-db):not(.et-bfb) {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--weight-light);
  font-family: 'MINISansSerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Global headings (Divi/WordPress) */
h1, h1.entry-title, .et_pb_text h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-family: 'MINISerif-Headline', 'Georgia', serif;}
h2, .et_pb_text h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); text-transform: uppercase; font-family: 'MINISerif-Bold', 'Georgia', serif;}
h3, .et_pb_text h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); text-transform: uppercase; font-family: 'MINISerif-Bold', 'Georgia', serif;}
h4, .et_pb_text h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); text-transform: uppercase; font-family: 'MINISerif-Bold', 'Georgia', serif;}
h5, .et_pb_text h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); text-transform: uppercase; font-family: 'MINISerif-Bold', 'Georgia', serif;}
h6, .et_pb_text h6 { font-size: var(--fs-h6); line-height: 1.3; text-transform: uppercase; font-family: 'MINISerif-Bold', 'Georgia', serif;}
p, .et_pb_text p, .dipi-grid-item-excerpt, .dipi-fg-readmore-button-wrapper, .dipl-team-filterable-categories, .dipl_team_member_designation, .et-menu, .downwards, .sub-menu li a { font-family: 'MINISansSerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;} 

/* Divi module text sizing */
.et_pb_text, .et_pb_blurb, .et_pb_toggle, .et_pb_pricing, .et_pb_cta, .et_pb_post_content {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

/* =========================================
   5) COMPONENTS
   ========================================= */

/* =========================================
   A. HEADER MENU
   ========================================= */


.et_pb_menu.arp-menu-flex-end .et_pb_menu__wrap {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-end;

  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;

  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  opacity: 1;
}


/* Centre verticalement le module icône */
.arp-icon-center{
  height: 100%;
  display: flex;
  align-items: center;
}

/* Sécurise l’alignement interne */
.arp-icon-center a,
.arp-icon-center .et_pb_icon_wrap{
  display: flex;
  align-items: center;
  height: 100%;
}

/* Icône */
.arp-icon-center .et-pb-icon{
  line-height: 1;
}

/* Mets cette classe sur la ROW (Avancé > Classe CSS) : arp-row-gap */
.arp-row-gap{
  display:flex !important;
  gap: var(--arp-col-gap, 50px) !important;  /* contrôle total ici */
}

/* Annule les gouttières/marges Divi sur CETTE row */
.arp-row-gap > .et_pb_column{
  margin-right: 0 !important;
}

/* Si Divi force des largeurs, on les garde mais sans marge parasite */
.arp-row-gap.et_pb_row_3-4_1-4 > .et_pb_column_3_4{ width: calc(75% - (var(--arp-col-gap, 32px) / 2)) !important; }
.arp-row-gap.et_pb_row_3-4_1-4 > .et_pb_column_1_4{ width: calc(25% - (var(--arp-col-gap, 32px) / 2)) !important; }

/* Responsive: stack + gap vertical */


/* Row en flex */
.arp-row-auto{
  display: flex !important;
  align-items: center;
}

/* Colonne MENU → prend tout l’espace restant */
.arp-row-auto > .et_pb_column:first-child{
  flex: 1 1 auto !important;
  width: auto !important;
  margin-right: 0 !important;
}

/* Colonne ICONES → largeur = contenu */
.arp-row-auto > .et_pb_column:last-child{
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap;
}

/* Sécurité : enlève les largeurs Divi (3/4 – 1/4) */
.arp-row-auto.et_pb_row_3-4_1-4 > .et_pb_column_3_4,
.arp-row-auto.et_pb_row_3-4_1-4 > .et_pb_column_1_4{
  width: auto !important;
}



.et_pb_menu .et-menu>li {
    padding-left: 20px;
    padding-right: 20px;
}

/* =========================================
   B. MENU FOOTER Column
   ========================================= */
/* Menu vertical en colonne */
.arp-menu-column .et-menu.nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* alignement à gauche */
    gap: 0.5rem; /* espace entre les liens (ajustable) */
}

/* Chaque item prend toute la largeur */
.arp-menu-column .et-menu.nav > li {
    width: 100%;
}

/* Optionnel : liens alignés à gauche */
.arp-menu-column .et-menu.nav > li > a {
    display: block;
    width: 100%;
    text-align: left;
}

/* =========================================
   C. EFFET COLUMN BLUR
   ========================================= */

/* Glass blur sur ce qu'il y a DERRIÈRE la colonne (section/row background) */
.arp-col-glass{
  position: relative;
  overflow: hidden;              /* coupe le blur aux bords */
  border-radius: 0;              /* adapte si besoin */
  background: rgba(0,0,0,.45);   /* teinte sombre + transparence */
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Optionnel : léger contour pour l'effet glass */
.arp-col-glass{
  border: 0px solid rgba(255,255,255,.12);
}

/* Assure le contenu au-dessus */
.arp-col-glass > *{
  position: relative;
  z-index: 1;
}

/* =========================================
   D. BUTTON — BTN Mini 
   ========================================= */

/* Base (normal + inverse) */
a.et_pb_button.arp-btn-mini,
a.et_pb_button.arp-btn-mini--inverse{
  font-family: 'MINISansSerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 3rem !important; /* doit couvrir la taille au hover */
}

/* Cercle + flèche (base) */
a.et_pb_button.arp-btn-mini::after,
a.et_pb_button.arp-btn-mini--inverse::after{
  content: attr(data-icon) !important;
  font-family: 'ETmodules' !important;

  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translate(0,-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 999px !important;

  font-size: 1rem !important;
  line-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  transform-origin: center center !important;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

/* Couleurs — normal */
a.et_pb_button.arp-btn-mini::after{
  border: 1px solid #000 !important;
  background-color: transparent !important;
  color: #000 !important;
}

/* Hover — normal */
a.et_pb_button.arp-btn-mini:hover::after{
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  transform: translate(0,-50%) scale(1.25) !important;
}

/* Couleurs — inverse */
a.et_pb_button.arp-btn-mini--inverse::after{
  border: 1px solid #fff !important;
  background-color: transparent !important;
  color: #fff !important;
}

/* Hover — inverse */
a.et_pb_button.arp-btn-mini--inverse:hover::after{
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  transform: translate(0,-50%) scale(1.25) !important;
}

/* ===== ARP MINI BUTTON — Slider Divi (inverse par défaut) ===== */

/* Bouton */
.arp-btn-mini--inverse .et_pb_slide .et_pb_button_wrapper a.et_pb_button.et_pb_more_button{
  font-family: 'MINISansSerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-right: 3.5rem !important;
  line-height: 1 !important; /* clé pour le centrage */
}

/* Cercle + flèche */
.arp-btn-mini--inverse .et_pb_slide .et_pb_button_wrapper a.et_pb_button.et_pb_more_button::after{
  content: "$" !important; /* flèche Divi */
  font-family: 'ETmodules' !important;

  position: absolute !important;
  right: 0 !important;
  top: 70% !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 999px !important;

  /* ÉTAT PAR DÉFAUT */
  border: 1px solid #fff !important;
  background-color: transparent !important;
  color: #fff !important;

  font-size: 1rem !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  transform-origin: center center !important;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

/* Hover : fond blanc + flèche noire */
.arp-btn-mini--inverse .et_pb_slide .et_pb_button_wrapper a.et_pb_button.et_pb_more_button:hover::after{
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  transform: translateY(-50%) scale(1.25) !important;
}

/* ===== ARP MINI BUTTON — INLINE LINK ===== */
a.arp-btn-mini-inline{
  font-family: 'MINISansSerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;

  padding-right: 2.9rem !important; /* espace cercle */
  text-decoration: none !important;
}

/* Cercle + flèche (icône appelée ici) */
a.arp-btn-mini-inline::after{
  content: "$";                     /* icône flèche Divi */
  font-family: 'ETmodules' !important;

  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;

  border: 1px solid #000;
  background-color: transparent;

  font-size: 1rem;
  line-height: 1;
  color: #000;

  transform-origin: center center;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

/* Hover */
a.arp-btn-mini-inline:hover::after{
  background-color: #000;
  border-color: #000;
  color: #fff;
  transform: translateY(-50%) scale(1.25);
}

/* ===== Variante inline inverse ===== */
/* <a class="arp-btn-mini-inline arp-btn-mini-inline--inverse" data-icon="$" ...>Texte</a> */
a.arp-btn-mini-inline--inverse::after{
  border-color: #fff;
  color: #fff;
}

a.arp-btn-mini-inline--inverse:hover::after{
  background-color: #fff;
  border-color: #fff;
  color: #000;
}

/* =====================================================
   SYNC HOVER : vignette blog DIPI → bouton .dipi-more-link
   (même logique que les blurbs)
   ===================================================== */

/* Quand on survole toute la vignette, on déclenche l’animation du bouton */
a.dipi-blog-post:hover .et_pb_button.dipi-more-link::after{
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  transform: translateY(-50%) scale(1.35) !important;
}

/* Variante inverse (si tu l’utilises un jour via .is-inverse sur le bouton) */
a.dipi-blog-post:hover .et_pb_button.dipi-more-link.is-inverse::after{
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  transform: translateY(-50%) scale(1.35) !important;
}


/* =====================================================
   SYNC HOVER : BLURB → BOUTON INLINE
   ===================================================== */

/* Quand le blurb est survolé, on déclenche l’animation du bouton */
.et_pb_blurb.et_clickable:hover a.arp-btn-mini-inline::after{
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  transform: translateY(-50%) scale(1.25) !important;
}

/* Variante inverse */
.et_pb_blurb.et_clickable:hover a.arp-btn-mini-inline--inverse::after{
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  transform: translateY(-50%) scale(1.25) !important;
}

/* =====================================================
   FORCE STYLE ARP MINI INLINE SUR BOUTON DIPI
   ===================================================== */

.et_pb_button.dipi-more-link{
  font-family: 'MINISansSerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;

  padding-right: 2.9rem !important; /* espace pour le cercle */
  text-decoration: none !important;
  background: transparent !important;
}

/* Cercle + flèche */
.et_pb_button.dipi-more-link::after{
  content: "$" !important; /* flèche Divi */
  font-family: 'ETmodules' !important;

  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 999px !important;

  border: 1px solid #000 !important;
  background-color: transparent !important;

  font-size: 1rem !important;
  line-height: 1 !important;
  color: #000 !important;

  transform-origin: center center !important;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

/* Hover */
.et_pb_button.dipi-more-link:hover::after{
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  transform: translateY(-50%) scale(1.25) !important;
}

.et_pb_button.dipi-more-link.is-inverse::after{
  border-color: #fff !important;
  color: #fff !important;
}

.et_pb_button.dipi-more-link.is-inverse:hover::after{
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}



/* =====================================================
   CTA ABSOLU DANS LE TEXTE DU BLURB (optionnel)
   ===================================================== */

/* Le conteneur devient la référence */
.arp-blurb-cta-absolute .et_pb_blurb_container{
  position: relative;
}

/* Le bloc description aussi */
.arp-blurb-cta-absolute .et_pb_blurb_description{
  position: relative;
}

/* 2e <p> uniquement (celui avec le lien) */
.arp-blurb-cta-absolute .et_pb_blurb_description p:nth-of-type(2) {
    position: absolute;
    top: -0.75rem;
    right: 1rem;
    margin: 0 !important;
}

/* Sécurité : évite que le texte passe dessous */
.arp-blurb-cta-absolute .et_pb_blurb_description p:first-of-type{
  margin-bottom: 3rem; /* réserve l’espace du bouton */
}



/* =========================================
   E. HEADER Slider
   ========================================= */
.et_pb_slide_description, .et_pb_slider_fullwidth_off .et_pb_slide_description {
    padding: 16% 8%;
    width: auto;
    margin: 0 !important;
}

/* Applique cette classe au module Slider : arp-slider-glass-left */
.arp-slider-glass-left .et_pb_slide{
  position: relative;
  overflow: hidden; /* coupe le blur */
}

/* Zone glass fixe à gauche (1/3) */
.arp-slider-glass-left .et_pb_slide::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:33.3333%;
  height:100%;
  z-index:1;

  background: rgba(0,0,0,.20); /* ajuste l’opacité */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(18px);

/*   border-right: 1px solid rgba(255,255,255,.14); */
}

/* Le contenu au-dessus de la zone */
.arp-slider-glass-left .et_pb_slide .et_pb_container,
.arp-slider-glass-left .et_pb_slide .et_pb_slide_description{
  position: relative;
  z-index: 2;
}

/* Optionnel : place le bloc texte dans le tiers gauche */
.arp-slider-glass-left .et_pb_slide_description{
  max-width: 33.3333%;
  padding-left: 3rem;
  padding-right: 3rem;
}

/* Mobile : zone plus large (optionnel) */


.et-pb-controllers {
    position: absolute;
    bottom: 20px;
    left: 15vw;
    width: 100%;
    text-align: left;
    z-index: 10;
}

.et-pb-controllers a {
    display: inline-block;
    background-color: hsla(0, 0%, 100%, .5);
    text-indent: -9999px;
    border-radius: 100px;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    padding: 0;
    opacity: .5;
}

/* =========================================
   5) Divi Pixel / Dipi (DO NOT rename dp/dipi selectors)
   Only swap font name to keep the brand font consistent.
   ========================================= */

/* Tabs titles */
.dipi-at-tab-title,
.dipi-at-tab-title * {
  font-family: 'MINISerif', 'Inter', 'Helvetica Neue', Arial, sans-serif  !important;
  font-size: var(--fs-h6) !important;
  line-height: var(--lh-snug) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Tabs arrows padding */
.dipi-at-tabs-prev, .dipi-at-tabs-next {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* FAQ */
.dipi-faq-title, .dipi-faq-content {
  font-family: 'MINISerif', 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: -0.01em;
  text-transform: none;
}

.dipi-faq-title  { 
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-snug) !important;
  font-weight: var(--weight-medium) !important;
}

.dipi-faq-content {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-normal) !important;
  font-weight: var(--weight-light) !important;
}

.dipi-faq-icon-closed, .dipi-faq-icon-open{
  right: 0px !important;
}

/* =========================================
   F. BLOG
   ========================================= */

.dipi_blog_slider .dipi-post-content {
    padding: 20px 5px;
    position: relative;
}

.dipi_blog_slider .dipi-bottom-content {
    padding: 0 5px;

}

/* 2) Réordonner : day / month / year */
a.dipi-blog-post > .dipi-date{
  display: flex;
  gap: .4rem;
  align-items: baseline;
}

a.dipi-blog-post .dipi-day{ order: 1; }
a.dipi-blog-post .dipi-month{ order: 2; }
a.dipi-blog-post .dipi-year{ order: 3; }

/* Le conteneur image devient la référence */
.dipi_blog_slider .dipi-entry-featured-image-url{
  position: relative !important;
}

/* Repositionnement TOTAL de la date */
.dipi_blog_slider .dipi-entry-featured-image-url + .dipi-date{
  position: absolute !important;

  /* annule le style imposé */
/*   top: auto !important; */
  right: auto !important;

  /* nouveau positionnement */
/*   bottom: 0 !important; */
  left: 0 !important;

  z-index: 10 !important;

  background: #000 !important;
  color: #fff !important;

  padding: 10px;
  width: auto !important;
  height: auto !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .4rem;
}

.dipi_blog_slider .dipi-date span{
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap;
}


/* =========================================
   G. BLURB
   ========================================= */

/* ====================================================
   ARP - Blurbs final (gap 16px, image ratio utilities,
   equal-height-ready, title margin-top, link bottom)
   Usage:
   - add class "arp-row" on the Row (ex: <div class="et_pb_row ... arp-row">)
   - add class "arp-blurb" on each Blurb module
   - add class "arp-image-fixed" + one ratio class (eg. arp-ratio-16-9) to force image ratio
   ==================================================== */

/* ----------------- Variables ----------------- */


/* ====================================================
   GAP entre colonnes (sans modifier display de la Row)
   On simule le gap en appliquant padding aux colonnes et margins neg sur la row
   ==================================================== */
.arp-row {
  box-sizing: border-box;
  margin-left: calc(-1 * var(--arp-gap) / 2);
  margin-right: calc(-1 * var(--arp-gap) / 2);
}

/* appliquer le demi-gap comme padding sur les colonnes enfants */
.arp-row .et_pb_column {
  box-sizing: border-box;
  padding-left: calc(var(--arp-gap) / 2);
  padding-right: calc(var(--arp-gap) / 2);
}

/* neutraliser le padding par défaut de Divi sur la row si présent (visuel) */
.arp-row.et_pb_row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- GAP VERTICAL sur mobile quand les colonnes s'empilent ---------- */
/* Quand la row passe en stack (Divi < 980px), on ajoute un espace de 24px entre les blurbs */


/* Blurb structure */
.arp-blurb,
.et_pb_module.arp-blurb {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  overflow: hidden;
}

.arp-blurb .et_pb_blurb_content,
.arp-blurb .et_pb_main_blurb {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.arp-blurb .et_pb_blurb_container,
.arp-blurb .et_pb_blurb_description,
.arp-blurb .et_pb_blurb_content_inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.arp-blurb .et_pb_module_header,
.arp-blurb .et_pb_blurb_title {
  margin-top: 8px;
  margin-bottom: 0px;
}

.arp-blurb .et_pb_blurb_description,
.arp-blurb p {
  margin: 0 0 4px 0;
}

.arp-blurb .et_pb_blurb_description p:last-child,
.arp-blurb .et_pb_blurb_description > *:last-child {
  margin-top: auto;
}

.arp-blurb .et_pb_blurb_description a {
  display: inline-block;
}

/* Images */
.arp-blurb .et_pb_main_blurb_image,
.arp-blurb .et_pb_blurb_image {
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
}

.arp-blurb .et_pb_main_blurb_image img,
.arp-blurb .et_pb_blurb_image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Activate ratio behavior only when module has arp-image-fixed */
.arp-blurb.arp-image-fixed .et_pb_main_blurb_image,
.arp-blurb.arp-image-fixed .et_pb_blurb_image {
  position: relative;
}

.arp-blurb.arp-image-fixed .et_pb_main_blurb_image img,
.arp-blurb.arp-image-fixed .et_pb_blurb_image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}





/* Container global du blurb */
.arp-blurb-editorial .et_pb_blurb_container{
  padding-top: 1rem;
}

/* Description */
.arp-blurb-editorial .et_pb_blurb_description{
  position: relative;
  padding-left: 1.25rem;   /* espace pour le trait */
  max-width: 42rem;        /* largeur lisible */
}

/* Trait vertical à gauche */
.arp-blurb-editorial .et_pb_blurb_description::before{
  content:"";
  position:absolute;
  left:0;
  top:0.2em;
  width:1px;
  height:calc(100% - 0.4em);
  background:#a6a6a6;     
}

/* =========================================================
   ARP RATIOS — Blurbs + Image modules (Divi)
   Fix: ne rend plus les images "absolute" par défaut (sinon elles disparaissent)
   ========================================================= */

/* Cibles (wrappers) */
.arp-ratio-16-9 .et_pb_main_blurb_image,
.arp-ratio-16-9 .et_pb_blurb_image,
.arp-ratio-16-9 .et_pb_image_wrap,
.arp-ratio-4-3 .et_pb_main_blurb_image,
.arp-ratio-4-3 .et_pb_blurb_image,
.arp-ratio-4-3 .et_pb_image_wrap,
.arp-ratio-3-2 .et_pb_main_blurb_image,
.arp-ratio-3-2 .et_pb_blurb_image,
.arp-ratio-3-2 .et_pb_image_wrap,
.arp-ratio-1-1 .et_pb_main_blurb_image,
.arp-ratio-1-1 .et_pb_blurb_image,
.arp-ratio-1-1 .et_pb_image_wrap,
.arp-ratio-3-4 .et_pb_main_blurb_image,
.arp-ratio-3-4 .et_pb_blurb_image,
.arp-ratio-3-4 .et_pb_image_wrap{
  position: relative;
  overflow: hidden;
}

/* Images (SCOPÉES uniquement aux wrappers Divi concernés) */
.arp-ratio-16-9 .et_pb_main_blurb_image img,
.arp-ratio-16-9 .et_pb_blurb_image img,
.arp-ratio-16-9 .et_pb_image_wrap > img,
.arp-ratio-4-3 .et_pb_main_blurb_image img,
.arp-ratio-4-3 .et_pb_blurb_image img,
.arp-ratio-4-3 .et_pb_image_wrap > img,
.arp-ratio-3-2 .et_pb_main_blurb_image img,
.arp-ratio-3-2 .et_pb_blurb_image img,
.arp-ratio-3-2 .et_pb_image_wrap > img,
.arp-ratio-1-1 .et_pb_main_blurb_image img,
.arp-ratio-1-1 .et_pb_blurb_image img,
.arp-ratio-1-1 .et_pb_image_wrap > img,
.arp-ratio-3-4 .et_pb_main_blurb_image img,
.arp-ratio-3-4 .et_pb_blurb_image img,
.arp-ratio-3-4 .et_pb_image_wrap > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Ratios via aspect-ratio (navigateurs modernes)
   ========================================================= */
.arp-ratio-16-9 .et_pb_main_blurb_image,
.arp-ratio-16-9 .et_pb_blurb_image,
.arp-ratio-16-9 .et_pb_image_wrap{ aspect-ratio: 16 / 9; }

.arp-ratio-4-3 .et_pb_main_blurb_image,
.arp-ratio-4-3 .et_pb_blurb_image,
.arp-ratio-4-3 .et_pb_image_wrap{ aspect-ratio: 4 / 3; }

.arp-ratio-3-2 .et_pb_main_blurb_image,
.arp-ratio-3-2 .et_pb_blurb_image,
.arp-ratio-3-2 .et_pb_image_wrap{ aspect-ratio: 3 / 2; }

.arp-ratio-1-1 .et_pb_main_blurb_image,
.arp-ratio-1-1 .et_pb_blurb_image,
.arp-ratio-1-1 .et_pb_image_wrap{ aspect-ratio: 1 / 1; }

.arp-ratio-3-4 .et_pb_main_blurb_image,
.arp-ratio-3-4 .et_pb_blurb_image,
.arp-ratio-3-4 .et_pb_image_wrap{ aspect-ratio: 3 / 4; }

/* =========================================================
   Fallback (uniquement si aspect-ratio n'est pas supporté)
   -> padding-top + image en absolute
   ========================================================= */


/* Zoom-in image au hover (cadre reste fixe + overflow hidden) */
.arp-blurb.et_clickable .et_pb_main_blurb_image img,
.arp-blurb.et_clickable .et_pb_image_wrap img{
  transform: scale(1);
  transition: transform 1s ease;
  will-change: transform;
}

/* Hover sur tout le blurb */
.arp-blurb.et_clickable:hover .et_pb_main_blurb_image img,
.arp-blurb.et_clickable:hover .et_pb_image_wrap img{
  transform: scale(1.06);
}


/* =========================================
   ARP BLURB – column reverse
   Image sous le texte + CTA bottom-right
   ========================================= */

/* 1) Inverser l’ordre image / contenu */
.arp-blurb-reverse .et_pb_blurb_content {
  display: flex;
  flex-direction: column;
}

.arp-blurb-reverse .et_pb_blurb_container {
  order: 1;
}

.arp-blurb-reverse .et_pb_main_blurb_image {
  order: 2;
  margin-top: 1rem;
  margin-bottom: 0;
}

/* 2) La zone texte devient la référence du CTA */
.arp-blurb-reverse .et_pb_blurb_container,
.arp-blurb-reverse .et_pb_blurb_description {
  position: relative;
}

.arp-blurb-reverse  .et_pb_blurb_description {
    padding: 20px ;
    padding-bottom: 0px;
}


/* =========================================
   6) UTILITIES
   ========================================= */
/* =========================================
   ARP TEXT – gestion sûre du Bold & Italic via l’éditeur
   Usage : ajouter la classe "arp-text" au module Divi
   ========================================= */

/* ======================
   ITALIC
   ====================== */
#page-container .arp-text-style em,
#page-container .arp-text-style i,
#page-container .arp-text-style em *,
#page-container .arp-text-style i *,
#page-container .arp-text-style [style*="font-style:italic"],
#page-container .arp-text-style [style*="font-style: italic"] {
  font-family: 'MINISerif-Italic', 'MINISerif', 'Georgia', serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-synthesis: none;
}

/* ======================
   BOLD
   ====================== */
#page-container .arp-text-style strong,
#page-container .arp-text-style b,
#page-container .arp-text-style strong *,
#page-container .arp-text-style b *,
#page-container .arp-text-style [style*="font-weight:bold"],
#page-container .arp-text-style [style*="font-weight: bold"],
#page-container .arp-text-style [style*="font-weight:700"],
#page-container .arp-text-style [style*="font-weight: 700"] {
  font-family: 'MINISerif-Bold', 'MINISerif', 'Georgia', serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  font-synthesis: none;
}


/* =========================================
   FONT SIZE – SMALL (text + headings)
   ========================================= */
#page-container .arp-fz-small {
  --arp-fz-scale: var(--arp-fz-small-scale);
}
/* =========================================
   FONT SIZE – LARGE (text + headings)
   ========================================= */
#page-container .arp-fz-large {
  --arp-fz-scale: var(--arp-fz-large-scale);
}
/* =========================================
   FONT SIZE – X-LARGE (text + headings)
   ========================================= */
#page-container .arp-fz-x-large {
  --arp-fz-scale: var(--arp-fz-x-large-scale);
}


/* Text helpers */
.et_pb_text .lead { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem); line-height: var(--lh-snug); }
.et_pb_text small, .et_pb_text .small { font-size: var(--fs-small); color:#4a4a4a; }

/* Links in Divi text */
.et_pb_text a { color:#0a0a0a; text-decoration: underline; text-underline-offset:2px; }
.et_pb_text a:hover { text-decoration-thickness: 2px; }

/* ===== Tablet (≤ 980px) ===== */


/* ===== Phone (≤ 767px) ===== */


/* Divi utility text classes */
.et_pb_text .u-eyebrow { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color:#555; }
.et_pb_text .u-kicker  { font-size: 0.9375rem; font-weight: var(--weight-medium); color:#1a1a1a; }
.et_pb_text .u-muted   { color:#666; }

/* =========================================
   7) RESPONSIVE + COMPATIBILITY
   (blocs @media / @supports extraits et conservés)
   ========================================= */
@media (max-width: 980px) {
  :root {
    --fs-h1: clamp(2.25rem, 2.0rem + 1.0vw, 3.25rem);
    --fs-h2: clamp(1.75rem, 1.6rem + 0.6vw, 2.5rem);
    --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.875rem);
    --fs-h4: 1.25rem;
    --fs-h5: 1.0625rem;
    --fs-h6: 0.9375rem;

    --fs-body: 0.9375rem;
    --fs-body-small: 0.875rem;
    --fs-body-large: 1.0625rem;

    --fs-small: 0.8125rem;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: clamp(1.875rem, 1.7rem + 1.5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 1.4rem + 0.8vw, 2rem);
    --fs-h3: clamp(1.25rem, 1.2rem + 0.6vw, 1.625rem);
    --fs-h4: 1.125rem;
    --fs-h5: 1rem;
    --fs-h6: 0.875rem;

    --fs-body: 0.9375rem;
    --fs-body-small: 0.875rem;
    --fs-body-large: 1.0625rem;

    --fs-small: 0.8125rem;
  }

  .et_pb_text p { margin-bottom: 0.9em; }
}

@media (max-width: 980px) {
  .arp-row .et_pb_column {
    padding-bottom: 24px; /* espace entre les colonnes empilées */
  }

  /* On retire le margin-bottom sur la dernière colonne pour ne pas créer d'espace vide en bas */
  .arp-row .et_pb_column:last-child {
    padding-bottom: 0;
  }
}

@supports not (aspect-ratio: 1 / 1){

  .arp-ratio-16-9 .et_pb_main_blurb_image::before,
  .arp-ratio-16-9 .et_pb_blurb_image::before,
  .arp-ratio-16-9 .et_pb_image_wrap::before{ content:""; display:block; padding-top: calc(9 / 16 * 100%); }

  .arp-ratio-4-3 .et_pb_main_blurb_image::before,
  .arp-ratio-4-3 .et_pb_blurb_image::before,
  .arp-ratio-4-3 .et_pb_image_wrap::before{ content:""; display:block; padding-top: calc(3 / 4 * 100%); }

  .arp-ratio-3-2 .et_pb_main_blurb_image::before,
  .arp-ratio-3-2 .et_pb_blurb_image::before,
  .arp-ratio-3-2 .et_pb_image_wrap::before{ content:""; display:block; padding-top: calc(2 / 3 * 100%); }

  .arp-ratio-1-1 .et_pb_main_blurb_image::before,
  .arp-ratio-1-1 .et_pb_blurb_image::before,
  .arp-ratio-1-1 .et_pb_image_wrap::before{ content:""; display:block; padding-top: 100%; }

  .arp-ratio-3-4 .et_pb_main_blurb_image::before,
  .arp-ratio-3-4 .et_pb_blurb_image::before,
  .arp-ratio-3-4 .et_pb_image_wrap::before{ content:""; display:block; padding-top: calc(4 / 3 * 100%); }

  .arp-ratio-16-9 .et_pb_main_blurb_image img,
  .arp-ratio-16-9 .et_pb_blurb_image img,
  .arp-ratio-16-9 .et_pb_image_wrap > img,
  .arp-ratio-4-3 .et_pb_main_blurb_image img,
  .arp-ratio-4-3 .et_pb_blurb_image img,
  .arp-ratio-4-3 .et_pb_image_wrap > img,
  .arp-ratio-3-2 .et_pb_main_blurb_image img,
  .arp-ratio-3-2 .et_pb_blurb_image img,
  .arp-ratio-3-2 .et_pb_image_wrap > img,
  .arp-ratio-1-1 .et_pb_main_blurb_image img,
  .arp-ratio-1-1 .et_pb_blurb_image img,
  .arp-ratio-1-1 .et_pb_image_wrap > img,
  .arp-ratio-3-4 .et_pb_main_blurb_image img,
  .arp-ratio-3-4 .et_pb_blurb_image img,
  .arp-ratio-3-4 .et_pb_image_wrap > img{
    position: absolute;
    inset: 0;
  }
}

@media (max-width: 980px){
  .arp-slider-glass-left .et_pb_slide::before{
    width: 50%;
  }
  .arp-slider-glass-left .et_pb_slide_description{
    max-width: 50%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 980px){
  .arp-row-gap{
    flex-direction: column !important;
    gap: var(--arp-col-gap-mobile, 16px) !important;
  }
  .arp-row-gap.et_pb_row_3-4_1-4 > .et_pb_column_3_4,
  .arp-row-gap.et_pb_row_3-4_1-4 > .et_pb_column_1_4{
    width: 100% !important;
  }
}

@media (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_1_4 .et_pb_module, .et_pb_gutters3.et_pb_row .et_pb_column_1_4 .et_pb_module {
        margin-bottom: 0px;
    }
}


/* MENU MOBILE */

#main-header .et_mobile_menu li ul, .et_pb_fullwidth_menu .et_mobile_menu li ul, .et_pb_menu .et_mobile_menu li ul {
visibility: visible !important;
display: block !important;
padding-left: 0px !important;
}

.et_mobile_menu li li {
    padding-left: 0% !important;
}


/* SOUS-MENU Contact */
@media (max-width: 1850px){

  .et_pb_menu .et_pb_menu__menu > nav > ul > li:last-child > ul{
    left: auto !important;
    right: 0 !important;
  }

}

.et_pb_blurb_position_left .et_pb_blurb_container {
    padding-left: 0px !important;}


.links-clean a {
    color: #707070 !important;
    text-decoration: none !important;
}

.links-clean a:hover,
.links-clean a:focus {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-color: #000000 !important;
}