/* Clair de Lame : feuille de style unique, mobile d'abord. */
@import url("avis-comparateur.css");

:root {
  /* Nuancier dérivé des photos de chantier (voir DA.md). */
  --bois-encre: #251914;
  --bois-brun: #774333;
  --bois-brun-clair: #874732;
  --bois-patine: #8a7764;
  --bois-miel: #caab88;
  --bois-huile: #553732;
  --bois-creme: #fbf8f2;
  --bois-papier: #f1e9dd;
  --bois-ligne: #ded2c2;
  --bois-encre-douce: #554941;

  /* Alias historiques conservés pour les gabarits et l'unité G7. */
  --pin-900: var(--bois-encre);
  --pin-800: #38241c;
  --pin-700: var(--bois-brun);
  --pin-100: #eee3d7;
  --miel-500: var(--bois-miel);
  --miel-400: #ddc09e;
  --miel-600: var(--bois-brun);
  --miel-100: #f3e7d8;
  --papier: var(--bois-creme);
  --papier-2: var(--bois-papier);
  --blanc: #ffffff;
  --encre: #29221e;
  --gris: var(--bois-encre-douce);
  --ligne: var(--bois-ligne);
  --focus: #1f6feb;

  /* Habillage du comparateur et des avis (avis-comparateur.css) par les jetons bois. */
  --couleur-fond-photo: var(--bois-patine);
  --couleur-etiquette-avant: rgba(37, 25, 20, 0.82);
  --couleur-etiquette-avant-texte: var(--bois-creme);
  --couleur-etiquette-apres: var(--bois-miel);
  --couleur-etiquette-apres-texte: var(--bois-encre);
  --couleur-poignee: var(--bois-creme);
  --couleur-focus: var(--focus);
  --couleur-badge-fond: rgba(202, 171, 136, 0.12);
  --couleur-badge-bord: rgba(202, 171, 136, 0.45);
  --couleur-badge-fond-survol: rgba(202, 171, 136, 0.22);
  --couleur-badge-texte: #f0e8df;
  --couleur-etoiles-claires: var(--bois-miel);
  --couleur-etoiles: var(--bois-brun);
  --couleur-texte: var(--encre);
  --couleur-texte-doux: var(--bois-encre-douce);
  --couleur-titre: var(--bois-encre);
  --couleur-carte: var(--blanc);
  --couleur-ligne: var(--bois-ligne);
  --couleur-ligne-forte: var(--bois-brun);
  --rayon-grand: var(--r-l);
  --rayon-moyen: var(--r-m);
  --rayon-pilule: var(--r-s);
  --ombre-douce: var(--ombre);
  --ombre-poignee: 0 4px 14px rgba(37, 25, 20, 0.35);

  --police-texte: ui-sans-serif, system-ui, -apple-system, "Avenir Next", "Segoe UI", sans-serif;
  --police-titre: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --police: var(--police-texte);
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --t-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --t-2xl: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);

  --r-s: 5px;
  --r-m: 10px;
  --r-l: 16px;
  --ombre: 0 1px 2px rgba(37, 25, 20, 0.06), 0 8px 24px rgba(37, 25, 20, 0.08);
  --ombre-forte: 0 2px 4px rgba(37, 25, 20, 0.08), 0 20px 48px rgba(37, 25, 20, 0.16);
  --largeur: 1180px;
  --gouttiere: clamp(1.1rem, 4vw, 2rem);
  --barre-mobile: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; scroll-padding-bottom: calc(var(--barre-mobile) + 16px); }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  text-rendering: optimizeLegibility;
  padding-bottom: var(--barre-mobile);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--pin-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--pin-900); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 0.5em; font-weight: 650; color: var(--pin-900); text-wrap: balance; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.035em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 650; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--pin-900); color: #fff; padding: 0.6rem 1rem; border-radius: var(--r-s); }
