/*======================================
Theme Name: Divi-enfant
Description: Thème enfant Divi — base générique Graffocean
Version: 2.0
Author: Graffocean
Author URI: https://www.graffocean.com/
Template: Divi
======================================*/
/* ── FOND & COULEURS GLOBALES ── */
body {
  background-color: #ebe7df;
  font-family: 'DM Sans', sans-serif;
  color: #3c3c3b;
}

p, li, td, th {
  font-family: 'DM Sans', sans-serif;
  font-size:15px;
  line-height: 1.8em; 
}

a { color: #8ba1ae; }
a:hover { color: #3c3c3b; }

/* ── TYPOGRAPHIE TITRES ── */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6 {
  font-family: 'Cormorant Garamond', serif !important;
  color: #3c3c3b;
}

/* ── TYPOGRAPHIE CORPS DIVI ── */
.et_pb_text,
.et_pb_text p,
.et_pb_text li,
.et_pb_blurb_description,
.et_pb_module_description {
  font-family: 'DM Sans', sans-serif !important;
}

/* ── NAVIGATION ── */
.et_pb_menu,
#top-menu a,
#top-menu li a,
.et_mobile_menu a {
  font-family: 'DM Sans', sans-serif !important;
  color: #3c3c3b !important;
}
#top-menu a:hover,
#top-menu li a:hover {
  color: #8ba1ae !important;
}

/* ── BOUTONS ── */
.et_pb_button,
.et_pb_button:visited {
  background-color: #3c3c3b !important;
  color: #ffffff !important;
  border-radius: 2px !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.et_pb_button:hover {
  background-color: #8ba1ae !important;
  color: #ffffff !important;
}

/* ── FOOTER ── */
#main-footer {
  background-color: #3c3c3b !important;
}
#main-footer,
#main-footer p,
#main-footer a,
#main-footer h1,
#main-footer h2,
#main-footer h3,
#main-footer h4,
#main-footer li {
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
}
#main-footer a:hover {
  color: #8ba1ae !important;
}


/* ── Lead hero : couleur blanche ────────────────────────────── */
.vdo-hero .et_pb_text p,
.vdo-hero .et_pb_module .et_pb_text_inner p {
  color: rgba(255, 255, 255, 0.88) !important;
}


/* ── Cards univers : lift + shadow + zoom image ──────────────── */
.vdo-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  will-change: transform;
}
.vdo-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 40px -22px rgba(60, 60, 59, 0.35) !important;
  border-color: rgba(60, 60, 59, 0.22) !important;
}
.vdo-card .et_pb_image_wrap img {
  transition: transform 0.6s ease !important;
}
.vdo-card:hover .et_pb_image_wrap img {
  transform: scale(1.04) !important;
}

/* ============================================================
   Vents d'Ouest — Fix nav underline hover
   Remplacer le bloc nav dans style.css du thème enfant
   ============================================================ */

/* Reset du ::after Divi qui peut interférer */
.et_pb_menu .et_pb_menu__menu ul li a::after {
  display: none !important;
}

/* Soulignement en background-image (dégradé 1 px) : pas de ::after, qui se décalait avec le logo */
.et_pb_menu .et_pb_menu__menu ul > li > a {
  position: relative;
  text-decoration: none !important;
  background-image: linear-gradient(#3C3C3B, #3C3C3B);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease;
  padding-bottom: 2px;
}
.et_pb_menu .et_pb_menu__menu ul > li > a:hover {
  background-size: 100% 1px;
}
.ile-no-hero p{
	font-family: 'JetBrains Mono', monospace !important; 
}
.step-title p{
	font-family: 'JetBrains Mono', monospace !important; 
	color:#6E8694;
	font-size: 11px;
}
.tuiles-univers h3{
	font-size:22px !important;
} 
.tuiles-univers p{
	color:#797874;
}
.tuiles-univers a{
	color:#3C3C3B !important;
	text-transform: uppercase;
}
.link-voir a{
	color:#3C3C3B !important; 
	text-transform: uppercase;
}

.vdo-stats {
  display: flex;
  flex-wrap: wrap; /* chiffres literie : passent à la ligne au lieu de déborder */
  gap: 24px 40px;
}

.vdo-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
} 

