.reviews-encadre{background:var(--light);border:1px solid rgba(10,42,76,0.08);padding:18px;border-radius:10px;margin-top:18px}
.reviews-encadre h3{color:var(--primary);margin:0 0 12px;font-size:1.1rem}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.reviews-grid .review{background:#fff;padding:12px;border-radius:8px;border:1px solid rgba(10,42,76,0.04);color:var(--primary);font-size:14px;margin:0}
.reviews-grid .review cite{display:block;margin-top:8px;color:var(--muted);font-style:normal;font-weight:600}
.reviews-see-more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--primary);text-decoration:none;font-weight:700}
.reviews-see-more::after{content:"→"}
/* Styles de base */
:root{
  --primary:#0A2A4C; /* couleur principale sombre */
  --light:#D4E8FA;   /* couleur claire */
  --accent:#FFB758;  /* couleur accent (jaune) */
  --bg:#ffffff;
  --text:var(--primary);
  --muted:#6b6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  position:relative;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body > * {
  position:relative;
  z-index:1;
}
.container{max-width:1000px;margin:0 auto;padding:32px}

/* Header */
.site-header{border-bottom:1px solid #eee;background:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700}
.main-nav ul{list-style:none;display:flex;gap:16px}
.main-nav a{
  position:relative;
  color:var(--text);
  text-decoration:none;
  padding:8px 12px;
  border-radius:999px;
  transition:color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.is-active{
  color:var(--primary);
  background:linear-gradient(135deg, rgba(156,203,234,0.45), rgba(212,232,250,0.92));
  box-shadow:0 6px 18px rgba(10,42,76,0.08);
}
.main-nav a.menu-flash{
  animation:menu-color-shift .55s ease;
}
@keyframes menu-color-shift{
  0%{ background:rgba(156,203,234,0.35); color:var(--primary); transform:scale(1); }
  30%{ background:rgba(156,203,234,0.9); color:var(--primary); transform:scale(1.04); }
  60%{ background:rgba(212,232,250,0.95); color:var(--primary); transform:scale(1.02); }
  100%{ background:linear-gradient(135deg, rgba(156,203,234,0.45), rgba(212,232,250,0.92)); color:var(--primary); transform:scale(1); }
}
.btn-appointment{background:var(--accent);color:#fff;padding:8px 12px;border-radius:20px;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.btn-appointment:hover,.btn-appointment:focus-visible{transform:translateY(-1px) scale(1.02);box-shadow:0 10px 22px rgba(156,203,234,0.4);filter:saturate(1.05)}

/* Hero */
.hero{padding:32px 0;text-align:center}
.hero h1{font-size:32px;margin-bottom:6px}
.subtitle{color:var(--muted)}

/* Cards container */
.cabinets .cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:16px}

/* Flip card */
.flip-card{background:transparent;width:320px;height:220px;perspective:1000px;position:relative;margin:18px}
.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform 0.6s;transform-style:preserve-3d;border-radius:12px;z-index:2}
.flip-card:hover .flip-card-inner{transform:rotateY(180deg)}
.flip-card:focus .flip-card-inner{transform:rotateY(180deg)}
.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.flip-card-front{background:var(--light);border:1px solid transparent}
.flip-card-back{background:var(--accent);color:#0A2A4C;transform:rotateY(180deg);border:1px solid transparent}

/* rebord jaune derrière la carte (effet cadre) */
.flip-card::before{content:"";position:absolute;inset:0;border-radius:14px;background:var(--accent);transform:translate(6px,6px);z-index:1}
:root {
  --primary: #0A2A4C;
  --light: #D4E8FA;
  --accent: #FFB758;
  --bg: #ffffff;
  --muted: #6b6b6b;
}

/* Reset simple */
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100% }
body { font-family: Arial, Helvetica, sans-serif; color: var(--primary); background: var(--bg); -webkit-font-smoothing: antialiased }

/* Layout containers */
.container { max-width: 1000px; margin: 0 auto; padding: 40px }
section { padding: 56px 0 }

/* Header */
.site-header { border-bottom: 1px solid #eee; background: #fff }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px }
.logo { font-weight:700 }
.main-nav ul { list-style:none; display:flex; gap:16px }
.main-nav a { color: var(--primary); text-decoration:none }

/* Buttons */
.btn-appointment { display:inline-block; background:var(--light); color:var(--primary); padding:10px 14px; border-radius:20px; text-decoration:none; border:1px solid rgba(10,42,76,0.06) }

img {
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  will-change: transform;
}
img:hover,
img:focus-visible,
img.image-bump {
  animation:image-bump .5s ease;
  box-shadow:0 12px 24px rgba(10,42,76,0.12);
}
@keyframes image-bump {
  0% { transform:scale(1) translateY(0); }
  22% { transform:scale(1.06) translateY(-2px); }
  42% { transform:scale(0.97) translateY(0); }
  68% { transform:scale(1.08) translateY(-3px); }
  100% { transform:scale(1) translateY(0); }
}

/* Hero */
.hero { padding: 32px 0; text-align:center }
.hero h1 { font-size: 32px; margin-bottom:6px }
.subtitle { color: var(--muted) }

/* Cards */
.cabinets .cards { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:20px }

.flip-card { width:320px; height:220px; perspective:1000px; position:relative; margin:18px }
.flip-card::before { content:""; position:absolute; inset:0; border-radius:14px; background:var(--accent); transform:translate(6px,6px); z-index:1 }

.flip-card-inner { position:relative; width:100%; height:100%; transition: transform .6s; transform-style: preserve-3d; border-radius:12px; z-index:2 }
.flip-card:hover .flip-card-inner, .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg) }

