/* =========================================================================
   parquet.css : ce que le contenu de 1Parquet ajoute au système de la
   maquette Anthony Gand (jetons, composants, mouvements repris tels quels).
   ========================================================================= */
:root {
  --c-orange: #DA741B;          /* orange du client : étoiles, icônes, filets */
  --c-orange-bouton: #B85A0C;   /* orange du client assombri : fond des boutons, texte blanc lisible (4,7:1) */
  --c-orange-texte: #A44E08;    /* petits textes orange sur fond clair (5,6:1) */
  --c-brun: #362317;            /* brun du bouton clair et des sections sombres */
}

/* ---- Logo : mot-symbole du client, version foncée ou claire ------------- */
.marque__logo { width: auto; height: 34px; }
.marque__logo--clair { display: none; }
.entete[data-fond='sombre'] .marque__logo--fonce { display: none; }
.entete[data-fond='sombre'] .marque__logo--clair { display: block; }
.pied .marque__logo--fonce { display: none; }
.pied .marque__logo--clair { display: block; height: 38px; }
@media (max-width: 767px) { .marque__logo { height: 28px; } }

/* ---- Boutons : orange du client (assombri pour le texte blanc), brun au survol */
.bouton--plein,
.hero__actions .bouton--plein,
.entete .bouton--entete,
.entete[data-fond='clair'] .bouton--entete { background: var(--c-orange-bouton); color: var(--c-blanc); }

.bouton--plein:hover, .bouton--plein[data-actif], .bouton--plein:active,
.hero__actions .bouton--plein:hover, .hero__actions .bouton--plein[data-actif], .hero__actions .bouton--plein:active,
.entete .bouton--entete:hover, .entete .bouton--entete[data-actif], .entete .bouton--entete:active,
.entete[data-fond='clair'] .bouton--entete:hover,
.entete[data-fond='clair'] .bouton--entete[data-actif],
.entete[data-fond='clair'] .bouton--entete:active { background: var(--c-brun); color: var(--c-blanc); }

.bouton--creme:hover, .bouton--creme[data-actif],
.hero__actions .bouton--creme:hover, .hero__actions .bouton--creme[data-actif] { background: var(--c-brun); color: var(--c-blanc); }

.bouton--contour { border-color: var(--c-orange-bouton); color: var(--c-orange-texte); }
.bouton--contour:hover, .bouton--contour[data-actif], .bouton--contour:active { background: var(--c-brun); border-color: var(--c-brun); color: var(--c-blanc); }
.bouton--clair:hover, .bouton--clair[data-actif], .bouton--clair:active { background: var(--c-brun); color: var(--c-blanc); }

/* ---- Petits textes orange : version assombrie ---------------------------- */
.surtitre, .badge--accent, .lien-fleche, .hero-page__texte a,
.carte:not(.carte--sombre) .surtitre { color: var(--c-orange-texte); }
.section--sombre .surtitre, .appel .surtitre, .carte--sombre .surtitre { color: #F2B27A; }
.badge--accent { background: #FBEBDB; border-color: #F2D2B3; }
.duo__titre em { color: inherit; }
.hero__actions .bouton--creme { background: var(--c-blanc); color: var(--c-brun); }
.hero__apercu-lieu { color: var(--c-orange-texte); }
.hero__google .etoiles, .hero__temoignage .etoiles, .avis-carte .etoiles, .pratique__note .etoiles { color: var(--c-orange); }
.pastille { background: var(--c-orange-bouton); }
.faq__signe { color: var(--c-orange-bouton); }
.faq__element[data-ouvert='true'] .faq__signe { background: var(--c-orange-bouton); color: var(--c-blanc); }
.faq__element[data-ouvert='true'] .faq__reponse { grid-template-rows: 1fr; }

/* ---- Hero ---------------------------------------------------------------- */
.hero__contenu { max-width: 980px; }
.hero__titre { max-width: 880px; text-wrap: balance; }
.hero__texte { max-width: 700px; }
.hero__google {
  gap: var(--sp-3);
  color: var(--c-encre);
  text-decoration: none;
  margin-block-end: var(--sp-2);
  transition: background var(--tr-rapide), translate var(--tr-rapide);
}
.hero__google .etoiles { gap: 2px; }
.hero__google .etoiles svg { width: 16px; height: 16px; }
.hero__google-chiffre { font-weight: var(--fw-gras); }
.hero__google-libelle { font-weight: var(--fw-moyen); }
@media (hover: hover) { .hero__google:hover { background: var(--c-blanc); translate: 0 -1px; } }
.hero__google:focus-visible { outline: 2px solid var(--c-blanc); outline-offset: 3px; }
.hero__temoignage .etoiles svg { width: 20px; height: 20px; }
.hero__temoignage .hero__citation { font-size: var(--fs-sm); line-height: 1.55; margin-block-start: var(--sp-4); }

/* ---- Bande défilante ------------------------------------------------------ */
.bandeau__piste { animation: bandeauContinu 70s linear infinite; will-change: transform; backface-visibility: hidden; }
@keyframes bandeauContinu { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.bandeau .label svg { color: var(--c-orange); }
@media (prefers-reduced-motion: reduce) {
  .bandeau__piste { animation: none; }
  .bandeau__groupe + .bandeau__groupe { display: none; }
}

/* ---- Rail et liens ------------------------------------------------------- */
a.carte--nu { display: block; color: inherit; text-decoration: none; }
.section-suite--centre { text-align: center; }
.section-titre--moyen { font-size: var(--fs-3xl); }
.tel-insecable { white-space: nowrap; }

/* ---- Présentation : photo de l'artisan + texte ---------------------------- */
.presentation {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.presentation__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2xl); box-shadow: var(--sh-flottant); }
.presentation__texte .section-titre { margin-block-start: var(--sp-5); }
.presentation__texte .duo__paragraphe { max-width: 60ch; }
.presentation__liste { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-8); max-width: 60ch; }
.presentation__liste li {
  position: relative;
  padding-inline-start: var(--sp-8);
  font-size: var(--fs-md);
  line-height: var(--lh-texte);
  color: var(--c-encre-douce);
}
.presentation__liste li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .5em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-orange);
}
.presentation__liste strong { color: var(--c-encre); }
@media (max-width: 899px) {
  .presentation { grid-template-columns: minmax(0, 1fr); }
  .presentation__photo { max-width: 420px; }
}

