.elementor-kit-5{--e-global-color-primary:#7D3F2D;--e-global-color-secondary:#F4ECE1;--e-global-color-text:#14140F;--e-global-color-accent:#7C402C;--e-global-color-7655b447:#4054B2;--e-global-color-20c5011:#23A455;--e-global-color-6f45b244:#000;--e-global-color-74e60b1c:#FFF;--e-global-color-744fbaeb:#CFD8DE;--e-global-color-29f8a068:#1A1A1A;--e-global-color-1dac0303:#AAAAAA;--e-global-color-2f540842:#F5C61C;--e-global-color-68e285b8:#E9ECEF;--e-global-color-4dc0851f:#F4F6F8;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   DIP HONEST FOOD — CSS global (Elementor > Réglages du site > CSS personnalisé)
   Palette officielle : #7e402d · #d2ad90 · #fcfaf7 · #ffffff
   Toute autre teinte est dérivée en color-mix() de ces 4 couleurs.
   ============================================================ */

@font-face{
  font-family: "Gilmer";
  src: url("/wp-content/uploads/2026/08/Gilmer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Gilmer";
  src: url("/wp-content/uploads/2026/08/Gilmer-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Gilmer";
  src: url("/wp-content/uploads/2026/08/Gilmer-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --dip-marron:      #7e402d;
  --dip-beige-rose:  #d2ad90;
  --dip-beige-clair: #fcfaf7;
  --dip-blanc:       #ffffff;

  --dip-creme:        #f4ece1;
  --dip-marron-hover: color-mix(in srgb, var(--dip-marron) 82%, black);
  --dip-marron-actif: color-mix(in srgb, var(--dip-marron) 70%, black);
  --dip-encre:        color-mix(in srgb, var(--dip-marron) 40%, black);
  --dip-sable:        color-mix(in srgb, var(--dip-beige-rose) 35%, var(--dip-blanc));
  --dip-ombre:        color-mix(in srgb, var(--dip-marron) 35%, transparent);

  --dip-font-serif: Georgia, "Times New Roman", serif;
  --dip-font-sans:  "Gilmer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ----- 1. TYPOGRAPHIE — Georgia (titres, corps) / Gilmer (interface) -----
   ⚠️ ne jamais ajouter `p` nu à cette liste : une déclaration posée
   directement sur le <p> écrase l'héritage, donc la police choisie widget
   par widget dans Elementor (qui s'applique au conteneur du widget)
   n'atteindrait jamais le texte. */
body,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-icon-list,
h1, h2, h3, h4, h5, h6,
.elementor-cta__title, .elementor-cta__description, .elementor-slide-button{
  font-family: var(--dip-font-serif);
}
button, .wp-element-button,
input, select, textarea{
  font-family: var(--dip-font-sans);
}
a.elementor-button, nav, .elementor-nav-menu, .elementor-widget-nav-menu{
  font-family: var(--dip-font-serif);
}
/* accents italiques (citations, marquee, badges) */
.dip-quote{ font-weight: 400; font-style: italic; }
.dip-quote p{ font-style: italic; }
.dip-mq{ font-weight: 600; }
.dip-stamp text, .dip-badge-rot text{ font-weight: 500; }

/* ----- 2. GARDE-FOU RENDU BOTS — les moteurs de rendu SEO utilisent un
   viewport aussi haut que la page : un min-height en vh y explose.
   Aucun écran réel ne dépasse ~1400 px de haut → au-delà, plafond en px. ----- */
@media (min-height: 1400px){
  .e-con[data-settings], .e-con{ --min-height: auto !important; }
  .dip-hero-b{ min-height: 700px !important; }
  .dip-band{ min-height: 620px !important; }
  .dip-map-zone{ min-height: 420px !important; }
}

/* ----- 3. NAVIGATION ----- */
/* sélecteur de langue TranslatePress : rendu en police système par le plugin */
.trp-language-switcher, .trp-language-switcher *{
  font-family: var(--dip-font-sans) !important;
}
.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active{
  color: var(--dip-beige-rose) !important;
}

/* ----- 4. BOUTONS — micro-interactions + boîtes égales -----
   border transparente : Elementor ignore button_padding (preset gagne) →
   un ghost 1px ferait +2px de haut que son voisin plein. */
.elementor-button, .wp-element-button, .e-form-submit-button-base{
  font-family: var(--dip-font-serif);
  background-color: var(--dip-marron);
  color: var(--dip-blanc);
  border-radius: 999px;
  border: none;
}
.elementor-button:hover, .wp-element-button:hover, .e-form-submit-button-base:hover{
  background-color: var(--dip-marron-hover);
  color: var(--dip-blanc);
}
a.elementor-button{
  white-space: nowrap; border: 1px solid transparent;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out,
    background-color 240ms ease-out, color 240ms ease-out, border-color 240ms ease-out;
}
a.elementor-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--dip-encre) 45%, transparent);
}

/* ----- 5. IMAGES — cover partout (le réglage cover d'Elementor n'émet pas
   son CSS : portraits écrasés en boîte paysage sinon) ----- */
.elementor-widget-image{ overflow: hidden; }
.elementor-widget-image img{ object-fit: cover !important; transition: transform 500ms ease-out; }
.e-con:hover > .e-con-inner > .elementor-widget-image img,
.e-con:hover > .elementor-widget-image img{ transform: scale(1.04); }
/* cartes en grid : lift au survol */
.e-grid > .e-con-inner > .e-con{ transition: transform 260ms ease-out, box-shadow 260ms ease-out; }
.e-grid > .e-con-inner > .e-con:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--dip-marron) 16%, transparent);
}

