/* =========================================================
   Normandie Services — feuille de style commune
   Palette approuvée : Bleu profond, Bleu grisé, Beige sable,
   Crème clair, Anthracite doux, Ocre naturel (accent), Sauge grisée (accent)
   ========================================================= */

:root{
  --bleu-profond:#2E5F73;
  --bleu-grise:#6F98A4;
  --bleu-grise-fonce:#4A6E78;
  --beige-sable:#E7DCC9;
  --creme:#FAF7F2;
  --anthracite:#4A4A4A;
  --encre:#262626;      /* texte sûr sur fonds colorés moyens (bleu grisé, ocre, sauge) */
  --ocre:#D3A77B;
  --sauge:#A7B7B0;
  --blanc:#FFFFFF;
  --bordure:#DCD3C2;
  --muted:#6B655A;
  --muted-clair:#D0CABC;   /* texte clair atténué sur fond anthracite */
  --muted-sur-bleu:#E0D8C8; /* texte clair atténué sur fond bleu profond */
  --ocre-clair:#EFCFA8;     /* texte/accent clair sur fond anthracite */

  --font-titres:'Fraunces',serif;
  --font-texte:'Inter',sans-serif;

  --rayon:16px;
  --rayon-pilule:999px;
  --ombre: 0 10px 24px rgba(38,38,38,.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--creme);
  color:var(--anthracite);
  font-family:var(--font-texte);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
h1,h2,h3{font-family:var(--font-titres);font-weight:500;margin:0;color:var(--anthracite);}
.container{max-width:1280px;margin:0 auto;padding-left:64px;padding-right:64px;}
@media (max-width:860px){ .container{padding-left:24px;padding-right:24px;} }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-texte);font-weight:600;font-size:14px;
  padding:13px 24px;border-radius:var(--rayon-pilule);
  border:1.5px solid transparent;cursor:pointer;
}
.btn-primaire{background:var(--bleu-profond);color:var(--blanc);}
.btn-primaire:hover{background:#264f60;}
.btn-contour{color:var(--encre);border-color:var(--encre);background:transparent;}
.btn-contour:hover{background:rgba(0,0,0,.04);}
.btn-clair{background:var(--creme);color:var(--bleu-profond);}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ocre);color:var(--encre);
  font-weight:700;font-size:13px;padding:8px 16px;border-radius:var(--rayon-pilule);
  width:fit-content;
}

/* ---------- En-tête / nav ---------- */
.site-header{width:100%;border-bottom:1px solid var(--bordure);background:var(--blanc);position:sticky;top:0;z-index:20;}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;}
.logo{display:flex;align-items:center;gap:12px;}
.logo .wordmark{font-family:var(--font-titres);font-size:17px;line-height:1.1;}
.logo .wordmark b{font-weight:600;color:var(--anthracite);}
.logo .wordmark em{font-weight:400;font-style:italic;color:var(--bleu-profond);}
/* Logo réel (image) : le fichier fourni est blanc sur fond texturé bleu —
   il a besoin d'un fond sombre pour rester lisible. Dans l'en-tête (fond
   blanc), on lui donne donc une petite "puce" couleur ; en pied de page
   (déjà sur fond anthracite), on l'affiche directement. */
/* Le logo est calé sur la hauteur du bouton "Demander un devis" (~49px) :
   dans l'en-tête, la puce ajoute 9px de marge en haut/bas autour de l'image
   (31px d'image + 18px = 49px de puce) ; dans le pied de page, sans puce,
   l'image fait directement ~49px de haut. */
.logo-chip{background:var(--bleu-profond);padding:9px 14px;border-radius:12px;display:inline-flex;align-items:center;}
.logo-img{display:block;width:auto;height:31px;}
.logo-img-footer{width:auto;height:49px;}
.site-nav{display:flex;flex-wrap:wrap;gap:28px;font-size:14px;font-weight:500;}
.site-nav a{color:var(--anthracite);}
.site-nav a:hover{color:var(--bleu-profond);}

