/* =====================================================================
   COULEURS ET POLICES DE LA MARQUE (modifiez ici : ça change partout)
   ===================================================================== */
:root {
  --noir: #0A0A0A;
  --fond2: #0E0C0B;
  --panneau: #14110F;
  --ligne: #2B2724;
  --blanc: #FFFFFF;
  --orange: #E8651F;
  --orange-clair: #FF8A4C;
  --gris: #A8A29A;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --marge: clamp(1.25rem, 5vw, 4rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--noir); color: var(--blanc); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.lien-evitement { position: absolute; left: -999px; top: 0; background: var(--orange); color: var(--noir); padding: .6rem 1rem; z-index: 100; }
.lien-evitement:focus { left: 0; }
.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--marge); }

/* Barre de progression de lecture */
.progres { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: .6rem; background: var(--orange); color: var(--noir); font: 600 .95rem/1 var(--sans); padding: .95rem 1.5rem; text-decoration: none; border: 0; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background .2s, transform .2s; }
.bouton:hover { background: var(--orange-clair); transform: translateY(-2px); }
.bouton.fantome { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1px #4a443f; clip-path: none; }
.bouton.fantome:hover { background: #1a1614; box-shadow: inset 0 0 0 1px var(--orange); }

/* En-tête */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.entete.fond { background: rgba(10,10,10,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--ligne); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; height: 4.2rem; }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: .5rem; }
.logo b { font: 600 1.7rem/1 var(--serif); letter-spacing: .02em; }
.logo span { font: 500 .68rem/1 var(--mono); letter-spacing: .28em; color: var(--orange); }
.menu { display: flex; align-items: center; gap: 2rem; font-size: .9rem; }
.menu a { text-decoration: none; color: #d6d1ca; transition: color .2s; }
.menu a:hover { color: var(--orange); }
.menu .bouton { color: var(--noir); padding: .7rem 1.2rem; }
@media (max-width: 760px) { .menu a:not(.bouton) { display: none; } }

/* Accueil */
.accueil { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #0A0A0A; isolation: isolate; }
.accueil video, .accueil .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.accueil .poster { background: url('poster.jpg') center/cover, linear-gradient(135deg, #1a0d05, #0A0A0A); }
.accueil::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.75) 55%, rgba(10,10,10,.5) 100%), linear-gradient(0deg, #0A0A0A 0%, transparent 30%); }
.accueil::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); }
#particules { position: absolute; right: 0; top: 0; width: 50%; height: 100%; z-index: 0; }
.accueil .conteneur { position: relative; z-index: 1; padding-top: 7rem; padding-bottom: 5rem; }
.accueil .texte { max-width: 38rem; }
.etat { display: inline-flex; align-items: center; gap: .6rem; font: 500 .75rem/1 var(--mono); color: var(--gris); border: 1px solid var(--ligne); padding: .55rem .8rem; margin-bottom: 1.6rem; background: rgba(10,10,10,.5); }
.etat i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: pouls 2s infinite; }
@keyframes pouls { 50% { opacity: .3; } }
h1 { font: 500 clamp(2.8rem, 7vw, 5.6rem)/1.02 var(--serif); letter-spacing: -.01em; }
h1 span { display: block; }
.accueil .intro { margin: 1.6rem 0 2.2rem; font-size: 1.12rem; color: #d6d1ca; max-width: 32rem; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.defile { position: absolute; left: var(--marge); bottom: 1.6rem; font: 400 .7rem/1 var(--mono); color: var(--gris); display: flex; align-items: center; gap: .7rem; }
.defile::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); animation: glisse 2.4s ease-in-out infinite; transform-origin: 0 50%; }
@keyframes glisse { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 860px) {
  #particules { width: 100%; height: 46%; top: auto; bottom: 0; opacity: .85; }
  .accueil { align-items: flex-start; }
  .accueil .conteneur { padding-bottom: 14rem; }
  .accueil::before { background: linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.7) 100%); }
  .defile { display: none; }
}

/* Bandeau de chiffres */
.chiffres { border-block: 1px solid var(--ligne); background: var(--fond2); }
.chiffres .conteneur { display: grid; grid-template-columns: repeat(3, 1fr); }
.chiffre { padding: 2rem 1.5rem; border-left: 1px solid var(--ligne); display: flex; flex-direction: column; gap: .3rem; }
.chiffre:first-child { border-left: 0; padding-left: 0; }
.chiffre b { font: 500 clamp(2.2rem, 5vw, 3.6rem)/1 var(--serif); color: var(--blanc); }
.chiffre b em { font-style: normal; color: var(--orange); }
.chiffre > span { color: var(--gris); font-size: .92rem; }
@media (max-width: 640px) { .chiffres .conteneur { grid-template-columns: 1fr; padding: 0 var(--marge); } .chiffre { border-left: 0; border-top: 1px solid var(--ligne); padding: 1.3rem 0; flex-direction: row; align-items: baseline; gap: 1rem; } .chiffre:first-child { border-top: 0; } }