/* ---- Avant / après ---------------------------------------------------------- */
.comparateur--seul { max-width: 980px; margin-inline: auto; }
.comparateur--seul .avant-apres { aspect-ratio: 4 / 3; border-radius: var(--r-2xl); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.comparateur--seul .avant-apres img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparateur__legende { margin-block-start: var(--sp-4); text-align: center; font-size: var(--fs-md); font-weight: var(--fw-demi); color: var(--c-encre); }
.avant-apres__bouton { background: var(--c-orange-bouton); color: var(--c-blanc); }
@media (max-width: 639px) { .comparateur--seul .avant-apres { aspect-ratio: 1 / 1; } }

/* ---- Aperçu du simulateur (accueil) ------------------------------------- */
.apercu-devis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.apercu-devis .section-titre { margin-block-start: var(--sp-4); }
.apercu-devis .section-chapo { margin-block-start: var(--sp-5); max-width: 52ch; }
.apercu-devis .duo__actions { margin-block-start: var(--sp-8); }
.apercu-devis__prix { display: grid; gap: var(--sp-3); }
.apercu-devis__prix li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-trait-sombre);
  border-radius: var(--r-lg);
  background: rgba(250, 248, 245, .06);
}
.apercu-devis__prix span { font-size: var(--fs-md); color: var(--c-encre-claire); }
.apercu-devis__prix strong { font-size: var(--fs-xl); font-weight: var(--fw-gras); color: var(--c-blanc); }
@media (max-width: 899px) { .apercu-devis { grid-template-columns: minmax(0, 1fr); } }

/* ---- Avis : une seule carte, centrée ----------------------------------- */
.avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.avis-grille--seul { grid-template-columns: minmax(0, 720px); justify-content: center; }
.avis-carte { display: flex; flex-direction: column; gap: var(--sp-5); margin: 0; padding: var(--sp-8); border: 1px solid var(--c-trait); border-radius: var(--r-xl); background: var(--c-blanc); }
.avis-carte .etoiles { gap: 3px; }
.avis-carte .etoiles svg { width: 18px; height: 18px; }
.avis-carte__texte { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-texte); color: var(--c-encre); flex: 1; }
.avis-carte__auteur { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-encre-douce); }
.avis-carte__auteur strong { color: var(--c-encre); }

/* ---- Appel final : deux boutons côte à côte ------------------------------- */
.appel__action--double { display: flex; flex-wrap: wrap; gap: var(--sp-4); flex-direction: row; align-items: center; }
.appel__action--double .bouton { width: auto; }
@media (max-width: 639px) { .appel__action--double { flex-direction: column; align-items: stretch; } }

/* ---- Contact -------------------------------------------------------------- */
.pratique__avis { display: block; color: inherit; text-decoration: none; transition: translate var(--tr-rapide); }
@media (hover: hover) { .pratique__avis:hover { translate: 0 -2px; } }
.pratique__note { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pratique__note .etoiles { gap: 2px; }
.pratique__note .etoiles svg { width: 16px; height: 16px; }
.pratique__citation { margin-block-start: var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-encre-claire); }
.pratique__valeur a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pratique__titre { color: var(--c-encre); }
.formulaire-bloc .pratique__titre { color: var(--c-blanc); }
@media (max-width: 1100px) { .formulaire-bloc .pratique__titre { color: var(--c-encre); } }
.hero-page__texte a { font-weight: var(--fw-demi); }
.hero-page__titre { max-width: 22ch; }

/* ---- Page Prestations -------------------------------------------------------- */
.ancres { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-10); }
.ancre {
  display: inline-flex; align-items: center; height: 44px; padding-inline: var(--sp-5);
  border: 1px solid var(--c-trait); border-radius: var(--r-pill); background: var(--c-blanc);
  font-size: var(--fs-sm); font-weight: var(--fw-demi); color: var(--c-encre);
  transition: background var(--tr-rapide), color var(--tr-rapide), border-color var(--tr-rapide);
}
@media (hover: hover) { .ancre:hover { background: var(--c-orange-bouton); border-color: var(--c-orange-bouton); color: var(--c-blanc); } }
section[id] { scroll-margin-top: 24px; }

.presta { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.presta:nth-child(even) .presta__visuel { order: 0; }
.presta--inverse .presta__visuel { order: -1; }
.presta__numero { background: var(--c-orange-bouton); }
.presta__titre { max-width: 16ch; }
.presta__visuel { width: 100%; height: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-xl); }
.presta .duo__actions { margin-block-start: var(--sp-8); }
@media (max-width: 899px) {
  .presta, .presta--inverse { grid-template-columns: minmax(0, 1fr); }
  .presta--inverse .presta__visuel { order: 0; }
  .presta__visuel { max-height: 380px; }
}

.sous-section { margin-block-start: clamp(56px, 7vw, 104px); }
.sous-section .section-entete { margin-block-end: var(--sp-10); }
.sous-section .section-chapo { max-width: 70ch; }

.tableau { border: 1px solid var(--c-trait); border-radius: var(--r-xl); background: var(--c-blanc); overflow: hidden; }
.tableau__ligne { display: grid; grid-template-columns: .7fr 1fr 2fr; gap: var(--sp-6); padding: var(--sp-5) var(--sp-8); border-block-start: 1px solid var(--c-trait); font-size: var(--fs-md); color: var(--c-encre-douce); }
.tableau__ligne:first-child { border-block-start: 0; }
.tableau__ligne span:first-child { font-weight: var(--fw-gras); color: var(--c-encre); }
.tableau__ligne--tete { background: var(--c-creme-2); font-size: var(--fs-xs); font-weight: var(--fw-gras); letter-spacing: var(--ls-capitales); text-transform: uppercase; color: var(--c-encre-douce); }
@media (max-width: 639px) { .tableau__ligne { grid-template-columns: .8fr 1fr; padding: var(--sp-4) var(--sp-5); } .tableau__ligne span:nth-child(3) { grid-column: 1 / -1; } }

