/* ==========================================================================
   Maquette d'accueil allégé — styles NOUVEAUX uniquement (préfixe .prop-).
   Tout le reste vient de style.css / pages.css. Aucune valeur en dur hors
   variables du site, aucun style en ligne (CSP).
   ========================================================================== */

/* Bandeau « maquette » */
.prop-bandeau{
  background:var(--ink); color:var(--paper);
  text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.02em;
  padding:6px 16px;
}

/* Emplacement de tarif à compléter : visible, jamais un chiffre inventé */
.a-completer{
  display:inline-block; padding:2px 10px; border-radius:8px;
  border:2px dashed var(--spark-dark); background:rgba(242,208,64,.16);
  color:var(--rust-dark); font-size:13.5px; font-weight:700; line-height:1.4;
}

/* Cartes de prestation compactes */
#services .service-card{ position:relative; padding:24px 22px 22px; gap:10px; }
#services .service-card h3{ margin:0; }
#services .service-card .service-lead{ margin:0; color:var(--ink-soft); font-size:15px; }
#services .card-tag-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.prop-tag-elig{
  display:inline-flex; padding:3px 9px; border-radius:999px;
  background:var(--spark); color:var(--ink);
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
}
.prop-prix{ margin:4px 0 0; font-size:14.5px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.prop-prix-label{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.prop-prix-fort{ font-family:var(--display); font-size:17px; color:var(--water-dark); }
.prop-prix-note{ color:var(--ink-soft); font-size:13px; }
.prop-secondaire{ margin:18px 0 0; color:var(--ink-soft); font-size:15px; }
.prop-secondaire a{ font-weight:700; color:var(--water-dark); }
.prop-note{ margin:10px 0 0; font-size:13px; color:var(--ink-soft); }
.prop-note a{ font-weight:700; text-decoration:underline; text-underline-offset:2px; }

/* Tableau des tarifs */
#services .hero-actions{ margin-top:20px; }

/* Camion laveur : une seule photo */
.bins-visual--seule{ grid-template-columns:1fr; max-width:380px; justify-self:center; }

/* Trois colonnes courtes : copropriétés / intérieur */
.prop-cols{ display:grid; gap:22px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:8px; }
@media (max-width:860px){ .prop-cols{ grid-template-columns:1fr; } }
.prop-col{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 24px;
}
.prop-col h3{ margin:0 0 8px; }
.prop-col p{ margin:0; font-size:15px; color:var(--ink-soft); }

/* Zone */
.prop-valdeurope{ margin:18px 0 0; }

/* Note de pied de page (reprise de .ci-footer-note, sans charger sa feuille) */
.prop-footnote{
  flex-basis:100%; margin:14px 0 0; padding-top:14px;
  border-top:1px solid rgba(244,247,251,0.14);
  font-size:12px; line-height:1.5; color:rgba(244,247,251,0.78);
}
.prop-footnote a{ color:#fff; }

/* ---- Cartes de prestations : explique, rassure, redirige ---- */
.prop-offres{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.prop-offre{ display:flex; flex-direction:column; gap:8px; padding:20px 20px 18px; border:1px solid var(--line, rgba(14,39,66,.14)); border-radius:16px; background:#fff; color:var(--ink); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.prop-offre:hover, .prop-offre:focus-visible{ transform:translateY(-2px); border-color:var(--water); box-shadow:0 10px 24px rgba(14,39,66,.10); }
.prop-offre h3{ margin:0; font-size:19px; }
.prop-offre p{ margin:0; font-size:15px; color:var(--ink-soft); }
.prop-offre-pour{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rust-dark); }
.prop-offre-plus{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:4px; font-size:14px; }
.prop-offre-plus li{ position:relative; padding-left:22px; }
.prop-offre-plus li::before{ content:""; position:absolute; left:2px; top:4px; width:10px; height:6px; border-left:2px solid var(--water); border-bottom:2px solid var(--water); transform:rotate(-45deg); }
.prop-offre-prix{ font-size:15px; }
.prop-offre-prix strong{ font-family:var(--display); font-size:22px; color:var(--water-dark); }
.prop-offre-go{ margin-top:auto; padding-top:6px; font-weight:700; color:var(--water-dark); }
@media (prefers-reduced-motion:reduce){ .prop-offre{ transition:none; } .prop-offre:hover{ transform:none; } }

/* ---- Bascule Particulier / Professionnel ---- */
.prop-bascule{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:4px 0 22px; }

.prop-bascule-label{ font-weight:700; color:var(--ink-soft); font-size:15px; }
.prop-bascule-choix{ display:inline-flex; padding:4px; border-radius:999px; background:rgba(31,90,168,.09); border:1px solid var(--line); }
.prop-bascule-btn{ appearance:none; border:0; background:transparent; color:var(--water-dark); font:inherit; font-weight:700; font-size:15px; padding:9px 20px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.prop-bascule-btn[aria-pressed="true"]{ background:var(--water); color:#fff; box-shadow:0 4px 12px rgba(31,90,168,.25); }
.prop-bascule-btn:focus-visible{ outline:2px solid var(--water-dark); outline-offset:2px; }
.prop-groupe + .prop-groupe{ margin-top:34px; }
.prop-groupe[hidden]{ display:none; }
.prop-groupe-titre{ margin:0 0 14px; font-size:18px; color:var(--water-dark); }
/* Avec la bascule, le titre du groupe redit le bouton : on le retire de l'écran
   (il reste lu par les lecteurs d'écran). */
.prop-bascule-active .prop-groupe-titre{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.prop-bascule-active .prop-groupe + .prop-groupe{ margin-top:0; }
@media (prefers-reduced-motion:reduce){ .prop-bascule-btn{ transition:none; } }
/* Barre collante : rangee supplementaire du header (sticky), sous le menu. */
.prop-bascule.prop-barre{ margin:0; justify-content:center; flex-wrap:nowrap; gap:12px; padding:4px 16px; background:var(--ink); border-top:1px solid rgba(255,255,255,.08); }
.prop-barre .prop-bascule-label{ color:#fff; font-size:14px; }
.prop-barre .prop-bascule-choix{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
.prop-barre .prop-bascule-btn{ color:#fff; font-size:14px; padding:5px 16px; }
.prop-barre .prop-bascule-btn[aria-pressed="true"]{ background:var(--water); box-shadow:none; }
.prop-barre .prop-bascule-btn:focus-visible{ outline-color:#fff; }
.prop-groupe{ scroll-margin-top:130px; }
@media (max-width:480px){ .prop-bascule.prop-barre{ gap:8px; padding:6px 10px; } .prop-barre .prop-bascule-label{ font-size:13px; } .prop-barre .prop-bascule-btn{ padding:6px 12px; font-size:13px; } }

/* ---- Zone : communes sous le texte, avis Google à droite ---- */
.prop-zone{ align-items:stretch; }
.prop-communes-titre{ display:block; margin-top:26px; }
.commune-list.prop-communes{ margin-top:12px; }
.commune-list.prop-communes li{ color:var(--ink); background:rgba(255,255,255,.7); border-color:var(--line); }
.commune-list.prop-communes li.is-home{ background:var(--spark); border-color:var(--spark); }
.prop-communes-note{ margin:12px 0 0; font-size:13.5px; color:var(--ink-soft); }
.prop-zone-avis{ display:flex; color:var(--paper); min-width:0; }
.prop-note-avis{ margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:14px; color:rgba(244,247,251,.75); }
.prop-note-avis b{ font-family:var(--display); font-size:34px; color:var(--paper); line-height:1; }
.prop-zone-avis .scroller{ width:100%; height:380px; }
@media (max-width:560px){ .prop-zone-avis .scroller{ height:320px; } }
.prop-zone-avis .review-cta{ margin-top:6px; }

/* ---- FAQ sur toute la largeur ---- */
#faq .faq{ max-width:none; }

/* ---- Respiration sous les cartes de prestations ----
   En mode Professionnel, aucune note ne separe les cartes du bouton : sans
   cette marge, le bouton venait se coller sous la grille. */
#services > .hero-actions{ margin-top:36px; }
.prop-groupe .prop-note{ margin-top:16px; }

/* ---- Zone partagee sur les pages interieures (sans colonne d'avis) ----
   Meme encart que l'accueil, sur toute la largeur ; communes en grille fluide. */
.prop-zone--seule{ grid-template-columns:minmax(0,1fr); align-items:start; }
.prop-zone--seule .prop-communes{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap:8px;
}
.prop-zone--seule .prop-communes li{ text-align:center; }

/* ---- Cartes partagees : grille propre quand une carte est retiree ----
   auto-fit reetale les cartes restantes sur la largeur de la grille. */
.prop-offres{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* ---- Contenu reserve a un public ---- */
html[data-public="pros"] [data-public-seulement="particuliers"],
html[data-public="particuliers"] [data-public-seulement="pros"]{ display:none !important; }
.prop-avis-pros{ max-width:1100px; margin:18px auto 0; padding:14px 18px; border-left:4px solid var(--water); background:rgba(31,90,168,.08); border-radius:8px; color:var(--ink); }
.prop-avis-pros p{ margin:0; }

/* ---------- Boutons du hero : 1 principal (jaune, couleur d'action du site), 2 secondaires ----------
   Variante A (defaut, sans attribut) : « Etre rappele » en tete, pleine
   largeur ; dessous « Estimer mon prix » et « Appeler » cote a cote.
   Variante B (data-boutons="b") : rappel + estimer sur une ligne, « Appeler »
   en simple lien texte dessous.
   Le lien « Estimer mon prix » est injecte par lien-estimation.js seulement
   si l'estimateur est publie : sans lui, l'autre secondaire prend la place. */
.hero-actions{ gap:12px; }
.hero-actions .btn{ min-height:48px; justify-content:center; text-align:center; }
.hero-actions .ri-tel{ width:18px; height:18px; flex:none; color:currentColor; }

.hero-copy .hero-actions > .btn-primary{ order:1; flex:1 1 100%; font-size:17px; padding:16px 28px; }
.hero-copy .hero-actions > a[href*="estimation"]{ order:2; flex:1 1 200px; padding:14px 18px; }
.hero-copy .hero-actions > a[href^="tel:"]{ order:3; flex:1 1 200px; padding:14px 18px; }

.hero-copy .hero-actions[data-boutons="b"] > .btn-primary{ flex:0 1 auto; font-size:15px; padding:14px 28px; }
.hero-copy .hero-actions[data-boutons="b"] > a[href*="estimation"]{ flex:0 1 auto; padding:14px 26px; }
.hero-copy .hero-actions[data-boutons="b"] > a[href^="tel:"]{
  flex:1 1 100%; justify-content:flex-start; min-height:44px; padding:8px 4px;
  background:transparent; border-color:transparent; color:var(--water-dark);
  text-decoration:underline; text-underline-offset:3px;
}
.hero-copy .hero-actions[data-boutons="b"] > a[href^="tel:"]:hover{ background:transparent; color:var(--ink); transform:none; }

@media (max-width:560px){
  .hero-copy .hero-actions > a.btn,
  .hero-copy .hero-actions[data-boutons="b"] > a.btn{ flex:1 1 100%; }
  .hero-copy .hero-actions[data-boutons="b"] > a[href^="tel:"]{ justify-content:center; }
}

/* ---- Avis long : replié à la taille des autres, déplié au clic ---- */
.review-card-long{ cursor:pointer; }
.review-card-long:focus-visible{ outline:2px solid var(--spark); outline-offset:2px; }
.review-card-long .review-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.review-card-long.is-open .review-text{ display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; }
.review-more{ display:block; margin-top:6px; font-size:13px; font-weight:700; color:var(--spark); }
.review-card-long.is-open .review-more{ font-size:0; }
.review-card-long.is-open .review-more::after{ content:"Réduire ▴"; font-size:13px; }

/* Safari applique le « scroll-behavior:smooth » du site aux défilements par
   script : chaque mise à jour de scrollTop relançait une animation et le bandeau
   d'avis restait figé. Ce bandeau avance image par image : pas de lissage. */
.scroller, .scroller.js-scroll{ scroll-behavior:auto; }