/* ===============================
   Variables & base
================================= */
:root{
  --brown:#6b4b3e; 
  --brown-dark:#3b2a22; 
  --ink:#2d1e15;

  --cream:#fffaf7;
  --paper:#FFF9F3;
  --gold:#CBB27A; 
  --gold-600:#AE945E;

  --choco:#4b332a;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);

  background: radial-gradient(1200px 800px at 10% 10%, #f0e6d2 0%, #e6d2b0 35%, #e0c896 55%, #d3b076 75%, #b89257 100%) fixed;
  background-attachment: fixed;
  background-size: cover;

  padding:70px 20px 0;
}

body::before{
  content:"";
  position:fixed; inset:0 0 auto 0; height:45vh; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0));
  z-index:0;
}
body > *{ position:relative; z-index:1; }

/* ---- Titres de section centrés ---- */
.section-title, h1, h2, p {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* ---- Titres de section centrés ---- */
.section-title, h1, h2 {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  color: var(--brown-dark);
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ===============================
   Outils flottants (langue)
================================= */
.announce-bar{ position:fixed; top:6px; left:50%; transform:translateX(-50%);
  z-index:1100; max-width:92%; padding:4px 8px; font-size:13px; line-height:1.35;
  color:#2d1e15; background:rgba(255,255,255,.85); backdrop-filter:blur(4px);
  border:1px solid var(--gold); border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.floating-tools{ position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:1200; }
.fab{ width:40px; height:40px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(0,0,0,.15); font-size:19px; line-height:40px; }
.lang-wrap{ position:relative }
.lang-menu{ position:absolute; top:46px; right:0; min-width:170px; display:none;
  background:#fff; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.18); overflow:hidden; }
.lang-menu.show{ display:block }
.lang{ width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; cursor:pointer; }
.lang:hover{ background:#f7f3ee }

/* ===============================
   Logo
================================= */
.logo-container{ text-align:center; margin:4px 0 10px; }
.logo-badge{ display:inline-block; padding:6px 10px; border-radius:10px; background:transparent; }
.logo-simple{ max-width:340px; width:80%; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* ===============================
   Menu
================================= */
.menu-toggle{
  position:sticky; top:4px; z-index:4;
  width:100%; background:#5a3a2f; color:#fff; border:0; cursor:pointer;
  padding:12px 14px; border-radius:12px;
  max-width:980px; margin:0 auto 8px; display:block;
}
.menu{
  display:none; max-width:980px; margin:8px auto 0;
  background:linear-gradient(90deg,#f0e8da,var(--choco));
  padding:10px 0; border-radius:14px;
}
.menu.show{ display:block }
.menu ul{ margin:0; padding:0; list-style:none; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.menu a{ color:#fff; text-decoration:none; padding:8px 12px; border-radius:12px; }
.menu a:hover{ background:rgba(255,223,174,.3); color:#2b1f18 }
@media(min-width:992px){ .menu-toggle{ display:none } .menu{ display:block } }

/* ===============================
   Conteneurs & cartes
================================= */
.container{
  background:rgba(255,255,255,.92);
  max-width:800px; margin:18px auto; padding:36px 26px; border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.08); text-align:center;
}
.bullets{ list-style:none; margin:14px 0 0; padding:0 }
.bullets li{ margin:8px 0 }

/* CTA */
.cta-row{ margin-top:18px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px;
  border-radius:12px; border:0; cursor:pointer; text-decoration:none; font-weight:700;
}
.btn-ico{ height:20px }
.btn-wa{ background:#25D366; color:#fff; filter:saturate(1.05) }
.btn-pp{ background:#ffc439; color:#000; filter:contrast(1.05) }
.btn-primary{
  background: linear-gradient(180deg, #d9be85, #b9935a);
  color:#2b1f18; font-weight:800; border:0;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .2s;
}
.btn-primary:hover{ transform: translateY(-2px); filter: brightness(1.05); }

/* ===============================
   Annonce
================================= */
.announce-bar{
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 1100; max-width: 90%;
  padding: 6px 10px; font-size: 14px; line-height: 1.35;
  color: #2d1e15; background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gold); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
body.lite .announce-bar{ display:none }

/* ===============================
   Brief / Devis
================================= */
.brief-hero.compact{ max-width:920px; margin:24px auto; background:rgba(255,255,255,.92); border-radius:18px; padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.08);}
.brief-hero h2{ margin:0 0 .5rem; font-size:1.35rem; }
.brief-points{ margin:.25rem 0 1rem; padding-left:1.1rem; }
.brief-points li{ margin:.25rem 0; }
.btn-large{ font-size:1.05rem; padding:.85rem 1.2rem; border-radius:12px; }

.page-card{ max-width:920px; margin:24px auto; background:rgba(255,255,255,.92); border-radius:18px; padding:28px 20px; box-shadow:0 10px 30px rgba(0,0,0,.08) }
.devis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.devis-grid label{ display:flex; flex-direction:column; gap:6px }
.devis-grid .full{ grid-column:1/-1 }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
input,select,textarea{ border:1px solid #e7ded6; border-radius:10px; padding:10px 12px; background:#fff }
.tiny{ opacity:.8; font-size:.9rem; margin:8px 0 0 }

/* Devis fermé par défaut */
#devis{ display:none }
#devis.show{ display:block }

/* ===============================
   Pricing
================================= */
.pricing-section{ background:linear-gradient(90deg,#f5ede2,#e6d6c3); margin:28px auto 0; padding:36px 16px; text-align:center }
.pricing-cards{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:16px }
.card{ background:var(--paper); border-radius:16px; padding:24px; max-width:290px; text-align:left; box-shadow:0 6px 16px rgba(0,0,0,.1); outline:1px solid #0001 }
.card h3{ margin:0 0 8px; color:#5d3f2d }
.card ul{ margin:10px 0 16px; padding-left:18px }
.card .tarif-note{ font-style:italic; color:#333 }

/* ===============================
   Témoignages
================================= */
@media (min-width: 992px) {
  .testimonials {
    max-width: 700px;
    padding: 12px 20px;
  }
  .t-grid blockquote {
    font-size: 0.98rem;
  }
}
.testimonials-card {
  background: rgba(255,255,255,.92); /* fond blanc légèrement transparent */
  max-width: 800px;
  margin: 18px auto;
  padding: 36px 26px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  text-align: center;
    display: flex;
  align-items: center;
  justify-content: center;
    gap: 8px; /* espace entre l’icône et le texte */
  font-size: 1.8rem; /* optionnel : agrandir un peu */
  margin-bottom: 1rem; /* espace sous le titre */
}
/* Centrer aussi l'icône si elle est avant le texte */
.temoignages h2::before,
.temoignages h2::after {
  margin: 0 auto;
}

/* ===============================
   Footer
================================= */
.footer{
  background: linear-gradient(to bottom,#4b332a 0 92%, rgba(75,51,42,0) 100%);
  color:#eee; text-align:center; padding: 22px 16px; margin: 34px auto;
  border-radius: 16px; max-width: 960px;
}
.footer-columns{ max-width:1000px; margin:0 auto; display:flex; gap:10px; flex-direction:column; align-items:center; }
.footer-info{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center }
.footer-logo{ max-width:200px; width:80%; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.2); opacity:.95 }
.footer-block ul{ list-style:none; margin:.25rem 0 0; padding:0 }
.footer a{ color:#fff0e6; text-decoration:none }
.footer a:hover{ text-decoration:underline }
.copyright{ text-align:center; font-size:14px; opacity:.8; margin-top:14px }

/* ===============================
   Hero gold
================================= */
.hero-gold{
  max-width: 1000px; margin: 18px auto; padding: 28px 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(203,178,122,.35);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
}
.hero-wrap{
  display: grid; align-items: center; gap: 22px;
  grid-template-columns: 1.05fr .95fr;
}
.hero-copy{ padding: 8px 10px; }
.gold-title{ font-size: clamp(32px, 4.2vw, 52px); color:#6b4b3e; margin:0 0 .35rem; }
.gold-sub{ font-size: clamp(18px, 2.2vw, 26px); color:#5e4b3c; margin:0 0 .75rem; }
.gold-lead{ font-size: clamp(15px, 1.6vw, 18px); opacity:.95; margin:0 0 1rem; }

.hero-logo{
  width:100px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  opacity: .95;
}

/* Logo marron du hero */
.hero-gold img {
  width: 80px;
  height: auto;
  opacity: 0.9;
  margin: 10px auto;
  display: block;
  filter: brightness(1.1) sepia(0.3) hue-rotate(15deg);
}

/* CTA boutons */
.cta-buttons button,
.cta-buttons a {
  max-width: 220px;
  width: 90%;
  margin: 8px auto;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 10px;
}
/* desktop.css */
.hero-logo{
  width: 90px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  opacity: .95;
}
.models-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.model-card{max-width:290px;text-decoration:none;color:inherit}
.model-card img{width:90%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:10px;box-shadow:0 8px 18px #0001}
.model-card .btn{display:inline-block;margin-top:8px}
.cv-gallery {
  display: flex;
  justify-content: center;   /* centre les cartes */
  gap: 2rem;                 /* espace entre elles */
  margin: 2rem auto;         /* espace autour */
  max-width: 900px;          /* largeur max de la galerie */
}

.cv-gallery .card {
  flex: 1 1 20px;           /* largeur mini 300px */
  max-width: 300px;          /* largeur max d’une carte */
  text-align: center;
}
/* Boutons CTA - version desktop */
@media (min-width: 601px) {
  .cta-row .btn {
    padding: 8px 14px;      /* réduit l’espace interne */
    font-size: 0.9rem;      /* texte un peu plus petit */
    min-width: 120px;       /* largeur mini (évite trop petit) */
    max-width: 160px;       /* largeur max */
  }

  .cta-row .btn img, 
  .cta-row .btn svg {
    height: 18px;           /* réduit la taille des logos (WhatsApp, PayPal...) */
    width: auto;
  }
}
#langBtn, #langMenu {
  position: relative;
  z-index: 9999;
}
/* ----- Bloc devis caché par défaut ----- */
#devis {
  display: none;          /* invisible */
  opacity: 0;             /* transparent */
  transform: translateY(20px); /* décalé vers le bas */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ----- Quand on ajoute .show ----- */
#devis.show {
  display: block;         /* visible */
  opacity: 1;             /* opaque */
  transform: translateY(0); /* remonte en place */
}
/* Amélioration du rendu du texte */
.models-grid .card {
  -webkit-font-smoothing: antialiased;   /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;    /* Firefox */
  text-rendering: optimizeLegibility;    /* Meilleure lisibilité */
}

/* Si tu veux aussi sur les titres */
.models-grid .card h3,
.models-grid .card p,
.models-grid .card span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.testimonials-cards {
  background: #f9f7f5;
  padding: 4rem 2rem;
  text-align: center;
}

.testimonials-cards h2 {
  font-family: 'Playfair Display', serif;
  margin-bottom: 2rem;
  color: #6b4b2d;
}

.t-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.t-grid blockquote {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  font-style: italic;
  color: #444;
  transition: transform .2s ease, box-shadow .2s ease;
}

.t-grid blockquote:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.t-grid cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: #9c7b4b;
  font-weight: 600;
}
/* === Galerie & Modèles Unifiés === */
.gallery-section {
  text-align: center;
  padding: 4rem 1rem;
  background: #faf9f7;
}

.gallery-section h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.gallery-section p {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 20px;
  box-shadow: none;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 330px;
}

.gallery-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: none;
}

.card-info {
  padding: 1.2rem 1rem;
}

.card-info p {
  color: #333;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.gallery-card .btn {
  background: #b89863;
  border: none;
  padding: 0.5rem 1rem;
  color: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.gallery-card .btn:hover {
  background: none;
}

/* ===============================
   Témoignages unifiés (bloc unique)
================================= */
.testimonials {
  max-width: 900px;
  margin: 40px auto;
  background: var(--cream, #fffaf7);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 40px 32px;
  text-align: left;
  color: var(--ink, #2d1e15);
  line-height: 1.6;
}

.testimonials h2 {
  font-family: "Playfair Display", serif;
  color: var(--brown, #5e4b3c);
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonials h2::before {
  content: "💬";
  font-size: 1.4rem;
}

.testimonials blockquote {
  margin: 0 0 1.2rem;
  font-style: italic;
  font-size: 1.05rem;
  background: transparent;
  border: none;
}

.testimonials cite {
  display: block;
  margin-top: 6px;
  color: var(--brown-dark, #6b4b3e);
  font-weight: 600;
  font-style: normal;
}

/* Mobile */
@media (max-width: 600px) {
  .testimonials {
    padding: 26px 20px;
    border-radius: 16px;
  }
  .testimonials h2 {
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
  }
  .testimonials blockquote {
    text-align: center;
  }
}
/* === Correction images démos (évite débordement total) === */
.demo-preview img,
.preview-img,
.model-card img,
.gallery-card img {
  display: block;
  width: 100%;
  max-width: 750px;      /* ✅ limite sur desktop */
  height: auto;
  margin: 0 auto;        /* centre */
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* === Ajustement mobile === */
@media (max-width: 600px) {
  .demo-preview img,
  .preview-img,
  .model-card img,
  .gallery-card img {
    max-width: 90vw;     /* ✅ prend max 90% de la largeur écran */
    border-radius: 10px;
  }
}
.demo-preview,
.section,
.container {
  max-width: 900px;      /* ✅ largeur max */
  margin: 0 auto;
  padding: 0 1rem;       /* ✅ espace sur les bords */
  overflow: hidden;      /* empêche débordement visuel */
}
/* ---- Modèles (CV / Portfolio / Vitrine) ---- */
.models-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 0 1rem;
}

.model-card {
  background: linear-gradient(180deg, #fffaf7 0%, #fdf6ec 100%);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 2rem 1rem;
  text-align: center;
  width: 280px; /* un peu plus large sur desktop */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.model-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.model-card h3 {
  font-size: 1.2rem;
  color: var(--brown);
  margin: 0.5rem 0 0.2rem;
}

.model-card p {
  font-size: 1rem;
  color: #444;
}

.model-card img {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  margin-bottom: 0.8rem;
  object-fit: cover;
}

/* Rendre toute la carte cliquable */
.model-card a {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* ---- Images démos ---- */
.demo-preview img,
.preview-img,
.gallery-card img {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin: 0 auto;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ---- Espacement général entre les sections ---- */
section {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ---- Ajustement spécifique pour Nos services ---- */
.services-section {
  background: var(--paper);
  padding: 80px 0; /* un peu plus d’air */
  border-radius: 20px;
  width: 90%;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
:root {
  --gold-brown: #b28b5e; /* doux doré brun, lisible sur fond clair */
}

/* ---- Titres de section centrés ---- */
.section-title, h1, h2 {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  color: var(--brown-dark);
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
/* ---- Espacement harmonisé sur desktop ---- */

/* Espace entre les sections */
.section {
  margin-bottom: 3rem !important;
}

/* Section CV spécifique */
.cv-section {
  margin-bottom: 4rem !important; /* espace avant les formules */
}

/* Empêche le grand vide en bas */
body, main {
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
main {
  background: linear-gradient(to bottom, transparent 90%, var(--paper) 100%);
}
.services-section {
  padding: 2.5rem 2rem !important; /* augmente l’espace interne */
}

.service-buttons {
  gap: 1rem; /* espace entre les deux boutons */
}

.service-buttons button {
  margin: 0 auto; /* les garde bien centrés */
}
.cv-section {
  margin-bottom: 4rem;
}
body {
  min-height: auto;
  padding-bottom: 2rem;
}
.port-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
/* ===== Correction espacement Portfolio ===== */
.portfolio-section {
  max-width: 1200px;          /* largeur plus généreuse */
  margin: 0 auto 4rem auto;   /* centre + espace en dessous */
  padding: 0 2rem;            /* respire sur les côtés */
}

/* Espace entre la galerie et la section suivante */
.port-gallery {
  margin-bottom: 3rem;
}

/* Ajuste la grille */
.port-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  justify-items: center;
}

/* Harmonise la taille des cartes */
.port-gallery .model-card {
  max-width: 100%;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transition: transform .25s ease;
}

.port-gallery .model-card:hover {
  transform: translateY(-6px);
}