.machines { display: grid; gap: var(--sp-6); }
.machine {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 3vw, 36px); background: var(--c-blanc); border: 1px solid var(--c-trait); border-radius: var(--r-2xl); box-shadow: var(--sh-carte);
}
.machine:nth-child(even) img { order: 2; }
.machine img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); }
.machine__etape { font-size: var(--fs-xs); font-weight: var(--fw-gras); letter-spacing: var(--ls-capitales); text-transform: uppercase; color: var(--c-orange-texte); }
.machine__titre { margin-block-start: var(--sp-3); font-size: var(--fs-2xl); }
.machine__texte { margin-block-start: var(--sp-4); font-size: var(--fs-md); line-height: var(--lh-large); color: var(--c-encre-douce); max-width: 62ch; }
.machine__liste, .carte__liste { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.machine__liste li, .carte__liste li { position: relative; padding-inline-start: var(--sp-6); font-size: var(--fs-sm); font-weight: var(--fw-demi); color: var(--c-encre); }
.machine__liste li::before, .carte__liste li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-orange); }
@media (max-width: 899px) { .machine { grid-template-columns: minmax(0, 1fr); } .machine:nth-child(even) img { order: 0; } }

.carte__numero { font-size: var(--fs-sm); font-weight: var(--fw-gras); letter-spacing: var(--ls-capitales); text-transform: uppercase; color: var(--c-orange-texte); }
.carte__numero + .carte__titre { margin-block-start: var(--sp-3); }
.carte .carte__texte { margin-block-start: var(--sp-3); }
.grille--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.grille--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.grille--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 1023px) { .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .grille--2, .grille--4 { grid-template-columns: minmax(0, 1fr); } }
.carte--creme { background: var(--c-blanc); }
.section--creme-2 .carte { background: var(--c-blanc); }

.qualite { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; padding: clamp(28px, 4vw, 56px); background: var(--c-brun); border-radius: var(--r-2xl); color: var(--c-blanc); }
.qualite .section-titre { color: var(--c-blanc); margin-block-start: var(--sp-4); }
.qualite .surtitre { color: #F2B27A; }
.qualite__liste { display: grid; gap: var(--sp-4); }
.qualite__liste li { position: relative; padding-inline-start: var(--sp-8); font-size: var(--fs-md); line-height: var(--lh-large); color: var(--c-encre-claire); }
.qualite__liste li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .6em; width: 14px; height: 14px; border-radius: 50%; background: var(--c-orange); }
.qualite__liste strong { color: var(--c-blanc); }
@media (max-width: 899px) { .qualite { grid-template-columns: minmax(0, 1fr); } }

.nuancier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.ton { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); border: 1px solid var(--c-trait); border-radius: var(--r-xl); background: var(--c-blanc); font-size: var(--fs-sm); color: var(--c-encre-douce); line-height: 1.45; }
.ton strong { font-size: var(--fs-md); color: var(--c-encre); }
.ton__pastille { display: block; width: 100%; aspect-ratio: 16 / 9; margin-block-end: var(--sp-2); border-radius: var(--r-md); background: var(--ton); box-shadow: inset 0 0 0 1px rgba(37, 29, 24, .12); }
@media (max-width: 1023px) { .nuancier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .nuancier { grid-template-columns: minmax(0, 1fr); } }
.ambiance__ton { display: block; width: 100%; height: 96px; margin-block-end: var(--sp-5); border-radius: var(--r-md); background: var(--ton); box-shadow: inset 0 0 0 1px rgba(37, 29, 24, .12); }

