/* Le site Takumea, version « récit » (validée par Franck le 24/09/2026).
   Pages accueil, maquettes, offre, contact. L'en-tête et le pied de page,
   communs à tout le site, sont dans tete.css. */
/* Charte Takumea (public/takumea/takumea.css), une seule ambiance assumée :
   ivoire, charbon, cuivre. Le vert est celui de la démo plombier. */
:root {
  --encre: #1A1A1A; --papier: #F5F2EA; --blanc: #FBF9F4; --gris: #7A756D;
  --ligne: #DCD5C7; --tint: #EDE9DE; --accent: #B06A3B; --accent-doux: #E9DACB;
  --corps: #3A3835; --nuit: #151413; --nuit-texte: #EDE8DC; --nuit-gris: #A39C90;
  --marlot: #4E7D5E; --marlot-fonce: #1F2421;
  --h: 64px;
  --display: "Instrument Sans", "Source Sans 3", system-ui, sans-serif;
  --texte: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --sortie: cubic-bezier(.22, .8, .24, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--corps); font: 400 17px/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { font-family: var(--display); color: var(--encre); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
em { font-style: normal; color: var(--accent); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.borne { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.sur-titre { display: block; font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 15px 24px; border-radius: 3px; text-decoration: none; border: 1.5px solid transparent; transition: background .2s, color .2s; }
.btn-plein { background: var(--accent); color: var(--papier); } .btn-plein:hover { background: #8F5530; }
.btn-ligne { border-color: var(--accent); color: var(--accent); } .btn-ligne:hover { background: var(--accent); color: var(--papier); }

.logo { display: block; height: 34px; aspect-ratio: 1577 / 452; position: relative; background: var(--papier); -webkit-mask: url("banniere-lettres.svg") no-repeat center / contain; mask: url("banniere-lettres.svg") no-repeat center / contain; }
.logo::after { content: ""; position: absolute; inset: 0; background: var(--accent); -webkit-mask: url("banniere-losanges.svg") no-repeat center / contain; mask: url("banniere-losanges.svg") no-repeat center / contain; }
/* ---------- Pistes épinglées (scènes pilotées par le scroll) ---------- */
.piste { position: relative; }
.colle { position: sticky; top: calc(var(--h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--h)); height: calc(100svh - var(--h)); overflow: hidden; }

@keyframes clignote { 50% { opacity: 0; } }
/* ---------- 3. LE SITE QUI S'ASSEMBLE ---------- */
.assemblage { height: 270vh; background: var(--tint); } /* 27/09 : 440vh, trop long à défiler (Franck) */
.assemblage .colle { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.narration .intro { margin-bottom: 26px; }
.narration h2 { font-size: clamp(30px, 3.4vw, 46px); }
.etapes-cadre { position: relative; }
.etapes-a { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; }
.etapes-cadre::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--ligne); }
.rail { position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); transform-origin: top; transform: scaleY(0); will-change: transform; }
.etapes-a li { position: relative; padding: 7px 0; opacity: .32; transition: opacity .45s ease; }
.etapes-a li::before { content: ""; position: absolute; left: -26px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--tint); border: 2px solid var(--ligne); transition: border-color .45s, background .45s; }
.etapes-a li.fait { opacity: .6; }
.etapes-a li.fait::before { border-color: var(--accent); background: var(--accent); }
.etapes-a li.actif { opacity: 1; }
.etapes-a li.actif::before { border-color: var(--accent); background: var(--papier); }
.etapes-a li { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--encre); letter-spacing: -.01em; line-height: 1.3; }
/* La phrase de l'étape en cours : un seul encadré de hauteur fixe, les phrases
   s'y croisent en fondu (rien ne change de taille, donc rien ne saccade). */
.detail { position: relative; height: 5.6em; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 16.5px; line-height: 1.5; color: var(--corps); max-width: 40ch; }
.detail .d { position: absolute; left: 0; right: 0; top: 16px; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .45s ease, transform .45s var(--sortie); }
.detail .d.actif { opacity: 1; transform: none; }
.detail .d b { display: none; }
.scene-plateau { position: relative; width: 100%; height: 100%; min-width: 0; display: grid; place-items: center; }
.cadre-echelle { width: calc(880px * var(--ech, .6)); height: calc(590px * var(--ech, .6)); position: relative; }
.maquette { position: absolute; left: 0; top: 0; width: 880px; height: 590px; transform: scale(var(--ech, .6)); transform-origin: 0 0; }

.fenetre { position: absolute; left: 0; top: 0; width: 800px; height: 540px; background: #FBFBFA; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(28,26,22,.5), 0 0 0 1px rgba(0,0,0,.07); will-change: transform; }
.f-barre { height: 36px; display: flex; align-items: center; gap: 7px; padding-inline: 14px; background: #EAE6DC; }
.f-barre i { width: 10px; height: 10px; border-radius: 50%; background: #D3CCBD; }
.f-url { margin-left: 12px; flex: 1; max-width: 360px; display: flex; align-items: center; gap: 6px; height: 22px; background: #fff; border-radius: 999px; padding-inline: 12px; font: 500 12.5px var(--texte); color: #55524C; }
.f-url svg { width: 11px; height: 11px; color: #8A857C; }
.f-url .curseur { width: 1.5px; height: 13px; background: var(--accent); animation: clignote 1s steps(1) infinite; }
.en-ligne { margin-left: auto; display: flex; align-items: center; gap: 7px; font: 600 11.5px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #2F6B43; background: #DCEBDD; border-radius: 999px; padding: 4px 11px; opacity: 0; transform: scale(.8); will-change: transform, opacity; }
.en-ligne::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2F9A55; }
.maquette.publie .en-ligne::before { animation: pouls 1.8s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(47,154,85,.55); } 100% { box-shadow: 0 0 0 9px rgba(47,154,85,0); } }
.f-page { position: relative; height: 504px; overflow: hidden; }
.squelette { position: absolute; inset: 0; padding: 16px 22px; display: grid; grid-template-rows: 30px 220px 1fr; gap: 14px; will-change: opacity; }
.squelette div { background: repeating-linear-gradient(90deg, #EFECE5 0 10px, #F4F2ED 10px 20px); border: 1.5px dashed #DAD5CA; border-radius: 6px; }
.squelette .sq-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: none; border: 0; }
.p-nav { position: absolute; left: 0; right: 0; top: 0; height: 48px; background: var(--marlot-fonce); display: flex; align-items: center; gap: 18px; padding-inline: 22px; color: #EDEDE8; will-change: transform, opacity; }
.p-nav .p-logo { display: flex; align-items: center; gap: 9px; font: 700 15px var(--display); letter-spacing: .02em; }
.p-nav .p-logo i { width: 24px; height: 24px; border-radius: 4px; background: var(--marlot); display: grid; place-items: center; font: 700 13px var(--display); font-style: normal; color: #fff; }
.p-nav span { font: 500 11px var(--display); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.p-nav span:first-of-type { margin-left: auto; }
.p-nav .p-bouton { font: 600 11px var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--marlot); color: #fff; padding: 7px 12px; border-radius: 3px; opacity: 1; }
.p-hero { position: absolute; left: 0; right: 0; top: 48px; height: 236px; overflow: hidden; background: #2A2A28; will-change: clip-path; }
.p-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; will-change: transform; }
.p-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,20,.86) 0%, rgba(20,22,20,.55) 48%, rgba(20,22,20,.05) 85%); }
.p-texte { position: absolute; left: 30px; top: 78px; z-index: 2; width: 380px; }
.p-texte > * { will-change: transform, opacity; }
.p-sur { font: 600 10px var(--display); letter-spacing: .18em; text-transform: uppercase; color: #9FC4A9; margin-bottom: 8px; }
.p-titre { font: 700 25px/1.12 var(--display); color: #fff; letter-spacing: -.015em; }
.p-titre u { text-decoration: none; color: #9FC4A9; }
.p-cta { display: inline-block; margin-top: 14px; font: 600 11px var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--marlot); color: #fff; padding: 9px 14px; border-radius: 3px; }
.p-services { position: absolute; left: 22px; right: 22px; top: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p-carte { background: #fff; border: 1px solid #E6E3DC; border-radius: 6px; overflow: hidden; will-change: transform, opacity; }
.p-carte img { width: 100%; height: 64px; object-fit: cover; }
.p-carte div { padding: 8px 11px 10px; }
.p-carte b { display: block; font: 700 13px var(--display); color: #1F2421; }
.p-carte span { display: block; font-size: 11px; line-height: 1.35; color: #666; margin-top: 2px; }
.p-avis { position: absolute; left: 22px; right: 22px; top: 440px; display: flex; align-items: center; gap: 18px; background: #F1F4F1; border-radius: 6px; padding: 10px 14px; will-change: transform, opacity; }
.p-note { display: flex; align-items: baseline; gap: 8px; flex: none; }
.p-note b { font: 700 24px var(--display); color: #1F2421; font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.etoiles { position: relative; font-size: 14px; letter-spacing: 2px; color: #D6D3CC; }
.etoiles i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #E0A526; font-style: normal; width: 0; }
.p-note small { font-size: 11px; color: #777; font-variant-numeric: tabular-nums; }
.p-avis q { font-size: 11.5px; line-height: 1.4; color: #444; quotes: "« " " »"; }

.telephone { position: absolute; left: 680px; top: 150px; width: 196px; height: 420px; background: #111; border-radius: 30px; padding: 9px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); will-change: transform, opacity; opacity: 0; }
.t-ecran { position: relative; width: 100%; height: 100%; background: #FBFBFA; border-radius: 22px; overflow: hidden; }
.t-ecran::before { content: ""; position: absolute; left: 50%; top: 7px; width: 54px; height: 15px; margin-left: -27px; border-radius: 999px; background: #111; z-index: 3; }
.t-nav { height: 46px; background: var(--marlot-fonce); display: flex; align-items: flex-end; padding: 0 12px 8px; color: #fff; font: 700 12px var(--display); gap: 7px; }
.t-nav i { width: 17px; height: 17px; border-radius: 3px; background: var(--marlot); display: grid; place-items: center; font: 700 10px var(--display); font-style: normal; }
.t-hero { position: relative; height: 176px; overflow: hidden; }
.t-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
.t-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,22,20,.85), rgba(20,22,20,.1) 70%); }
.t-hero p { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; font: 700 15px/1.15 var(--display); color: #fff; }
.t-appel { margin: 12px; background: var(--marlot); color: #fff; border-radius: 6px; text-align: center; padding: 10px 6px; font: 700 12px var(--display); letter-spacing: .04em; }
.t-appel small { display: block; font: 500 10.5px var(--texte); opacity: .85; letter-spacing: 0; }
.t-ligne { margin: 0 12px; display: flex; justify-content: space-between; font-size: 10.5px; color: #555; padding: 6px 0; border-top: 1px solid #EEE; }
.t-ligne b { color: #1F2421; }

/* ---------- 4. LES MÉTIERS (défilement horizontal) ---------- */
.metiers { background: var(--nuit); color: var(--nuit-texte); }
.metiers .colle { display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 44px); }
.metiers .entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.metiers h2 { color: var(--nuit-texte); font-size: clamp(30px, 3.6vw, 52px); max-width: 18ch; }
.metiers .sur-titre { color: #D39468; }
.compteur { font: 600 14px var(--display); letter-spacing: .08em; color: var(--nuit-gris); font-variant-numeric: tabular-nums; }
.compteur b { color: var(--nuit-texte); font-size: 30px; letter-spacing: -.02em; margin-right: 6px; }
.jauge { height: 2px; background: #2E2B28; margin-top: 12px; }
.jauge i { display: block; height: 100%; background: #D39468; transform-origin: left; transform: scaleX(0); will-change: transform; }
.defile { display: flex; gap: 22px; padding-inline: max(24px, calc((100vw - 1180px) / 2 + 24px)); will-change: transform; }
.carte-m { flex: none; width: clamp(260px, 30vw, 400px); }
.carte-m .ecran { border-radius: 8px; overflow: hidden; background: #26231F; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.carte-m .ecran .barre { height: 24px; display: flex; align-items: center; gap: 5px; padding-inline: 10px; background: #2B2824; }
.carte-m .ecran .barre i { width: 7px; height: 7px; border-radius: 50%; background: #4A453E; }
.carte-m .photo { height: clamp(170px, 20vw, 260px); overflow: hidden; }
.carte-m .photo img { width: 114%; max-width: none; height: 100%; object-fit: cover; margin-left: -7%; will-change: transform; }
.carte-m h3 { color: var(--nuit-texte); font-size: 19px; margin-top: 14px; letter-spacing: -.01em; }
.carte-m p { font-size: 14px; color: var(--nuit-gris); }

.etiquette { font: 700 11px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-doux); padding: 4px 10px; border-radius: 999px; }
.bascule { display: inline-flex; background: var(--encre); border-radius: 999px; padding: 4px; gap: 2px; margin-top: 22px; }
.bascule button { font: 600 13px var(--texte); border: 0; background: transparent; color: rgba(245,242,234,.7); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.bascule button[aria-pressed="true"] { background: var(--papier); color: var(--encre); }
/* ---------- 6. LA MÉTHODE (fil qui se trace) ---------- */
.methode { padding-block: clamp(80px, 12vh, 130px); background: var(--papier); }
.methode .borne { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.methode h2 { font-size: clamp(32px, 3.6vw, 50px); position: sticky; top: calc(var(--h) + 60px); }
.fil-cadre { position: relative; }
.fil { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; }
.fil-cadre::before, .fil-cadre .trace { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--ligne); }
.fil-cadre .trace { background: var(--accent); transform-origin: top; transform: scaleY(0); will-change: transform; }
.fil li { position: relative; padding-bottom: 46px; }
.fil li:last-child { padding-bottom: 0; }
.fil li::before { content: ""; position: absolute; left: -41px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--papier); border: 2px solid var(--ligne); transition: border-color .4s, background .4s; }
.fil li.fait::before { border-color: var(--accent); background: var(--accent); }
.fil .num { font: 600 12px var(--display); letter-spacing: .16em; color: var(--accent); }
.fil h3 { font-size: 26px; margin: 4px 0 8px; }
.fil p { max-width: 50ch; }
.fil .cle { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--encre); background: var(--accent-doux); padding: 3px 10px; border-radius: 3px; }

/* ---------- 7. L'OFFRE ---------- */
.offre { padding-block: 20px clamp(80px, 12vh, 130px); }
.offre .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.formule { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 26px 26px 24px; }
.formule.zen { background: var(--encre); border-color: var(--encre); color: var(--nuit-texte); }
.formule span { font: 500 12px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.formule.zen span { color: #D39468; }
.formule h3 { font-size: 26px; margin: 6px 0 16px; }
.formule.zen h3 { color: var(--nuit-texte); }
.formule .prix { font: 700 44px/1 var(--display); color: var(--encre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.formule.zen .prix { color: var(--nuit-texte); }
.formule .prix small { font: 500 14px var(--texte); color: var(--gris); letter-spacing: 0; margin-left: 6px; }
.formule.zen .prix small { color: var(--nuit-gris); }
.formule p { margin-top: 14px; font-size: 15.5px; }
.offre .option-l { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--gris); font-size: 15.5px; }

/* ---------- 8. FIN ---------- */
.fin { background: var(--nuit); color: var(--nuit-texte); padding-block: clamp(80px, 14vh, 150px); text-align: left; }
.fin h2 { color: var(--nuit-texte); font-size: clamp(36px, 5vw, 72px); max-width: 16ch; }
.fin p { color: var(--nuit-gris); font-size: 19px; max-width: 46ch; margin-top: 20px; }
.fin .btn { margin-top: 34px; }
.fin .borne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.fin-maquette { position: relative; }
.fin-maquette .mini { box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.fin-maquette .mini-hero img { opacity: 0; transition: opacity 1.2s ease; animation: respire 11s cubic-bezier(.4,0,.6,1) infinite alternate; will-change: transform, opacity; }
.fin-maquette .mini-hero img.active { opacity: 1; }
@keyframes respire { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.5%, 1%); } }
.fin-maquette .change { transition: opacity .5s ease; }
.fin-maquette .change.sort { opacity: 0; }
.tampon { position: absolute; right: -14px; top: -18px; z-index: 3; transform: rotate(6deg); background: var(--accent); color: var(--papier); font: 700 12px var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px; border-radius: 4px; box-shadow: 0 12px 24px -10px rgba(0,0,0,.6); text-align: center; line-height: 1.35; }
.tampon small { display: block; font: 500 11px var(--texte); letter-spacing: 0; text-transform: none; opacity: .9; }
@media (max-width: 900px) { .fin .borne { grid-template-columns: 1fr; } .tampon { right: 6px; } }
.calme .fin-maquette .mini-hero img { animation: none; }

.tableau-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; }
th { text-align: left; font: 600 11.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); padding: 10px 12px; border-bottom: 1.5px solid var(--encre); }
td { padding: 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
td:first-child { font-weight: 600; color: var(--encre); white-space: nowrap; }

/* Écran peu haut : la narration se resserre pour tenir sans être coupée. */
@media (min-width: 901px) and (max-height: 860px) {
  .narration .intro { margin-bottom: 16px; }
  .narration h2 { font-size: clamp(26px, 2.6vw, 34px); }
  .etapes-a li { padding: 4px 0; font-size: 16.5px; }
  .etapes-a li::before { top: 9px; }
}

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 900px) {
  :root { --h: 58px; }
  .hero .borne { grid-template-columns: 1fr; }
  .assemblage { height: 260vh; }
  .assemblage .colle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; gap: 18px; }
  /* Le titre de la section revient au-dessus de la maquette (Franck, 27/09) :
     la narration s'efface de la grille, ses morceaux s'y rangent un à un. */
  .narration { display: contents; }
  .narration .intro { display: block; order: 0; margin-bottom: 0; }
  .narration .intro h2 { font-size: clamp(24px, 6.4vw, 30px); }
  .scene-plateau { order: 1; }
  .detail { order: 2; }
  .etapes-cadre { display: none; }
  .detail { margin-top: 0; border-top: 0; padding-top: 0; height: 6.4em; max-width: none; }
  .detail .d { top: 0; }
  .detail .d b { display: block; font-family: var(--display); font-size: 19px; color: var(--encre); margin-bottom: 4px; }
  .scene-plateau { height: auto; }
  .methode .borne { grid-template-columns: 1fr; }
  .methode h2 { position: static; }
  .offre .grille { grid-template-columns: 1fr; }
}

/* ---------- Animations réduites : chaque scène montre son état final ---------- */
.calme .piste { height: auto !important; }
.calme .colle { position: relative; top: 0; height: auto; overflow: visible; padding-block: 60px; }
.calme .metiers .defile { overflow-x: auto; transform: none !important; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.calme .carte-m { scroll-snap-align: start; }
.calme .assemblage .colle { min-height: 700px; }
.carte-m { text-decoration: none; color: inherit; }
.carte-m:hover .photo img { transform: scale(1.03); }
.carte-m .photo img { object-position: top; }
.anim-apercu { margin-top: 26px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px; padding: 22px; }
.anim-apercu h3 { font-size: 26px; margin: 10px 0 8px; }
.anim-fenetre { border-radius: 8px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(28,26,22,.5), 0 0 0 1px rgba(0,0,0,.07); }
.anim-fenetre .barre { height: 24px; display: flex; align-items: center; gap: 5px; padding-inline: 10px; background: #EAE6DC; }
.anim-fenetre .barre i { width: 8px; height: 8px; border-radius: 50%; background: #D3CCBD; }
.anim-fenetre .barre b { margin-left: 8px; font: 500 10.5px var(--texte); color: #55524C; background: #fff; border-radius: 999px; padding: 1px 10px; }
.anim-ecran { position: relative; aspect-ratio: 1440 / 900; background: #000; isolation: isolate; }
/* Le calque (anim-cafe.jpg) passe en mode « écran » au-dessus de la vidéo :
   c'est une capture du site dont le hero est NOIR, texte et en-tête seuls.
   Le noir laisse voir la vidéo, le texte reste net par-dessus. Avant le
   25/09 le calque était la capture normale, photo du comptoir comprise :
   ses tireuses et ses verres se superposaient à ceux de la vidéo (image
   dédoublée, vue par Franck). Sans animation, la capture du site en photo
   fixe (anim-cafe-fixe.jpg) revient en fondu par-dessus. La vidéo
   (vid-cafe.mp4) rejoue la séquence du vrai site : le comptoir, la
   serveuse qui arrive en fondu, tire la bière et repart. */
.anim-ecran img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: screen; }
.anim-ecran img.anim-fixe { position: absolute; inset: 0; z-index: 2; mix-blend-mode: normal; opacity: 0; transition: opacity .5s ease; }
.anim-fenetre.sans img.anim-fixe { opacity: 1; }
.anim-ecran video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.9); opacity: 1; transition: opacity .5s ease; }
.anim-fenetre.sans video { opacity: 0; }
@media (max-width: 900px) { .anim-apercu { grid-template-columns: 1fr; } }
/* Le bouton de fin, seul, sous le texte et la maquette. */
.fin-cta { grid-column: 1 / -1; display: flex; justify-content: center; }
.fin .fin-cta .btn { margin-top: 10px; }
/* Seuls le hero et « Votre site prend forme » épinglent la page. */
.metiers { height: auto !important; }
.metiers .colle { position: relative; top: 0; }
.metiers .colle { height: auto; padding-block: clamp(60px, 10vh, 110px); overflow: visible; }
.defile { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 10px; cursor: grab; transform: none !important; }
.defile::-webkit-scrollbar { display: none; }
.defile:active { cursor: grabbing; }
.carte-m img { pointer-events: none; user-select: none; }
.lecteur { touch-action: pan-y; }
.lecteur-pied { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; background: rgba(26,26,26,.82); color: var(--papier); border-radius: 999px; padding: 6px 6px 6px 16px; font-size: 12.5px; white-space: nowrap; }
.lecteur-barre { width: 90px; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; }
.lecteur-barre b { display: block; height: 100%; background: #E7B58F; transform-origin: left; transform: scaleX(0); }
.lecteur-pied button { border: 0; background: #33312E; color: var(--papier); font: 600 12px var(--texte); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
@media (max-width: 900px) {
  .lecteur-pied span { display: none; }
}
/* =====================================================================
   Deux accueils à comparer (Franck, 24/09/2026). Même discours à gauche,
   jamais de texte sur l'image. À droite :
   A « la traversée » : dans une fenêtre, on zoome dans un site et on passe au suivant.
   B « la recherche » : un ordinateur, une recherche, nos sites qui s'ouvrent.
   Les deux finissent sur Takumea. Tout ce qui bouge est une transformation
   ou une transparence : pas de vidéo, pas de saccade.
   ===================================================================== */

.hero2 { height: 320vh; background: var(--papier); } /* 27/09 : 520vh, trop long à défiler (Franck) */
/* 08/10 (Franck) : le hero ne prend plus tout l'écran. Il se cale sur la
   fenêtre des sites, et le haut de « Comment ça marche » se voit dessous. */
.hero2 .colle { height: auto; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; max-width: 1340px; margin-inline: auto; padding-inline: 24px; padding-block: clamp(24px, 4vh, 48px) clamp(16px, 2.5vh, 32px); overflow: visible; }

/* Le discours : une étape à la fois, en fondu, au-dessus du bouton qui ne
   bouge jamais. Les cartes sont empilées dans la même case de grille : la
   pile prend la hauteur de la plus grande, le bouton ne saute pas. */
.discours { display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 36px); min-width: 0; }
.tx-pile { display: grid; }
.tx { grid-area: 1 / 1; align-self: end; min-width: 0; transform: translate3d(0, 20px, 0); opacity: 0; transition: opacity .6s ease, transform .6s var(--sortie); pointer-events: none; }
.tx.actif { opacity: 1; transform: none; pointer-events: auto; }
.tx h1 { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -.035em; }
.tx h2 { font-size: clamp(32px, 3.9vw, 56px); letter-spacing: -.03em; }
.tx .suite { margin-top: .5em; padding-left: 1.2em; color: var(--accent); opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s ease, transform .6s var(--sortie); }
.tx.avec-suite .suite { opacity: 1; transform: none; }
.tx .aere { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.tx .aere li { font: 600 clamp(19px, 1.7vw, 23px) var(--display); color: var(--encre); padding-left: 22px; position: relative; }
.tx .aere li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--accent); }
.tx p { font-size: clamp(18px, 1.5vw, 21px); color: var(--corps); max-width: 40ch; }
.tx .aere + p { margin-top: 26px; }
.tx h2 + p { margin-top: 24px; }
.tx p + p { margin-top: 10px; }
.tx .sur-titre { margin-bottom: 14px; }
.indice { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font: 600 12px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.indice i { width: 1px; height: 34px; background: linear-gradient(var(--gris), transparent); animation: descend 1.8s ease-in-out infinite; }
@keyframes descend { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* La dernière carte : la phrase de fin, le bouton est déjà en dessous. */
.tx-fin .grand { font: 700 clamp(30px, 3.4vw, 50px)/1.08 var(--display); letter-spacing: -.03em; color: var(--encre); max-width: 16ch; }
/* Le bouton et les garanties, visibles du début à la fin de la boucle. */
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero-cta .garanties { font-size: 14px; letter-spacing: .02em; color: var(--gris); }

/* ---------- A. LA TRAVERSÉE, dans une fenêtre ---------- */
/* Le cadre porte la place de la fenêtre dans la grille et le bouton pause
   (posé dans le coin bas droit de la fenêtre). Sur un écran d'ordinateur peu
   haut, la fenêtre se réduit un peu pour laisser voir la section suivante. */
.ecranA { position: relative; width: 100%; max-width: min(860px, calc((100svh - var(--h) - 264px) * 1.6)); justify-self: end; }
.ecranA .auto-pause { right: 12px; bottom: 12px; width: 34px; height: 34px; }
.ecranA .auto-pause svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .ecranA .auto-pause { right: 8px; bottom: 8px; width: 30px; height: 30px; } .ecranA .auto-pause svg { width: 12px; height: 12px; } }
.fenetreA { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--nuit); box-shadow: 0 50px 100px -50px rgba(28,26,22,.65), 0 0 0 1px rgba(0,0,0,.08); }
.fenetreA .barre { position: relative; z-index: 3; height: 34px; display: flex; align-items: center; gap: 7px; padding-inline: 14px; background: #EAE6DC; }
.fenetreA .barre i { width: 10px; height: 10px; border-radius: 50%; background: #D3CCBD; flex: none; }
.fenetreA .barre b { margin-left: 12px; font: 500 12px var(--texte); color: #55524C; background: #fff; border-radius: 999px; padding: 3px 16px; white-space: nowrap; transition: opacity .3s; }
.vue { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: var(--nuit); isolation: isolate; }
.ta-site { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; backface-visibility: hidden; }
.ta-site:first-child { opacity: 1; visibility: visible; }
.ta-site img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* La carte Takumea du départ : au premier scroll, on plonge dedans. */
.vue-debut { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: var(--nuit); will-change: transform, opacity; }
.vue-debut .logo { height: clamp(40px, 6.5vw, 92px); }
/* Les cartes animées (26/09). Au départ, des mains au travail (rabot, brique,
   bière tirée, tableau électrique, gouge) ; à la fin, les animations des démos
   (plongée du plombier, restaurant, architecte, café, menuisier). Voilées pour
   que le logo reste lisible. Tirées des vidéos des démos. */
.vue-debut, .vue-logo { isolation: isolate; }
.carte-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vue-debut::after, .vue-logo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(21,20,19,.78), rgba(21,20,19,.5) 70%, rgba(21,20,19,.38)); }
.vue-debut .carte-logo, .vue-logo .carte-logo { position: relative; }
@media (prefers-reduced-motion: reduce) { .carte-film { display: none; } }
.vue-logo { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--nuit); opacity: 0; visibility: hidden; will-change: opacity; }
.carte-logo { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.8vw, 22px); }
.vue-logo .logo { height: clamp(40px, 6.5vw, 92px); }
.tb-logo .logo { height: clamp(30px, 5vw, 72px); }
.carte-logo .signature { font: 600 clamp(10px, 1.1vw, 14px) var(--display); letter-spacing: .26em; text-transform: uppercase; color: #E7B58F; }

/* Une colonne sur téléphone, et aussi sur tout écran tenu en hauteur (tablette,
   téléphone en « version pour ordinateur ») : côte à côte, la carte et le
   texte laissaient un grand vide au-dessus et en dessous (Franck, 26/09). */
@media (max-width: 900px), (orientation: portrait) and (max-aspect-ratio: 4/5) {
  .hero2 { height: 300vh; }
  .hero2 .colle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 24px; padding-block: 20px 36px; }
  .ecranA { order: -1; max-width: 560px; justify-self: center; }
  .discours { gap: 22px; }
  .tx { align-self: start; transform: translate3d(0, 18px, 0); }
  .tx.actif { transform: none; }
  .tx h1 { font-size: clamp(34px, 9.5vw, 50px); }
  .tx h2 { font-size: clamp(27px, 7.6vw, 40px); }
}
@media (min-width: 901px) and (orientation: portrait) and (max-aspect-ratio: 4/5) {
  .ecranA { max-width: none; }
  .tx h1 { font-size: clamp(40px, 6vw, 64px); }
  .tx h2 { font-size: clamp(32px, 4.8vw, 52px); }
}
.calme .indice i { animation: none; }
/* =====================================================================
   Pages Maquettes, Offre, Contact et pied de page commun.
   ===================================================================== */
.page-entete { padding-block: clamp(48px, 8vh, 90px) 24px; }
.page-entete h1 { font-size: clamp(40px, 5.4vw, 76px); max-width: 16ch; }
.page-entete .lead { font-size: 19px; color: var(--gris); max-width: 52ch; margin-top: 22px; }
.bloc { padding-block: clamp(56px, 9vh, 100px); }
.bloc-tint { background: var(--tint); border-block: 1px solid var(--ligne); }
.entete-s { margin-bottom: 34px; max-width: 60ch; }
.entete-s h2 { font-size: clamp(30px, 3.4vw, 46px); }
.entete-s p { color: var(--gris); font-size: 18px; margin-top: 12px; }

/* ---------- MAQUETTES : le titre à travers lequel passe la vidéo ---------- */
.ko { height: 220vh; background: #000; }
/* isolation : le mélange « multiply » se calcule dans ce cadre seulement.
   Pas de will-change sur le mot ni le calque : figés en couche, le mot
   zoomé 34 fois ne se redessinait qu'en partie en remontant (rectangle
   noir sur les lettres, vu par Franck le 25/09). */
.ko .colle { background: #000; isolation: isolate; }
/* Le canvas dessine tout l'effet (voir recit.js) : l'ancien calque reste
   dans la page pour les lecteurs d'écran, invisible. */
.ko-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ko-dessine .ko-calque { mix-blend-mode: normal; opacity: 0 !important; }
.ko video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ko-calque { position: absolute; inset: 0; background: #000; mix-blend-mode: multiply; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.ko-mot { font: 800 clamp(44px, 12.5vw, 210px)/.9 var(--display); letter-spacing: -.03em; color: #fff; text-transform: uppercase; transform-origin: 50% 50%; white-space: nowrap; padding-inline: 4vw; }
.ko-texte { position: absolute; left: 0; right: 0; bottom: clamp(28px, 7vh, 70px); text-align: center; color: #EDE8DC; padding-inline: 20px; will-change: opacity, transform; }
.ko-texte p { max-width: 50ch; margin: 0 auto; font-size: 18px; color: rgba(237,232,220,.82); }
.ko-texte .sur-titre { color: #D39468; margin-bottom: 10px; }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filtres button { font: 600 14px var(--texte); border: 1.5px solid var(--ligne); background: var(--blanc); color: var(--corps); padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.grille-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 22px; }
.demo-c { display: block; text-decoration: none; color: inherit; transition: opacity .45s ease, transform .45s var(--sortie), filter .45s ease; }
.demo-c.estompe { opacity: .16; transform: scale(.97); pointer-events: none; }
.demo-c .ecran { position: relative; border-radius: 8px; overflow: hidden; background: var(--blanc); box-shadow: 0 20px 40px -26px rgba(28,26,22,.45), 0 0 0 1px rgba(0,0,0,.06); }
.demo-c .barre { height: 24px; display: flex; align-items: center; gap: 5px; padding-inline: 10px; background: #EAE5D9; }
.demo-c .barre i { width: 7px; height: 7px; border-radius: 50%; background: #CFC7B7; }
.demo-c .img { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.demo-c .img img, .demo-c .img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sortie), opacity .5s ease; }
.demo-c .img video { opacity: 0; }
.demo-c.joue .img video { opacity: 1; }
.demo-c:hover .img img { transform: scale(1.04); }
.demo-c .badge { position: absolute; right: 10px; top: 10px; z-index: 2; font: 700 10.5px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-doux); padding: 3px 9px; border-radius: 999px; }
.demo-c h3 { font-size: 18px; margin-top: 12px; letter-spacing: -.01em; }
.demo-c p { font-size: 14.5px; color: var(--gris); }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.theme { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 18px 20px; }
.theme .pastilles { display: inline-flex; margin-bottom: 14px; padding: 7px 16px 7px 8px; background: #E2DCCF; border-radius: 999px; }  /* le plateau fait ressortir les couleurs claires */
.theme .pastilles i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #E2DCCF; margin-right: -8px; transition: margin .35s var(--sortie); box-shadow: inset 0 0 0 1px rgba(26,26,26,.32), 0 2px 5px rgba(26,26,26,.22); }  /* le liseré rend visibles les couleurs claires sur la carte */
.theme:hover .pastilles i { margin-right: 4px; }
.theme b { display: block; font: 700 18px var(--display); color: var(--encre); }
.theme p { font-size: 14.5px; margin-top: 4px; }
.encadre { background: var(--encre); color: var(--nuit-texte); border-radius: 10px; padding: 34px; }
.encadre b { display: block; font: 700 24px/1.2 var(--display); color: var(--nuit-texte); }
.encadre p { color: var(--nuit-gris); margin-top: 10px; }
.encadre .btn { margin-top: 20px; }
.deux-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.deux-col .prose p + p { margin-top: 14px; }

/* ---------- OFFRE ---------- */
.fiche { background: var(--blanc); border: 1.5px solid var(--encre); border-radius: 14px; box-shadow: 6px 6px 0 var(--tint); padding: clamp(24px, 3vw, 34px); }
.fiche-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.fiche-nom { font: 700 30px var(--display); color: var(--encre); letter-spacing: -.015em; }
.fiche-sous { color: var(--gris); font-size: 15px; margin-top: 4px; max-width: 56ch; }
.fiche .prix { font: 700 52px/1 var(--display); color: var(--encre); letter-spacing: -.03em; text-align: right; }
.fiche .prix small { display: block; font: 500 14px var(--texte); color: var(--gris); letter-spacing: 0; margin-top: 6px; }
.coches { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px; }
.coches li { position: relative; padding-left: 32px; opacity: .3; transition: opacity .4s ease; }
.coches li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ligne); transition: background .4s, border-color .4s; }
.coches li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border: solid var(--papier); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--sortie); }
.coches li.coche { opacity: 1; }
.coches li.coche::before { background: var(--accent); border-color: var(--accent); }
.coches li.coche::after { transform: rotate(45deg) scale(1); }
.option-anim { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: var(--blanc); border: 1px solid var(--ligne); border-left: 3px solid var(--accent); border-radius: 8px; padding: 20px 24px; }
.option-anim b { display: block; font: 700 20px var(--display); color: var(--encre); margin-top: 6px; }
.option-anim p { font-size: 15.5px; margin-top: 4px; max-width: 62ch; }
.option-anim .montant { font: 700 22px var(--display); color: var(--accent); white-space: nowrap; }
.duo-of { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.carte-of { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px; padding: 26px; }
.carte-of .nom { font: 700 26px var(--display); color: var(--encre); margin: 4px 0 10px; }
.carte-of .montant { font: 700 40px/1 var(--display); color: var(--encre); letter-spacing: -.02em; }
.carte-of .montant small { font: 500 14px var(--texte); color: var(--gris); letter-spacing: 0; margin-left: 6px; }
.carte-of ul { margin: 16px 0 0; padding-left: 18px; font-size: 15.5px; }
.carte-of li { margin-bottom: 6px; }
.modules { display: grid; gap: 14px; }
.module { background: var(--blanc); border: 1px solid var(--ligne); border-left: 3px solid var(--accent); border-radius: 8px; padding: 18px 20px; font-size: 15px; }
.module b { display: block; font: 700 18px var(--display); color: var(--encre); }
.module i { display: block; font: 700 16px var(--display); font-style: normal; color: var(--accent); margin: 2px 0 6px; }

.zen-piste { background: var(--nuit); color: var(--nuit-texte); padding-block: clamp(60px, 10vh, 110px); text-align: center; }
.zen-piste .colle { display: grid; place-items: center; text-align: center; }
.zen-scene { position: relative; width: min(900px, 100%); padding-inline: 20px; }
.zen-scene .sur-titre { color: #D39468; }
.zen-scene h2 { color: var(--nuit-texte); font-size: clamp(30px, 3.6vw, 48px); margin-bottom: clamp(28px, 6vh, 54px); }
.calcul { position: relative; height: clamp(150px, 22vh, 210px); }
.calcul > div { position: absolute; left: 0; right: 0; top: 0; font: 700 clamp(44px, 7vw, 96px)/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; will-change: transform, opacity; }
.calcul small { display: block; font: 500 clamp(14px, 1.4vw, 17px)/1.4 var(--texte); letter-spacing: 0; color: var(--nuit-gris); margin-top: 12px; }
.calcul em { color: #E7B58F; }
.zen-fin { margin-top: 30px; color: var(--nuit-gris); font-size: 17px; max-width: 56ch; margin-inline: auto; }
.calcul-fixe { display: flex; align-items: flex-start; justify-content: center; gap: clamp(14px, 3vw, 36px); flex-wrap: wrap; }
.calcul-fixe b { display: block; font: 700 clamp(34px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.03em; color: var(--nuit-texte); font-variant-numeric: tabular-nums; }
.calcul-fixe .total b { color: #E7B58F; }
.calcul-fixe b i { font: 500 .4em var(--texte); font-style: normal; letter-spacing: 0; color: var(--nuit-gris); }
.calcul-fixe small { display: block; font-size: 14.5px; color: var(--nuit-gris); margin-top: 10px; }
.calcul-fixe .op { font: 400 clamp(30px, 3.6vw, 50px)/1 var(--display); color: var(--nuit-gris); }
.zen-fin b { color: var(--nuit-texte); }

.tableau-of { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--blanc); font-size: 15.5px; }
.tableau-of th { background: var(--encre); color: var(--papier); border: 0; }
.tableau-of td:first-child { white-space: normal; }
.tableau-of .p { font: 700 18px var(--display); color: var(--encre); white-space: nowrap; }
.note-options { margin-top: 14px; color: var(--gris); font-size: 15px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.opt { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 20px; font-size: 15px; }
.opt b { display: block; font: 700 18px var(--display); color: var(--encre); }
.opt i { display: block; font: 700 17px var(--display); font-style: normal; color: var(--accent); margin-top: 8px; }
.compris { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.compris ul { margin: 0; padding-left: 20px; }
.compris li { margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--ligne); }
.faq details:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 19px var(--display); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 28px var(--texte); color: var(--accent); transition: transform .3s var(--sortie); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .reponse { padding-bottom: 18px; max-width: 70ch; }
.faq .reponse p + p { margin-top: 10px; }

/* ---------- CONTACT ---------- */
.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.etapes-c { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.etapes-c li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; font-size: 15.5px; }
.etapes-c .n { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-doux); color: var(--accent); display: grid; place-items: center; font: 700 15px var(--display); }
.etapes-c b { display: block; font: 700 17px var(--display); color: var(--encre); }
.apercu-c { position: sticky; top: calc(var(--h) + 24px); }
.apercu-c .titre-ap { font: 600 12px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; display: flex; justify-content: space-between; }
.mini { border-radius: 10px; overflow: hidden; background: #FBFBFA; box-shadow: 0 30px 70px -36px rgba(28,26,22,.5), 0 0 0 1px rgba(0,0,0,.07); --c: #4E7D5E; }
.mini .f-barre { height: 30px; }
.mini .f-url { height: 20px; font-size: 11.5px; }
.mini-nav { height: 42px; background: #1F2421; display: flex; align-items: center; gap: 10px; padding-inline: 16px; color: #EDEDE8; font: 700 14px var(--display); }
.mini-nav i { width: 22px; height: 22px; border-radius: 4px; background: var(--c); display: grid; place-items: center; font: 700 12px var(--display); font-style: normal; color: #fff; transition: background .4s; }
.mini-nav span { margin-left: auto; font: 600 10.5px var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--c); color: #fff; padding: 6px 10px; border-radius: 3px; transition: background .4s; }
.mini-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2A2A28; }
.mini-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.mini-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,20,.85), rgba(20,22,20,.25) 70%); }
.mini-texte { position: absolute; left: 22px; right: 40%; bottom: 22px; z-index: 2; color: #fff; }
.mini-texte small { display: block; font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 6px; }
.mini-texte b { display: block; font: 700 clamp(18px, 2vw, 24px)/1.12 var(--display); }
.mini-texte span { display: inline-block; margin-top: 10px; font: 600 10.5px var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--c); padding: 7px 11px; border-radius: 3px; transition: background .4s; }
/* Les maquettes de l'accueil et du contact montrent les vraies démos, capturées en ligne (27/09). */
.mini-capture { aspect-ratio: 16 / 10; background: #EDEAE3; }
.mini-capture::after { content: none; }
.mini-capture img { object-position: top center; }
.fin-maquette .mini-capture img { animation: none; }
.couleurs { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--gris); }
.couleurs button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--papier); box-shadow: 0 0 0 1px var(--ligne); cursor: pointer; }
.couleurs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--encre); }
.form { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 16px; }
.champs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ label { display: block; font: 600 14px var(--texte); color: var(--encre); margin-bottom: 6px; }
.champ input, .champ select, .champ textarea { width: 100%; font: 400 16px var(--texte); color: var(--encre); background: var(--papier); border: 1.5px solid var(--ligne); border-radius: 4px; padding: 11px 12px; transition: border-color .2s; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); }
.form .btn { justify-content: center; border: 0; cursor: pointer; }
.form .mention { font-size: 13.5px; color: var(--gris); }
.form .envoye { background: var(--accent-doux); color: var(--encre); border-radius: 6px; padding: 14px 16px; font-size: 15px; }

/* ---------- Options sur l'accueil ---------- */
.options-accueil { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.options-accueil > div { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 18px 20px; }
.options-accueil span { display: block; font: 600 11.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.options-accueil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px; }
.options-accueil li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--ligne); padding-bottom: 6px; }
.options-accueil li:last-child { border-bottom: 0; padding-bottom: 0; }
.options-accueil li b { color: var(--encre); white-space: nowrap; font-weight: 600; }
.lien-offre { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--accent); }

@media (max-width: 900px) {
  .deux-col, .duo-of, .compris, .contact-grille, .options-accueil, .champs2 { grid-template-columns: 1fr; }
  .coches { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .option-anim { grid-template-columns: 1fr; }
  .apercu-c { position: static; order: -1; }
  footer.pied nav { margin-left: 0; }
}
.calme .ko-mot { transform: none !important; }
.calme .coches li { opacity: 1; }

/* ---------- 29/09 : plus de pistes épinglées (Franck et Manu) ----------
   Le hero, « Votre site prend forme » et le mot géant tiennent sur un écran
   et se jouent tout seuls (recit.js, scènes « auto »). On défile librement. */
.hero2, .assemblage, .ko { height: auto; }
.hero2 .colle, .assemblage .colle, .ko .colle { position: relative; top: 0; }
/* Le bouton pause du hero, qui tourne en boucle */
.auto-pause { position: absolute; right: 18px; bottom: 18px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ligne); background: rgba(250, 249, 246, .88); color: var(--encre); display: grid; place-items: center; cursor: pointer; padding: 0; }
.auto-pause svg { width: 16px; height: 16px; fill: currentColor; }
.auto-pause .i-lire, .auto-pause.en-pause .i-pause { display: none; }
.auto-pause.en-pause .i-lire { display: inline; }
.auto-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }