/* Maquette Le Béret Nettoyeur — direction artistique, version 2.
   Noir chaud (jamais de noir pur), fonds craie et pierre, un seul accent : le jaune beurre.
   Typographies : Ysabeau (titres), Ysabeau Office (texte), Ysabeau SC (petites capitales des étiquettes).
   Signature : le « trait de raclette », un trait jaune sous les mots importants des titres. */
:root {
  --noir: #181512;
  --noir-2: #221e19;
  --noir-3: #110f0d;
  --encre: #1d1915;
  --craie: #fbfaf6;
  --pierre: #f1ece2;
  --pierre-2: #e4dccd;
  --gris: #6a6359;
  --clair: #fdfbf6;
  --gris-s: rgba(253, 251, 246, 0.72);
  --trait-s: rgba(253, 251, 246, 0.14);
  --accent: #f2c94c;
  --accent-2: #e5b82f;
  --or: #d99e12;
  --rayon: 14px;
  --rayon-g: 22px;
  --titres: "Ysabeau", "Optima", "Gill Sans", sans-serif;
  --texte: "Ysabeau Office", "Gill Sans", "Trebuchet MS", sans-serif;
  --capitales: "Ysabeau SC", "Ysabeau", "Gill Sans", sans-serif;
  --conteneur: 1240px;
  --entete: 80px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 18.5px/1.55 var(--texte); color: var(--encre); background: var(--craie); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titres); font-variant-numeric: lining-nums; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.018em; }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.35rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.014em; }
