/* ============================================================
   ARTISAN DEMOL - Thème sur mesure (AES Communication)
   Charte : rouge #E30613 / noir / crème - Polices Playfair, Caveat, Barlow
   ============================================================ */

:root {
  --rouge: #E30613;
  --rouge-fonce: #b8050f;
  --noir: #141414;
  --gris-fonce: #2b2b2b;
  --gris: #5f5f5f;
  --creme: #f7f2ea;
  --blanc: #ffffff;
  --ombre: 0 10px 30px rgba(20, 20, 20, .10);
  --radius: 12px;
}

.page-maquette * { margin: 0; padding: 0; box-sizing: border-box; }
.page-maquette { scroll-behavior: smooth; }

body.page-maquette {
  font-family: "Barlow", "Segoe UI", Arial, sans-serif;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--gris-fonce);
  background: var(--blanc);
}

.page-maquette h1, .page-maquette h2, .page-maquette h3, .page-maquette h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.18;
  color: var(--noir);
}

.page-maquette img { max-width: 100%; display: block; height: auto; }
.page-maquette a { color: var(--rouge); }
.page-maquette a:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }

.kicker {
  display: block;
  font-family: "Caveat", cursive;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--rouge);
  margin-bottom: 4px;
}

.conteneur { width: 90%; max-width: 1400px; margin: 0 auto; padding: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--noir); color: var(--blanc);
  padding: 10px 18px; z-index: 200;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ BARRE HAUTE + EN-TÊTE ============ */
.barre-haute { background: var(--noir); color: var(--blanc); font-size: .92rem; padding: 7px 0; }
.barre-haute .conteneur { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; justify-content: space-between; }
.barre-haute a { color: var(--blanc); text-decoration: none; font-weight: 600; }
.barre-haute a:hover { color: #ffb3b8; }

.entete {
  background: var(--blanc);
  border-bottom: 1px solid #e8e5e0;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(20,20,20,.06);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.logo-lien { display: inline-flex; align-items: center; }
.logo-lien img { height: 58px; width: auto; }

.nav-principale ul { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav-principale a {
  display: block; padding: 10px 13px;
  text-decoration: none; color: var(--noir);
  font-weight: 600; font-size: 1rem; border-radius: 6px;
}
.nav-principale a:hover, .nav-principale a[aria-current="page"] { color: var(--rouge); }
.nav-principale a.bouton { color: var(--blanc); margin-left: 8px; }

.bouton {
  display: inline-block;
  background: var(--rouge); color: var(--blanc) !important;
  padding: 13px 30px; border-radius: 999px;
  text-decoration: none; font-weight: 700;
  font-size: 1.02rem; letter-spacing: .2px;
  border: 0; cursor: pointer;
  transition: background .15s, transform .15s;
}
.bouton:hover { background: var(--rouge-fonce); transform: translateY(-1px); }
.bouton--noir { background: var(--noir); }
.bouton--noir:hover { background: var(--gris-fonce); }
.bouton--contour { background: transparent; border: 2px solid var(--blanc); }
.bouton--contour:hover { background: var(--blanc); color: var(--noir) !important; }

.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-burger {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px;
  width: 46px; height: 46px;
}
.menu-burger span {
  display: block; width: 26px; height: 3px;
  background: var(--noir); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
/* Le burger se transforme en croix quand le menu est ouvert */
.menu-toggle:checked ~ .menu-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle:checked ~ .menu-burger span:nth-child(2) { opacity: 0; }
.menu-toggle:checked ~ .menu-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.menu-toggle:focus-visible ~ .menu-burger { outline: 3px solid var(--rouge); outline-offset: 2px; border-radius: 6px; }

/* ============ HÉROS ============ */
.heros {
  position: relative;
  display: flex; align-items: center;
  min-height: 640px;
  min-height: min(86vh, 780px);
  color: var(--blanc);
  isolation: isolate;
  overflow: hidden;
  padding: 80px 0;
  background: var(--gris-fonce);
}
/* Le sélecteur est qualifié par .page-maquette : sinon la règle
   « .page-maquette img { height: auto } » l'emporte et la photo s'affiche
   à sa hauteur naturelle, ce qui n'affiche que le haut de l'image. */
.page-maquette .heros-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, center center);
}
.heros::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,.2) 100%);
}
.heros h1 { color: var(--blanc); font-size: clamp(2.1rem, 4.6vw, 3.3rem); max-width: 24ch; }
.heros .surtitre {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-weight: 600; font-size: 1.9rem; line-height: 1.1;
  color: #ffb3b8; margin-bottom: 10px;
}
.heros p { max-width: 64ch; margin: 18px 0 30px; font-size: 1.1rem; }
.heros .actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Les héros de page intérieure reprennent la hauteur de celui de l'accueil.
   Plus bas, les boutons se retrouvaient collés au bas du bandeau sur les
   écrans peu hauts (429 px de bandeau pour 411 px de contenu). */
