/* =============================================
   RX MOVING — Style global
   « L'harmonie par le mouvement »
   Palette : marrons chauds, crème, sauge
   Typographie : Playfair Display + DM Sans
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ---------- Variables ---------- */
:root {
  --brun-1:     #2B1A0F;   /* très profond */
  --brun-2:     #5C3317;   /* profond */
  --brun-3:     #8B5130;   /* moyen */
  --brun-4:     #B8835A;   /* doux */
  --brun-5:     #D4AA85;   /* clair */
  --brun-6:     #EDD9C0;   /* très clair */
  --creme:      #FAF4EC;
  --blanc:      #FEFCF9;
  --sauge:      #7D8C74;
  --sauge-pale: #C6D0BF;
  --texte:      #1C1007;
  --texte-2:    #5C3F29;
  --texte-3:    #8B6A50;

  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   28px;
  --r-xl:   48px;
  --r-full: 999px;

  --shadow:      0 4px 28px rgba(43,26,15,.09);
  --shadow-lg:   0 12px 48px rgba(43,26,15,.16);
  --transition:  .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--blanc);
  color:var(--texte);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;width:100%;image-rendering:high-quality}
a{color:var(--brun-3);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--brun-2)}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{font-family:'Playfair Display',serif;line-height:1.2;color:var(--brun-1)}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:500}
h2{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:500}
h3{font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:400}
h4{font-size:1.1rem;font-weight:600;font-family:'DM Sans',sans-serif}
p{font-size:1rem;color:var(--texte-2);line-height:1.8;margin-bottom:1rem}
p:last-child{margin-bottom:0}

/* ---------- Navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(254,252,249,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--brun-6);
  padding:0 6%;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
  transition:box-shadow var(--transition);
}
nav.scrolled{box-shadow:0 2px 24px rgba(43,26,15,.10)}

/* Logo RX Moving */
.nav-logo{
  display:flex;align-items:center;gap:.8rem;
  text-decoration:none;
}
.nav-logo-icon{
  width:42px;height:42px;
  border-radius:10px;
  background:var(--brun-2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* Pas de fond */
.nav-logo-icon {
  width: 48px;         /* Augmenté légèrement pour compenser la suppression du cadre blanc */
  height: 48px;
  background: transparent; /* Supprime le fond blanc */
  border: none;            /* Supprime la bordure */
  box-shadow: none;        /* Supprime l'ombre */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-logo-text{
  display:flex;flex-direction:column;line-height:1.1;
}
.nav-logo-main{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;font-weight:700;
  color:var(--brun-1);letter-spacing:.02em;
}
.nav-logo-sub{
  font-size:.65rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brun-4);
}

.nav-links{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-links a{
  font-size:.83rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--texte-3);
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
  transition:all var(--transition);
}
.nav-links a:hover,.nav-links a.active{color:var(--brun-2);border-bottom-color:var(--brun-4)}

.nav-cta{
  background:var(--brun-2) !important;
  color:var(--creme) !important;
  padding:.55rem 1.4rem !important;
  border-radius:var(--r-full) !important;
  border-bottom:none !important;
}
.nav-cta:hover{background:var(--brun-1) !important;color:var(--creme) !important}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.burger span{display:block;width:26px;height:2px;background:var(--brun-1);border-radius:2px;transition:var(--transition)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 2.2rem;
  border-radius:var(--r-full);
  font-family:'DM Sans',sans-serif;
  font-size:.88rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  cursor:pointer;border:none;
  transition:all var(--transition);
  text-decoration:none;
}
.btn-primary{background:var(--brun-2);color:var(--creme)}
.btn-primary:hover{background:var(--brun-1);color:var(--creme);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--brun-2);border:1.5px solid var(--brun-5)}
.btn-outline:hover{background:var(--brun-6);color:var(--brun-1);transform:translateY(-2px)}
.btn-light{background:var(--blanc);color:var(--brun-1)}
.btn-light:hover{background:var(--creme);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:rgba(255,255,255,.12);color:var(--creme);border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.22);color:var(--blanc)}

/* ---------- Sections ---------- */
.section{padding:6rem 6%}
.section-sm{padding:3.5rem 6%}
.container{max-width:1160px;margin:0 auto}

