.elementor-kit-5{--e-global-color-primary:#F4F1EC;--e-global-color-secondary:#7A8B6A;--e-global-color-text:#2E2A26;--e-global-color-accent:#E07A3F;--e-global-color-a4ed383:#5F5A53;--e-global-color-01358b0:#E8E1D6;--e-global-color-5ff01df:#7FB069;--e-global-color-d8eb8b0:#2E2A2624;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{font-size:48px;font-weight:700;}.elementor-kit-5 h2{font-size:36px;font-weight:600;line-height:1.2px;letter-spacing:-0.3px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5 h1{font-size:40px;line-height:1.15em;letter-spacing:-0.5px;}.elementor-kit-5 h2{font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{font-size:16px;line-height:1.6em;}.elementor-kit-5 h1{font-size:32px;}.elementor-kit-5 h2{font-size:26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   FERME DUQUETTE — CSS GLOBAL MASTER (WordPress + Elementor)
   Version: CLEAN / SECTIONNÉE / SANS DOUBLON
   Convention:
   - Chaque bloc = SECTION [##]
   - Pour remplacer un élément plus tard: remplace seulement la SECTION
========================================================= */


/* ---------------------------------------------------------
   SECTION [01] — TOKENS (COULEURS / TYPO / RADIUS / OMBRES)
--------------------------------------------------------- */
:root{
  /* Brand palette */
  --fdq-bg: #F4F1EC;
  --fdq-bg-2: #E8E1D6;
  --fdq-text: #2E2A26;
  --fdq-text-2: #5F5A53;

  --fdq-green: #7A8B6A;
  --fdq-green-2: #5F6F52;
  --fdq-cta: #E07A3F;
  --fdq-sun: #F2B705;

  --fdq-success: #7FB069;
  --fdq-warn: #D9A441;
  --fdq-danger: #C94C4C;
  
  --fdq-deep: #221E1A;          /* très foncé, chaud (pas noir) */
  --fdq-deep-2: #1A1714;        /* encore plus deep (option) */
  --fdq-deep-text: rgba(244,241,236,.86); /* texte clair warm */
  --fdq-deep-line: rgba(244,241,236,.12); /* ligne discrète */

  /* UI surfaces */
  --fdq-line: rgba(46,42,38,.14);
  --fdq-surface: rgba(255,255,255,.70);
  --fdq-surface-2: rgba(255,255,255,.55);

  /* Typography */
  --fdq-font: system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --fdq-lh: 1.55;

  /* Fluid type */
  --fdq-h1: clamp(2.0rem, 2.2vw + 1.1rem, 3.0rem);
  --fdq-h2: clamp(1.55rem, 1.3vw + 1.05rem, 2.2rem);
  --fdq-h3: clamp(1.25rem, 0.8vw + 1.0rem, 1.7rem);
  --fdq-p: 1rem;

  /* Radius */
  --fdq-r-sm: 10px;
  --fdq-r: 16px;
  --fdq-r-lg: 24px;
  --fdq-r-xl: 32px;

  /* Shadows */
  --fdq-shadow-sm: 0 8px 22px rgba(46,42,38,.10);
  --fdq-shadow:    0 16px 50px rgba(46,42,38,.16);

  /* Motion */
  --fdq-ease: cubic-bezier(.2,.8,.2,1);
  --fdq-t: 200ms var(--fdq-ease);

  /* Layout */
  --fdq-max: 1200px;

  /* Background asset (1 endroit à changer) */
  --fdq-bg-image: url("/wp-content/uploads/2025/12/fdq-paille-background.webp");
}


/* ---------------------------------------------------------
   SECTION [02] — BASE (HTML/BODY + TYPO + LIENS + FOCUS)
--------------------------------------------------------- */
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; }

body{
  color: var(--fdq-text);
  font-family: var(--fdq-font);
  line-height: var(--fdq-lh);
  background: transparent; /* important: le background est géré en section [03] */
}

a{
  color: var(--fdq-green-2);
  text-decoration: none;
  transition: color var(--fdq-t), opacity var(--fdq-t);
}
a:hover{ color: var(--fdq-cta); }

::selection{ background: rgba(224,122,63,.25); }

h1{ font-size: var(--fdq-h1); letter-spacing: -0.02em; }
h2{ font-size: var(--fdq-h2); letter-spacing: -0.015em; }
h3{ font-size: var(--fdq-h3); }
p, li{ font-size: var(--fdq-p); color: var(--fdq-text-2); }
strong{ color: var(--fdq-text); }

:focus-visible{
  outline: 3px solid rgba(224,122,63,.55);
  outline-offset: 3px;
}

img{ border-radius: 12px; }

.fdq-container{
  max-width: var(--fdq-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}


/* =========================================================
   3) FDQ — GLOBAL SITE BACKGROUND (PAILLE) — FIX VISIBLE
   But: paille visible + overlay léger + grain subtil
========================================================= */

/* 3.1 — Image de fond sur le “canvas” de la page */
html{
  background-color: var(--fdq-bg);
  background-image: url("/wp-content/uploads/2025/12/fdq-paille-background.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(1700px, 120vw) auto;
  background-attachment: fixed;
}

/* 3.2 — IMPORTANT: on laisse body transparent pour voir html */
body{
  background: transparent !important;
  position: relative;
}

/* 3.3 — Overlay papier (BEAU, mais pas trop opaque) */
body::before{
  content:"";
  position: fixed;
  inset: 0;

  /* 👇 beaucoup moins “blanc” qu’avant */
  background: linear-gradient(
    180deg,
    rgba(244,241,236,.35) 0%,
    rgba(244,241,236,.55) 45%,
    rgba(244,241,236,.70) 100%
  );

  pointer-events: none;
  z-index: 0;
}

/* 3.4 — Grain subtil (quasi invisible mais premium) */
body::after{
  content:"";
  position: fixed;
  inset: 0;

  background-image: radial-gradient(rgba(46,42,38,.03) 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .18;

  pointer-events: none;
  z-index: 0;
}

/* 3.5 — Le site AU-DESSUS des overlays */
#page, .site, .elementor, main{
  position: relative;
  z-index: 1;
}

/* 3.6 — iOS / perf */
@media (max-width: 1024px){
  html{
    background-attachment: scroll;
    background-size: 1300px auto;
  }
}
@media (max-width: 767px){
  html{
    background-size: 1000px auto;
  }
}


/* ---------------------------------------------------------
   SECTION [04] — SURFACES / SECTIONS / CARD GÉNÉRIQUE
--------------------------------------------------------- */
.fdq-section{
  padding: 3.25rem 0;
  border-top: 1px solid var(--fdq-line);
}
.fdq-section--alt{ background: var(--fdq-bg-2); }

.fdq-card{
  background: linear-gradient(180deg, var(--fdq-surface), var(--fdq-surface-2));
  border: 1px solid var(--fdq-line);
  border-radius: var(--fdq-r);
  box-shadow: var(--fdq-shadow-sm);
  padding: 1.4rem;
  transition: transform var(--fdq-t), box-shadow var(--fdq-t), border-color var(--fdq-t);
}
.fdq-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--fdq-shadow);
  border-color: rgba(122,139,106,.35);
}


/* ---------------------------------------------------------
   SECTION [05] — BOUTONS (GLOBAL + CTA)
--------------------------------------------------------- */
.fdq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.9rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(46,42,38,.18);
  background: rgba(255,255,255,.65);
  color: var(--fdq-text);
  font-weight: 650;
  transition: transform var(--fdq-t), box-shadow var(--fdq-t), background var(--fdq-t), border-color var(--fdq-t);
  box-shadow: 0 10px 28px rgba(46,42,38,.10);
}
.fdq-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(122,139,106,.45);
  box-shadow: 0 16px 45px rgba(46,42,38,.14);
}

