/* =========================================================================
   ENHANCE.CSS — Sections & motion ported from the React site (B),
   adapted to Crépi Style's static design language (A).
   Loaded AFTER style.css. Uses A's tokens (--accent = terre, etc.).
   ========================================================================= */

:root {
  --terre-rgb: 181, 88, 58;          /* var(--terre) as rgb for glows */
  --terre-hi-rgb: 207, 107, 73;
  --glow-1: 0 0 20px rgba(var(--terre-hi-rgb), .30), 0 0 60px rgba(var(--terre-hi-rgb), .15);
  --glow-2: 0 0 30px rgba(var(--terre-hi-rgb), .42), 0 0 90px rgba(var(--terre-hi-rgb), .18);
  --depth: 0 2px 4px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.10);
  --depth-hi: 0 8px 16px rgba(0,0,0,.10), 0 16px 32px rgba(0,0,0,.14), 0 32px 64px rgba(0,0,0,.18), 0 0 40px rgba(var(--terre-hi-rgb), .10);
}

/* ---------- shared 3D helpers ---------- */
.perspective { perspective: 1500px; }
.preserve-3d { transform-style: preserve-3d; }
.depth { box-shadow: var(--depth); }
.depth-hover { transition: transform .5s cubic-bezier(.23,1,.32,1), box-shadow .5s cubic-bezier(.23,1,.32,1); }
.depth-hover:hover { transform: translateY(-10px); box-shadow: var(--depth-hi); }
.glow { box-shadow: var(--glow-1); }

/* Animated gradient border on hover (terre) */
.gborder { position: relative; }
.gborder::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, var(--terre-hi), rgba(var(--terre-rgb), .25), var(--terre-hi), rgba(var(--terre-rgb), .25));
  background-size: 300% 300%;
  opacity: 0; transition: opacity .5s;
}
.gborder:hover::before { opacity: .85; animation: gradient-shift 4s ease infinite; }

/* ---------- keyframes ---------- */
@keyframes float-slow    { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-28px) rotate(3deg)} }
@keyframes float-medium  { 0%,100%{transform:translateY(0) rotate(0)} 33%{transform:translateY(-18px) rotate(-2deg)} 66%{transform:translateY(-9px) rotate(2deg)} }
@keyframes float-reverse { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(24px) rotate(-3deg)} }
@keyframes spin-slow     { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes pulse-glow    { 0%,100%{opacity:.30; transform:scale(1)} 50%{opacity:.6; transform:scale(1.1)} }
@keyframes gradient-shift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes scan-line     { 0%{transform:translateY(-100%); opacity:0} 50%{opacity:.4} 100%{transform:translateY(100vh); opacity:0} }
@keyframes grid-pulse    { 0%,100%{opacity:.06} 50%{opacity:.16} }
@keyframes particle-rise { 0%{transform:translateY(0) translateX(0) scale(0); opacity:0} 10%{opacity:1; transform:scale(1)} 90%{opacity:1} 100%{transform:translateY(-120vh) translateX(40px) scale(.5); opacity:0} }
@keyframes spin-cube     { 0%{transform:rotateX(0) rotateY(0)} 100%{transform:rotateX(360deg) rotateY(360deg)} }
@keyframes bounce-slow   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ---------- decorative layers (hero + dark sections) ---------- */
.fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.float-shape { position: absolute; border-radius: 22px; border: 2px solid rgba(var(--terre-hi-rgb), .22); }
.float-shape.round { border-radius: 50%; }
.float-shape.fill { background: rgba(var(--terre-hi-rgb), .12); border: none; }
.fs1 { top:10%; left:5%;  width:96px;  height:96px;  animation: float-slow 8s ease-in-out infinite; }
.fs2 { top:20%; right:8%; width:64px;  height:64px;  animation: float-medium 6s ease-in-out infinite 1s; }
.fs3 { bottom:24%; left:12%; width:80px; height:80px; animation: float-reverse 7s ease-in-out infinite 2s; }
.fs4 { top:58%; right:16%; width:52px; height:52px;  animation: float-slow 8s ease-in-out infinite 3s; transform: rotate(45deg); }
.fs5 { bottom:10%; right:24%; width:120px; height:120px; animation: float-medium 6s ease-in-out infinite .5s; }
.fs6 { top:40%; left:84%; width:36px; height:36px;   animation: spin-slow 20s linear infinite; }

.glow-blob { position: absolute; border-radius: 50%; filter: blur(60px); background: rgba(var(--terre-hi-rgb), .18); animation: pulse-glow 4s ease-in-out infinite; }

.grid-floor {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: grid-pulse 4s ease-in-out infinite;
  background-image:
    linear-gradient(rgba(var(--terre-hi-rgb), .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--terre-hi-rgb), .25) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  transform: perspective(800px) rotateX(50deg) translateY(20%) scale(2);
  transform-origin: center bottom;
}

.scan-line {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--terre-hi-rgb), .6), transparent);
  box-shadow: 0 0 20px var(--terre-hi); animation: scan-line 6s ease-in-out infinite;
}

