:root {
  --m-beige: #F3ECE2;
  --m-or: #B39255;
  --m-blanc: #FFFFFF;
}

.m-beige { background: var(--m-beige); position: relative; }

.m-intro { color: var(--encre-douce); max-width: 58ch; }
.m-petit { font-size: 0.875rem; color: var(--encre-douce); }
.m-h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
.etoiles { color: var(--m-or); letter-spacing: 0.12em; }

.m-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 52px; padding: 0.85rem 1.6rem; border: 1px solid var(--noir); font: 600 0.95rem/1.2 var(--police); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; text-align: center; border-radius: var(--forme); transition: background-color 0.25s ease, color 0.25s ease; }
@supports (corner-shape: squircle) { .m-bouton { border-radius: 1.5rem; corner-shape: squircle; } }
.m-bouton--plein { background: var(--noir); color: var(--creme); }
.m-bouton--plein:hover { background: transparent; color: var(--noir); }
.m-bouton--contour { background: transparent; color: var(--noir); }
.m-bouton--contour:hover { background: var(--noir); color: var(--creme); }
.m-bouton--petit { min-height: 42px; padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.m-lien { text-decoration: none; color: var(--noir); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 0.4s ease; }
.m-lien:hover { background-size: 0 1px; background-position: 100% 100%; }
.m-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.entete-actions { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; margin-right: 1rem; pointer-events: auto; }
.entete-tel { display: none; text-decoration: none; font-size: 0.95rem; white-space: nowrap; color: inherit; }

.entete-long { display: none; }
@media (max-width: 39.99rem) { .entete-estimation { min-height: 38px; padding: 0.45rem 0.95rem; font-size: 0.8rem; } .entete-actions { margin-right: 0.75rem; } }
@media (min-width: 40rem) { .entete-long { display: inline; } .entete-court { display: none; } }
@media (min-width: 72rem) { .entete-tel { display: inline; } }
.entete-estimation:hover { background: var(--creme); color: var(--noir); border-color: var(--creme); }

.m-accueil { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gouttiere) clamp(1rem, 3vw, 2rem); }
.m-accueil-grille { display: grid; gap: 1.75rem; }
.m-accueil h2 { margin-top: 1rem; font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.m-accueil-droite { display: grid; gap: 1.4rem; align-content: end; }
.m-accueil-droite > p { color: var(--encre-douce); }
.m-google { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; font-size: 0.95rem; color: var(--encre-douce); justify-self: start; }
.m-google strong { color: var(--noir); }
@media (min-width: 60rem) { .m-accueil-grille { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 7vw, 6rem); align-items: end; } }

.m-envergure-grille { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .m-envergure-grille { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 7rem); } }

.m-envergure { padding-block: clamp(3.5rem, 8vw, 6rem); }
.m-envergure h3 { margin-bottom: 0.75rem; color: var(--noir); }
.m-envergure p { color: var(--encre-douce); max-width: 34rem; }

.m-finis-tete { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); gap: 0.9rem; }
.m-finis-tete .m-intro { font-size: 1rem; line-height: 1.65; }
@media (min-width: 64rem) {
  .m-finis-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: end; }
  .m-finis-tete .etiquette { grid-column: 1 / -1; }
  .m-finis-tete h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
  .m-finis-tete .m-intro { padding-bottom: 0.35rem; }
}

.m-cote-a-cote { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 4vw, 4.5rem); margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.m-cote { display: grid; align-content: start; gap: clamp(0.9rem, 2vw, 1.4rem); }
.m-cote-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme-ombre); }
.m-cote-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-cote h3 { font: 400 clamp(1.15rem, 2.4vw, 1.9rem)/1.15 var(--serif); color: var(--noir); min-height: 2.3em; }
@media (min-width: 48rem) { .m-cote h3 { min-height: 0; } }
.m-specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(120, 92, 52, 0.22); }
.m-specs li { display: grid; gap: 0.15rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(120, 92, 52, 0.12); color: var(--noir); font-size: clamp(0.88rem, 1.4vw, 1.02rem); }
.m-specs span { font: 600 0.62rem/1.6 var(--police); letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-or); }
@media (min-width: 48rem) { .m-specs li { grid-template-columns: 7.5rem 1fr; align-items: baseline; padding: 0.85rem 0; } }
.m-cote--deco .m-specs { border-top-color: var(--m-or); }
.m-cote-ou { position: absolute; left: 50%; top: 0; translate: -50% -50%; margin-top: 31.25%; width: clamp(2.6rem, 5vw, 3.6rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--creme); color: var(--m-or); font: 400 clamp(0.85rem, 1.4vw, 1.05rem)/1 var(--serif); font-style: italic; box-shadow: 0 0 0 1px rgba(120, 92, 52, 0.18), 0 12px 30px -16px rgba(70, 48, 22, 0.45); z-index: 1; }

.m-cote-ou { top: calc(2.3 * clamp(1.15rem, 2.4vw, 1.9rem) + clamp(0.9rem, 2vw, 1.4rem)); margin-top: calc(31.25% - 0.3125 * clamp(0.75rem, 4vw, 4.5rem)); }
@media (min-width: 48rem) { .m-cote-ou { top: calc(1.15 * clamp(1.15rem, 2.4vw, 1.9rem) + clamp(0.9rem, 2vw, 1.4rem)); } }
.m-credit { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.78rem; }

.m-fiche { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.m-fiche:first-child { padding-top: 0; }
.m-fiche:nth-child(even) { background: var(--m-blanc); box-shadow: 0 0 0 100vmax var(--m-blanc); clip-path: inset(0 -100vmax); }
.m-fiches { display: grid; }
.m-fiche { display: grid; gap: 1.75rem; align-items: center; }
.m-fiche-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; max-height: 44rem; background: var(--creme-ombre); }
.m-fiche-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.m-fiche:hover .m-fiche-photo img { transform: scale(1.03); }
.m-fiche-mots { display: grid; gap: 1rem; max-width: 34rem; }
.m-fiche h3 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--noir); }
.m-fiche-phrase { font-size: 1.15rem; line-height: 1.55; color: var(--noir); }
.m-fiche dl { margin: 0.5rem 0 0; display: grid; gap: 1.1rem; }
.m-fiche dt { font: 600 0.72rem/1.4 var(--police); letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-or); margin-bottom: 0.2rem; }
.m-fiche dd { margin: 0; color: var(--encre-douce); }
@media (min-width: 64rem) {
  .m-fiche { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7rem); }
  .m-fiche--inverse { grid-template-columns: 6fr 5fr; }
  .m-fiche--inverse .m-fiche-photo { order: 2; }
}

.m-mur-bloc { margin-top: clamp(5rem, 11vw, 9rem); display: grid; gap: 1.25rem; }
.m-mur-tete { display: grid; gap: 1.25rem; width: 100%; }
@media (min-width: 56rem) { .m-mur-tete { grid-template-columns: 1fr auto; align-items: end; } }
.m-mur-tete .m-h2 { margin-top: 1rem; }
.m-mur-finis, .m-onglets, .m-faq-themes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.m-mur-finis button, .m-onglets button, .m-faq-themes button { border: 1px solid var(--encre); background: transparent; color: var(--encre); padding: 0.6rem 1.1rem; min-height: 44px; font: 400 0.92rem/1.2 var(--police); border-radius: var(--forme); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.m-mur-finis button[aria-pressed="true"], .m-onglets button[aria-selected="true"], .m-faq-themes button[aria-pressed="true"] { background: var(--encre); color: var(--creme); }
.m-mur { display: flex; height: clamp(22rem, 60svh, 36rem); width: 100%; max-width: 78rem; margin-inline: auto; }
.m-mur[data-texture="fresco"] { --tex: url("/medias/r/texture-fresco.webp"); }
.m-mur[data-texture="marrakech"] { --tex: url("/medias/r/texture-marrakech.webp"); }
.m-mur[data-texture="massif"] { --tex: url("/medias/r/texture-massif.webp"); }
.m-bande { flex: 1 1 0; min-width: 0; border: 0; padding: 0 0 1rem; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; background-color: var(--t); background-image: var(--tex); background-size: cover; background-position: center; background-blend-mode: multiply; transition: flex-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.m-bande[aria-pressed="true"] { flex-grow: 4; }
.m-bande span { background: var(--creme); color: var(--noir); padding: 0.3rem 0.6rem; font: 400 0.8rem/1.2 var(--police); white-space: nowrap; transition: opacity 0.3s; }
.m-bande:not([aria-pressed="true"]) span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.6rem 0.3rem; }
@media (min-width: 48rem) {
  .m-bande:not([aria-pressed="true"]) span { writing-mode: initial; transform: none; padding: 0.3rem 0.6rem; }
  .m-bande:not([aria-pressed="true"]):not(:hover) span { opacity: 0; }
}
.m-mur-note { font-size: 0.875rem; color: var(--encre-douce); width: 100%; max-width: 78rem; }
.m-mur-bloc > .mesure { width: 100%; }

.m-inspis { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .m-inspis { grid-template-columns: repeat(3, 1fr); } }
.m-inspi { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--creme-ombre); text-align: left; overflow: hidden; aspect-ratio: 4 / 5; cursor: pointer; border-radius: var(--forme); }
.m-inspi img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.m-inspi-plaque { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: var(--creme); padding: 1.1rem 1.25rem 1.2rem; display: grid; gap: 0.35rem; border-radius: calc(var(--forme) * 0.7); }
.m-inspi-titre { font: 400 1.35rem/1.2 var(--serif); color: var(--noir); }
.m-inspi-plus { font-size: 0.85rem; color: var(--encre-douce); }
@media (hover: hover) and (min-width: 48rem) {
  .m-inspi-plus { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.4s ease; }
  .m-inspi:hover .m-inspi-plus, .m-inspi:focus-visible .m-inspi-plus { max-height: 2rem; opacity: 1; }
  .m-inspi:hover img { transform: scale(1.05); }
}