.vdo-stat__n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 400;
  color: #3C3C3B;
  line-height: 1;
}

.vdo-stat__l {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(60, 60, 59, 0.6);
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 500;
}
.city p {
    color: #6E8694;
    letter-spacing: 2px;
    font-size: 12px !important;
}
.fiche-magasin h3{
	font-size:30px !important;
	margin-bottom: 10px;
}
.fiche-magasin .phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #8ba1ae;
    text-decoration: none;
    font-weight: 600;
}
.fiche-magasin .phone::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    /* Picto en mask (règle 6) ; couleur du SVG d'origine, pas celle du texte */
    background-color: #3C3C3B;
    -webkit-mask: url(/wp-content/uploads/2026/09/ico-phone.svg) no-repeat center / contain;
    mask: url(/wp-content/uploads/2026/09/ico-phone.svg) no-repeat center / contain;
    flex-shrink: 0;
}
.fiche-magasin p.horaires {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px;
    color: rgba(60, 60, 59, 0.5);
}

.fiche-magasin p.horaires::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: rgba(60, 60, 59, 0.65);
  -webkit-mask: url(/wp-content/uploads/2026/09/ico-clock.svg) no-repeat center / contain;
  mask: url(/wp-content/uploads/2026/09/ico-clock.svg) no-repeat center / contain;
}
.engagements h3{
	font-size:26px !important;
}

/* ============================================================
   Vents d'Ouest — Article (Journal)
   À ajouter dans style.css du thème enfant
   (remplace la version précédente de VDO_article.css)
   Toutes les règles sont scopées sur .vdo-article (classe des sections)
   ============================================================ */



/* ── Base texte ─────────────────────────────────────────────── */
.vdo-article .et_pb_text { color: #5A5A58; font-family: 'DM Sans', sans-serif; }
.vdo-article .et_pb_text p { padding-bottom: 0; }
.vdo-article .et_pb_text a { color: #3C3C3B; }
.vdo-article .et_pb_text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.12;
  color: #3C3C3B;
  margin: 0 0 24px;
  padding: 0;
}
.vdo-article .vdo-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E8694;
  margin-bottom: 12px;
}
.vdo-article .vdo-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(60, 60, 59, 0.65);
}