/* ----- 6. HEADER in-page (.dip-hd-b) ----- */
.dip-hd-b .elementor-widget-button a.elementor-button{ white-space: nowrap; }
.dip-hd-b.elementor-sticky--effects{
  background: color-mix(in srgb, var(--dip-blanc) 94%, transparent) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--dip-marron) 10%, transparent);
}
@media (min-width: 768px){ /* logo | nav centrée | CTA */
  .dip-hd-b > .e-con-inner{ display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 24px; }
  .dip-hd-b > .e-con-inner > :nth-child(2){ justify-content: center; }
}
@media (max-width: 767px){ /* logo à gauche, burger à droite, une ligne */
  .dip-hd-b > .e-con-inner{ flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; }
  .dip-hd-b > .e-con-inner > .elementor-widget-text-editor, .dip-hd-b > .e-con-inner > .e-con{ width: auto !important; }
}
/* nav : souligné qui se déploie (pas de lift sur la nav) */
.dip-nav .elementor-button{ position: relative; }
.dip-nav .elementor-button::after{
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  background: var(--dip-marron); transform: scaleX(0); transform-origin: left; transition: transform 280ms ease;
}
.dip-nav .elementor-button:hover::after{ transform: scaleX(1); }
.dip-nav a.elementor-button:hover{ transform: none; box-shadow: none; }
/* header sticky ~110px : les ancres ne doivent pas passer dessous */
.e-con[id]{ scroll-margin-top: 130px; }
/* header/footer du thème masqués (header/footer in-page) */
.site-header, .site-footer, body > header.header, footer.site-footer{ display: none !important; }
.sub-menu .elementor-nav-menu--dropdown .sm-nowrap{ z-index: 999999999 !important; }

/* ----- 7. FOOTER ----- */
footer, .elementor-location-footer{
  background-color: var(--dip-marron);
  color: var(--dip-blanc);
}
footer h2, footer h3,
.elementor-location-footer .elementor-heading-title{
  font-family: var(--dip-font-serif) !important;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dip-blanc);
}
footer a, .elementor-location-footer a{
  font-family: var(--dip-font-serif) !important;
  color: var(--dip-blanc);
}
/* le template footer règle Poppins/Roboto widget par widget : on force Georgia
   sur le texte lui-même (le widget seul ne suffit pas, cf. note en section 1) */
footer p, footer li, footer span,
.elementor-location-footer p, .elementor-location-footer li, .elementor-location-footer span{
  font-family: var(--dip-font-serif) !important;
}
footer a:hover{ color: var(--dip-beige-rose); }
/* grille footer : logo | légal | réseaux */
.dip-ft-grid > .e-con-inner{ grid-template-columns: 2fr 1fr 1fr !important; }
@media (max-width: 767px){ .dip-ft-grid > .e-con-inner{ grid-template-columns: 1fr !important; } }
/* logo footer 166px — la spécificité doit battre .e-grid .elementor-widget-image img */
.dip-ft-grid .dip-ft-logo, .dip-ft-grid .dip-ft-logo .elementor-widget-container,
.dip-ft-grid .dip-ft-logo img, .e-grid .dip-ft-logo.elementor-widget-image img{ width: 166px !important; }