.m-avis-tete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem clamp(2rem, 6vw, 5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.m-avis-note { display: grid; gap: 0.35rem; }
.m-avis-chiffre { font: 400 clamp(4.5rem, 10vw, 7rem)/0.9 var(--serif); color: var(--noir); max-width: none; }
.m-avis-etoiles { font-size: 1.15rem; letter-spacing: 0.2em; max-width: none; }
.m-avis-source { font: 600 0.68rem/1.4 var(--police); letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-douce); max-width: none; }
.m-avis-mots { display: grid; gap: 0.8rem; flex: 1 1 22rem; padding-bottom: 0.4rem; }
.m-avis-mots h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.m-avis-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gouttiere)); padding: 0.5rem var(--gouttiere) 2rem 0; scroll-padding-left: 0; outline: none; overscroll-behavior-x: contain; }
.m-avis-rail::-webkit-scrollbar { display: none; }
.m-avis-rail:focus-visible { outline: 1px solid var(--m-or); outline-offset: 4px; }
.m-avis-rail ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 2vw, 1.5rem); }
.m-avis-carte { flex: 0 0 clamp(16.5rem, 78vw, 23rem); scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.1rem; min-height: 19rem; padding: clamp(1.75rem, 3vw, 2.4rem); background: var(--m-blanc); box-shadow: 0 1px 0 rgba(120, 92, 52, 0.08), 0 30px 60px -48px rgba(70, 48, 22, 0.5); position: relative; }
.m-avis-carte::before { content: "“"; position: absolute; top: 0.6rem; right: 1.4rem; font: 400 5rem/1 var(--serif); color: rgba(179, 146, 85, 0.28); }
.m-avis-carte-etoiles { color: var(--m-or); font-size: 0.85rem; letter-spacing: 0.22em; max-width: none; }
.m-avis-carte blockquote { margin: 0; flex: 1; }
.m-avis-carte blockquote p { font: 400 clamp(1rem, 1.3vw, 1.12rem)/1.6 var(--serif); color: var(--noir); max-width: none; }
.m-avis-auteur { font: 600 0.68rem/1.4 var(--police); letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-douce); padding-top: 1rem; border-top: 1px solid rgba(120, 92, 52, 0.14); max-width: none; }
.m-avis-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 0.5rem; }
.m-avis-fleches { display: flex; gap: 0.6rem; }
.m-avis-fleche { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(20, 16, 14, 0.25); background: transparent; color: var(--noir); display: grid; place-items: center; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; }
.m-avis-fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.m-avis-fleche:hover { background: var(--noir); color: var(--creme); border-color: var(--noir); }
.m-avis-fleche:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--noir); border-color: rgba(20, 16, 14, 0.25); }
.m-avis-liens { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; }