/* Sections */
.section { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section.alt { background: var(--fond2); }
.section::before { content: ""; position: absolute; top: 0; left: var(--marge); right: var(--marge); height: 1px; background: linear-gradient(90deg, var(--orange), var(--ligne) 40%, transparent); transform-origin: 0 50%; }
html.js .section::before { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
html.js .section.vu::before { transform: scaleX(1); }
.tete { max-width: 44rem; margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font: 500 clamp(2.1rem, 4.6vw, 3.6rem)/1.08 var(--serif); letter-spacing: -.005em; }
.chapo { margin-top: 1rem; color: var(--gris); font-size: 1.08rem; max-width: 36rem; }
/* Titres : le texte monte depuis un masque */
.masque { display: block; overflow: hidden; }
.masque > span { display: block; }
html.js .masque > span { transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .vu .masque > span { transform: none; }

/* Apparition des blocs : balayage par le haut */
html.js .rev { clip-path: inset(0 0 calc(100% - 2px) 0); opacity: 0; transition: clip-path .8s cubic-bezier(.2,.7,.2,1), opacity .5s; transition-delay: calc(var(--i, 0) * 90ms); }
html.js .rev.vu, html.js .vu .rev { clip-path: inset(-60px); opacity: 1; }

/* Carte high-tech (HUD) */
.carte { position: relative; background: linear-gradient(165deg, #1A1613 0%, var(--panneau) 55%, #100E0C 100%); border: 1px solid var(--ligne); padding: 1.8rem 1.6rem 1.7rem; transition: border-color .3s, transform .3s, box-shadow .3s; overflow: hidden; }
.carte::before, .carte::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--orange); transition: width .3s, height .3s; }
.carte::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.carte::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.carte:hover { border-color: #5a3a28; transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(232,101,31,.35); }
.carte:hover::before, .carte:hover::after { width: 28px; height: 28px; }
.carte .scan { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(180deg, transparent, rgba(232,101,31,.12), transparent); transform: translateY(-100%); pointer-events: none; }
.carte:hover .scan { animation: balayage 1.1s ease-out; }
@keyframes balayage { to { transform: translateY(420%); } }
.carte h3 { font: 600 1.15rem/1.25 var(--sans); margin: 1.2rem 0 .55rem; }
.carte p { color: var(--gris); font-size: .96rem; }
.icone { width: 46px; height: 46px; border: 1px solid #4a2c1b; display: grid; place-items: center; background: rgba(232,101,31,.07); }
.icone svg { width: 24px; height: 24px; stroke: var(--orange); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Services */
.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.services > li { grid-column: span 2; }
.services > li:nth-child(4), .services > li:nth-child(5) { grid-column: span 3; }
.services .carte { height: 100%; }
@media (max-width: 900px) { .services > li, .services > li:nth-child(4), .services > li:nth-child(5) { grid-column: span 3; } .services > li:last-child { grid-column: span 6; } }
@media (max-width: 600px) { .services > li, .services > li:nth-child(n) { grid-column: span 6; } }

/* Méthode : vraie suite d'étapes, donc numérotée */
.methode { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; counter-reset: etape; }
.methode::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: var(--ligne); }
.methode::after { content: ""; position: absolute; left: 0; top: 21px; height: 1px; width: 100%; background: var(--orange); box-shadow: 0 0 12px var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.methode li { position: relative; padding-top: 3.4rem; }
.methode .noeud { position: absolute; top: 0; left: 0; width: 44px; height: 44px; background: var(--noir); border: 1px solid var(--ligne); display: grid; place-items: center; font: 500 .9rem/1 var(--mono); color: var(--gris); transition: color .4s, border-color .4s, box-shadow .4s; z-index: 1; }
.methode li.actif .noeud { color: var(--noir); background: var(--orange); border-color: var(--orange); box-shadow: 0 0 22px rgba(232,101,31,.55); }
.methode .carte { height: 100%; }
.methode .carte h3 { margin-top: 0; }
@media (max-width: 900px) {
  .methode { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 3.6rem; }
  .methode::before, .methode::after { left: 21px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .methode::after { height: 100%; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .methode li { padding-top: 0; }
  .methode .noeud { left: -3.6rem; }
}

/* Réalisations : cadres compacts */
.projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 250px)); gap: 1.4rem; }
.projet { display: flex; flex-direction: column; }
.projet .visuel { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 1px solid var(--ligne); background: #14110F; overflow: hidden; cursor: pointer; color: inherit; font: inherit; }
.projet .visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.projet .visuel:hover img { transform: scale(1.06); }
.projet .visuel::before, .projet .visuel::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--orange); z-index: 2; transition: all .3s; }
.projet .visuel::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.projet .visuel::after { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }
.projet .visuel:hover::before { top: 12px; left: 12px; }
.projet .visuel:hover::after { right: 12px; bottom: 12px; }
.voir { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .9rem .9rem; background: linear-gradient(0deg, rgba(10,10,10,.9), transparent); font: 500 .72rem/1 var(--mono); color: var(--blanc); text-align: left; z-index: 1; }
.projet h3 { font: 600 1rem/1.3 var(--sans); margin-top: .9rem; }
.projet .marque { display: block; font: 500 .72rem/1 var(--mono); color: var(--orange); margin-bottom: .4rem; }
.projet p { color: var(--gris); font-size: .88rem; margin-top: .35rem; }
.projet-cta { border: 1px dashed #4a2c1b; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem; padding: 1.4rem; text-decoration: none; background: rgba(232,101,31,.04); transition: background .3s, border-color .3s; }
.projet-cta:hover { background: rgba(232,101,31,.1); border-color: var(--orange); }
.projet-cta b { font: 500 1.7rem/1.1 var(--serif); }
.projet-cta > span:first-child { color: var(--orange); font: 500 .8rem/1 var(--mono); }
@media (max-width: 700px) {
  .projets { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(var(--marge) * -1); padding: 0 var(--marge) 1rem; scrollbar-width: none; }
  .projets::-webkit-scrollbar { display: none; }
  .projets > * { flex: 0 0 62%; scroll-snap-align: start; }
}

/* Packs */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.pack { display: flex; flex-direction: column; padding: 2rem 1.7rem; }
.pack .niveau { display: flex; gap: 4px; margin-bottom: 1.4rem; }
.pack .niveau i { width: 26px; height: 4px; background: var(--ligne); }
.pack .niveau i.on { background: var(--orange); box-shadow: 0 0 8px rgba(232,101,31,.6); }
.pack .mot { font: 500 .75rem/1 var(--mono); color: var(--orange); }
.pack h3 { font: 500 2.1rem/1.1 var(--serif); margin: .5rem 0 .8rem; }
.pack .resume { color: var(--gris); margin-bottom: 1.4rem; font-size: .98rem; }
.pack ul { display: grid; align-content: start; gap: .65rem; margin-bottom: 2rem; flex: 1; }
.pack li { position: relative; padding-left: 1.4rem; font-size: .95rem; color: #d6d1ca; }
.pack li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border: 1px solid var(--orange); transform: rotate(45deg); }
.pack .bouton { justify-content: center; }
.pack.vedette { border-color: #6a3b1f; background: linear-gradient(165deg, #241710 0%, #17110D 55%, #100E0C 100%); box-shadow: 0 0 60px -20px rgba(232,101,31,.45); }
.badge { position: absolute; top: 1.2rem; right: 1.2rem; font: 500 .68rem/1 var(--mono); background: var(--orange); color: var(--noir); padding: .4rem .55rem; }
.note-devis { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; border: 1px solid var(--ligne); padding: 1.3rem 1.6rem; color: var(--gris); }
.note-devis b { color: var(--blanc); font-weight: 500; }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr; } }

/* MP3 + MP4 = MP7 */
.equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: stretch; gap: 1rem; }
.op { align-self: center; width: 44px; height: 44px; border: 1px solid #4a2c1b; display: grid; place-items: center; font: 400 1.5rem/1 var(--mono); color: var(--orange); background: rgba(232,101,31,.06); border-radius: 50%; }
.eq { padding: 1.4rem 1.4rem 1.7rem; }
.eq .titre { display: flex; justify-content: space-between; align-items: baseline; font: 500 .72rem/1 var(--mono); color: var(--gris); margin-bottom: 1rem; }
.eq .grand { font: 500 clamp(3rem, 6vw, 4.6rem)/1 var(--serif); margin-top: 1.1rem; }
.eq h3 { margin-top: .5rem; font-weight: 600; }
.onde { display: flex; align-items: center; gap: 3px; height: 74px; border-block: 1px solid var(--ligne); }
.onde i { flex: 1; min-width: 2px; height: var(--h); background: linear-gradient(180deg, var(--orange-clair), var(--orange)); animation: egaliseur 1.3s ease-in-out infinite; animation-delay: calc(var(--d) * -1s); transform-origin: 50% 50%; }
@keyframes egaliseur { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.viseur { position: relative; height: 74px; border: 1px solid var(--ligne); background: radial-gradient(circle at 50% 50%, #1c1713, #100E0C); display: grid; place-items: center; overflow: hidden; }
.viseur i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--orange); }
.viseur i:nth-child(1) { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.viseur i:nth-child(2) { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.viseur i:nth-child(3) { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.viseur i:nth-child(4) { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.viseur .rec { position: absolute; left: 30px; top: 12px; font: 500 .66rem/1 var(--mono); display: flex; align-items: center; gap: .35rem; }
.viseur .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b2f; animation: pouls 1.1s infinite; }
.viseur .tc { font: 500 .95rem/1 var(--mono); color: var(--blanc); letter-spacing: .06em; margin-top: 14px; }
.viseur::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(232,101,31,.6); animation: ligne 3.2s linear infinite; }
@keyframes ligne { from { top: 0; } to { top: 100%; } }
.eq.mp7 { border-color: #7a431f; background: radial-gradient(ellipse at 50% 0%, rgba(232,101,31,.28), transparent 65%), linear-gradient(165deg, #241710, #100E0C); box-shadow: 0 0 70px -15px rgba(232,101,31,.55), inset 0 0 40px rgba(232,101,31,.07); animation: halo 4s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 100px -10px rgba(232,101,31,.75), inset 0 0 50px rgba(232,101,31,.12); } }
.eq.mp7 .grand { color: var(--orange-clair); text-shadow: 0 0 30px rgba(232,101,31,.6); }
.reseau { height: 74px; border-block: 1px solid var(--ligne); display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem; }
.reseau i { width: 10px; height: 10px; background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 10px var(--orange); }
.reseau s { flex: 1; height: 1px; background: linear-gradient(90deg, var(--orange), rgba(232,101,31,.3)); }
.eq p { color: var(--gris); font-size: .95rem; margin-top: .4rem; }
.apropos-texte { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 62rem; color: #d6d1ca; }
@media (max-width: 960px) { .equation { grid-template-columns: 1fr; } .op { justify-self: center; } .apropos-texte { grid-template-columns: 1fr; } }

/* Contact */
.contact-grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.coordonnees { margin-top: 2rem; display: grid; gap: .8rem; }
.coordonnees a, .coordonnees span { color: #d6d1ca; text-underline-offset: 4px; }
.coordonnees a:hover { color: var(--orange); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; padding: 1.8rem; }
.formulaire .pleine { grid-column: 1 / -1; }
.champ label { display: block; font: 500 .74rem/1 var(--mono); color: var(--gris); margin-bottom: .5rem; }
.champ input, .champ select, .champ textarea { width: 100%; background: #0C0A09; color: var(--blanc); border: 1px solid var(--ligne); padding: .8rem .9rem; font: inherit; border-radius: 0; transition: border-color .2s, box-shadow .2s; }
.champ select { color-scheme: dark; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,101,31,.18); }
.champ textarea { min-height: 7.5rem; resize: vertical; }
.piege { position: absolute; left: -9999px; }
.formulaire small { color: var(--gris); display: block; margin-top: .9rem; }
@media (max-width: 860px) { .contact-grille { grid-template-columns: 1fr; } .formulaire { grid-template-columns: 1fr; padding: 1.3rem; } }

/* Défilé des marques */
.confiance { position: relative; border-bottom: 1px solid var(--ligne); padding: 2rem 0 2.2rem; overflow: hidden; background: radial-gradient(ellipse at 50% 0, rgba(232,101,31,.09), transparent 70%), var(--noir); }
.confiance .legende { display: flex; align-items: center; justify-content: center; gap: 1.1rem; font: 500 .72rem/1 var(--mono); color: var(--gris); margin-bottom: 1.6rem; }
.confiance .legende::before, .confiance .legende::after { content: ""; height: 1px; width: clamp(36px, 12vw, 170px); background: linear-gradient(90deg, transparent, var(--orange)); transform-origin: right; animation: trait 3.4s ease-in-out infinite; }
.confiance .legende::after { transform: scaleX(-1); animation-direction: reverse; }
@keyframes trait { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.rail { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.piste { display: flex; width: max-content; animation: defilement var(--duree, 34s) linear infinite; }
.rail:hover .piste { animation-play-state: paused; }
.cellule { position: relative; flex: none; width: clamp(180px, 22vw, 260px); height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; border-left: 1px solid var(--ligne); overflow: hidden; }
.cellule img { height: var(--h, 36px); width: auto; max-width: 72%; opacity: .62; transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1), filter .4s; }
.cellule small { font: 500 .6rem/1 var(--mono); letter-spacing: .12em; color: var(--gris); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s, color .4s; }
.cellule:hover img { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(232,101,31,.6)); }
.cellule:hover small { opacity: 1; transform: none; color: var(--orange); }
.cellule::before { content: ""; position: absolute; inset: 14px 18px; border: 0 solid var(--orange); background: linear-gradient(var(--orange), var(--orange)) 0 0 / 12px 1px no-repeat, linear-gradient(var(--orange), var(--orange)) 0 0 / 1px 12px no-repeat, linear-gradient(var(--orange), var(--orange)) 100% 100% / 12px 1px no-repeat, linear-gradient(var(--orange), var(--orange)) 100% 100% / 1px 12px no-repeat; opacity: 0; transform: scale(1.12); transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.cellule:hover::before { opacity: 1; transform: none; }
.cellule::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(232,101,31,.2), transparent); transform: skewX(-20deg); animation: balai 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); pointer-events: none; }
@keyframes balai { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes defilement { to { transform: translateX(-50%); } }
.projet .visuel .lecture { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 1px solid var(--orange); background: rgba(10,10,10,.55); display: grid; place-items: center; z-index: 2; backdrop-filter: blur(4px); transition: background .3s; }
.projet .visuel:hover .lecture { background: var(--orange); }
.projet .visuel .lecture::before { content: ""; border-left: 14px solid var(--blanc); border-block: 8px solid transparent; margin-left: 4px; }
.projet .visuel:hover .lecture::before { border-left-color: var(--noir); }
.lb-stage video { max-height: 100%; max-width: 100%; background: #000; }

/* Pied de page */
.pied { border-top: 1px solid var(--ligne); background: #070606; padding: 3rem 0; color: var(--gris); font-size: .9rem; }
.pied .conteneur { display: grid; grid-template-columns: 1fr auto; gap: 2rem; }
.pied .marque { color: var(--blanc); font: 600 1.4rem/1 var(--serif); }
.pied .marque span { display: block; margin-top: .5rem; color: var(--gris); font: 400 .72rem/1 var(--mono); }
.pied nav { display: grid; gap: .5rem; }
.pied a { text-underline-offset: 4px; }
.pied a:hover { color: var(--orange); }
.pied .legal { grid-column: 1 / -1; border-top: 1px solid var(--ligne); padding-top: 1.4rem; }
@media (max-width: 640px) { .pied .conteneur { grid-template-columns: 1fr; } }

/* Galerie plein écran */
.lightbox { position: fixed; inset: 0; z-index: 100; background: #0A0A0A; display: flex; flex-direction: column; overflow: hidden; }
.lightbox::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(232,101,31,.1), transparent 65%); pointer-events: none; }
.lb-bar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .9rem var(--marge); font: 500 .76rem/1 var(--mono); color: var(--gris); }
.lb-bar #lb-titre { color: var(--blanc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar button { justify-self: end; background: none; border: 1px solid var(--ligne); color: var(--blanc); font: inherit; padding: .6rem .9rem; cursor: pointer; transition: border-color .2s, color .2s; }
.lb-bar button:hover { border-color: var(--orange); color: var(--orange); }
.lb-progres { position: relative; z-index: 3; height: 2px; background: var(--ligne); }
.lb-progres i { position: absolute; inset: 0; background: var(--orange); box-shadow: 0 0 10px var(--orange); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lb-stage { position: relative; z-index: 2; flex: 1; min-height: 0; margin: .6rem 4.2rem; touch-action: pan-y; }
.lb-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; will-change: transform, opacity, filter; }
.lb-nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; background: rgba(10,10,10,.7); border: 1px solid var(--ligne); color: var(--blanc); font-size: 1.2rem; cursor: pointer; transition: border-color .2s, color .2s, transform .3s; }
.lb-nav:hover { border-color: var(--orange); color: var(--orange); }
.lb-prev { left: -3.6rem; } .lb-prev:hover { transform: translate(-4px, -50%); }
.lb-next { right: -3.6rem; } .lb-next:hover { transform: translate(4px, -50%); }
.lb-bande { position: relative; z-index: 3; display: flex; gap: .5rem; justify-content: safe center; overflow-x: auto; padding: .8rem var(--marge) 1rem; scrollbar-width: none; }
.lb-bande::-webkit-scrollbar { display: none; }
.lb-bande button { position: relative; flex: none; width: 46px; height: 62px; padding: 0; border: 1px solid var(--ligne); background: #14110F; cursor: pointer; opacity: .5; overflow: hidden; transition: opacity .3s, border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.lb-bande button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-bande button:hover { opacity: .9; }
.lb-bande button.on { opacity: 1; border-color: var(--orange); transform: translateY(-6px); box-shadow: 0 6px 16px -6px rgba(232,101,31,.6); }
.lb-bande button.film-i::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -4px; border-left: 10px solid #fff; border-block: 6px solid transparent; filter: drop-shadow(0 0 3px #000); }
@media (max-width: 640px) { .lb-stage { margin: .4rem .4rem; } .lb-nav { top: .6rem; bottom: auto; transform: none; } .lb-prev { left: .6rem; } .lb-next { right: .6rem; } .lb-prev:hover, .lb-next:hover { transform: none; } .lb-bar { grid-template-columns: 1fr auto; } .lb-bar #lb-titre { display: none; } .lb-bar button { justify-self: end; } }

/* Projets photo : une seconde photo se dévoile au survol */
.projet .visuel img.alt { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .projet .visuel:hover img.alt { clip-path: inset(0); } }
.projet .visuel .voir { transition: padding .4s, color .3s; }
.projet .visuel:hover .voir { color: var(--orange-clair); padding-left: 1.3rem; }

/* Films : reels verticaux */
.pellicule { height: 10px; margin-bottom: 2.4rem; background: repeating-linear-gradient(90deg, #2b221c 0 12px, transparent 12px 26px); border-radius: 2px; animation: pelli 2.6s linear infinite; opacity: .9; }
@keyframes pelli { to { background-position: 26px 0; } }
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.4rem; }
.film { display: flex; flex-direction: column; }
.film .visuel { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--ligne); background: #14110F; overflow: hidden; cursor: pointer; color: inherit; font: inherit; transition: border-color .3s, box-shadow .4s; }
.film .visuel:hover { border-color: #7a431f; box-shadow: 0 0 40px -12px rgba(232,101,31,.55); }
.film .visuel img, .film .visuel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film .visuel img { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.film .visuel video { opacity: 0; transition: opacity .4s; }
.film .visuel.joue video { opacity: 1; }
.film .visuel.joue img { transform: scale(1.04); }
.film .visuel::before, .film .visuel::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--orange); z-index: 3; transition: all .3s; }
.film .visuel::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.film .visuel::after { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }
.film .visuel:hover::before { top: 12px; left: 12px; }
.film .visuel:hover::after { right: 12px; bottom: 12px; }
.film .rec { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; align-items: center; gap: .35rem; font: 500 .62rem/1 var(--mono); color: var(--blanc); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.film .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b2f; animation: pouls 1.1s infinite; }
.film .tcf { position: absolute; right: 14px; top: 38px; z-index: 3; font: 500 .66rem/1 var(--mono); color: var(--blanc); text-shadow: 0 1px 6px #000; }
.film .visuel.joue .rec, .film .visuel:hover .rec { opacity: 1; transform: none; }
.film .visuel .lecture { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 1px solid var(--orange); background: rgba(10,10,10,.55); display: grid; place-items: center; z-index: 3; backdrop-filter: blur(4px); transition: background .3s, opacity .3s, transform .4s; }
.film .visuel .lecture::before { content: ""; border-left: 14px solid var(--blanc); border-block: 8px solid transparent; margin-left: 4px; }
.film .visuel:hover .lecture { background: var(--orange); transform: scale(1.1); }
.film .visuel:hover .lecture::before { border-left-color: var(--noir); }
.film .visuel.joue .lecture { opacity: 0; }
.film .visuel .balai { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: rgba(232,101,31,.7); z-index: 2; opacity: 0; }
.film .visuel.joue .balai { opacity: 1; animation: ligne 2.6s linear infinite; }
.film h3 { font: 600 1rem/1.3 var(--sans); margin-top: .9rem; }
.film .marque { display: block; font: 500 .72rem/1 var(--mono); color: var(--orange); margin-bottom: .4rem; }
.film p { color: var(--gris); font-size: .86rem; margin-top: .35rem; }
@media (max-width: 700px) {
  .films { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(var(--marge) * -1); padding: 0 var(--marge) 1rem; scrollbar-width: none; }
  .films::-webkit-scrollbar { display: none; }
  .films > * { flex: 0 0 60%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js .rev, html.js .masque > span, html.js .section::before { clip-path: none !important; opacity: 1 !important; transform: none !important; }
}

/* Passage d'une page à l'autre : fondu doux (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s ease-in both vt-sortie; }
::view-transition-new(root) { animation: .5s cubic-bezier(.2,.7,.2,1) both vt-entree; }
@keyframes vt-sortie { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(14px); } }

/* Accueil : cartes « univers » qui mènent à une page dédiée */
.univers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.univers-lien { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); text-decoration: none; color: inherit; overflow: hidden; }
.univers-lien h3 { font: 500 clamp(1.8rem, 3.2vw, 2.5rem)/1.1 var(--serif); margin: .9rem 0 .8rem; }
.univers-lien .etiquette { font: 500 .72rem/1 var(--mono); color: var(--orange); }
.univers-lien p { color: var(--gris); max-width: 26rem; }
.univers-lien .bouton { margin-top: 1.5rem; pointer-events: none; }
.u-visuels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; align-items: start; }
.u-v { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--ligne); background: #14110F; animation: derive 6s ease-in-out infinite; }
.u-v:nth-child(2) { animation-delay: -2s; margin-top: 1.6rem; animation-direction: reverse; }
.u-visuels.un { grid-template-columns: minmax(0, 33%); }
.u-v:nth-child(3) { animation-delay: -4s; }
@keyframes derive { 0%, 100% { transform: translateY(-.7rem); } 50% { transform: translateY(.7rem); } }
.u-v img, .u-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-v video { opacity: 0; transition: opacity .4s; }
.u-v.joue video { opacity: 1; }
.u-v::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: rgba(232,101,31,.75); opacity: 0; }
.u-v.joue::after { opacity: 1; animation: ligne 2.4s linear infinite; }
.univers-lien:hover .u-v { animation-play-state: paused; border-color: #7a431f; }
.univers-lien:hover .bouton { background: var(--orange-clair); transform: translateY(-2px); }
.univers-cta { grid-column: 1 / -1; border: 1px dashed #4a2c1b; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem; padding: 1.8rem; text-decoration: none; background: rgba(232,101,31,.04); transition: background .3s, border-color .3s; }
.univers-cta:hover { background: rgba(232,101,31,.1); border-color: var(--orange); }
.univers-cta b { font: 500 1.9rem/1.1 var(--serif); }
.univers-cta > span:first-child { color: var(--orange); font: 500 .8rem/1 var(--mono); }
@media (max-width: 860px) { .univers { grid-template-columns: 1fr; } .u-visuels.un { grid-template-columns: minmax(0, 36%); } }

/* Mur de photos : mosaïque, un clic ouvre la galerie plein écran */
.mur { columns: 4 230px; column-gap: .8rem; }
.cliche { position: relative; display: block; width: 100%; margin: 0 0 .8rem; padding: 0; border: 1px solid var(--ligne); background: #14110F; overflow: hidden; cursor: pointer; break-inside: avoid; transition: border-color .3s, box-shadow .4s; }
.cliche img { width: 100%; height: auto; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s; filter: brightness(.92); }
.cliche:hover { border-color: #7a431f; box-shadow: 0 0 36px -12px rgba(232,101,31,.55); }
.cliche:hover img { transform: scale(1.06); filter: brightness(1.08); }
.cliche::before, .cliche::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--orange); z-index: 2; transition: all .3s; }
.cliche::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.cliche::after { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }
.cliche:hover::before { top: 12px; left: 12px; }
.cliche:hover::after { right: 12px; bottom: 12px; }
.sous-titre { font: 500 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--serif); margin: clamp(2.6rem, 6vw, 4.2rem) 0 1.4rem; }
@media (max-width: 560px) { .mur { columns: 2 150px; column-gap: .6rem; } .cliche { margin-bottom: .6rem; } }

/* Accueil : carte « univers » pleine largeur (Mode), visuels en ligne */
.univers-lien.grand { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.univers-lien.grand > div:first-of-type { flex: 0 1 38%; }
.univers-lien.grand .u-visuels { flex: 1 1 62%; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 1rem; }
.univers-lien.grand .u-v:nth-child(4) { animation-delay: -1s; margin-top: 1.6rem; animation-direction: reverse; }
@media (max-width: 860px) { .univers-lien.grand { flex-direction: column; align-items: stretch; } .univers-lien.grand .u-visuels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Accueil : aperçu des offres par univers */
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.offre { display: flex; flex-direction: column; padding: 2rem 1.7rem; text-decoration: none; color: inherit; }
.offre .niveau { display: flex; gap: 4px; margin-bottom: 1.4rem; }
.offre .niveau i { width: 26px; height: 4px; background: var(--ligne); transition: background .3s, box-shadow .3s; }
.offre .niveau i.on { background: var(--orange); box-shadow: 0 0 8px rgba(232,101,31,.6); }
.offre .mot { font: 500 .75rem/1 var(--mono); color: var(--orange); }
.offre h3 { font: 500 2rem/1.1 var(--serif); margin: .5rem 0 .8rem; }
.offre .resume { color: var(--gris); margin-bottom: 1.2rem; font-size: .98rem; }
.offre ul { display: grid; align-content: start; gap: .6rem; margin-bottom: 1.8rem; flex: 1; list-style: none; padding: 0; }
.offre li { position: relative; padding-left: 1.4rem; font-size: .95rem; color: #d6d1ca; }
.offre li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border: 1px solid var(--orange); transform: rotate(45deg); }
.offre .bouton { justify-content: center; pointer-events: none; }
.offre:hover .bouton { background: var(--orange-clair); transform: translateY(-2px); }
.offre:hover .niveau i:nth-child(1) { animation: monte .5s ease both; } .offre:hover .niveau i:nth-child(2) { animation: monte .5s .12s ease both; } .offre:hover .niveau i:nth-child(3) { animation: monte .5s .24s ease both; }
@keyframes monte { 50% { transform: scaleY(2.4); } }
@media (max-width: 900px) { .offres { grid-template-columns: 1fr; } }

/* Pages d'univers : arguments « Pourquoi MP7 » */
.arguments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.arguments .carte { height: 100%; }
@media (max-width: 960px) { .arguments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arguments { grid-template-columns: 1fr; } }

/* Pages d'univers : questions fréquentes (le trait orange se déploie, le signe + pivote) */
.faq { max-width: 52rem; border-top: 1px solid var(--ligne); }
.faq-item { position: relative; border-bottom: 1px solid var(--ligne); }
.faq-item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.faq-item:hover::after, .faq-item[open]::after { transform: scaleX(1); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; font: 500 1.35rem/1.3 var(--serif); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ligne); color: var(--orange); font: 400 1.3rem/1 var(--mono); transition: transform .35s, background .3s, color .3s; }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--orange); color: var(--noir); border-color: var(--orange); }
.faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.faq-item .rep { padding: 0 3.2rem 1.4rem 0; color: var(--gris); max-width: 42rem; animation: ouvre .45s cubic-bezier(.2,.7,.2,1); }
@keyframes ouvre { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .faq-item .rep { animation: none; } }

/* Sélection de réalisations (accueil) */
.selection { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.sel { position: relative; display: block; aspect-ratio: 4 / 4.8; overflow: hidden; border: 1px solid var(--ligne); background: #14110F; color: #fff; grid-column: span 2; }
.sel img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s; filter: saturate(.9) brightness(.82); }
.sel:hover img, .sel:focus-visible img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.sel::before, .sel::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--orange); z-index: 2; transition: all .3s; }
.sel::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.sel::after { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }
.sel:hover::before, .sel:focus-visible::before { top: 16px; left: 16px; }
.sel:hover::after, .sel:focus-visible::after { right: 16px; bottom: 16px; }
.sel figcaption, .sel .legende-sel { position: absolute; inset: auto 0 0 0; padding: 4.5rem 1.1rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.92)); display: flex; flex-direction: column; gap: .15rem; z-index: 1; transform: translateY(6px); transition: transform .4s; }
.sel:hover .legende-sel { transform: none; }
.sel .legende-sel small { font: 500 .72rem/1 var(--mono); color: var(--orange); letter-spacing: .08em; }
.sel .legende-sel b { font: 500 1.35rem/1.15 var(--serif); }
.sel .play { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; z-index: 2; background: rgba(0,0,0,.35); }
.sel .play::before { content: ""; border-left: 9px solid #fff; border-block: 6px solid transparent; margin-left: 3px; }
@media (max-width: 860px) { .selection { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .sel { grid-column: span 1; aspect-ratio: 4 / 5; } .sel .legende-sel b { font-size: 1.05rem; } }
.methode.cinq { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .methode.cinq { grid-template-columns: 1fr; } }
.circuit-cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: 1.4rem 1.6rem; border: 1px solid var(--ligne); border-left: 2px solid var(--orange); background: var(--fond2); }
.circuit-cta p { flex: 1 1 280px; font: 500 1.35rem/1.3 var(--serif); }
.circuit-cta .groupe { display: flex; flex-wrap: wrap; gap: .8rem; }