.particle-field { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.particle { position: absolute; border-radius: 50%; background: rgba(var(--terre-hi-rgb), .45); box-shadow: 0 0 12px rgba(var(--terre-hi-rgb), .6); animation: particle-rise linear infinite; }

.cube3d { position: absolute; pointer-events: none; perspective: 800px; z-index: 2; }
.cube3d .cube { position: relative; width: 72px; height: 72px; transform-style: preserve-3d; animation: spin-cube 18s linear infinite; }
.cube3d .cube span { position: absolute; inset: 0; border-radius: 10px; border: 1px solid rgba(var(--terre-hi-rgb), .4); background: linear-gradient(135deg, rgba(var(--terre-hi-rgb), .28), rgba(var(--terre-hi-rgb), .05)); }
.cube3d .cube span:nth-child(1){ transform: translateZ(36px); }
.cube3d .cube span:nth-child(2){ transform: rotateY(180deg) translateZ(36px); }
.cube3d .cube span:nth-child(3){ transform: rotateY(90deg) translateZ(36px); }
.cube3d .cube span:nth-child(4){ transform: rotateY(-90deg) translateZ(36px); }
.cube3d .cube span:nth-child(5){ transform: rotateX(90deg) translateZ(36px); }
.cube3d .cube span:nth-child(6){ transform: rotateX(-90deg) translateZ(36px); }

/* ---------- Header quick-action icons ---------- */
.hdr-ic { display: none; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; color: var(--accent); background: rgba(var(--terre-rgb), .1); transition: transform .25s, background .25s; }
.hdr-ic:hover { transform: scale(1.1); background: rgba(var(--terre-rgb), .2); }
.hdr-ic.wa { color: #128C7E; background: rgba(37,211,102,.12); }
.hdr-ic.wa:hover { background: rgba(37,211,102,.22); }
.hdr-ic svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .hdr-ic { display: inline-flex; } }

/* ---------- HERO enhancements ---------- */
.hero { min-height: 88vh; display: flex; align-items: center; }
.hero .container { position: relative; z-index: 10; }
.hero-bg-parallax { position: absolute; inset: -6%; z-index: 0; }
.hero-bg-parallax::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28,26,23,.92), rgba(28,26,23,.68) 55%, rgba(28,26,23,.35)); }
.hero-bg-parallax img { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .55rem 1.1rem; border-radius: 999px; margin-bottom: 1.4rem; color: var(--limewash);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(var(--terre-hi-rgb), .4); box-shadow: var(--glow-1);
}
.hero-badge svg { width: 15px; height: 15px; color: var(--terre-hi); }