.fdq-btn--cta{
  background: linear-gradient(135deg, rgba(224,122,63,.98), rgba(224,122,63,.70));
  border-color: rgba(224,122,63,.55);
  color: #fff;
}
.fdq-btn--cta:hover{
  box-shadow: 0 18px 55px rgba(224,122,63,.22);
  filter: brightness(1.02);
}


/* ---------------------------------------------------------
   SECTION [06] — FORMS (GLOBAL)
--------------------------------------------------------- */
input, textarea, select{
  width: 100%;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(46,42,38,.18);
  border-radius: var(--fdq-r-sm);
  padding: .9rem .95rem;
  color: var(--fdq-text);
  outline: none;
  transition: border-color var(--fdq-t), box-shadow var(--fdq-t);
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(122,139,106,.55);
  box-shadow: 0 0 0 4px rgba(122,139,106,.18);
}


/* ---------------------------------------------------------
   SECTION [07] — ELEMENTOR GLOBALS
   NOTES:
   - Ça harmonise Elementor sans casser tes widgets.
--------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title{ color: var(--fdq-text); }
.elementor-widget-text-editor{ color: var(--fdq-text-2); }
.elementor img{ border-radius: 14px; }

.elementor a.elementor-button,
.elementor .elementor-button{
  border-radius: 999px !important;
  font-weight: 650 !important;
  transition: transform var(--fdq-t), filter var(--fdq-t), box-shadow var(--fdq-t) !important;
  box-shadow: 0 10px 28px rgba(46,42,38,.10);
}
.elementor a.elementor-button:hover,
.elementor .elementor-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 45px rgba(46,42,38,.14);
  filter: brightness(1.02);
}

/* Pour CTA Elementor: ajoute la classe fdq-cta au widget bouton */
.elementor .fdq-cta .elementor-button,
.elementor a.elementor-button.fdq-cta{
  background: linear-gradient(135deg, rgba(224,122,63,.98), rgba(224,122,63,.70)) !important;
  border-color: rgba(224,122,63,.55) !important;
  color: #fff !important;
}