/* ----- 8. GRIDS DE SECTIONS (esprit / zigzag / platter) ----- */
#esprit > .e-con-inner{ display: grid !important; grid-template-columns: 0.9fr 1fr; column-gap: 48px; row-gap: 32px; align-items: center; }
#esprit > .e-con-inner > .e-con{ width: 100% !important; max-width: 100%; }
.dip-zig{ display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 24px; align-items: center; width: 100%; }
.dip-zig > .e-con{ width: 100% !important; max-width: 100%; }
.dip-zig-rev > .e-con:first-child{ order: 2; }
.dip-platter > .e-con-inner{ display: grid !important; grid-template-columns: 1fr 0.9fr; column-gap: 48px; row-gap: 32px; align-items: center; }
.dip-platter > .e-con-inner > .e-con{ width: 100% !important; max-width: 100%; }
@media (max-width: 900px){
  #esprit > .e-con-inner, .dip-zig, .dip-platter > .e-con-inner{ grid-template-columns: 1fr; }
  .dip-zig-rev > .e-con:first-child{ order: 0; }
}
/* les enfants larges ne rétrécissent pas dans les sections align-center */
.e-grid .elementor-widget-image, .e-grid .elementor-widget-image .elementor-widget-container,
.dip-band-in .elementor-widget-image, .dip-band-in .elementor-widget-image .elementor-widget-container,
.dip-zig .elementor-widget-image, .dip-zig .elementor-widget-image .elementor-widget-container,
.dip-platter .elementor-widget-image, .dip-platter .elementor-widget-image .elementor-widget-container{ width: 100% !important; }
.e-grid .elementor-widget-image img, .dip-band-in .elementor-widget-image img,
.dip-zig .elementor-widget-image img, .dip-platter .elementor-widget-image img{ width: 100% !important; }

/* ----- 9. COMPOSANTS PARTAGÉS ----- */
/* kicker posé sur photo : lisible sur zone claire */
.dip-kicker-hero .elementor-heading-title{
  text-shadow: 0 1px 14px color-mix(in srgb, var(--dip-encre) 65%, transparent),
    0 0 3px color-mix(in srgb, var(--dip-encre) 40%, transparent);
}
/* avis : guillemet décoratif + lift */
.dip-avis{ position: relative; transition: transform 300ms ease-out, box-shadow 300ms ease-out; }
.dip-avis::before{
  content: '\201C'; font-family: var(--dip-font-serif); font-size: 4.6rem; line-height: 1;
  color: var(--dip-beige-rose); opacity: .55; position: absolute; top: 10px; right: 20px; pointer-events: none;
}
.dip-avis:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -22px color-mix(in srgb, var(--dip-encre) 40%, transparent);
}
/* chips */
.dip-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dip-chip{
  display: inline-block; border: 1.5px solid currentColor; border-radius: 999px; padding: 7px 16px;
  font-family: var(--dip-font-serif) !important; font-size: .85rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
/* duo photo + polaroid */
.dip-duo{ position: relative; }
.dip-duo .elementor-widget-image:nth-child(2), .dip-duo .elementor-widget-image:nth-child(2) .elementor-widget-container{ width: 46% !important; }
.dip-duo .elementor-widget-image:nth-child(2){ margin: -70px 0 0 -12px; transform: rotate(-3.5deg); z-index: 2; }
.dip-duo .elementor-widget-image:nth-child(2) img{
  border: 6px solid var(--dip-blanc);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--dip-encre) 28%, transparent);
}
.dip-duo .elementor-widget-image:nth-child(2):hover{ transform: rotate(-1deg) scale(1.03); transition: transform 300ms ease-out; }
/* mosaïque 3×3 */
.dip-mosaic{ display: grid !important; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 225px; gap: 18px; width: 100%; }
.dip-mosaic .elementor-widget-image, .dip-mosaic .elementor-widget-image .elementor-widget-container{ width: 100% !important; height: 100% !important; }
.dip-mosaic .elementor-widget-image img{ width: 100% !important; height: 100% !important; object-fit: cover; }
.dip-mosaic .elementor-widget-image:nth-child(1){ grid-row: span 2; }
.dip-mosaic .elementor-widget-image:nth-child(4), .dip-mosaic .elementor-widget-image:nth-child(6){ grid-column: span 2; }
.dip-mosaic .elementor-widget-image{ overflow: hidden; }
.dip-mosaic img{ transition: transform 900ms cubic-bezier(.2,.65,.25,1); }
.dip-mosaic .elementor-widget-image:hover img{ transform: scale(1.055); }
/* cartes menus : boutons sur la même ligne de base
   ⚠️ container boxed = .e-con-inner intercalé, les sélecteurs le traversent */
.dip-menu-card, .dip-menu-card > .e-con-inner{ height: 100%; }
.dip-menu-card > .e-con-inner > .e-con:last-child{ flex-grow: 1; }
.dip-menu-card > .e-con-inner > .e-con:last-child > .e-con-inner{ height: 100%; }
.dip-menu-card .elementor-widget-button{ margin-top: auto; }
.dip-menu-card{ transition: transform 300ms ease-out, box-shadow 300ms ease-out; }
.dip-menu-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -22px color-mix(in srgb, var(--dip-encre) 40%, transparent);
}
.dip-menu-card .elementor-widget-image{ overflow: hidden; }
.dip-menu-card img{ transition: transform 900ms cubic-bezier(.2,.65,.25,1); }
.dip-menu-card:hover img{ transform: scale(1.055); }
@media (max-width: 767px){
  .dip-mosaic{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .dip-mosaic .elementor-widget-image:nth-child(4), .dip-mosaic .elementor-widget-image:nth-child(6){ grid-column: span 2; }
  .dip-duo .elementor-widget-image:nth-child(2){ margin-top: -46px; }
}
@media (max-width: 900px){
  .dip-duo .elementor-widget-image:nth-child(2),
  .dip-duo .elementor-widget-image:nth-child(2) .elementor-widget-container{ width: 90% !important; }
}
/* bande réseaux + tampon rond */
a.dip-rs{ display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--dip-marron) !important; text-decoration: none; }
a.dip-rs span{ font-family: var(--dip-font-serif); font-weight: 600; font-size: 1.2rem; color: var(--dip-marron) !important; }
a.dip-rs svg{ transition: transform .35s cubic-bezier(.2,.65,.25,1); }
a.dip-rs:hover svg{ transform: translateY(-6px) scale(1.08); }
a.dip-rs:hover, a.dip-rs:hover span{ color: var(--dip-marron-hover) !important; }
.dip-stamp{ width: 150px; height: 150px; margin: 0 auto 6px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.28)); }
.dip-stamp svg{ overflow: visible; width: 100%; height: 100%; }
.dip-stamp .dip-stamp-ring{ transform-origin: 80px 80px; animation: dipSpin 22s linear infinite; }
/* mesure typographique des blocs SEO (≤75ch) */
#seo-local .elementor-widget-text-editor p{ max-width: 68ch; }
#seo-local .elementor-widget-heading .elementor-heading-title{ max-width: 30ch; }
/* back-to-top de SSF (chargé sur toutes les pages) */
#mainBackToTop{
  background: var(--dip-marron) !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--dip-marron) 35%, transparent) !important;
}
#mainBackToTop:hover{ background: var(--dip-marron-hover) !important; }
.main-back-to-top.is-shown{ opacity: 1; display: none; }