/* ── Fil d'Ariane ───────────────────────────────────────────── */
.vdo-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 60, 59, 0.65);
}
.vdo-article .vdo-crumbs a { color: inherit; }
.vdo-article .vdo-crumbs a:hover { color: #3C3C3B; }
.vdo-crumbs span:not([aria-current]) { opacity: 0.5; }

/* ── En-tête article ────────────────────────────────────────── */
.vdo-article .et_pb_text h1.vdo-art-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: #3C3C3B;
  margin: 0;
  padding: 0;
  text-wrap: balance;
}
.vdo-art-title em { font-style: italic; font-weight: 400; color: #6E8694; }

.vdo-article .vdo-chapo {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.45;
  color: #5A5A58;
  text-wrap: pretty;
}

.vdo-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(60, 60, 59, 0.14);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 60, 59, 0.65);
}
.vdo-byline b { font-weight: 500; color: #3C3C3B; }

/* Image de couverture 21/9 + image intégrée 3/2 */
.vdo-art-cover .et_pb_image_wrap,
.vdo-inline-img .et_pb_image_wrap { display: block; border-radius: 12px; overflow: hidden; }
.vdo-art-cover img,
.vdo-inline-img img { width: 100%; object-fit: cover; }
.vdo-art-cover img { aspect-ratio: 21 / 9; }
.vdo-inline-img img { aspect-ratio: 3 / 2; }

/* ── Corps de texte (ligne centrée 680 px) ──────────────────── */
.vdo-prose { counter-reset: fam; }
.vdo-prose [id] { scroll-margin-top: 120px; }

.vdo-prose .et_pb_text p {
  font-size: 17.5px;
  line-height: 1.8;
  color: #5A5A58;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.vdo-prose .et_pb_text p:last-child { margin-bottom: 0; }
.vdo-prose strong { color: #3C3C3B; font-weight: 500; }
.vdo-prose .et_pb_text p.vdo-lede { font-size: 19px; color: #3C3C3B; }

.vdo-sec-n {
  display: block;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #6E8694;
}

/* Liste à tirets */
.vdo-article .et_pb_text ul.vdo-dash {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vdo-dash li {
  /* Pas de grille : le texte après le <strong> deviendrait un 3e élément, renvoyé dans la colonne du tiret */
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  line-height: 1.7;
}
.vdo-dash li::before { content: "—"; position: absolute; left: 0; color: #6E8694; }

/* Citation */
.vdo-article .et_pb_text blockquote.vdo-pullquote {
  margin: 0;
  padding: 8px 0 8px 32px;
  border-left: 1px solid #8BA1AE;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.3;
  color: #3C3C3B;
}
.vdo-pullquote cite {
  display: block;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(60, 60, 59, 0.65);
}

/* ── Onglets « position de sommeil » (module Onglets natif) ─── */
.vdo-article .et_pb_tabs.vdo-positions {
  border: 0;
  margin: 32px 0 72px;
}
.vdo-positions .et_pb_tabs_controls {
  counter-reset: pos;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(60, 60, 59, 0.14);
  border: 1px solid rgba(60, 60, 59, 0.14);
}
.vdo-positions .et_pb_tabs_controls::after { display: none; }
.vdo-positions .et_pb_tabs_controls li {
  counter-increment: pos;
  float: none;
  border: 0;
  background: #FFFFFF;
  transition: background 0.2s ease;
}
.vdo-positions .et_pb_tabs_controls li:hover { background: #EBE7DF; }
.vdo-article .vdo-positions .et_pb_tabs_controls li a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  line-height: 1.1;
  color: #3C3C3B !important;
}
.vdo-positions .et_pb_tabs_controls li a::before {
  content: "Position 0" counter(pos);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}
.vdo-positions .et_pb_tabs_controls li.et_pb_tab_active { background: #3C3C3B; }
.vdo-article .vdo-positions .et_pb_tabs_controls li.et_pb_tab_active a { color: #FFFFFF !important; }
.vdo-positions .et_pb_all_tabs {
  background: #FFFFFF;
  border: 1px solid rgba(60, 60, 59, 0.14);
  border-top: 0;
  padding: 24px 22px;
}
.vdo-prose .vdo-positions .et_pb_tab p { font-size: 16px; line-height: 1.7; }

/* ── Familles (module Bascule natif) ────────────────────────── */
.vdo-article .et_pb_toggle.vdo-family {
  counter-increment: fam;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(60, 60, 59, 0.14);
  padding: 0;
  margin-bottom: 0 !important;
}
.vdo-article .et_pb_text + .vdo-family { border-top: 1px solid rgba(60, 60, 59, 0.14); }
.vdo-article .vdo-family .et_pb_toggle_title {
  position: relative;
  padding: 24px 40px 24px 64px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: #3C3C3B;
}
/* Numéro 01 / 02 / 03 */
.vdo-family .et_pb_toggle_title::after {
  content: "0" counter(fam);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(60, 60, 59, 0.65);
}
/* Icône + qui pivote en × à l'ouverture */
.vdo-article .vdo-family .et_pb_toggle_title::before {
  content: "+" !important;
  display: block !important;
  right: 0;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 18px;
  color: #6E8694;
  transition: transform 0.3s ease;
}
.vdo-article .vdo-family.et_pb_toggle_open .et_pb_toggle_title::before {
  transform: translateY(-50%) rotate(45deg);
}
.vdo-family .et_pb_toggle_content { padding: 0 0 28px 64px; }
.vdo-prose .vdo-family .et_pb_toggle_content p { font-size: 16.5px; margin: 0 0 14px; }
.vdo-prose .vdo-family .et_pb_toggle_content p:last-child { margin-bottom: 0; }

/* ── Tailles ────────────────────────────────────────────────── */
.vdo-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.vdo-size {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(60, 60, 59, 0.14);
}
.vdo-size i { display: block; border: 1px solid #3C3C3B; background: #EBE7DF; }
.vdo-size i.s90  { width: 22px; height: 46px; margin-top: 18px; }
.vdo-size i.s140 { width: 34px; height: 46px; margin-top: 18px; }
.vdo-size i.s160 { width: 40px; height: 50px; margin-top: 14px; }
.vdo-size i.s180 { width: 46px; height: 50px; margin-top: 14px; }
.vdo-size .d { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1; color: #3C3C3B; }
.vdo-size .u { font-size: 13px; line-height: 1.4; color: rgba(60, 60, 59, 0.65); }

/* ── Fin d'article ──────────────────────────────────────────── */
.vdo-article .vdo-art-end {
  padding-top: 28px;
  border-top: 1px solid rgba(60, 60, 59, 0.14);
  text-align: right;
}

/* ── Lien fantôme avec flèche ───────────────────────────────── */
.vdo-article .vdo-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3C3C3B;
}
.vdo-ghost::after {
  content: "";
  width: 20px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h22M16 1l7 6-7 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h22M16 1l7 6-7 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s ease;
}
.vdo-ghost:hover::after { transform: translateX(6px); }
.vdo-align-right { text-align: right; }

/* ── À lire aussi ───────────────────────────────────────────── */
.vdo-article.vdo-related .et_pb_text h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; margin: 0; }
.vdo-news .et_pb_image_wrap { display: block; overflow: hidden; }
.vdo-news .et_pb_image img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.vdo-news:hover .et_pb_image img { transform: scale(1.04); }
.vdo-news .vdo-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 60, 59, 0.65);
  margin-bottom: 12px;
}
.vdo-article .vdo-news h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.22;
  margin: 0 0 12px;
  padding: 0;
}
.vdo-news .vdo-ex { font-size: 14.5px; line-height: 1.6; color: rgba(60, 60, 59, 0.65); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .vdo-align-right { text-align: left; }
}
@media (max-width: 640px) {
  .vdo-positions .et_pb_tabs_controls { grid-template-columns: 1fr; }
  .vdo-family .et_pb_toggle_content { padding-left: 0; }
  .vdo-sizes { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   Vents d'Ouest — Composants de pages (en-tête, fiches magasins)
   Remplacent les style="" inline des pages (lot A, oct. 2026)
   ============================================================ */

/* ── En-tête de page : surtitre, H1, intro ──────────────────── */
.et_pb_text p.vdo-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E8694;
  margin: 0;
}
.et_pb_text h1.vdo-page-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #3C3C3B;
  margin: 0;
}
.et_pb_text p.vdo-intro {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(60, 60, 59, 0.65);
  max-width: 56ch;
  margin: 0;
}

/* ── Fiche magasin (page Nos magasins) ──────────────────────── */
.et_pb_text h3.vdo-store-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2em;
  color: #3C3C3B;
  margin: 0 0 14px;
}
.et_pb_text address.vdo-address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(60, 60, 59, 0.7);
}
.et_pb_text p.vdo-store-tel { margin-top: 10px; }
.et_pb_text a.vdo-tel {
  font-weight: 500;
  font-size: 14.5px;
  color: #3C3C3B;
  text-decoration: none;
}
.et_pb_text p.vdo-store-desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.65;
}

/* ── Lien « Découvrir… → » ──────────────────────────────────── */
.et_pb_text a.vdo-link-more {
  color: #3C3C3B;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ── Variantes de l'intro ───────────────────────────────────── */
.et_pb_text p.vdo-intro--wide { max-width: 64ch; }
.et_pb_text p.vdo-intro--center { margin: 0 auto; }

/* ── Titre de section (H2) ──────────────────────────────────── */
.et_pb_text h2.vdo-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  color: #3C3C3B;
  margin: 0;
}

/* Paragraphe qui en suit un autre dans le même module */
.et_pb_text p.vdo-suite { margin-top: 16px; }

/* ── Valeurs : picto + titre + texte (À propos) ─────────────── */
.et_pb_text h3.vdo-value-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2em;
  color: #3C3C3B;
  margin: 0 0 12px;
}
.et_pb_text p.vdo-value-text {
  color: rgba(60, 60, 59, 0.7);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 38ch;
}

/* ── Pictos 44 px au-dessus d'un titre (::before + mask) ────── */
.vdo-ico::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  color: #6E8694;
  background-color: currentColor;
  -webkit-mask: var(--vdo-ico) no-repeat center / contain;
  mask: var(--vdo-ico) no-repeat center / contain;
}
.vdo-ico--etoile { --vdo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z'/%3E%3C/svg%3E"); }
.vdo-ico--coeur { --vdo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.vdo-ico--equipe { --vdo-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

/* ── Boutons (règle 5) : classe vdo-btn posée sur le <a>, sans custom_button ── */
body #page-container .et_pb_section .et_pb_button.vdo-btn {
  padding: 14px 22px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background-color: #3C3C3B !important;
  border: 1px solid #3C3C3B !important;
  border-radius: 2px !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}
body #page-container .et_pb_section .et_pb_button.vdo-btn:hover {
  padding: 14px 22px !important;
  background-color: #8BA1AE !important;
  border-color: #8BA1AE !important;
  color: #FFFFFF !important;
}
body #page-container .et_pb_section .et_pb_button.vdo-btn::before,
body #page-container .et_pb_section .et_pb_button.vdo-btn::after {
  display: none !important;
}