.hero-rating {
  margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 1rem;
  padding: .9rem 1.2rem; border-radius: 16px; width: fit-content;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--glow-1);
}
.hero-rating .avatars { display: flex; }
.hero-rating .avatars span { width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; background: rgba(255,255,255,.92); border: 2px solid rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.hero-rating .avatars span:first-child { margin-left: 0; }
.hero-rating .star { color: #f5b301; }
.hero-rating .score { display: flex; align-items: center; gap: .3rem; color: #f5b301; font-weight: 700; font-size: 1.15rem; font-family: var(--display); }
.hero-rating .score-sub { color: #d9d2c4; font-size: .82rem; }

/* ---------- Partner / trust bar ---------- */
.partner-bar { background: var(--bg-raised); border-block: 1px solid var(--line); }
.partner-bar .container { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: space-between; }
.partner-item { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; color: var(--fg); transition: transform .3s; }
.partner-item:hover { transform: scale(1.06); }
.partner-item svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; }

/* ---------- Rich service cards (image + icon + bullets) ---------- */
.services-rich { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.srv-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.srv-card .srv-media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.srv-card .srv-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.srv-card:hover .srv-media img { transform: scale(1.1); }
.srv-card .srv-icon { width: 54px; height: 54px; margin: -42px 0 0 1.8rem; position: relative; z-index: 2; border-radius: 16px; background: var(--bg-raised); border: 1px solid rgba(var(--terre-rgb), .25); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--depth); }
.srv-card .srv-icon svg { width: 26px; height: 26px; }
.srv-card .srv-body { padding: 1rem 1.8rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.srv-card .srv-body h3 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; margin-bottom: .6rem; }
.srv-card .srv-body > p { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }
.srv-card ul { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.srv-card ul li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 500; }
.srv-card ul li svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ---------- Featured projects ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; margin-bottom: 3.5rem; }
.project-card { display: block; text-decoration: none; color: inherit; }
.project-card .pc-media { position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; box-shadow: var(--depth); }
.project-card .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.project-card:hover .pc-media img { transform: scale(1.1); }
.project-card .pc-media::after { content: "Voir le projet →"; position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2rem; color: #fff; font-weight: 600; font-size: .9rem; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%); opacity: 0; transition: opacity .4s; }
.project-card:hover .pc-media::after { opacity: 1; }
.project-card h3 { margin-top: 1rem; font-size: 1.15rem; text-transform: none; letter-spacing: 0; transition: color .3s; }
.project-card:hover h3 { color: var(--accent); }
.project-card p { font-size: .9rem; color: var(--muted); margin-top: .3rem; }

/* ---------- Gallery carousel ---------- */
.carousel { position: relative; max-width: 900px; margin-inline: auto; border-radius: 22px; overflow: hidden; box-shadow: var(--depth); }
.carousel-viewport { position: relative; aspect-ratio: 16/10; background: var(--line); }
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.carousel-slide.is-active { opacity: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.42); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s, background .3s; z-index: 2; }
.carousel:hover .carousel-btn { opacity: 1; }
.carousel-btn:hover { background: rgba(0,0,0,.65); }
.carousel-btn.prev { left: 14px; } .carousel-btn.next { right: 14px; }
.carousel-btn svg { width: 22px; height: 22px; }
.carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; max-width: 82%; flex-wrap: wrap; justify-content: center; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: all .3s; }
.carousel-dots button.is-active { width: 22px; background: var(--terre-hi); }
.carousel-counter { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--mono); font-size: .74rem; color: #fff; padding: .25rem .7rem; border-radius: 999px; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.carousel-toggle { position: absolute; top: 14px; left: 14px; z-index: 2; width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .3s; }
.carousel-toggle:hover { background: rgba(0,0,0,.65); }
.carousel-toggle svg { width: 16px; height: 16px; }
/* Fleches visibles au clavier et sur ecrans tactiles (pas seulement au survol) */
.carousel:focus-within .carousel-btn, .carousel-btn:focus-visible { opacity: 1; }
@media (hover: none) { .carousel-btn { opacity: 1; } }

/* ---------- Expertise: stats + agréments (dark section) ---------- */
.dark-fx { position: relative; overflow: hidden; }
.expertise-grid { display: grid; gap: 3.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .expertise-grid { grid-template-columns: 1fr 1fr; } }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.stat-card { padding: 1.4rem; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s; }
.stat-card:hover { transform: translateY(-6px) scale(1.03); }
.stat-card .stat-value { font-family: var(--display); font-size: 2.6rem; color: var(--terre-hi); line-height: 1; }
.stat-card .stat-label { font-size: .85rem; color: #d9d2c4; margin-top: .4rem; }
.agrements-panel { background: var(--bg-raised); color: var(--fg); border-radius: 24px; padding: 2rem; border: 1px solid var(--line); box-shadow: var(--depth); position: relative; }
.agrements-panel h3 { text-align: center; text-transform: none; letter-spacing: 0; font-size: 1.4rem; margin-bottom: 1.5rem; }
.agrements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.agrement-item { display: flex; align-items: center; gap: .7rem; padding: .9rem; border-radius: 12px; background: var(--bg); border: 1px solid transparent; transition: all .3s; }
.agrement-item:hover { background: rgba(var(--terre-rgb), .08); border-color: rgba(var(--terre-rgb), .3); transform: translateY(-3px); }
.agrement-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.agrement-item span { font-weight: 600; font-size: .85rem; }

/* ---------- Process timeline ---------- */
.process { max-width: 860px; margin-inline: auto; position: relative; }
.process::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(to bottom, var(--accent), rgba(var(--terre-rgb), .25), transparent); }
@media (min-width: 760px) { .process::before { left: 50%; transform: translateX(-50%); } }
.process-step { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.4rem; padding-left: 66px; }
@media (min-width: 760px) { .process-step { grid-template-columns: 1fr 1fr; align-items: center; padding-left: 0; gap: 2.5rem; } .process-step:nth-child(even) { direction: rtl; } .process-step:nth-child(even) > * { direction: ltr; } }
.process-num { position: absolute; left: 0; top: 0; width: 54px; height: 54px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); color: var(--accent); font-family: var(--display); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-1); z-index: 2; }
@media (min-width: 760px) { .process-num { left: 50%; transform: translateX(-50%); } .process-step:nth-child(odd) .process-body { text-align: right; } }
.process-body { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.6rem; box-shadow: var(--depth); }
.process-body h3 { text-transform: none; letter-spacing: 0; font-size: 1.15rem; margin-bottom: .4rem; }
.process-body p { color: var(--muted); font-size: .92rem; }