/* ---------- Bandeaux pleine largeur ---------- */
.bande{width:100%;position:relative;overflow:hidden;}
.bande-bleu-grise{background:var(--bleu-grise);}
.bande-bleu-profond{background:var(--bleu-profond);}
.bande-anthracite{background:var(--anthracite);}
.bande .liseret{display:block;width:100%;height:26px;}

/* ---------- Section accroche / eyebrow ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu-profond);margin-bottom:8px;}
.tagline{font-family:var(--font-titres);font-style:italic;font-weight:500;font-size:20px;color:var(--encre);margin-bottom:10px;}

/* ---------- Héros ---------- */
.hero{padding:76px 0 56px;}
.hero-inner{display:flex;flex-wrap:wrap;gap:48px;align-items:center;}
.hero-texte{flex:1 1 440px;display:flex;flex-direction:column;gap:18px;}
.hero-texte h1{font-size:46px;line-height:1.12;color:var(--encre);}
.hero-texte p{margin:0;font-size:16px;line-height:1.65;color:var(--encre);max-width:460px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---------- Illustration photo (placeholder empilé, page d'accueil) ---------- */
.photo-stack{position:relative;flex:1 1 360px;width:100%;max-width:420px;height:340px;margin:0 auto;}
.photo-stack div{position:absolute;border-radius:20px;}
.photo-stack .s1{top:34px;left:8px;width:84%;height:84%;background:var(--beige-sable);transform:rotate(-6deg);}
.photo-stack .s2{top:16px;left:40px;width:84%;height:84%;background:var(--creme);border:1px solid var(--bordure);transform:rotate(4deg);}
.photo-stack .s3{top:0;left:22px;width:84%;height:84%;background:linear-gradient(150deg,var(--bleu-profond),var(--bleu-grise));transform:rotate(-2deg);display:flex;align-items:center;justify-content:center;}
.photo-stack-icon{width:42%;height:auto;}

/* ---------- Carrousel photo d'agence (dossier /photos/<agence>/) ---------- */
.carrousel{
  position:relative;width:100%;max-width:460px;aspect-ratio:4/3;margin:0 auto;
  border-radius:var(--rayon);overflow:hidden;background:var(--bleu-grise);
  box-shadow:var(--ombre);
}
.carrousel img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
}
.carrousel img.actif{opacity:1;}
.carrousel .carrousel-legende{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 14px;font-size:12px;color:var(--creme);
  background:linear-gradient(180deg,rgba(38,38,38,0),rgba(38,38,38,.55));
}
.carrousel-suivant{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(250,247,242,.9);color:var(--encre);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(38,38,38,.2);
}
.carrousel-suivant:hover{background:var(--creme);}
.carrousel-vide{display:flex;align-items:center;justify-content:center;height:100%;color:var(--creme);font-size:13px;text-align:center;padding:24px;}

/* ---------- Pourcentage de chargement (carrousel) ---------- */
.carrousel-chargement{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(38,38,38,.35);
}
.carrousel-chargement-pourcent{font-family:var(--font-texte);font-weight:600;font-size:15px;color:var(--creme);}
.carrousel-chargement-barre{width:60%;max-width:160px;height:5px;border-radius:var(--rayon-pilule);background:rgba(250,247,242,.3);overflow:hidden;}
.carrousel-chargement-remplissage{height:100%;width:0%;background:var(--ocre);transition:width .15s ease;}

/* ---------- Cartes métiers ---------- */
.metiers-grille{display:flex;flex-wrap:wrap;gap:20px;}
.carte-metier{
  flex:1 1 300px;background:var(--blanc);border:1px solid var(--bordure);
  border-radius:18px;padding:32px 30px;display:flex;flex-direction:column;gap:4px;position:relative;
}
.carte-metier .num{font-family:var(--font-titres);font-weight:600;font-size:60px;color:var(--beige-sable);line-height:1;}
.carte-metier h3{font-size:19px;margin-top:-16px;}
.carte-metier p{font-size:14px;line-height:1.6;color:var(--anthracite);margin:6px 0 0;}
.carte-metier a{font-size:13px;font-weight:600;color:var(--bleu-profond);margin-top:10px;display:inline-block;}

/* ---------- Bandeau crédit d'impôt ---------- */
.credit-impot{padding:40px 0 64px;}
.credit-impot-inner{display:flex;flex-wrap:wrap;gap:40px;align-items:center;}
.credit-impot-texte{flex:1 1 420px;display:flex;flex-direction:column;gap:16px;}
.credit-impot-texte h2{font-size:28px;color:var(--creme);}
.credit-impot-texte p{margin:0;font-size:15px;line-height:1.7;color:var(--muted-sur-bleu);max-width:520px;}
.credit-impot-carte{
  flex:1 1 300px;background:var(--anthracite);border-radius:18px;padding:32px;
  display:flex;flex-direction:column;gap:18px;
}
.credit-impot-carte .ligne{display:flex;justify-content:space-between;align-items:baseline;}
.credit-impot-carte .ligne span:first-child{color:var(--muted-clair);font-size:14px;}
.credit-impot-carte .total{border-top:1px solid var(--bleu-grise);padding-top:14px;}
.credit-impot-note{font-size:12px;color:var(--muted-sur-bleu);margin-top:4px;}

/* ---------- Témoignages / avis Google ---------- */
.avis{padding:56px 0;}
.avis-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;}
.avis-placeholder{
  width:100%;border:1.5px dashed var(--bleu-grise-fonce);border-radius:var(--rayon);
  padding:28px;background:rgba(250,247,242,.35);color:var(--encre);font-size:13px;line-height:1.7;
}
.avis-carte{
  width:100%;background:var(--creme);border-radius:var(--rayon);
  padding:36px 32px;box-shadow:var(--ombre);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.avis-etoiles{display:flex;gap:4px;font-size:20px;line-height:1;}
.avis-etoiles .pleine{color:var(--ocre);}
.avis-etoiles .vide{color:var(--bordure);}
.avis-texte{margin:0;font-family:var(--font-titres);font-style:italic;font-size:18px;line-height:1.6;color:var(--encre);max-width:620px;}
.avis-source{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.avis-voir-tout{font-size:13px;font-weight:700;color:#262626;}
.avis-voir-tout:hover{text-decoration:underline;}

/* ---------- Agences ---------- */
.agences-grille{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:18px;}
@media (max-width:860px){ .agences-grille{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .agences-grille{grid-template-columns:1fr;} }
.carte-agence{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);padding:24px;display:flex;flex-direction:column;gap:8px;}
.carte-agence h3{font-size:18px;}
.carte-agence .infos{font-size:13px;color:var(--muted);}
.carte-agence a{font-size:13px;font-weight:600;color:var(--bleu-profond);margin-top:6px;}

/* ---------- Demande de devis ---------- */
.devis{padding:64px 0;}
.devis-inner{max-width:640px;margin:0 auto;}
.devis-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
@media (max-width:560px){ .devis-grille{grid-template-columns:1fr;} }
.devis-champ{display:flex;flex-direction:column;gap:6px;}
.devis-champ.pleine-largeur{grid-column:1 / -1;}
.devis-champ label{font-size:13px;font-weight:600;color:var(--encre);}
.devis-champ input,.devis-champ textarea{
  font-family:var(--font-texte);font-size:14px;color:var(--encre);
  background:var(--blanc);border:1.5px solid var(--bordure);border-radius:10px;
  padding:11px 14px;width:100%;
}
.devis-champ input:focus,.devis-champ textarea:focus{outline:2px solid var(--bleu-grise);outline-offset:1px;}
.devis-champ textarea{resize:vertical;min-height:90px;}
.devis-captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.devis-captcha label{font-size:13px;font-weight:600;color:var(--encre);white-space:nowrap;}
.devis-captcha input{max-width:90px;}
.devis-piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.devis-actions{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.devis-message{
  margin-top:18px;padding:14px 18px;border-radius:10px;font-size:14px;line-height:1.6;display:none;
}
.devis-message.visible{display:block;}
.devis-message.succes{background:rgba(167,183,176,.25);color:var(--encre);border:1px solid var(--sauge);}
.devis-message.erreur{background:rgba(211,167,123,.2);color:var(--encre);border:1px solid var(--ocre);}

/* ---------- Pied de page ---------- */
.site-footer{width:100%;background:var(--anthracite);}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center;padding-top:48px;padding-bottom:48px;}
.site-footer .wordmark{font-family:var(--font-titres);font-size:14px;color:var(--creme);}
.site-footer .copy{font-size:12px;color:var(--muted-clair);}
.site-footer .site-nav a{color:var(--muted-clair);}
.site-footer .site-nav a:hover{color:var(--creme);}

/* ---------- Divers ---------- */
.section{padding:64px 0 72px;}
.section-tete{display:flex;flex-direction:column;gap:8px;max-width:560px;margin-bottom:28px;}
.section-tete h2{font-size:30px;}

/* ---------- FAQ ---------- */
.faq-liste{display:flex;flex-direction:column;gap:12px;max-width:760px;}
.faq-item{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);padding:4px 24px;}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--font-titres);font-weight:600;font-size:16px;color:var(--encre);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-icone{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--beige-sable);color:var(--bleu-profond);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;line-height:1;transition:transform .2s ease;}
.faq-item[open] summary .faq-icone{transform:rotate(45deg);}
.faq-item p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px;}