/* ----- 10. MOTION SIGNATURE (hero, marquee, badge, story) ----- */
/* curseur custom — desktop pointer uniquement */
@media (hover: hover) and (pointer: fine){
  body{ cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22%20fill%3D%22%237e402d%22%20fill-opacity%3D%220.9%22/%3E%3C/svg%3E") 7 7, auto; }
  a, button, .elementor-button, [role="button"]{ cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%237e402d%22%20stroke-width%3D%222.5%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%223.5%22%20fill%3D%22%23d2ad90%22/%3E%3C/svg%3E") 14 14, pointer; }
}
/* hero — reveal par mots (spans .dip-w générés au build) */
.dip-w{ display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(1.2deg);
  animation: dipWordIn 640ms cubic-bezier(.2,.65,.25,1) forwards; animation-delay: calc(var(--i) * 95ms + 120ms); }
@keyframes dipWordIn{ to{ opacity: 1; transform: none; } }
.dip-hero-b{ position: relative; }
/* ⚠️ scopé au H1 seul — .elementor-heading-title nu attrape aussi le kicker.
   Aucune taille imposée ici : les tailles de titres restent réglables dans
   Elementor, page par page (une taille en CSS écraserait l'éditeur). */
.dip-hero-b h1.elementor-heading-title{ letter-spacing: -0.01em; }
.dip-hero-b h1.elementor-heading-title .dip-w:last-child{ font-style: italic; color: var(--dip-beige-rose); font-weight: 500; }
/* fil vertical qui invite à descendre */
.dip-hero-b::after{ content: ''; position: absolute; bottom: 24px; left: 50%; width: 2px; height: 46px;
  background: linear-gradient(transparent, var(--dip-blanc)); animation: dipDrop 2.2s ease-in-out infinite; }
@keyframes dipDrop{ 0%{ transform: scaleY(0); transform-origin: top; } 55%{ transform: scaleY(1); transform-origin: top; }
  100%{ transform: scaleY(0); transform-origin: bottom; } }
/* badge textPath rotatif + tasse fumante */
.dip-badge-holder{ position: static !important; width: 0; height: 0; }
.dip-badge-rot{ position: absolute; right: 6%; bottom: 10%; width: 176px; height: 176px; pointer-events: none; animation: dipFloat 7s ease-in-out infinite; }
.dip-badge-rot svg{ overflow: visible; width: 100%; height: 100%;
  filter: drop-shadow(0 12px 26px color-mix(in srgb, var(--dip-encre) 30%, transparent)); }
.dip-badge-rot text{ transform-origin: 60px 60px; animation: dipSpin 16s linear infinite; }
@keyframes dipSpin{ to{ transform: rotate(360deg); } }
@keyframes dipFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
.dip-steam{ stroke-dasharray: 8; animation: dipSteam 2.4s ease-in-out infinite; opacity: .85; }
.dip-steam.s2{ animation-delay: 1.2s; }
@keyframes dipSteam{ 0%{ stroke-dashoffset: 16; opacity: 0; } 35%{ opacity: .85; } 100%{ stroke-dashoffset: 0; opacity: 0; } }
@media (max-width: 767px){ .dip-badge-rot{ display: none; } }
/* story « du matin au soir » — scènes sticky */
.dip-band{ position: sticky; top: 0; }
.dip-band-1{ z-index: 11; } .dip-band-2{ z-index: 12; } .dip-band-3{ z-index: 13; } .dip-band-4{ z-index: 14; }
.dip-band-in{ display: grid !important; grid-template-columns: 1.05fr 0.95fr; column-gap: 56px;
  row-gap: 28px; align-items: center; width: 100%; max-width: 1140px; margin: 0 auto; }
.dip-band-in > .e-con{ width: 100% !important; max-width: 100%; }
.dip-giant .elementor-heading-title{ line-height: .98; letter-spacing: -0.01em; white-space: nowrap; }
.dip-band-svg svg{ display: block; }
.dip-leaf{ transform-origin: 44px 22px; animation: dipWiggle 4.5s ease-in-out infinite; }
@keyframes dipWiggle{ 0%, 100%{ transform: rotate(0deg); } 50%{ transform: rotate(7deg); } }
.dip-bean{ transform-origin: 32px 32px; animation: dipPulse 3.6s ease-in-out infinite; }
@keyframes dipPulse{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.09); } }
.dip-moon{ transform-origin: 32px 32px; animation: dipWiggle 6s ease-in-out infinite; }
.dip-star{ animation: dipTwinkle 2.8s ease-in-out infinite; }
.dip-star.st2{ animation-delay: .9s; } .dip-star.st3{ animation-delay: 1.7s; }
@keyframes dipTwinkle{ 0%, 100%{ opacity: .25; } 50%{ opacity: 1; } }
@media (max-width: 900px){
  .dip-band{ position: static; min-height: auto !important; }
  /* ⚠️ le grid vit sur .dip-band-in (un niveau SOUS .e-con-inner) — cibler l'ancêtre ne collapse rien */
  .dip-band-in{ grid-template-columns: 1fr !important; }
}
/* marquee infini XXL (Georgia italic outline) — pause au survol */
.dip-marquee{ display: flex; white-space: nowrap; overflow: hidden; width: 100%; }
.dip-mq{ display: inline-block; flex-shrink: 0; font-family: var(--dip-font-serif); font-style: italic;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 1.15; color: transparent;
  -webkit-text-stroke: 2px var(--dip-marron); padding-right: .35em; animation: dipMarq 32s linear infinite; }