h3 { font-size: 1.36rem; font-weight: 750; line-height: 1.18; letter-spacing: -0.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.conteneur { width: min(100% - 48px, var(--conteneur)); margin-inline: auto; }
.muted { color: var(--gris); }
.grand { font-size: 1.16rem; }
.a-completer { padding: 0 0.3em; border-radius: 4px; background: #ffe2d4; color: #7c3014; outline: 1px dashed #dc8a68; }

/* Le trait de raclette : un trait jaune sous les mots importants (fonds clairs), le mot en jaune (fonds sombres) */
h1 em, h2 em { font-style: normal; padding-bottom: 0.04em; background: linear-gradient(var(--accent), var(--accent)) 0 92% / 100% 0.15em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section--sombre h2 em, .hero h1 em, .page-photo h1 em, .appel-ligne--carte h2 em, .appel-bord h2 em { padding: 0; background: none; color: var(--accent); }

.etiquette { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 700 0.86rem/1.2 var(--capitales); letter-spacing: 0.16em; color: var(--gris); }
.etiquette::before { content: ""; flex: none; width: 24px; height: 3px; border-radius: 2px; background: var(--accent); }

/* Boutons : en pilule, comme le médaillon du logo */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 1.5px solid transparent; border-radius: 999px; font: 700 1rem/1 var(--texte); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s; }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn--accent { background: var(--accent); color: var(--encre); }
.btn--accent:hover { background: var(--accent-2); }
.btn--noir { background: var(--noir); color: var(--clair); }
.btn--noir:hover { background: #332c25; }
.btn--blanc { background: var(--clair); color: var(--encre); }
.btn--blanc:hover { background: var(--pierre-2); }
.btn--ligne { border-color: rgba(29, 25, 21, 0.3); color: var(--encre); }
.btn--ligne:hover { background: var(--encre); border-color: var(--encre); color: var(--clair); }
.btn--ligne-clair { border-color: rgba(253, 251, 246, 0.4); color: var(--clair); }
.btn--ligne-clair:hover { background: var(--clair); border-color: var(--clair); color: var(--encre); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.boutons--centre { justify-content: center; }
.suite { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 700 0.98rem/1 var(--texte); }
.suite svg { width: 17px; height: 17px; transition: transform 0.2s; }
a:hover > .suite svg, a:hover .suite svg { transform: translateX(4px); }

/* Sections */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--blanc { background: var(--craie); }
.section--papier { background: var(--pierre); }
.section--sombre { background: var(--noir); color: var(--clair); }
.section--sombre .etiquette, .section--sombre .muted { color: var(--gris-s); }
.entete-centre { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.entete-centre .etiquette { justify-content: center; }
.entete-centre h2 + p { margin-top: 20px; }
.scinde { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.scinde > div:first-child { position: sticky; top: calc(var(--entete) + 32px); }
.scinde h2 + p { margin-top: 20px; }

/* entete.mega */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--entete); background: var(--noir); color: var(--clair); border-bottom: 1px solid var(--trait-s); }
.entete > .conteneur { display: flex; align-items: center; gap: 24px; height: 100%; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--clair); }
.logo img { width: 54px; height: 54px; }
.logo b { display: block; font: 800 1.02rem/1.1 var(--capitales); letter-spacing: 0.14em; }
.logo small { display: block; margin-top: 3px; font: 600 0.74rem/1 var(--capitales); letter-spacing: 0.3em; color: var(--accent); }
.nav { display: flex; align-items: center; gap: 2px; height: 100%; margin-left: auto; }
.nav > a, .mega-bouton { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 16px; border: 0; background: none; color: var(--clair); font: 600 1rem/1 var(--texte); text-decoration: none; cursor: pointer; opacity: 0.82; transition: opacity 0.2s; }
.nav > a:hover, .mega-bouton:hover, .nav > a[aria-current], .mega-bouton[data-actif], .deroulant:hover .mega-bouton { opacity: 1; }
.nav > a[aria-current], .mega-bouton[data-actif] { box-shadow: inset 0 -3px 0 var(--accent); }
.mega-bouton svg { width: 16px; height: 16px; transition: transform 0.2s; }
.deroulant { height: 100%; }
.deroulant:hover .mega-bouton svg, .deroulant.ouvert .mega-bouton svg { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--noir); border-top: 1px solid var(--trait-s); border-bottom: 1px solid var(--trait-s); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.deroulant:hover .mega, .deroulant:focus-within .mega, .deroulant.ouvert .mega { opacity: 1; visibility: visible; transform: none; }
.mega > .conteneur { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 36px 0 40px; }
.mega-titre { margin: 0 0 14px; font: 700 0.8rem/1 var(--capitales); letter-spacing: 0.16em; color: var(--accent); }
.mega-liens { display: grid; gap: 4px; }
.mega-liens--2 { grid-template-columns: 1fr 1fr; }
.mega-liens a { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 12px; margin-left: -12px; border-radius: var(--rayon); text-decoration: none; transition: background 0.2s; }
.mega-liens a:hover { background: rgba(253, 251, 246, 0.07); }
.mega-liens .ico svg { width: 26px; height: 26px; }
.mega-liens b { display: block; font: 750 1.08rem/1.2 var(--titres); }
.mega-liens small { display: block; margin-top: 4px; font-size: 0.86rem; line-height: 1.4; color: var(--gris-s); }
.mega-carte { position: relative; display: flex; align-items: flex-end; min-height: 220px; overflow: hidden; border-radius: var(--rayon); text-decoration: none; }
.mega-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mega-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 21, 18, 0.1), rgba(24, 21, 18, 0.86)); }
.mega-carte:hover img { transform: scale(1.03); }
.mega-carte span { position: relative; z-index: 1; padding: 20px; }
.mega-carte b { display: block; font: 800 1.3rem/1.15 var(--titres); }
.mega-carte small { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.9rem; color: var(--accent); }
.mega-carte small svg { width: 15px; height: 15px; }
.entete-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.entete .btn { min-height: 46px; padding: 0 20px; font-size: 0.95rem; }
.burger { display: none; width: 46px; height: 46px; padding: 11px; border: 1.5px solid var(--trait-s); border-radius: 50%; background: none; color: var(--clair); cursor: pointer; }

