/* CP Rénovation, feuille de style unique.
   Marine et terracotta relevés du logo. Aucune dépendance externe,
   pile de polices système. */

:root {
  /* Marine et terracotta relevés sur le logo CP Rénovation, rgb(0, 32, 80) et
     rgb(184, 72, 40). Contrastes mesurés sur le rendu servi, pas sur le code.
     Le terracotta plein passe 5,2 avec du blanc : il peut servir d'aplat.
     Il ne peut pas servir de TEXTE sur fond sombre, c'est --or-clair qui le fait. */
  --bleu: #0A2748;
  --bleu-clair: #15406E;
  --bleu-pale: #E8EDF4;
  --bleu-nuit: #002050;      /* le marine exact du logo */
  --or: #B84828;             /* le terracotta exact du logo */
  --or-vif: #D4633C;
  --or-clair: #EFA684;       /* texte sur fond sombre ou sur photo */
  --or-sombre: #7A2E18;
  --corail: #B84828;         /* aplat : 5,2 de contraste avec le blanc */
  --corail-sombre: #8A3419;
  --creme: #FBF9F6;
  --clair: #F2F4F8;
  --bordure: #DFE3EB;
  --texte: #212939;
  --texte-doux: #545E74;
  --rayon: 12px;
  --ombre: 0 2px 12px rgba(0, 32, 80, .08);
  --ombre-forte: 0 16px 44px rgba(0, 32, 80, .20);
  --largeur: 1180px;
  --fond-mobile: none;
  --fond-bureau: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Pile systeme : rendu coherent partout, aucun appel reseau. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texte);
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }
/* Garde-fou : un svg sans regle de taille se deploie a 300 x 150 px. */
svg { width: 24px; height: 24px; flex: none; }
a { color: var(--or-sombre); }