@keyframes dipMarq{ to{ transform: translateX(-100%); } }
.dip-marquee:hover .dip-mq{ animation-play-state: paused; }
/* kicker de moment : index + filet */
.dip-mmt-k .elementor-heading-title{ display: flex; align-items: center; gap: 14px; }
.dip-mmt-k .elementor-heading-title::after{ content: ''; height: 1px; width: 64px; background: currentColor; opacity: .45; }
.dip-range .elementor-heading-title{ white-space: nowrap; letter-spacing: -0.01em; }
/* hero locale — zoom lent du fond */
.dip-hero-zoom{ animation: dipHeroSettle 1.8s ease-out; }
@keyframes dipHeroSettle{ from{ background-size: 112% auto; } }
/* reveals scroll-driven — IMAGES uniquement (un texte piloté par view() peut rester invisible dans les captures) */
@supports (animation-timeline: view()){
  .dip-reveal .elementor-widget-image{ animation: dipReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes dipReveal{ from{ opacity: 0; transform: translateY(26px) scale(0.985); } to{ opacity: 1; transform: none; } }
}

/* ----- 11. ACCESSIBILITÉ ----- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
  [style*="background-attachment"]{ background-attachment: scroll !important; }
  .dip-w{ opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   12. WIDGET MYLI (bandeau services) — surcouche couleurs, typo,
   icônes et layout mobile. La spécificité #m8-ctas#m8-ctas#m8-ctas
   est nécessaire pour passer devant le CSS embarqué du widget
   (double ID + !important).
   ============================================================ */
#m8-ctas#m8-ctas#m8-ctas{ background-color: var(--dip-marron) !important; }
#m8-ctas#m8-ctas#m8-ctas > div > a{
  background-color: var(--dip-beige-rose) !important;
  color: var(--dip-blanc) !important;
  font-family: var(--dip-font-sans) !important;
}
#m8-ctas#m8-ctas#m8-ctas > div > a span.short_title,
#m8-ctas#m8-ctas#m8-ctas > div > a span.full_title{
  font-family: var(--dip-font-sans) !important;
  letter-spacing: .08em;
}
#m8-ctas-container#m8-ctas-container{ font-family: var(--dip-font-sans) !important; }
@media screen and (min-width: 761px){
  #m8-ctas#m8-ctas#m8-ctas > div > a{ border-radius: 10px !important; }
}

/* --- layout mobile : le lien devient une colonne icône + libellé --- */
@media screen and (max-width: 767px){
  #m8-ctas#m8-ctas#m8-ctas > div > a{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 10px 6px !important;
  }
  #m8-ctas#m8-ctas#m8-ctas > div > a > div,
  #m8-ctas#m8-ctas#m8-ctas > div > a span.m8-icon{
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-mask: none !important; mask: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    width: auto !important; height: auto !important;
    min-width: 0 !important; min-height: 0 !important;
    max-width: none !important; max-height: none !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: visible !important; box-sizing: border-box !important;
  }
  #m8-ctas#m8-ctas#m8-ctas > div > a > div::before,
  #m8-ctas#m8-ctas#m8-ctas > div > a > div::after,
  #m8-ctas#m8-ctas#m8-ctas > div > a span.m8-icon::before,
  #m8-ctas#m8-ctas#m8-ctas > div > a span.m8-icon::after{
    content: none !important; display: none !important;
  }
}