.lien-evitement:focus { top: 1rem; color: #fff; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.conteneur-etroit { max-width: 760px; }
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-serree { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-papier { background-color: var(--papier-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='%238a7764' stroke-opacity='.075' stroke-width='.65'%3E%3Cpath d='M-20 22C40 9 65 38 122 23s94-9 126 1 54 10 92-1M-20 47c47-12 78 10 132 1s80-18 130-1 72 12 108 0M-20 79c42-9 71 12 115 1s92-15 137-2 63 10 98-2M-20 112c53-13 78 10 130 0s82-16 128-2 62 11 92 0M-20 146c48-11 83 11 130 1s91-17 136-2 65 10 94-2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 320px 180px; }
.section-pin { background: var(--pin-900); color: #eee5dc; }
.section-pin h2, .section-pin h3 { color: #fff; }
.section-pin a:not(.bouton) { color: var(--miel-400); }
.surtitre { display: inline-block; font-size: var(--t-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.12em; color: var(--miel-600); margin-bottom: 0.9rem; }
.section-pin .surtitre { color: var(--miel-400); }
.intro { font-size: var(--t-l); color: var(--gris); max-width: 60ch; line-height: 1.5; }
.section-pin .intro { color: #d6c8ba; }
.entete-section { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section.centre { margin-left: auto; margin-right: auto; text-align: center; }
.entete-section.centre .intro { margin-left: auto; margin-right: auto; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.8rem 1.4rem; border-radius: 7px; border: 2px solid transparent;
  font: inherit; font-weight: 650; font-size: var(--t-m); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.bouton svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton-principal { background: var(--bois-brun); color: #fff; box-shadow: 0 5px 14px rgba(37, 25, 20, 0.18); }
.bouton-principal:hover { background: var(--bois-huile); color: #fff; transform: translateY(-1px); }
.bouton-secondaire { background: transparent; color: var(--pin-800); border-color: var(--bois-brun); }
.bouton-secondaire:hover { background: var(--pin-800); color: #fff; }
.section-pin .bouton-secondaire, .heros .bouton-secondaire { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.section-pin .bouton-secondaire:hover, .heros .bouton-secondaire:hover { background: #fff; color: var(--pin-900); }
.bouton-pin { background: var(--pin-800); color: #fff; }
.bouton-pin:hover { background: var(--pin-900); color: #fff; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Bandeau crédit d'impôt */
.bandeau-credit { background: var(--bois-miel); color: var(--pin-900); font-size: var(--t-s); }
.bandeau-credit a { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.55rem var(--gouttiere); color: inherit; text-decoration: none; text-align: center; line-height: 1.35; }
.bandeau-credit strong { font-weight: 750; }
.bandeau-credit .fleche { transition: transform 0.2s ease; }
.bandeau-credit a:hover .fleche { transform: translateX(3px); }
.pastille-sap { display: none; flex: none; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.04em; padding: 0.2rem 0.5rem; border: 1.5px solid currentColor; border-radius: 6px; line-height: 1.1; text-transform: uppercase; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 242, 0.94); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.entete.defile { border-bottom-color: var(--ligne); box-shadow: 0 4px 20px rgba(28, 20, 16, 0.06); }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--pin-900); }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo-texte { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nom { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; }
.logo-sous { white-space: nowrap; font-size: 0.72rem; color: var(--gris); letter-spacing: 0.02em; margin-top: 0.2rem; }
/* Mobile : la ville passe sous l'accroche au lieu d'être coupée */
@media (max-width: 520px) {
  .logo-texte { min-width: 0; }
  .logo-ville { display: block; margin-top: 0.1rem; }
  .logo-sep { display: none; }
}
.nav-principale { display: none; }
.nav-principale ul { display: flex; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.nav-principale a { display: block; white-space: nowrap; padding: 0.55rem 0.6rem; border-radius: var(--r-s); text-decoration: none; color: var(--encre); font-weight: 550; font-size: var(--t-s); }
.nav-principale a:hover { background: var(--papier-2); color: var(--pin-900); }
.nav-principale a[aria-current="page"] { color: var(--pin-700); box-shadow: inset 0 -2px 0 var(--miel-500); border-radius: 0; }
.entete-actions { display: flex; align-items: center; gap: 0.6rem; }
.entete-tel { display: none; font-weight: 650; text-decoration: none; color: var(--pin-800); white-space: nowrap; font-size: var(--t-s); }
.entete-tel svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.3rem; }
.entete .bouton { white-space: nowrap; min-height: 42px; padding: 0.55rem 1rem; font-size: var(--t-s); display: none; }
.bouton-menu { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--blanc); color: var(--pin-900); cursor: pointer; }
.bouton-menu svg { width: 22px; height: 22px; }
.menu-mobile { display: none; border-top: 1px solid var(--ligne); background: var(--papier); }
.menu-mobile.ouvert { display: block; animation: glisse 0.22s ease; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0.5rem var(--gouttiere) 1.2rem; }
.menu-mobile li + li { border-top: 1px solid var(--ligne); }
.menu-mobile a { display: flex; justify-content: space-between; padding: 0.95rem 0.2rem; text-decoration: none; color: var(--encre); font-weight: 600; font-size: 1.05rem; }
.menu-mobile a[aria-current="page"] { color: var(--pin-700); }
@keyframes glisse { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Héros */
.heros { position: relative; background: var(--pin-900); color: #f0e8df; overflow: hidden; }
.heros::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 85% 10%, rgba(202, 171, 136, 0.2), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(85, 55, 50, 0.78), transparent 70%); pointer-events: none; }
.heros::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='%23e8d3bc' stroke-opacity='.38' stroke-width='.7'%3E%3Cpath d='M-20 22C40 9 65 38 122 23s94-9 126 1 54 10 92-1M-20 47c47-12 78 10 132 1s80-18 130-1 72 12 108 0M-20 79c42-9 71 12 115 1s92-15 137-2 63 10 98-2M-20 112c53-13 78 10 130 0s82-16 128-2 62 11 92 0M-20 146c48-11 83 11 130 1s91-17 136-2 65 10 94-2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 320px 180px; mix-blend-mode: soft-light; }
.heros-grille { position: relative; display: grid; gap: 2.2rem; padding-top: clamp(2.2rem, 6vw, 5rem); padding-bottom: clamp(2.8rem, 6vw, 5rem); align-items: center; }
.heros-grille > * { min-width: 0; }
.heros h1 { color: #fff; margin-bottom: 0.45em; }
.heros h1 .accent { color: var(--miel-400); }
.heros .intro { color: #dccfc2; font-size: var(--t-l); margin-bottom: 1.6rem; }
.heros-points { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.55rem; font-size: var(--t-s); color: #e3d8cc; }
.heros-points li { display: flex; gap: 0.6rem; align-items: flex-start; }
.heros-points svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; color: var(--miel-400); }
.fil-ariane { position: relative; font-size: var(--t-xs); color: #bba997; padding-top: 1.2rem; }
.fil-ariane ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fil-ariane li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.6; }
.fil-ariane a { color: #e3d8cc; text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; color: #fff; }
.heros-simple .heros-grille { padding-top: clamp(1.6rem, 4vw, 3rem); padding-bottom: clamp(2.4rem, 5vw, 4rem); }

/* Comparateur avant / après */
.comparateur { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre-forte); aspect-ratio: 3 / 2; background: #6d6a63; isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur .cote-apres { clip-path: inset(0 0 0 var(--pos, 50%)); }
.comparateur input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.comparateur .poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; z-index: 2; pointer-events: none; box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); }
.comparateur .poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1f18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.comparateur input:focus-visible ~ .poignee::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.etiquette-ba { position: absolute; top: 0.9rem; z-index: 2; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(28, 20, 16, 0.78); color: #fff; pointer-events: none; }
.etiquette-ba.avant { left: 0.9rem; }
.etiquette-ba.apres, .etiquette-ba.pendant { right: 0.9rem; background: rgba(226, 160, 79, 0.95); color: var(--pin-900); }
.etiquette-ba.pendant { background: rgba(28, 20, 16, 0.78); color: #fff; }
.legende { font-size: var(--t-xs); color: var(--gris); margin-top: 0.7rem; }
.heros .legende { color: #bba997; }

/* Bande de confiance */
.confiance { background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.confiance ul { list-style: none; margin: 0; padding: 1.2rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.confiance li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-s); line-height: 1.35; }
.confiance svg { flex: none; width: 1.6rem; height: 1.6rem; color: var(--pin-700); }
.confiance strong { display: block; color: var(--pin-900); }
.confiance span { color: var(--gris); font-size: var(--t-xs); }

/* Cartes */
.grille { display: grid; gap: 1.2rem; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: clamp(1.3rem, 3vw, 1.8rem); box-shadow: var(--ombre); }
.carte h3 { margin-bottom: 0.4em; }
.carte p:last-child { margin-bottom: 0; }
.carte-service { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.carte-service:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.carte-service img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.carte-service .corps { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte-service .prix-mini { font-size: var(--t-s); color: var(--gris); margin-bottom: 1rem; }
.carte-service .prix-mini strong { color: var(--pin-900); }
.carte-service .lien-fleche { margin-top: auto; }
.lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; text-decoration: none; color: var(--pin-700); }
.lien-fleche::after { content: "→"; transition: transform 0.2s ease; }
.lien-fleche:hover::after { transform: translateX(3px); }
.lien-etendu::before { content: ""; position: absolute; inset: 0; }
.carte-service { position: relative; }

/* Étapes */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: etape; }
.etapes li { position: relative; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 1.3rem 1.3rem 1.3rem 4.4rem; counter-increment: etape; }
.etapes li::before { content: counter(etape); position: absolute; left: 1.2rem; top: 1.2rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--pin-800); color: #fff; font-weight: 750; font-size: 1rem; }
.etapes h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.etapes p { margin: 0; color: var(--gris); font-size: var(--t-s); }
.section-pin .etapes li { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.section-pin .etapes li::before { background: var(--miel-500); color: var(--pin-900); }
.section-pin .etapes p { color: #cbbcad; }

/* Module prix et crédit d'impôt */
.carte-prix { background: var(--blanc); border-radius: var(--r-l); border: 1px solid var(--ligne); box-shadow: var(--ombre-forte); overflow: hidden; }
.carte-prix-tete { background: var(--pin-800); color: #fff; padding: 1.4rem 1.6rem; }
.carte-prix-tete h3 { color: #fff; margin: 0; font-size: 1.2rem; }
.carte-prix-tete p { margin: 0.3rem 0 0; color: #d6c8ba; font-size: var(--t-s); }
.carte-prix-corps { padding: 1.6rem; }
.prix-ligne { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.prix-de { font-size: var(--t-s); color: var(--gris); }
.prix-montant { font-size: clamp(2.4rem, 2rem + 2vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; color: var(--pin-900); line-height: 1; }
.prix-unite { font-weight: 600; color: var(--pin-900); }
.prix-apres { margin: 0.9rem 0 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; background: var(--miel-100); color: var(--pin-900); padding: 0.55rem 0.85rem; border-radius: var(--r-s); font-size: var(--t-s); }
.prix-apres strong { font-size: 1.25rem; letter-spacing: -0.02em; }
.prix-inclus { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 0.55rem; font-size: var(--t-s); }
.prix-inclus li { display: flex; gap: 0.6rem; }
.prix-inclus svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; color: var(--pin-700); }
.mention-legale { font-size: var(--t-xs); color: var(--gris); line-height: 1.5; margin: 1rem 0 0; }
.badge-credit { display: inline-flex; align-items: center; gap: 0.7rem; background: var(--miel-100); border: 1px solid #efd3ad; color: var(--pin-900); border-radius: var(--r-m); padding: 0.75rem 1rem; text-decoration: none; font-size: var(--t-s); line-height: 1.35; transition: background-color 0.2s ease; }
.badge-credit:hover { background: #f5dfbf; color: var(--pin-900); }
.badge-credit .pastille-sap { display: inline-block; }
.heros .badge-credit { margin-bottom: 1.3rem; background: rgba(226, 160, 79, 0.14); border-color: rgba(226, 160, 79, 0.45); color: #fbe7cd; }
.heros .badge-credit:hover { background: rgba(226, 160, 79, 0.24); color: #fff; }

/* Simulateur */
.simulateur { background: var(--blanc); border-radius: var(--r-l); border: 1px solid var(--ligne); box-shadow: var(--ombre-forte); padding: clamp(1.4rem, 4vw, 2.2rem); }
.simulateur h3 { margin-bottom: 0.2rem; }
.simulateur .champs { display: grid; gap: 1rem; margin: 1.3rem 0; }
.simulateur-resultat { display: grid; gap: 0.6rem; background: var(--papier); border-radius: var(--r-m); padding: 1.2rem; }
.simulateur-resultat .ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-s); }
.simulateur-resultat .ligne strong { font-variant-numeric: tabular-nums; }
.simulateur-resultat .total { border-top: 1px solid var(--ligne); padding-top: 0.7rem; margin-top: 0.2rem; font-size: 1.05rem; color: var(--pin-900); }
.simulateur-resultat .total strong { font-size: 1.6rem; letter-spacing: -0.03em; }
.simulateur-alerte { font-size: var(--t-xs); color: #7a4a14; background: var(--miel-100); border-radius: var(--r-s); padding: 0.6rem 0.8rem; margin: 0; }

/* Formulaires */
.champ { display: grid; gap: 0.35rem; }
.champ label, .champ legend { font-weight: 600; font-size: var(--t-s); color: var(--pin-900); padding: 0; }
.champ .aide { font-size: var(--t-xs); color: var(--gris); }
.champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 0.75rem 0.9rem; font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--blanc); border: 1.5px solid #cfc6b5; border-radius: var(--r-s); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--pin-700); box-shadow: 0 0 0 4px rgba(90, 63, 44, 0.15); }
.champ [aria-invalid="true"] { border-color: #b3261e !important; }
.champ .erreur { font-size: var(--t-xs); color: #b3261e; font-weight: 600; min-height: 0; }
.champ .erreur:empty { display: none; }
.champ input[type="file"] { font: inherit; font-size: var(--t-s); padding: 0.6rem; border: 1.5px dashed #cfc6b5; border-radius: var(--r-s); background: var(--papier); width: 100%; }
.champ-unite { position: relative; }
.champ-unite span { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--gris); font-size: var(--t-s); pointer-events: none; }
.choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choix label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border: 1.5px solid #cfc6b5; border-radius: 999px; background: var(--blanc); font-weight: 550; cursor: pointer; font-size: var(--t-s); color: var(--encre); }
.choix input { accent-color: var(--pin-700); width: 1.05rem; height: 1.05rem; margin: 0; }
.choix label:has(input:checked) { border-color: var(--pin-700); background: var(--pin-100); }
.case { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-s); }
.case input { accent-color: var(--pin-700); width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; flex: none; }
fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulaire { display: grid; gap: 1.15rem; }
.formulaire .deux { display: grid; gap: 1.15rem; }
.resume-erreurs { border: 2px solid #b3261e; border-radius: var(--r-m); padding: 1rem 1.2rem; background: #fdf1f0; }
.resume-erreurs h2 { font-size: 1.05rem; color: #8c1d18; margin-bottom: 0.4rem; }
.resume-erreurs ul { margin: 0; font-size: var(--t-s); }
.resume-erreurs a { color: #8c1d18; }
.confirmation { text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 1rem; }
.confirmation svg { width: 64px; height: 64px; margin: 0 auto 1rem; color: var(--pin-700); }
.confirmation dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; text-align: left; max-width: 420px; margin: 1.5rem auto; font-size: var(--t-s); background: var(--papier); border-radius: var(--r-m); padding: 1rem 1.2rem; }
.confirmation dt { color: var(--gris); }
.confirmation dd { margin: 0; font-weight: 600; }
.apercu-photo { display: flex; align-items: center; gap: 0.8rem; font-size: var(--t-xs); color: var(--gris); }
.apercu-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s); }

/* Zone d'intervention */
.zone-grille { display: grid; gap: 2rem; align-items: center; }
.carte-zone { background: var(--blanc); border-radius: var(--r-l); border: 1px solid var(--ligne); box-shadow: var(--ombre); padding: 0.8rem; }
.carte-zone svg { width: 100%; height: auto; }
.communes { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.communes li { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: var(--t-s); font-weight: 550; color: var(--pin-900); }
.communes li.base { background: var(--pin-800); color: #fff; border-color: var(--pin-800); }

/* FAQ */
.faq { display: grid; gap: 0.7rem; }
.faq details { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); transition: box-shadow 0.2s ease; }
.faq details[open] { box-shadow: var(--ombre); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 650; color: var(--pin-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--papier-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1f18' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .reponse { padding: 0 1.3rem 1.2rem; color: var(--gris); }
.faq .reponse p:last-child { margin: 0; }

/* Mise en page à deux colonnes */
.duo { display: grid; gap: 2.2rem; align-items: start; }
.duo-centre { align-items: center; }
.liste-coches { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.7rem; }
.liste-coches li { display: flex; gap: 0.7rem; }
.liste-coches svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; color: var(--pin-700); }
.section-pin .liste-coches svg { color: var(--miel-400); }
.illustration-cadre { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre-forte); }
.illustration-cadre img { width: 100%; }

/* Essences */
.essences { display: grid; gap: 1rem; }
.essence { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; }
.essence .nuancier { height: 10px; }
.essence .corps { padding: 1.2rem 1.3rem; }
.essence h3 { font-size: 1.1rem; }
.essence p { font-size: var(--t-s); color: var(--gris); margin: 0; }

/* Réalisations */
.galerie { display: grid; gap: 1.5rem; }
.chantier figure { margin: 0; }
.chantier .paire { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--ombre); }
.chantier .paire div { position: relative; }
.chantier .paire img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.chantier .paire .etiquette-ba { top: 0.6rem; }
.chantier figcaption { padding: 0.8rem 0.2rem 0; }
.chantier figcaption strong { display: block; color: var(--pin-900); }
.chantier figcaption span { font-size: var(--t-s); color: var(--gris); }

/* Avis */
.avis-grille { display: grid; gap: 1rem; }
.avis blockquote { margin: 0 0 1rem; font-size: 1.02rem; }
.avis .etoiles { color: var(--miel-600); letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.avis footer { font-size: var(--t-s); color: var(--gris); }

/* Guides */
.cartes-guides { display: grid; gap: 1.2rem; }
.carte-guide { position: relative; display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 1.5rem; box-shadow: var(--ombre); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.carte-guide:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.carte-guide .meta { font-size: var(--t-xs); color: var(--miel-600); font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem; }
.carte-guide h3 a { color: var(--pin-900); text-decoration: none; }
.carte-guide p { color: var(--gris); font-size: var(--t-s); }
.carte-guide .lien-fleche { margin-top: auto; }
.article { font-size: 1.075rem; line-height: 1.75; }
.article .lead { font-size: var(--t-l); line-height: 1.55; color: var(--encre); font-weight: 450; }
.article h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem); }
.article h3 { margin-top: 1.6em; font-size: 1.2rem; }
.article li { margin-bottom: 0.4em; }
.article .note { background: var(--pin-100); border-left: 4px solid var(--pin-700); border-radius: 0 var(--r-m) var(--r-m) 0; padding: 1.1rem 1.3rem; margin: 1.8em 0; }
.article .note p:last-child { margin: 0; }
.article-meta { font-size: var(--t-s); color: #cbbcad; }
.sommaire { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 1.1rem 1.3rem; margin-bottom: 2rem; font-size: var(--t-s); }
.sommaire p { font-weight: 700; color: var(--pin-900); margin-bottom: 0.4rem; }
.sommaire ol { margin: 0; }
.sommaire a { text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }

/* Bloc final zone + crédit + devis */
.bloc-final { display: grid; gap: 1rem; }
.bloc-final .carte { display: flex; flex-direction: column; }
.bloc-final .carte h3 { font-size: 1.15rem; }
.bloc-final .carte p { color: var(--gris); font-size: var(--t-s); }
.bloc-final .carte .lien-fleche { margin-top: auto; }
.bloc-final .carte-devis { background: var(--pin-800); border-color: var(--pin-800); }
.bloc-final .carte-devis h3 { color: #fff; }
.bloc-final .carte-devis p { color: #d6c8ba; }
.bloc-final .carte-devis .surtitre { color: var(--miel-400); }

/* Appel final */
.appel { text-align: center; }
.appel .groupe-boutons { justify-content: center; }
.appel h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.appel .intro { margin: 0 auto 1.8rem; }

/* Pied de page */
.pied { background-color: var(--pin-900); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='%23e8d3bc' stroke-opacity='.055' stroke-width='.7'%3E%3Cpath d='M-20 22C40 9 65 38 122 23s94-9 126 1 54 10 92-1M-20 47c47-12 78 10 132 1s80-18 130-1 72 12 108 0M-20 79c42-9 71 12 115 1s92-15 137-2 63 10 98-2M-20 112c53-13 78 10 130 0s82-16 128-2 62 11 92 0M-20 146c48-11 83 11 130 1s91-17 136-2 65 10 94-2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 320px 180px; color: #e0d3c5; font-size: var(--t-s); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.pied a { color: #efe6dc; text-decoration: none; }
.pied .logo-sous { color: #d5c6b7; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; gap: 2rem; }
.pied .logo { color: #fff; }
.pied .logo-sous { color: #bba997; }
.pied h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--miel-400); margin-bottom: 0.9rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.pied address { font-style: normal; line-height: 1.7; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 2.5rem; padding-top: 1.3rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; font-size: var(--t-xs); color: #a8957f; }

/* Barre d'appel fixe (mobile) */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.65rem var(--gouttiere) calc(0.65rem + env(safe-area-inset-bottom)); background: rgba(250, 247, 241, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--ligne); box-shadow: 0 -6px 20px rgba(28, 20, 16, 0.08); }
.barre-mobile .bouton { min-height: 50px; padding: 0.6rem 0.8rem; font-size: 1rem; }

/* Apparition au défilement : seulement si le visiteur accepte les animations */
@media (prefers-reduced-motion: no-preference) {
  .js .revele { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .revele.visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (min-width: 560px) {
  .confiance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire .deux { grid-template-columns: 1fr 1fr; }
  .essences { grid-template-columns: 1fr 1fr; }
  .avis-grille { grid-template-columns: 1fr 1fr; }
  .simulateur .champs { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
  .grille-3, .cartes-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie { grid-template-columns: 1fr 1fr; }
  .bloc-final { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .confiance ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pastille-sap { display: inline-block; }
}

@media (min-width: 980px) {
  body { padding-bottom: 0; }
  .barre-mobile { display: none; }
  .bouton-menu, .menu-mobile, .menu-mobile.ouvert { display: none; }
  .nav-principale { display: block; }
  .entete .bouton { display: inline-flex; }
  .entete-interieur { min-height: 76px; }
  .heros-grille { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; }
  .heros .comparateur { aspect-ratio: 5 / 4; }
  .heros-simple .heros-grille { grid-template-columns: 1.3fr 1fr; }
  .duo { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .duo-large { grid-template-columns: 1.25fr 1fr; }
  .zone-grille { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
  .etapes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etapes-4 li { padding: 4.2rem 1.3rem 1.4rem; }
  .etapes-4 li::before { top: 1.3rem; left: 1.3rem; }
  .essences { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .avis-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; align-items: start; }
  .article-cote { position: sticky; top: 110px; }
}
@media (min-width: 1360px) {
  .entete-tel { display: inline-block; }
}
@media (min-width: 980px) and (max-width: 1100px) {
  .logo-sous { display: none; }
}

@media print {
  .barre-mobile, .entete, .bandeau-credit, .menu-mobile { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* Utilitaires et composants de page */
.surtitre-clair { color: var(--miel-400); }
.sans-marge { margin: 0; }
.apres-bloc { margin: 1.8rem 0 0; }
.centre-texte { text-align: center; margin-top: 1.5rem; }
.titre-carte { font-size: var(--t-l); }
.lien-titre { color: inherit; text-decoration: none; }
.pile { display: grid; gap: 1.5rem; align-content: start; }
.carte-formulaire { padding: clamp(1.3rem, 4vw, 2.2rem); }
.bouton-plein { width: 100%; }
.pied-texte { margin-top: 1rem; }
.pied-nom { color: #fff; }
.galerie-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.simulateur-resultat .ligne-credit { color: var(--pin-700); }
.echec-envoi p { margin: 0; }
.carte-cote { background: var(--pin-800); border-color: var(--pin-800); color: #eee5dc; }
.carte-cote h2 { color: #fff; font-size: 1.15rem; }
.carte-cote p { font-size: var(--t-s); color: #d6c8ba; }
.exemple-chiffre { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-l); padding: clamp(1.3rem, 3vw, 1.8rem); display: grid; gap: 0.6rem; font-size: var(--t-s); }
.exemple-titre { color: #cbbcad; margin: 0 0 0.2rem; }
.exemple-ligne { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.exemple-ligne strong { font-variant-numeric: tabular-nums; }
.exemple-credit { color: var(--miel-400); }
.exemple-total { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 0.8rem; margin-top: 0.2rem; font-size: 1.05rem; color: #fff; }
.exemple-total strong { font-size: 2rem; letter-spacing: -0.03em; }
.exemple-chiffre .mention-legale { color: #bba997; }
.fiche-artisan { padding: 0; overflow: hidden; }
.fiche-tete { background: var(--pin-800); color: #fff; padding: 1.6rem 1.6rem 1.3rem; display: flex; gap: 1rem; align-items: center; }
.fiche-tete strong { display: block; font-size: 1.25rem; }
.fiche-tete span span { color: #d6c8ba; font-size: var(--t-s); }
.monogramme { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--miel-500); color: var(--pin-900); display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; }
.fiche-artisan dl { margin: 0; padding: 1.2rem 1.6rem 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 0.7rem 1.2rem; font-size: var(--t-s); }
.fiche-artisan dt { color: var(--gris); }
.fiche-artisan dd { margin: 0; font-weight: 600; color: var(--pin-900); }
.comparateur-cadre { margin: 0; }
.carte-service img { object-position: center 75%; }
.heros-simple .heros-grille > :only-child { grid-column: 1 / -1; max-width: 820px; }

/* Photos réelles et composants propres au client */
.paire-ba { margin: 0; }
.paire-ba-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre-forte); }
.paire-seule .paire-ba-photos { grid-template-columns: 1fr; }
.paire-ba-photos > div { position: relative; }
.paire-ba-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-serie img, .carte-service > img, .illustration-cadre img { border-radius: 3px; }
.section-pin .legende { color: #d5c6b7; }
.paire-seule .paire-ba-photos img { aspect-ratio: 5 / 4; }
.paire-ba .etiquette-ba { top: 0.7rem; }
.paire-ba .etiquette-ba.avant { left: 0.7rem; }
.paire-ba .etiquette-ba.apres, .paire-ba .etiquette-ba.pendant { right: auto; left: 0.7rem; }
.paire-ba .etiquette-illustration { position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 2; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; background: #fff; color: var(--pin-900); pointer-events: none; }
.paire-ba .mention-illustration { font-weight: 600; }
/* Petits écrans : cartes Avant / Après empilées, format paysage pour garder le héros compact */
@media (max-width: 599px) {
  .paire-ba-photos { grid-template-columns: 1fr; }
  .paire-ba-photos img { aspect-ratio: 4 / 3; }
}
.prix-texte { font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.5rem); }
.sous-titre-service { font-size: var(--t-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--miel-600); margin-bottom: 0.35rem; }
.etapes li.avec-photo { padding: 0 0 1.3rem; overflow: hidden; }
.etapes li.avec-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1rem; }
.etapes li.avec-photo::before { top: 0.8rem; left: 0.8rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.etapes li.avec-photo h3, .etapes li.avec-photo p { padding: 0 1.2rem; }
.etapes-4 li.avec-photo { padding: 0 0 1.3rem; }
.etapes-4 li.avec-photo::before { top: 0.8rem; left: 0.8rem; }
.guide-mere { background: var(--pin-800); color: #eee5dc; border-radius: var(--r-l); padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.5rem; box-shadow: var(--ombre-forte); }
.guide-mere h3 { font-size: var(--t-xl); margin-bottom: 0.6rem; }
.guide-mere h3 a { color: #fff; text-decoration: none; }
.guide-mere h3 a:hover { text-decoration: underline; }
.guide-mere p { color: #d6c8ba; max-width: 65ch; }
.guide-mere .surtitre { color: var(--miel-400); }
.carte-guide-mere { border-color: var(--miel-500); }
.galerie-serie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.photo-serie { margin: 0; }
.photo-serie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-m); box-shadow: var(--ombre); }
.carte-coordonnees address { font-style: normal; margin-bottom: 1rem; line-height: 1.6; }
.carte-coordonnees h3 { font-size: 1.2rem; }
.logo img { width: 40px; height: 40px; object-fit: contain; background: var(--pin-800); border-radius: 10px; padding: 5px; }
@media (min-width: 560px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.heros-grille > :only-child { grid-column: 1 / -1; max-width: 860px; }
.illustration-ia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.illustration-ia .legende { padding: 0.6rem 0.9rem; margin: 0; background: var(--blanc); }
.avis-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.avis-note { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--t-s); color: var(--gris); }
.avis-note strong { font-size: 2.4rem; letter-spacing: -0.03em; color: var(--pin-900); }
.avis-note .etoiles { color: var(--miel-600); font-size: 1.3rem; letter-spacing: 0.08em; margin: 0; }
figure.avis { margin: 0; display: flex; flex-direction: column; }
figure.avis figcaption { margin-top: auto; }

/* Vidéos de l'artisan : liens simples vers YouTube, sans intégration */
.videos { margin: 1.6rem 0; }
.videos h3 { font-size: var(--t-m, 1.15rem); margin: 0 0 0.8rem; }
.videos-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.video-lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--pin-900); background: #fff; border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; }
.video-lien:hover, .video-lien:focus-visible { border-color: var(--pin-800); }
.video-lien img, .video-texte { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-texte { display: grid; place-items: center; background: var(--pin-800); color: #fff; font-weight: 800; letter-spacing: 0.04em; }
.video-legende { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.75rem 0.9rem; font-weight: 650; font-size: var(--t-s); }
.video-jeu { color: var(--pin-800); flex: none; }
/* Grilles de cartes : hauteurs égales, bouton ou lien d'action aligné en bas */
.grille, .cartes-guides, .avis-grille, .etapes { align-items: stretch; }
.carte-prix { display: flex; flex-direction: column; }
.carte-prix-corps { display: flex; flex-direction: column; flex: 1; }
.carte-prix-corps > .bouton { margin-top: auto; align-self: flex-start; }
.carte-prix-corps > .prix-inclus { margin-bottom: 1.6rem; }
.grille > .carte { display: flex; flex-direction: column; }
.grille > .carte > .lien-fleche, .grille > .carte > .groupe-boutons { margin-top: auto; }
.etapes li { display: flex; flex-direction: column; }