.elementor-widget-divider .elementor-divider-separator{
  border-top-color: rgba(46,42,38,.14) !important;
}
.elementor-widget-icon .elementor-icon{ color: var(--fdq-green) !important; }


/* ---------------------------------------------------------
   SECTION [08] — HEADER (Logo + Nav + Social)
   CLASSES:
   - Header container: fdq-header
   - Inner: fdq-header-left / fdq-header-center / fdq-header-right
   - Logo widget: fdq-logo
   - Nav menu widget: fdq-nav
   - Social icons widget: fdq-social
--------------------------------------------------------- */
.fdq-header{
  background: rgba(236,231,223,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fdq-line);
  box-shadow: 0 8px 24px rgba(46,42,38,.10), 0 1px 0 rgba(255,255,255,.35) inset;

  padding: .75rem 1.1rem;
  position: sticky;
  top: 0;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.fdq-header-left{ flex: 0 0 auto; }
.fdq-header-center{ flex: 1 1 auto; display:flex; justify-content:center; }
.fdq-header-right{ flex: 0 0 auto; display:flex; justify-content:flex-end; }

.fdq-logo img{ max-height: 56px; width:auto; }

.elementor-widget-social-icons.fdq-social .elementor-social-icon{
  background: transparent !important;
  color: var(--fdq-green) !important;
  border: 1px solid rgba(122,139,106,.25);
  border-radius: 999px;
  transition: transform var(--fdq-t), color var(--fdq-t), border-color var(--fdq-t);
}
.elementor-widget-social-icons.fdq-social .elementor-social-icon:hover{
  color: var(--fdq-cta) !important;
  border-color: rgba(224,122,63,.35);
  transform: translateY(-1px);
}

/* Nav menu */
.elementor-widget-nav-menu.fdq-nav .elementor-nav-menu--main .elementor-item{
  color: var(--fdq-text);
  font-weight: 700;
  border-radius: 999px;
  padding: .55rem .85rem;
  transition: background var(--fdq-t), color var(--fdq-t), transform var(--fdq-t);
}
.elementor-widget-nav-menu.fdq-nav .elementor-nav-menu--main .elementor-item:hover{
  background: rgba(122,139,106,.14);
  color: var(--fdq-green-2);
  transform: translateY(-1px);
}
.elementor-widget-nav-menu.fdq-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{
  background: rgba(224,122,63,.14);
  color: var(--fdq-text);
}

.elementor-widget-nav-menu.fdq-nav .elementor-menu-toggle{
  border-radius: 999px;
  border: 1px solid rgba(46,42,38,.18);
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 28px rgba(46,42,38,.10);
}

/* Mobile dropdown FULL WIDTH */
@media (max-width: 767px){
  .fdq-header{ padding: .6rem .85rem; position: relative; }
  .fdq-logo img{ max-height: 46px; }

  .fdq-header .elementor-widget-nav-menu{
    position: static !important;
    width: auto !important;
  }

  .fdq-header .elementor-nav-menu--dropdown{
    position: fixed !important;
    top: 76px; /* si besoin: ajuste seulement ici */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;

    background: rgba(236,231,223,.98);
    border: 1px solid rgba(46,42,38,.14);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(46,42,38,.18);
    padding: .6rem 0;
    z-index: 9999 !important;
  }

  .fdq-header .elementor-nav-menu--dropdown .elementor-item{
    display:block;
    width:100%;
    border-radius: 14px;
    padding: 1rem 1.6rem;
    font-size: 1.05rem;
    text-align:center;
    margin: .15rem .6rem;
  }
}

@media (max-width: 1024px){
  .fdq-logo img{ max-height: 52px; }
}


/* ---------------------------------------------------------
   SECTION [09] — HERO (Accueil)
   CLASSES:
   - fdq-hero, fdq-hero-frame, fdq-hero-copy, fdq-hero-media
--------------------------------------------------------- */
.fdq-hero{ padding-top: 4rem; padding-bottom: 3rem; }

.fdq-hero-frame{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--fdq-line);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(46,42,38,.14);
  padding: 1.6rem;
}

