/* ================================================================
   THERMA CONFORT — CSS FINAL
   Version propre, source unique, zéro conflit
   ================================================================ */

/* ---- VARIABLES ------------------------------------------------ */
:root {
  --c-teal:       #2BB8B4;
  --c-teal-d:     #1A9896;
  --c-teal-l:     #E8F8F7;
  --c-navy:       #1C2B35;
  --c-navy-2:     #263D4E;
  --c-text:       #3D5260;
  --c-text-sm:    #6B8090;
  --c-bg:         #FFFFFF;
  --c-bg-off:     #F4F7F9;
  --c-border:     #DDE8EC;

  --font:    'Montserrat Alternates', sans-serif;
  --wrap:    1180px;
  --pad:     28px;
  --nav-h:   72px;
  --py:      88px;
  --py-sm:   56px;
  --r:       14px;
  --r-lg:    20px;
  --r-pill:  100px;
  --t:       .3s cubic-bezier(.4,0,.2,1);
  --sh-xs:   0 2px 8px rgba(28,43,53,.05);
  --sh-sm:   0 4px 18px rgba(28,43,53,.08);
  --sh:      0 8px 32px rgba(28,43,53,.11);
  --sh-lg:   0 16px 56px rgba(28,43,53,.15);
}

/* ---- RESET ---------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body {
  font-family:var(--font);
  color:var(--c-text);
  background:#fff;
  line-height:1.65;
  overflow-x:hidden;
}
img { display:block; max-width:100%; height:auto }
a { text-decoration:none; color:inherit }
ul,ol { list-style:none }
button { font-family:var(--font); cursor:pointer; border:none; background:none }

/* ---- LAYOUT --------------------------------------------------- */
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }

/* ---- TYPOGRAPHIE ---------------------------------------------- */
h1,h2,h3,h4 { font-weight:600; color:var(--c-navy); line-height:1.22 }
h1 { font-size:clamp(1.35rem, 2.8vw, 2rem) }
h2 { font-size:clamp(1.25rem, 2.2vw, 1.8rem) }
h3 { font-size:clamp(.95rem, 1.4vw, 1.1rem) }
p  { margin-bottom:.9rem }
p:last-child { margin-bottom:0 }

.label {
  display:inline-block;
  font-size:.67rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--c-teal);
  border-bottom:2px solid var(--c-teal);
  padding-bottom:5px; margin-bottom:14px;
}

/* ---- BOUTONS -------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border-radius:var(--r-pill);
  font-family:var(--font); font-weight:600; font-size:.855rem;
  border:2px solid transparent;
  transition:all var(--t); cursor:pointer; white-space:nowrap;
}
.btn-primary  { background:var(--c-teal);   color:#fff;           border-color:var(--c-teal) }
.btn-primary:hover { background:var(--c-teal-d); border-color:var(--c-teal-d); transform:translateY(-2px) }
.btn-outline  { background:transparent;     color:var(--c-navy);  border-color:var(--c-navy) }
.btn-outline:hover  { background:var(--c-navy); color:#fff; transform:translateY(-2px) }
.btn-outline-teal { background:transparent; color:var(--c-teal);  border-color:var(--c-teal) }
.btn-outline-teal:hover { background:var(--c-teal); color:#fff; transform:translateY(-2px) }
.btn-sm { padding:9px 20px; font-size:.8rem }

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  background:#fff; box-shadow:var(--sh-xs); z-index:500;
  transition:box-shadow var(--t);
}
.navbar.scrolled { box-shadow:var(--sh-sm) }
/* Layout : logo à gauche (margin-right:auto), menu + CTAs groupés à droite,
   espacement maîtrisé qui ne dépend plus d'un % de viewport. */
.navbar .wrap { height:100%; display:flex; align-items:center; gap:clamp(18px, 2.4vw, 36px) }

.nav-logo { margin-right:auto; flex-shrink:0; display:flex; align-items:center }
.nav-logo img { height:42px; width:auto; display:block }

.nav-menu { display:flex; align-items:center; gap:clamp(2px, .6vw, 10px) }
.nav-link {
  position:relative;
  font-size:.82rem; font-weight:600; color:var(--c-navy);
  padding:8px 6px;
  transition:color var(--t); white-space:nowrap;
}
/* Soulignement animé sous le lien actif / survolé */
.nav-link::after {
  content:''; position:absolute; left:6px; right:6px; bottom:2px;
  height:2px; border-radius:2px; background:var(--c-teal);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--t);
}
.nav-link:hover, .nav-link.active { color:var(--c-teal) }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1) }

.nav-ctas { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.btn-nav-contact {
  background:var(--c-navy); color:#fff;
  padding:10px 20px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  transition:all var(--t);
}
.btn-nav-contact:hover { background:var(--c-navy-2); transform:translateY(-1px) }
.btn-nav-contact .arr {
  width:20px; height:20px;
  background:rgba(255,255,255,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.65rem;
}
.btn-nav-phone {
  background:var(--c-teal); color:#fff;
  padding:10px 18px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  transition:all var(--t); white-space:nowrap;
}
.btn-nav-phone:hover { background:var(--c-teal-d); transform:translateY(-1px) }
.btn-nav-phone svg { width:13px; height:13px; flex-shrink:0 }

/* Hamburger — cible tactile 44x44 (recommandation accessibilité) */
.burger {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; width:44px; height:44px; margin-left:2px;
  border-radius:8px; transition:background var(--t);
}
.burger:hover { background:var(--c-bg-off) }
.burger span {
  display:block; width:24px; height:2px;
  background:var(--c-navy); border-radius:2px; transition:all var(--t);
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Bloc CTA réservé au tiroir mobile (masqué sur desktop) */
.nav-menu-cta { display:none }

/* ================================================================
   HERO
   La carte est en position absolue, bottom:-55px = déborde sur section suivante
   ================================================================ */
.hero {
  position:relative;
  margin-top:var(--nav-h);
  min-height:520px;
  background-color:#1a2e3b;
  background-size:cover;
  background-position:center;
  overflow:visible;
}
/* Sur la page accueil, la section hero a la vidéo — lui donner une hauteur */
.hero.hero--video {
  min-height: 80vh;
}
/* overlay sombre sur la photo */
.hero::before {
  content:''; position:absolute; inset:0;
  background:rgba(14,22,28,.40); z-index:1;
}

/* hero-yt : remplit le parent .hero en position absolute */
.hero-yt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* iframe cover centré dans .hero-yt (position:absolute inset:0) */
.hero-yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* couvre toujours le conteneur quel que soit le ratio */
  width: max(100%, 177.78%);   /* au moins 100% de la largeur */
  height: max(100%, 56.25vw);  /* au moins 100% de la hauteur */
  transform: translate(-50%, -50%);
  border: 0;
}


/* dégradé blanc doux en bas */
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:80px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22));
  z-index:2; pointer-events:none;
}
/* bouton Google en bas à droite */
.btn-google {
  position:absolute; bottom:22px; right:24px; z-index:10;
  background:#fff; border-radius:var(--r-pill);
  padding:8px 18px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; color:var(--c-navy);
  box-shadow:var(--sh-sm); transition:all var(--t);
}
.btn-google:hover { box-shadow:var(--sh); transform:translateY(-1px) }
.btn-google svg { width:18px; height:18px; flex-shrink:0 }