/* Variante contour (bouton secondaire) */
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--outline {
  color: #3C3C3B !important;
  background-color: transparent !important;
  border-color: #3C3C3B !important;
}
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--outline:hover {
  color: #FFFFFF !important;
  background-color: #3C3C3B !important;
  border-color: #3C3C3B !important;
}

/* Variante contour blanc (sur photo, hero) */
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--outline-light {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border-color: #FFFFFF !important;
}
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--outline-light:hover {
  color: #3C3C3B !important;
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Variante avec flèche (maquette : Icon.Arrow, 20 × 14, écart 10 px) */
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--arrow::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  width: 20px;
  height: 14px;
  margin: 0 0 0 10px !important;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h22M16 1l7 6-7 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h22M16 1l7 6-7 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Boutons côte à côte : colonne de classe vdo-btn-row */
/* (l'espace au-dessus vient de la marge basse du module précédent) */
.vdo-btn-row .et_pb_button_module_wrapper {
  display: inline-block;
  vertical-align: top;
  margin: 0 14px 0 0 !important;
}
@media (max-width: 600px) {
  .vdo-btn-row .et_pb_button_module_wrapper {
    display: block;
    margin: 0 0 14px !important;
  }
  .vdo-btn-row .et_pb_button_module_wrapper:last-child { margin-bottom: 0 !important; }
}

/* ── Intro : largeur moyenne ────────────────────────────────── */
.et_pb_text p.vdo-intro--medium { max-width: 60ch; }

/* ── Cartes produits / univers ──────────────────────────────── */
.et_pb_text h3.vdo-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2em;
  color: #3C3C3B;
  margin: 0 0 10px;
}
.et_pb_text p.vdo-card-text {
  color: rgba(60, 60, 59, 0.65);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Ancres de section (#canapes…) : ne pas passer sous l'en-tête fixe */
.et_pb_section[id] { scroll-margin-top: 120px; }

/* ── Colonnes « valeurs » (À propos) : en mobile, filet horizontal ── */
@media (max-width: 980px) {
  .et_pb_row .et_pb_column.vdo-value-col {
    border-right-width: 0 !important;
    padding-right: 0 !important;
  }
  .et_pb_row .et_pb_column.vdo-value-col:not(:last-child) {
    border-bottom: 1px solid rgba(60, 60, 59, 0.14) !important;
    padding-bottom: 32px !important;
  }
}

/* ── Accueil : hero ─────────────────────────────────────────── */
.vdo-hero .et_pb_text p.vdo-eyebrow--light { color: rgba(255, 255, 255, 0.78) !important; }
.et_pb_text p.vdo-hero-lead {
  font-size: 17px;
  line-height: 1.75;
  max-width: 62ch;
  margin: 0;
}

/* ── Accueil : fiches magasins ──────────────────────────────── */
.fiche-magasin address { font-style: normal; }
/* Voile de lisibilité sur la photo (maquette : .hero::after) */
.et_pb_section.vdo-hero { position: relative; isolation: isolate; }
.et_pb_section.vdo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(26, 26, 26, 0.62) 0%, rgba(26, 26, 26, 0.28) 45%, rgba(26, 26, 26, 0.05) 75%);
}