.fdq-hero h1{
  text-shadow: 0 1px 2px rgba(46,42,38,.28), 0 6px 22px rgba(46,42,38,.18);
}

.fdq-hero-copy .fdq-hero-lead{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--fdq-text-2);
  margin: 0 0 .85rem 0;
  max-width: 58ch;
}

.fdq-hero-copy .fdq-hero-fun{
  font-weight: 650;
  color: var(--fdq-text);
  margin: 0 0 1.15rem 0;
}

.fdq-hero-media{
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(46,42,38,.18);
}
.fdq-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px;
  border-radius: 0 !important;
}

@media (max-width: 1024px){
  .fdq-hero{ padding-top: 3.2rem; }
  .fdq-hero-frame{ padding: 1.25rem; border-radius: 28px; }
  .fdq-hero-media{ border-radius: 22px; }
  .fdq-hero-media img{ min-height: 360px; }
}


/* ---------------------------------------------------------
   SECTION [10] — FOOTER + MINI MAP
   CLASSES: fdq-footer, fdq-mini-map
--------------------------------------------------------- */
.fdq-footer{
  background: var(--fdq-bg-2);
  border-top: 1px solid var(--fdq-line);
  padding: 2.2rem 1.25rem;
}
.fdq-footer p, .fdq-footer a{ color: var(--fdq-text-2); }
.fdq-footer a:hover{ color: var(--fdq-cta); }

.fdq-footer .fdq-footer-title{
  font-weight: 800;
  color: var(--fdq-text);
  margin-bottom: .35rem;
}
.fdq-footer .fdq-footer-meta{ font-size: .95rem; }

.fdq-mini-map{
  margin-top: 1.1rem;
  border-radius: 18px;
  overflow: hidden;
  max-width: 420px;
  height: 200px;
  border: 1px solid var(--fdq-line);
  box-shadow: 0 10px 28px rgba(46,42,38,.12);
}
.fdq-mini-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.75) contrast(.95) brightness(.98);
}

@media (max-width: 767px){
  .fdq-mini-map{ max-width: 100%; height: 180px; }
}


/* ---------------------------------------------------------
   SECTION [11] — PENSIONS (3 CARTES) — GRID ASYMÉTRIQUE
   IMPORTANT CLASSES À METTRE DANS ELEMENTOR:
   - Parent container GRID: fdq-pensions-grid
   - Carte Chiens:  fdq-card-animal fdq-card-featured fdq-card-dogs
   - Carte Chats:   fdq-card-animal fdq-card-cats
   - Carte Chevaux: fdq-card-animal fdq-card-horses
   - Image widget (ou container image): fdq-card-media
   - Texte container: fdq-card-content
   - Bouton (optionnel): fdq-btn-card sur le widget bouton
--------------------------------------------------------- */

/* Parent: force grid + neutralise wrapper Elementor */
.fdq-pensions-grid{
  --fdq-gap: 22px;
  width: 100% !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--fdq-gap) !important;
  align-items: stretch !important;
}

/* Elementor: parfois un wrapper .e-con-inner -> on le rend transparent */
.fdq-pensions-grid > .e-con-inner{
  display: contents !important;
}