/* ---- Simulateur ------------------------------------------------------------- */
.simulateur { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-8); align-items: start; }
.simulateur__saisie { display: grid; gap: var(--sp-6); }
.sim-bloc { margin: 0; padding: var(--sp-8); border: 1px solid var(--c-trait); border-radius: var(--r-2xl); background: var(--c-blanc); min-width: 0; }
.sim-bloc[hidden] { display: none; }
.sim-bloc__titre { padding: 0; display: flex; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-gras); letter-spacing: var(--ls-capitales); text-transform: uppercase; color: var(--c-orange-texte); }
.sim-prestations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-block-start: var(--sp-5); }
.sim-presta { display: grid; gap: var(--sp-2); padding: var(--sp-5); text-align: left; cursor: pointer; border: 2px solid var(--c-trait); border-radius: var(--r-lg); background: var(--c-creme); transition: border-color var(--tr-rapide), background var(--tr-rapide); }
.sim-presta[aria-pressed='true'] { border-color: var(--c-orange-bouton); background: #FBEBDB; }
.sim-presta:focus-visible, .sim-etat__bouton:focus-visible { outline: 2px solid var(--c-orange-bouton); outline-offset: 3px; }
.sim-presta__ligne { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.sim-presta__nom { font-family: var(--f-titre); font-size: var(--fs-lg); font-weight: var(--fw-gras); color: var(--c-encre); }
.sim-presta__prix { font-size: var(--fs-sm); font-weight: var(--fw-gras); color: var(--c-orange-texte); white-space: nowrap; }
.sim-presta__note { font-size: var(--fs-sm); color: var(--c-encre-douce); line-height: 1.4; }
.sim-surface { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-block-start: var(--sp-5); }
.sim-surface__valeur { font-family: var(--f-titre); font-size: var(--fs-4xl); font-weight: var(--fw-noir); color: var(--c-encre); }
#sim-unites + *, .sim-surface__valeur span:only-child { font-size: var(--fs-lg); }
.sim-nombre { width: 120px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-trait); border-radius: var(--r-md); background: var(--c-creme); font-size: var(--fs-md); }
.sim-curseur { width: 100%; margin-block-start: var(--sp-5); accent-color: var(--c-orange-bouton); }
.sim-etat { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.sim-etat__bouton { flex: 1; height: 52px; border: 2px solid var(--c-trait); border-radius: var(--r-lg); background: var(--c-creme); font-weight: var(--fw-demi); cursor: pointer; }
.sim-etat__bouton[aria-pressed='true'] { border-color: var(--c-orange-bouton); background: #FBEBDB; color: var(--c-encre); }

.simulateur__resultat { position: sticky; inset-block-start: calc(var(--l-header) + 16px); padding: var(--sp-8); border-radius: var(--r-2xl); background: var(--c-brun); color: var(--c-blanc); }
.simulateur__intitule { font-size: var(--fs-xs); font-weight: var(--fw-gras); letter-spacing: var(--ls-capitales); text-transform: uppercase; color: #F2B27A; }
.simulateur__fourchette { margin-block-start: var(--sp-4); font-family: var(--f-titre); font-size: clamp(26px, 2.4vw, 34px); font-weight: var(--fw-noir); line-height: 1.1; letter-spacing: var(--ls-titre); }
.simulateur__fourchette span { font-size: .55em; font-weight: var(--fw-moyen); color: var(--c-encre-claire); }
.simulateur__precision { margin-block-start: var(--sp-2); font-size: var(--fs-sm); color: var(--c-encre-claire); }
.simulateur__detail { display: grid; gap: var(--sp-3); margin-block: var(--sp-6); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--c-trait-sombre); }
.simulateur__detail li { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-md); color: var(--c-encre-claire); }
.simulateur__detail small { color: var(--c-encre-claire); }
.simulateur__resultat .bouton { width: 100%; justify-content: center; }
@media (max-width: 999px) { .simulateur { grid-template-columns: minmax(0, 1fr); } .simulateur__resultat { position: static; } }
@media (max-width: 599px) { .sim-prestations { grid-template-columns: minmax(0, 1fr); } .sim-bloc { padding: var(--sp-6); } }

/* ---- Zones ------------------------------------------------------------------ */
.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.zone { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--c-trait); border-radius: var(--r-2xl); background: var(--c-blanc); box-shadow: var(--sh-carte); }
.zone--principale { grid-column: 1 / -1; background: var(--c-brun); border-color: var(--c-brun); color: var(--c-blanc); }
.zone__numero { font-size: var(--fs-sm); font-weight: var(--fw-gras); letter-spacing: var(--ls-capitales); color: var(--c-orange-texte); }
.zone--principale .zone__numero { color: #F2B27A; }
.zone__titre { margin-block-start: var(--sp-4); font-size: var(--fs-3xl); }
.zone__texte { margin-block-start: var(--sp-4); font-size: var(--fs-md); line-height: var(--lh-large); color: var(--c-encre-douce); max-width: 62ch; }
.zone--principale .zone__texte { color: var(--c-encre-claire); }
@media (max-width: 767px) { .zones { grid-template-columns: minmax(0, 1fr); } }

/* ---- Informations légales ---------------------------------------------------- */
.legal h2 { font-size: var(--fs-2xl); margin-block-end: var(--sp-4); }
.legal p { color: var(--c-encre-douce); line-height: var(--lh-large); }
.appel__contenu:has(.appel__action--double) { max-width: 60ch; }
@media (min-width: 900px) { .machine:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.sim-bloc__titre { float: left; width: 100%; }
.sim-bloc__titre + * { clear: both; }
.insecable { white-space: nowrap; }

/* ---- Prestations en carrousel, fiche active au centre, voisines réduites,
   pâlies et floutées de part et d'autre, flèches rondes sur les côtés,
   boucle infinie dans les deux sens. ---------------------------------- */
.carrousel__onglets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-10);
}
.carrousel__onglet {
  height: 44px;
  padding-inline: var(--sp-5);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-pill);
  background: var(--c-blanc);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-demi);
  color: var(--c-encre);
  cursor: pointer;
  transition: background var(--tr-rapide), color var(--tr-rapide), border-color var(--tr-rapide);
}
@media (hover: hover) { .carrousel__onglet:hover { border-color: var(--c-brun); } }
.carrousel__onglet[aria-current='true'] { background: var(--c-orange-bouton); border-color: var(--c-orange-bouton); color: var(--c-blanc); }

.carrousel__scene { position: relative; }
.carrousel__fenetre {
  overflow: hidden;
  padding-block: var(--sp-4);
  margin-block: calc(var(--sp-4) * -1);
}
.carrousel__piste {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.presta-slide {
  flex: 0 0 auto;
  width: min(88vw, 1040px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), filter .6s cubic-bezier(.16, 1, .3, 1);
}
.presta-slide > .presta { height: 100%; }
.presta-slide[aria-hidden='true'] { opacity: .35; transform: scale(.92); }
.presta-slide.est-voisine { filter: blur(7px); }
.presta-slide[aria-hidden='true'] > .presta { cursor: pointer; }

.carrousel__fleche {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--c-orange-bouton);
  color: var(--c-blanc);
  box-shadow: 0 8px 24px rgba(34, 34, 34, .18);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--tr-rapide);
}
@media (hover: hover) { .carrousel__fleche:hover { background: var(--c-brun); } }
.carrousel__fleche:active { transform: translateY(-50%) scale(.94); }
.carrousel__fleche:focus-visible { outline: 2px solid var(--c-orange-bouton); outline-offset: 3px; }
.carrousel__fleche--prec { left: clamp(var(--sp-4), 6vw, 120px); }
.carrousel__fleche--suiv { right: clamp(var(--sp-4), 6vw, 120px); }

@media (max-width: 768px) {
  .carrousel__onglets { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-inline: 2px; }
  .carrousel__onglet { flex-shrink: 0; }
  .carrousel__fleche { width: 40px; height: 40px; top: 180px; }
  .carrousel__fleche--prec { left: var(--sp-2); }
  .carrousel__fleche--suiv { right: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel__piste, .presta-slide { transition: none; }
}
/* Téléphone : les flèches recouvraient le texte de la fiche : elles passent
   sous le carrousel, côte à côte et centrées. */
@media (max-width: 768px) {
  .carrousel__scene {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "fenetre fenetre" "prec suiv";
    justify-content: center;
    column-gap: var(--sp-4);
    row-gap: var(--sp-6);
  }
  .carrousel__fenetre { grid-area: fenetre; }
  .carrousel__fleche { position: static; transform: none; width: 48px; height: 48px; }
  .carrousel__fleche:active { transform: scale(.94); }
  .carrousel__fleche--prec { grid-area: prec; }
  .carrousel__fleche--suiv { grid-area: suiv; }
}
@media (max-width: 768px) {
  .carrousel__scene { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6) var(--sp-4); }
  .carrousel__fenetre { flex: 0 0 100%; order: 0; }
  .carrousel__fleche { order: 1; }
}
.carrousel__fenetre { transition: height .45s cubic-bezier(.16, 1, .3, 1); box-sizing: border-box; }