/* ---------- Aides financières (accent bg) ---------- */
.aides { background: var(--accent); color: var(--accent-contrast); position: relative; overflow: hidden; }
.aides .container { position: relative; z-index: 2; }
.aides-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .aides-grid { grid-template-columns: 1fr 1fr; } }
.aides h2 { color: var(--accent-contrast); }
.aides-lead { color: var(--accent-contrast); opacity: .92; font-size: 1.08rem; margin: 1rem 0 1.6rem; }
.aides .btn-light { background: var(--accent-contrast); color: var(--accent); }
.aide-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .aide-cards { grid-template-columns: 1fr; } }
.aide-card { padding: 1.4rem; border-radius: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s; }
.aide-card:hover { transform: translateY(-6px) scale(1.03); }
.aide-card h3 { color: var(--accent-contrast); text-transform: none; letter-spacing: 0; font-size: 1.15rem; margin-bottom: .4rem; }
.aide-card p { color: var(--accent-contrast); opacity: .85; font-size: .85rem; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; }
.team-card { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--depth); aspect-ratio: 3/4; }
.team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.team-card:hover img { transform: scale(1.1); }
.team-card .team-info { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15) 55%, transparent); color: #fff; }
.team-card .team-quote { font-size: .72rem; font-style: italic; color: rgba(255,255,255,.9); line-height: 1.4; margin-bottom: .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.team-card .team-name { font-family: var(--display); font-size: .95rem; text-transform: uppercase; }
.team-card .team-role { color: var(--terre-hi); font-weight: 600; font-size: .78rem; }
.team-card .team-loc { display: flex; align-items: center; gap: .3rem; color: rgba(255,255,255,.6); font-size: .68rem; margin-top: .3rem; }
.team-card .team-loc svg { width: 11px; height: 11px; }

/* ---------- Team as roles (honest — no fabricated individuals) ---------- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.role-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; box-shadow: var(--depth); transition: transform .4s, box-shadow .4s, border-color .3s; }
.role-card:hover { transform: translateY(-6px); box-shadow: var(--depth-hi); border-color: rgba(var(--terre-rgb), .35); }
.role-ic { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; background: rgba(var(--terre-rgb), .1); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 1rem; }
.role-ic svg { width: 24px; height: 24px; }
.role-card h3 { text-transform: none; letter-spacing: 0; font-size: 1.08rem; margin-bottom: .4rem; }
.role-card p { font-size: .88rem; color: var(--muted); }

/* ---------- Testimonials ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
.tst-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 22px; padding: 2rem; box-shadow: var(--depth); }
.tst-stars { display: flex; gap: 3px; margin-bottom: 1.2rem; color: #f5b301; }
.tst-stars svg { width: 16px; height: 16px; }
.tst-card blockquote { margin: 0 0 1.6rem; font-style: italic; font-weight: 500; line-height: 1.6; }
.tst-who { display: flex; align-items: center; gap: .7rem; }
.tst-who .av { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--terre-rgb), .12); border: 1px solid rgba(var(--terre-rgb), .25); color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tst-who .n { font-weight: 700; font-size: .85rem; } .tst-who .l { font-size: .78rem; color: var(--muted); }

/* ---------- Blog / actualités ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.blog-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 14px; padding: 1.5rem; box-shadow: var(--depth); transition: transform .35s, box-shadow .35s, border-color .3s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--depth-hi); }
.blog-card .bc-tag { align-self: flex-start; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); background: rgba(var(--terre-rgb), .1); padding: .2rem .6rem; border-radius: 999px; }
.blog-card .bc-date { color: var(--muted); font-weight: 600; font-size: .8rem; margin: .9rem 0 .4rem; }
.blog-card h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; font-weight: 700; transition: color .3s; line-height: 1.35; }
.blog-card:hover h3 { color: var(--accent); }
.blog-card .bc-more { margin-top: auto; padding-top: 1rem; font-family: var(--mono); font-size: .8rem; color: var(--accent-text); }

/* ---------- Contact enrich ---------- */
.contact-info { display: flex; flex-direction: column; gap: 1.4rem; background: var(--bg-raised); color: var(--fg); border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem; box-shadow: var(--depth); }
.ci-row { display: flex; gap: 1rem; align-items: flex-start; }
.ci-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-ic.wa { background: #25D366; color: #fff; }
.ci-ic svg { width: 20px; height: 20px; }
.ci-row h4 { text-transform: none; letter-spacing: 0; font-size: 1.02rem; margin-bottom: .25rem; }
.ci-row a, .ci-row p { color: var(--muted); font-size: .92rem; text-decoration: none; display: block; }
.ci-row a:hover { color: var(--accent); }
.ci-row a.wa-link { color: #128C7E; font-weight: 600; }

/* ---------- Zone d'intervention (rich city cards) ---------- */
.zone-group { margin-bottom: 2.5rem; }
.zone-region { display: flex; align-items: center; gap: .8rem; font-size: 1.3rem; text-transform: none; letter-spacing: 0; margin-bottom: 1.3rem; }
.zone-num { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); align-items: center; justify-content: center; font-family: var(--display); font-size: 1rem; box-shadow: var(--glow-1); flex-shrink: 0; }
.zone-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.zone-city { display: flex; gap: .9rem; padding: 1.1rem 1.2rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: inherit; box-shadow: var(--depth); transition: transform .35s, box-shadow .35s, border-color .3s; }
.zone-city:hover { transform: translateY(-5px); box-shadow: var(--depth-hi); border-color: rgba(var(--terre-rgb), .4); }
.zc-pin { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--terre-rgb), .1); color: var(--accent); align-items: center; justify-content: center; flex-shrink: 0; transition: background .3s, transform .3s; }
.zone-city:hover .zc-pin { background: rgba(var(--terre-rgb), .2); transform: scale(1.08); }
.zc-pin svg { width: 18px; height: 18px; }
.zc-body { min-width: 0; }
.zc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; }
.zc-head h4 { text-transform: none; letter-spacing: 0; font-size: 1.02rem; }
.zone-city:hover .zc-head h4 { color: var(--accent); }
.zc-dist { flex-shrink: 0; font-family: var(--mono); font-size: .7rem; color: var(--muted); background: var(--muted-bg, rgba(0,0,0,.05)); padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
:root[data-theme="dark"] .zc-dist { background: rgba(255,255,255,.08); }
.zc-body p { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.zone-map { margin-top: 2.5rem; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--depth); height: 380px; }
.zone-map iframe { display: block; width: 100%; height: 100%; }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 300; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(37,211,102,.4); animation: bounce-slow 3s ease-in-out infinite; transition: transform .3s, background .3s;
}
.whatsapp-fab:hover { background: #128C7E; transform: scale(1.1); }
.whatsapp-fab svg { width: 28px; height: 28px; }
/* Remonte le bouton WhatsApp quand le bandeau cookies est affiché (mobile). */
@media (max-width: 680px) { body.cookie-open .whatsapp-fab { bottom: 128px; } }

/* ---------- reveal: add stagger + 3d tilt-in ---------- */
[data-reveal].tilt-in { transform: translateY(40px) rotateX(12deg); transform-origin: bottom; }
[data-reveal].tilt-in.is-visible { transform: none; }

/* section intro helper (centered) */
.section-head.center { margin-inline: auto; text-align: center; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  .float-shape, .glow-blob, .grid-floor, .scan-line, .particle, .cube3d .cube, .whatsapp-fab { animation: none !important; }
  .hero-bg-parallax { inset: 0; }
}