@font-face { font-family: 'Manrope'; src: url(fonts/Manrope-Variable.ttf) format('truetype'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; src: url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; src: url(fonts/barlow-condensed-normal-600.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; src: url(fonts/barlow-condensed-normal-800.woff2) format('woff2'); font-display: swap; }
/* Polices des cinq habits */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; src: url(fonts/fraunces-normal-100-900.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; src: url(fonts/anton-normal-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; src: url(fonts/cormorant-garamond-normal-300-700.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; src: url(fonts/cormorant-garamond-italic-300-700.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; src: url(fonts/jost-normal-100-900.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; src: url(fonts/unbounded-normal-200-900.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 400; src: url(fonts/zilla-slab-normal-400.woff2) format('woff2'); font-display: swap; }

:root { --signal: #2855f8; --signal-clair: #5b7fff; --pale: #dce5ff; --brume: #f3f6ff; --nuit: #12203b; --encre: #0a1222; --ardoise: #526078; --ligne: #dce2ec; --volt: #c8f53c; --courbe: cubic-bezier(0.2, 0.8, 0.2, 1); --marge: clamp(20px, 5.5vw, 88px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.6 Manrope, 'Segoe UI', Arial, sans-serif; color: var(--nuit); background: var(--encre); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
.geant { font: 800 clamp(42px, 7.2vw, 124px) / 0.9 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.012em; }
.grand { font: 800 clamp(34px, 4.9vw, 84px) / 0.95 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; }
.plume { font: italic 400 clamp(22px, 2.2vw, 34px) / 1.1 'Instrument Serif', Georgia, serif; }
.sur { font: 700 12px/1.4 Manrope, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
/* Les titres montent ligne par ligne derrière un cache */
.ligne { display: block; overflow: hidden; padding-bottom: 0.04em; }
.ligne > span { display: block; }
.js .ligne > span { transform: translateY(110%); transition: transform 1s var(--courbe); transition-delay: calc(var(--n, 0) * 0.09s); }
.js .vu .ligne > span, .js .ligne.vu > span { transform: none; }
.js .rv { opacity: 0; transform: translateY(30px); transition: opacity 0.9s, transform 0.9s var(--courbe); transition-delay: calc(var(--n, 0) * 0.08s); }
.js .rv.vu { opacity: 1; transform: none; }
/* Les images se dévoilent de bas en haut, en dézoomant */
.js .devoile { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path 1.3s var(--courbe); }
.js .devoile.vu { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.js .devoile img, .js .devoile video { scale: 1.18; transition: scale 1.8s var(--courbe); }
.js .devoile.vu img, .js .devoile.vu video { scale: 1; }
.bouton { position: relative; display: inline-flex; align-items: center; gap: 12px; font: 800 17px/1 Manrope, sans-serif; text-decoration: none; padding: 22px 30px; border-radius: 999px; background: var(--volt); color: var(--encre); border: 0; cursor: pointer; transition: transform 0.35s var(--courbe), box-shadow 0.35s; will-change: transform; }
.bouton::after { content: '→'; transition: transform 0.35s var(--courbe); }
.bouton:hover { box-shadow: 0 0 0 8px #c8f53c2e, 0 18px 50px -12px #c8f53c99; }
.bouton:hover::after { transform: translateX(6px); }

/* Rideau d'entrée : les trois barres du logo montent, puis le rideau s'efface vers le haut */
.rideau { position: fixed; inset: 0; z-index: 100; background: var(--encre); display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.9s var(--courbe) 0.15s; pointer-events: none; }
.rideau div { display: flex; align-items: end; gap: 10px; height: 90px; }
.rideau i { width: 24px; border-radius: 6px; background: var(--volt); transform-origin: bottom; animation: monte 0.7s var(--courbe) both; }
.rideau i:nth-child(1) { height: 34%; }
.rideau i:nth-child(2) { height: 64%; animation-delay: 0.12s; }
.rideau i:nth-child(3) { height: 100%; animation-delay: 0.24s; }
@keyframes monte { from { transform: scaleY(0); } }
.pret .rideau { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
html:not(.js) .rideau { display: none; }

.avance { position: fixed; z-index: 60; left: 0; top: 0; height: 3px; width: 100%; background: var(--volt); transform-origin: left; transform: scaleX(var(--lu, 0)); }
header { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px var(--marge); color: #fff; transition: transform 0.5s var(--courbe), background 0.4s; }
header.cache { transform: translateY(-110%); }
header.fond { background: #0a1222e6; backdrop-filter: blur(10px); }
header img { width: 142px; height: auto; }
header nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); font-size: 14.5px; font-weight: 700; }
header nav a { text-decoration: none; position: relative; }
header nav a:not(.tel)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--volt); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--courbe); }
header nav a:hover::after { transform: none; }
header .tel { padding: 11px 18px; border-radius: 999px; background: #ffffff1f; }

/* Ouverture : la photo et le mot changent de métier ensemble */
.hero { position: relative; height: 100vh; min-height: 620px; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 70px var(--marge) clamp(70px, 11vw, 150px); }
.diapos img { position: absolute; inset: 0; opacity: 0; transform: scale(1.14); transition: opacity 1.4s, transform 7s linear; }
.diapos img.la { opacity: 1; transform: none; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0a1222f2 0%, #0a1222b3 42%, #0a122240 100%), linear-gradient(0deg, #0a1222 0%, transparent 34%); }
.torche { position: absolute; inset: 0; z-index: 1; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), #c8f53c24, transparent 70%); pointer-events: none; }
.hero > *:not(.diapos):not(.torche) { position: relative; z-index: 2; }
.hero .plume { color: var(--volt); margin-bottom: 14px; }
.hero h1 { max-width: 1300px; }
.mot { display: inline-block; color: var(--volt); }
.mot span { display: inline-block; transition: transform 0.55s var(--courbe), opacity 0.4s; }
.mot.sort span { transform: translateY(-70%) rotate(-4deg); opacity: 0; }
.mot.entre span { transform: translateY(70%) rotate(4deg); opacity: 0; transition: none; }
.hero .chapo { font-size: clamp(17px, 1.45vw, 21px); max-width: 560px; color: var(--pale); margin: 26px 0 30px; }
.rang { position: absolute !important; right: var(--marge); bottom: clamp(100px, 13vw, 190px); text-align: right; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.rang b { display: block; font: 800 44px/1 'Barlow Condensed', sans-serif; letter-spacing: 0; color: var(--volt); }
.rang i { display: block; width: 150px; height: 2px; background: #ffffff40; margin: 10px 0 0 auto; position: relative; overflow: hidden; }
.rang i::after { content: ''; position: absolute; inset: 0; background: var(--volt); transform-origin: left; animation: duree 3.6s linear infinite; }
@keyframes duree { from { transform: scaleX(0); } }
.mot-geant { position: absolute !important; z-index: 1 !important; left: 0; bottom: -0.34em; white-space: nowrap; font: 800 clamp(90px, 17vw, 300px) / 0.8 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #2855f866; mix-blend-mode: screen; pointer-events: none; transform: translateX(calc(var(--glisse, 0) * -1px)); will-change: transform; }

.chiffres { position: relative; z-index: 3; background: #05080f; color: #fff; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 30px; padding: clamp(26px, 3.4vw, 46px) var(--marge); }
.chiffres li { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.chiffres b { font: 800 clamp(38px, 4.4vw, 70px) / 0.9 'Barlow Condensed', sans-serif; color: var(--volt); font-variant-numeric: tabular-nums; }
.chiffres span { font: 600 clamp(15px, 1.5vw, 22px) / 1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.chiffres em { font: italic 400 1.2em/1 'Instrument Serif', Georgia, serif; text-transform: none; letter-spacing: 0; }

/* Le problème : avant et après, à faire glisser */
.probleme { background: var(--brume); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(80px, 10vw, 150px) var(--marge); }
.probleme .sur { color: var(--signal); }
.probleme .grand { margin: 14px 0 18px; font-size: clamp(34px, 4.4vw, 76px); }
.probleme .plume { color: var(--signal); margin-bottom: 16px; }
.probleme .texte p:last-of-type { color: var(--ardoise); max-width: 440px; }
.glisse { position: relative; aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 100px -50px #12203bb3, 0 0 0 1px var(--ligne); touch-action: pan-y; user-select: none; cursor: ew-resize; --x: 50%; }
.glisse .apres, .glisse .avant { position: absolute; inset: 0; }
.glisse .apres { color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 5% 0 54%; isolation: isolate; }
.glisse .apres img { position: absolute; inset: 0; z-index: -1; filter: brightness(0.55); }
.glisse .apres small { font: 700 clamp(8px, 0.9vw, 12px) / 1 Manrope, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #e9c46a; }
.glisse .apres b { font: 800 clamp(18px, 2.5vw, 40px) / 1.02 Manrope, sans-serif; letter-spacing: -0.04em; margin: 0.4em 0 0.6em; }
.glisse .apres u { text-decoration: none; align-self: flex-start; background: #e9c46a; color: #1c1408; font: 700 clamp(9px, 1vw, 15px) / 1 Manrope, sans-serif; padding: 0.9em 1.3em; border-radius: 8px; }
.glisse .avant { clip-path: inset(0 calc(100% - var(--x)) 0 0); background: #c9d6ea; color: #000080; font: clamp(9px, 1.05vw, 15px) / 1.5 'Times New Roman', Times, serif; }
.glisse .avant h4 { margin: 0; background: #7a0000; color: #ffe600; font: bold clamp(9px, 1.15vw, 16px) / 2.4 Arial, sans-serif; text-align: center; white-space: nowrap; }
.glisse .avant div { padding: 4% 5%; }
.glisse .avant a { color: #0000ee; text-decoration: underline; margin-right: 0.8em; }
.glisse .avant strong { display: inline-block; margin: 0.8em 0; border: 2px solid #b00; padding: 0.5em 0.8em; color: #b00; }
.glisse .avant kbd { background: #000; color: #0f0; font: bold 1em/1 'Courier New', monospace; padding: 0.2em 0.5em; letter-spacing: 0.2em; }
.poignee { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--volt); }
.poignee::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: var(--volt); color: var(--encre); display: grid; place-items: center; font: 800 20px/1 Manrope, sans-serif; box-shadow: 0 10px 30px #0006; }
.glisse .eti { position: absolute; bottom: 14px; font: 800 11px/1 Manrope, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: #0a1222cc; color: #fff; }
.glisse .eti.g { left: 14px; }
.glisse .eti.d { right: 14px; background: var(--volt); color: var(--encre); }
.probleme .note { font-size: 13px; color: var(--ardoise); margin-top: 12px; }

/* Les trois temps : trois photos plein écran qui se recouvrent */
.temps { position: relative; }
.etape { position: sticky; top: 0; height: 100vh; min-height: 560px; color: #fff; overflow: hidden; display: flex; align-items: center; padding: 60px var(--marge) 0; border-radius: 26px 26px 0 0; box-shadow: 0 -30px 80px #000a; isolation: isolate; }
.etape:first-child { border-radius: 0; }
.etape > img { position: absolute; inset: 0; z-index: -2; }
.etape::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0a1222f5 8%, #0a122299 55%, #0a122259); }
.etape .num { position: absolute; right: var(--marge); top: clamp(70px, 12vh, 130px); font: 800 clamp(110px, 18vw, 300px) / 0.8 'Barlow Condensed', sans-serif; color: transparent; -webkit-text-stroke: 2px #ffffff47; }
.etape .plume { color: var(--volt); }
.etape h2 { margin: 8px 0 18px; max-width: 1100px; }
.etape p.dit { max-width: 560px; color: var(--pale); }
.etape small { display: block; margin-top: 16px; font-size: 15px; }
.etape small b { color: var(--volt); }

/* Signature : le même artisan, cinq sites. Le défilement change l'habit. */
.habits { background: var(--encre); color: #fff; position: relative; z-index: 2; }
.habits .scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 5vw, 80px); align-items: center; padding: clamp(60px, 8vw, 110px) var(--marge); }
.habits .sur { color: var(--volt); }
.habits .grand { margin: 12px 0 18px; }
.habits .grand em { font: italic 400 0.9em/1 'Instrument Serif', Georgia, serif; text-transform: none; color: var(--volt); }
.habits .note { color: var(--pale); max-width: 440px; }
.compteur { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; }
.compteur b { font: 800 clamp(48px, 5.4vw, 86px) / 0.9 'Barlow Condensed', sans-serif; color: var(--volt); font-variant-numeric: tabular-nums; }
.compteur span { font: 600 22px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
.points { display: flex; gap: 8px; margin-top: 16px; }
.points i { width: 36px; height: 4px; border-radius: 4px; background: #ffffff33; transition: background 0.3s; }
.points i.oui { background: var(--volt); }
.ecran { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 50px 120px -30px #000, 0 0 0 1px #ffffff26; color: #111; }
.ecran::before { content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 26px; background: #eef1f7 radial-gradient(circle at 16px 13px, #c9d0de 4px, transparent 5px), radial-gradient(circle at 32px 13px, #c9d0de 4px, transparent 5px), radial-gradient(circle at 48px 13px, #c9d0de 4px, transparent 5px); background-repeat: no-repeat; }
.habit { position: absolute; inset: 26px 0 0; display: grid; overflow: hidden; }
.js .habit { opacity: 0; transform: scale(1.04); transition: opacity 0.55s, transform 0.8s var(--courbe); }
.js .habit.la { opacity: 1; transform: none; z-index: 2; }
.habit h3 { margin: 0; }
.habit .b { display: inline-block; }
.habit .n { position: absolute; z-index: 2; left: 5%; right: 5%; top: 4.5%; display: flex; justify-content: space-between; align-items: center; font-size: clamp(9px, 0.95vw, 13px); }
.habit .n span + span { display: flex; gap: 1.4em; }
.h1 { background: #f4ecdd; color: #3a2a1f; grid-template-columns: 1fr 1fr; align-items: center; }
.h1 .t { padding: 14% 6% 6% 10%; }
.h1 h3 { font: 800 clamp(22px, 3.5vw, 52px) / 0.98 Fraunces, Georgia, serif; letter-spacing: -0.03em; }
.h1 .t p { font-size: clamp(10px, 1vw, 14px); margin: 1em 0 1.4em; }
.h1 .b { background: #b5532a; color: #fff; border-radius: 999px; padding: 0.8em 1.4em; font-size: clamp(9px, 0.9vw, 13px); font-weight: 700; }
.h1 figure { height: 74%; margin-right: 8%; border-radius: 18px; overflow: hidden; align-self: center; }
.h1 .n span + span b { background: #3a2a1f14; padding: 0.4em 0.9em; border-radius: 999px; font-weight: 600; }
.h2 { background: #e7d3b8; color: #2b1d14; grid-template-rows: 66% 1fr; }
.h2 figure { position: relative; }
.h2 h3 { position: absolute; left: 4%; bottom: -0.34em; z-index: 1; font: 400 clamp(46px, 9.5vw, 140px) / 0.9 Anton, Impact, sans-serif; text-transform: uppercase; color: #c2491d; }
.h2 .t { padding: 0 5% 4%; display: flex; justify-content: space-between; align-items: end; gap: 5%; }
.h2 .t p { font: 400 clamp(11px, 1.2vw, 17px) / 1.4 Georgia, serif; max-width: 54%; }
.h2 .b { background: #2b1d14; color: #e7d3b8; padding: 0.9em 1.3em; font: 400 clamp(10px, 1vw, 14px) / 1 Anton, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.h2 .n { color: #fff; text-shadow: 0 1px 6px #0008; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.h3 { background: #fff; color: #23221f; grid-template-columns: 30% 1fr; font-family: Jost, sans-serif; }
.h3 .t { padding: 30% 0 0 22%; }
.h3 h3 { font: 400 clamp(20px, 3vw, 44px) / 1.08 'Cormorant Garamond', Georgia, serif; }
.h3 h3 i { font-style: italic; }
.h3 .t p { font-size: clamp(8px, 0.8vw, 11px); letter-spacing: 0.24em; text-transform: uppercase; margin: 1.6em 0; color: #8b877e; }
.h3 .b { font-size: clamp(8px, 0.8vw, 11px); letter-spacing: 0.24em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 0.5em; }
.h3 figure { margin: 15% 9% 9% 16%; }
.h3 .n { font-size: clamp(7px, 0.75vw, 10px); letter-spacing: 0.26em; text-transform: uppercase; }
.h4 { background: #0b0b0b; color: #fff; }
.h4 figure { position: absolute; inset: 0; }
.h4 figure img { filter: grayscale(1) contrast(1.2) brightness(0.42); }
.h4 .t { position: relative; align-self: end; padding: 0 5% 6%; }
.h4 h3 { font: 800 clamp(26px, 5.4vw, 80px) / 0.92 Unbounded, sans-serif; text-transform: uppercase; letter-spacing: -0.02em; }
.h4 .t p { font: 500 clamp(9px, 0.95vw, 13px) / 1.5 Manrope, sans-serif; max-width: 46%; margin: 1.2em 0 0; }
.h4 .b { position: absolute; right: 5%; bottom: 8%; border: 1.5px solid #fff; padding: 0.9em 1.3em; font: 600 clamp(8px, 0.8vw, 11px) / 1 Unbounded, sans-serif; text-transform: uppercase; }
.h4 .n { font: 600 clamp(7px, 0.75vw, 10px) / 1 Unbounded, sans-serif; text-transform: uppercase; }
.h5 { background: #2e3b2b; color: #f4ecdd; text-align: center; }
.h5 figure { position: absolute; inset: 0; }
.h5 figure::after { content: ''; position: absolute; inset: 0; background: #1a2218b8; }
.h5 .t { position: relative; align-self: center; padding: 6% 12% 0; }
.h5 .e { display: inline-block; background: #f4ecdd; color: #2e3b2b; padding: 0.5em 1em; font: 500 clamp(7px, 0.75vw, 10px) / 1 Jost, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.h5 h3 { font: 300 clamp(24px, 4.6vw, 68px) / 1 Jost, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.45em 0 0.3em; }
.h5 .t p { font: 400 clamp(11px, 1.2vw, 17px) / 1.35 'Zilla Slab', Georgia, serif; margin-bottom: 1.4em; }
.h5 .b { background: #d98a2b; color: #fff; padding: 1em 1.5em; font: 600 clamp(8px, 0.8vw, 11px) / 1 Jost, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.h5 .n { font: 500 clamp(7px, 0.75vw, 10px) / 1 Jost, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.js .habits { height: 460vh; }
.js .habits .scene { position: sticky; top: 0; height: 100vh; padding-top: 0; padding-bottom: 0; }

/* Les métiers : deux bandes qui filent à la vitesse du défilement, et la photo suit la souris */
.metiers { background: var(--encre); color: #fff; padding: clamp(40px, 6vw, 90px) 0 clamp(70px, 9vw, 130px); overflow: hidden; position: relative; z-index: 2; }
.metiers .sur { color: var(--volt); padding: 0 var(--marge); margin-bottom: 22px; }
.bande { white-space: nowrap; font: 800 clamp(48px, 7.6vw, 132px) / 1 'Barlow Condensed', sans-serif; text-transform: uppercase; will-change: transform; width: max-content; }
.bande span { display: inline-block; padding: 0 0.16em; color: transparent; -webkit-text-stroke: 1.5px #ffffff80; transition: color 0.3s, -webkit-text-stroke-color 0.3s; cursor: default; }
.bande span:hover { color: var(--volt); -webkit-text-stroke-color: var(--volt); }
.bande em { font: italic 400 0.5em/1 'Instrument Serif', Georgia, serif; text-transform: none; color: var(--volt); vertical-align: 0.3em; padding: 0 0.1em; }
.apercu { position: fixed; z-index: 40; left: 0; top: 0; width: min(30vw, 420px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; translate: var(--px, 0) var(--py, 0); scale: 0.7; rotate: -6deg; transition: opacity 0.3s, scale 0.35s var(--courbe), rotate 0.35s var(--courbe); box-shadow: 0 40px 90px -20px #000; }
.apercu.la { opacity: 1; scale: 1; rotate: -3deg; }

/* Les offres */
.offres { background: #fff; padding: clamp(80px, 10vw, 150px) var(--marge); position: relative; z-index: 2; border-radius: 26px 26px 0 0; }
.offres .sur { color: var(--signal); }
.offres > .grand { margin: 14px 0 clamp(36px, 5vw, 70px); }
.offres > .grand em { font: italic 400 0.9em/1 'Instrument Serif', Georgia, serif; text-transform: none; color: var(--signal); }
.offre { display: grid; grid-template-columns: 70px minmax(0, 5fr) minmax(0, 6fr); gap: clamp(16px, 3vw, 50px); align-items: center; padding: clamp(26px, 3.6vw, 50px) 0; border-top: 2px solid var(--nuit); }
.offre > b { font: 800 30px/1 'Barlow Condensed', sans-serif; color: var(--signal); align-self: start; padding-top: 10px; }
.offre h3 { font: 800 clamp(30px, 3.6vw, 60px) / 0.95 'Barlow Condensed', sans-serif; text-transform: uppercase; margin-bottom: 14px; }
.offre p { color: var(--ardoise); max-width: 470px; }
.offre .prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 18px; color: var(--nuit); font-weight: 700; }
.offre .prix b { font: 800 clamp(40px, 4.4vw, 68px) / 1 'Barlow Condensed', sans-serif; background: var(--volt); padding: 0.04em 0.22em; border-radius: 8px; rotate: -2deg; display: inline-block; }
.offre figure { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--nuit); transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--courbe), clip-path 1.3s var(--courbe); box-shadow: 0 40px 80px -45px #12203bcc; }

/* Les règles : les mots se remplissent en arrivant */
.regles { background: var(--encre); color: #fff; padding: clamp(80px, 10vw, 150px) var(--marge); position: relative; z-index: 2; }
.regles .sur { color: var(--volt); margin-bottom: 20px; }
.regles li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px; align-items: center; padding: 10px 0; border-top: 1px solid #ffffff26; }
.regles li b { font: 800 clamp(48px, 8vw, 140px) / 0.94 'Barlow Condensed', sans-serif; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px #ffffff59; background: linear-gradient(90deg, var(--volt) 50%, transparent 50%) no-repeat; background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; transition: background-position 1.2s var(--courbe), -webkit-text-stroke-color 1s; }
.regles li.vu b { background-position: 0 0; -webkit-text-stroke-color: transparent; }
.regles li span { font-size: clamp(17px, 1.6vw, 23px); color: var(--pale); }

.contact { position: relative; z-index: 2; color: #fff; padding: clamp(100px, 13vw, 190px) var(--marge) 30px; overflow: hidden; isolation: isolate; }
.contact > img { position: absolute; left: 0; top: -12%; height: 124%; z-index: -2; transform: translateY(calc(var(--para, 0) * 1px)); }
.contact::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0a1222 4%, #0a1222cc 55%, #0a122299); }
.contact .plume { color: var(--volt); }
.contact h2 { margin: 10px 0 34px; max-width: 1200px; }
.contact h2 em { color: var(--volt); font-style: normal; }
.contact form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 820px; }
.contact input { flex: 1 1 280px; min-width: 0; font: 600 19px/1 Manrope, sans-serif; padding: 22px 26px; border-radius: 999px; border: 2px solid #ffffff59; background: #0a122299; color: #fff; outline: none; transition: border-color 0.25s, box-shadow 0.25s; }
.contact input::placeholder { color: #ffffff80; }
.contact input:focus { border-color: var(--volt); box-shadow: 0 0 0 6px #c8f53c26; }
.contact .suite { margin-top: 18px; color: var(--pale); font-size: 15.5px; }
.contact .bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-top: clamp(70px, 9vw, 130px); padding-top: 26px; border-top: 1px solid #ffffff33; font-size: 15.5px; }
.contact .bas a { text-decoration: none; }
.contact .bas .tel { font: 800 clamp(48px, 8vw, 130px) / 0.9 'Barlow Condensed', sans-serif; transition: color 0.3s; }
.contact .bas .tel:hover { color: var(--volt); }
.contact .mentions { margin-top: 26px; font-size: 12.5px; color: #ffffff80; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }

/* Le point qui suit la souris, sur ordinateur seulement */
.point { position: fixed; z-index: 90; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--volt); mix-blend-mode: difference; pointer-events: none; translate: var(--cx, -50px) var(--cy, -50px); scale: var(--cs, 1); transition: scale 0.3s var(--courbe), opacity 0.3s; opacity: 0; }
.souris .point { opacity: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .ligne > span, .js .rv { transform: none; opacity: 1; } .js .devoile { clip-path: none; } .rideau { display: none; } }
@media (max-width: 900px) {
  body { font-size: 17px; }
  header nav a:not(.tel) { display: none; }
  .hero { justify-content: flex-end; padding-bottom: 150px; }
  .rang { bottom: 96px; right: auto; left: var(--marge); text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .rang b { font-size: 26px; }
  .rang i { display: none; }
  .chiffres, .probleme, .habits .scene { grid-template-columns: minmax(0, 1fr); }
  .js .habits .scene { align-content: center; gap: 20px; }
  .habits .note { display: none; }
  .compteur { margin-top: 10px; }
  .offre { grid-template-columns: minmax(0, 1fr); }
  .offre > b { padding: 0; }
  .offre figure { order: -1; }
  .regles li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 0; }
  .apercu, .point { display: none; }
}
    
/* ───── Ajouts pour le site à plusieurs pages ───── */

/* Un filet devant chaque sur-titre */
.sur::before { content: ''; display: inline-block; width: 34px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 14px; opacity: 0.7; }
header nav a.ici::after { transform: none; }

/* Tête des pages intérieures : une grande photo qui recule, le titre en bas */
.tete { position: relative; min-height: min(78vh, 760px); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px var(--marge) clamp(50px, 7vw, 96px); overflow: hidden; isolation: isolate; }
.tete > img { position: absolute; inset: 0; z-index: -2; animation: recul 9s ease-out both; }
@keyframes recul { from { transform: scale(1.14); } }
.tete::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0a1222 2%, #0a1222b8 48%, #0a122273); }
.tete .plume { color: var(--volt); margin-bottom: 10px; }
.tete h1 { max-width: 1100px; }
.tete h1 em { font-style: normal; color: var(--volt); }
.tete .chapo { font-size: clamp(17px, 1.45vw, 21px); max-width: 600px; color: var(--pale); margin-top: 22px; }
.fil { position: absolute; left: var(--marge); top: 104px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #ffffffb3; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--volt); }

/* Blocs clairs et sombres génériques */
.clair { background: #fff; padding: clamp(80px, 10vw, 150px) var(--marge); position: relative; z-index: 2; }
.clair.brume { background: var(--brume); }
.clair .sur { color: var(--signal); }
.clair > .grand { margin: 14px 0 clamp(30px, 4vw, 56px); max-width: 1100px; }
.clair > .grand em, .sombre > .grand em { font: italic 400 0.9em/1 'Instrument Serif', Georgia, serif; text-transform: none; color: var(--signal); }
.sombre { background: var(--encre); color: #fff; padding: clamp(80px, 10vw, 150px) var(--marge); position: relative; z-index: 2; }
.sombre .sur { color: var(--volt); }
.sombre > .grand { margin: 14px 0 clamp(30px, 4vw, 56px); max-width: 1100px; }
.sombre > .grand em { color: var(--volt); }
.arrondi { border-radius: 26px 26px 0 0; }

/* Listes à coches */
.coches { margin-top: 20px; border-top: 1px solid var(--ligne); max-width: 520px; }
.coches li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--ligne); font-size: 16.5px; }
.coches li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 14px; height: 7px; border-left: 2.5px solid var(--signal); border-bottom: 2.5px solid var(--signal); rotate: -45deg; }
.offre .suite { display: inline-block; margin-top: 18px; font-weight: 800; text-decoration: none; color: var(--signal); border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.offre .suite::after { content: ' →'; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 520px; }
.etiquettes span { font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--brume); border: 1px solid var(--ligne); transition: background 0.25s, color 0.25s, translate 0.3s var(--courbe); }
.etiquettes span:hover { background: var(--nuit); color: var(--volt); translate: 0 -3px; }

/* Ce que nous ne promettons pas */
.jamais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 46px); }
.jamais li { border-top: 2px solid var(--volt); padding-top: 20px; }
.jamais h3 { font: 800 clamp(24px, 2.4vw, 36px) / 1 'Barlow Condensed', sans-serif; text-transform: uppercase; margin-bottom: 12px; }
.jamais p { color: var(--pale); font-size: 16.5px; }

/* Le film de la méthode */
.cine { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
.cine figure { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--nuit); box-shadow: 0 40px 80px -45px #12203bcc; }
.cine p { color: var(--ardoise); max-width: 460px; }
.cine .grand { margin: 14px 0 18px; }

/* Les métiers, un par un : grande photo d'un côté, ce que l'on met en avant de l'autre */
.metier { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 90px) 0; border-top: 1px solid var(--ligne); }
.metier:nth-of-type(even) figure { order: 2; }
.metier figure { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--nuit); box-shadow: 0 40px 80px -45px #12203bcc; }
.metier figure img { transition: scale 1.8s var(--courbe), filter 0.6s; }
.metier figure:hover img { scale: 1.05; }
.metier h2 { font: 800 clamp(34px, 4.4vw, 72px) / 0.94 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.metier .plume { color: var(--signal); margin: 8px 0 6px; }
.metier .aussi { margin-top: 18px; font-size: 15px; color: var(--ardoise); max-width: 520px; }
.metier .aussi b { color: var(--nuit); }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 3vw, 40px); }
.sommaire a { text-decoration: none; font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--nuit); transition: background 0.25s, color 0.25s; }
.sommaire a:hover { background: var(--nuit); color: var(--volt); }

/* Questions fréquentes */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 5vw, 80px); align-items: start; }
.faq .grand { margin: 14px 0 18px; }
.faq .grand em { font: italic 400 0.9em/1 'Instrument Serif', Georgia, serif; text-transform: none; color: var(--signal); }
.faq > div:first-child p:last-of-type { color: var(--ardoise); max-width: 380px; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq details:first-of-type { border-top: 1px solid var(--ligne); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 24px 56px 24px 0; font-weight: 700; font-size: clamp(17px, 1.45vw, 20px); transition: color 0.25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--signal); }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ligne); display: grid; place-items: center; font-weight: 400; font-size: 20px; transition: rotate 0.35s var(--courbe), background 0.25s, color 0.25s; }
.faq details[open] summary::after { rotate: 45deg; background: var(--nuit); color: var(--volt); border-color: var(--nuit); }
.faq details p { padding: 0 56px 24px 0; color: var(--ardoise); animation: deplier 0.5s var(--courbe); }
@keyframes deplier { from { opacity: 0; translate: 0 -8px; } }

/* La demande, en fin de page */
.demande { position: relative; z-index: 2; color: #fff; padding: clamp(90px, 11vw, 160px) var(--marge); overflow: hidden; isolation: isolate; }
.demande > img { position: absolute; left: 0; top: -12%; height: 124%; z-index: -2; transform: translateY(calc(var(--para, 0) * 1px)); }
.demande::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0a1222 4%, #0a1222cc 55%, #0a122299); }
.demande .plume { color: var(--volt); }
.demande h2 { margin: 10px 0 30px; max-width: 1100px; }
.demande h2 em { color: var(--volt); font-style: normal; }
.demande form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 820px; }
.demande input, .fiche input, .fiche textarea { flex: 1 1 280px; min-width: 0; font: 600 18px/1.3 Manrope, sans-serif; padding: 20px 26px; border-radius: 999px; border: 2px solid #ffffff59; background: #0a122299; color: #fff; outline: none; transition: border-color 0.25s, box-shadow 0.25s; }
.demande input::placeholder { color: #ffffff80; }
.demande input:focus { border-color: var(--volt); box-shadow: 0 0 0 6px #c8f53c26; }
.demande .suite { margin-top: 18px; color: var(--pale); font-size: 15.5px; }

/* La page contact : le formulaire complet */
.fiche { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.fiche form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fiche label { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ardoise); }
.fiche label.large { grid-column: 1 / -1; }
.fiche label small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.fiche input, .fiche textarea { display: block; width: 100%; margin-top: 8px; border-radius: 14px; border-color: var(--ligne); background: #fff; color: var(--nuit); padding: 17px 20px; font-size: 17px; }
.fiche textarea { min-height: 130px; resize: vertical; font-family: Manrope, sans-serif; }
.fiche input:focus, .fiche textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 5px #2855f81f; }
.fiche .bouton { justify-self: start; background: var(--nuit); color: var(--volt); margin-top: 6px; }
.fiche .mention { grid-column: 1 / -1; font-size: 13.5px; color: var(--ardoise); }
.fiche aside { position: sticky; top: 110px; }
.fiche aside ol { counter-reset: e; margin: 16px 0 30px; }
.fiche aside li { counter-increment: e; display: grid; grid-template-columns: 46px 1fr; padding: 16px 0; border-top: 1px solid var(--ligne); }
.fiche aside li::before { content: '0' counter(e); font: 800 24px/1.1 'Barlow Condensed', sans-serif; color: var(--signal); }
.fiche aside .direct { font: 800 clamp(30px, 3.4vw, 52px) / 1 'Barlow Condensed', sans-serif; text-decoration: none; display: block; transition: color 0.25s; }
.fiche aside .direct:hover { color: var(--signal); }
.fiche aside .courriel { display: inline-block; margin-top: 8px; font-weight: 700; }

/* Pied de page complet */
.pied { position: relative; z-index: 2; background: #05080f; color: #fff; padding: clamp(60px, 7vw, 100px) var(--marge) 26px; }
.pied .colonnes { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: clamp(24px, 4vw, 60px); padding-bottom: clamp(40px, 5vw, 70px); }
.pied img { width: 150px; height: auto; margin-bottom: 18px; }
.pied .colonnes > div:first-child p { color: #ffffffa6; max-width: 380px; font-size: 15.5px; }
.pied h4 { margin: 0 0 16px; font: 700 12px/1.4 Manrope, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--volt); }
.pied li { margin-bottom: 10px; font-size: 15.5px; }
.pied a { text-decoration: none; color: #ffffffd9; transition: color 0.25s, padding-left 0.3s var(--courbe); }
.pied a:hover { color: var(--volt); padding-left: 6px; }
.pied .numero { font: 800 clamp(30px, 3vw, 46px) / 1 'Barlow Condensed', sans-serif; color: #fff; }
.pied .mentions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; border-top: 1px solid #ffffff26; padding-top: 22px; font-size: 12.5px; color: #ffffff80; }

/* Passage d'une page à l'autre : le rideau redescend avant de partir */
.part .rideau { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.45s var(--courbe); }
.part .rideau i { animation: none; }
html:not(.accueil) .rideau i { animation-duration: 0.45s; }

@media (max-width: 900px) {
  .tete { min-height: 64vh; padding-top: 130px; }
  .jamais, .cine, .metier, .faq, .fiche, .fiche form { grid-template-columns: minmax(0, 1fr); }
  .metier figure, .metier:nth-of-type(even) figure { order: -1; }
  .fiche aside { position: static; }
  .pied .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied .colonnes > div:first-child { grid-column: 1 / -1; }
}

.grand em { font: italic 400 0.9em/1 'Instrument Serif', Georgia, serif; text-transform: none; color: var(--signal); }
.sombre .grand em, .habits .grand em, .etape .grand em, .univers .grand em { color: var(--volt); }
.pied .numero { white-space: nowrap; font-size: clamp(26px, 2.3vw, 36px); }
.lien-suite { display: inline-block; margin-top: 20px; font-weight: 800; text-decoration: none; color: var(--signal); border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.lien-suite::after { content: ' →'; }
.sombre .lien-suite { color: var(--volt); }

/* Formulaire : champ piège invisible, retour après envoi ; page de texte légal */
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fiche .retour { grid-column: 1 / -1; padding: 16px 20px; border-radius: 14px; background: #e9f7ef; color: #16724a; font-weight: 700; }
.fiche .retour.erreur { background: #fdecee; color: #b42336; }
.fiche [aria-invalid='true'] { border-color: #b42336; }
.fiche .mention a { color: var(--signal); }
.prose { max-width: 760px; }
.prose h2 { font: 800 clamp(26px, 2.6vw, 38px) / 1 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ardoise); margin-bottom: 14px; }
.prose a { color: var(--signal); }
.pied .mentions a { color: inherit; text-decoration: underline; }

/* En-tête : trois produits bien distincts, la méthode, et un seul bouton */
header .tel { background: var(--volt); color: var(--encre); padding: 13px 20px; transition: box-shadow 0.3s; }
header .tel:hover { box-shadow: 0 0 0 6px #c8f53c2e; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero .discret { font-weight: 700; text-decoration: none; border-bottom: 2px solid #ffffff73; padding-bottom: 3px; transition: border-color 0.25s, color 0.25s; }
.hero .discret:hover { color: var(--volt); border-color: var(--volt); }
.chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres li { align-items: center; flex-wrap: nowrap; }
.chiffres span { text-transform: none; font: 500 15.5px/1.35 Manrope, sans-serif; letter-spacing: 0; color: var(--pale); }
.chiffres em { font-size: 1.15em; color: #fff; }

/* De l'ancien site au nouveau : le titre reste en place, les trois temps défilent en images (repris de l'ancien site) */
.ancien { background: #fff; padding: clamp(80px, 10vw, 150px) var(--marge); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 7vw, 112px); align-items: start; position: relative; z-index: 2; }
.ancien .colle { position: sticky; top: 120px; }
.ancien .sur { color: var(--signal); }
.ancien .grand { margin: 14px 0 18px; }
.ancien .colle > p:not(.sur) { color: var(--ardoise); max-width: 400px; margin-bottom: 26px; }
.ancien .bouton { background: var(--nuit); color: #fff; }
.pas { display: grid; gap: clamp(48px, 7vw, 96px); }
.pas figure { aspect-ratio: 16 / 10; margin-bottom: 22px; border-radius: 24px; overflow: hidden; background: var(--brume); }
.pas-num { font: italic 400 40px/1 'Instrument Serif', Georgia, serif; color: var(--signal); }
.pas h3 { margin: 4px 0 8px; font: 800 clamp(30px, 3.4vw, 54px) / 1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.pas p { max-width: 46ch; color: var(--ardoise); }

/* L'accordéon des métiers : huit volets, celui que l'on survole s'ouvre (repris de l'ancien site) */
.univers { background: var(--encre); color: #fff; padding-top: clamp(70px, 9vw, 130px); position: relative; z-index: 2; }
.univers .tete-bloc { padding: 0 var(--marge) clamp(30px, 4vw, 56px); display: flex; justify-content: space-between; align-items: end; gap: 20px 60px; flex-wrap: wrap; }
.univers .sur { color: var(--volt); }
.univers .grand { margin-top: 14px; }
.univers .tete-bloc > p { max-width: 420px; color: var(--pale); }
.tuiles { display: flex; height: min(74vh, 720px); min-height: 460px; }
.tuile { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: #fff; text-decoration: none; transition: flex-grow 700ms var(--courbe); }
.tuile + .tuile { border-left: 1px solid #ffffff26; }
.tuile img { position: absolute; inset: 0; filter: saturate(0.55) brightness(0.62); transform: scale(1.06); transition: filter 700ms var(--courbe), transform 1.4s var(--courbe); }
.tuile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #080f2233 0%, #080f2200 40%, #080f22e6 100%); }
.tuile-num { position: absolute; left: 22px; top: 22px; z-index: 2; font: italic 400 24px/1 'Instrument Serif', Georgia, serif; color: var(--volt); }
.tuile-texte { position: absolute; left: 22px; right: 22px; bottom: 26px; z-index: 2; display: grid; gap: 8px; }
.tuile-texte b { font: 800 clamp(22px, 1.9vw, 32px) / 1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.tuile-texte span, .tuile-texte i { width: 30ch; max-width: 78vw; opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--courbe), transform 500ms var(--courbe); }
.tuile-texte span { font-size: 17px; color: #d5def2; }
.tuile-texte i { font: 700 15px/1.3 Manrope, sans-serif; color: var(--volt); }
@media (hover: hover) and (min-width: 901px) {
  .tuile:hover, .tuile:focus-visible { flex-grow: 3.4; }
  .tuile:hover img, .tuile:focus-visible img { filter: none; transform: scale(1); }
  .tuile:hover .tuile-texte span, .tuile:hover .tuile-texte i, .tuile:focus-visible .tuile-texte span, .tuile:focus-visible .tuile-texte i { opacity: 1; transform: none; transition-delay: 160ms; }
  .tuile:not(:hover):not(:focus-visible) .tuile-texte b { writing-mode: vertical-rl; rotate: 180deg; justify-self: start; }
  .tuile:not(:hover):not(:focus-visible) .tuile-texte > span, .tuile:not(:hover):not(:focus-visible) .tuile-texte > i { position: absolute; bottom: 0; }
}

/* Les trois produits, sur l'accueil */
.offre .suite { font-size: 17px; }
.produit-plus { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
.produit-plus.envers figure { order: -1; }
.produit-plus figure { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--nuit); box-shadow: 0 40px 80px -45px #12203bcc; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--courbe), clip-path 1.3s var(--courbe); }
.produit-plus .grand { margin: 14px 0 18px; }
.produit-plus p { color: var(--ardoise); max-width: 520px; }
.sombre .produit-plus p { color: var(--pale); }
.sombre .coches, .sombre .coches li { border-color: #ffffff26; }
.sombre .coches li::before { border-color: var(--volt); }
.sombre .etiquettes span { background: #ffffff14; border-color: #ffffff26; }
.legende { margin-top: 12px; font-size: 13.5px; color: var(--ardoise); }
.sombre .legende { color: #ffffff80; }

/* Le menu sur téléphone : un bouton, et les pages en grand sur tout l'écran */
.burger { display: none; }
@media (max-width: 1080px) { header nav { gap: 18px; font-size: 13.5px; } }
@media (max-width: 900px) {
  header nav { margin-left: auto; }
  .burger { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #ffffff1f; color: #fff; cursor: pointer; }
  .burger i, .burger i::before { content: ''; display: block; width: 18px; height: 2px; background: currentColor; transition: rotate 0.3s var(--courbe), translate 0.3s var(--courbe); }
  .burger i { translate: 0 -3px; }
  .burger i::before { translate: 0 6px; }
  .menu, .menu body { overflow: hidden; }
  .menu header { bottom: 0; align-items: flex-start; background: var(--encre); transform: none !important; }
  .menu .burger i { rotate: 45deg; translate: 0 0; }
  .menu .burger i::before { rotate: -90deg; translate: 0 0; }
  .menu header nav { position: absolute; left: 0; right: 0; top: 96px; margin: 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px var(--marge); }
  .menu header nav a:not(.tel) { display: block; font: 800 40px/1.14 'Barlow Condensed', sans-serif; text-transform: uppercase; animation: deplier 0.5s var(--courbe) both; }
  .menu header nav a:nth-child(2) { animation-delay: 0.05s; }
  .menu header nav a:nth-child(3) { animation-delay: 0.1s; }
  .menu header nav a:nth-child(4) { animation-delay: 0.15s; }
  .menu header nav a.ici { color: var(--volt); }
  .menu header nav .tel { margin-top: 22px; font-size: 16px; }
  html:not(.menu) header nav .tel { margin-right: 10px; font-size: 13px; padding: 12px 15px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ancien, .produit-plus { grid-template-columns: minmax(0, 1fr); }
  .ancien .colle { position: static; }
  .produit-plus figure, .produit-plus.envers figure { order: -1; }
  .tuiles { flex-direction: column; height: auto; min-height: 0; }
  .tuile { min-height: 170px; }
  .tuile + .tuile { border-left: 0; border-top: 1px solid #ffffff26; }
  .tuile img { filter: saturate(0.8) brightness(0.6); }
  .tuile-texte span { opacity: 1; transform: none; width: auto; }
  .tuile-texte i { display: none; }
}