/* hero.video-fond-centre */
.hero { position: relative; display: grid; place-items: center; min-height: min(880px, calc(100svh - var(--entete))); padding: 88px 0; overflow: hidden; background: var(--noir); color: var(--clair); text-align: center; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 21, 18, 0.8), rgba(24, 21, 18, 0.5) 46%, rgba(24, 21, 18, 0.88)); }
.hero .conteneur { position: relative; z-index: 2; max-width: 1040px; }
.hero .etiquette { color: rgba(253, 251, 246, 0.88); }
.hero .accroche { max-width: 720px; margin: 28px auto 0; font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: rgba(253, 251, 246, 0.9); }
.hero .boutons { margin-top: 38px; }
.hero-note { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; font-size: 1rem; color: rgba(253, 251, 246, 0.9); text-decoration: none; }
.hero-note:hover { color: #fff; }
.etoiles { display: inline-flex; gap: 2px; color: var(--or); }
.etoiles svg { width: 17px; height: 17px; fill: currentColor; }
.hero .etoiles, .section--sombre .etoiles { color: var(--accent); }

/* colonnes.centre-4-icone */
.col-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.col-4 > a { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--rayon-g); background: var(--pierre); text-decoration: none; transition: background 0.25s, color 0.25s, transform 0.25s; }
.col-4 > a:hover { background: var(--noir); color: var(--clair); transform: translateY(-4px); }
.col-ico { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 44px; border-radius: 50%; background: var(--craie); transition: background 0.25s, color 0.25s; }
.col-ico svg { width: 30px; height: 30px; stroke-width: 1.4; }
.col-4 > a:hover .col-ico { background: var(--accent); color: var(--encre); }
.col-4 h3 { margin-bottom: 10px; }
.col-4 p { flex: 1; font-size: 1.02rem; color: var(--gris); transition: color 0.25s; }
.col-4 > a:hover p { color: var(--gris-s); }

/* chiffres.media */
.chiffres-media { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.chiffres-media .photo { aspect-ratio: 6 / 5; overflow: hidden; border-radius: var(--rayon-g); }
.chiffres-media .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.chiffres-liste { display: flex; flex-direction: column; justify-content: center; }
.chiffre { padding: 26px 0; border-top: 1px solid var(--pierre-2); }
.chiffre:last-child { border-bottom: 1px solid var(--pierre-2); }
.chiffre b { display: block; font: 800 clamp(3.2rem, 5.4vw, 4.8rem)/0.95 var(--titres); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.chiffre b small { margin-left: 4px; font-size: 0.42em; font-weight: 700; letter-spacing: 0; color: var(--gris); }
.chiffre span { display: block; margin-top: 10px; font-size: 1.04rem; color: var(--gris); }

/* onglets.barre-haut-photo-gauche */
.onglets-barre { display: flex; gap: 6px; width: fit-content; max-width: 100%; margin-bottom: clamp(32px, 4vw, 56px); padding: 6px; border-radius: 999px; background: var(--pierre); overflow-x: auto; scrollbar-width: none; }
.onglets-barre::-webkit-scrollbar { display: none; }
.onglets-barre button { padding: 13px 22px; border: 0; border-radius: 999px; background: none; font: 700 1rem/1 var(--texte); color: var(--gris); white-space: nowrap; cursor: pointer; transition: color 0.2s, background 0.2s; }
.onglets-barre button:hover { color: var(--encre); }
.onglets-barre button[aria-selected="true"] { background: var(--noir); color: var(--clair); }
.onglet-panneau { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.onglet-panneau[hidden] { display: none; }
.onglet-panneau .photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--rayon-g); }
.onglet-panneau .photo img { width: 100%; height: 100%; object-fit: cover; }
.onglet-panneau h2 + p { margin-top: 20px; }

/* galerie.carrousel-3-debord-centre */
.carrousel { position: relative; --marge: max(24px, calc((100vw - var(--conteneur)) / 2)); }
.car-piste { display: flex; gap: 20px; padding: 0 var(--marge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; }
.car-piste::-webkit-scrollbar { display: none; }
.car-item { flex: 0 0 calc((min(100vw - 48px, var(--conteneur)) - 40px) / 3); aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--rayon-g); background: var(--pierre-2); overflow: hidden; scroll-snap-align: start; cursor: zoom-in; }
.car-item, .grande-deux button, .grande-quatre button { position: relative; }
.car-item img, .grande-deux img, .grande-quatre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.car-item:hover img, .grande-deux button:hover img, .grande-quatre button:hover img { transform: scale(1.03); }
.car-fleche { position: absolute; top: calc(50% - 44px); z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent); color: var(--encre); box-shadow: 0 10px 30px -10px rgba(24, 21, 18, 0.5); cursor: pointer; transition: background 0.2s; }
.car-fleche:hover { background: var(--accent-2); }
.car-fleche svg { width: 21px; height: 21px; }
.car-prec { left: max(12px, calc(var(--marge) - 28px)); }
.car-suiv { right: max(12px, calc(var(--marge) - 28px)); }
.car-points { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.car-points span { width: 8px; height: 8px; border-radius: 999px; background: #cfc6b5; transition: background 0.2s, width 0.2s; }
.car-points span.actif { width: 26px; background: var(--encre); }

/* etapes.horizontale */
.frise-h { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); margin: 0; padding: 0; list-style: none; }
.frise-h::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--trait-s); }
.frise-h li { position: relative; padding: 48px 32px 0 0; }
.frise-h li::before { content: ""; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--noir); }
.num { display: block; margin-bottom: 12px; font: 700 0.82rem/1 var(--capitales); letter-spacing: 0.16em; color: var(--gris); }
.section--sombre .num { color: var(--accent); }
.frise-h h3 { margin-bottom: 10px; }
.frise-h p { font-size: 1.02rem; color: var(--gris-s); }