/* Enfants: anti “boîte étroite” */
.fdq-pensions-grid > *,
.fdq-pensions-grid > .e-con-inner > *{
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Placement desktop: chiens gauche / chats+chevaux empilés droite */
@media (min-width: 1025px){
  .fdq-pensions-grid .fdq-card-dogs{ grid-column: 1 / span 7 !important; grid-row: 1 / span 2 !important; }
  .fdq-pensions-grid .fdq-card-cats{ grid-column: 8 / span 5 !important; grid-row: 1 !important; }
  .fdq-pensions-grid .fdq-card-horses{ grid-column: 8 / span 5 !important; grid-row: 2 !important; }
}

/* Tablet */
@media (max-width: 1024px){
  .fdq-pensions-grid{ --fdq-gap: 18px; }

  .fdq-pensions-grid .fdq-card-dogs{ grid-column: 1 / -1 !important; grid-row: auto !important; }
  .fdq-pensions-grid .fdq-card-cats{ grid-column: 1 / span 6 !important; grid-row: auto !important; }
  .fdq-pensions-grid .fdq-card-horses{ grid-column: 7 / span 6 !important; grid-row: auto !important; }
}

/* Mobile */
@media (max-width: 767px){
  .fdq-pensions-grid{
    grid-template-columns: 1fr !important;
    --fdq-gap: 14px;
  }
  .fdq-pensions-grid .fdq-card-dogs,
  .fdq-pensions-grid .fdq-card-cats,
  .fdq-pensions-grid .fdq-card-horses{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ---- Design cartes pensions (WOW, stable) ---- */
.fdq-card-animal{
  position: relative;
  overflow: hidden;
  border-radius: var(--fdq-r-xl);
  padding: 1.6rem;
  background: linear-gradient(180deg, var(--fdq-surface), var(--fdq-surface-2));
  border: 1px solid var(--fdq-line);
  box-shadow: 0 14px 40px rgba(46,42,38,.14);
  transition: transform var(--fdq-t), box-shadow var(--fdq-t), border-color var(--fdq-t);
  overflow-wrap: anywhere;
}

.fdq-card-animal::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.26), transparent 55%);
  pointer-events:none;
}

.fdq-card-animal:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(46,42,38,.20);
  border-color: rgba(122,139,106,.35);
}

.fdq-card-media{
  overflow: hidden;
  margin-bottom: 1.1rem;
  border-radius: 26px 26px 22px 22px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 92% 100%, 8% 100%, 0% 88%);
}
.fdq-card-media img{
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 600ms var(--fdq-ease);
}
.fdq-card-animal:hover .fdq-card-media img{
  transform: scale(1.035);
}

.fdq-card-content h3{ margin: 0 0 .45rem 0; color: var(--fdq-text); }
.fdq-card-content p{ margin: 0; max-width: 52ch; }

/* Featured chiens */
.fdq-card-featured{
  border-radius: 36px;
  box-shadow: 0 28px 75px rgba(46,42,38,.22);
  border-color: rgba(224,122,63,.35);
}
.fdq-card-featured::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(224,122,63,.08), transparent 55%);
}
@media (min-width: 768px){
  .fdq-card-featured{ transform: translateY(-10px); }
  .fdq-card-featured:hover{ transform: translateY(-14px); }
}

/* Mobile simplification */
@media (max-width: 767px){
  .fdq-card-animal{ padding: 1.25rem; border-radius: 24px; }
  .fdq-card-media{ border-radius: 20px; clip-path: none; }
  .fdq-card-media img{ height: 200px !important; }
  .fdq-card-featured{ transform: none !important; }
}

/* Bouton dans carte (option) */
.elementor a.elementor-button.fdq-btn-card,
.elementor .fdq-btn-card .elementor-button{
  box-shadow: 0 12px 32px rgba(46,42,38,.14);
}
.elementor a.elementor-button.fdq-btn-card:hover,
.elementor .fdq-btn-card .elementor-button:hover{
  box-shadow: 0 18px 48px rgba(46,42,38,.18);
}

/* =========================================================
   11) FDQ — PENSIONS CARDS — WARM SHADOW (PREMIUM)
   Images gérées dans Elementor
   Overlay chaud, ciné, lisibilité parfaite
========================================================= */

/* Base container */
.fdq-card-animal{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  border: 1px solid var(--fdq-line);
  box-shadow: 0 18px 55px rgba(46,42,38,.20);
}

/* Tout le contenu au-dessus */
.fdq-card-animal > *{
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   OVERLAY WARM SHADOW (principal)
--------------------------------------------------------- */
.fdq-card-animal::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(244,241,236,.40) 0%,
      rgba(46,42,38,.22) 35%,
      rgba(244,241,236,.78) 100%
    );
}

/* ---------------------------------------------------------
   Grain ciné subtil
--------------------------------------------------------- */
.fdq-card-animal::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background-image:
    radial-gradient(rgba(46,42,38,.045) 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .18;
}

/* ---------------------------------------------------------
   VARIANTES PAR ANIMAL (teintes maîtrisées)
--------------------------------------------------------- */