/* ---- Détail d'une prestation : s'ouvre sous le carrousel ---------------- */
.details { margin-block-start: var(--sp-10); }
.detail {
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--r-2xl);
  background: var(--c-creme-2);
  scroll-margin-top: 96px;
  animation: detailOuvre .45s cubic-bezier(.16, 1, .3, 1);
}
.detail[hidden] { display: none; }
.detail .carte { background: var(--c-blanc); }
.detail > .sous-section:first-child { margin-block-start: 0; }
@keyframes detailOuvre { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .detail { animation: none; } }
.presta .duo__actions { align-items: center; }

/* ---- Zones sous le formulaire : cases et bulles de villes ----------------- */
.bulles { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.bulle {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px var(--sp-4);
  border: 1px solid #F2D2B3; border-radius: var(--r-pill); background: #FBEBDB;
  font-size: var(--fs-sm); font-weight: var(--fw-demi); color: var(--c-orange-texte);
}
.zone--principale .bulle { background: rgba(250, 248, 245, .1); border-color: var(--c-trait-sombre); color: var(--c-blanc); }
.section--creme-2 .zone, .section--creme .zone { box-shadow: none; }

/* ---- Réalisations : un vrai carrousel de fiches vides à remplir ------------ */
.carrousel--realisations .presta-slide { width: min(80vw, 760px); }
.realisation { margin: 0; }
.realisation__vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  aspect-ratio: 16 / 10; padding: var(--sp-8); text-align: center;
  border: 2px dashed #D9C3A8; border-radius: var(--r-2xl); background: var(--c-blanc); color: var(--c-encre-douce);
}
.realisation__numero { font-family: var(--f-titre); font-size: clamp(48px, 7vw, 88px); font-weight: var(--fw-noir); line-height: 1; color: #E3CDB2; }
.realisation__texte { font-family: var(--f-titre); font-size: var(--fs-xl); font-weight: var(--fw-gras); color: var(--c-encre); }
.realisation__mention { font-size: var(--fs-sm); }


/* =========================================================================
   Lot du 14/10 : hero, case avant/après, rail cliquable, à propos
   ========================================================================= */

/* ---- Sous-titre du hero : plus petit ------------------------------------- */
.hero__texte { font-size: var(--fs-base); line-height: 1.55; max-width: 600px; }

/* ---- Hero comme sur la capture dès 1000 px : avis en verre en bas à droite -- */
@media (min-width: 1000px) and (max-width: 1024px) {
  .hero { min-height: min(94vh, 920px); }
  .hero__temoignage {
    position: absolute;
    inset-block-end: var(--sp-12);
    inset-inline-end: var(--sp-10);
    width: 300px;
    max-width: none;
    margin-block-start: 0;
  }
}

/* ---- Case avant/après du hero : cliquable, l'avant et l'après alternent ---- */
a.hero__apercu { color: inherit; text-decoration: none; cursor: pointer; transition: translate var(--tr-normal), box-shadow var(--tr-normal); }
a.hero__apercu:focus-visible { outline: 2px solid var(--c-blanc); outline-offset: 3px; }
@media (hover: hover) { a.hero__apercu:hover { translate: 0 -3px; box-shadow: var(--sh-flottant); } }
.hero__apercu-visuel { position: relative; display: block; width: 128px; height: 96px; overflow: hidden; border-radius: var(--r-md); background: var(--c-creme-2); }
.hero__apercu-visuel .hero__apercu-photo.visuel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: opacity .9s ease; }
.hero__apercu-photo--apres { opacity: 0; }
a.hero__apercu[data-etat='apres'] .hero__apercu-photo--apres { opacity: 1; }
a.hero__apercu[data-etat='apres'] .hero__apercu-photo--avant { opacity: 0; }
a.hero__apercu .hero__apercu-legende { display: grid; gap: var(--sp-1); padding-inline-end: var(--sp-2); }
@media (max-width: 1100px) { .hero__apercu-visuel { width: 96px; height: 72px; } }
@media (prefers-reduced-motion: reduce) { .hero__apercu-visuel .hero__apercu-photo.visuel-photo { transition: none; } }

/* ---- Rail des prestations : on voit qu'on peut cliquer ------------------- */
a.carte--nu { transition: translate var(--tr-normal), box-shadow var(--tr-normal), border-color var(--tr-normal); }
.rail .carte .visuel-photo { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.rail__legende { position: relative; }
.rail__lien {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-gras); color: var(--c-orange-texte);
  transition: gap var(--tr-normal), color var(--tr-normal);
}
.rail__lien svg { transition: translate var(--tr-normal); }
.rail .carte .rail__titre { transition: color var(--tr-normal); }
a.carte--nu:focus-visible { outline: 2px solid var(--c-orange-bouton); outline-offset: 4px; }
@media (hover: hover) {
  a.carte--nu:hover { translate: 0 -8px; box-shadow: var(--sh-flottant); border-color: var(--c-orange); }
  .rail a.carte--nu:hover .visuel-photo { transform: scale(1.06); }
  .rail a.carte--nu:hover .rail__titre { color: var(--c-orange-texte); }
  .rail a.carte--nu:hover .rail__lien { gap: var(--sp-3); color: var(--c-orange-bouton); }
  .rail a.carte--nu:hover .rail__lien svg { translate: 4px 0; }
}
.rail .carte { overflow: hidden; }
.rail .carte .visuel-photo { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { a.carte--nu, .rail .carte .visuel-photo { transition: none; } }

/* ---- À propos : étoiles et note ------------------------------------------ */
.avis-resume {
  display: inline-flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-5);
  padding: 6px var(--sp-4); border: 1px solid var(--c-trait); border-radius: var(--r-pill); background: var(--c-blanc);
  font-size: var(--fs-sm); color: var(--c-encre); text-decoration: none;
  transition: translate var(--tr-rapide), border-color var(--tr-rapide);
}
.avis-resume .etoiles { gap: 2px; color: var(--c-orange); }
.avis-resume .etoiles svg { width: 16px; height: 16px; }
.avis-resume strong { font-weight: var(--fw-gras); }
@media (hover: hover) { .avis-resume:hover { translate: 0 -1px; border-color: var(--c-orange); } }