/* avis */
.avis-resume { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 1.06rem; }
.avis-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.avis-carte { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 34px 32px; border-radius: var(--rayon-g); background: var(--pierre); }
.avis-carte blockquote { flex: 1; margin: 0; font: 600 1.3rem/1.36 var(--titres); letter-spacing: -0.003em; }
.avis-auteur { display: flex; align-items: center; gap: 14px; }
.initiales { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--noir); color: var(--accent); font: 800 0.9rem/1 var(--capitales); letter-spacing: 0.06em; }
.avis-auteur b { display: block; font-size: 1.02rem; }
.avis-auteur span span { display: block; font-size: 0.9rem; line-height: 1.35; color: var(--gris); }
.avis-2 { columns: 2; column-gap: 20px; }
.avis-2 .avis-carte { break-inside: avoid; margin-bottom: 20px; }
.scinde--avis { grid-template-columns: 1fr 1.5fr; }

/* faq */
.faq-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
details { border-top: 1px solid var(--pierre-2); }
.faq-2 > div > details:last-child, .faq-liste > details:last-child { border-bottom: 1px solid var(--pierre-2); }
summary { position: relative; padding: 22px 52px 22px 0; font: 750 1.22rem/1.25 var(--titres); list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; position: absolute; right: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--craie); transition: background 0.2s; }
summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-75%) rotate(45deg); transition: transform 0.2s; }
details[open] summary::before { background: var(--accent); }
details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
details p { margin: 0; padding: 0 52px 24px 0; color: var(--gris); }