/* La carte */
.hero-card {
  position:absolute;
  bottom:-55px; left:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  max-width:520px; width:calc(100% - 2*var(--pad));
  z-index:20;
  background:rgba(248,250,251,.91);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-lg);
  padding:38px 42px;
  box-shadow:var(--sh);
}
.hero-card h1 { margin-bottom:14px }
.hero-card p  { font-size:.9rem; color:var(--c-text); margin-bottom:22px }

/* ================================================================
   SECTION SOLUTIONS — fond blanc
   padding-top couvre la carte hero (card_height ≈ 255px, overlap 55px)
   ================================================================ */
.home-solutions {
  background:#fff;
  padding-top:calc(var(--py) + 95px); /* 88+95 = 183px > 255-55=200... on prend 200px net */
  padding-bottom:var(--py);
}

/* En-tête 2 colonnes */
.sol-header {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:start; margin-bottom:56px;
}
.sol-header h2  { font-size:clamp(1.35rem,2.2vw,1.9rem) }
.sol-header .sol-desc { font-size:.9rem; color:var(--c-text); line-height:1.75 }

/* 5 cercles en rangée */
.svc-circles {
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
}
.svc-circle-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:18px;
  text-decoration:none; cursor:pointer; min-width:0;
}
.svc-circle {
  width:120px; height:120px;
  /* min-width géré dans le responsive */
  border-radius:50%;
  border:2px solid var(--c-teal);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-teal); background:#fff;
  transition:all var(--t);
  overflow:hidden;
  flex-shrink:0;
}
.svc-circle svg { display:block; flex-shrink:0 }
.svc-circle-item:hover .svc-circle { background:var(--c-teal); color:#fff }
.svc-circle-label {
  font-size:.86rem; font-weight:600; color:var(--c-navy);
  text-align:center; line-height:1.3;
}

/* ================================================================
   SPLIT — mise en page 2 colonnes réutilisée partout
   ================================================================ */
.split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center;
}
/* .split.rev — html order used as-is: text first = text LEFT */
.split-t h2    { margin-bottom:14px }
.split-t p     { color:var(--c-text); margin-bottom:14px }
.split-t .btn  { margin-top:10px }

/* Wrapper image */
.img-w { position:relative }
.img-w .ph { /* placeholder */
  background:linear-gradient(135deg,#c8d6db,#d8e6ea);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-sm); font-size:.75rem; text-align:center; padding:16px;
  border-radius:var(--r-lg); min-height:360px;
}
.img-w img { width:100%; height:100%; max-width:100%; object-fit:cover; border-radius:var(--r-lg) }
/* Badge icône */
.img-badge {
  position:absolute; bottom:-14px; right:-14px;
  width:54px; height:54px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm); color:var(--c-teal);
}
.img-badge svg { width:24px; height:24px }

/* Image CIRCULAIRE */
.img-w.circle .ph,
.img-w.circle img {
  border-radius:50% !important;
  width:min(420px, 80%); height:min(420px, 80%);
  aspect-ratio:1/1; min-height:0 !important;
  object-fit:cover; margin:0 auto;
  display:block;
}

/* ================================================================
   STATS ACCUEIL (+10, +400)
   ================================================================ */