/* ── Accueil : mobile (valeurs de la maquette) ──────────────── */
@media (max-width: 980px) {
  .et_pb_section.vdo-hero .et_pb_row:first-child { width: 92% !important; }
}
@media (max-width: 720px) {
  .et_pb_section.vdo-hero .et_pb_row:first-child { padding: 120px 0 64px !important; }
  .vdo-hero .et_pb_text h1 { font-size: 40px !important; }
}

/* ── Texte courant en grand corps (blocs 50/50 : Services…) ──── */
.vdo-text-lg p {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(60, 60, 59, 0.7);
}

/* Blocs 50/50 : la colonne de texte perd sa marge latérale une fois empilée */
@media (max-width: 980px) {
  .et_pb_row .et_pb_column.vdo-split-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Hero de page intérieure (photo + voile, ex. Literie) ───── */
.et_pb_text h1.vdo-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.15;
  color: #FFFFFF;
}

/* ── Encarts à titre court (cartes literie, encart conseil) ──── */
.et_pb_text.vdo-feature h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #3C3C3B;
}
.et_pb_text.vdo-feature p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(60, 60, 59, 0.7);
}

/* ── Bandeau sombre centré ──────────────────────────────────── */
.et_pb_text.vdo-band-dark h2 {
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
}
.et_pb_text.vdo-band-dark p,
.et_pb_text.vdo-band-dark address {
  font-size: 16px;
  line-height: 1.7;
  font-style: normal;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}