/* zone */
.zone-groupes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.zone-groupes h3, .communes-groupes h3 { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--pierre-2); font-size: 1.16rem; }
.zone-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zone-tags li { padding: 8px 15px; border-radius: 999px; background: var(--pierre); font-size: 0.98rem; }
.communes-groupes { display: grid; gap: 32px; }
.communes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.communes li { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.communes svg { width: 18px; height: 18px; flex: none; color: var(--or); }

/* appels */
.deux-appels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.appel-carte { display: flex; flex-direction: column; padding: clamp(32px, 4vw, 56px); border-radius: var(--rayon-g); background: var(--noir-2); }
.appel-carte--plein { background: var(--accent); color: var(--encre); }
.appel-ico { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 36px; border-radius: 50%; background: rgba(253, 251, 246, 0.08); }
.appel-carte--plein .appel-ico { background: rgba(29, 25, 21, 0.1); }
.appel-ico svg { width: 30px; height: 30px; stroke-width: 1.4; }
.appel-carte h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.appel-carte p { flex: 1; margin-top: 16px; font-size: 1.14rem; color: var(--gris-s); }
.appel-carte--plein p { color: rgba(29, 25, 21, 0.78); }
.appel-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.appel-ligne > div:first-child { flex: 1 1 420px; max-width: 660px; }
.appel-ligne h2 + p { margin-top: 16px; }
.appel-ligne .boutons { margin-top: 0; flex: none; }
.appel-ligne--carte { padding: clamp(36px, 5vw, 72px); border-radius: var(--rayon-g); background: var(--noir); color: var(--clair); }
.appel-ligne--carte p { color: var(--gris-s); }
.appel-photo-carte { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--rayon-g); overflow: hidden; background: var(--pierre); }
.appel-photo-carte > div:first-child { align-self: center; padding: clamp(32px, 5vw, 72px); }
.appel-photo-carte h2 + p { margin-top: 18px; }
.appel-photo-carte .photo { position: relative; min-height: 380px; }
.appel-photo-carte .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.appel-bord { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.appel-bord .texte { align-self: center; margin-left: max(24px, calc((100vw - var(--conteneur)) / 2)); padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 80px) clamp(64px, 8vw, 120px) 0; }
.appel-bord h2 + p { margin-top: 18px; color: var(--gris-s); }
.appel-bord .photo { position: relative; min-height: 420px; }
.appel-bord .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* pied.carte-colonnes */
.pied { padding: clamp(24px, 4vw, 56px) 0 28px; background: var(--noir-3); color: var(--clair); }
.pied-carte { padding: clamp(32px, 5vw, 64px); border-radius: var(--rayon-g); background: var(--noir-2); }
.pied-haut { display: grid; grid-template-columns: 1.4fr 1.1fr 1fr 1.2fr; gap: 40px; }
.pied-marque img { width: 116px; height: 116px; margin: -8px 0 20px -8px; }
.pied-marque p { max-width: 320px; font-size: 1rem; color: var(--gris-s); }
.pied h4 { margin-bottom: 18px; font: 700 0.8rem/1 var(--capitales); letter-spacing: 0.16em; color: var(--accent); }
.pied ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 1rem; }
.pied a { text-decoration: none; opacity: 0.9; }
.pied a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.pied .tel { font: 800 1.5rem/1 var(--titres); font-variant-numeric: lining-nums; opacity: 1; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--trait-s); font-size: 0.92rem; color: var(--gris-s); }
.pied-legal { display: flex; flex-wrap: wrap; gap: 24px; }
.barre-mobile { display: none; }

/* En-têtes de page */
.fil { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; font-size: 0.92rem; color: var(--gris); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.page-photo { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); overflow: hidden; background: var(--noir); color: var(--clair); }
.page-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 21, 18, 0.9), rgba(24, 21, 18, 0.66) 55%, rgba(24, 21, 18, 0.5)); }
.page-photo--colonnes::after { background: linear-gradient(90deg, rgba(24, 21, 18, 0.9), rgba(24, 21, 18, 0.76)); }
.page-photo .conteneur { position: relative; z-index: 2; }
.page-photo .fil, .page-photo .etiquette { color: rgba(253, 251, 246, 0.8); }
.page-photo h1, .page-texte h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); }
.page-photo .chapo { font-size: 1.18rem; color: rgba(253, 251, 246, 0.92); }
.page-photo .contenu { padding-top: clamp(40px, 8vw, 120px); }
.page-photo--gauche .contenu { max-width: 820px; }
.page-photo--gauche .chapo { margin-top: 24px; }
.page-photo--colonnes .contenu, .page-texte--colonnes .contenu { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.page-texte { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); background: var(--pierre); }
.page-texte .chapo { font-size: 1.18rem; color: var(--gris); }
.page-texte--gauche .contenu { max-width: 900px; }
.page-texte--gauche .chapo, .page-texte--centre .chapo { margin-top: 24px; }
.page-texte--centre { text-align: center; }
.page-texte--centre .fil, .page-texte--centre .etiquette { justify-content: center; }
.page-texte--centre .contenu { max-width: 860px; margin-inline: auto; }