/* =========================================================================
   Lot du 15/10 : bande basse, comparateur au bouton, bulle d'avis, méthode
   ========================================================================= */

/* ---- Bande défilante sous le hero : moins haute --------------------------- */
.section--bande { padding-block: var(--sp-4); }
.bandeau .label { font-size: var(--fs-sm); }

/* ---- Comparateur : on le déplace en tenant le bouton central --------------- */
.comparateur--seul .avant-apres { cursor: default; touch-action: pan-y; }
.avant-apres__bouton { cursor: grab; touch-action: none; }
.avant-apres__bouton:active { cursor: grabbing; }
.avant-apres__bouton:focus-visible { outline: 3px solid var(--c-blanc); outline-offset: 3px; }

/* ---- Simulateur : colonne de droite = bulle d'avis + estimation ------------- */
.simulateur__colonne { position: sticky; inset-block-start: calc(var(--l-header) + 16px); display: grid; gap: var(--sp-5); }
.simulateur__colonne .simulateur__resultat { position: static; }
.avis-bulle {
  position: relative; display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-trait); border-radius: var(--r-lg); background: var(--c-blanc);
  color: var(--c-encre); text-decoration: none; box-shadow: var(--sh-carte);
  transition: translate var(--tr-rapide), border-color var(--tr-rapide);
}
.avis-bulle::after {
  content: ''; position: absolute; inset-inline-start: var(--sp-8); inset-block-end: -8px; width: 14px; height: 14px;
  background: var(--c-blanc); border-inline-end: 1px solid var(--c-trait); border-block-end: 1px solid var(--c-trait); rotate: 45deg;
}
.avis-bulle__note { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.avis-bulle .etoiles { gap: 2px; color: var(--c-orange); }
.avis-bulle .etoiles svg { width: 15px; height: 15px; }
.avis-bulle strong { font-weight: var(--fw-gras); }
.avis-bulle__texte { font-size: var(--fs-sm); color: var(--c-encre-douce); line-height: 1.4; }
@media (hover: hover) { .avis-bulle:hover { translate: 0 -2px; border-color: var(--c-orange); } }
@media (max-width: 999px) { .simulateur__colonne { position: static; } }

/* ---- Ma méthode : quatre cases verticales reliées par un trait ---------------- */
.methode { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 64px; row-gap: 64px; margin: 0; padding: 0; list-style: none; }
.methode__etape { position: relative; --fill: 0; }
.methode__carte {
  display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; min-height: 380px; padding: var(--sp-8) var(--sp-6);
  border: 2px solid var(--c-trait); border-radius: var(--r-2xl); background: var(--c-creme);
  opacity: .5; transition: opacity .6s ease, border-color .6s ease, background-color .6s ease, box-shadow .6s ease, translate .6s ease;
}
.methode__etape[data-allume='true'] .methode__carte { opacity: 1; border-color: var(--c-orange); background: var(--c-blanc); box-shadow: var(--sh-carte); translate: 0 -4px; }
.methode__numero { font-family: var(--f-titre); font-size: 48px; font-weight: var(--fw-noir); line-height: 1; letter-spacing: var(--ls-titre); color: #D9C7B3; transition: color .6s ease; }
.methode__etape[data-allume='true'] .methode__numero { color: var(--c-orange); }
.methode__titre { margin-block-start: var(--sp-8); font-size: var(--fs-2xl); }
.methode__texte { font-size: var(--fs-md); line-height: var(--lh-texte); color: var(--c-encre-douce); }
/* le trait : un segment dans l'espace entre deux cases, qui se remplit de gauche à droite */
.methode__lien {
  position: absolute; inset-inline-start: calc(100% + 6px); inset-block-start: 50%; width: 52px; height: 6px; translate: 0 -50%; border-radius: var(--r-pill);
  background: linear-gradient(var(--c-orange), var(--c-orange)) left center / calc(var(--fill) * 100%) 100% no-repeat, var(--c-trait);
}
@media (max-width: 1023px) {
  .methode { grid-template-columns: minmax(0, 560px); justify-content: center; row-gap: 56px; }
  .methode__carte { min-height: 0; }
  .methode__titre { margin-block-start: 0; }
  .methode__lien {
    inset-inline-start: 50%; inset-block-start: calc(100% + 5px); width: 6px; height: 46px; translate: -50% 0;
    background: linear-gradient(var(--c-orange), var(--c-orange)) center top / 100% calc(var(--fill) * 100%) no-repeat, var(--c-trait);
  }
}
@media (prefers-reduced-motion: reduce) { .methode__carte, .methode__numero { transition: none; } }


/* =========================================================================
   Lot du 20/10 : boutons carrés, hero plus grand, titres plus grands
   ========================================================================= */

/* ---- Boutons : angles presque droits (le reste garde ses arrondis) -------- */
.bouton, .nav, .nav__lien, .burger, .carrousel__onglet, .ancre, .filtre,
.rail__fleche, .carrousel__fleche, .avant-apres__bouton, .faq__signe,
.menu-mobile a, .nav-mobile a { border-radius: var(--r-bouton); }
.nav { border-radius: var(--r-sm); }
.faq__signe::before, .faq__signe::after { border-radius: 1px; }

/* ---- Hero : titre agrandi, case avant/après alignée sur la carte d'avis ---- */
.hero__titre { font-size: clamp(38px, 5vw, 72px); max-width: 1000px; }
.hero__texte { margin-block-start: var(--sp-5); }
@media (min-width: 1000px) {
  .hero > .contenu, .hero__contenu { position: static; }
  /* (remplacé plus bas : le bas du hero est calé sur la carte d avis) */
  .hero__apercu {
    position: absolute; z-index: 2; margin: 0; width: 384px;
    inset-block-end: var(--sp-12); inset-inline-start: var(--l-bande);
  }
}
/* pastille d'avis : posée sur l'image, sans fond */
.badge.hero__google {
  padding: 0; border: 0; background: none; height: auto;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  color: var(--c-blanc); text-shadow: 0 1px 10px rgba(20, 12, 8, .55);
}
@media (hover: hover) { .badge.hero__google:hover { background: none; translate: 0 -1px; } }

/* ---- Titres de section : taille de l'ancien titre du hero ------------------ */
.section-titre, .appel__titre { font-size: var(--fs-titre-section); }
.section-titre.section-titre--moyen { font-size: var(--fs-3xl); }
.section-titre--ligne, .section-entete--centre .section-titre--ligne { max-width: none; }
.section-chapo { font-size: var(--fs-base); line-height: var(--lh-texte); max-width: 56ch; }

/* ---- Accueil : prestations moins hautes, avant/après en deux petits ------- */
#prestations { padding-block: var(--sp-10); }
#prestations .section-entete { margin-block-end: var(--sp-4); }
#prestations .rail { padding-block: var(--sp-4) var(--sp-2); }
#prestations .rail__element:nth-child(even) { margin-block-start: var(--sp-3); }
#prestations .rail .visuel-photo { aspect-ratio: 3 / 2; object-fit: cover; }
.comparateurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); max-width: 1000px; margin-inline: auto; }
.comparateurs .comparateur { margin: 0; }
.comparateurs .avant-apres { aspect-ratio: 4 / 3; border-radius: var(--r-xl); cursor: default; touch-action: pan-y; user-select: none; }
.comparateurs .avant-apres img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 760px) { .comparateurs { grid-template-columns: minmax(0, 1fr); } }