/* --- reconstruction de l'icône : cercle marron + glyphe blanc en masque --- */
#m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i,
#m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i,
#m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i,
#m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i,
#m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i{
  all: unset !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  -webkit-mask: none !important; mask: none !important;
  display: block !important;
  position: relative !important;
  width: 35px !important; height: 35px !important;
  min-width: 35px !important; min-height: 35px !important;
  border-radius: 50% !important;
  background-color: var(--dip-marron) !important;
  box-sizing: border-box !important;
}
#m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i::after,
#m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i::after,
#m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i::after,
#m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i::after,
#m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i::after{
  content: none !important; display: none !important;
}
#m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i::before,
#m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i::before,
#m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i::before,
#m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i::before,
#m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i::before{
  all: unset !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 2 !important;
  display: block !important;
  background-color: var(--dip-blanc) !important;
  -webkit-mask-size: 64% 64% !important; mask-size: 64% 64% !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
}
/* icônes officielles du kit (masques PNG, calés sur la taille d'affichage réelle) */
#m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i::before{
  -webkit-mask-image: url("/wp-content/uploads/2026/08/icone-sur-place-v2.png") !important;
  mask-image: url("/wp-content/uploads/2026/08/icone-sur-place-v2.png") !important;
}
#m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i::before,
#m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i::before{
  -webkit-mask-image: url("/wp-content/uploads/2026/08/icone-a-emporter-v2.png") !important;
  mask-image: url("/wp-content/uploads/2026/08/icone-a-emporter-v2.png") !important;
}
#m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i::before{
  -webkit-mask-image: url("/wp-content/uploads/2026/08/icone-reservation-v2.png") !important;
  mask-image: url("/wp-content/uploads/2026/08/icone-reservation-v2.png") !important;
}
/* téléphone (pas d'équivalent dans le kit) */
#m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i::before{
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIyIDE2LjkydjNhMiAyIDAgMCAxLTIuMTggMiAxOS43OSAxOS43OSAwIDAgMS04LjYzLTMuMDcgMTkuNSAxOS41IDAgMCAxLTYtNiAxOS43OSAxOS43OSAwIDAgMS0zLjA3LTguNjdBMiAyIDAgMCAxIDQuMTEgMmgzYTIgMiAwIDAgMSAyIDEuNzJjLjEyNy45Ni4zNjEgMS45MDIuNyAyLjgxYTIgMiAwIDAgMS0uNDUgMi4xMUw4LjA5IDkuOTFhMTYgMTYgMCAwIDAgNiA2bDEuMjctMS4yN2EyIDIgMCAwIDEgMi4xMS0uNDVjLjkwOC4zMzkgMS44NS41NzMgMi44MS43QTIgMiAwIDAgMSAyMiAxNi45MnoiLz48L3N2Zz4K") !important;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIyIDE2LjkydjNhMiAyIDAgMCAxLTIuMTggMiAxOS43OSAxOS43OSAwIDAgMS04LjYzLTMuMDcgMTkuNSAxOS41IDAgMCAxLTYtNiAxOS43OSAxOS43OSAwIDAgMS0zLjA3LTguNjdBMiAyIDAgMCAxIDQuMTEgMmgzYTIgMiAwIDAgMSAyIDEuNzJjLjEyNy45Ni4zNjEgMS45MDIuNyAyLjgxYTIgMiAwIDAgMS0uNDUgMi4xMUw4LjA5IDkuOTFhMTYgMTYgMCAwIDAgNiA2bDEuMjctMS4yN2EyIDIgMCAwIDEgMi4xMS0uNDVjLjkwOC4zMzkgMS44NS41NzMgMi44MS43QTIgMiAwIDAgMSAyMiAxNi45MnoiLz48L3N2Zz4K") !important;
}
/* tailles responsives du cercle */
@media screen and (max-width: 767px){
  #m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i{
    top: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }
}
@media screen and (max-width: 600px){
  #m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i{
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; min-height: 30px !important;
  }
}
@media screen and (max-width: 380px){
  #m8-ctas#m8-ctas#m8-ctas > div > a.onspot span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.takeaway span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.clickcollect span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.delivery span.m8-icon i,
  #m8-ctas#m8-ctas#m8-ctas > div > a.contact span.m8-icon i{
    width: 26px !important; height: 26px !important;
    min-width: 26px !important; min-height: 26px !important;
  }
}

/* --- volets/popups du widget --- */
#m8-ctas-container .m8-spots > ul > li .m8-button-advanced{
  background-color: var(--dip-marron) !important;
}
#m8mosaic > div{
  border-radius: 10px !important;
  background: var(--dip-creme) !important;
}

@media screen and (min-width: 761px) {
    #m8-ctas#m8-ctas#m8-ctas > div > a {
        font-weight: 600;
        font-size: 17px;
        text-transform: capitalize;
        border-radius: 10px !important;
    }
}/* End custom CSS */