/* ---------- Présentation d'agence (chiffres clés) ---------- */
.chiffres-grille{display:flex;flex-wrap:wrap;gap:36px;margin:24px 0 4px;}
.chiffre{display:flex;flex-direction:column;gap:2px;}
.chiffre .valeur{font-family:var(--font-titres);font-weight:600;font-size:34px;color:var(--bleu-profond);line-height:1;}
.chiffre .label{font-size:13px;color:var(--muted);}

/* ---------- Engagements (pourquoi nous choisir) ---------- */
.engagements-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.carte-engagement{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);padding:18px 20px;display:flex;gap:12px;align-items:flex-start;}
.carte-engagement .coche{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--sauge);color:var(--blanc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;}
.carte-engagement p{font-size:14px;line-height:1.5;color:var(--anthracite);margin:0;}

/* ---------- Services détaillés ---------- */
.service-detail-liste{display:flex;flex-direction:column;gap:16px;}
.service-detail{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);padding:26px 28px;}
.service-detail h3{font-size:18px;margin:0 0 8px;}
.service-detail p{font-size:14px;line-height:1.65;color:var(--anthracite);margin:0;}
.service-detail .frequence{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--bleu-profond);background:var(--beige-sable);padding:5px 12px;border-radius:var(--rayon-pilule);}

/* ---------- Zones d'intervention ---------- */
.zones-liste{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.zone-pastille{background:var(--beige-sable);color:var(--encre);font-size:13px;font-weight:600;padding:6px 14px;border-radius:var(--rayon-pilule);}

/* ---------- Étapes ---------- */
.etapes-grille{display:flex;flex-wrap:wrap;gap:20px;}
.carte-etape{
  flex:1 1 220px;background:var(--blanc);border:1px solid var(--bordure);
  border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:4px;position:relative;
}
.carte-etape .num{font-family:var(--font-titres);font-weight:600;font-size:44px;color:var(--beige-sable);line-height:1;}
.carte-etape h3{font-size:16px;margin:6px 0 0;}
.carte-etape p{font-size:13px;line-height:1.55;color:var(--muted);margin:6px 0 0;}