.section-tag{
  display:inline-block;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brun-3);background:var(--brun-6);
  padding:.38rem 1rem;border-radius:var(--r-full);
  margin-bottom:1.2rem;
}
.deco-line{width:48px;height:2.5px;background:var(--brun-4);border-radius:2px;margin-bottom:1.4rem}
.section-title{margin-bottom:1rem}
.section-lead{font-size:1.05rem;max-width:620px;margin-bottom:2.8rem;line-height:1.85}

.text-center{text-align:center}
.text-center .section-lead{margin-left:auto;margin-right:auto}
.text-center .deco-line{margin-left:auto;margin-right:auto}

/* ---------- Backgrounds ---------- */
.bg-brun{background:var(--brun-1)}
.bg-brun h1,.bg-brun h2,.bg-brun h3{color:var(--creme)}
.bg-brun p{color:var(--brun-5)}
.bg-brun .section-tag{background:rgba(255,255,255,.1);color:var(--brun-6)}
.bg-brun .deco-line{background:var(--brun-5)}

.bg-creme{background:var(--creme)}
.bg-creme-2{background:var(--brun-6)}
.bg-sauge{background:var(--sauge)}
.bg-sauge h2,.bg-sauge h3{color:var(--blanc)}
.bg-sauge p{color:rgba(254,252,249,.8)}
.bg-sauge .section-tag{background:rgba(255,255,255,.15);color:var(--blanc)}
.bg-sauge .deco-line{background:rgba(255,255,255,.5)}

/* ---------- Avis clients (partagé toutes pages) ---------- */
.avis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: stretch; /* Oblige toutes les cartes d'une même ligne à s'étirer ensemble vers le bas */
}

.avis-card {
  height: auto; /* Laisse le cadre s'adapter librement au texte */
  background: var(--blanc);
  border: 1px solid var(--brun-6);
  border-radius: var(--r-md);
  padding: 2rem;
  position: relative;
  transition: box-shadow var(--transition);

  /* MODIFICATION : Activation du Flexbox pour gérer l'alignement interne */
  display: flex;
  flex-direction: column;
}

.avis-card:hover {
  box-shadow: var(--shadow);
}

.avis-card::before {
  content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--brun-6);
  position: absolute;
  top: .4rem;
  left: 1.2rem;
}
.lien-google-avis {
  margin-top: auto; /* Pousse le lien vers le bas de la carte */
  padding-top: 1rem;
}
.avis-etoiles{color:var(--brun-4);font-size:1rem;margin-bottom:.8rem}
.avis-texte{font-size:.93rem;font-style:italic;color:var(--texte-2);margin-bottom:1.2rem;line-height:1.7}
.avis-auteur{display:flex;align-items:center;gap:.8rem}
.avis-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--brun-5);
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;
  color:var(--brun-1);flex-shrink:0;
}
.avis-nom{font-weight:600;font-size:.88rem;color:var(--texte)}
.avis-detail{font-size:.76rem;color:var(--brun-4)}

/* ---------- Pill ---------- */
.pill{
  display:inline-block;padding:.35rem 1rem;
  border-radius:var(--r-full);font-size:.78rem;font-weight:500;
  background:var(--brun-6);color:var(--brun-2);
}

/* ---------- CTA band ---------- */
.cta-band{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
}

/* ---------- Page hero (sous-pages) ---------- */
.page-hero{
  padding:9rem 6% 5rem;
  background:var(--brun-1);
  text-align:center;
}
.page-hero h1{color:var(--creme);font-size:clamp(2rem,4.5vw,3.4rem)}
.page-hero .sub{color:var(--brun-5);font-size:1.05rem;max-width:560px;margin:.9rem auto 0}
.breadcrumb{
  display:flex;justify-content:center;gap:.5rem;
  font-size:.8rem;color:var(--brun-4);margin-bottom:1.5rem;
}
.breadcrumb a{color:var(--brun-5)}
.breadcrumb a:hover{color:var(--creme)}