h1, h2, h3, h4 { color: var(--bleu); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.9vw, 2.05rem); }
h3 { font-size: 1.14rem; }
p { margin: 0 0 1.1em; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 76px 0; }
.section--clair { background: var(--creme); }
.section--creme { background: var(--creme); }
.section--nuit { background: var(--bleu); color: #d5dcea; }
.section--nuit h2, .section--nuit h3 { color: #fff; }

.surtitre {
  display: block; color: var(--or-sombre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .78rem; margin-bottom: .55rem;
}
.section--nuit .surtitre { color: var(--or-clair); }
.entete-section { max-width: 780px; margin: 0 auto 46px; text-align: center; }
.entete-section p { color: var(--texte-doux); font-size: 1.05rem; }
.section--nuit .entete-section p { color: #b6bcc4; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 15px 28px; border-radius: var(--rayon); font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  font-size: 1rem; line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.btn--or { background: var(--corail); color: #fff; }
/* icone toujours blanche : elle heritait de la couleur du texte,
   donc d un heritage fragile selon la section */
.btn--or svg, .btn--tel svg, .nav-tel svg { color: #fff; stroke: #fff; }
.btn--or:hover { background: var(--corail-sombre); color: #fff; }
.btn--tel { background: var(--bleu-clair); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--tel:hover { background: var(--bleu); color: #fff; }
.btn--ligne { border-color: #fff; color: #fff; background: transparent; }
/* pose sur la banniere, le bouton a filet a besoin d un fond tenu : la photo
   s y eclaircit par endroits. Ailleurs il reste transparent, notamment en
   section claire ou il porte un texte brun. */
.heros .btn--ligne { background: rgba(0, 32, 80, .74); }
.btn--ligne:hover { background: #fff; color: var(--bleu); }
.btn--sombre { background: var(--bleu); color: #fff; }
.btn--sombre:hover { background: var(--bleu-clair); color: #fff; }
.btn svg { width: 19px; height: 19px; flex: none; }

/* ---------- bandeau urgence ---------- */
.bandeau-urgence {
  background: var(--corail); color: #fff; text-align: center;
  padding: 9px 16px; font-size: .92rem; font-weight: 600;
}
.bandeau-urgence a { color: #fff; text-decoration: underline; font-weight: 800; }

/* ---------- en-tete sombre, pour que le logo trouve son fond ---------- */
.entete { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--bordure); box-shadow: 0 2px 14px rgba(10, 39, 72, .07); }
.entete .conteneur { display: flex; align-items: center; gap: 18px; min-height: 124px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* Le verrou complet porte le nom et la baseline : il lui faut de la hauteur. */
.logo img { height: 92px; width: auto; }
.logo--pied { margin-bottom: 16px; }
/* Le logo est carre : ne jamais lui imposer une largeur fixe. */
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--bleu); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--corail); }
.nav-tel {
  display: inline-flex; align-items: center; gap: .5rem; color: #fff;
  background: var(--corail); padding: 11px 18px; border-radius: var(--rayon);
  font-weight: 800; font-size: 1.02rem; text-decoration: none; white-space: nowrap;
}
.nav-tel:hover { background: var(--corail-sombre); color: #fff; }
/* specificite egale a celle de .nav a, sinon le lien du menu
   repeint le numero en bleu sur son fond rouge */
.nav a.nav-tel, .nav a.nav-tel:hover, .nav a.nav-tel span { color: #fff; }
.nav a.nav-tel svg { color: #fff; stroke: #fff; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--or); }
.burger svg { width: 28px; height: 28px; }

/* ---------- bandeau principal ---------- */
/* La photo est le fond de la section, le voile est en ::before AU-DESSUS.
   Placer la photo en ::before avec un z-index negatif la ferait passer
   derriere le fond du parent, donc invisible. */
.heros {
  position: relative;
  padding: 86px 0 78px;
  color: #fff;
  background-image: var(--fond-mobile);
  background-size: cover;
  background-position: center;
  background-color: var(--bleu);
  isolation: isolate;
}
.heros::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg,
    rgba(10, 39, 72, .93) 0%,
    rgba(10, 39, 72, .85) 42%,
    rgba(10, 39, 72, .74) 72%,
    rgba(10, 39, 72, .62) 100%);
}
.heros > .conteneur { position: relative; z-index: 1; }
.heros--court { padding: 58px 0 54px; }
.heros--court.heros--accueil { padding: 48px 0 92px; }
.heros--court.heros--accueil h1 { max-width: 24ch; }
.heros--court .ariane { color: #e6e3dc; padding: 0 0 14px; }
.heros--court .ariane a { color: #e6e3dc; }
.heros--court .ariane a:hover { color: var(--or); }
.heros--court h1 { max-width: 22ch; }
.heros--court .heros-sous { max-width: 62ch; }
.heros-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.heros h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.heros-sous { font-size: 1.09rem; color: #e2e0da; max-width: 48ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.heros-gages { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 32px; font-size: .93rem; color: #ddd9d1; }
.heros-gages span { display: inline-flex; align-items: center; gap: .45rem; }
.heros-gages svg { width: 17px; height: 17px; color: var(--or); flex: none; }

/* ---------- formulaire ---------- */
.carte-formulaire { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--ombre-forte); color: var(--texte); border-top: 4px solid var(--or); }
.carte-formulaire h2 { font-size: 1.26rem; margin-bottom: .3em; }
.carte-formulaire .accroche { color: var(--texte-doux); font-size: .93rem; margin-bottom: 1.1em; }
.champ { margin-bottom: 13px; }
.champ label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: 5px; color: var(--bleu); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 12px 13px; border: 1px solid #cfcabf; border-radius: 9px;
  font: inherit; font-size: .97rem; background: #fff; color: var(--texte);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid rgba(214, 176, 97, .45); border-color: var(--or); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--corail); }
.champ textarea { min-height: 92px; resize: vertical; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--texte-doux); }
.consentement input { width: auto; margin-top: 3px; }
.retour-formulaire { margin-top: 12px; font-size: .93rem; font-weight: 600; }
.retour-formulaire.ok { color: #1c7a4a; }
.retour-formulaire.ko { color: var(--corail); }

/* ---------- barre de confiance ---------- */
.barre-confiance { background: var(--bleu-clair); color: #ddd9d1; padding: 22px 0; }
.barre-confiance .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.barre-confiance div { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; }
.barre-confiance svg { width: 21px; height: 21px; color: var(--or); flex: none; }

/* ---------- grilles ---------- */
.grille { display: grid; gap: 24px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.deux-colonnes img { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.carte {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 26px; text-decoration: none; color: inherit; display: block;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--or); }
.carte h3 { margin-bottom: .35em; }
.carte p { color: var(--texte-doux); font-size: .95rem; margin: 0; }
.carte-icone {
  width: 54px; height: 54px; border-radius: 13px; background: var(--bleu-pale);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.carte-icone svg { width: 25px; height: 25px; color: var(--bleu); }

/* ---------- etapes ---------- */
.etape { position: relative; padding-left: 62px; }
.etape-num {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--or); color: var(--bleu); display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1.05rem;
}
.section--nuit .etape p { color: #b6bcc4; }

/* ---------- galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.galerie figure { margin: 0; border-radius: var(--rayon); overflow: hidden; position: relative; background: var(--bleu-clair); }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .4s ease; }
.galerie figure:hover img { transform: scale(1.05); }

/* ---------- avis ---------- */
.avis { background: #fff; border: 1px solid var(--bordure); border-left: 4px solid var(--or); border-radius: var(--rayon); padding: 24px; }
.avis-etoiles { color: var(--or); margin-bottom: 10px; display: flex; gap: 3px; }
.avis-etoiles svg { width: 16px; height: 16px; fill: var(--or); }
.avis blockquote { margin: 0 0 14px; font-style: italic; }
.avis cite { font-style: normal; font-weight: 700; color: var(--bleu); font-size: .92rem; }
.avis .lieu { color: var(--texte-doux); font-size: .85rem; }

/* ---------- questions ---------- */
.question { border-bottom: 1px solid var(--bordure); }
.question summary {
  cursor: pointer; padding: 19px 0; font-weight: 700; color: var(--bleu);
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; color: var(--or-sombre); font-size: 1.6rem; line-height: 1; }
.question[open] summary::after { content: "\2212"; }
.question p { color: var(--texte-doux); padding-bottom: 8px; margin-bottom: 0; }
.section--clair .question { border-color: #ddd8ce; }

/* ---------- liste de liens ---------- */
.liste-liens { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.liste-liens a {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--bordure);
  border-radius: 999px; text-decoration: none; color: var(--bleu); font-size: .92rem;
  font-weight: 600; background: #fff; transition: all .15s ease;
}
.liste-liens a:hover { border-color: var(--bleu); background: var(--bleu); color: #fff; }

/* ---------- appel final ---------- */
.appel-final { background: var(--bleu); color: #fff; text-align: center; padding: 72px 0; border-top: 3px solid var(--or); }
.appel-final h2 { color: #fff; }
.appel-final p { color: #c9c5bd; max-width: 62ch; margin-inline: auto; }
.appel-final .heros-actions { justify-content: center; }

/* ---------- pied ---------- */
.pied { background: #fff; color: var(--texte-doux); padding: 58px 0 26px; font-size: .93rem; border-top: 3px solid var(--bleu); }
.pied h2 { color: var(--bleu); font-size: .95rem; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .1em; }
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--corail); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 8px; }
.pied-bas { border-top: 1px solid rgba(10, 39, 72, .09); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; }
.pied .logo img { height: 134px; width: auto; margin-bottom: 0; }

/* ---------- bloc de devis en pied de page ---------- */
.section--devis { background: var(--bleu-pale); color: var(--texte); scroll-margin-top: 92px; }
.section--devis h2 { color: var(--bleu); }
.section--devis .surtitre { color: var(--or-sombre); }
.atouts { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.atouts li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; }
.atouts svg { width: 20px; height: 20px; color: var(--corail); margin-top: 3px; }
.devis-tel { font-size: 1rem; margin-top: 24px; }
.devis-tel a { color: var(--corail); font-weight: 800; font-size: 1.2rem; text-decoration: none; }
.devis-tel a:hover { text-decoration: underline; }
.heros--plein .heros-sous { max-width: 60ch; }

/* Bandeau d accueil a la hauteur de l ecran. On retranche le bandeau
   d urgence et l en-tete collant, et on utilise svh pour que la barre
   d adresse mobile ne tronque pas le contenu. */
.heros--accueil {
  min-height: calc(100vh - 164px);
  min-height: calc(100svh - 164px);
  display: flex; align-items: center; position: relative;
  padding: 56px 0 96px;
}
.heros-surtitre { color: var(--or-clair); margin-bottom: 14px; }
.heros--accueil h1 { max-width: 20ch; font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
.heros--accueil .heros-sous { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 56ch; }
.heros-raccourcis { margin-top: 42px; }
.heros-raccourcis-titre {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  color: #dbe3f0; margin-bottom: 14px; font-weight: 700;
}
.raccourcis { display: flex; flex-wrap: wrap; gap: 10px; }
.raccourci {
  display: inline-flex; align-items: center; gap: .5rem; padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(0, 32, 80, .62); color: #eef2f8; text-decoration: none;
  font-size: .9rem; font-weight: 600; backdrop-filter: blur(4px);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.raccourci svg { width: 17px; height: 17px; color: var(--or); }
.raccourci:hover { background: var(--bleu-clair); border-color: var(--or); color: #fff; }
.raccourci:hover svg { color: var(--or-vif); }
.heros-defiler {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 28px; height: 46px; border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 999px; z-index: 2; display: flex; justify-content: center;
}
.heros-defiler span {
  display: block; width: 4px; height: 9px; border-radius: 2px;
  background: var(--or); margin-top: 8px; animation: defiler 1.7s ease-in-out infinite;
}
@keyframes defiler { 0%, 100% { transform: translateY(0); opacity: 1 } 50% { transform: translateY(13px); opacity: .3 } }
@media (max-width: 860px) {
  .heros--accueil { min-height: calc(100svh - 132px); padding: 40px 0 78px; }
  .heros-raccourcis { margin-top: 30px; }
  .heros-defiler { display: none; }
}
.heros--plein .heros-gages { gap: 18px 30px; }

/* ---------- texte et image en alternance ---------- */
.alterne { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.alterne--inverse > div:first-child { order: 2; }
.alterne img { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.alterne h2 { margin-top: 0; }
.alterne h2::before { content: ""; display: block; width: 46px; height: 3px; background: var(--or); border-radius: 2px; margin-bottom: 16px; }
.alterne p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .alterne { grid-template-columns: 1fr; gap: 28px; }
  .alterne--inverse > div:first-child { order: 0; }
}

/* ---------- coordonnees ---------- */
.coordonnees { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.coordonnee { display: flex; align-items: flex-start; gap: 15px; }
.coordonnee-icone {
  width: 46px; height: 46px; border-radius: 12px; background: var(--bleu-pale);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.coordonnee-icone svg { width: 21px; height: 21px; color: var(--bleu); }
.coordonnee-texte { display: flex; flex-direction: column; line-height: 1.45; }
.coordonnee-texte strong { color: var(--bleu); font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; }
.coordonnee-texte a { color: var(--or-sombre); text-decoration: none; font-weight: 700; font-size: 1.12rem; }
.coordonnee-texte a:hover { text-decoration: underline; }

/* ---------- divers ---------- */
.ariane { font-size: .85rem; color: var(--texte-doux); padding: 16px 0; }
.ariane a { color: var(--texte-doux); text-decoration: none; }
.ariane a:hover { color: var(--or-sombre); }

/* Un bloc de texte pleine largeur donne des lignes de 1180 px, illisibles.
   On borne la mesure des que l article n est pas deja dans une colonne. */
.section > .conteneur > .article,
.section > .conteneur > .entete-section + .article { max-width: 72ch; margin-inline: auto; }
.article h2 {
  margin-top: 2em; padding-top: .1em; position: relative;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}
.article h2::before {
  content: ""; display: block; width: 46px; height: 3px; background: var(--or);
  border-radius: 2px; margin-bottom: 16px;
}
.article h2:first-child { margin-top: 0; }
.article > p:first-child {
  font-size: 1.16rem; line-height: 1.62; color: var(--bleu); font-weight: 500;
}
.article p { max-width: 72ch; }
.article ul { padding-left: 20px; }
.article li { margin-bottom: .5em; }
.article a { font-weight: 600; }
.encadre { background: var(--bleu-pale); border-left: 4px solid var(--or); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 20px 24px; margin: 28px 0; }
.encadre p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .heros-grille { grid-template-columns: 1fr; gap: 34px; }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .deux-colonnes { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .nav.ouvert {
    display: flex; position: absolute; top: 96px; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--bleu); padding: 8px 20px 20px;
    border-bottom: 1px solid rgba(214, 176, 97, .3);
  }
  /* le menu deplie a un fond bleu, or .nav a impose la couleur bleue :
     sans cette regle les liens sont invisibles sur mobile */
  .nav.ouvert a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff; }
  .nav.ouvert a:hover, .nav.ouvert a:focus { color: var(--or); }
  .nav.ouvert .nav-tel { justify-content: center; margin-top: 14px; border-bottom: 0; }
  .burger { display: block; margin-left: auto; }
  .section { padding: 56px 0; }
  .grille-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grille-2, .grille-4 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .heros { padding: 52px 0 46px; }
  .barre-confiance .conteneur { flex-direction: column; gap: 12px; }
  .btn { width: 100%; }
  .carte-formulaire { padding: 22px; }
  .logo img { height: 76px; }
      .entete .conteneur { min-height: 104px; }
  .nav.ouvert { top: 80px; }
}
@media (min-width: 861px) {
  .logo img { height: 108px; }
  .entete .conteneur { min-height: 140px; }
}
@media (min-width: 1001px) {
  .heros { background-image: var(--fond-bureau); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* note globale de la fiche Google, relevee sur la fiche elle-meme */
.note-google{text-align:center;margin:0 auto 34px;max-width:520px;padding:26px 22px;
  border:1px solid #e4e7ee;border-radius:14px;background:#fff}
.note-google__chiffre{font-size:56px;line-height:1;font-weight:800;color:var(--bleu)}
.note-google__chiffre span{font-size:24px;font-weight:600;color:#8a90a0}
.note-google__etoiles{display:flex;justify-content:center;gap:4px;margin:12px 0 10px}
.note-google__etoiles svg{width:26px;height:26px;color:#F5A623}
.note-google__texte{margin:0;color:#4a5164;font-size:15px}
@media(max-width:600px){
  .note-google{padding:22px 16px}
  .note-google__chiffre{font-size:46px}
  .note-google__etoiles svg{width:22px;height:22px}
}


/* avis clients : cartes alimentees par contenu_avis.py */
.avis-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 36px}
.avis-carte{background:#fff;border:1px solid #e4e7ee;border-radius:14px;padding:22px}
.avis-carte__tete{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avis-carte__pastille{width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px}
.avis-carte__tete strong{display:block;color:#1b2233;font-size:15px}
.avis-carte__tete small{color:#8a90a0;font-size:13px}
.avis-carte__etoiles{display:flex;gap:3px;margin-bottom:10px}
.avis-carte__etoiles svg{width:18px;height:18px;color:#F5A623}
.avis-carte__texte{margin:0;color:#4a5164;font-size:15px;line-height:1.6}
@media(max-width:900px){.avis-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.avis-grille{grid-template-columns:1fr;gap:16px}}


/* reponse publique du gerant, sous l avis */
.avis-carte__reponse{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--bleu);
  background:#f5f7fb;border-radius:0 8px 8px 0;color:#4a5164;font-size:14px;line-height:1.55}
.avis-carte__reponse span{display:block;font-weight:700;color:#1b2233;font-size:13px;
  margin-bottom:4px}
.avis-carte{display:flex;flex-direction:column}
.avis-carte__texte{flex:1}


/* invitation a deposer un avis */
.avis-action{text-align:center;margin:30px 0 0}
.avis-lien{text-align:center;margin:26px 0 0}
.avis-lien a{color:var(--bleu);font-weight:600;text-decoration:underline}


/* barre d actions collee en bas, telephone uniquement */
.barre-bas { display: none; }
@media (max-width: 860px) {
  .barre-bas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--bordure); box-shadow: 0 -4px 18px rgba(11, 20, 46, .12);
  }
  .barre-bas a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 10px; border-radius: 10px;
    font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff;
  }
  .barre-bas a span { white-space: nowrap; }
  .barre-bas svg { width: 19px; height: 19px; flex: 0 0 19px; color: #fff; stroke: #fff; }
  .barre-bas__tel { background: var(--corail); }
  .barre-bas__devis { background: var(--bleu); }
  /* la barre recouvrirait la fin du pied de page */
  body { padding-bottom: 74px; }
  /* et masquerait le haut du formulaire quand on suit l ancre */
  #devis { scroll-margin-bottom: 84px; }
}
@media (max-width: 380px) {
  .barre-bas a { font-size: .86rem; gap: 6px; }
}


/* ------------------------------------------------------------ vignettes communes */
.grille-lieux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.carte-lieu {
  position: relative;
  display: block;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--bleu);
  box-shadow: var(--ombre);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte-lieu:hover, .carte-lieu:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ombre-forte);
}
.carte-lieu img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.carte-lieu::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 78%;
  background: linear-gradient(to top, rgba(0, 32, 80, .96), rgba(0, 32, 80, 0));
}
.carte-lieu__bulle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--or);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.carte-lieu__nom {
  position: absolute;
  left: 14px;
  bottom: 26px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  padding-right: 14px;
}
.carte-lieu__cp {
  position: absolute;
  left: 14px;
  bottom: 9px;
  z-index: 2;
  color: var(--or-clair);
  font-size: .82rem;
  font-weight: 600;
}

/* mention a completer par le client, visible mais non alarmante */
.a-completer {
  border-left: 3px solid var(--or);
  background: var(--bleu-pale);
  padding: 12px 16px;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  color: var(--texte-doux);
  font-size: .94rem;
}

/* ── Zones tactiles ───────────────────────────────────────── */
/* Mesure du 22 septembre a 500 px : 22 liens du pied faisaient 15 a 16 px de
   haut. La cible se prend au doigt, pas a la souris : on lui donne ses 44 px
   par du remplissage, sans ecarter le texte. */
footer a,
.liens a,
a.lien-doux {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 4px;
}
@media (min-width: 900px) {
  /* Au bureau la souris vise juste : on rend au pied sa compacite. */
  footer a, .liens a, a.lien-doux { min-height: 32px; }
}

/* Le lien telephone est l action de conversion du site : le laisser a 16 px
   de haut au doigt est la pire economie possible. Le fil d Ariane suit la
   meme regle, a moindre enjeu. */
a[href^="tel:"],
.fil-ariane a,
nav[aria-label="Fil d'Ariane"] a,
ol a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 3px;
}
@media (min-width: 900px) {
  .fil-ariane a, nav[aria-label="Fil d'Ariane"] a, ol a { min-height: 28px; }
}


/* Fond anime du heros. La video se place SOUS le voile et le contenu, jamais
   au-dessus : sinon le texte devient illisible des que l image s eclaircit.
   object-fit couvre le cadre sans deformer, ce qu un fond en background-size
   ne sait pas faire sur une video. */
.heros-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none}
.heros--accueil .conteneur{position:relative;z-index:2}
.heros--accueil::before{z-index:1}

/* Un fond qui bouge en continu gene une partie des visiteurs. On le fige. */
@media (prefers-reduced-motion: reduce){
  .heros-video{display:none}
}