.big-stats  { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px }
.big-stat   { background:#fff; border-radius:var(--r); padding:18px 20px; border:1.5px solid var(--c-border) }
.big-num    { font-size:1.85rem; font-weight:600; color:var(--c-teal); line-height:1; margin-bottom:4px }
.big-lbl    { font-size:.76rem; color:var(--c-text); line-height:1.5 }

/* ================================================================
   CARTES (réalisations, actualités)
   ================================================================ */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.card {
  background:#fff; border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-xs);
  transition:all var(--t);
}
.card:hover { box-shadow:var(--sh-sm); transform:translateY(-3px) }
.card-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--c-bg-off) }
.card-img .ph { height:100%; min-height:180px; min-height:0; aspect-ratio:auto; border-radius:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#c8d6db,#d8e6ea) }
.card-badge {
  position:absolute; top:12px; left:12px;
  background:var(--c-teal); color:#fff;
  font-size:.68rem; font-weight:600; padding:4px 13px; border-radius:var(--r-pill);
}
.card-body { padding:16px 18px }
.card-body h3 { font-size:.88rem; margin-bottom:5px }
.card-body p  { font-size:.76rem; color:var(--c-text-sm); margin:0 }
.cards-cta { text-align:center; margin-top:32px }

/* ================================================================
   GOOGLE REVIEWS
   ================================================================ */
.reviews-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.review-card {
  background:#fff; border-radius:var(--r); padding:20px 18px;
  box-shadow:var(--sh-xs); border:1.5px solid var(--c-border);
}
.review-stars { color:#FFC107; font-size:.88rem; letter-spacing:2px; margin-bottom:8px }
.review-text  { font-size:.77rem; color:var(--c-text); line-height:1.65; margin-bottom:12px }
.review-author { display:flex; align-items:center; gap:9px }
.review-av {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--c-teal-l); display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.8rem; color:var(--c-teal);
}
.review-name { font-size:.76rem; font-weight:600; color:var(--c-navy) }
.review-src  { font-size:.67rem; color:var(--c-text-sm) }

/* ================================================================
   ACTUALITÉS HOME — label+h2+photo à droite / article texte en bas à gauche
   ================================================================ */
.home-actu-section { background:#fff; padding:var(--py) 0 }
.home-actu-grid {
  display:grid; grid-template-columns:2fr 3fr;
  gap:64px; align-items:end;
}
.home-actu-text h3 { font-size:1.18rem; font-weight:600; margin-bottom:14px; color:var(--c-navy) }
.home-actu-text p  { font-size:.88rem; color:var(--c-text); margin-bottom:12px }
.home-actu-right .label { display:block }
.home-actu-right h2 { font-size:1.55rem; margin-bottom:20px }
.home-actu-photo { border-radius:var(--r-lg); overflow:hidden }
.home-actu-photo .ph { height:460px; min-height:0; border-radius:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#c8d6db,#d8e6ea) }

/* ================================================================
   PARTENAIRES
   ================================================================ */
.partners-row {
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
}
.partner {
  height:40px; padding:6px 18px;
  background:var(--c-bg-off); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--c-border);
  filter:grayscale(1); opacity:.55;
  transition:all var(--t);
}
.partner img  { height:22px; width:auto; object-fit:contain }
.partner span { font-size:.72rem; color:var(--c-text-sm) }
.partner:hover { filter:none; opacity:1; border-color:var(--c-teal) }

/* ================================================================
   CTA ACCUEIL — dégradé teal clair
   ================================================================ */
.home-cta {
  background:linear-gradient(135deg,#e4f6f6 0%,#caeaea 55%,#bce6e8 100%);
  padding:var(--py) 0; overflow:hidden;
}
.home-cta-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.home-cta-photo { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh) }
.home-cta-photo .ph { min-height:420px; border-radius:0 }
.home-cta-card {
  background:#fff; border-radius:var(--r-lg); padding:44px 40px; box-shadow:var(--sh);
}
.home-cta-card h2     { font-size:1.4rem; margin-bottom:10px }
.home-cta-card .sub   { font-size:.9rem; font-weight:600; color:var(--c-navy); margin-bottom:8px }
.home-cta-card .desc  { font-size:.85rem; color:var(--c-text); margin-bottom:26px }

/* ================================================================
   FORMULAIRES
   ================================================================ */
.form-group  { margin-bottom:13px }
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:13px }
.fi, .ft, .fs {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--c-border); border-radius:var(--r);
  font-family:var(--font); font-size:.84rem;
  color:var(--c-navy); background:#fff;
  outline:none; transition:border-color var(--t); appearance:none;
}
.fi:focus, .ft:focus, .fs:focus { border-color:var(--c-teal) }
.fi::placeholder, .ft::placeholder { color:var(--c-text-sm) }
.ft { min-height:110px; resize:vertical }
.fs {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8090' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px; cursor:pointer;
}
.form-msg { margin-top:12px; padding:10px 16px; border-radius:8px; font-size:.82rem; display:none }
.form-msg.ok  { background:#e6f7f6; color:var(--c-teal-d); display:block }
.form-msg.err { background:#fdecea; color:#c0392b; display:block }

/* ================================================================
   PROJECT CTA — fond sombre (pages internes)
   ================================================================ */
.project-cta {
  position:relative; overflow:hidden;
  background:var(--c-navy);
  background-image:url('../images/cta-bg.jpg');
  background-size:cover; background-position:center;
  padding:var(--py) 0;
}
.project-cta::before { content:''; position:absolute; inset:0; background:rgba(15,24,30,.62) }
.project-cta .wrap { position:relative; z-index:1 }
.project-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.cta-form-box { background:#fff; border-radius:var(--r-lg); padding:44px 40px }
.cta-form-box h2 { font-size:1.25rem; margin-bottom:6px }
.cta-form-box > p { font-size:.84rem; color:var(--c-text); margin-bottom:22px }

/* ================================================================
   SERVICE CTA — fond sombre (pages services)
   ================================================================ */
.service-cta {
  position:relative; overflow:hidden;
  background:var(--c-navy);
  background-image:url('../images/cta-bg.jpg');
  background-size:cover; background-position:center;
  padding:var(--py) 0;
}
.service-cta::before { content:''; position:absolute; inset:0; background:rgba(15,24,30,.62) }
.service-cta .wrap { position:relative; z-index:1 }
.service-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.service-cta-txt h2 { color:#fff; font-size:1.45rem; margin-bottom:12px }
.service-cta-txt p  { color:rgba(255,255,255,.78); font-size:.88rem }
.service-cta-form   { background:#fff; border-radius:var(--r-lg); padding:36px 32px }

/* ================================================================
   PAGES SERVICES — cartes "Un accompagnement sur mesure"
   ================================================================ */
.svc-cards-section { background:var(--c-bg-off); padding:var(--py) 0 }
.svc-cards-head    { text-align:center; margin-bottom:44px }
.svc-cards-grid    { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.svc-card {
  background:#fff; border-radius:var(--r); padding:26px 24px;
  border:1.5px solid var(--c-border); transition:all var(--t);
}
.svc-card:hover     { box-shadow:var(--sh-sm); transform:translateY(-2px) }
.svc-card h3        { margin-bottom:10px; font-size:1rem }
.svc-card p         { font-size:.84rem; color:var(--c-text); margin:0 }
.svc-card ul        { padding:0; margin-top:6px }
.svc-card ul li     { font-size:.84rem; color:var(--c-text); padding:3px 0 3px 16px; position:relative }
.svc-card ul li::before { content:'·'; position:absolute; left:4px; color:var(--c-teal); font-size:1.2rem; line-height:1.2 }
.svc-card.teal      { background:var(--c-teal); border-color:var(--c-teal) }
.svc-card.teal:hover { background:var(--c-teal-d) }
.svc-card.teal h3, .svc-card.teal p, .svc-card.teal li { color:#fff }
.svc-card.teal li::before { color:rgba(255,255,255,.7) }
.svc-card.dark      { background:var(--c-navy); border-color:var(--c-navy) }
.svc-card.dark:hover { background:var(--c-navy-2) }
.svc-card.dark h3, .svc-card.dark p, .svc-card.dark li { color:#fff }
.svc-card.dark li::before { color:rgba(255,255,255,.6) }
.svc-card.full      { grid-column:1/-1 }

/* ================================================================
   AVANTAGES (pages services)
   ================================================================ */
.avantages-section { position:relative; overflow:hidden; padding:var(--py) 0 }
.avantages-grid    { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1 }
.avantages-list    { display:flex; flex-direction:column; gap:14px }
.avantage-item     { display:flex; gap:12px; align-items:flex-start }
.avantage-item::before { content:'·'; color:var(--c-teal); font-size:1.6rem; line-height:1; flex-shrink:0; margin-top:-2px }
.avantage-item h4  { font-size:.9rem; margin-bottom:3px }
.avantage-item p   { font-size:.82rem; color:var(--c-text); margin:0 }
.deco-swirl { position:absolute; right:-80px; bottom:-60px; width:320px; height:320px; opacity:.07; pointer-events:none; z-index:0 }

/* ================================================================
   STATS SERVICES (cercles outline)
   ================================================================ */
.stats-section { padding:var(--py-sm) 0 }
.stats-title   { text-align:center; font-size:1.05rem; color:var(--c-navy); margin-bottom:36px }
.stats-row     { display:grid; grid-template-columns:repeat(3,1fr) }
.stats-row.c2  { grid-template-columns:repeat(2,1fr) }
.stat-cell     { padding:32px 24px; text-align:center; border-right:1px solid var(--c-border); display:flex; flex-direction:column; align-items:center; }
.stat-cell:last-child { border-right:none }
.stat-circle {
  width:70px; height:70px; border-radius:50%;
  border:1.5px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-teal); margin:0 auto 14px;
}
.stat-circle svg { width:26px; height:26px }
.stat-ttl { font-size:.9rem; font-weight:600; color:var(--c-navy); margin-bottom:7px }
.stat-dsc { font-size:.77rem; color:var(--c-text-sm); line-height:1.6 }

/* ================================================================
   PARTNERS SECTION (pages services)
   ================================================================ */
.partners-section { padding:var(--py-sm) 0; background:var(--c-bg-off) }
.partners-section h2 { text-align:center; font-size:1.15rem; margin-bottom:30px }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.ci-list { display:flex; flex-direction:column; gap:18px; margin-top:24px }
.ci-row  { display:flex; align-items:flex-start; gap:14px }
.ci-icon {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--c-teal-l); display:flex; align-items:center; justify-content:center; color:var(--c-teal);
}
.ci-icon svg { width:17px; height:17px }
.ci-text h4  { font-size:.83rem; margin-bottom:2px }
.ci-text a, .ci-text p { font-size:.81rem; color:var(--c-text) }
.ci-text a:hover { color:var(--c-teal) }

/* ================================================================
   AIDES
   ================================================================ */
.aide-list { list-style:none; padding:0; margin:8px 0 0 }
.aide-list li { font-size:.84rem; color:var(--c-text); padding:4px 0 4px 18px; position:relative; line-height:1.55 }
.aide-list li::before { content:'·'; position:absolute; left:4px; color:var(--c-teal); font-size:1.3rem; line-height:1.1 }

/* ================================================================
   TIMELINE (À propos)
   ================================================================ */
.tl-section { background:var(--c-bg-off); padding:var(--py) 0 }
.tl-title   { text-align:center; margin-bottom:56px }
.tl-list    { position:relative }
.tl-list::before {
  content:''; position:absolute;
  left:50%; transform:translateX(-50%); top:0; bottom:0;
  width:2px; background:var(--c-border);
}
.tl-item {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; margin-bottom:52px;
  position:relative; align-items:start;
}
.tl-item::before {
  content:''; position:absolute; left:50%; top:20px; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--c-teal); z-index:1; box-shadow:0 0 0 4px rgba(43,184,180,.18);
}
.tl-left  { text-align:right; padding-right:44px }
.tl-right { padding-left:44px }
.tl-year  { font-size:1.1rem; font-weight:600; color:var(--c-teal); margin-bottom:3px }
.tl-date  { font-size:.74rem; color:var(--c-text-sm); margin-bottom:10px }
.tl-box   {
  background:#fff; border-radius:var(--r); padding:16px 18px;
  font-size:.83rem; color:var(--c-text); line-height:1.6;
  border:1.5px solid var(--c-border); box-shadow:var(--sh-xs);
}
.tl-img { border-radius:var(--r); overflow:hidden; margin-top:12px }
.tl-img .ph { height:140px; min-height:0; border-radius:0 }
.tl-deco {
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:200px; height:200px; opacity:.06; pointer-events:none; z-index:0;
}

/* ================================================================
   VALEURS (À propos)
   ================================================================ */
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }

.value-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-navy-2);
}

/* Image en flux normal — donne sa hauteur à la carte */
.value-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: static;
}

.value-grad, .value-lbl { display: none }

/* Capsule blanche flottante */
.value-info {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px 16px;
  box-shadow: 0 4px 18px rgba(28,43,53,.16);
  z-index: 5;
}
.value-info strong {
  display: block;
  font-family: var(--font);
  font-weight: 700;
  color: var(--c-navy);
  font-size: .95rem;
  margin-bottom: 5px;
}
.value-info p {
  font-size: .8rem;
  color: var(--c-text-sm);
  margin: 0;
  line-height: 1.45;
}
/* ================================================================
   RÉALISATIONS DETAIL (galerie)
   ================================================================ */
.pts-section { background:var(--c-teal); padding:var(--py) 0 }
.pts-section .label { color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.35) }
.pts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.pt-card  { background:rgba(255,255,255,.15); border-radius:var(--r); padding:24px; backdrop-filter:blur(4px) }
.pt-card h3 { color:#fff; margin-bottom:8px }
.pt-card p  { color:rgba(255,255,255,.85); font-size:.83rem; margin:0 }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.gallery-item { border-radius:var(--r); overflow:hidden }
.gallery-item .ph { height:190px; min-height:0; border-radius:0 }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background:#fff; border-top:1px solid var(--c-border); padding-top:52px }
.footer-inner {
  display:grid; grid-template-columns:170px 1fr 1fr 150px;
  gap:40px; padding-bottom:44px;
}
.footer-logo img { height:40px; width:auto; display:block }
.foot-col h4 {
  font-size:.78rem; font-weight:600; color:var(--c-navy);
  margin-bottom:14px; text-transform:uppercase; letter-spacing:.08em;
}
.foot-col ul { display:flex; flex-direction:column; gap:9px }
.foot-col a  { font-size:.81rem; color:var(--c-text); transition:color var(--t) }
.foot-col a:hover { color:var(--c-teal) }
.foot-social { display:flex; gap:9px; margin-bottom:14px }
.foot-social a {
  width:34px; height:34px; border-radius:50%;
  background:var(--c-bg-off); border:1.5px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text); transition:all var(--t);
}
.foot-social a:hover { background:var(--c-teal); color:#fff; border-color:var(--c-teal) }
.foot-social svg { width:14px; height:14px }
.footer-bottom {
  border-top:1px solid var(--c-border); padding:16px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.73rem; color:var(--c-text-sm);
}
.footer-legal { display:flex; gap:20px; flex-wrap:wrap }
.footer-legal a { color:var(--c-text-sm); transition:color var(--t) }
.footer-legal a:hover { color:var(--c-teal) }

/* ================================================================
   ANIMATIONS REVEAL
   ================================================================ */
[data-r]           { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease }
[data-r="left"]    { transform:translateX(-22px) }
[data-r="right"]   { transform:translateX(22px) }
[data-r].in        { opacity:1; transform:none }
[data-r].d1 { transition-delay:.1s }
[data-r].d2 { transition-delay:.2s }
[data-r].d3 { transition-delay:.3s }

/* ================================================================
   RESPONSIVE — version finale complète
   Breakpoints : 1280 · 1024 · 900 · 768 · 580 · 420
   ================================================================ */

/* ── 1280px : grands écrans ──────────────────────────────────── */
@media(max-width:1280px){
  :root { --wrap:1060px }
  .split { gap:48px }
}

/* ── 1024px : tablette paysage / laptop ──────────────────────── */
@media(max-width:1024px){
  :root { --py:70px; --py-sm:44px; --pad:24px }
  .btn-nav-phone   { display:none }
  .hero            { min-height:440px }
  .hero-card       { padding:28px 32px; max-width:480px }
  .split           { gap:40px }
  .footer-inner    { grid-template-columns:150px 1fr 1fr 130px; gap:22px }
  .reviews-grid    { grid-template-columns:1fr 1fr }
  .sol-header      { gap:32px }
  .cards-grid      { gap:16px }
  .svc-cards-grid  { grid-template-columns:1fr 1fr }
  .home-cta-grid   { gap:36px }
}

/* ── 900px : tablette ────────────────────────────────────────── */
@media(max-width:900px){
  :root { --py:60px; --py-sm:38px; --pad:20px }
  .svc-circles     { flex-wrap:wrap; justify-content:center; gap:8px }
  .svc-circle-item { flex:0 0 calc(33.33% - 6px); gap:10px }
  .svc-circle      { width:90px; height:90px; min-width:90px; min-height:90px; margin:0 auto }
  .svc-circle svg  { width:34px !important; height:34px !important }
  .svc-circle-label{ font-size:.74rem }
  .stats-row       { grid-template-columns:1fr 1fr }
  .stats-row .stat-cell:last-child:nth-child(odd) { grid-column:1/-1; border-right:none; border-top:1px solid var(--c-border) }
  .stats-row.c2    { grid-template-columns:1fr 1fr }
  .cards-grid      { grid-template-columns:1fr 1fr; gap:12px }
  .reviews-grid    { grid-template-columns:1fr 1fr }
  .pts-grid        { grid-template-columns:1fr }
  .split           { gap:28px }
  .avantages-grid  { gap:28px }
  .footer-inner    { grid-template-columns:1fr 1fr; gap:20px }
  .gallery-grid    { grid-template-columns:1fr 1fr }
}

/* ── 768px : mobile principal ────────────────────────────────── */
@media(max-width:768px){
  :root { --py:44px; --py-sm:28px; --nav-h:60px; --pad:16px; --r:12px; --r-lg:14px }

  /* ── ANTI-OVERFLOW GLOBAL ── */
  .wrap       { padding:0 var(--pad) }
  section     { overflow-x:hidden }

  /* ── NAVIGATION ── */
  .burger          { display:flex }
  .btn-nav-phone   { display:none }
  .btn-nav-contact { padding:8px 13px; font-size:.75rem }
  .btn-nav-contact .arr { display:none }
  .nav-ctas        { gap:8px }

  /* Overlay sombre (fermé par défaut) */
  .nav-overlay {
    display:block; opacity:0; pointer-events:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.5);
    z-index:488;
    transition:opacity .28s;
  }
  .nav-overlay.open { opacity:1; pointer-events:auto }

  /* Menu latéral droit */
  .nav-menu {
    position:fixed;
    top:var(--nav-h); right:0; bottom:0;
    width:min(300px, 84vw);
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:6px 0 calc(20px + env(safe-area-inset-bottom));
    gap:0;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    z-index:490;
    box-shadow:-6px 0 28px rgba(28,43,53,.18);
    border-left:1px solid var(--c-border);
  }
  .nav-menu.open { transform:translateX(0) }
  .nav-menu li   { width:100% }
  .nav-link {
    display:block; width:100%;
    padding:15px 22px;
    font-size:.92rem; font-weight:600;
    border-bottom:1px solid var(--c-border);
    border-radius:0;
    white-space:nowrap;
    transition:background var(--t), color var(--t);
  }
  /* Le soulignement desktop n'a pas de sens dans le tiroir */
  .nav-link::after { display:none }
  .nav-link:hover  { background:var(--c-bg-off) }
  .nav-link.active { color:var(--c-teal); background:var(--c-teal-l) }

  /* Bloc CTA en bas du tiroir : appel + devis */
  .nav-menu-cta {
    display:flex; flex-direction:column; gap:10px;
    margin-top:auto;                /* pousse les CTAs vers le bas du tiroir */
    padding:18px 18px 4px;
  }
  .nav-drawer-phone, .nav-drawer-contact {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:13px 16px;
    border-radius:var(--r-pill);
    font-size:.86rem; font-weight:600;
    transition:all var(--t);
  }
  .nav-drawer-phone   { background:var(--c-teal); color:#fff }
  .nav-drawer-phone:hover   { background:var(--c-teal-d) }
  .nav-drawer-contact { background:var(--c-navy); color:#fff }
  .nav-drawer-contact:hover { background:var(--c-navy-2) }

  /* ── HÉRO ── */
  /* Hauteur confortable : l'image respire et la carte a de la place.
     overflow:hidden contient la carte (positionnée en absolu) et la vidéo. */
  .hero {
    overflow:hidden;
    min-height:max(64vw, 340px);
  }
  .hero.hero--video { min-height:max(62vw, 320px) }

  /* La vidéo : toujours visible, clippée par overflow:hidden du .hero */
  .hero-yt { display:block }
  .hero-yt iframe {
    width:max(100%, 177.78%);
    height:max(100%, 56.25vw);
  }

  /* Overlay un peu plus sombre pour la lisibilité du texte sur photo/vidéo */
  .hero::before { background:rgba(14,22,28,.55) }

  /* Carte hero : ancrée en bas du hero, pleine largeur avec marges sûres */
  .hero-card {
    position:absolute;
    bottom:var(--pad) !important;
    left:var(--pad) !important;
    right:var(--pad) !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    padding:18px 16px !important;
    margin:0 !important;
  }
  .hero-card h1 { font-size:clamp(1.05rem, 4.6vw, 1.35rem); margin-bottom:10px }
  .hero-card p  { font-size:.8rem; margin-bottom:12px; display:none }
  .hero-card .btn { font-size:.8rem; padding:9px 18px }

  /* btn-google : déplacé en haut pour ne pas masquer la carte */
  .btn-google {
    top:12px; bottom:auto; right:12px;
    font-size:.68rem; padding:5px 10px; gap:5px;
  }
  .btn-google svg { width:13px; height:13px }

  /* Supprimer le padding-top extra (carte dans le hero, plus d'overflow) */
  .home-solutions { padding-top:var(--py) }

  /* ── TYPOGRAPHIE ── */
  h1 { font-size:clamp(1.05rem, 5vw, 1.4rem) }
  h2 { font-size:clamp(.95rem, 4.5vw, 1.25rem) }
  h3 { font-size:.9rem }
  p  { font-size:.85rem }

  /* ── SPLITS ── */
  .split, .split.rev {
    grid-template-columns:1fr;
    gap:18px;
  }
  /* Image toujours en premier sur mobile */
  .split > .img-w    { order:-1 }
  .split > .img-wrap { order:-1 }
  .split.rev > .img-w    { order:-1 }
  .split.rev > .img-wrap { order:-1 }

  /* Images split : ratio 16:9 sur mobile */
  .img-w img { aspect-ratio:16/9; height:auto }

  /* Images circulaires : taille fixe responsive */
  .img-w.circle img {
    width:min(200px, 55vw) !important;
    height:min(200px, 55vw) !important;
  }

  /* ── AUTRES GRIDS ── */
  .sol-header       { grid-template-columns:1fr; gap:12px }
  .svc-cards-grid   { grid-template-columns:1fr; gap:10px }
  .svc-card.full    { grid-column:auto }
  .avantages-grid   { grid-template-columns:1fr; gap:18px }
  .project-cta-grid { grid-template-columns:1fr }
  .service-cta-grid { grid-template-columns:1fr; gap:16px }
  .home-actu-grid   { grid-template-columns:1fr; align-items:start; gap:20px }
  .home-actu-right  { order:-1 }
  .home-cta-grid    { grid-template-columns:1fr; gap:20px }
  .contact-grid     { grid-template-columns:1fr; gap:20px }
  .cards-grid       { grid-template-columns:1fr 1fr; gap:10px }
  .reviews-grid     { grid-template-columns:1fr; gap:10px }
  .values-grid      { grid-template-columns:1fr 1fr; gap:10px }
  .form-row         { grid-template-columns:1fr }
  .gallery-grid     { grid-template-columns:1fr 1fr; gap:8px }
  .gallery-item img { height:130px !important }
  .pts-grid         { grid-template-columns:1fr; gap:10px }

  /* ── CERCLES SERVICES ── */
  .svc-circles      { flex-wrap:wrap; justify-content:center; gap:8px }
  .svc-circle-item  { flex:0 0 calc(33.33% - 6px); gap:8px; min-width:0 }
  .svc-circle       { width:76px; height:76px; min-width:76px; min-height:76px; margin:0 auto }
  .svc-circle svg   { width:28px !important; height:28px !important }
  .svc-circle-label { font-size:.7rem; text-align:center; padding:0 2px }
  .sol-header .svc-circles { gap:6px }

  /* ── CTA ── */
  .cta-photo-left  { display:none }
  .project-cta-grid > *:first-child { display:none }
  .cta-form-box    { padding:22px 18px }
  .service-cta-form{ padding:20px 16px }
  .service-cta-txt h2 { font-size:1.05rem; color:#fff }
  .service-cta-txt p  { color:rgba(255,255,255,.8); font-size:.82rem }

  /* ── STATS ── */
  .stat-cell  { padding:18px 12px }
  .stat-circle{ width:58px; height:58px }
  .stat-ttl   { font-size:.82rem }
  .stat-dsc   { font-size:.73rem }

  /* ── VALUES ── */
  .value-card { aspect-ratio:4/3 }
  .value-info { padding:10px 12px 12px; bottom:8px; left:8px; right:8px }
  .value-info strong { font-size:.86rem; margin-bottom:3px }
  .value-info p      { font-size:.74rem }

  /* ── TIMELINE ── */
  .tl-title        { font-size:1.05rem; margin-bottom:32px }
  .tl-list::before { left:10px }
  .tl-item         { grid-template-columns:1fr; gap:6px; margin-bottom:28px }
  .tl-item::before { left:10px; top:3px; width:10px; height:10px }
  .tl-left  { text-align:left; padding-right:0; padding-left:28px }
  .tl-right { padding-left:28px }
  .tl-year  { font-size:.9rem }
  .tl-box   { font-size:.78rem; padding:10px 12px }

  /* ── CARDS ── */
  .card-body    { padding:10px 12px }
  .card-body h3 { font-size:.82rem; margin-bottom:3px }
  .card-body p  { font-size:.72rem }
  .card-badge   { font-size:.62rem; padding:3px 8px }

  /* ── REVIEWS ── */
  .review-card  { padding:14px 12px }
  .review-text  { font-size:.74rem }
  .review-stars { font-size:.82rem }

  /* ── BIG STATS ── */
  .big-stats { gap:8px }
  .big-num   { font-size:1.5rem }
  .big-lbl   { font-size:.72rem }

  /* ── AVANTAGES ── */
  .avantage-item h4 { font-size:.84rem }
  .avantage-item p  { font-size:.77rem }

  /* ── SVC CARDS ── */
  .svc-card    { padding:16px 14px }
  .svc-card h3 { font-size:.9rem }
  .svc-card p  { font-size:.8rem }

  /* ── PARTENAIRES ── */
  .partners-row { gap:8px; flex-wrap:wrap }
  .partner      { height:32px; padding:3px 10px }

  /* ── FORMULAIRES ── */
  .fi, .ft, .fs     { font-size:.82rem; padding:11px 13px }
  .contact-form-box { padding:22px 16px }

  /* ── BOUTONS ── */
  .btn { padding:9px 17px; font-size:.8rem }

  /* ── FOOTER ── */
  .footer-inner  { grid-template-columns:1fr 1fr; gap:18px }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center }
  .footer-legal  { justify-content:center; flex-wrap:wrap; gap:10px }
  .foot-col h4   { font-size:.73rem }
  .foot-col a    { font-size:.75rem }
  .footer-bottom span { font-size:.7rem }
}

/* ── 580px : mobiles standards ───────────────────────────────── */
@media(max-width:580px){
  :root { --py:36px; --py-sm:24px; --pad:14px }

  /* Hero */
  .hero     { min-height:max(70vw, 320px) }
  .hero-card { padding:16px 14px !important; bottom:var(--pad) !important }
  .hero-card h1 { font-size:clamp(1rem, 5vw, 1.2rem) }

  /* Cards → 1 colonne */
  .cards-grid  { grid-template-columns:1fr }
  .reviews-grid{ grid-template-columns:1fr }

  /* Values → 1 colonne */
  .values-grid { grid-template-columns:1fr }
  .value-card  { aspect-ratio:16/9 }

  /* Stats → 1 colonne */
  .stats-row, .stats-row.c2 { grid-template-columns:1fr }
  .stat-cell { border-right:none; border-bottom:1px solid var(--c-border); padding:14px 10px }
  .stat-cell:last-child { border-bottom:none }

  /* Footer → 2 colonnes d'abord, puis 1 si nécessaire */
  .footer-inner { grid-template-columns:1fr 1fr; gap:16px }

  /* Cercles → 3 par ligne (reste) */
  .svc-circle { width:68px; height:68px; min-width:68px; min-height:68px }
  .svc-circle svg { width:24px !important; height:24px !important }

  /* Gallery → 1 col */
  .gallery-grid { grid-template-columns:1fr }
  .gallery-item img { height:180px !important }

  /* Images circulaires */
  .img-w.circle img { width:min(160px, 50vw) !important; height:min(160px, 50vw) !important }

  /* Images split : ratio 4:3 */
  .img-w img { aspect-ratio:4/3 }

  /* Nav logo */
  .nav-logo img { height:36px }

  /* Big stats */
  .big-stats { grid-template-columns:1fr 1fr }

  /* Value info */
  .value-info { padding:8px 10px 10px }
  .value-info strong { font-size:.82rem }
  .value-info p { font-size:.71rem }
}

/* ── 420px : petits mobiles ──────────────────────────────────── */
@media(max-width:420px){
  :root { --py:30px; --py-sm:20px; --pad:12px; --r:10px; --r-lg:12px }

  /* Nav */
  .nav-logo img    { height:32px }
  .btn-nav-contact { font-size:.72rem; padding:7px 10px }
  .navbar .wrap    { gap:6px }

  /* Menu pleine largeur sur très petit écran */
  .nav-menu { width:100% }

  /* Hero */
  .hero-card { padding:14px 12px !important; bottom:var(--pad) !important }
  .hero-card h1 { font-size:1rem; line-height:1.25; margin-bottom:8px }
  .hero-card .btn { font-size:.76rem; padding:8px 15px }

  /* Typo */
  h1 { font-size:.95rem }
  h2 { font-size:.9rem }
  h3 { font-size:.82rem }

  /* Boutons */
  .btn { padding:8px 14px; font-size:.76rem }

  /* Cercles */
  .svc-circle-item { flex:0 0 calc(33.33% - 5px) }
  .svc-circle { width:60px; height:60px; min-width:60px; min-height:60px }
  .svc-circle svg { width:22px !important; height:22px !important }
  .svc-circle-label { font-size:.65rem }

  /* Footer → 1 colonne */
  .footer-inner { grid-template-columns:1fr; gap:20px }
  .footer-logo  { text-align:center }

  /* Stats */
  .stat-circle { width:52px; height:52px }
  .stat-ttl    { font-size:.78rem }
  .stat-dsc    { font-size:.69rem }

  /* Values */
  .value-info { padding:6px 8px 8px; border-radius:10px }
  .value-info strong { font-size:.78rem }
  .value-info p      { font-size:.68rem; line-height:1.3 }

  /* Cards */
  .card-body h3 { font-size:.78rem }
  .card-body p  { font-size:.69rem }

  /* CTA form */
  .cta-form-box     { padding:18px 14px }
  .service-cta-form { padding:16px 12px }
  .contact-form-box { padding:18px 14px }

  /* Fi/ft/fs */
  .fi, .ft, .fs { font-size:.8rem; padding:10px 11px }

  /* Big stats → 1 col */
  .big-stats { grid-template-columns:1fr; gap:8px }

  /* Partners */
  .partner { height:28px; padding:2px 8px }

  /* Timeline */
  .tl-box  { font-size:.74rem; padding:8px 10px }
  .tl-year { font-size:.84rem }
}

/* ================================================================
   IMAGES RÉELLES — règles pour <img> dans tous les conteneurs
   ================================================================ */

/* Wrapper split */
.img-w img {
  width:100%; display:block;
  object-fit:cover; border-radius:var(--r-lg);
  aspect-ratio:4/3;
}
/* Override aspect-ratio pour les cas où un style inline fixe la hauteur */
.img-w img[style*="height"] { aspect-ratio:auto }

/* Circulaire */
.img-w.circle img {
  border-radius:50% !important;
  width:420px; height:420px;
  aspect-ratio:1/1; max-width:100%;
  object-fit:cover; margin:0 auto; display:block;
}

/* Cards */
.card-img img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}



/* Timeline image */
.tl-img img {
  width:100%; height:150px;
  object-fit:cover; border-radius:var(--r); display:block;
}

/* Actualités home */
.home-actu-photo img {
  width:100%; height:460px;
  object-fit:cover; display:block;
  border-radius:var(--r-lg);
}

/* CTA accueil */
.home-cta-photo img {
  width:100%; min-height:420px;
  object-fit:cover; display:block;
}

/* Compatibilité anciens wrappers .img-wrap/.img-ph */
.img-wrap img {
  width:100%; display:block;
  object-fit:cover; border-radius:var(--r-lg);
  aspect-ratio:4/3;
}
.img-wrap.circle img, .img-wrap .circle img {
  border-radius:50% !important;
  width:420px; height:420px;
  aspect-ratio:1/1; max-width:100%;
  object-fit:cover; margin:0 auto;
}

/* Image pleine largeur (équipe, partenaires, etc.) */
.img-full {
  width:100%; border-radius:var(--r-lg);
  overflow:hidden; display:block;
}
.img-full img {
  width:100%; display:block;
  object-fit:cover;
}

/* ---- ALIASES FORMULAIRE (compatibilité anciens fichiers) ---- */
.finput, .finput:focus  { width:100%; padding:13px 16px; border:1.5px solid var(--c-border); border-radius:var(--r); font-family:var(--font); font-size:.84rem; color:var(--c-navy); background:#fff; outline:none; transition:border-color var(--t); appearance:none; display:block; }
.finput:focus           { border-color:var(--c-teal) }
.finput::placeholder    { color:var(--c-text-sm) }
.ftextarea              { width:100%; padding:13px 16px; border:1.5px solid var(--c-border); border-radius:var(--r); font-family:var(--font); font-size:.84rem; color:var(--c-navy); background:#fff; outline:none; transition:border-color var(--t); min-height:110px; resize:vertical; display:block; }
.ftextarea:focus        { border-color:var(--c-teal) }
.ftextarea::placeholder { color:var(--c-text-sm) }
.fselect                { width:100%; padding:13px 40px 13px 16px; border:1.5px solid var(--c-border); border-radius:var(--r); font-family:var(--font); font-size:.84rem; color:var(--c-navy); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8090' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center/16px; outline:none; transition:border-color var(--t); appearance:none; cursor:pointer; display:block; }
.fselect:focus          { border-color:var(--c-teal) }

/* ---- CTA PHOTO GAUCHE ---- */
.cta-photo-left { border-radius:var(--r-lg); overflow:hidden; position:relative; z-index:1; }
.cta-photo-left img { width:100%; min-height:360px; object-fit:cover; display:block; }

/* ================================================================
   PAGE CONTACT
   ================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-info h2 { margin-bottom:16px }
.contact-info p  { color:var(--c-text-sm); margin-bottom:12px; line-height:1.65 }

.contact-details { margin-top:32px; display:flex; flex-direction:column; gap:20px }

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c-teal-l);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--c-teal);
}
.contact-detail strong { display:block; font-weight:600; color:var(--c-navy); font-size:.88rem; margin-bottom:2px }
.contact-detail a, .contact-detail span { color:var(--c-text-sm); font-size:.88rem; text-decoration:none }
.contact-detail a:hover { color:var(--c-teal) }

.contact-form-box {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 40px;
  box-shadow: 0 4px 32px rgba(28,43,53,.08);
  border: 1px solid var(--c-border);
}

/* Aides — steps */
.steps-list { display:flex; flex-direction:column; gap:20px; margin-top:16px }
.step-item  { display:flex; gap:16px; align-items:flex-start }
.step-num   { width:36px; height:36px; border-radius:50%; background:var(--c-teal); color:#fff; font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.step-item h4 { font-size:.95rem; font-weight:600; color:var(--c-navy); margin-bottom:4px }
.step-item p  { font-size:.84rem; color:var(--c-text-sm); margin:0 }

/* ================================================================
   PAGE MENTIONS LÉGALES
   ================================================================ */
 
/* Hero réduit pour les pages légales */
.hero-sm { min-height: 280px; }
.hero-sm .hero-card { max-width: 680px; }
 
/* Conteneur de contenu légal */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  color: var(--c-text);
  font-size: .97rem;
  line-height: 1.8;
}
.legal-wrap p  { margin-bottom: 14px; }
.legal-wrap a  { color: var(--c-teal); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }
 
.legal-h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: 48px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-teal);
}
.legal-h2:first-child { margin-top: 0; }
 
.legal-h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: 28px 0 8px;
}
 
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  background: var(--c-bg-off);
  border-radius: var(--r);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal-list li {
  font-size: .92rem;
  color: var(--c-text);
  padding-left: 16px;
  position: relative;
}
.legal-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--c-teal);
  font-weight: 700;
}
 
.legal-sep {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 52px 0;
}
 
@media (max-width:640px) {
  .hero-sm { min-height: 220px; }
  .legal-h2 { font-size: 1.1rem; }
}