.heros--page {
  min-height: 640px;
  min-height: min(86vh, 780px);
  padding: 80px 0;
}
.heros--simple {
  min-height: 300px;
  min-height: min(42vh, 360px);
  padding: 55px 0;
  background: var(--noir);
}

.fil-ariane { font-size: .92rem; margin-bottom: 22px; }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fil-ariane li + li::before { content: "›"; margin-right: 8px; opacity: .7; }
.fil-ariane a { color: var(--blanc); }

/* Braises animées (option choisie par le client) */
.braises { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.braise {
  position: absolute; bottom: -14px;
  left: var(--x, 50%);
  width: var(--t, 8px); height: var(--t, 8px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff4da 0%, #ffc247 38%, #ff7a18 68%, #e30613 88%, transparent 100%);
  box-shadow: 0 0 12px 3px rgba(255, 138, 30, .55);
  opacity: 0;
  animation: braise-monte var(--d, 8s) linear var(--r, 0s) infinite;
}
@keyframes braise-monte {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  6%   { opacity: 1; }
  50%  { transform: translate(calc(var(--dev, 18px) * .55), -46vh) scale(.8); opacity: .9; }
  100% { transform: translate(var(--dev, -14px), -92vh) scale(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .braise { display: none; } }

/* ============ BANDEAU ATOUTS ============ */
.atouts { background: var(--creme); padding: 26px 0 54px; }
.atouts ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; text-align: center;
  width: 90%; max-width: 1400px; margin: 0 auto; padding: 0;
}
.atouts li {
  background: var(--noir); color: var(--blanc);
  border-radius: var(--radius);
  padding: 46px 18px 26px;
  margin-top: 28px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.14rem; font-weight: 600; line-height: 1.3;
  box-shadow: var(--ombre);
}
.atouts li:nth-child(even) { background: var(--blanc); color: var(--noir); }
.atouts svg {
  display: block;
  width: 60px; height: 60px;
  margin: -76px auto 18px;
  padding: 15px;
  box-sizing: border-box;
  background: var(--rouge); color: var(--blanc);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(227, 6, 19, .35);
}

/* ============ SECTIONS ============ */
.section { padding: 72px 0; }
.section--creme { background: var(--creme); }
.section h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.section h2::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  background: var(--rouge);
  margin-top: 10px; border-radius: 2px;
}
.centre { text-align: center; }
.centre h2::after { margin-left: auto; margin-right: auto; }
.intro-section { max-width: 76ch; margin: 0 auto 40px; color: var(--gris); }
.section p + p { margin-top: 12px; }

/* ============ CARTES MÉTIERS / PRESTATIONS ============ */
.cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 44px; }
.cartes--trois { grid-template-columns: repeat(3, 1fr); }
.carte {
  background: var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombre);
  display: flex; flex-direction: column;
  transition: transform .2s;
  text-align: left;
}
.carte:hover { transform: translateY(-5px); }
.carte img { height: 230px; width: 100%; object-fit: cover; }
.carte-corps { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.carte h3 { font-size: 1.5rem; margin-bottom: 10px; }
.carte p { flex: 1; color: var(--gris); }
.carte .lire-plus {
  margin-top: 18px; font-weight: 700;
  text-decoration: none; color: var(--rouge);
  text-transform: uppercase; font-size: .95rem; letter-spacing: .5px;
}
.carte .lire-plus::after { content: " →"; }
.carte .lire-plus:hover { text-decoration: underline; }

/* Petites cartes de prestations (couverture, ramonage) */
.mini-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.mini-carte {
  background: var(--blanc); border-radius: var(--radius);
  box-shadow: var(--ombre); padding: 26px 24px 24px;
  border-top: 4px solid var(--rouge);
}
.section--creme .mini-carte { background: var(--blanc); }
.mini-carte h3 { font-size: 1.22rem; margin-bottom: 8px; }
.mini-carte p { color: var(--gris); font-size: .95rem; }
.mini-carte .numero {
  font-family: "Caveat", cursive; font-size: 1.6rem; color: var(--rouge);
  display: block; line-height: 1; margin-bottom: 6px;
}

/* ============ ZIGZAG ============ */
.zigzag { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.zigzag + .zigzag { margin-top: 72px; }
.zigzag--inverse .zigzag-media { order: 2; }
.zigzag-media img { border-radius: var(--radius); box-shadow: var(--ombre); width: 100%; height: 400px; object-fit: cover; }
.zigzag h2 { margin-bottom: 18px; }
.zigzag h3 { font-size: 1.35rem; margin: 22px 0 8px; }
.zigzag .bouton { margin-top: 24px; }
/* Accueil : les deux titres « métiers » en rouge et en 3vw (demande du 27/07) */
.page-template-template-accueil .zigzag h3 { font-size: 3vw; color: var(--rouge); }

/* Listes à puces stylées */
.liste-points { list-style: none; margin: 18px 0 0; }
.liste-points li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.liste-points li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #ff9a2e 0%, var(--rouge) 70%);
}
.liste-points strong { color: var(--noir); }

/* ============ GALERIE ============ */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.galerie figure { border-radius: var(--radius); overflow: hidden; background: var(--blanc); box-shadow: var(--ombre); margin: 0; }
.galerie img { width: 100%; height: 250px; object-fit: cover; transition: transform .25s; }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { padding: 12px 16px; font-size: .95rem; font-weight: 600; color: var(--gris-fonce); }

/* ============ ZONE D'INTERVENTION ============ */
.zone { display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; align-items: center; }
.zone img { border-radius: var(--radius); box-shadow: var(--ombre); }
.communes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.communes li { background: var(--blanc); border: 1px solid #e3ded7; padding: 7px 16px; border-radius: 30px; font-weight: 600; font-size: .95rem; }
.communes li.principale { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }
.note-zone { margin-top: 18px; font-size: .92rem; color: var(--gris); font-style: italic; }

/* ============ AVIS ============ */
.avis-bloc .etoiles { color: #f5b301; font-size: 1.7rem; letter-spacing: 4px; margin: 14px 0; }
.avis-widget { margin-top: 36px; }

/* ============ BANDEAU CONTACT ============ */
.bandeau-cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--noir); color: var(--blanc);
  text-align: center; padding: 78px 20px;
}
.page-maquette .cta-fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bandeau-cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,20,20,.93), rgba(20,20,20,.8));
}
.bandeau-cta h2 { color: var(--blanc); }
.bandeau-cta h2::after { margin-left: auto; margin-right: auto; }
.bandeau-cta .kicker { color: #ffb3b8; }
.bandeau-cta p { max-width: 62ch; margin: 16px auto 30px; }
.bandeau-cta .tel {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.3rem; font-weight: 700; color: var(--blanc);
  text-decoration: none; display: inline-block; margin-bottom: 22px;
}
.bandeau-cta .tel:hover { color: #ffb3b8; }
.bandeau-cta .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ CONTACT ============ */
.grille-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 54px; align-items: start; }
.bloc-coordonnees { display: grid; gap: 18px; }
.coordonnee {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--blanc); padding: 20px 22px;
  border-radius: var(--radius); box-shadow: var(--ombre);
}
.coordonnee svg { flex: none; width: 26px; height: 26px; margin-top: 3px; }
.coordonnee h3 { font-size: 1.15rem; margin-bottom: 2px; }
.coordonnee a { color: var(--gris-fonce); text-decoration: none; font-weight: 600; }
.coordonnee a:hover { color: var(--rouge); }
.formulaire-cadre { background: var(--blanc); padding: 32px; border-radius: var(--radius); box-shadow: var(--ombre); }
.formulaire-cadre h2 { font-size: 1.6rem; }
.formulaire-cadre .forminator-custom-form { margin-top: 18px; font-size: .95rem; }