/* Chiens — chaleur & énergie douce */
.fdq-card-dogs::before{
  background:
    linear-gradient(
      180deg,
      rgba(244,241,236,.40) 0%,
      rgba(224,122,63,.26) 35%,
      rgba(244,241,236,.78) 100%
    );
}

/* Chats — calme & nature */
.fdq-card-cats::before{
  background:
    linear-gradient(
      180deg,
      rgba(244,241,236,.40) 0%,
      rgba(122,139,106,.28) 35%,
      rgba(244,241,236,.78) 100%
    );
}

/* Chevaux — noblesse & tradition */
.fdq-card-horses::before{
  background:
    linear-gradient(
      180deg,
      rgba(244,241,236,.40) 0%,
      rgba(90,75,55,.32) 35%,
      rgba(244,241,236,.78) 100%
    );
}



/* ---------------------------------------------------------
   SECTION [12] — RESPONSIVE GLOBAL (petits ajustements)
--------------------------------------------------------- */
@media (max-width: 1024px){
  :root{ --fdq-max: 960px; }
  body{ font-size: 16px; }
}

@media (max-width: 767px){
  :root{ --fdq-max: 100%; }

  .fdq-section{ padding: 2.4rem 0; }
  .fdq-card{ padding: 1.15rem; }

  /* Full width buttons (option): ajoute fdq-btn-full au widget bouton */
  .elementor a.elementor-button.fdq-btn-full,
  .elementor .fdq-btn-full .elementor-button{
    width: 100% !important;
    justify-content: center;
  }
}

/* =========================================================
   SECTION 13 - FDQ — MINI SURFACE TEXTE (Premium, discret, lisible)
   Classe à mettre sur le container texte:
   → fdq-card-textbox
========================================================= */

.fdq-card-textbox{
  position: relative;
  z-index: 3;

  /* Surface */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.72),
    rgba(255,255,255,.58)
  );

  border: 1px solid rgba(46,42,38,.14);
  border-radius: 20px;

  padding: 1.1rem 1.25rem;
  max-width: 92%;

  box-shadow:
    0 10px 30px rgba(46,42,38,.18),
    inset 0 1px 0 rgba(255,255,255,.55);

  backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------
   Typo à l’intérieur
--------------------------------------------------------- */
.fdq-card-textbox h3,
.fdq-card-textbox h4{
  margin-top: 0;
  color: var(--fdq-text);
}

.fdq-card-textbox p{
  color: var(--fdq-text-2);
}

/* ---------------------------------------------------------
   Boutons dans la textbox
--------------------------------------------------------- */
.fdq-card-textbox .elementor-button{
  margin-top: .6rem;
}

/* ---------------------------------------------------------
   Mobile: plus simple, plus fluide
--------------------------------------------------------- */
@media (max-width: 767px){
  .fdq-card-textbox{
    max-width: 100%;
    padding: .95rem 1.05rem;
    border-radius: 18px;
  }
}

/* =========================================================
   SECTION 14 — FOOTER ULTRA PREMIUM (FDQ)
   Structure Elementor (recommandée) :
   - Container principal footer : fdq-footer
     - Barre fine décorative : fdq-footer-topline (container vide)
     - Container contenu (3 colonnes) : fdq-footer-inner
        - Colonne 1 : fdq-footer-col
        - Colonne 2 : fdq-footer-col
        - Colonne 3 : fdq-footer-col
     - Sous-footer (copyright) : fdq-subfooter
========================================================= */

/* 14.1 — Footer wrapper */
.fdq-footer{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.22));
  border-top: 1px solid rgba(46,42,38,.12);
  padding: 0; /* on gère via inner */
  overflow: hidden;
}

/* 14.2 — Petite ligne premium en haut */
.fdq-footer-topline{
  height: 10px;
  background:
    linear-gradient(90deg,
      rgba(224,122,63,.00),
      rgba(224,122,63,.35),
      rgba(242,183,5,.35),
      rgba(122,139,106,.35),
      rgba(224,122,63,.00)
    );
  opacity: .85;
}