/* ---------- Footer ---------- */
footer{background:var(--brun-1);color:var(--brun-5);padding:4.5rem 6% 2rem}
.footer-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr;
  gap:3rem;max-width:1160px;margin:0 auto 3rem;
}
.footer-logo{
  display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;
}
.footer-logo-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--brun-2);
  display:flex;align-items:center;justify-content:center;
}
.footer-logo-icon svg{width:24px;stroke:var(--brun-5);fill:none;stroke-width:2}
.footer-logo-name{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;font-weight:700;color:var(--creme);
}
.footer-desc{font-size:.88rem;line-height:1.8;color:var(--brun-5)}
.footer-slogan{
  font-family:'Playfair Display',serif;
  font-style:italic;font-size:.95rem;
  color:var(--brun-4);margin-top:.8rem;
}
.footer-col h4{
  font-family:'DM Sans',sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme);margin-bottom:1.2rem;
}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.55rem}
.footer-col ul li a{color:var(--brun-5);font-size:.88rem;transition:color var(--transition)}
.footer-col ul li a:hover{color:var(--creme)}
.footer-bottom{
  max-width:1160px;margin:0 auto;
  padding-top:2rem;border-top:1px solid rgba(212,170,133,.15);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--brun-4);
}

/* Footer Whatsapp */
.footer-whatsapp-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
	flex-shrink: 0;
}
    
.footer-whatsapp-link svg .phone-path {
	fill: currentColor;
}
.footer-whatsapp-link {
	display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate{opacity:0}
.animate.visible{animation:fadeUp .65s ease forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
.d4{animation-delay:.4s}.d5{animation-delay:.5s}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:fixed;top:72px;left:0;right:0;
    background:var(--blanc);padding:2rem 6%;
    border-bottom:1px solid var(--brun-6);
    gap:1.5rem;box-shadow:0 8px 32px rgba(43,26,15,.12);
  }
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}
@media(max-width:600px){
  .section{padding:4rem 5%}
  .page-hero{padding:8rem 5% 4rem}
  .cta-band{flex-direction:column;text-align:center}
}
/* ── LIEN INSTAGRAM FOOTER ── */
.footer-insta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Espace entre le logo et le texte */
    text-decoration: none;
}
.insta-icon {
    width: 16px;  /* Taille de l'icône adaptée à votre texte */
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
/* Petit effet optionnel au survol du lien */
.footer-insta-link:hover .insta-icon {
	transform: scale(1.1);
}
/* ── LIEN TÉLÉPHONE FOOTER ── */
.footer-phone-link {
	display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Même espace entre l'icône et le numéro */
    text-decoration: none;
}
.phone-icon {
	width: 16px;  /* Même taille que l'icône Instagram */
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
/* Effet au survol du numéro */
.footer-phone-link:hover .phone-icon {
	transform: scale(1.1);
}
/* ── LIEN E-MAIL FOOTER ── */
.footer-email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* Même espace entre l'icône et l'e-mail */
  text-decoration: none;
}
.email-icon {
  width: 16px;  /* Même dimension (16x16 pixels) que les autres */
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* Effet au survol de l'e-mail */
.footer-email-link:hover .email-icon {
  transform: scale(1.1);
}
/* ── LANG SWITCHER colonne ── */
.lang-switcher {
  display: inline-flex;
  flex-direction: row;
  gap: 0.15rem;
  background: var(--brun-6); /* Fond gris/brun clair */
  padding: 3px;
  border-radius: var(--r-full);
  margin: 0; /* Supprime tout espace avec le logo */
}
.lang-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .35rem .6rem;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--texte-3);
  cursor: pointer;
  transition: all .2s;
  line-height: 1;
  text-decoration: none;
  display: block;
  text-align: center;
}
.lang-btn:hover {
  color: var(--brun-2);
}
.lang-btn.active {
  background: var(--brun-2);
  color: var(--creme);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* ── BOUTON RETOUR EN HAUT ── */
    .back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 44px;
      height: 44px;
      background: var(--brun-2); /* Reprend le marron de votre charte graphique */
      color: var(--creme);       /* Icône couleur crème */
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      z-index: 999;              /* Reste toujours au-dessus du contenu */
      
      /* Gestion de l'apparition progressive */
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px);
      transition: all 0.3s ease;
    }
    .back-to-top svg {
      width: 20px;
      height: 20px;
    }
/* État quand le bouton devient visible via le JavaScript */
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Effet au survol */
.back-to-top:hover {
  background: var(--brun-1); /* Devient un peu plus foncé */
  transform: translateY(-3px);
}

/* Style pour le logo Google intégré au pied de page */
.footer-google-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-google-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: fill var(--transition);
}




/* L'image elle-même */
.logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Conserve les proportions circulaires sans distorsion */
  display: block;
}