/* bentos */
.bento-374 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; }
.bento-carte { display: flex; flex-direction: column; border-radius: var(--rayon-g); background: var(--pierre); overflow: hidden; text-decoration: none; transition: transform 0.25s; }
.bento-carte:hover { transform: translateY(-4px); }
.bento-texte { padding: 30px 28px 26px; }
.bento-texte p { margin-top: 10px; font-size: 1.02rem; color: var(--gris); }
.bento-carte--grande { grid-row: span 2; }
.bento-carte--grande h3 { font-size: 2rem; letter-spacing: -0.012em; }
.carte-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border-radius: 50%; background: var(--craie); }
.carte-ico svg { width: 27px; height: 27px; stroke-width: 1.4; }
.bento-photo { position: relative; flex: none; height: 200px; margin-top: auto; overflow: hidden; }
.bento-carte--grande .bento-photo { flex: 1; height: auto; min-height: 360px; }
.bento-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.bento-carte:hover .bento-photo img { transform: scale(1.03); }
.bento-401 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bento-icone { padding: 32px 28px; border-radius: var(--rayon-g); background: var(--craie); }
.bento-icone .carte-ico { margin-bottom: 40px; background: var(--accent); }
.bento-icone p { margin-top: 10px; font-size: 1.02rem; color: var(--gris); }

/* atouts */
.atouts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.atouts--photo-gauche .atouts-photo { order: -1; }
.atouts-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon-g); }
.atouts-photo img { width: 100%; height: 100%; object-fit: cover; }
.atouts-photo--nb img { filter: grayscale(1) contrast(1.05) sepia(0.12); }
.atouts h2 + p { margin-top: 20px; }
.liste-icones { display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.liste-icones li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.liste-icones svg { box-sizing: content-box; width: 26px; height: 26px; padding: 13px; border-radius: 50%; background: var(--craie); stroke-width: 1.4; }
.liste-icones p { margin-top: 4px; font-size: 1.02rem; color: var(--gris); }
.liste-puces { display: grid; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--pierre-2); }
.liste-puces li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--pierre-2); }
.liste-puces li::before { content: ""; position: absolute; left: 0; top: 1.5em; width: 24px; height: 3px; border-radius: 2px; background: var(--accent); }
.reference { margin-top: 24px; padding: 18px 22px; border-radius: var(--rayon); background: var(--pierre); font-size: 1rem; color: var(--gris); }
.sous-titres { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--pierre-2); }
.sous-titres p { margin-top: 8px; font-size: 1.02rem; color: var(--gris); }

/* etapes.laterale-cartes */
.frise-v { position: relative; display: grid; gap: 16px; margin: 0; padding: 0 0 0 40px; list-style: none; }
.frise-v::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 1px; background: #cfc6b5; }
.frise-v li { position: relative; padding: 26px 28px; border-radius: var(--rayon-g); background: var(--craie); }
.frise-v li::before { content: ""; position: absolute; left: -40px; top: 30px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--pierre), 0 0 0 6px #cfc6b5; }
.frise-v h3 { margin-bottom: 8px; }
.frise-v p { font-size: 1.03rem; color: var(--gris); }