.et_pb_text.vdo-band-dark a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero en mobile : le texte occupe toute la largeur → voile plus uniforme */
@media (max-width: 720px) {
  .et_pb_section.vdo-hero::after {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.45) 0%, rgba(26, 26, 26, 0.6) 100%);
  }
}

/* ── Contact : titres de bloc, note, coordonnées ─────────────── */
.et_pb_text .vdo-block-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: #3C3C3B;
  margin: 0;
}
.et_pb_text .vdo-block-title--spaced { margin-bottom: 24px; }
.et_pb_text p.vdo-note {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(60, 60, 59, 0.65);
}
.et_pb_text.vdo-contact-store h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600;
  font-size: 16px;
  color: #3C3C3B;
}
.et_pb_text.vdo-contact-store p,
.et_pb_text.vdo-contact-store address {
  font-size: 15px;
  line-height: 1.9;
  font-style: normal;
  color: rgba(60, 60, 59, 0.7);
}

/* ── Formulaires Contact Form 7 ─────────────────────────────── */
.vdo-form .wpcf7 p { margin: 0 0 18px; padding: 0; }
.vdo-form .wpcf7 label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3C3C3B;
}
.vdo-form .wpcf7 input[type="text"],
.vdo-form .wpcf7 input[type="email"],
.vdo-form .wpcf7 input[type="tel"],
.vdo-form .wpcf7 select,
.vdo-form .wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: #3C3C3B;
  background: #FFFFFF;
  border: 1px solid rgba(60, 60, 59, 0.25);
  border-radius: 2px;
  box-sizing: border-box;
}
.vdo-form .wpcf7 textarea { min-height: 160px; resize: vertical; }
.vdo-form .wpcf7 input:focus,
.vdo-form .wpcf7 select:focus,
.vdo-form .wpcf7 textarea:focus {
  border-color: #3C3C3B;
  outline: 2px solid #8BA1AE;
  outline-offset: 1px;
}
.vdo-form .wpcf7 input[type="submit"] {
  padding: 14px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #3C3C3B;
  border: 1px solid #3C3C3B;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.vdo-form .wpcf7 input[type="submit"]:hover {
  background: #8BA1AE;
  border-color: #8BA1AE;
}
.vdo-form .wpcf7-not-valid-tip { font-size: 13px; margin-top: 6px; }
.vdo-form .wpcf7 form .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 2px;
}
/* iOS zoome sur les champs de moins de 16 px au focus */
@media (max-width: 767px) {
  .vdo-form .wpcf7 input[type="text"],
  .vdo-form .wpcf7 input[type="email"],
  .vdo-form .wpcf7 input[type="tel"],
  .vdo-form .wpcf7 select,
  .vdo-form .wpcf7 textarea { font-size: 16px; }
}

