/*
Theme Name: GOXL
Author: Damien
Description: Theme GOXL — transport et demenagement. Page d'accueil sur mesure.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goxl
*/
@font-face {
	font-family: 'Lausanne';
	src: url('assets/fonts/Lausanne-Regular-1.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
:root {
  --primary:   #F8F6EF;
  --secondary: #272102;
  --text:      #777777;
  --accent:    #FFFFFF;
  --yellow:    #FFE15A;
  --yellow2:   #FFD631;
  --border:    #EBE5DA;
  --cream:     #F6F1DE;
  --gray2:     #A0A0A0;
  --goxl-h:    108px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--primary); color: var(--secondary); font-family: 'Lausanne', 'Plus Jakarta Sans', sans-serif; font-size: 16px; line-height: 1.5; overflow-x: clip; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: 0; background: none; }

.wrap {
  max-width: 1488px; margin: 0 auto;
  padding: 0 24px; box-sizing: border-box;
}

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 6px 14px; border-radius: 48px; width: fit-content;
  background: rgba(255,255,255,0.1);
  border: 1px solid #fff;
  font-size: 16px; line-height: 1.5; font-weight: 400;
  color: #777;
  white-space: nowrap;
}

.hl, .title-highlight {
  display: inline;
  padding: 0 10px;
  border-left: 1px solid var(--secondary);
  background: linear-gradient(90deg, var(--yellow2) 0%, var(--primary) 100%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hl-inv {
  display: inline;
  padding: 0 10px;
  border-left: 1px solid var(--secondary);
  background: linear-gradient(90deg, var(--primary) 0%, #FFDE6A 100%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.btn {

  position: relative;
  display: inline-flex; justify-content: center; align-items: center;
  gap: 8px;
  padding: 20px 26px;
  box-sizing: border-box;
  isolation: isolate;
  white-space: nowrap;
  font-size: 16px; font-weight: 400; color: var(--secondary);
  background:
    linear-gradient(0deg, var(--yellow), var(--yellow)),
    linear-gradient(360deg, rgba(255,201,57,0) -54.97%, rgba(255,201,57,0.4) 83.33%),
    var(--accent);
  border: none;
  border-radius: 6px;
  box-shadow:
    0 34px 21px rgba(57,47,90,.11),
    0 15px 15px rgba(255,206,44,.19),
    0 4px 8px rgba(57,47,90,.19),
    0 2px 4px rgba(0,0,0,.15),
    inset -4px -4px 5px rgba(191,108,0,.2),
    inset 0 -6px 14px #FFCE2C,
    inset 0 -1px 0 rgba(255,255,255,.8);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.btn::before {
  content: '';
  position: absolute;
  width: 164.19px;
  height: 32.47px;
  left: calc(50% - 164.19px / 2 - 9.6px);
  top: calc(50% - 32.47px / 2 - 3.76px);
  background: linear-gradient(180deg, var(--accent) 0%, #FEE093 100%);
  opacity: .6; filter: blur(9.87px); z-index: 0; pointer-events: none;
}
.btn span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.btn span::after {
  content: '';
  flex-shrink: 0; width: 12px; height: 12px;
  background-color: var(--secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88 1.88L10.2 6l-4.32 4.12' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.2 6H1.8' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88 1.88L10.2 6l-4.32 4.12' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.2 6H1.8' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 12px; mask-size: 12px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.btn:hover {
  box-shadow:
    0 34px 21px rgba(57,47,90,.15),
    0 15px 15px rgba(255,206,44,.30),
    0 4px 8px rgba(57,47,90,.22),
    0 2px 4px rgba(0,0,0,.18),
    inset -4px -4px 5px rgba(191,108,0,.2),
    inset 0 -6px 14px #FFCE2C,
    inset 0 -1px 0 rgba(255,255,255,.8);
  transform: translateY(-1px);
}

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--goxl-h);
  /* Transparent en haut de page (au-dessus du hero). Au scroll, la classe .is-scrolled
     (ajoutee en JS) restaure le fond creme + flou + filet d'avant ; la transition anime
     le changement en douceur. Le filet est deja la en transparent pour eviter un saut. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
  background: rgba(248,246,239,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: 1488px; margin: 0 auto; padding: 0 24px; gap: 24px;
}
.nav-logo img { height: 60px; width: auto; display: block; }
.nav-links  { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 16px; color: var(--secondary); opacity: .8; transition: opacity .2s; }
.nav-inner > .btn { margin: 22px 0; }
.nav-links a:hover { opacity: 1; }

.hero {
  position: relative; overflow: visible;
  background: linear-gradient(183.75deg, #FBFBFB -8.92%, #EEEFF1 88.17%);
  min-height: 800px;
  padding-top: calc(var(--goxl-h) + 64px);
  padding-bottom: 0;
}

.hero-overlay {
  /* +50px : descend l'ensemble des meubles flottants du hero (28px initiaux + ~22px
     demandes ensuite) pour qu'ils ne remontent pas trop haut sous le header transparent. */
  position: absolute; top: calc(var(--goxl-h) + 50px); left: 50%; transform: translateX(-50%);
  width: min(100vw, 1600px); height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.hero-overlay > div { position: absolute; display: flex; align-items: center; justify-content: center; }
.hero-overlay img   { object-fit: contain; user-select: none; pointer-events: none; }

@keyframes hfa { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
@keyframes hfb { 0%,100%{translate:0 0} 50%{translate:0 -5px} }
@keyframes hfc { 0%,100%{translate:0 0} 50%{translate:0 -9px} }
@keyframes hfd { 0%,100%{translate:0 0} 50%{translate:0 -3px} }
.hero-overlay > div:nth-child(1)  { animation: hfb 6.8s ease-in-out 0.0s  infinite; }
.hero-overlay > div:nth-child(2)  { animation: hfa 5.9s ease-in-out 1.2s  infinite; }
.hero-overlay > div:nth-child(3)  { animation: hfd 5.3s ease-in-out 2.5s  infinite; }
.hero-overlay > div:nth-child(4)  { animation: hfc 7.2s ease-in-out 0.7s  infinite; }
.hero-overlay > div:nth-child(5)  { animation: hfa 6.4s ease-in-out 1.9s  infinite; }
.hero-overlay > div:nth-child(6)  { animation: hfd 5.6s ease-in-out 3.1s  infinite; }
.hero-overlay > div:nth-child(7)  { animation: hfb 7.0s ease-in-out 0.4s  infinite; }
.hero-overlay > div:nth-child(8)  { animation: hfc 6.1s ease-in-out 2.2s  infinite; }
.hero-overlay > div:nth-child(9)  { animation: hfa 5.7s ease-in-out 1.0s  infinite; }
.hero-overlay > div:nth-child(10) { animation: hfd 6.5s ease-in-out 0.3s  infinite; }
.hero-overlay > div:nth-child(11) { animation: hfb 7.3s ease-in-out 1.6s  infinite; }
.hero-overlay > div:nth-child(12) { animation: hfc 6.0s ease-in-out 2.8s  infinite; }

.hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; padding: 0 24px; max-width: 1488px; margin: 0 auto;
}

.social-proof {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: 48px;
  background: rgba(255,255,255,0.1); border: 1px solid #fff;
  box-shadow: 0 0 14px rgba(255,214,49,.4);
  font-size: 16px; line-height: 1.5; color: var(--secondary); white-space: nowrap;
}
.sp-avs { display: inline-flex; }
.sp-avs span {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--cream); margin-right: -5px; display: inline-block;
}

.hero-h1 {
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 400; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--secondary);
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 4px 4px rgba(0,0,0,.25);
  max-width: 900px;
}

.hero-h1 .hero-hl {
  position: relative; isolation: isolate;
}
.hero-h1 .hero-hl::before {
  content: '';
  position: absolute; inset: 0 -0.3em 0 -0.25em;
  background: linear-gradient(90deg, var(--yellow2) 0%, var(--cream) 95.3%);
  border-left: 1px solid var(--secondary);
  z-index: -1;
}

/* Meme largeur que le reste du contenu : 1440px (= .hero-content 1488px - 48px de
   padding lateral). Le formulaire s'aligne ainsi sur les autres sections. */
.hero-form-wrap { width: 100%; max-width: 1440px; margin: 62px auto 78px; }

.hero-iframe-wrap { width: 100%; }
.hero-iframe-wrap iframe { width: 100%; max-width: 100%; border: 0; display: block; }

.estimation-card {
  border: 8px solid #fff;
  border-radius: 8px;
  background: linear-gradient(171.1deg, var(--primary) 49.562%, #FFD631 507.48%);
  padding: 48px 40px;
  display: flex; flex-direction: column; gap: 32px;
  align-items: center;
  filter: drop-shadow(0px 4px 7px rgba(0,0,0,.06));
}
.form-card-label {
  font-size: 32px; font-weight: 400; line-height: 1.2;
  color: var(--secondary); text-align: center;
}
.form-fields { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.form-row    { display: flex; gap: 16px; }

.f-field {
  flex: 1; display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px;
  border-radius: 4px;
  background: #fff;
  border: none;
  font-family: inherit; font-size: 16px; color: var(--gray2);
}
.f-field input {
  flex: 1; border: 0; background: transparent;
  font-family: inherit; font-size: inherit; color: var(--secondary); outline: 0;
}
.f-field input::placeholder { color: var(--gray2); }
.f-field svg { flex-shrink: 0; }

.partners {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.partners-inner { display: flex; align-items: center; gap: 48px; }
.partners-label {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 30px; font-weight: 400; line-height: 1.3;
  color: var(--secondary);
}
.partners-logos {
  flex: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.partners-logos img { width: 115px; height: 70px; object-fit: contain; }

.concept-feat {
  padding: 104px 0; overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.concept-feat-inner {
  max-width: 1488px; margin: 0 auto;
  display: flex; align-items: stretch; gap: 30px;
  padding-left: clamp(16px, calc((100vw - 1440px) / 2), 24px);
}

.concept-intro {
  flex: 0 0 363px; width: 363px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px; padding: 40px 32px;
  background: var(--cream);
  border: 8px solid #fff;
  border-radius: 8px;
  overflow: hidden; position: relative;
}
.concept-intro-head { display: flex; flex-direction: column; gap: 24px; }
.concept-intro-title {
  font-size: 40px; font-weight: 400; line-height: 1.3;
  color: var(--secondary); position: relative;
}

.concept-intro-title .hl-block {
  position: absolute; left: 0; top: 111px;
  width: 252px; height: 44px;
  background: linear-gradient(90deg, #FFD631, #FAEDB9);
  border-left: 1px solid var(--secondary);
  z-index: -1;
}
.concept-intro-desc { font-size: 16px; color: var(--text); line-height: 1.5; }

/* overflow-x:clip masque les cartes a venir sur les cotes ; overflow-y:visible
   laisse la drop-shadow des cartes (0 4px 22px) s'afficher en haut et en bas au lieu
   d'etre coupee. La section parente .concept-feat (104px de padding) l'englobe. */
.concept-carousel { overflow-x: clip; overflow-y: visible; flex: 1; min-width: 0; }
/* Curseur custom + on empeche la selection de texte et le drag fantome des images
   pendant qu'on fait glisser le slider a la souris. */
.concept-carousel, .concept-carousel * { cursor: none !important; -webkit-user-select: none; user-select: none; }
.concept-carousel img { -webkit-user-drag: none; user-drag: none; }

.concept-track {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: 24px; will-change: transform;
  transition: transform .52s cubic-bezier(.25,.46,.45,.94);
}

.concept-card {
  flex: 0 0 392px; width: 392px; min-width: 392px;
  border: 8px solid #fff;
  border-radius: 18px;
  overflow: hidden;
  background: var(--primary);
  display: flex; flex-direction: column;
  filter: drop-shadow(0px 4px 22px rgba(0,0,0,.05));
}
.card-img {
  width: 100%; height: 222px; object-fit: cover; display: block;
  background: var(--border);
}
.card-body { padding: 32px 24px 24px; display: flex; flex-direction: column; gap: 24px; background: var(--primary); }
.card-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 48px; width: fit-content;
  background: rgba(255,255,255,0.1); border: 1px solid #fff;
  font-size: 16px; line-height: 1.5; color: #777;
}
.card-h3  { font-size: 30px; font-weight: 400; line-height: 1.3; color: var(--secondary); }
.card-txt { font-size: 16px; color: var(--gray2); line-height: 1.5; }

.concept-cursor {
  position: fixed; top: 0; left: 0; z-index: 999999;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--yellow2); color: var(--secondary);
  font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; text-align: center;
  pointer-events: none; user-select: none; opacity: 0;
  transform: translate(-50%,-50%) scale(.3);
  transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .18s ease;
}
.concept-cursor.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.concept-cursor.grab { transform: translate(-50%,-50%) scale(.88); background: var(--secondary); color: var(--yellow2); }

.concept-nav { display:none; }
.concept-nav__dot { padding:0; border:none; }

.concept-pin {
  position: relative; width: 100%;
  background: var(--primary);
}
.concept-pin .concept { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1025px) {
  .concept-pin { height: calc(var(--concept-sticky-h, 100vh) + var(--concept-scroll-distance, 1800px)); }
  .concept-pin .concept {
    position: sticky; top: var(--concept-top, 80px);
    min-height: var(--concept-sticky-h, 100vh);
    justify-content: center; overflow: hidden; padding: 32px 0; gap: 32px;
  }
  @keyframes stepIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .concept-step.anim-in .step-expanded { animation: stepIn .35s cubic-bezier(.22,1,.36,1) both; }
}
.concept-header { width:100%; max-width:900px; margin:0 auto; padding:0 72px; text-align:center; flex-shrink:0; }
/* Titre « Comment ca marche » : hors du sticky par defaut (defile), pinne dans le
   sticky uniquement sur les grands ecrans ASSEZ HAUTS (vrais moniteurs desktop).
   La double condition largeur+hauteur evite que les portables larges mais courts
   (ex. 1536x864) restent en mode pinne, ou le contenu deborderait de la fenetre. */
.concept-header--pinned { display:none; }
.concept-header--flow { margin:80px auto 48px; }
@media (min-width:1440px) and (min-height:940px) {
  .concept-header--flow   { display:none; }
  .concept-header--pinned { display:block; }
}
.concept-header > .chip { margin: 0 auto 16px; }
.concept-header__title {
  font-size: clamp(28px, 4vw, 40px); font-weight: 400; margin: 0 0 12px;
  line-height: 1.3; letter-spacing: 0; color: var(--secondary);
}
.concept-header__title-highlight {
  display: inline; padding: 0 10px;
  border-left: 1px solid var(--secondary);
  background: linear-gradient(90deg, var(--yellow2) 0%, var(--primary) 100%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.concept-header__desc { font-size: 16px; color: var(--text); max-width: 60ch; margin: 0 auto; line-height: 1.5; }

.concept { width:100%; font-family:inherit; color:var(--secondary); }
.concept-inner { display:flex; align-items:stretch; gap:67px; width:100%; max-width:1488px; margin:0 auto; padding:0 24px; }
.concept-main  { display:flex; align-items:stretch; gap:70px; flex-shrink:0; }

.concept-progress {
  position:relative; width:106px; min-height:614px; padding:50px 0;
  border:8px solid #fff; border-radius:18px;
  background: linear-gradient(163.9deg, #FFF1BA 36.9%, var(--primary) 103.7%);
  box-sizing:border-box; flex-shrink:0;
}
.concept-progress-track { position:relative; width:100%; height:100%; }
.concept-progress-line {
  position:absolute; left:50%; top:5%; width:7px;
  height:var(--line-past-height,50px); background:var(--secondary);
  transform:translateX(-50%); transition:height 1s cubic-bezier(.22,1,.36,1); z-index:1;
}
.concept-progress-line-future {
  position:absolute; left:50%; top:var(--line-future-top,200px);
  width:7px; height:var(--line-future-height,280px);
  background:linear-gradient(180deg, var(--yellow2) 0%, rgba(255,225,90,0) 100%);
  transform:translateX(-50%); z-index:1;
  transition:top 1s cubic-bezier(.22,1,.36,1), height 1s cubic-bezier(.22,1,.36,1);
}
.concept-progress-truck {
  position:absolute; left:50%; top:0;
  width:102px; height:102px; aspect-ratio:1;
  transform:translate(-50%, var(--truck-y,0px));
  transition:transform 1s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 4px 8px rgba(255,225,90,.45)); z-index:2; will-change:transform;
}
.concept-progress-truck img { width:100%; height:100%; display:block; }

.concept-content { display:flex; flex-direction:column; align-items:flex-start; gap:24px; align-self:stretch; width:547px; max-width:100%; }
.concept-step { position:relative; width:100%; transition:opacity .2s; }
.concept-step.is-active { margin:16px 0; }
.concept-step.is-active:first-child { margin-top:0; }
.concept-step.is-active:last-child  { margin-bottom:0; }
.concept .concept-divider { display:block!important; width:522px!important; max-width:100%!important; height:1px!important; background:var(--border)!important; border:0!important; margin:0!important; flex-shrink:0!important; }
.concept .step-toggle { display:block; width:100%; appearance:none; background:none!important; border:0; padding:0; text-align:left; cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent; }
.concept-step.is-active .step-toggle { display:none; }
.step-toggle-label { display:block; font-size:18px; font-weight:400; line-height:1.2; color:rgba(160,160,160,.6); transition:color .2s; }
.step-toggle:hover .step-toggle-label { color:var(--secondary); }
.step-expanded { display:none; flex-direction:column; gap:16px; align-items:flex-start; width:100%; }
.concept-step.is-active .step-expanded { display:flex; }

.step-number {
  position:relative; isolation:isolate; margin:0;
  font-size:120px; font-weight:400; line-height:150%;
  background:linear-gradient(90deg,#FFD631 0%,#F8F6EF 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; width:100%;
}
.step-number::before {
  content:""; position:absolute; top:0; left:0; width:100%;
  font-size:inherit; font-weight:inherit; line-height:inherit;
  color:#FFD631; -webkit-text-fill-color:#FFD631;
  text-shadow: 0 2px 4px rgba(0,0,0,.15), 0 4px 8px rgba(57,47,90,.19), 0 15px 15px rgba(255,206,44,.10), 0 34px 21px rgba(57,47,90,.06), 0 -1px 0 rgba(255,255,255,.80), 0 -6px 14px rgba(255,206,44,.50), -4px -4px 5px rgba(191,108,0,.20);
  z-index:-1; pointer-events:none; user-select:none;
}
.concept-step[data-step="0"] .step-number::before { content:"01"; }
.concept-step[data-step="1"] .step-number::before { content:"02"; }
.concept-step[data-step="2"] .step-number::before { content:"03"; }
.concept-step[data-step="3"] .step-number::before { content:"04"; }

.step-body { display:flex; flex-direction:column; gap:48px; align-items:flex-start; width:100%; }
.step-text { display:flex; flex-direction:column; gap:32px; width:100%; }
.step-title { margin:0; font-size:30px; font-weight:400; line-height:1.3; color:var(--secondary); }
.step-desc  { margin:0; font-size:16px; font-weight:400; line-height:1.5; color:var(--text); }
.concept a  { color:inherit; }

.concept-image-wrap { flex:1 1 auto; min-width:0; min-height:614px; border-radius:10px; overflow:hidden; background:var(--border); align-self:stretch; display:flex; flex-direction:column; }
.concept-image { display:block!important; width:100%!important; height:100%!important; flex:1!important; min-height:614px!important; object-fit:cover!important; background:var(--border); }
@media (min-width:1025px) {
  .concept-image-wrap { position:relative!important; }
  .concept-image { position:absolute!important; inset:0!important; min-height:unset!important; opacity:0!important; transition:opacity .4s cubic-bezier(.4,0,.2,1)!important; }
  .concept-image.is-visible { opacity:1!important; }
}
.step-image { display:none; }

.stats-sec { padding: 104px 0; }
.stats-head { text-align:center; margin-bottom:64px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.stats-title { font-size:40px; font-weight:400; line-height:1.3; color:var(--secondary); }
.stats-desc  { font-size:16px; color:var(--text); max-width:65ch; text-align:center; }
.stats-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stat-cell {
  padding:40px 24px;
  border:8px solid #fff;
  border-radius:18px !important;
  display:flex; flex-direction:column; gap:32px;
}

.stat-cell--dark  { background:linear-gradient(180deg,#201F1A 0%,#5A5647 100%); }
.stat-cell--light { background:linear-gradient(165deg,var(--primary) 18.73%,var(--yellow2) 192.1%); }
.stat-cell--beige { background:var(--primary); }
.stat-cell--dark, .stat-cell--light, .stat-cell--beige { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.stat-cell--photo { padding:0; overflow:hidden; }
.stat-cell > div  { display:flex; flex-direction:column; gap:12px; }
.stat-num   { font-size:60px; font-weight:600; line-height:1.1; color:#ffce2c; }
.stat-label { font-size:30px; font-weight:400; color:var(--secondary); line-height:1.3; }
.stat-desc2 { font-size:16px; color:var(--text); line-height:1.5; }
.stat-cell--dark .stat-label { color:#fff; }
.stat-cell--dark .stat-desc2 { color:var(--gray2); }
.stat-photo { width:100%; height:100%; min-height:260px; object-fit:cover; display:block; background:var(--border); border-radius:10px; }

.map-sec {
  padding:56px 0;
  background:var(--primary);
}
.map-inner {
  display:flex; align-items:center; gap:57px;
  padding:40px 70px; border-radius:10px;
  background:linear-gradient(118.78deg, rgba(255,255,255,0.30) 8.55%, rgba(255,255,255,0.60) 98.58%);
}
.map-text  { flex:0 0 472px; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.map-text .btn { margin-top:36px; }
.map-cta-m { display:none; }
.map-title { font-size:40px; font-weight:400; line-height:1.3; color:var(--secondary); }
.map-visual { flex:1; display:flex; justify-content:center; }
.map-visual img { width:100%; max-width:631px; border-radius:10px; }

.reviews-sec { padding:104px 0; overflow:hidden; background:#EEEFF1; }
.reviews-head { text-align:center; margin-bottom:56px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.reviews-title { font-size:40px; font-weight:400; line-height:1.3; color:var(--secondary); }

.reviews-rows {
  display:flex; flex-direction:column; gap:20px;
  --fw: clamp(40px, 18vw, 360px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fw), black calc(100% - var(--fw)), transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0, black var(--fw), black calc(100% - var(--fw)), transparent 100%);
}
.reviews-row  { width:100%; overflow:hidden; }
.reviews-track{ display:flex; gap:20px; width:max-content; will-change:transform; }
.reviews-row[data-direction="right"] .reviews-track { padding-left:50px; }

.review-card {
  flex-shrink:0; display:flex; flex-direction:column;
  width:345px; height:280px; padding:30px; gap:20px;
  border:8px solid #fff; border-radius:18px;
  background:var(--primary); box-sizing:border-box; overflow:hidden;
}
.review-head   { display:flex; gap:12px; align-items:center; width:100%; }
.review-avatar { width:50px; height:50px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--border); display:block; }
.review-info   { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.review-name   { margin:0; font-size:18px; font-weight:400; line-height:1.2; color:var(--secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.review-stars  { display:inline-flex; gap:2px; color:var(--yellow); }
.review-stars svg { width:18px; height:18px; flex-shrink:0; }
.review-divider{ margin:0; width:100%; height:1px; border:0; background:var(--border); }
.review-text   { margin:0; font-size:16px; line-height:1.5; color:var(--text); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

.faq-sec { padding:104px 0; border-top:1px solid var(--border); }
.faq-head { text-align:center; margin-bottom:64px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.faq-title { font-size:40px; font-weight:400; line-height:1.3; color:var(--secondary); }
.faq-layout{ display:flex; gap:53px; align-items:stretch; max-width:1440px; margin:0 auto; }
.faq-col   { flex:1 0 0; display:flex; flex-direction:column; gap:10px; }

.faq-item {
  background:#fff!important;
  border:7px solid #fff;
  border-radius:10px;
  overflow:hidden;
  transition:background .25s;
}
.faq-item.is-open { background:var(--primary)!important; }
.faq-toggle {
  display:flex; align-items:center; gap:24px; width:100%;
  padding:20px; background:none!important; border:none; cursor:pointer;
  text-align:left; font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.faq-toggle:focus { outline:none; }
.faq-toggle:focus-visible { outline:2px solid var(--yellow)!important; outline-offset:-4px; border-radius:3px; }

.faq-icon {
  position:relative; flex-shrink:0; width:37px; height:37px; border-radius:6px;
  background:linear-gradient(90deg, var(--yellow2) 0%, var(--primary) 100%);
  box-shadow:
    0 34px 21px rgba(57,47,90,.11), 0 15px 15px rgba(255,206,44,.19),
    0 4px 8px rgba(57,47,90,.19), 0 2px 4px rgba(0,0,0,.15),
    inset -4px -4px 5px rgba(191,108,0,.20), inset 0 -6px 14px #FFCE2C,
    inset 0 -1px 0 rgba(255,255,255,.80);
}
.faq-icon::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:13px; height:1.5px;
  background:var(--secondary); border-radius:1px;
}
.faq-icon::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scaleY(1);
  width:1.5px; height:13px; background:var(--secondary); border-radius:1px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item.is-open .faq-icon::after { transform:translate(-50%,-50%) scaleY(0); }
.faq-question { flex:1; min-width:0; font-size:18px; font-weight:400; line-height:1.2; color:var(--secondary)!important; }
.faq-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s, margin-top .35s; margin-top:0; }
.faq-item.is-open .faq-body { grid-template-rows:1fr; margin-top:4px; }
.faq-body-inner { overflow:hidden; }
.faq-body-inner p { margin:0; padding:0 20px 20px; font-size:16px; line-height:1.5; color:var(--text); }

.faq-contact {
  flex:0 0 calc(25% - 26.5px); width:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:40px 32px;
  background: linear-gradient(153.4deg, #575345 0.29%, #201F1A 108.56%);
  border: 8px solid #fff;
  border-radius: 8px;
  overflow: hidden; position: relative; min-height: 462px;
}
/* Repere de positionnement pour la pastille telephone. Pas d'overflow:hidden ici,
   sinon la pastille qui deborde du cercle serait rognee : c'est l'image elle-meme
   qui porte l'arrondi. */
.faq-contact-photo {
  width:124px; height:124px; border-radius:50%;
  position:relative; flex-shrink:0;
  border: 3px solid #fff;
}
.faq-contact-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.faq-contact-text { display:flex; flex-direction:column; gap:16px; text-align:center; width:100%; }
.faq-contact-title { font-size:18px; font-weight:400; line-height:1.2; color:#fff; }
.faq-contact-desc  { font-size:16px; line-height:1.5; color:var(--gray2); }

/* La pastille est entierement dessinee dans le PNG (disque jaune 3D + combine +
   ombre portee) : aucun cercle CSS ici, sinon il en apparaitrait un second dessous.
   Le PNG fait 159x184, son disque jaune occupe x 31..127 / y 6..102, soit 97x97.
   Le node Figma 414:803 veut un disque de 49px => echelle 49/97 = 0.5052, donc une
   image de 159x0.5052 = 80.32 sur 184x0.5052 = 92.95.
   Placement : dans ce repere, le disque commence a 15.66 / 3.03 du coin de l'image.
   Cible Figma (repere de la photo, bord exterieur) : disque a x 86.5, y 0. L'image
   doit donc demarrer a x 70.84, y -3.03. Les decalages absolus partant de la PADDING
   box du parent, en retrait de 3px (sa bordure blanche), on retranche encore 3px :
   top = -6.03 et right = 121 - (70.84 + 80.32) = -30.16. */
.faq-contact-phone {
  position:absolute; top:-6px; right:-30.16px;
  width:80.32px; height:92.95px;
  display:block; pointer-events:none;
}
.faq-contact-phone img { width:100%; height:100%; display:block; }

/* Bouton de la carte : 48px de haut, coins a 4px et liere jaune, conformement au
   composant « Primary » du node 414:795. Portee limitee a .faq-contact pour ne pas
   toucher les autres boutons du site. La marge de 16px s'ajoute au gap de 16px du
   bloc texte, soit les 32px separant texte et bouton dans la maquette. */
.faq-contact .btn {
  width:100%; margin-top:16px;
  padding:12px 24px; line-height:20px;
  border:2px solid var(--yellow2); border-radius:4px;
}

.cta-wrap { max-width:1488px; margin:0 auto; padding:104px 24px; }
.cta-banner {
  position:relative; min-height:470px; border-radius:10px; overflow:visible;
  display:flex; align-items:center; justify-content:center;
  background: var(--yellow);
  box-shadow:
    inset -4px -4px 5px 0 rgba(191,108,0,.20),
    inset 0 -6px 14px 0 rgba(255,206,44,1),
    inset 0 -1px 0 0 rgba(255,255,255,.80),
    0 34px 21px 0 rgba(57,47,90,.11),
    0 15px 15px 0 rgba(255,206,44,.19),
    0 4px 8px 0 rgba(57,47,90,.19),
    0 2px 4px 0 rgba(0,0,0,.15);
}
.cta-overlay { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible; }
.cta-overlay > div { position:absolute; display:flex; align-items:center; justify-content:center; }
.cta-overlay img { object-fit:contain; user-select:none; pointer-events:none; }

@keyframes fa { 0%,100%{translate:0 0} 50%{translate:0 -12px} }
@keyframes fb { 0%,100%{translate:0 0} 50%{translate:0 -8px} }
@keyframes fc { 0%,100%{translate:0 0} 50%{translate:0 -16px} }
@keyframes fd { 0%,100%{translate:0 0} 50%{translate:0 -6px} }
.cta-overlay > div:nth-child(1)  { animation: fb 6.2s ease-in-out 0.0s  infinite; }
.cta-overlay > div:nth-child(2)  { animation: fd 5.1s ease-in-out 0.8s  infinite; }
.cta-overlay > div:nth-child(3)  { animation: fc 7.4s ease-in-out 1.5s  infinite; }
.cta-overlay > div:nth-child(4)  { animation: fa 5.8s ease-in-out 2.3s  infinite; }
.cta-overlay > div:nth-child(5)  { animation: fb 6.6s ease-in-out 0.4s  infinite; }
.cta-overlay > div:nth-child(6)  { animation: fd 4.9s ease-in-out 1.1s  infinite; }
.cta-overlay > div:nth-child(7)  { animation: fa 5.5s ease-in-out 3.0s  infinite; }
.cta-overlay > div:nth-child(8)  { animation: fc 7.0s ease-in-out 0.6s  infinite; }
.cta-overlay > div:nth-child(9)  { animation: fb 6.3s ease-in-out 2.0s  infinite; }
.cta-overlay > div:nth-child(10) { animation: fd 5.7s ease-in-out 1.7s  infinite; }
.cta-overlay > div:nth-child(11) { animation: fa 6.8s ease-in-out 0.9s  infinite; }

.cta-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:24px; padding:80px 48px;
  max-width:700px; width:100%;
}
.cta-h2 {
  font-size:46px; font-weight:400; line-height:1.05;
  letter-spacing:-0.02em; color:var(--secondary);
}

.site-footer { border-top:1px solid var(--border); padding:50px 0; }
.footer-top {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; padding-bottom:40px; border-bottom:1px solid var(--border);
}
.footer-logo img  { height:112px; width:auto; display:block; }
.footer-tagline   { max-width:405px; font-size:40px; color:var(--secondary); line-height:1.3; text-align:right; }
.footer-main      { display:flex; gap:32px; padding:61px 0; }
.footer-contact   { flex:0 0 556px; display:flex; flex-direction:column; gap:24px; }
.fc-block         { display:flex; flex-direction:column; gap:4px; }
.fc-label         { font-size:16px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--text); }
.fc-value         { font-size:16px; color:var(--secondary); line-height:1.5; }
.fc-value a:hover { opacity:.6; }
/* Ligne d'horaires : un ton plus discret que le telephone et l'e-mail. */
.fc-hours         { color:var(--text); }
.footer-social    { display:flex; gap:12px; margin-top:4px; }
.soc-btn {
  width:34px; height:34px; border-radius:5px;
  border:4px solid #fff; background:var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--secondary); transition:background .2s, color .2s, border-color .2s;
}
.soc-btn:hover { background:var(--secondary); color:#fff; border-color:var(--secondary); }
.footer-nav       { flex:1; display:flex; gap:44px; }
.fn-col           { display:flex; flex-direction:column; gap:0; }
.fn-link          { font-size:16px; color:var(--secondary); padding:6px 0; transition:color .2s; line-height:1.5; }
.fn-link:hover    { color:var(--secondary); }
.footer-cta       { flex:0 0 auto; display:flex; align-items:flex-start; }
.footer-bottom {
  padding:20px 0; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.f-copy   { font-size:14px; color:var(--text); }
.f-legal  { display:flex; gap:24px; }
.f-legal a{ font-size:14px; color:var(--text); text-decoration:underline; transition:color .2s; }
.f-legal a:hover { color:var(--secondary); }

.goxl-burger {
  display:none; position:relative;
  width:46px; height:46px; flex-shrink:0;
  align-items:center; justify-content:center;
  border:2px solid var(--yellow2); border-radius:4px;
  background:
    linear-gradient(0deg, var(--yellow), var(--yellow)),
    linear-gradient(360deg, rgba(255,201,57,0) 54.97%, rgba(255,201,57,0.4) 83.33%),
    var(--accent);
  box-shadow:
    0 34px 21px rgba(57,47,90,.11), 0 15px 15px rgba(255,206,44,.19),
    0 4px 8px rgba(57,47,90,.19), 0 2px 4px rgba(0,0,0,.15),
    inset -4px -4px 5px rgba(191,108,0,.2), inset 0 -6px 14px #FFCE2C,
    inset 0 -1px 0 rgba(255,255,255,.8);
  cursor:pointer; overflow:hidden;
}
.goxl-burger svg { position:relative; z-index:1; }
.goxl-burger svg line { transition:transform .3s ease, opacity .2s ease; transform-box:fill-box; transform-origin:center; }
body.menu-open .goxl-burger svg line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.menu-open .goxl-burger svg line:nth-child(2) { opacity:0; }
body.menu-open .goxl-burger svg line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.goxl-menu {
  position:fixed; top:var(--goxl-h); left:0; right:0; bottom:0; z-index:90;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center;
  gap:48px; padding:56px 24px;
  overflow-y:auto; overflow-x:clip;
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease;
}
.goxl-menu.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
body.menu-open { overflow:hidden; }
.goxl-menu-links { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:32px; }
.goxl-menu-links a { font-size:24px; line-height:1.3; color:var(--secondary); transition:opacity .2s; }
.goxl-menu-links a:hover { opacity:.6; }
.goxl-menu > .btn { position:relative; z-index:1; }
.goxl-menu-deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.goxl-menu-deco > div { position:absolute; display:flex; align-items:center; justify-content:center; }
.goxl-menu-deco img { object-fit:contain; }

/* Menu : la barre complete (logo + 5 liens + CTA) ne tient proprement qu'a partir
   de ~1200px. En dessous on bascule sur le burger pour eviter tout debordement.
   Au-dessus, flex space-between => ecarts egaux logo<->liens<->CTA (equilibre visuel). */
@media (max-width:1200px) {
  .nav-inner { display:flex; justify-content:space-between; }
  .nav-links { display:none; }
  .site-header .nav-inner > .btn { display:none; }
  .goxl-burger { display:inline-flex; }
}

@media (max-width:1024px) {
  .wrap { padding:0 24px; }

  .hero-content { padding:0 24px; }
  .hero-h1 { font-size:clamp(36px,7vw,56px); -webkit-text-stroke:0; text-shadow:none; }

  .partners-inner { flex-direction:column; gap:20px; align-items:center; }
  /* Logos : carrousel sur mobile/tablette. Repli = defilement tactile si pas de JS / mouvement reduit. */
  .partners-logos {
    justify-content:flex-start; gap:32px; flex-wrap:nowrap; width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .partners-logos::-webkit-scrollbar { display:none; }
  .partners-logos img { flex:0 0 auto; }
  .partners-logos.is-marquee {
    gap:0; overflow:hidden; justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  }
  .partners-marquee {
    display:flex; align-items:center; width:max-content; flex:0 0 auto;
    animation:partners-scroll 22s linear infinite; will-change:transform;
  }
  .partners-marquee img { flex:0 0 auto; width:115px; height:70px; object-fit:contain; margin-right:40px; }
  @keyframes partners-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  .partners-label { font-size:24px; text-align:center; flex:none; }

  .concept-feat-inner { flex-direction:column; padding:0 24px; gap:24px; }
  .concept-intro { flex:none; width:100%; align-items:center; text-align:center; background:none; border:none; padding:0; border-radius:0; }
  .concept-intro-head { align-items:center; }
  .concept-intro-title { font-size:32px; }
  .concept-intro-title .hl-block { display:none; }
  .concept-carousel { overflow-x:clip!important; overflow-y:visible!important; padding:12px 0!important; }
  .concept-carousel, .concept-carousel * { cursor:default!important; }
  .concept-cursor { display:none!important; }
  .concept-card { flex:0 0 calc(100vw - 80px)!important; width:calc(100vw - 80px)!important; min-width:calc(100vw - 80px)!important; max-width:340px!important; }
  .concept-nav { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:8px; }
  .concept-nav__dot {
    width:16px; height:16px; border-radius:30px; background:var(--border); cursor:pointer;
    transition:width .3s ease, border-radius .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .concept-nav__dot.is-active {
    width:45px; border-radius:20px;
    background:linear-gradient(160.69deg, var(--yellow2) 0%, var(--yellow) 100%);
    box-shadow:0 4px 8px rgba(57,47,90,.19), 0 2px 4px rgba(0,0,0,.15), inset -4px -4px 5px rgba(191,108,0,.2), inset 0 -6px 14px #FFCE2C, inset 0 -1px 0 rgba(255,255,255,.8);
  }

  .concept-inner { flex-direction:row!important; gap:18px!important; padding:0 20px!important; max-width:100%!important; }
  .concept-main  { flex-direction:row!important; gap:18px!important; width:100%!important; flex:1!important; }
  .concept-progress { display:none!important; }
  .concept-image-wrap { display:none!important; }
  .concept-content { width:100%!important; flex:1!important; gap:48px!important; }
  .concept-step { margin:0!important; }
  .concept-step .step-toggle { display:none!important; }
  .concept-step .step-expanded { display:flex!important; }
  .concept-divider { display:none!important; }
  .step-image { display:block!important; width:100%!important; height:174px!important; object-fit:cover!important; border-radius:10px!important; flex-shrink:0!important; background:var(--border); }
  .step-expanded { gap:32px!important; }
  .step-body { gap:24px!important; }
  .step-text { gap:16px!important; }
  .step-number, .step-number::before { font-size:70px!important; line-height:1.5!important; }
  .step-title { font-size:24px!important; }
  .concept-header { padding:0 24px!important; }

  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-cell--photo { display:none; }

  .map-inner { flex-direction:column; gap:32px; padding:32px 24px; align-items:center; }
  .map-text { flex:none; width:100%; align-items:center; text-align:center; }
  .map-text .btn { display:none; }
  .map-cta-m { display:inline-flex; }

  .faq-layout { flex-direction:column; max-width:100%; }
  .faq-contact { flex:none; width:100%; min-height:auto; flex-direction:row; padding:32px; text-align:left; align-items:center; gap:24px; }
  .faq-contact-text { text-align:left; }
  .faq-contact-phone { display:none; }

  .cta-wrap { padding:56px 24px; }
  .cta-banner { min-height:470px!important; }

  .footer-top { flex-direction:column; align-items:center; text-align:center; gap:20px; }
  .footer-tagline { text-align:center; font-size:32px; line-height:1.4; max-width:333px; margin:0 auto; }
  .footer-main { flex-direction:column; align-items:center; text-align:center; }
  .footer-contact { flex:none; width:100%; align-items:center; text-align:center; }
  .footer-nav { justify-content:center; flex-direction:column; align-items:center; gap:0; order:-1; }
  .footer-social { order:-1; }
  .footer-cta { display:flex; justify-content:center; width:100%; order:-2; }
  .footer-bottom { flex-direction:column; gap:24px; align-items:center; text-align:center; }
  .f-legal { flex-wrap:wrap; gap:24px; justify-content:center; order:-1; }
}

@media (max-width:767px) {
  .d-br { display:none; }
  .hero-h1 { font-size:clamp(32px,8vw,48px); }
  .estimation-card { padding:32px 20px; }
  .form-row { flex-direction:column; }
  .concept-feat, .reviews-sec { padding:64px 0; }
  .stats-sec, .faq-sec { padding:72px 0; }
  .concept-pin { padding-top:48px; }
  .map-sec { padding:32px 0; }
  .map-title, .reviews-title, .faq-title { font-size:32px; }
  .cta-wrap { padding:32px 16px; }
  .wrap { padding:0 16px; }
  .concept-inner { gap:0!important; padding:0 16px!important; }
  .concept-header { padding:0 16px!important; }
  .concept-header--flow { margin:48px auto 32px; }
  .concept-header__title { font-size:32px!important; line-height:1.4!important; }
  .step-number, .step-number::before { font-size:70px!important; }
  .concept-step .btn { display:none!important; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-cell--photo { display:block; }
  .stats-title { font-size:32px; }
  .reviews-rows {
    flex-direction:column!important; gap:0!important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 80px, black calc(100% - 80px), transparent 100%)!important;
    mask-image:linear-gradient(to bottom, transparent 0, black 80px, black calc(100% - 80px), transparent 100%)!important;
  }
  .reviews-row:first-child { width:100%!important; height:720px!important; overflow:hidden!important; }
  .reviews-row:nth-child(2) { display:none!important; }
  .reviews-row .reviews-track { flex-direction:column!important; width:100%!important; gap:20px!important; padding:0!important; }
  .review-card { width:345px!important; max-width:calc(100vw - 32px)!important; margin:0 auto!important; flex-shrink:0!important; }
  .faq-contact { flex-direction:column; align-items:center; text-align:center; }
  .faq-contact-text { text-align:center; }
}

@media (max-width:1024px) {
  .hero-obj--sofa-left,
  .hero-obj--box-left-lg,
  .hero-obj--fridge-left,
  .hero-obj--roundchair-left,
  .hero-obj--fridge-right,
  .hero-obj--table-right,
  .hero-obj--chair-right { display:none!important; }

  .hero-obj--table-left { left:20px!important; top:-28px!important; width:100px!important; height:93px!important; }
  .hero-obj--table-left img { width:88px!important; transform:rotate(-28.76deg)!important; }
  .hero-obj--box-left-sm { left:-4px!important; top:-50px!important; width:56px!important; height:56px!important; }
  .hero-obj--box-left-sm img { width:50px!important; transform:rotate(-4.94deg)!important; filter:blur(1.5px)!important; }
  .hero-obj--box-right { right:16px!important; top:-28px!important; width:106px!important; height:106px!important; }
  .hero-obj--box-right img { width:90px!important; transform:rotate(-4.94deg)!important; filter:blur(0.5px)!important; }
  .hero-obj--sofa-right { display:flex!important; right:24px!important; top:200px!important; width:90px!important; height:84px!important; }
  .hero-obj--sofa-right img { width:76px!important; transform:rotate(162.78deg) scaleY(-1)!important; filter:blur(1px)!important; }
  .hero-obj--chair-left { left:0!important; top:190px!important; width:96px!important; height:110px!important; }
  .hero-obj--chair-left img { width:72px!important; transform:rotate(-25.44deg)!important; filter:blur(1px)!important; }
}
@media (max-width:767px) {
  .hero-obj--fridge-left, .hero-obj--fridge-right { display:none!important; }
  .hero-obj--table-left { left:13px!important; top:-24px!important; width:70px!important; height:66px!important; }
  .hero-obj--table-left img { width:60px!important; }
  .hero-obj--box-left-sm { left:-4px!important; top:-40px!important; width:38px!important; height:38px!important; }
  .hero-obj--box-left-sm img { width:34px!important; }
  .hero-obj--box-right { right:8px!important; top:-20px!important; width:76px!important; height:76px!important; }
  .hero-obj--box-right img { width:67px!important; }
  .hero-obj--sofa-right { right:16px!important; top:185px!important; width:65px!important; height:60px!important; }
  .hero-obj--sofa-right img { width:57px!important; }
  .hero-obj--chair-left { left:0!important; top:180px!important; width:72px!important; height:78px!important; }
  .hero-obj--chair-left img { width:50px!important; }
}

/* Desktop : le cluster de droite est ancre au bord DROIT de la banniere
   (et non plus avec un left: en px) pour qu'il suive le bord quand la
   banniere retrecit entre 1025px et sa largeur max. Les valeurs right:
   reproduisent a l'identique le rendu a largeur max (banniere 1440px). */
@media (min-width:1025px) {
  .cta-overlay > div:nth-child(6)  { left:auto!important; right:377px!important; }
  .cta-overlay > div:nth-child(7)  { left:auto!important; right:370px!important; }
  .cta-overlay > div:nth-child(8)  { left:auto!important; right:163px!important; }
  .cta-overlay > div:nth-child(9)  { left:auto!important; right:217px!important; }
  .cta-overlay > div:nth-child(10) { left:auto!important; right:339px!important; }
  .cta-overlay > div:nth-child(11) { left:auto!important; right:83px!important; }
}

@media (max-width:1024px) {
  .cta-overlay > div:nth-child(1) { left:-50px!important; top:5px!important; width:155px!important; height:148px!important; }
  .cta-overlay > div:nth-child(1) img { width:120px!important; }
  .cta-overlay > div:nth-child(2) { left:130px!important; top:35px!important; width:96px!important; height:92px!important; }
  .cta-overlay > div:nth-child(2) img { width:76px!important; }
  .cta-overlay > div:nth-child(3) { left:40px!important; top:118px!important; width:160px!important; height:158px!important; }
  .cta-overlay > div:nth-child(3) img { width:118px!important; }
  .cta-overlay > div:nth-child(4) { left:60px!important; top:205px!important; width:84px!important; height:80px!important; }
  .cta-overlay > div:nth-child(4) img { width:78px!important; }
  .cta-overlay > div:nth-child(5) { left:150px!important; top:320px!important; width:138px!important; height:150px!important; }
  .cta-overlay > div:nth-child(5) img { width:96px!important; }
  .cta-overlay > div:nth-child(6) { left:auto!important; right:120px!important; top:12px!important; width:108px!important; height:108px!important; }
  .cta-overlay > div:nth-child(6) img { width:80px!important; }
  .cta-overlay > div:nth-child(7) { display:none!important; }
  .cta-overlay > div:nth-child(8) { left:auto!important; right:-16px!important; top:0!important; width:110px!important; height:120px!important; }
  .cta-overlay > div:nth-child(8) img { width:78px!important; }
  .cta-overlay > div:nth-child(9) { left:auto!important; right:40px!important; bottom:160px!important; width:136px!important; height:136px!important; }
  .cta-overlay > div:nth-child(9) img { width:96px!important; }
  .cta-overlay > div:nth-child(10) { left:auto!important; right:-16px!important; bottom:-40px!important; width:155px!important; height:136px!important; }
  .cta-overlay > div:nth-child(10) img { width:128px!important; }
  .cta-overlay > div:nth-child(11) { left:auto!important; right:-24px!important; top:275px!important; width:178px!important; height:178px!important; }
  .cta-overlay > div:nth-child(11) img { width:130px!important; }
}
@media (max-width:767px) {
  /* CTA moins haut sur petit ecran : on abaisse le min-height (560 -> 440) et on
     resserre le padding interne (80/48 -> 44/24), c'est lui qui dicte la hauteur reelle. */
  .cta-banner { min-height:440px!important; }
  .cta-content { padding:44px 24px; }
  .cta-overlay > div:nth-child(1) { left:-19px!important; top:-40px!important; width:107px!important; height:103px!important; }
  .cta-overlay > div:nth-child(1) img { width:84px!important; transform:rotate(22.25deg)!important; filter:none!important; }
  .cta-overlay > div:nth-child(2) { display:flex!important; left:-25px!important; top:426px!important; width:90px!important; height:90px!important; }
  .cta-overlay > div:nth-child(2) img { width:72px!important; transform:rotate(-16.92deg)!important; filter:none!important; }
  .cta-overlay > div:nth-child(3) { left:233px!important; top:-37px!important; width:146px!important; height:144px!important; }
  .cta-overlay > div:nth-child(3) img { width:109px!important; transform:rotate(33.57deg)!important; filter:blur(1.5px)!important; }
  .cta-overlay > div:nth-child(4) { left:287px!important; top:33px!important; width:94px!important; height:88px!important; }
  .cta-overlay > div:nth-child(4) img { width:88px!important; transform:rotate(-4.94deg)!important; filter:blur(0.5px)!important; }
  .cta-overlay > div:nth-child(5) { left:262px!important; top:447px!important; width:102px!important; height:107px!important; }
  .cta-overlay > div:nth-child(5) img { width:68px!important; transform:rotate(30.63deg)!important; filter:none!important; }
  .cta-overlay > div:nth-child(6) { left:-3px!important; right:auto!important; top:125px!important; width:61px!important; height:57px!important; }
  .cta-overlay > div:nth-child(6) img { width:56px!important; transform:rotate(-4.94deg)!important; filter:blur(0.5px)!important; }
  .cta-overlay > div:nth-child(7),
  .cta-overlay > div:nth-child(8),
  .cta-overlay > div:nth-child(9),
  .cta-overlay > div:nth-child(10),
  .cta-overlay > div:nth-child(11) { display:none!important; }
}
@media (max-width:390px) {
  .cta-overlay > div:nth-child(1) { left:-14px!important; top:-32px!important; }
  .cta-overlay > div:nth-child(1) img { width:72px!important; }
  .cta-overlay > div:nth-child(2) { top:415px!important; }
  .cta-overlay > div:nth-child(2) img { width:62px!important; }
  .cta-overlay > div:nth-child(3) { left:210px!important; }
  .cta-overlay > div:nth-child(3) img { width:92px!important; }
  .cta-overlay > div:nth-child(4) { left:260px!important; }
  .cta-overlay > div:nth-child(4) img { width:74px!important; }
  .cta-overlay > div:nth-child(5) { left:238px!important; top:435px!important; }
  .cta-overlay > div:nth-child(5) img { width:58px!important; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-overlay > div, .cta-overlay > div,
  .concept-progress-truck, .concept-step, .concept-image,
  .faq-item, .faq-body, .faq-icon::after,
  .concept-track, .reviews-track { animation:none!important; transition:none!important; }
}

/* Pages legales (Mentions legales / CGV) - page-legal.php */
.legal-hero {
  /* meme degrade que le hero de l'accueil */
  background: linear-gradient(183.75deg, #FBFBFB -8.92%, #EEEFF1 88.17%);
  padding-top: calc(var(--goxl-h) + 56px);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.legal-hero-inner {
  max-width: 1488px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.legal-breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text);
}
.legal-breadcrumb a { color: var(--text); opacity: .9; transition: opacity .2s; }
.legal-breadcrumb a:hover { opacity: 1; color: var(--secondary); }
.legal-breadcrumb-sep { color: var(--gray2); }
.legal-breadcrumb-current { color: var(--secondary); }
.legal-title {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--secondary); max-width: 900px;
}

.legal-body {
  /* meme fond que la section concept de l'accueil */
  background: var(--primary);
  padding: 72px 0 96px;
}
.legal-content {
  max-width: 860px;
  color: var(--text); font-size: 16px; line-height: 1.7;
}
.legal-content > *:first-child { margin-top: 0; }
.legal-content h2 { font-size: 28px; font-weight: 400; color: var(--secondary); line-height: 1.25; margin: 40px 0 16px; }
.legal-content h3 { font-size: 21px; font-weight: 500; color: var(--secondary); line-height: 1.3; margin: 32px 0 12px; }
.legal-content h4 { font-size: 18px; font-weight: 500; color: var(--secondary); margin: 24px 0 10px; }
.legal-content p { margin: 0 0 18px; }
.legal-content ul, .legal-content ol { margin: 0 0 18px; padding-left: 22px; }
.legal-content li { margin: 0 0 8px; }
.legal-content ul li { list-style: disc; }
.legal-content ol li { list-style: decimal; }
.legal-content a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--yellow2); }
.legal-content strong { color: var(--secondary); font-weight: 600; }
.legal-content img { border-radius: 8px; margin: 24px 0; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.legal-content th, .legal-content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }

@media (max-width:767px) {
  .legal-hero { padding-top: calc(var(--goxl-h) + 32px); padding-bottom: 40px; }
  .legal-hero-inner { padding: 0 16px; }
  .legal-body { padding: 48px 0 64px; }
  .legal-content h2 { font-size: 24px; }
  .legal-content h3 { font-size: 19px; }
}