/* =============================================================
   Art et Confort — habillage des gabarits.
   Fichier généré par src/build.py : ne pas modifier à la main.

   css/style.css reste la feuille historique du site, intacte.
   Celle-ci n'ajoute que ce que les gabarits livrés à l'audit du
   15/08/2026 réclament et qui n'existait nulle part : le fil
   d'Ariane, les listes de communes, et le vocabulaire du gabarit
   « commune » (services, atouts, avis, questions fréquentes).
   Elle reprend les jetons de style.css — aucune couleur en dur.
   ============================================================= */

/* ---------- Fil d'Ariane ---------- */
.fil-ariane {
  background: #f7f8fa;
  border-bottom: 1px solid #e8eaee;
  font-size: .875rem;
}
.fil-ariane ol {
  list-style: none;
  margin: 0;
  padding: .85rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.fil-ariane li { display: flex; align-items: center; gap: .45rem; color: var(--gray-500); }
.fil-ariane li + li::before {
  content: "›";
  color: var(--gray-300);
  margin-right: .1rem;
}
.fil-ariane a { color: var(--gray-500); text-decoration: none; transition: var(--transition); }
.fil-ariane a:hover { color: var(--blue-600); text-decoration: underline; }
.fil-ariane li[aria-current="page"] { color: var(--gray-900); font-weight: 600; }

.footer-communes {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem;
  padding-top: 1.75rem;
}
.footer-communes h4 { margin-bottom: .9rem; }
.footer-communes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .35rem;
}
.footer-communes-list li::after { content: "·"; margin-left: .45rem; opacity: .4; }
.footer-communes-list li:last-child::after { content: ""; }
.footer-communes-list a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .875rem;
}
.footer-communes-list a:hover { color: var(--white); text-decoration: underline; }

/* ---------- Listes de communes et de prestations dans le contenu ----------
   Sans ces règles les liens se collaient les uns aux autres : c'est le
   maillage interne des pages de commune, il doit se cliquer. */
.commune-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}
.commune-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: var(--radius-full);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: var(--transition);
}
a.commune-link:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.commune-links--inline { margin-top: 1rem; gap: .4rem; }
.commune-links--inline .commune-link {
  padding: .3rem .7rem;
  font-size: .78125rem;
  background: var(--gray-50);
  border-color: var(--gray-200);
  color: var(--gray-600);
}
.commune-link--soon {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
.commune-link--all {
  background: transparent;
  border-color: var(--blue-300);
  color: var(--blue-600);
  font-weight: 600;
}

/* ---------- Gabarit commune : les quatre métiers ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.services-grid .service-card { cursor: default; }
.services-grid .service-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--gray-200); }
.services-grid .service-card h3 { margin-top: 0; font-size: 1.15rem; color: var(--gray-900); }
.services-grid .service-card p { font-size: .9rem; color: var(--gray-500); }
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  background: var(--blue-100);
  color: var(--blue-700);
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
  transition: var(--transition);
}
.service-link:hover { gap: .8rem; color: var(--blue-500); }
.service-link i { font-size: .75rem; }

/* ---------- Atouts ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem 2rem;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.feature-item > i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 1rem;
}
.feature-item h4 { margin: 0 0 .35rem; font-size: 1rem; color: var(--gray-900); }
.feature-item p { margin: 0; font-size: .9rem; color: var(--gray-500); }

.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.feature-card h3, .feature-card h4 { margin-top: 0; color: var(--gray-900); }
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  font-size: 1.15rem;
  background: var(--blue-100);
  color: var(--blue-700);
}

.content-block { max-width: 780px; margin: 0 auto; }
.content-block h3 { margin-top: 2rem; }
.content-block > *:first-child { margin-top: 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ---------- Chiffres ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

/* ---------- Avis ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.testimonial {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.testimonial p { margin: 0; color: var(--gray-600); font-style: italic; }
.testimonial .stars { color: var(--amber-400); font-size: .9rem; letter-spacing: .1em; }
.testimonial .author {
  margin-top: auto;
  font-weight: 600;
  font-size: .875rem;
  color: var(--gray-900);
  font-style: normal;
}

/* ---------- Questions fréquentes ---------- */
.faq-list { display: flex; flex-direction: column; gap: .75rem; max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-xs);
}
.faq-question {
  margin: 0 0 .6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.45;
}
.faq-answer { margin: 0; font-size: .925rem; color: var(--gray-600); }

/* ---------- Boutons et appels manquants ---------- */
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn-outline {
  background: transparent;
  color: var(--blue-600);
  border: 1px solid var(--blue-300);
}
.btn-outline:hover {
  background: var(--blue-50);
  border-color: var(--blue-600);
  color: var(--blue-700);
  transform: translateY(-1px);
}

/* ---------- Accordéon : le conteneur manquait ---------- */
.accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }

/* ---------- Suite du réagencement du plan de page ----------
   Les chiffres des bandeaux ne sont plus des <h3> et les titres de colonne du
   pied de page sont passés en <h3> : le plan descend enfin marche par marche.
   Ces règles reprennent, à l'identique, l'allure qu'ils avaient. */
.stat-item .stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue-500), var(--cyan-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-dark .stat-item .stat-value {
  background: linear-gradient(135deg, var(--blue-400), var(--cyan-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer h3 {
  color: var(--white);
  font-size: .85rem;
  margin-bottom: 1.25rem;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.feature-item h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--gray-900); }

/* ---------- Contraste ----------
   Relevé au contrôle d'accessibilité : ces trois teintes passaient sous le
   seuil lisible (4,5:1) sur fond clair, en petit corps. Même bleu, un cran
   plus foncé : rien ne change à l'œil, tout le monde peut lire. */
.fil-ariane li,
.fil-ariane a { color: var(--gray-600); }             /* 4,5 → 7,0 sur #f7f8fa */
.section-header .subtitle,
.service-link { color: var(--blue-800); }             /* 3,8 → 6,5 sur blanc */
.service-link:hover { color: var(--blue-700); }
.commune-link--soon { color: var(--gray-600); }       /* 2,3 → 7,0 sur #f1f5f9 */

/* Le pied de page et la barre d'appel mobile étaient dans le même cas : texte
   trop pâle sur fond sombre, et blanc sur un bleu trop clair. Un cran d'écart,
   la teinte ne bouge pas. */
.footer p,
.footer-links a,
.footer-contact-item,
.footer-contact-item a,
.footer-bottom,
.footer-bottom a,
.footer-bottom time,
.footer-communes-list a { color: var(--gray-400); }   /* 3,8 → 7,0 sur #0f172a */
.footer-links a:hover,
.footer-contact-item a:hover,
.footer-bottom a:hover,
.footer-communes-list a:hover { color: var(--white); }
.mobile-phone-sticky .sticky-devis { background: var(--blue-800); }  /* 3,8 → 7,8 */

/* ---------- Le logo du pied de page ----------
   La feuille historique repeint le logo du pied de page avec
   « brightness(0) invert(1) ». Le filtre suppose un fond transparent ; celui du
   logo est blanc et opaque, si bien qu'il repeignait le fond en blanc lui aussi
   et que le pied de page affichait un carré blanc plein sur les 42 pages.
   images/logo-pied.png est déjà blanc sur fond transparent : plus de filtre. */
.footer .logo-img,
.logo-img--footer { filter: none; }

/* ---------- Cibles tactiles ----------
   Relevé sur les 42 pages en mobile : le bouton du menu mesurait 30 × 30 px,
   le fil d'Ariane 42 × 21, les puces de maillage 27 px de haut. En dessous de
   44 px, un doigt vise à côté. Ce sont les liens qui mènent aux pages qui
   signent : on ne les rate pas. */
@media (max-width: 768px) {
  .mobile-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .fil-ariane ol { padding: .35rem 0; }
  .fil-ariane li { min-height: 44px; align-items: center; }
  .fil-ariane a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .15rem;
  }
  .commune-link { min-height: 44px; padding: .6rem 1rem; }
  .commune-links--inline .commune-link { min-height: 44px; padding: .5rem .85rem; }
  .footer-links a,
  .footer-communes-list a,
  .footer-contact-item a,
  .footer-bottom a,
  .service-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-links li { margin-bottom: 0; }
  .footer-bottom p { line-height: 2.4; }
  /* Les boutons des cartes — « En savoir plus », « Chaudière en panne » —
     mesuraient 30 px de haut. Ce sont eux qui mènent aux pages de prestation. */
  .btn-sm { min-height: 44px; }
}

/* ---------- Longueur de ligne ----------
   Les réponses aux questions fréquentes couraient sur 97 caractères en
   ordinateur ; au-delà de 85, l'œil perd le début de la ligne suivante. Le
   reste du site tient déjà dans ses colonnes. */
.accordion-content p,
.accordion-content li,
.accordion-body p,
.accordion-body li,
.faq-answer { max-width: 68ch; }

/* Les paragraphes posés seuls dans une section couraient sur toute la largeur
   du conteneur — jusqu'à 125 caractères. Les bandeaux sont exclus : leur texte
   d'accroche est court et centré, il n'a pas ce défaut. */
main section:not([class*="hero"]) > .container > p,
main section:not([class*="hero"]) > .container > ul,
main .page-content > p { max-width: 68ch; }

@media (max-width: 640px) {
  .fil-ariane { font-size: .8125rem; }
  .fil-ariane ol { padding: .7rem 0; }
  .features-grid, .services-grid, .testimonials-grid, .card-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}