/* =========================================================
   Nettoyage Moquette Casablanca — style.css
   Mobile-first, sans framework, variables CSS, accessible.
   ========================================================= */

:root{
  --bleu-nuit: #0b2545;
  --bleu-fonce: #123a6b;
  --bleu: #1f5fa8;
  --bleu-clair: #eaf1fa;
  --gris-clair: #f4f6f9;
  --gris: #6b7686;
  --gris-fonce: #2a2f38;
  --blanc: #ffffff;
  --accent: #17a673;
  --accent-fonce: #128a5f;
  --danger: #c0392b;
  --ombre: 0 8px 24px rgba(11,37,69,.10);
  --ombre-lg: 0 16px 40px rgba(11,37,69,.16);
  --rayon: 12px;
  --rayon-sm: 8px;
  --marge-max: 1180px;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--police);
  color: var(--gris-fonce);
  background: var(--blanc);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--bleu); text-decoration: none; }
a:hover{ text-decoration: underline; }
ul, ol{ padding-left: 1.2em; }
h1,h2,h3,h4{ color: var(--bleu-nuit); line-height:1.25; margin: 0 0 .6em; font-weight:700; }
h1{ font-size: clamp(1.9rem, 5vw, 2.6rem); }
h2{ font-size: clamp(1.5rem, 3.6vw, 2rem); }
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1em; }
.container{ max-width: var(--marge-max); margin: 0 auto; padding: 0 1.1rem; }
section{ padding: 3rem 0; }
.section-alt{ background: var(--gris-clair); }
.section-fonce{ background: var(--bleu-nuit); color: #dce6f2; }
.section-fonce h2, .section-fonce h3{ color: #fff; }
.center{ text-align:center; }
.intro{ max-width: 760px; margin: 0 auto 2.2rem; color: var(--gris); text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--bleu-nuit); color:#fff;
  padding:.7rem 1rem; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem 1.5rem; border-radius: var(--rayon-sm); font-weight:700;
  font-size: 1rem; border: 2px solid transparent; cursor:pointer;
  text-decoration:none; transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  min-height: 48px; line-height:1.1;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn-primaire{ background: var(--accent); color:#fff; }
.btn-primaire:hover{ background: var(--accent-fonce); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1ebe5b; }
.btn-secondaire{ background:transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.btn-secondaire:hover{ background: rgba(255,255,255,.12); }
.btn-outline{ background:transparent; color: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.btn-outline:hover{ background: var(--bleu-fonce); color:#fff; }
.btn-tel{ background: var(--bleu-fonce); color:#fff; }
.btn-tel:hover{ background: var(--bleu-nuit); }
.btn-bloc{ width:100%; }
.cta-group{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------- Header ---------- */
.entete{
  position: sticky; top:0; z-index: 500; background: #fff;
  box-shadow: 0 2px 10px rgba(11,37,69,.08);
}
.entete .barre{
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem 1.1rem; max-width: var(--marge-max); margin:0 auto;
}
.logo-lien{ display:flex; align-items:center; gap:.6rem; }
.logo-lien img{ height: 46px; width:auto; }
.logo-lien .logo-texte{ display:flex; flex-direction:column; line-height:1.1; }
.logo-lien .logo-texte strong{ color: var(--bleu-nuit); font-size:1rem; }
.logo-lien .logo-texte span{ color: var(--gris); font-size:.72rem; }

.nav-actions{ display:flex; align-items:center; gap:.6rem; }
.tel-entete{
  display:none; align-items:center; gap:.4rem; font-weight:700; color: var(--bleu-fonce);
}
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:none; background:transparent; cursor:pointer; padding:0;
}
.burger span{ display:block; width:26px; height:3px; background: var(--bleu-nuit); border-radius:2px; }

.menu-principal{
  position: fixed; inset:0 0 0 auto; width: min(320px, 86vw); background:#fff;
  transform: translateX(100%); transition: transform .25s ease; z-index: 600;
  box-shadow: -8px 0 30px rgba(0,0,0,.18); overflow-y:auto;
  padding: 1.2rem 1.2rem 2rem;
}
.menu-principal.ouvert{ transform: translateX(0); }
.menu-fond{
  position: fixed; inset:0; background: rgba(11,37,69,.45); z-index: 590;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.menu-fond.visible{ opacity:1; pointer-events:auto; }
.menu-fermer{
  background:none; border:none; font-size:1.8rem; line-height:1; cursor:pointer; color: var(--bleu-nuit);
  position:absolute; top:.8rem; right:1rem;
}
.menu-principal ul{ list-style:none; padding:0; margin: 2.4rem 0 0; }
.menu-principal li{ border-bottom:1px solid #eef1f5; }
.menu-principal a{ display:block; padding: .8rem .2rem; color: var(--gris-fonce); font-weight:600; }
.menu-principal .sous-menu{ padding-left: .8rem; }
.menu-principal .sous-menu a{ font-weight:500; color:var(--gris); font-size:.95rem; }
.menu-principal .menu-cta{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem; }

@media (min-width: 900px){
  .burger{ display:none; }
  .tel-entete{ display:inline-flex; }
  .menu-principal{
    position:static; transform:none; width:auto; box-shadow:none; padding:0; overflow:visible;
  }
  .menu-fond{ display:none; }
  .menu-fermer{ display:none; }
  .menu-principal ul{ display:flex; align-items:center; gap:1.4rem; margin:0; list-style:none; }
  .menu-principal li{ border:none; position:relative; }
  .menu-principal a{ padding:.4rem 0; font-size:.95rem; }
  .menu-principal .menu-cta{ display:none; }
  .entete .barre{ gap:1.2rem; }
  .nav-principale{ flex:1; display:flex; justify-content:center; }
  .menu-principal .sous-menu{
    position:absolute; top:100%; left:0; background:#fff; box-shadow: var(--ombre-lg);
    border-radius: var(--rayon-sm); padding:.6rem; display:none; flex-direction:column; align-items:stretch;
    gap:0; min-width:260px; z-index:50;
  }
  .a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu{ display:flex; }
  .sous-menu a{ padding:.5rem .6rem; border-radius:6px; }
  .sous-menu a:hover{ background: var(--bleu-clair); text-decoration:none; }
}

/* ---------- Fil d'Ariane ---------- */
.fil-ariane{ background: var(--gris-clair); padding: .7rem 0; font-size:.85rem; }
.fil-ariane ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:0; color:var(--gris); }
.fil-ariane a{ color: var(--bleu-fonce); }
.fil-ariane li:not(:last-child)::after{ content:"›"; margin-left:.35rem; color:#aab2c0; }

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(135deg, var(--bleu-nuit), var(--bleu-fonce) 70%);
  color:#fff; padding: 3rem 0 3.2rem;
}
.hero .container{ display:grid; gap:2rem; }
.hero h1{ color:#fff; margin-bottom:.7rem; }
.hero p.chapo{ font-size:1.08rem; color:#cfdcee; max-width:640px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 1.1rem 0 1.4rem; }
.badge{
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  padding:.35rem .8rem; border-radius: 999px; font-size:.82rem; color:#e7edf7;
}
.hero-image{ border-radius: var(--rayon); overflow:hidden; box-shadow: var(--ombre-lg); }
@media (min-width: 900px){
  .hero .container{ grid-template-columns: 1.1fr .9fr; align-items:center; }
}

.page-hero{
  background: linear-gradient(135deg, var(--bleu-nuit), var(--bleu-fonce) 70%);
  color:#fff; padding: 2.4rem 0;
}
.page-hero h1{ color:#fff; margin-bottom:.5rem; }
.page-hero p{ color:#cfdcee; max-width:680px; }

/* ---------- Cartes services ---------- */
.grille-cartes{ display:grid; gap:1.4rem; grid-template-columns: 1fr; }
@media (min-width: 640px){ .grille-cartes{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .grille-cartes{ grid-template-columns: repeat(4,1fr); } }
.carte{
  background:#fff; border:1px solid #e7ebf1; border-radius: var(--rayon);
  padding: 1.4rem; box-shadow: var(--ombre); display:flex; flex-direction:column; gap:.6rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
.carte:hover{ box-shadow: var(--ombre-lg); transform: translateY(-2px); }
.carte h3{ margin-bottom:.2rem; font-size:1.08rem; }
.carte p{ color: var(--gris); flex:1; font-size:.95rem; margin-bottom:.8rem; }
.carte .icone{ font-size:1.6rem; }
.carte a.lien-carte{ font-weight:700; }

/* ---------- Étapes méthode ---------- */
.etapes{ display:grid; gap:1.2rem; grid-template-columns:1fr; counter-reset: etape; }
@media (min-width:760px){ .etapes{ grid-template-columns: repeat(5,1fr); } }
.etape{ background:#fff; border-radius: var(--rayon); padding:1.3rem 1rem; text-align:center; box-shadow: var(--ombre); position:relative; }
.etape::before{
  counter-increment: etape; content: counter(etape);
  display:flex; align-items:center; justify-content:center; margin:0 auto .7rem;
  width:38px; height:38px; border-radius:50%; background: var(--bleu-fonce); color:#fff; font-weight:700;
}
.etape h3{ font-size:1rem; margin-bottom:.3rem; }
.etape p{ font-size:.88rem; color:var(--gris); margin:0; }

/* ---------- Avant/Après ---------- */
.galerie-resultats{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:760px){ .galerie-resultats{ grid-template-columns: 1fr 1fr; } }
.paire-avant-apres{ background:#fff; border-radius: var(--rayon); overflow:hidden; box-shadow: var(--ombre); }
.paire-avant-apres .images{ display:grid; grid-template-columns: 1fr 1fr; }
.paire-avant-apres figure{ margin:0; position:relative; }
.paire-avant-apres figcaption{
  position:absolute; top:.5rem; left:.5rem; background: rgba(11,37,69,.82); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:.2rem .55rem; border-radius:4px;
}
.paire-avant-apres .legende{ padding: .9rem 1rem; }
.paire-avant-apres .legende h3{ font-size:.98rem; margin-bottom:.2rem; }
.paire-avant-apres .legende p{ font-size:.85rem; color:var(--gris); margin:0; }

/* ---------- Zones d'intervention ---------- */
.grille-zones{ display:grid; gap:.9rem; grid-template-columns: repeat(2,1fr); }
@media (min-width:640px){ .grille-zones{ grid-template-columns: repeat(4,1fr); } }
.zone-tag{
  display:block; background:#fff; border:1px solid #e7ebf1; border-radius: var(--rayon-sm);
  padding:.9rem; text-align:center; font-weight:700; color: var(--bleu-fonce);
}
.zone-tag:hover{ background: var(--bleu-clair); text-decoration:none; }

/* ---------- FAQ ---------- */
.faq-liste{ max-width: 820px; margin: 0 auto; }
.faq-item{ border-bottom:1px solid #e7ebf1; }
.faq-question{
  width:100%; text-align:left; background:none; border:none; padding: 1.1rem .2rem;
  font-weight:700; font-size:1rem; color: var(--bleu-nuit); cursor:pointer;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.faq-question::after{ content:"+"; font-size:1.4rem; color: var(--bleu); flex-shrink:0; }
.faq-item.ouvert .faq-question::after{ content:"−"; }
.faq-reponse{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-reponse p{ padding: 0 .2rem 1.1rem; color: var(--gris); margin:0; }
.faq-item.ouvert .faq-reponse{ max-height: 600px; }

/* ---------- Avis clients ---------- */
.grille-avis{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .grille-avis{ grid-template-columns: repeat(3,1fr); } }
.avis{ background:#fff; border-radius: var(--rayon); padding:1.3rem; box-shadow: var(--ombre); }
.avis .etoiles{ color:#f5a623; letter-spacing:2px; margin-bottom:.5rem; }
.avis p{ font-style: italic; color: var(--gris-fonce); }
.avis .auteur{ font-style:normal; font-weight:700; color:var(--bleu-fonce); margin-top:.6rem; font-size:.9rem; }
.avis-note{ background:#fff; border:1px dashed #d7dee8; border-radius: var(--rayon); padding:1.2rem; text-align:center; color:var(--gris); font-size:.9rem; }
.lien-avis-google{ display:inline-block; margin-top:.6rem; font-weight:700; }

/* ---------- Formulaire ---------- */
.formulaire{ background:#fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.6rem; max-width: 640px; margin:0 auto; }
.champ{ margin-bottom: 1.1rem; }
.champ label{ display:block; font-weight:700; margin-bottom:.35rem; font-size:.92rem; color: var(--bleu-nuit); }
.champ input, .champ select, .champ textarea{
  width:100%; padding:.75rem .9rem; border:1px solid #d5dbe3; border-radius: var(--rayon-sm);
  font-size:1rem; font-family: inherit; background:#fbfcfe;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{ outline:2px solid var(--bleu); outline-offset:1px; }
.champ-double{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:600px){ .champ-double{ grid-template-columns:1fr 1fr; } }
.champ textarea{ resize: vertical; min-height:110px; }
.form-note{ font-size:.82rem; color:var(--gris); margin-top:.5rem; }
.form-confirmation{ display:none; background:#e9f9f1; border:1px solid #b6e9d1; color:#0f6a45; padding:1rem; border-radius: var(--rayon-sm); margin-top:1rem; }
.form-confirmation.visible{ display:block; }

/* ---------- Footer ---------- */
.pied{ background: var(--bleu-nuit); color:#c8d5e8; padding: 3rem 0 1.4rem; margin-top: 2rem; }
.pied a{ color:#c8d5e8; }
.pied a:hover{ color:#fff; }
.pied-grille{ display:grid; gap:2rem; grid-template-columns:1fr; margin-bottom:2rem; }
@media (min-width:760px){ .pied-grille{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pied h4{ color:#fff; font-size:.95rem; margin-bottom:.9rem; text-transform:uppercase; letter-spacing:.04em; }
.pied ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; }
.pied .logo-pied{ height:44px; margin-bottom:.8rem; }
.pied .desc-pied{ font-size:.88rem; color:#a9b8cf; max-width:280px; }
.pied-bas{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.2rem; display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; justify-content:space-between; font-size:.82rem; color:#93a3bc; }
.pied-bas ul{ flex-direction:row; flex-wrap:wrap; gap:1rem; }

/* ---------- Barre CTA fixe mobile (Appeler / WhatsApp) ---------- */
/* Visible uniquement sur mobile/tablette (< 900px) ; sur desktop le téléphone
   reste dans l'en-tête et cette barre est masquée (voir media query plus bas). */
.mobile-bottom-cta{
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
  z-index: 9999;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 -6px 18px rgba(11,37,69,.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bottom-cta a{
  min-height: 58px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:16px; text-decoration:none; color:#fff;
  padding: .4rem .6rem;
}
.mobile-bottom-cta a:hover{ text-decoration:none; }
.mobile-bottom-cta a:focus-visible{
  outline: 3px solid #fff; outline-offset: -3px;
}
.mobile-bottom-call{ background: var(--bleu-fonce); }
.mobile-bottom-whatsapp{ background:#25D366; }

/* Espace réservé en bas de page sur mobile pour que la barre fixe ne cache
   jamais le contenu, les CTA ou le footer. */
@media (max-width: 899px){
  /* 68px (borne haute de la fourchette demandée) plutôt que 58px : la barre
     peut atteindre cette hauteur quand "Devis WhatsApp" passe sur deux lignes
     sur les très petits écrans (320px). Une marge légèrement large garantit
     qu'aucun contenu n'est jamais masqué, quitte à laisser quelques pixels
     d'espace en plus sur les écrans où le texte tient sur une ligne. */
  body{ padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Sur desktop : pas de barre fixe, le téléphone reste dans l'en-tête. */
@media (min-width: 900px){
  .mobile-bottom-cta{ display:none; }
}

/* ---------- Blocs génériques contenu ---------- */
.deux-colonnes{ display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .deux-colonnes{ grid-template-columns:1fr 1fr; } }
.liste-check{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.liste-check li{ position:relative; padding-left:1.6rem; }
.liste-check li::before{ content:"✓"; position:absolute; left:0; color: var(--accent); font-weight:700; }
.encart{ background: var(--bleu-clair); border-left:4px solid var(--bleu-fonce); padding:1.1rem 1.3rem; border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; margin: 1.4rem 0; }
.encart p{ margin:0; }
.table-prix{ width:100%; border-collapse: collapse; background:#fff; box-shadow: var(--ombre); border-radius: var(--rayon); overflow:hidden; }
.table-prix th, .table-prix td{ padding:.9rem 1rem; text-align:left; border-bottom:1px solid #eef1f5; font-size:.94rem; }
.table-prix th{ background: var(--bleu-nuit); color:#fff; }
.table-prix tr:last-child td{ border-bottom:none; }

.article-liste{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:700px){ .article-liste{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .article-liste{ grid-template-columns: repeat(3,1fr); } }
.article-carte{ background:#fff; border:1px solid #e7ebf1; border-radius: var(--rayon); overflow:hidden; box-shadow: var(--ombre); display:flex; flex-direction:column; }
.article-carte .contenu{ padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.article-carte .date{ font-size:.78rem; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; }
.article-carte h3{ font-size:1.05rem; margin:0; }
.article-carte p{ color:var(--gris); font-size:.92rem; margin:0; flex:1; }

article.article-contenu{ max-width: 760px; margin: 0 auto; }
article.article-contenu h2{ margin-top:1.8rem; }
article.article-contenu h3{ margin-top:1.3rem; }
article.article-contenu img{ border-radius: var(--rayon); margin: 1.2rem 0; }

.cta-bande{ background: var(--accent); color:#fff; padding: 2.2rem 0; text-align:center; }
.cta-bande h2{ color:#fff; margin-bottom:.6rem; }
.cta-bande .cta-group{ justify-content:center; }

@media (max-width: 480px){
  .cta-group .btn{ width:100%; }
}