/* 14.3 — Inner layout (3 sous-sections) */
.fdq-footer-inner{
  max-width: var(--fdq-max);
  margin: 0 auto;
  padding: 2.2rem 1.25rem 1.9rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

/* 14.4 — Colonnes */
.fdq-footer-col{
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(46,42,38,.12);
  border-radius: 18px;
  padding: 1.15rem 1.1rem;
  box-shadow: 0 12px 34px rgba(46,42,38,.10);
}

/* Titres dans footer (Heading widget => ajoute classe fdq-footer-title au widget) */
.fdq-footer-title .elementor-heading-title{
  color: var(--fdq-text);
  font-weight: 850;
  letter-spacing: -0.01em;
  margin: 0 0 .55rem 0;
  font-size: 1.05rem;
}

/* Texte */
.fdq-footer .elementor-widget-text-editor,
.fdq-footer p{
  color: var(--fdq-text-2);
  line-height: 1.65;
}

/* Liens */
.fdq-footer a{
  color: var(--fdq-green-2);
  transition: color var(--fdq-t), opacity var(--fdq-t);
}
.fdq-footer a:hover{
  color: var(--fdq-cta);
}

/* Icônes sociales (si tu mets un widget Social Icons avec classe fdq-footer-social) */
.elementor-widget-social-icons.fdq-footer-social .elementor-social-icon{
  background: rgba(255,255,255,.35) !important;
  border: 1px solid rgba(46,42,38,.14);
  border-radius: 999px;
  transition: transform var(--fdq-t), border-color var(--fdq-t), color var(--fdq-t);
}
.elementor-widget-social-icons.fdq-footer-social .elementor-social-icon:hover{
  transform: translateY(-2px);
  border-color: rgba(224,122,63,.35);
}

/* =========================================================
   SECTION 14.5 — SUBFOOTER (FULL WIDTH / 1 LINE / TIGHT)
========================================================= */

.fdq-subfooter{
  width: 100%;
  margin: 0 !important;
  border-radius: 0 !important;

  background: linear-gradient(180deg, var(--fdq-deep), var(--fdq-deep-2));
  color: var(--fdq-deep-text);
  border-top: 1px solid var(--fdq-deep-line);

  /* hauteur “tight” */
  padding: 0 !important;
  min-height: 44px;              /* confortable (et pas trop haut) */
  display: flex;
  align-items: center;

  box-shadow: none !important;
  isolation: isolate;
}

/* Inner = PLEIN LARGEUR */
.fdq-subfooter-inner{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  padding: 0 1.25rem;            /* seulement horizontal */
  display: flex;
  align-items: center;
  justify-content: center;       /* centre le texte globalement */
  gap: 10px;

  /* 1 seule ligne */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Texte */
.fdq-subfooter-text{
  margin: 0 !important;
  line-height: 1.2;
  font-size: .92rem;
  font-weight: 520;
  letter-spacing: .01em;
}

/* Si tu as des liens: ils restent sur la même ligne aussi */
.fdq-subfooter-links{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}

/* Mobile: on garde 1 ligne, mais on réduit un peu */
@media (max-width: 767px){
  .fdq-subfooter{ min-height: 42px; }
  .fdq-subfooter-inner{ padding: 0 .9rem; font-size: .9rem; }
}

}

/* =========================================================
   15.0 — Section “Pourquoi Ferme Duquette” (4 piliers / Grid)
   Classes Elementor à utiliser :
   - Section : .fdq-pillars
   - Container parent (grid) : .fdq-pillars-grid
   - Chaque carte : .fdq-pillar-card
   - Icône (widget Icon ou Image) : .fdq-pillar-icon
   - Intro (texte sous le H2) : .fdq-pillars-intro
   ========================================================= */

/* 15.1 — Section wrapper (padding + rythme) */
.fdq-pillars{
  padding: clamp(28px, 4vw, 60px) 0;
}

/* 15.x — Force le style du H2 “Pourquoi Ferme Duquette” */
.fdq-pillars-title .elementor-heading-title{
  color: #2E2A26 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}


.fdq-pillars .fdq-pillars-intro{
  margin-top: 8px;
  max-width: 70ch;
  color: rgba(46, 42, 38, 0.82);
  line-height: 1.55;
}

/* 15.3 — Grid des 4 cartes */
.fdq-pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  margin-top: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

/* 15.4 — Carte (look premium + cohérence) */
.fdq-pillar-card{
  background: #F4F1EC;
  border: 1px solid rgba(46, 42, 38, 0.10);
  border-radius: 16px;
  padding: clamp(14px, 1.8vw, 20px);
  box-shadow: 0 10px 24px rgba(31, 28, 25, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}

/* 15.5 — Hover (doux, pas agressif) */
.fdq-pillar-card:hover{
  transform: translateY(-2px);
  border-color: rgba(122, 139, 106, 0.35);
  box-shadow: 0 14px 34px rgba(31, 28, 25, 0.10);
}

/* 15.6 — Icône (badge discret, cohérent) */
.fdq-pillar-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(122, 139, 106, 0.12);
  color: #2E2A26;
  margin-bottom: 10px;
}

/* 15.7 — Titres / texte dans la carte */
.fdq-pillar-card h3{
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.18;
  margin: 0 0 6px 0;
  color: #2E2A26;
}

.fdq-pillar-card p{
  margin: 0;
  color: rgba(46, 42, 38, 0.82);
  font-size: 15px;
  line-height: 1.50;
}

/* 15.8 — Responsive : tablette (2 colonnes) */
@media (max-width: 1024px){
  .fdq-pillars-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 15.9 — Responsive : mobile (1 colonne) */
@media (max-width: 767px){
  .fdq-pillars-grid{
    grid-template-columns: 1fr;
  }

  .fdq-pillar-icon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
}

/* =========================================================
   16.0 — Section “Comment ça marche” (3 étapes / Grid)
   Classes Elementor à utiliser :
   - Section : .fdq-steps
   - Container parent (grid) : .fdq-steps-grid
   - Chaque carte : .fdq-step-card
   - Numéro étape : .fdq-step-number
   - Intro (texte sous le H2) : .fdq-steps-intro
   ========================================================= */

/* 16.1 — Section wrapper (padding + rythme) */
.fdq-steps{
  padding: clamp(32px, 4.5vw, 64px) 0;
}

/* 16.2 — Titre + intro */
.fdq-steps .elementor-heading-title{
  color: #2E2A26 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}

.fdq-steps .fdq-steps-intro{
  margin-top: 8px;
  max-width: 72ch;
  color: rgba(46, 42, 38, 0.82);
  line-height: 1.55;
}

/* 16.3 — Grid des 3 étapes */
.fdq-steps-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
}

/* 16.4 — Carte étape */
.fdq-step-card{
  position: relative;
  background: #F4F1EC;
  border: 1px solid rgba(46, 42, 38, 0.10);
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 10px 26px rgba(31, 28, 25, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}

/* 16.5 — Hover (très subtil) */
.fdq-step-card:hover{
  transform: translateY(-2px);
  border-color: rgba(122, 139, 106, 0.35);
  box-shadow: 0 14px 36px rgba(31, 28, 25, 0.10);
}

/* 16.6 — Numéro d’étape (badge) */
.fdq-step-number{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(122, 139, 106, 0.18);
  color: #2E2A26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

/* 16.7 — Titres / texte */
.fdq-step-card h3{
  margin: 0 0 8px 0;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.2;
  color: #2E2A26;
}

.fdq-step-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(46, 42, 38, 0.82);
}

/* 16.8 — Responsive : tablette */
@media (max-width: 1024px){
  .fdq-steps-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 16.9 — Responsive : mobile */
@media (max-width: 767px){
  .fdq-steps-grid{
    grid-template-columns: 1fr;
  }

  .fdq-step-number{
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
  }
}

/* =========================================================
   16.A — Ajustement densité “Comment ça marche” (compact chic)
   ========================================================= */

/* Air global un peu réduit, mais uniforme */
.fdq-steps{
  padding: clamp(22px, 3.2vw, 24px) 0;
}

/* Espace titre → intro + intro → grid plus court */
.fdq-steps .fdq-steps-intro{
  margin-top: 6px;
}

.fdq-steps-grid{
  margin-top: clamp(12px, 1.6vw, 18px);
  gap: clamp(12px, 1.6vw, 18px);
}

/* Cards un peu plus “tight” */
.fdq-step-card{
  padding: clamp(16px, 1.8vw, 20px);
  border-radius: 16px;
}

/* =========================================================
   16.10 — Layout “Comment ça marche” avec photo (split)
   Classes :
   - Parent 2 colonnes : .fdq-steps-split
   - Colonne photo : .fdq-steps-photo
   ========================================================= */

.fdq-steps-split{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* texte un peu plus large */
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

/* Photo : look premium */
.fdq-steps-photo{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(31, 28, 25, 0.12);
  border: 1px solid rgba(46, 42, 38, 0.10);
}

/* Si tu mets l’image en <img> */
.fdq-steps-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive : mobile = photo au-dessus */
@media (max-width: 1024px){
  .fdq-steps-split{
    grid-template-columns: 1fr;
  }
}/* End custom CSS */