.m-faq-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin-bottom: 1.4rem; background: var(--m-beige); border-radius: 14px; }
.m-faq-themes button { display: grid; justify-items: center; align-content: center; gap: 0.35rem; min-height: 4.4rem; padding: 0.6rem 0.4rem; border: 0; border-radius: 10px; background: transparent; color: var(--encre-douce); font-size: 0.85rem; line-height: 1.2; text-align: center; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.m-faq-themes button svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.m-faq-themes button[aria-pressed="true"] { background: #FFFFFF; color: var(--noir); box-shadow: 0 1px 2px rgba(70, 48, 22, 0.12), 0 6px 16px -8px rgba(70, 48, 22, 0.35); }
.m-faq-themes button[aria-pressed="true"] svg { color: var(--m-or); }
@media (hover: hover) { .m-faq-themes button[aria-pressed="false"]:hover { color: var(--noir); background: rgba(255, 255, 255, 0.45); } }
@media (max-width: 30rem) { .m-faq-themes button { font-size: 0.7rem; min-height: 4.1rem; padding-inline: 0.2rem; } }
#listeQuestions button[hidden] { display: none !important; }

.m-etapes { max-width: 64rem; margin-inline: auto; background: var(--m-blanc); border: 1px solid rgba(120, 92, 52, 0.14); border-radius: calc(var(--forme) * 1.6); box-shadow: 0 1px 0 rgba(120, 92, 52, 0.05), 0 40px 80px -56px rgba(70, 48, 22, 0.5); padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2.6rem); scroll-margin-top: 5.5rem; }
.m-etape-question { margin: 0 0 clamp(1.2rem, 3vw, 1.8rem); font: 400 clamp(1.9rem, 4.2vw, 3rem)/1.1 var(--serif); letter-spacing: -0.01em; color: var(--noir); }
.m-onglets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 1.4rem; background: var(--m-beige); border-radius: 14px; }
.m-onglets button { display: grid; justify-items: center; align-content: center; gap: 0.35rem; min-height: 4.4rem; padding: 0.6rem 0.4rem; border: 0; border-radius: 10px; background: transparent; color: var(--encre-douce); font: 400 0.92rem/1.2 var(--police); text-align: center; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; -webkit-tap-highlight-color: transparent; }
.m-onglets svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.m-onglets button[aria-selected="true"] { background: #FFFFFF; color: var(--noir); box-shadow: 0 1px 2px rgba(70, 48, 22, 0.12), 0 6px 16px -8px rgba(70, 48, 22, 0.35); }
.m-onglets button[aria-selected="true"] svg { color: var(--m-or); }
.m-onglets button:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
@media (hover: hover) { .m-onglets button[aria-selected="false"]:hover { color: var(--noir); background: rgba(255, 255, 255, 0.45); } }
@media (max-width: 30rem) { .m-onglets button { font-size: 0.78rem; min-height: 4.1rem; padding-inline: 0.2rem; } }
.m-jobber-cadre { position: relative; min-height: 30rem; }
.m-jobber-cadre.m-defile iframe { pointer-events: none; }
.m-jobber-cadre iframe.jobber-work-request { background: transparent; border-radius: 0; }
.m-jobber .jobber-spinner::after { background: transparent; border: 2px solid rgba(179, 146, 85, 0.25); border-top-color: var(--m-or); box-shadow: none; }

.m-reseaux { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.m-reseaux a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); transition: background-color 0.25s; }
.m-reseaux a:hover { background: rgba(255, 255, 255, 0.24); }
.m-reseaux a[hidden] { display: none; }
.m-reseaux svg { width: 20px; height: 20px; fill: currentColor; }

.m-fenetre { border: 0; padding: 2.5rem clamp(1.5rem, 4vw, 2.75rem) 2.25rem; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); background: var(--creme); color: var(--encre); border-radius: var(--forme); }
.m-fenetre::backdrop { background: rgba(20, 16, 14, 0.45); }
.m-fenetre[open] { display: grid; gap: 1rem; }
.m-fenetre h2 { font-size: 2rem; color: var(--noir); }
.m-fenetre .m-bouton { justify-self: start; margin-top: 0.5rem; }
.m-fenetre-fermer { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--noir); cursor: pointer; }
.m-echantillon { height: 7rem; background: var(--t); display: flex; align-items: flex-end; padding: 0.75rem; border-radius: calc(var(--forme) * 0.5); }
.m-echantillon span { background: var(--creme); font-size: 0.8rem; padding: 0.2rem 0.5rem; }
.m-echantillon--petit { width: 44px; height: 44px; flex: none; padding: 0; box-shadow: inset 0 0 0 1px rgba(40, 20, 12, 0.12); }
.m-blancs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.m-blancs li { display: flex; gap: 1rem; align-items: center; font-size: 0.92rem; color: var(--encre-douce); line-height: 1.4; }
.m-blancs strong { color: var(--noir); }
body:has(.m-fenetre[open]) { overflow: hidden; }

#finis.finis, .finis[data-choisi] { display: none !important; }

.fini.piece[data-piece="garage"] { display: none !important; }

.m-mur-bloc { margin-top: 0; }