/* galeries à visionneuse */
.grande-deux, .grande-quatre { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; height: clamp(420px, 54vw, 680px); }
.grande-deux { grid-template-columns: 1.6fr 1fr; }
.grande-quatre { grid-template-columns: 2fr 1fr 1fr; }
.grande-deux button, .grande-quatre button { min-height: 0; padding: 0; border: 0; border-radius: var(--rayon-g); background: var(--pierre-2); overflow: hidden; cursor: zoom-in; }
.grande-deux button:first-child, .grande-quatre button:first-child { grid-row: span 2; }
dialog.visionneuse { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 24px; border: 0; background: rgba(24, 21, 18, 0.96); }
dialog.visionneuse::backdrop { background: rgba(24, 21, 18, 0.6); }
dialog.visionneuse img { width: 100%; height: 100%; object-fit: contain; }
dialog.visionneuse .btn { position: absolute; top: 20px; right: 20px; z-index: 2; min-height: 46px; }

/* avant-apres.cote-a-cote */
.paires { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 28px; }
.paire { margin: 0; }
.aa { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--rayon-g); overflow: hidden; }
.aa > div { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--pierre-2); }
.aa img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; left: 14px; top: 14px; padding: 7px 14px 8px; border-radius: 999px; background: var(--craie); color: var(--encre); font: 700 0.84rem/1 var(--capitales); letter-spacing: 0.14em; }
.tag--apres { background: var(--accent); }
.legende { margin-top: 14px; font-size: 1.02rem; color: var(--gris); }
.legende b { font-weight: 700; color: var(--encre); }

/* contact.scinde-detaille */
.contact-grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-grille h2 + p { margin-top: 20px; }
.coordonnees { display: grid; margin-top: 36px; border-top: 1px solid var(--pierre-2); }
.coordonnees > div { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--pierre-2); }
.coordonnees svg { box-sizing: content-box; width: 26px; height: 26px; padding: 13px; border-radius: 50%; background: var(--pierre); stroke-width: 1.4; }
.coordonnees b { display: block; margin-bottom: 2px; font: 700 0.8rem/1.4 var(--capitales); letter-spacing: 0.16em; color: var(--gris); }
.coordonnees a { display: block; font: 800 1.7rem/1.2 var(--titres); font-variant-numeric: lining-nums; text-decoration: none; }
.coordonnees span { display: block; }
.coordonnees span.a-completer { display: inline; }
.coordonnees span + span, .coordonnees a + span { font-size: 0.98rem; color: var(--gris); }
.form { padding: clamp(24px, 4vw, 48px); border-radius: var(--rayon-g); background: var(--pierre); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ--plein { grid-column: 1 / -1; }
.champ label { display: block; margin-bottom: 8px; font-size: 0.98rem; font-weight: 700; }
.champ small { font-weight: 400; color: var(--gris); }
.champ input, .champ select, .champ textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--pierre-2); border-radius: 12px; background: var(--craie); font: inherit; color: inherit; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.55); }
.champ textarea { min-height: 130px; resize: vertical; }
.consentement { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; font-size: 0.96rem; color: var(--gris); }
.consentement input { flex: none; width: 18px; height: 18px; margin-top: 4px; accent-color: var(--encre); }
.form .btn { width: 100%; }
.note { margin-top: 14px; font-size: 0.94rem; color: var(--gris); text-align: center; }
.merci { display: none; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--accent); font-size: 1rem; }
.form.envoye .merci { display: block; }