/* ── Pages boutiques : infos pratiques ──────────────────────── */
.et_pb_text.vdo-store-info p.vdo-eyebrow { margin: 0 0 6px; }
.et_pb_text.vdo-store-info p.vdo-eyebrow:not(:first-child) { margin-top: 28px; }
.et_pb_text.vdo-store-info address,
.et_pb_text.vdo-store-info p:not(.vdo-eyebrow) {
  font-size: 17px;
  line-height: 1.75;
  font-style: normal;
  color: rgba(60, 60, 59, 0.7);
  padding-bottom: 0;
}
.et_pb_text.vdo-store-info a.vdo-tel { font-size: 17px; }

/* ── Galeries (pages boutiques) ─────────────────────────────── */
.vdo-gallery .et_pb_gallery_image { border-radius: 8px; overflow: hidden; }
.vdo-gallery .et_pb_gallery_image img { transition: transform 0.6s ease; }
.vdo-gallery .et_pb_gallery_image:hover img { transform: scale(1.04); }
.vdo-gallery .et_overlay { display: none; }

/* ── Journal : grille d'articles (module Blog, sur le modèle « À lire aussi ») ── */
.vdo-blog .et_pb_post {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.vdo-blog .et_pb_image_container {
  order: 0;
  margin: 0 0 20px !important;
  border-radius: 8px;
  overflow: hidden;
}
.vdo-blog .et_pb_image_container img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.vdo-blog .et_pb_post:hover .et_pb_image_container img { transform: scale(1.04); }
.vdo-blog .post-meta {
  order: 1;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 60, 59, 0.65) !important;
}
.vdo-blog .entry-title {
  order: 2;
  margin: 0 0 12px;
  padding: 0;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.22;
}
.vdo-blog .entry-title a { color: #3C3C3B; }
.vdo-blog .post-content { order: 3; }
.vdo-blog .post-content p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(60, 60, 59, 0.65);
}
.vdo-blog .pagination a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3C3C3B;
}