.m-heros-texte {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: 1.5rem; align-items: end;
  padding: 0 var(--gouttiere) clamp(2rem, 6vh, 4.5rem);
  color: var(--creme);
}
.m-heros-texte .etiquette { color: var(--creme); }
.m-heros-texte h1 { color: var(--creme); font-size: clamp(2.3rem, 5.2vw, 4.6rem); line-height: 1.08; margin-top: 0.9rem; max-width: 15ch; }
.m-heros-texte p:not(.etiquette) { color: var(--creme); max-width: 40ch; }
.m-heros-texte .etiquette, .m-heros-texte h1, .m-heros-texte p {
  text-shadow: 0 1px 2px rgba(20, 16, 14, 0.45), 0 6px 28px rgba(20, 16, 14, 0.5);
}
.m-heros-droite { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 60rem) {
  .m-heros-texte { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 7vw, 6rem); }
}
@media (max-width: 39.99rem) {
  .m-heros-texte { gap: 1rem; }
  .m-heros-texte p:not(.etiquette) { font-size: 0.98rem; }
  .m-heros-texte .m-boutons { width: 100%; }
  .m-heros-texte .m-bouton { flex: 1 1 100%; }
}
.m-bouton--creme { background: var(--creme); color: var(--noir); border-color: var(--creme); }
.m-bouton--creme:hover { background: transparent; color: var(--creme); }
.m-bouton--vitre { background: rgba(20, 16, 14, 0.18); color: var(--creme); border-color: var(--creme); }
.m-bouton--vitre:hover { background: var(--creme); color: var(--noir); }
.m-google-bouton {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0.55rem 1.15rem;
  background: var(--creme); color: var(--noir); text-decoration: none; font-size: 0.95rem;
  border-radius: 999px; transition: transform 0.25s ease, background-color 0.25s ease;
}
.m-google-bouton strong { color: var(--noir); }
.m-google-bouton span:last-child { color: var(--encre); }
.m-google-bouton:hover { transform: translateY(-1px); background: #FFFFFF; }

.heros-photo > picture img, .heros-photo video { filter: brightness(0.78) saturate(0.95); }
.m-heros-texte p:not(.etiquette) { text-shadow: 0 1px 2px rgba(20, 16, 14, 0.6), 0 2px 14px rgba(20, 16, 14, 0.55); }

@media (max-width: 39.99rem) {
  .m-heros-texte { padding-bottom: 1.5rem; gap: 0.85rem; }
  .m-heros-texte .etiquette { font-size: 0.62rem; letter-spacing: 0.12em; }
  .m-heros-texte h1 { font-size: 2.05rem; margin-top: 0.6rem; }
  .m-heros-texte p:not(.etiquette) { font-size: 0.92rem; line-height: 1.5; }
  .m-heros-droite { gap: 0.85rem; }
  .m-heros-texte .m-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .m-heros-texte .m-bouton { min-height: 48px; padding: 0.6rem 0.7rem; font-size: 0.85rem; }
  .m-google-bouton { min-height: 42px; font-size: 0.88rem; }
}

.m-heros-texte { grid-template-columns: 1fr !important; gap: 1.5rem; }
.m-heros-droite { justify-items: start; }

.m-heros-texte { inset: 0; align-content: center; align-items: center; justify-items: center; text-align: center; padding-bottom: 0; }
.m-heros-gauche { display: grid; justify-items: center; }
.m-heros-droite { justify-items: center; }
.m-titre-trace { margin-inline: auto; }

.m-titre-trace { width: calc(7.45 * clamp(2.3rem, 5.2vw, 4.6rem)); max-width: 100%; margin-top: 0.9rem; color: var(--creme); animation: none !important; overflow: visible; }
@media (max-width: 39.99rem) { .m-titre-trace { width: calc(7.45 * 2.05rem); } }
.m-heros-texte .etiquette, .m-google-bouton { opacity: var(--libre, 1); transition: opacity 0.2s linear; }

.mur-canevas { cursor: default; }

.defile-panneau { --cran: clamp(0.8rem, 1.2vw, 1.1rem); }
.defile-panneau picture { border-radius: clamp(0.75rem, 1.1vw, 1rem); }

.defile-panneau picture { border-radius: 0; }
.carte { --forme: 0px; border-radius: 0; }

.carte { background: #F4EEE4; border-color: rgba(179, 146, 85, 0.35); }
.carte-piste[data-defile] .carte-bord { background: rgba(179, 146, 85, 0.4); }
.carte-routes path { stroke: #8F6E3A; stroke-width: 2.25; }
.carte[data-anime] .carte-routes path { stroke-width: calc(var(--trait, 3) * 0.75); }
.carte-ville::before { border: 1px solid var(--m-or); background-color: #FFFCF7; box-shadow: 0 0 0 3px rgba(244, 238, 228, 0.9), 0 6px 16px -6px rgba(70, 48, 22, 0.45); }
.carte-ville span, .carte-region span { text-shadow: 0 0 2px #F4EEE4, 0 0 2px #F4EEE4, 0 0 4px #F4EEE4, 0 0 4px #F4EEE4, 0 0 7px #F4EEE4; }
.carte-ville span { font-weight: 400; color: var(--noir); letter-spacing: 0.02em; }
.carte-ville[data-depart] span { font-weight: 400; font-size: clamp(12px, 2.7cqw, 22px); letter-spacing: 0.04em; }
.carte-region span { font-weight: 400; letter-spacing: 0.32em; color: var(--m-or); }

.m-fiche { position: sticky; top: var(--colle, 4.5rem); isolation: isolate; }
.m-fiche, .m-fiche:nth-child(even) { background: none; box-shadow: none; clip-path: none; }
.m-fiche::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vmax; background: var(--m-beige); }
.m-fiche:nth-child(even)::before { background: var(--m-blanc); }
.m-fiche:not(:first-child)::after { content: ""; position: absolute; z-index: -1; left: -100vmax; right: -100vmax; bottom: 100%; height: 28px; background: linear-gradient(to top, rgba(40, 20, 12, 0.1), rgba(40, 20, 12, 0)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .m-fiche { position: relative; top: auto; } }

@media (max-width: 63.99rem) {
  .m-fiche { row-gap: 1rem; }
  .m-fiche-mots { display: contents; }
  .m-fiche h3 { order: -2; }
  .m-fiche-photo { order: -1; margin: 0.25rem 0 0.75rem; }
  
  .m-fiche-photo { aspect-ratio: 1 / 1; }
  .m-fiche-photo[style*="height"] { aspect-ratio: auto; }   
  
  .m-fiches { row-gap: 35svh; }
  .m-fiche:not(:first-child) { padding-block: 1.5rem; }   
  .m-fiche::before { bottom: -35svh; }
  
  .m-fiches { clip-path: inset(0 -100vmax); }
  .m-fiche-mots > * { max-width: 34rem; }
}

.m-pinceau.m-pinceau { position: relative; isolation: isolate; color: var(--m-encre-pinceau); font-style: normal; white-space: nowrap; }
.m-pinceau::before {
  content: ""; position: absolute; z-index: -1; left: -0.1em; right: -0.12em; top: 0.22em; bottom: -0.02em;
  background: var(--m-teinte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M6%2024c3-6%2010-9%2022-10%2020-2%2041-1%2062-3%2024-2%2049-1%2073-2%2021-1%2041-1%2057%201%209%201%2015%204%2014%208-1%203%202%206%201%2010-1%205-7%208-17%209-17%202-36%201-55%202-23%201-47%203-71%203-20%201-40%202-58%201-12-1-24-3-28-8-3-3-2-7%200-11z%22/%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%20d%3D%22M2%2030c4-2%209-2%2013-1-4%203-9%204-13%201zM224%2012c5%200%2010%202%2013%205-5%200-10-1-13-5zM40%2041c25%201%2050-1%2075%200-25%203-50%203-75%200z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.9%22%20d%3D%22M30%2020c30-2%2060-2%2092-3-30%203-61%204-92%203zM70%2033c35-1%2070-2%20104-1-35%202-69%203-104%201zM150%2025c20-1%2040-1%2058%200-19%202-38%202-58%200z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M6%2024c3-6%2010-9%2022-10%2020-2%2041-1%2062-3%2024-2%2049-1%2073-2%2021-1%2041-1%2057%201%209%201%2015%204%2014%208-1%203%202%206%201%2010-1%205-7%208-17%209-17%202-36%201-55%202-23%201-47%203-71%203-20%201-40%202-58%201-12-1-24-3-28-8-3-3-2-7%200-11z%22/%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%20d%3D%22M2%2030c4-2%209-2%2013-1-4%203-9%204-13%201zM224%2012c5%200%2010%202%2013%205-5%200-10-1-13-5zM40%2041c25%201%2050-1%2075%200-25%203-50%203-75%200z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.9%22%20d%3D%22M30%2020c30-2%2060-2%2092-3-30%203-61%204-92%203zM70%2033c35-1%2070-2%20104-1-35%202-69%203-104%201zM150%2025c20-1%2040-1%2058%200-19%202-38%202-58%200z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-1.2deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0.05, 0.25, 1) 0.15s;
}
.m-pinceau[data-peint]::before { clip-path: inset(0 -2% 0 0); }

.m-pinceau:not([data-peint])::before { transition: none; }
.m-pinceau--rose  { --m-teinte: #F5BFC6; --m-encre-pinceau: #A9475C; }
.m-pinceau--peche { --m-teinte: #F8CDB0; --m-encre-pinceau: #A85B2E; }
.m-pinceau--bleu  { --m-teinte: #C5DAF3; --m-encre-pinceau: #3F6A96; }
.m-pinceau--lilas { --m-teinte: #D3CDEE; --m-encre-pinceau: #635597; }
.m-pinceau--or    { --m-teinte: #EED99A; --m-encre-pinceau: #87681F; }

.duo-phrase .m-pinceau::before { left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) { .m-pinceau::before { transition: none; clip-path: none; } }

html { touch-action: manipulation; }

.m-idees { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-items: start; }
@media (min-width: 48rem) { .m-idees { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); } }
.m-idee { position: relative; background: var(--m-blanc); border: 1px solid rgba(120, 92, 52, 0.14); box-shadow: 0 1px 0 rgba(120, 92, 52, 0.06), 0 26px 50px -34px rgba(70, 48, 22, 0.4); transition: border-color 0.3s ease, box-shadow 0.5s ease; }
.m-idee::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 2.5rem; background: var(--m-or); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-idee-tete { display: grid; gap: 0.5rem; width: 100%; padding: clamp(1.5rem, 3vw, 2rem) 3.75rem clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.m-idee-tete:focus-visible { outline: 2px solid var(--noir); outline-offset: -4px; }
.m-idee-titre { font: 400 clamp(1.3rem, 2vw, 1.55rem)/1.2 var(--serif); color: var(--noir); }
.m-idee-signe { position: absolute; right: clamp(1.25rem, 3vw, 1.75rem); top: 50%; width: 1.1rem; height: 1.1rem; translate: 0 -50%; }
.m-idee-signe::before, .m-idee-signe::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--noir); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-idee-signe::after { transform: rotate(90deg); }
.m-idee-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-idee-dedans { min-height: 0; overflow: hidden; display: grid; gap: 1rem; padding: 0 clamp(1.25rem, 3vw, 2rem); opacity: 0; transition: opacity 0.35s ease, padding 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-idee-dedans p { color: var(--encre-douce); line-height: 1.6; }
.m-idee-dedans .m-bouton { justify-self: start; }
.m-idee[data-ouverte] .m-idee-corps { grid-template-rows: 1fr; }
.m-idee[data-ouverte] .m-idee-dedans { opacity: 1; padding-bottom: clamp(1.5rem, 3vw, 2rem); transition-delay: 0s, 0s; }
.m-idee[data-ouverte]::before { width: 100%; }
.m-idee[data-ouverte] .m-idee-signe::after { transform: rotate(0deg); }
@media (hover: hover) {
  .m-idee:hover { border-color: rgba(179, 146, 85, 0.45); box-shadow: 0 1px 0 rgba(120, 92, 52, 0.06), 0 40px 70px -38px rgba(70, 48, 22, 0.5); }
  .m-idee:hover .m-idee-corps { grid-template-rows: 1fr; }
  .m-idee:hover .m-idee-dedans { opacity: 1; padding-bottom: clamp(1.5rem, 3vw, 2rem); }
  .m-idee:hover::before { width: 100%; }
  .m-idee:hover .m-idee-signe::after { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .m-idee-corps, .m-idee-dedans, .m-idee::before { transition: none; } }

.defile-panneau picture::after { content: none; }

.populaires-titre { font: 400 0.68rem/1.4 var(--police); letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 0.5rem; }
.populaires-rang { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 56rem) {
  .populaires { order: 4; margin-top: 1rem; }
  .populaires-rang .pastille { width: 36px; height: 36px; flex: 0 0 auto; }
  .pastilles { order: 5; }
  .couleur-nom { order: 6; }
  .couleur-note { order: 7; }
}
@media (min-width: 56.0625rem) {
  .selecteur { grid-template-rows: repeat(8, auto) 1fr; }
  .populaires { grid-column: 2; grid-row: 5; margin-top: 0.9rem; }
  .populaires-rang .pastille { width: 40px; height: 40px; }
  .pastilles { grid-row: 6; }
  .couleur-nom { grid-row: 7; }
  .couleur-note { grid-row: 8; }
}

.populaires { padding-bottom: 1rem; border-bottom: 1px solid rgba(120, 92, 52, 0.2); }

@media (max-width: 56rem) {
  .populaires-rang { gap: 0.62rem; padding: 4px; }
  .populaires-titre { padding-left: 4px; }
}

@media (max-width: 47.99rem) {
  .m-avis-rail ul { gap: 0.75rem; }
  .m-avis-carte { flex: 0 0 calc((100vw - 2 * var(--gouttiere) - 0.75rem) / 2); min-height: 0; gap: 0.7rem; padding: 1.05rem 0.95rem 1rem; }
  .m-avis-carte::before { top: 0.35rem; right: 0.7rem; font-size: 2.8rem; }
  .m-avis-carte-etoiles { font-size: 0.66rem; letter-spacing: 0.14em; }
  .m-avis-carte blockquote p { font-size: 0.84rem; line-height: 1.5; }
  .m-avis-auteur { font-size: 0.58rem; letter-spacing: 0.14em; padding-top: 0.7rem; }
}

#services { background: var(--m-beige); }

html, body { overscroll-behavior-x: none; }
.m-envergure { overflow: clip; }

@media (max-width: 55.99rem) {
  .entete-barre::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -14px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
    background: linear-gradient(to bottom, var(--creme) calc(100% - 14px), rgba(255, 252, 247, 0)); }
  .entete[data-fond]:not([data-ouvert]) .entete-barre::before { opacity: 1; }
  .entete[data-fond][data-ton="clair"]:not([data-ouvert]) { color: var(--encre); }
  .entete[data-fond][data-ton="clair"]:not([data-ouvert]) .menu-bouton span { box-shadow: none; }

  .pastille::before { content: ""; position: absolute; inset: -5px; }
  .fini.piece { min-height: 40px; }
  .pied a, .m-avis-liens a { position: relative; }
  .pied a::before, .m-avis-liens a::before { content: ""; position: absolute; inset: -8px -4px; }
}

.m-faq-fin { margin: 1.6rem 0 0; color: var(--encre-douce); }
.m-faq-fin a { color: var(--noir); text-underline-offset: 3px; overflow-wrap: anywhere; }

.m-titre-trace { width: calc(9.97 * clamp(2.1rem, 4.4vw, 4rem)); }
@media (max-width: 39.99rem) { .m-titre-trace { width: 100%; } }
.m-heros-texte p.m-heros-metiers {
  max-width: none; line-height: 1.8;
  margin: 1.1rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(240, 200, 196, 0.85);
  font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--creme);
  opacity: var(--libre, 1); transition: opacity 0.2s linear;
}
.m-heros-droite { gap: 0.9rem; }
.m-heros-metiers span { white-space: nowrap; }
.m-heros-texte p.m-heros-invite { max-width: none; margin: 0; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--creme); }
.m-heros-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.m-heros-choix .m-bouton { min-height: 48px; padding: 0.7rem 1.4rem; border-radius: 999px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m-heros-invite, .m-heros-choix { opacity: var(--libre, 1); transition: opacity 0.2s linear; }
.m-heros-texte p.m-heros-metiers, .m-heros-texte p.m-heros-invite { text-shadow: 0 1px 2px rgba(20, 16, 14, 0.6), 0 2px 14px rgba(20, 16, 14, 0.55); }
@media (max-width: 39.99rem) {
  .m-heros-texte { padding-inline: 1.25rem; }
  .m-heros-texte p.m-heros-metiers { font-size: 0.68rem; letter-spacing: 0.14em; line-height: 1.9; margin-top: 0.8rem; padding-top: 0.7rem; }
  .m-heros-texte p.m-heros-invite { font-size: 0.68rem; letter-spacing: 0.16em; }
  .m-heros-texte { padding-top: 5rem; }
  
  .m-heros-choix { gap: 0.5rem; max-width: 22rem; }
  .m-heros-texte .m-heros-choix .m-bouton { flex: 0 0 auto; width: auto; min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.85rem; }
}
@media (max-width: 39.99rem) and (max-height: 700px) {
  .m-heros-texte { gap: 0.6rem; }
  .m-heros-droite { gap: 0.6rem; }
  .m-heros-texte .m-heros-choix .m-bouton { min-height: 44px; }
}

.m-idees { gap: 2.25rem; }
.m-idee { border-color: rgba(179, 146, 85, 0.55); }
.m-idee::before { width: 0; }
.m-idee-tire { position: absolute; left: 50%; top: 100%; translate: -50% 0; margin-top: -1px; width: 2.9rem; height: 1.45rem; display: grid; place-items: center; background: var(--m-blanc); border: 1px solid rgba(179, 146, 85, 0.55); border-top: 0; border-radius: 0 0 999px 999px; box-shadow: 0 10px 18px -12px rgba(70, 48, 22, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-idee-tire i { margin-top: -0.3rem; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #8C6A3A; transition: rotate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.m-idee[data-ouverte] .m-idee-tire i { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) { .m-idee:hover .m-idee-tire i { rotate: 180deg; } }

@media (max-width: 47.99rem) {
  #avis .m-avis-rail ul { align-items: flex-start; }
  #avis .m-avis-carte blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; min-height: 6em; }
  #avis .m-avis-carte[data-coupe] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #avis .m-avis-carte[data-ouverte] blockquote p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
}

.chat-suite { display: none; }
@media (max-width: 47.99rem) {
  .chat-choix { position: relative; }
  .chat-suite { display: grid; place-items: center; position: absolute; right: 0.55rem; bottom: calc(1.1rem + 22px); translate: 0 50%; width: 2rem; height: 2rem; padding: 0; border: 1px solid #000; border-radius: 999px; background: #FFFFFF; color: #000; box-shadow: -14px 0 14px 4px #FFFFFF; cursor: pointer; transition: opacity 0.3s; -webkit-tap-highlight-color: transparent; }
  .chat-suite svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: chat-suite 1.6s ease-in-out infinite; }
  .chat-suite[data-fin] { opacity: 0; pointer-events: none; }
}
@keyframes chat-suite { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
@media (prefers-reduced-motion: reduce) { .chat-suite svg { animation: none; } }