/* Apparitions au défilement, et le trait de raclette qui se trace une fois */
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .apparait.vu { opacity: 1; transform: none; }
.js .apparait:not(.section--sombre) h2 em { background-size: 0% 0.15em; transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s; }
.js .apparait.vu:not(.section--sombre) h2 em { background-size: 100% 0.15em; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .apparait { opacity: 1; transform: none; transition: none; }
  .js .apparait:not(.section--sombre) h2 em { background-size: 100% 0.15em; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Tablette */
@media (max-width: 1080px) {
  .entete-tel { display: none; }
  .entete-actions { margin-left: auto; }
  .nav { display: none; }
  .burger { display: grid; place-items: center; }
  .entete.ouvert .nav { display: flex; position: fixed; inset: var(--entete) 0 0 0; flex-direction: column; align-items: stretch; gap: 0; height: auto; margin: 0; padding: 12px 24px 120px; overflow-y: auto; background: var(--noir); }
  .entete.ouvert .nav > a, .entete.ouvert .mega-bouton { justify-content: space-between; width: 100%; height: auto; padding: 18px 0; border-bottom: 1px solid var(--trait-s); font-size: 1.2rem; opacity: 1; box-shadow: none; }
  .deroulant { height: auto; }
  .mega { position: static; display: none; opacity: 1; visibility: visible; transform: none; transition: none; border: 0; box-shadow: none; background: none; }
  .deroulant.ouvert .mega { display: block; }
  .mega > .conteneur { width: 100%; grid-template-columns: 1fr; gap: 20px; padding: 16px 0 20px; }
  .mega-liens--2 { grid-template-columns: 1fr; }
  .mega-carte { display: none; }
  .col-4, .bento-401, .bento-374 { grid-template-columns: 1fr 1fr; }
  .onglets-barre { flex-wrap: wrap; gap: 8px; width: auto; padding: 0; border-radius: 0; background: none; overflow: visible; }
  .onglets-barre button { flex: 1 1 auto; background: var(--pierre); }
  .bento-carte--grande { grid-column: 1 / -1; grid-row: auto; }
  .bento-carte--grande .bento-photo { min-height: 300px; max-height: 380px; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .car-item { flex-basis: calc((100vw - 48px - 20px) / 2); }
  .frise-h { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .frise-h::before { display: none; }
  .frise-h li { padding-top: 36px; border-top: 1px solid var(--trait-s); }
  .frise-h li::before { top: -9px; }
  .zone-groupes { grid-template-columns: 1fr; }
  .scinde--avis { grid-template-columns: 1fr; }
  .scinde--avis > div:first-child { position: static; }
}

/* Mobile */
@media (max-width: 760px) {
  body { font-size: 17.5px; padding-bottom: 76px; }
  .conteneur { width: min(100% - 40px, var(--conteneur)); }
  .etiquette { font-size: 0.8rem; letter-spacing: 0.13em; margin-bottom: 16px; }
  .logo small { display: none; }
  .logo b { font-size: 0.92rem; letter-spacing: 0.1em; }
  .logo img { width: 46px; height: 46px; }
  .entete .btn--accent { display: none; }
  .hero { min-height: calc(100svh - var(--entete) - 76px); padding: 64px 0; }
  .hero .etiquette::before { display: none; }
  .hero .boutons .btn, .boutons--centre .btn { width: 100%; }
  .scinde, .atouts, .onglet-panneau, .chiffres-media, .contact-grille, .deux-appels, .appel-photo-carte, .appel-bord, .paires, .faq-2, .avis-3, .page-photo--colonnes .contenu, .page-texte--colonnes .contenu { grid-template-columns: 1fr; }
  .scinde > div:first-child { position: static; }
  .atouts--photo-gauche .atouts-photo { order: 0; }
  .atouts-photo { aspect-ratio: 4 / 4; }
  .col-4, .bento-401, .bento-374, .pied-haut, .sous-titres, .champs, .communes { grid-template-columns: 1fr; }
  .col-ico { margin-bottom: 24px; }
  .onglets-barre button { padding: 13px 14px; font-size: 0.96rem; }
  .avis-2 { columns: 1; }
  .car-item { flex-basis: 78vw; }
  .car-fleche { display: none; }
  .grande-deux, .grande-quatre { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .grande-deux button, .grande-quatre button { aspect-ratio: 1 / 1; }
  .grande-deux button:first-child, .grande-quatre button:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .frise-h { grid-template-columns: 1fr; }
  .faq-2 > div:first-child > details:last-child { border-bottom: 0; }
  .appel-bord .texte { margin: 0; padding: 64px 20px; }
  .appel-bord .photo { min-height: 300px; }
  .appel-photo-carte .photo { min-height: 280px; }
  .appel-ligne .boutons, .appel-ligne .btn { width: 100%; }
  .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--noir); border-top: 1px solid var(--trait-s); }
  .barre-mobile .btn { min-height: 54px; padding: 0 12px; }
}