/* ── Pages légales : texte courant ──────────────────────────── */
.et_pb_text.vdo-legal { max-width: 760px; }
.et_pb_text.vdo-legal h2 {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: #3C3C3B;
  margin: 40px 0 12px;
  padding: 0;
}
.et_pb_text.vdo-legal h2:first-child { margin-top: 0; }
.et_pb_text.vdo-legal p,
.et_pb_text.vdo-legal li {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(60, 60, 59, 0.8);
}
.et_pb_text.vdo-legal p { padding-bottom: 0; margin-bottom: 12px; }
.et_pb_text.vdo-legal ul { margin: 0 0 12px; padding-left: 20px; }
.et_pb_text.vdo-legal a { color: #3C3C3B; text-decoration: underline; text-underline-offset: 3px; }

/* ── Fiche produit (sous-pages d'Univers, maquette « Canapé lin naturel ») ── */
.vdo-produit .vdo-crumbs a { color: inherit; }
.vdo-produit .vdo-crumbs a:hover { color: #3C3C3B; }
.vdo-produit .et_pb_text p.vdo-chapo {
  font-family: 'Cormorant Garamond', serif !important; /* .et_pb_text p impose DM Sans en !important */
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.5;
  color: #5A5A58;
  text-wrap: pretty;
}
/* Lignes 50/50 en grille : écart 80 px, centrées (en-tête : 64 px, alignées en bas) */
.vdo-produit .et_pb_row.vdo-up-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: center;
}
.vdo-produit .et_pb_row.vdo-up-row::after { display: none; }
.vdo-produit .et_pb_row.vdo-up-row > .et_pb_column { width: auto !important; margin: 0 !important; }
.vdo-produit .et_pb_row.vdo-up-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
.vdo-produit .et_pb_row.vdo-up-row--rev .vdo-up-txt { order: 2; }
@media (max-width: 980px) {
  .vdo-produit .et_pb_row.vdo-up-row { grid-template-columns: 1fr !important; row-gap: 36px; }
  .vdo-produit .et_pb_row.vdo-up-head { row-gap: 24px; }
  .vdo-produit .et_pb_row.vdo-up-row--rev .vdo-up-txt { order: 0; }
}
/* Photos : principale 16/7, blocs 4/5, cartes 4/3 */
.vdo-up-cover .et_pb_image_wrap,
.vdo-up-img .et_pb_image_wrap { display: block; border-radius: 12px; overflow: hidden; }
.vdo-up-cover img,
.vdo-up-img img,
.vdo-up-card-img img { width: 100%; object-fit: cover; }
.vdo-up-cover img { aspect-ratio: 16 / 7; }
.vdo-up-img img { aspect-ratio: 4 / 5; }
.vdo-up-card-img img { aspect-ratio: 4 / 3; }
.vdo-up-card-img { margin-bottom: 0 !important; }
.vdo-produit .et_pb_text p.vdo-up-cap {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(60, 60, 59, 0.65);
}
.vdo-produit .vdo-up-text p {
  font-size: 17px;
  line-height: 1.8;
  color: #5A5A58;
  max-width: 52ch;
  padding-bottom: 18px;
}
.vdo-produit .vdo-up-text p:last-of-type { padding-bottom: 0; }
/* Lien fantôme « … → » */
.vdo-produit .et_pb_text a.vdo-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3C3C3B;
}
/* Galerie : 3 colonnes carrées (2 en mobile) */
.vdo-up-gallery .et_pb_gallery_items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vdo-up-gallery .et_pb_gallery_item { width: auto !important; margin: 0 !important; clear: none !important; }
.vdo-up-gallery .et_pb_gallery_image { border-radius: 12px; }
.vdo-up-gallery .et_pb_gallery_image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 720px) {
  .vdo-up-gallery .et_pb_gallery_items { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* Encart « Où le voir » sur fond anthracite */
.vdo-produit .et_pb_row.vdo-up-cta { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; }
.vdo-up-cta .et_pb_text p.vdo-eyebrow { color: #8BA1AE; }
.vdo-up-cta .et_pb_text h2.vdo-section-title { color: #FFFFFF; }
.vdo-produit .vdo-up-cta .vdo-up-text p { color: rgba(255, 255, 255, 0.82); font-size: 16.5px; line-height: 1.75; max-width: 46ch; }
.vdo-up-cta .et_pb_text address.vdo-address { color: rgba(255, 255, 255, 0.85); margin-bottom: 12px; }
.vdo-up-cta .et_pb_text a.vdo-tel { color: #FFFFFF; font-size: inherit; }
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--light {
  color: #3C3C3B !important;
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
body #page-container .et_pb_section .et_pb_button.vdo-btn.vdo-btn--light:hover {
  color: #FFFFFF !important;
  background-color: #8BA1AE !important;
  border-color: #8BA1AE !important;
}
/* Dans le même univers : en-tête titre / lien */
.vdo-produit .et_pb_row.vdo-up-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.vdo-produit .et_pb_row.vdo-up-hd::after { display: none; }
.vdo-produit .et_pb_row.vdo-up-hd > .et_pb_column { width: auto !important; margin: 0 !important; }

/* ── Accessibilité : focus clavier visible ──────────────────── */
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible,
.et_pb_toggle_title:focus-visible,
.et_pb_tabs_controls a:focus-visible {
  outline: 2px solid #6E8694;
  outline-offset: 3px;
}

/* ── Accessibilité : pas d'animation si le visiteur l'a désactivée ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .vdo-card:hover,
  .vdo-card:hover .et_pb_image_wrap img,
  .vdo-news:hover .et_pb_image img,
  .vdo-blog .et_pb_post:hover .et_pb_image_container img,
  .vdo-gallery .et_pb_gallery_image:hover img {
    transform: none !important;
  }
}

/* ── Pied de page : survol des liens (le a:hover global = couleur du fond) ── */
.et-l--footer a:hover,
.et-l--footer a:focus-visible { color: #FFFFFF !important; }

/* ── Pied de page : ligne de signature (© + Graffocean / mentions légales) ──
   Classe vdo-signature posée sur la ligne dans le Theme Builder */
.et-l--footer .vdo-signature,
.et-l--footer .vdo-signature p,
.et-l--footer .vdo-signature a {
  font-size: 12px !important;
  line-height: 0.8em !important;
}
/* En mobile la signature passe sur 2 lignes : interligne lisible */
@media (max-width: 767px) {
  .et-l--footer .vdo-signature,
  .et-l--footer .vdo-signature p,
  .et-l--footer .vdo-signature a { line-height: 1.5em !important; }
  .et-l--footer .vdo-signature .et_pb_text,
  .et-l--footer .vdo-signature .et_pb_text p { text-align: left !important; }
}