/* Formulaire Forminator : écriture en taille paragraphe (demande Nathalie) */
.formulaire-cadre .forminator-custom-form .forminator-label,
.formulaire-cadre .forminator-custom-form label.forminator-label {
  font-size: .95rem !important;
  font-weight: 600 !important;
}
.formulaire-cadre .forminator-custom-form input,
.formulaire-cadre .forminator-custom-form select,
.formulaire-cadre .forminator-custom-form textarea,
.formulaire-cadre .forminator-custom-form .forminator-input,
.formulaire-cadre .forminator-custom-form .forminator-textarea,
.formulaire-cadre .forminator-custom-form .forminator-select2 {
  font-size: .95rem !important;
}
.formulaire-cadre .forminator-custom-form .forminator-row { margin-bottom: 16px !important; }

/* ============ PROJETS (réalisations) ============ */
.projet { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.projet + .projet { margin-top: 64px; }
.projet:nth-child(even) .projet-media { order: 2; }
.projet-media img { border-radius: var(--radius); box-shadow: var(--ombre); width: 100%; height: 360px; object-fit: cover; }
.projet .lieu {
  display: inline-block; background: var(--creme);
  border-radius: 999px; padding: 5px 16px;
  font-weight: 600; font-size: .92rem; margin: 10px 0 12px;
}

/* ============ PAGES LÉGALES ============ */
.page-texte { max-width: 860px; margin: 0 auto; }
.page-texte h2 { font-size: 1.55rem; margin: 40px 0 12px; }
.page-texte h2:first-child { margin-top: 0; }
.page-texte h3 { font-size: 1.25rem; margin: 28px 0 10px; }
.page-texte h4 { font-size: 1.08rem; margin: 22px 0 6px; }
.page-texte p + p { margin-top: 12px; }
.page-texte ul { margin: 12px 0 12px 22px; }
.page-texte li { margin-bottom: 6px; }
.page-texte a { color: var(--rouge); }
.page-texte strong { color: var(--noir); }

/* ============ BLOG ============ */
.article-meta { color: var(--gris); font-size: .95rem; margin-bottom: 26px; }
.article-contenu { max-width: 800px; margin: 0 auto; }
.article-contenu h2 { font-size: 1.6rem; margin: 38px 0 12px; }
.article-contenu h3 { font-size: 1.3rem; margin: 28px 0 10px; }
.article-contenu p + p { margin-top: 14px; }
.article-contenu ul, .article-contenu ol { margin: 14px 0 14px 24px; }
.article-contenu li { margin-bottom: 8px; }
.article-contenu img { border-radius: var(--radius); margin: 22px auto; }
.article-contenu blockquote {
  border-left: 4px solid var(--rouge);
  background: var(--creme);
  padding: 16px 22px; margin: 22px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.carte .article-date {
  font-family: "Caveat", cursive; font-size: 1.25rem;
  color: var(--rouge); display: block; margin-bottom: 4px;
}
.pagination-blog { display: flex; gap: 10px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.pagination-blog .page-numbers {
  display: inline-block; padding: 9px 17px;
  background: var(--blanc); border: 1px solid #e3ded7;
  border-radius: 999px; text-decoration: none;
  color: var(--noir); font-weight: 600;
}
.pagination-blog .page-numbers.current, .pagination-blog .page-numbers:hover {
  background: var(--rouge); color: var(--blanc); border-color: var(--rouge);
}

/* ============ PIED DE PAGE ============ */
.pied { background: var(--noir); color: #c9c9c9; padding: 60px 0 0; font-size: .98rem; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; padding-bottom: 44px; }
.pied img { height: 92px; width: auto; margin-bottom: 16px; }
.logo-pied { display: inline-block; }
.logo-pied:hover img { opacity: .85; }
.pied h3 {
  font-family: "Barlow", "Segoe UI", Arial, sans-serif;
  color: var(--blanc); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 14px;
}
.pied ul { list-style: none; }
.pied li { margin-bottom: 8px; }
.pied a { color: #c9c9c9; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied .tel-pied { font-size: 1.25rem; font-weight: 700; color: var(--blanc); }
.pied-bas {
  border-top: 1px solid #333;
  padding: 18px 0; font-size: .88rem;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
.pied-bas a { color: #a5a5a5; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .cartes, .cartes--trois, .galerie, .mini-cartes { grid-template-columns: repeat(2, 1fr); }
  .zigzag, .zone, .grille-contact, .projet { grid-template-columns: 1fr; gap: 32px; }
  .zigzag--inverse .zigzag-media, .projet:nth-child(even) .projet-media { order: 0; }
  .atouts ul { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .menu-burger { display: flex; }
  .nav-principale {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc);
    border-bottom: 1px solid #e8e5e0;
    box-shadow: 0 14px 24px rgba(20,20,20,.18);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .menu-toggle:checked ~ .nav-principale { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; padding: 8px 20px 20px; }
  .nav-principale li + li { border-top: 1px solid #f0ece6; }
  .nav-principale a { padding: 15px 8px; font-size: 1.08rem; }
  .nav-principale a.bouton { margin: 14px 0 4px; text-align: center; border-top: 0; }
  .nav-principale li:has(a.bouton) { border-top: 0; }
  .barre-haute .atout-texte { display: none; }
  .heros, .heros--page { min-height: min(78vh, 620px); padding: 60px 0; }
  .heros--simple { min-height: 220px; padding: 40px 0; }
  /* Sur mobile, le sujet de la photo est recadré au centre pour rester visible */
  .page-maquette .heros-fond { object-position: var(--cadrage-mobile, center center); }
  /* 3vw deviendrait illisible sur un téléphone : on repasse à une taille fixe */
  .page-template-template-accueil .zigzag h3 { font-size: 1.5rem; }
}
@media (max-width: 540px) {
  .cartes, .cartes--trois, .galerie, .mini-cartes { grid-template-columns: 1fr; }
  .atouts ul { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .zigzag-media img { height: 260px; }
}