.flip-card-front, .flip-card-back { position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; border:1px solid transparent }
.flip-card-front { background:var(--light) }
.flip-card-back { background:var(--accent); color:var(--primary); transform:rotateY(180deg) }

.flip-card:hover .flip-card-front { border-color:var(--primary); box-shadow:0 4px 12px rgba(10,42,76,0.06) }

.card-media { height:80px; background:var(--light); border-bottom:1px solid rgba(0,0,0,0.06) }
.card-body { padding:18px; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px }
.card-body h3 { margin-bottom:6px }
.card-body p { margin:4px 0; color:var(--muted) }
.flip-card-back .card-body p { color: rgba(0,0,0,0.9) }

/* Button variant inside card */
.flip-card .btn-appointment { background:#fff; color:var(--primary); border:1px solid rgba(0,0,0,0.06); padding:10px 14px }

/* Responsive */
@media (max-width:700px) {
  .header-inner { flex-direction:column; gap:8px }
  .main-nav ul { flex-wrap:wrap; justify-content:center }
  .flip-card { width:100% }
}

/* Contact form basic styles */
.contact-form { max-width:600px; margin-top:16px; display:flex; flex-direction:column; gap:8px }
.contact-form label { display:block; font-size:14px }
.contact-form input, .contact-form textarea { width:100%; padding:8px; border:1px solid #e0e0e0; border-radius:6px }
.contact-form button { align-self:flex-start }

/* Ensure about photo images fit their containers across pages */
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block }

/* Footer */
.site-footer { background: var(--primary); color: #fff; padding: 28px 0 18px; margin-top: 32px }
.site-footer a { color: #fff; text-decoration:none }
.site-footer .btn-appointment{color:var(--primary)}
.footer-inner { display:flex; gap:20px; align-items:flex-start; justify-content:space-between }
.footer-left { flex:1; display:flex; flex-direction:column; gap:12px; max-width:640px }
.footer-top { display:flex; gap:12px; align-items:center }
.footer-logo { width:44px; height:44px; border-radius:8px; background:var(--light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700 }
.footer-contact a { display:block; font-weight:600; margin-bottom:6px }
.footer-phone,.footer-address{display:flex!important;align-items:center;gap:9px}
.footer-icon{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--light);font-family:Arial,sans-serif;font-size:1.15rem;line-height:1}
.footer-address { font-size:13px; color: rgba(255,255,255,0.9) }
.footer-actions { margin-top:8px }
.footer-map { width:420px; flex:0 0 420px; display:flex; justify-content:flex-end; align-items:flex-start }
.footer-map iframe { width:420px; height:220px; border:0; border-radius:8px }
.doctolib-btn { background: var(--accent); color: var(--primary); padding:10px 14px; border-radius:20px; font-weight:700; display:inline-block }
.footer-note { font-size:13px; color: rgba(255,255,255,0.9); margin-top:8px }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); margin-top:18px; padding-top:12px; text-align:center; font-size:13px; color: rgba(255,255,255,0.9) }

/* Map fallback when iframe is blocked */
.map-fallback{display:none;background:rgba(255,255,255,0.03);padding:10px;border-radius:8px;margin-left:12px;color:var(--light);max-width:420px}
.map-fallback p{margin:0 0 8px;font-size:13px;color:rgba(212,232,250,0.95)}
.map-open{display:inline-block;background:var(--accent);color:var(--primary);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700}
.map-fallback.show{display:block}

/* Reviews in footer */
.footer-reviews{margin-top:18px;background:rgba(255,255,255,0.04);padding:14px;border-radius:8px;max-width:100%;width:100%}
.footer-reviews h3{color:var(--light);margin:0 0 8px;font-size:1.05rem}
.reviews-list{display:flex;gap:12px;flex-wrap:wrap}
.review{flex:1 1 200px;background:rgba(255,255,255,0.03);padding:10px;border-radius:6px;font-size:13px;color:var(--light);margin:0}
.review cite{display:block;margin-top:8px;color:rgba(212,232,250,0.8);font-style:normal;font-weight:600}
.reviews-link{display:inline-block;margin-top:10px;color:var(--light);background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 12px;border-radius:16px;text-decoration:none}

@media (max-width:800px) {
  .footer-inner { flex-direction:column; align-items:center }
  .footer-map { width:100%; flex:0 0 auto }
  .footer-map iframe { width:100%; height:200px }
  .footer-left { width:100%; align-items:center; text-align:center }
  .footer-note { text-align:center }
}

/* Direction visuelle commune */
:root{
  --ink:#0A2A4C;
  --primary:#0A2A4C;
  --light:#D4E8FA;
  --accent:#9CCBEA;
  --bg:#F8F5EF;
  --surface:#FFFFFF;
  --soft:#EEF5FA;
  --text:#0A2A4C;
  --muted:#68798a;
}
body{
  font-family:"Arapey", Georgia, serif;
  color:var(--ink);
  background:var(--bg);
}
h1,h2,h3,h4,.main-nav a,.btn-appointment,.doctolib-btn,.tarif-title,.why-card-top,.logo,.brand-name,.brand-role{
  font-family:"Merriweather", Georgia, serif;
}
h1,h2,h3,h4{color:var(--ink)}
.container{width:100%;max-width:none;margin:0;padding:clamp(24px,4vw,64px) clamp(20px,6vw,96px)}
section{width:100%;padding:clamp(40px,6vw,82px) 0}
p{line-height:1.6}

/* Header visible pendant le défilement */
.site-header{position:sticky;top:0;z-index:20;background:var(--primary);border-bottom:1px solid rgba(212,232,250,.24);box-shadow:0 8px 24px rgba(10,42,76,.18)}
.header-inner{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:center;gap:clamp(18px,4vw,64px);padding-top:18px;padding-bottom:18px}
.brand{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--light)}
.brand-name{font-size:1.05rem;font-weight:800;letter-spacing:.02em}
.brand-role{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.main-nav ul{gap:6px;align-items:center}
.main-nav a{padding:9px 13px;border-radius:4px;font-size:.83rem;color:var(--light)}
.main-nav a:hover,.main-nav a:focus-visible,.main-nav a.is-active{color:var(--primary);background:var(--light);box-shadow:none}
.btn-appointment,.doctolib-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--light);color:var(--primary);padding:11px 17px;border-radius:4px;font-weight:700;white-space:nowrap}
.btn-appointment:hover,.btn-appointment:focus-visible,.doctolib-btn:hover,.doctolib-btn:focus-visible{background:var(--accent);color:var(--primary);transform:translateY(-2px)}
.cta-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:0;border-radius:4px;padding:12px 20px;font-family:"Merriweather",Georgia,serif;font-weight:700;text-decoration:none}
.cta-pill:hover,.cta-pill:focus-visible{background:var(--accent);color:var(--primary)}
.phone-pill{display:inline-flex;align-items:center;justify-content:center;background:#fff!important;color:var(--primary)!important;border:2px solid var(--primary)!important;border-radius:24px!important;padding:10px 18px!important;font-family:"Merriweather",Georgia,serif;font-weight:700;text-decoration:none}
.phone-pill:hover,.phone-pill:focus-visible{background:var(--light)!important;color:var(--primary)!important}
.hero .subtitle{color:var(--primary);font-family:"Merriweather",Georgia,serif;font-weight:700}

/* Blocs pleine largeur, avec des accents de couleur alternes */
.main{padding-top:0}
.main > section,.main > .reviews-encadre,.main > .bottom-image{width:100%;max-width:none}
.main > section:nth-of-type(even){background:var(--soft)}
.main > section{margin-bottom:28px}
.main > section:last-of-type{margin-bottom:0}
.hero h1,.cabinets h1,.techniques h1,.population h1,.tarifs h1,.apropos h1,.contact-intro h2{
  text-align:center;
  margin-bottom:12px;
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.2;
}
.card-body{font-size:1.08rem}
.card-body h3{font-size:1.15rem}
.muted{color:var(--muted)}
.flip-card-front{background:var(--surface);border-color:rgba(10,42,76,.08)}
.flip-card-back{background:var(--accent);color:var(--ink)}
.flip-card::before{background:var(--light)}

/* Avis Google */
.reviews-encadre{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,2.2fr);gap:34px;align-items:center;background:#f8f5ef;border:0;border-radius:0;padding:54px clamp(24px,6vw,96px);margin-top:34px}
.reviews-encadre h3{font-size:1.2rem;margin:0 0 14px;color:var(--primary)}
.reviews-summary{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.reviews-summary-photo{width:100px;height:100px;object-fit:cover;border-radius:16px}
.reviews-business{font-family:"Merriweather",Georgia,serif;font-weight:700;font-size:1.1rem;color:#111}
.reviews-rating{color:#f3ad00;font-family:Arial,sans-serif;font-size:1.1rem;letter-spacing:2px}
.reviews-rating span{color:#111;font-size:.95rem;letter-spacing:0}
.reviews-write{border:2px solid #d7a45b;color:#8a5d16;padding:11px 18px;border-radius:16px;text-decoration:none;font-family:"Merriweather",Georgia,serif;font-weight:700;background:#fff}
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.reviews-grid .review{background:#eeeae2;border:0;border-radius:18px;padding:28px 30px;min-height:300px;color:#4b3829;font-size:1.04rem;line-height:1.55;position:relative}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.review-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#5835b7;color:#fff;font-family:Arial,sans-serif;font-size:1.2rem;font-style:normal}
.review:nth-child(3) .review-avatar{background:#0867a7}
.review-name{font-family:Arial,sans-serif;font-weight:700;color:#111;font-style:normal}
.review-date{display:block;color:#a79d91;font-size:.85rem;font-style:normal}
.review-google{margin-left:auto;color:#4285f4;font-family:Arial,sans-serif;font-weight:700;font-style:normal}
.review-stars{display:block;color:#f3b400;font-family:Arial,sans-serif;letter-spacing:2px;font-style:normal;margin-bottom:14px}
.review-more{display:block;margin-top:14px;color:#8a5d16;text-decoration:none;font-style:normal}
.reviews-see-more{color:var(--primary)}

@media (max-width:900px){
  .reviews-encadre{grid-template-columns:1fr}
}
@media (max-width:700px){
  .reviews-grid{grid-template-columns:1fr}
}

@media (max-width:1100px){
  .header-inner{grid-template-columns:1fr auto;gap:12px}
  .main-nav{grid-column:1 / -1;grid-row:2;justify-self:stretch}
  .main-nav ul{justify-content:center;flex-wrap:wrap}
}
@media (max-width:600px){
  .header-inner{grid-template-columns:1fr}
  .header-inner .btn-appointment{width:100%}
  .main-nav{grid-column:auto;grid-row:auto}
  .main-nav ul{justify-content:center}
  .main-nav a{display:block;min-height:40px;padding:10px}
  .footer-inner{gap:24px}
  .footer-map iframe{height:180px}
}

img,iframe{max-width:100%}
.tarif-list li{gap:12px}
.tarif-list .label{min-width:0;overflow-wrap:anywhere}
.tarif-list .price{flex:0 0 auto;white-space:nowrap}
