/* Gestes du peintre — 10/2026.
   Quatre gestes, rien d'autre : la passe de rouleau, le ruban de masquage, le rechampi (ligne nette),
   la couche. Aucune couleur ni police ajoutée. Les états de départ ne s'appliquent que sous
   html.anime (JavaScript actif et mouvements acceptés) : sans cela, tout est visible d'emblée. */

/* — Ruban de masquage : les repères Avant / Après — */
.badge-photo { top: 14px; left: 10px; padding: 7px 18px; border-radius: 0; background: #f1e8e0f2; box-shadow: 0 1px 3px #2d242126; transform: rotate(-3deg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 17%, 100% 34%, calc(100% - 4px) 50%, 100% 67%, calc(100% - 4px) 84%, 100% 100%, 0 100%, 4px 84%, 0 67%, 4px 50%, 0 34%, 4px 17%); }
.comparaison figure:last-child .badge-photo { background: #a42f20f2; transform: rotate(2deg); }
html.anime .badge-photo { opacity: 0; translate: 0 -10px; transition: opacity .25s ease .15s, translate .35s cubic-bezier(.2, 1.4, .4, 1) .15s; }
html.anime .comparaison.vu .badge-photo { opacity: 1; translate: 0 0; }
html.anime .comparaison.vu figure:last-child .badge-photo { transition-delay: 1.15s; }

/* — Passe de rouleau : la photo du hero, la photo « après » — */
.mur { position: relative; display: block; overflow: hidden; border-radius: 24px 24px 6px 24px; }
.mur .photo-hero { display: block; }
.passe { position: absolute; inset: 0; pointer-events: none; background: var(--papier); border-top: 12px solid var(--terre); translate: 0 102%; }
html.anime .mur .passe { translate: 0 0; transition: translate 1s cubic-bezier(.65, 0, .25, 1) .2s; }
html.anime .mur.vu .passe { translate: 0 102%; }
.comparaison figure:last-child a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #dedbd1; border-left: 12px solid var(--terre); translate: 102% 0; }
html.anime .comparaison figure:last-child a::after { translate: 0 0; transition: translate 1s cubic-bezier(.65, 0, .25, 1) .25s; }
html.anime .comparaison.vu figure:last-child a::after { translate: 102% 0; }

/* — Rechampi : la ligne nette sous « du détail. » — */
h1 em { background: linear-gradient(var(--terre), var(--terre)) no-repeat 0 96% / 100% 3px; padding-bottom: 2px; }
html.anime h1 em { background-size: 0% 3px; transition: background-size .7s cubic-bezier(.65, 0, .25, 1) 1.1s; }
html.anime .hero.vu h1 em { background-size: 100% 3px; }

/* — Mise en teinte par passes : les deux sections brun rouge — */
.videos-section, .secteur { position: relative; overflow: hidden; }
.passes { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.passes i { background: var(--papier); border-bottom: 10px solid var(--terre); translate: 0 -102%; }
html.anime .passes i { translate: 0 0; transition: translate .8s cubic-bezier(.65, 0, .25, 1); }
html.anime .passes i:nth-child(2) { transition-delay: .14s; }
html.anime .passes i:nth-child(3) { transition-delay: .28s; }
html.anime .vu>.passes i { translate: 0 -102%; }

/* — Nuancier des prestations : chaque teinte se pose d'une passe — */
.passe-teinte { position: absolute !important; inset: 0; z-index: 2; background: #fffefa; translate: 0 102%; pointer-events: none; }
html.anime .passe-teinte { translate: 0 0; transition: translate .6s cubic-bezier(.65, 0, .25, 1); }
html.anime .offres-grille.vu .passe-teinte { translate: 0 102%; }
html.anime .offre:nth-child(2) .passe-teinte { transition-delay: .09s; }
html.anime .offre:nth-child(3) .passe-teinte { transition-delay: .18s; }
html.anime .offre:nth-child(4) .passe-teinte { transition-delay: .27s; }
html.anime .offre:nth-child(5) .passe-teinte { transition-delay: .36s; }
html.anime .offre:nth-child(6) .passe-teinte { transition-delay: .45s; }

/* — Préparation : le mur se monte couche après couche, au rythme des cinq étapes — */
.coupe { margin: 30px 0 0; max-width: 440px; }
.coupe svg { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--ligne); }
.coupe text { font: 700 11px var(--police); letter-spacing: .08em; fill: var(--encre); text-transform: uppercase; }
.coupe figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--secondaire); }
.coupe .rejouer { font: inherit; font-weight: 700; color: var(--terre); background: none; border: 1px solid var(--ligne); border-radius: 30px; padding: 6px 14px; cursor: pointer; }
.coupe .rejouer:hover { background: var(--sable); }
.coupe .voile, .coupe .protection, .coupe .reprise { transform-box: fill-box; }
.coupe .voile, .coupe .protection { transform-origin: 0 50%; }
.coupe .sous-couche { transform-origin: 50% 0; }
.coupe .repere { opacity: 0; }
.coupe .repere-5 { opacity: 1; }
.coupe .masquage { opacity: 0; }
html.anime .coupe .protection, html.anime .coupe .enduit, html.anime .coupe .finition { transform: scaleX(0); }
html.anime .coupe .sous-couche { transform: scaleY(0); }
html.anime .coupe .reprise { opacity: 0; }
html.anime .coupe .masquage { opacity: 1; }
html.anime .coupe .repere-5 { opacity: 0; }
html.anime .preparation.vu .protection { transform: none; transition: transform .8s cubic-bezier(.65, 0, .25, 1) .4s; }
html.anime .preparation.vu .reprise { opacity: 1; transition: opacity .5s ease 1.9s; }
html.anime .preparation.vu .enduit { transform: none; transition: transform .8s cubic-bezier(.65, 0, .25, 1) 3.2s; }
html.anime .preparation.vu .sous-couche { transform: none; transition: transform .8s cubic-bezier(.65, 0, .25, 1) 4.5s; }
html.anime .preparation.vu .finition { transform: none; transition: transform .6s cubic-bezier(.65, 0, .25, 1) 5.8s; }
html.anime .preparation.vu .finition-2 { transition-delay: 6.5s; }
html.anime .preparation.vu .masquage { opacity: 0; transition: opacity .4s ease 7.4s; }
html.anime .preparation.vu .repere { animation: repere 1.3s ease both; }
html.anime .preparation.vu .repere-1 { animation-delay: .4s; }
html.anime .preparation.vu .repere-2 { animation-delay: 1.8s; }
html.anime .preparation.vu .repere-3 { animation-delay: 3.2s; }
html.anime .preparation.vu .repere-4 { animation-delay: 4.5s; }
html.anime .preparation.vu .repere-5 { animation: repere-fin .4s ease 5.8s both; }
@keyframes repere { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes repere-fin { from { opacity: 0; } to { opacity: 1; } }
html.anime .preparation ol li { opacity: .35; }
html.anime .preparation.vu ol li { opacity: 1; transition: opacity .4s ease .4s; }
html.anime .preparation.vu ol li:nth-child(2) { transition-delay: 1.8s; }
html.anime .preparation.vu ol li:nth-child(3) { transition-delay: 3.2s; }
html.anime .preparation.vu ol li:nth-child(4) { transition-delay: 4.5s; }
html.anime .preparation.vu ol li:nth-child(5) { transition-delay: 5.8s; }
.preparation li { padding-block: 18px; }

/* — Visionneuse des réalisations — */
.visionneuse { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; overflow: hidden; }
.visionneuse::backdrop { background: #2d2421f2; }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse figure { position: relative; margin: 0; padding: 56px 16px 16px; max-width: 100vw; }
.visionneuse img { display: block; max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 130px); width: auto; height: auto; border-radius: 10px; background: #dedbd1; }
.visionneuse figcaption { margin-top: 12px; color: #fff8f2; font-size: 14px; font-weight: 600; text-align: center; }
.visionneuse .fermer { position: absolute; top: 4px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff8f2; color: var(--encre); font: 400 26px/1 var(--police); cursor: pointer; }
.visionneuse .fermer:hover { background: #f2c4b1; }
@media (prefers-reduced-motion: no-preference) { .visionneuse[open] figure { animation: entree .35s var(--elan) both; } }

@media (max-width: 540px) { .passe, .comparaison figure:last-child a::after { border-width: 8px; } .mur { border-radius: 18px 18px 6px 18px; } }

/* — Avis clients : une rangée que l'on fait défiler — */
.defile-avis { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: #cdb7ac transparent; overscroll-behavior-x: contain; }
.defile-avis .avis { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; margin: 0; }
.pied-avis { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.pied-avis .precision { margin: 0; }
.commandes-avis { display: flex; gap: 8px; flex-shrink: 0; }
.commandes-avis button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--terre); background: var(--blanc); color: var(--terre); font: 700 20px/1 var(--police); cursor: pointer; transition: background-color .16s ease, color .16s ease, opacity .16s ease; }
.commandes-avis button:hover:not(:disabled) { background: var(--terre); color: #fff; }
.commandes-avis button:disabled { opacity: .3; cursor: default; }
@media (max-width: 1100px) { .defile-avis .avis { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 850px) { .defile-avis { gap: 14px; } .defile-avis .avis { flex-basis: 84%; } }
@media (prefers-reduced-motion: reduce) { .defile-avis { scroll-behavior: auto; } }

/* — Situations : la raison de l'appel éclaire les teintes concernées — */
.situations { margin-bottom: 26px; }
.question-situation { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.choix-situations { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-situations button { min-height: 44px; padding: 9px 16px; border: 1px solid #cdb7ac; border-radius: 30px; background: #fcfaf7; color: var(--encre); font: 600 13px var(--police); cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.choix-situations button:hover { border-color: var(--terre); color: var(--terre); }
.choix-situations button[aria-pressed="true"] { background: var(--terre); border-color: var(--terre); color: #fff; }
.reponse-situation { min-height: 1.7em; margin: 12px 0 0; font-size: 14px; color: var(--secondaire); }
.reponse-situation strong { color: var(--encre); font-weight: 700; }
.offres-grille .offre { transition: translate .2s ease, box-shadow .2s ease, opacity .25s ease, outline-color .25s ease; outline: 2px solid transparent; outline-offset: 2px; }
.offres-grille.filtre .offre:not(.concernee) { opacity: .38; }
.offres-grille.filtre .offre.concernee { outline-color: var(--terre); }

/* — Carte : la Métropole se peint depuis Rillieux-la-Pape — */
.secteur-interieur { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 70px; }
.secteur-texte>p:not(.surtitre) { max-width: 460px; }
.carte { margin: 0; }
.carte svg { display: block; width: 100%; height: auto; max-height: 560px; }
.carte figcaption { margin-top: 12px; font-size: 12px; color: #ead5ca; text-align: center; }
.commune { fill: #7a4034; stroke: #55251e; stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: fill .18s ease; }
.commune.citee { fill: #9a5444; }
.commune.base { fill: var(--terre); }
.commune:hover { fill: #f2c4b1; }
.commune.choisie { fill: #fff8f2; }
.repere-base { fill: #fff8f2; stroke: #55251e; stroke-width: 2; pointer-events: none; }
.nom-carte { font: 700 12px var(--police); fill: #fff8f2; paint-order: stroke; stroke: #55251e; stroke-width: 3px; pointer-events: none; }
.nom-lyon { font-size: 14px; }
html.anime .commune { fill-opacity: 0; stroke-opacity: 0; }
html.anime .secteur.vu .commune { fill-opacity: 1; stroke-opacity: 1; transition: fill .18s ease, fill-opacity .45s ease calc(.7s + var(--attente)), stroke-opacity .45s ease calc(.7s + var(--attente)); }
html.anime .nom-carte, html.anime .repere-base { opacity: 0; }
html.anime .secteur.vu .repere-base { opacity: 1; transition: opacity .3s ease .6s; }
html.anime .secteur.vu .nom-carte { opacity: 1; transition: opacity .4s ease 1.6s; }
.choix-commune { margin-top: 22px; max-width: 420px; }
.choix-commune label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; }
.choix-commune select { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #97675b; border-radius: 10px; background: #43201b; color: #fff8f2; font: 600 15px var(--police); }
.reponse-commune { min-height: 1.7em; margin: 12px 0 0; font-size: 16px; font-weight: 600; color: #f2c4b1; }
@media (max-width: 850px) {
  /* Sur mobile, la carte passe entre le texte et le choix de la commune : la réponse reste sous les yeux. */
  .secteur-interieur { grid-template-columns: 1fr; gap: 16px; }
  .secteur-texte { display: contents; }
  .secteur-texte>* { margin-block: 0; }
  .carte { order: 1; margin-block: 8px; }
  .carte svg { max-height: 430px; }
  .choix-commune { order: 2; max-width: none; }
  .secteur .bouton { order: 3; margin-top: 4px; }
}

/* — Votre projet : trois couches, de l'apprêt à la teinte finale — */
.parcours-projet { border-top: 1px solid var(--ligne); }
.parcours-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.couches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; overflow: hidden; }
.couche-projet { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 46px; min-height: 340px; padding: 30px 32px 34px; overflow: hidden; background: var(--teinte); color: var(--encre); }
.couche-projet:nth-child(1) { --teinte: var(--sable); }
.couche-projet:nth-child(2) { --teinte: #f2c4b1; }
.couche-projet:nth-child(3) { --teinte: var(--terre); color: #fff; }
.numero-couche { font: 600 clamp(84px, 9vw, 132px)/.85 var(--police); letter-spacing: -.07em; color: var(--terre); }
.couche-projet:nth-child(3) .numero-couche { color: #fff; }
.couche-projet h3 { margin: 0 0 10px; font-size: 25px; }
.couche-projet p { margin: 0; font-size: 15px; line-height: 1.65; }
.ruban-couche { position: absolute; top: 34px; right: -8px; padding: 8px 26px 8px 18px; background: #fffefaf2; color: var(--encre); font-size: 12px; font-weight: 700; letter-spacing: .05em; rotate: 4deg; box-shadow: 0 1px 3px #2d242126;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 4px 84%, 0 67%, 4px 50%, 0 34%, 4px 17%); }
.passe-couche { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--papier); border-top: 12px solid var(--terre); translate: 0 102%; }
html.anime .passe-couche { translate: 0 0; transition: translate .85s cubic-bezier(.65, 0, .25, 1); }
html.anime .couche-projet:nth-child(2) .passe-couche { transition-delay: .3s; }
html.anime .couche-projet:nth-child(3) .passe-couche { transition-delay: .6s; }
html.anime .couches.vu .passe-couche { translate: 0 102%; }
html.anime .ruban-couche { opacity: 0; transition: opacity .3s ease 1.3s; }
html.anime .couches.vu .ruban-couche { opacity: 1; }
@media (max-width: 850px) {
  .parcours-tete { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 28px; }
  .couches { grid-template-columns: 1fr; }
  .couche-projet { flex-direction: row; align-items: flex-start; gap: 20px; min-height: 0; padding: 26px 22px 28px; }
  .numero-couche { font-size: 62px; flex-shrink: 0; width: 76px; }
  .couche-projet h3 { font-size: 22px; }
  .ruban-couche { position: static; order: 3; align-self: flex-start; rotate: none; clip-path: none; padding: 5px 10px; border-radius: 4px; white-space: nowrap; display: none; }
  .passe-couche { border-top-width: 8px; }
}

/* ============ Mouvements d'ensemble, façon Pulsor (réglages repris de deemand.fr) ============
   Entrée du premier écran, titres en cascade par mots, apparition au défilement, bandeau qui
   défile, boutons vivants, léger décalage des photos. Tout s'efface avec « réduire les animations ». */
:root { --elan: cubic-bezier(.625, .02, 0, 1.05); }
.suite-ruban { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrée du premier écran, en CSS seul : jamais de contenu affiché puis masqué. */
  .hero .surtitre, .hero h1, .hero .introduction, .hero .actions, .hero .signature-artisan, .hero-visuel figcaption { animation: entree .7s var(--elan) both; }
  .hero h1 { animation-delay: .08s; }
  .hero .introduction { animation-delay: .18s; }
  .hero .actions { animation-delay: .26s; }
  .hero .signature-artisan { animation-delay: .34s; }
  .hero-visuel figcaption { animation-delay: 1s; }
  @keyframes entree { from { opacity: 0; transform: translateY(1.25em); } to { opacity: 1; transform: none; } }

  /* Point du surtitre : une onde qui part. */
  .hero .surtitre .point { position: relative; }
  .hero .surtitre .point::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--terre); border-radius: 50%; animation: onde 2s ease-out infinite; }
  @keyframes onde { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

  /* Bouton principal : un reflet fait le tour du bord. */
  .hero .actions .bouton { position: relative; isolation: isolate; }
  .hero .actions .bouton::before { content: ""; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: inherit; background: conic-gradient(from calc(var(--tour) - 80deg), transparent 0, #fff8f2 12%, transparent 22%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0); animation: tour 3.5s linear infinite; pointer-events: none; }
  @keyframes tour { to { --tour: 360deg; } }

  /* Flèches des boutons : elle sort en haut à droite, une autre arrive d'en bas à gauche. */
  .bouton>span[aria-hidden], .lien>span[aria-hidden] { display: inline-block; }
  .bouton:hover>span[aria-hidden] { animation: fleche .45s var(--elan); }
  @keyframes fleche { 0% { transform: none; opacity: 1; } 45% { transform: translate(70%, -70%); opacity: 0; } 46% { transform: translate(-70%, 70%); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .bouton { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, translate .25s var(--elan); }
  .bouton:hover { translate: 0 -2px; }
  .bouton:active { translate: 0 0; }

  /* Léger décalage des photos pendant le défilement (navigateurs récents). */
  @supports (animation-timeline: view()) {
    .mur .photo-hero { animation: derive linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes derive { from { transform: scale(1.08) translateY(-2.5%); } to { transform: scale(1.08) translateY(2.5%); } }
  }

  /* Avis : la carte se soulève au survol. */
  .avis { transition: translate .3s var(--elan), box-shadow .3s var(--elan); }
  .avis:hover { translate: 0 -4px; box-shadow: 0 12px 24px #532c2418; }
}
@property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Titres en cascade, mot par mot. */
html.anime .cascade .mot { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .55s var(--elan), transform .55s var(--elan); transition-delay: calc(var(--rang) * 55ms); }
html.anime .cascade.vu .mot { opacity: 1; transform: none; }

/* Apparition au défilement. */
html.anime .apparait { opacity: 0; transform: translateY(1.25em); transition: opacity .7s var(--elan), transform .7s var(--elan); transition-delay: calc(var(--rang, 0) * 90ms); }
html.anime .apparait.vu { opacity: 1; transform: none; }

/* Bandeau qui défile : il ne s'arrête pas et ne réagit à rien. */
html.anime .ruban { overflow: hidden; -webkit-mask: linear-gradient(90deg, #0000 0%, #fff 10% 90%, #0000 100%); mask: linear-gradient(90deg, #0000 0%, #fff 10% 90%, #0000 100%); }
html.anime .ruban>div { width: max-content; max-width: none; margin: 0; justify-content: flex-start; gap: 0; pointer-events: none; user-select: none; animation: defile 28s linear infinite; }
html.anime .ruban>div>* { margin-right: 46px; white-space: nowrap; }
html.anime .suite-ruban { display: revert; }
@keyframes defile { to { transform: translateX(-50%); } }

/* — Formulaire : champ piège pour les robots, message d'envoi — */
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#apercu.envoyee { display: block; padding: 14px 16px; border-radius: 10px; background: var(--sable); border-left: 4px solid var(--terre); font-weight: 600; white-space: normal; }

/* — Formulaire guidé : des choix à toucher plutôt qu'un texte à rédiger — */
.options { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.options legend { padding: 0; margin-bottom: 9px; font-size: 14px; }
.options label { margin: 0; cursor: pointer; }
.options input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.options span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border: 1px solid #b6afa4; border-radius: 30px; background: var(--papier); font-size: 14px; font-weight: 600; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.options label:hover span { border-color: var(--terre); color: var(--terre); }
.options input:checked+span { background: var(--terre); border-color: var(--terre); color: #fff; }
.options input:focus-visible+span { outline: 3px solid var(--terre); outline-offset: 3px; }
.facultatif { color: var(--secondaire); font-weight: 400; }