/* ---- À propos : pastille d'avis posée sans fond ----------------------------- */
.avis-resume { padding: 0; border: 0; background: none; }

/* ---- Appel final : les cinq étoiles et la note à la place du sur-titre ------ */
.appel__avis { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--c-blanc); text-decoration: none; font-size: var(--fs-md); }
.appel__avis .etoiles { color: #F2B27A; gap: 3px; }
.appel__avis .etoiles svg { width: 20px; height: 20px; }
.appel__avis strong { font-weight: var(--fw-gras); }
.appel__avis + .appel__titre { margin-block-start: var(--sp-4); }

/* ---- Prestations : l'appel remonte sous « Mon devis » ------------------------ */
.section--materiel { padding-block-end: 0; }
.section--materiel + .section { padding-block-start: var(--sp-12); }

/* ---- Contact : colonne alignée sur le haut du formulaire, carte en bas ------- */
.pratique { padding-block: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.pratique__liste { margin-block-start: 0; gap: var(--sp-4); }
.pratique__item { padding: var(--sp-4) var(--sp-5); }
.pratique__intitule { display: flex; align-items: center; gap: var(--sp-2); }
.pratique__icone { flex-shrink: 0; color: var(--c-orange); }
.pratique__carte { flex: 1; min-height: 220px; overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgba(253, 253, 252, .16); background: var(--c-creme-2); }
.pratique__carte iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; }

/* ---- Appel final : titre sur une ligne quand la place le permet ---------------- */
.appel__contenu, .appel__contenu:has(.appel__action--double) { max-width: none; }
.appel__titre { max-width: none; }
.appel__texte { max-width: 52ch; }

/* =========================================================================
   Retouches du 20/10 (2) : menu, page Réalisations, hero calé sur l'avis
   ========================================================================= */

/* page courante du menu : le même orange que le bouton d'appel */
.nav__lien[aria-current='page'] { background: var(--c-orange-bouton); color: var(--c-blanc); }

/* la page Réalisations n'a plus d'en-tête de page : la section réserve la hauteur du menu */
.section--sous-entete { padding-block-start: calc(var(--l-header) + var(--sp-8)); }

/* hero : le haut des deux boutons tombe à la hauteur du haut de la carte d'avis */
@media (min-width: 1000px) {
  .hero__temoignage { min-height: 276px; }
}
/* assez de hauteur : le bloc de texte s'ancre en bas, ses boutons au niveau du haut de la carte ;
   le haut se resserre quand l'écran est moins haut pour que tout reste dans la fenêtre */
@media (min-width: 1000px) and (min-height: 770px) {
  .hero {
    align-items: flex-end;
    padding-block-end: calc(var(--sp-12) + 276px - 58px);
    padding-block-start: calc(var(--l-header) + clamp(16px, calc(100svh - 748px), 93px));
  }
}
/* écran trop bas : le bloc reste en haut comme avant */
@media (min-width: 1000px) and (max-height: 769px) {
  .hero { padding-block-end: 220px; }
}

/* un peu d'air entre la bande défilante et les prestations */
#prestations { padding-block: var(--sp-14, 56px) var(--sp-6); }

/* =========================================================================
   Photos retirées : la case reste, sans image (retour du 22/10)
   ========================================================================= */
.visuel-vide { display: block; background: var(--c-creme-3); border-radius: var(--r-lg); }
.rail .visuel-vide { width: 100%; }
.presta__visuel.visuel-vide { width: 100%; min-height: 320px; border-radius: var(--r-xl); }
.avant-apres__couche .visuel-vide { width: 100%; height: 100%; border-radius: 0; background: var(--c-creme-3); }
.avant-apres__couche--apres .visuel-vide { background: var(--c-creme-2); }
.appel .visuel-vide.visuel--pleine, .formulaire-bloc .visuel-vide.visuel--pleine { background: var(--c-brun); }

/* =========================================================================
   Réalisations : fiches photo cliquables et galerie en fenêtre
   ========================================================================= */
.realisation__carte {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0;
  overflow: hidden; border-radius: var(--r-2xl); background: var(--c-brun); color: var(--c-blanc);
  font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sh-carte);
  transition: translate var(--tr-normal), box-shadow var(--tr-normal);
}
.realisation__carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.realisation__carte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 20, 14, .82) 0%, rgba(30, 20, 14, .35) 38%, transparent 62%); }
.realisation__carte .realisation__numero {
  position: absolute; z-index: 1; inset-block-start: var(--sp-5); inset-inline-start: var(--sp-5);
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding-inline: var(--sp-3);
  border-radius: var(--r-bouton); background: var(--c-orange-bouton); color: var(--c-blanc);
  font-family: var(--f-titre); font-size: var(--fs-md); font-weight: var(--fw-noir); line-height: 1;
}
.realisation__legende { position: absolute; z-index: 1; inset: auto var(--sp-6) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-1); }
.realisation__carte .realisation__texte { font-size: var(--fs-3xl); line-height: 1.15; color: var(--c-blanc); }
.realisation__carte .realisation__mention { font-size: var(--fs-sm); font-weight: var(--fw-demi); color: rgba(253, 253, 252, .9); }
.realisation__carte:focus-visible { outline: 3px solid var(--c-orange-bouton); outline-offset: 4px; }
@media (hover: hover) {
  [data-carousel-slide][aria-hidden='false'] .realisation__carte:hover { translate: 0 -6px; box-shadow: var(--sh-flottant); }
  [data-carousel-slide][aria-hidden='false'] .realisation__carte:hover img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .realisation__carte, .realisation__carte img { transition: none; } }

.galerie { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; }
.galerie[hidden] { display: none; }
.galerie__fond { position: absolute; inset: 0; background: rgba(24, 15, 10, .985); }
.galerie__boite { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-4); width: min(1180px, 100%); height: 100svh; padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.galerie__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); color: var(--c-blanc); }
.galerie__titre { font-family: var(--f-titre); font-size: var(--fs-2xl); font-weight: var(--fw-noir); line-height: 1.15; }
.galerie__compteur { margin-block-start: var(--sp-1); font-size: var(--fs-sm); color: rgba(253, 253, 252, .8); }
.galerie__scene { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-4); min-height: 0; }
.galerie__cadre { display: grid; place-items: center; flex: 1; min-width: 0; height: 100%; }
.galerie__image { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; border-radius: var(--r-lg); background: rgba(253, 253, 252, .06); }
.galerie__fleche, .galerie__fermer {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: var(--r-bouton); background: var(--c-orange-bouton); color: var(--c-blanc); cursor: pointer;
  transition: background var(--tr-rapide), translate var(--tr-rapide);
}
.galerie__fleche[hidden] { display: none; }
.galerie__fleche:hover, .galerie__fermer:hover { background: var(--c-blanc); color: var(--c-brun); }
.galerie__fleche:focus-visible, .galerie__fermer:focus-visible { outline: 3px solid var(--c-blanc); outline-offset: 3px; }
@media (max-width: 700px) {
  .galerie__boite { padding: var(--sp-4); }
  .galerie__scene { flex-wrap: wrap; align-content: center; }
  .galerie__cadre { order: 1; flex: 1 1 100%; height: auto; }
  .galerie__image { max-height: calc(100svh - 200px); }
  .galerie__fleche { order: 2; }
  .galerie__fleche--prec { margin-inline-end: var(--sp-4); }
  .realisation__legende { inset-inline: var(--sp-4); inset-block-end: var(--sp-4); }
  .realisation__carte .realisation__texte { font-size: var(--fs-xl); }
}

/* ---- Prestations : le matériel que j'utilise (4 grosses machines en photo) ---- */
.materiel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.materiel__carte { overflow: hidden; border: 1px solid var(--c-trait); border-radius: var(--r-xl); background: var(--c-blanc); box-shadow: var(--sh-carte); }
.materiel__carte .visuel-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.materiel__corps { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.materiel__titre { font-size: var(--fs-xl); }
.materiel__role { margin-block-start: var(--sp-2); font-size: var(--fs-sm); color: var(--c-encre-douce); }
@media (max-width: 1024px) { .materiel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .materiel { grid-template-columns: minmax(0, 1fr); } }

/* ---- Cases d'appel (bas de page) : bouton de gauche orange foncé puis blanc au survol, bouton de droite blanc puis marron au survol ---------- */
.appel .bouton--clair { background: var(--c-orange-bouton); color: var(--c-blanc); }
.appel .bouton--creme { background: var(--c-blanc); color: var(--c-brun); }
@media (hover: hover) {
  .appel .bouton--clair:hover { background: var(--c-blanc); color: var(--c-brun); }
  .appel .bouton--creme:hover { background: var(--c-brun); color: var(--c-blanc); border-color: rgba(253, 253, 252, .4); }
}
.appel .bouton--clair:active { background: var(--c-blanc); color: var(--c-brun); }
.appel .bouton--creme:active { background: var(--c-brun); color: var(--c-blanc); border-color: rgba(253, 253, 252, .4); }
.appel .bouton:focus-visible { outline: 3px solid var(--c-blanc); outline-offset: 3px; }

/* ---- Formulaire : case de consentement obligatoire (RGPD) ------------------------ */
.champ.champ--consentement { gap: var(--sp-2); margin-block-start: var(--sp-3); }
.champ--consentement .consentement {
  display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-normal); letter-spacing: 0; line-height: 1.45; color: var(--c-encre);
}
.champ.champ--consentement input[type='checkbox'] {
  flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; border: 1px solid var(--c-trait-sombre);
  border-radius: 4px; accent-color: var(--c-orange-bouton); cursor: pointer;
}
.champ.champ--consentement input[type='checkbox']:focus-visible { outline: 2px solid var(--c-orange-bouton); outline-offset: 2px; }
.champ--consentement[data-invalide='true'] .consentement { color: #B3261E; }
.champ--consentement[data-invalide='true'] input[type='checkbox'] { outline: 2px solid #B3261E; outline-offset: 1px; }