@property --tour{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{
  --encre:#0d0d0f; --encre2:#1c1c22; --gris:#5f6168; --gris2:#8d9099;
  --papier:#f6f4ef; --papier2:#efece4; --blanc:#fff;
  --or:#c8873f; --brique:#c2412d; --nuit:#16324f; --sauge:#4a7c6f;
  --iris1:#00d9c0; --iris2:#5b7cfa; --iris3:#b45cf0; --iris4:#f472b6;
  --trait:rgba(13,13,15,.12); --trait2:rgba(13,13,15,.07);
  --e:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:86px;background:var(--papier)}
body{font-family:'Inter',system-ui,sans-serif;background:var(--papier);color:var(--encre);
  font-size:17px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--encre);color:var(--papier)}
.wrap{width:min(1300px,90vw);margin:0 auto;position:relative;z-index:3}
section{padding:78px 0;position:relative}

/* ── typographie éditoriale ── */
h1,h2,h3{font-family:'Fraunces','Georgia',serif;font-weight:400;letter-spacing:-.02em;line-height:1.08;
  color:var(--encre)}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:20px}
h3{font-size:1.32rem;line-height:1.25;margin-bottom:10px}
p{color:var(--gris);font-size:1.02rem;line-height:1.78}
.lead{font-size:1.16rem;line-height:1.72;color:var(--encre2);max-width:60ch;font-weight:400}
.ital{font-style:italic;color:var(--or)}
.mono{font-family:'JetBrains Mono',monospace;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase}

/* numéro + libellé de section */
.sec{display:flex;align-items:baseline;gap:18px;margin-bottom:34px;border-bottom:1px solid var(--trait);
  padding-bottom:16px}
.sec .n{font-family:'JetBrains Mono',monospace;font-size:.86rem;color:var(--or);letter-spacing:.14em;font-weight:500}
.sec .l{font-family:'JetBrains Mono',monospace;font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris)}
.sec .r{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--gris2)}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;gap:11px;padding:16px 32px;border-radius:2px;font-size:.94rem;
  font-weight:600;border:1px solid var(--encre);transition:.45s var(--e);position:relative;overflow:hidden;
  isolation:isolate;font-family:inherit;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--encre);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e)}
.btn-p{background:var(--encre);color:var(--papier)}
.btn-p::before{background:var(--or);transform:scaleX(0)}
.btn-p:hover::before{transform:scaleX(1);transform-origin:left}
.btn-p:hover{border-color:var(--or)}
.btn-s{background:transparent;color:var(--encre)}
.btn-s:hover{color:var(--papier)}
.btn-s:hover::before{transform:scaleX(1);transform-origin:left}
.lien{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.93rem;margin-top:18px;
  padding-bottom:3px;border-bottom:1px solid var(--trait);transition:.4s var(--e)}
.lien:hover{gap:16px;border-bottom-color:var(--or);color:var(--or)}

/* ── en-tête ── */
header{position:sticky;top:0;z-index:200;background:rgba(246,244,239,.86);
  backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid transparent;transition:.5s var(--e)}
header.fixe{border-bottom-color:var(--trait);background:rgba(246,244,239,.97)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0}
.logo{display:flex;align-items:center;gap:12px;font-family:'Fraunces',serif;font-size:1.24rem;
  letter-spacing:-.01em}
.logo img{width:40px;height:40px;object-fit:contain;transition:.7s var(--e);
  filter:drop-shadow(0 2px 7px rgba(91,124,250,.34))}
.logo:hover img{transform:rotate(-10deg)}
.logo small{display:block;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris2)}
nav#mainnav{display:flex;align-items:center;gap:6px}
nav#mainnav>ul{display:flex;align-items:center;gap:0;list-style:none}
nav#mainnav>ul>li{position:relative}
nav#mainnav>ul>li>a{display:block;padding:9px 16px;font-size:.92rem;font-weight:500;color:var(--encre2);
  position:relative;transition:.35s}
nav#mainnav>ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)}
nav#mainnav>ul>li>a:hover::after,nav#mainnav>ul>li>a.active::after{transform:scaleX(1)}
nav#mainnav>ul>li>a:hover{color:var(--or)}
/* ── panneau de menu : chaque entree s'ouvre en grand, avec un repere ── */
nav#mainnav>ul>li.nav-boutique-wrap{position:static}
.nav-boutique-menu{position:absolute;top:100%;left:0;right:0;
  background:var(--blanc);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  box-shadow:0 30px 60px -34px rgba(13,13,15,.34);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .42s var(--e),transform .42s var(--e),visibility .42s;
  padding:0;display:block}
.nav-boutique-wrap:hover .nav-boutique-menu,
.nav-boutique-wrap:focus-within .nav-boutique-menu{opacity:1;visibility:visible;transform:none}

/* le filet iridescent qui court en haut du panneau */
.nav-boutique-menu::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e) .06s}
.nav-boutique-wrap:hover .nav-boutique-menu::before{transform:scaleX(1)}

.nav-panneau{width:min(1300px,90vw);margin:0 auto;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-left:1px solid var(--trait2);padding:0}
.nav-boutique-menu a{display:block;padding:26px 24px 28px;font-size:.95rem;font-weight:600;
  color:var(--encre);border-right:1px solid var(--trait2);position:relative;
  transition:background .45s var(--e),color .3s;isolation:isolate}
.nav-boutique-menu a::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:var(--or);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--e)}
.nav-boutique-menu a:hover{background:var(--papier);color:var(--encre);padding-left:24px}
.nav-boutique-menu a:hover::after{transform:scaleY(1)}
.nav-boutique-menu a i{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:9px}
.nav-boutique-menu a s{display:block;text-decoration:none;font-weight:400;font-size:.88rem;
  line-height:1.6;color:var(--gris);margin-top:7px}
.burger{display:none;background:none;border:0;padding:8px;width:42px;height:42px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--encre);margin:5.5px auto;transition:.45s var(--e)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));transition:width .1s linear}

/* ── hero éditorial ── */
.hero{padding:74px 0 90px;border-bottom:1px solid var(--trait)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:66px;align-items:end}
.hero h1{margin:22px 0 26px}
.hero .lead{font-size:1.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero-meta{display:flex;gap:42px;margin-top:44px;padding-top:30px;border-top:1px solid var(--trait)}
.hero-meta div b{display:block;font-family:'Fraunces',serif;font-size:2.15rem;line-height:1;margin-bottom:8px}
.hero-meta div span{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris)}
/* la puce → écran, version éditoriale */
/* width:100% est indispensable : les enfants du schema sont tous en
   position:absolute, donc ils ne donnent aucune largeur a la boite. Sans
   lui, .morph tombe a 0 de large, aspect-ratio la met a 0 de haut, et
   margin-left:auto colle ce point contre le bord droit — le dessin part
   a droite et se retrouve coupe. */
.morph{position:relative;aspect-ratio:1/1;width:100%;max-width:400px;margin-left:auto;display:grid;place-items:center}
.morph svg{position:absolute;width:100%;height:100%;overflow:visible;
  transition:opacity 5.2s var(--e),transform 6s var(--e)}
.mo-puce{opacity:1;transform:scale(1)}
.mo-ecran{opacity:0;transform:scale(.85) rotate(-5deg)}
.morph.actif .mo-puce{opacity:0;transform:scale(1.42) rotate(10deg)}
.morph.actif .mo-ecran{opacity:1;transform:none}
.tr{fill:none;stroke:var(--nuit);stroke-width:1.1;stroke-linecap:round;opacity:.75}
.tr2{stroke:var(--or);opacity:.8}.tr3{stroke:var(--sauge);opacity:.65}
.pl{fill:var(--or)}
.corps{fill:rgba(22,50,79,.05);stroke:var(--nuit);stroke-width:1.5}
.corps2{fill:rgba(200,135,63,.07);stroke:var(--or);stroke-width:1.5}
.flux{stroke-dasharray:5 9;animation:cour 1.5s linear infinite}
@keyframes cour{to{stroke-dashoffset:-28}}
.pulse-c{animation:pc 2.6s ease-in-out infinite}
@keyframes pc{0%,100%{opacity:.3;r:2.4}50%{opacity:1;r:3.8}}
.morph-halo{position:absolute;width:76%;height:76%;border-radius:50%;filter:blur(56px);opacity:.5;
  background:conic-gradient(from var(--tour),rgba(0,217,192,.28),rgba(91,124,250,.26),
    rgba(180,92,240,.22),rgba(0,217,192,.28));animation:rot 11s linear infinite}
@keyframes rot{to{--tour:360deg}}
.morph-lbl{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;transition:.6s var(--e)}
.morph.actif .morph-lbl{color:var(--or)}

/* ── bandeau ── */
.bandeau{background:var(--encre);color:var(--papier);padding:15px 0;overflow:hidden;white-space:nowrap}
.piste{display:inline-flex;gap:40px;animation:defile 36s linear infinite}
.piste span{font-family:'JetBrains Mono',monospace;font-size:.87rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(246,244,239,.82);display:inline-flex;align-items:center;gap:14px}
.piste span::before{content:"◆";color:var(--or);font-size:.6rem}
@keyframes defile{to{transform:translateX(-50%)}}

/* ── grilles ── */
.grid{display:grid;gap:0;margin-top:0;border-top:1px solid var(--trait)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.carte{position:relative;padding:38px 34px 42px;border-right:1px solid var(--trait);
  border-bottom:1px solid var(--trait);transition:background .5s var(--e);isolation:isolate;
  background:transparent}
.carte:hover{background:var(--blanc)}
.carte::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;transform:scaleY(0);
  transform-origin:top;transition:transform .55s var(--e);
  background:linear-gradient(180deg,var(--iris1),var(--iris2),var(--iris3))}
.carte:hover::after{transform:scaleY(1)}
.carte .num{font-family:'JetBrains Mono',monospace;font-size:.84rem;color:var(--gris);letter-spacing:.12em;
  display:block;margin-bottom:24px}
.carte ul{list-style:none;margin-top:16px}
.carte li{font-size:1rem;color:var(--gris);padding-left:20px;position:relative;margin-bottom:10px;line-height:1.62}
.carte li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--or)}
.ico{width:46px;height:46px;display:grid;place-items:center;margin-bottom:20px;border:1px solid var(--trait);
  transition:.55s var(--e);position:relative;isolation:isolate;overflow:hidden}
.ico svg{width:21px;height:21px;stroke:var(--encre);fill:none;stroke-width:1.4;position:relative;z-index:2;
  transition:stroke .4s}
.ico::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:conic-gradient(from var(--tour),var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  animation:rot 6s linear infinite}
.carte:hover .ico{border-color:transparent}
.carte:hover .ico::before{opacity:.9}
.carte:hover .ico svg{stroke:#fff}

/* ── réalisations ── */
.projet{display:block;border-bottom:1px solid var(--trait);padding:30px 0;position:relative;
  transition:.5s var(--e)}
.projet-int{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
.projet:hover{padding-left:14px}
.projet-vis{width:310px;height:196px;overflow:hidden;background:var(--papier2);position:relative;
  border:1px solid var(--trait)}
.projet-vis svg,.projet-vis img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e)}
.projet:hover .projet-vis svg,.projet:hover .projet-vis img{transform:scale(1.08)}
.projet-fl{font-family:'JetBrains Mono',monospace;font-size:1.4rem;color:var(--gris2);transition:.5s var(--e)}
.projet:hover .projet-fl{color:var(--or);transform:translateX(8px)}
.tag-p{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or);display:block;margin-bottom:11px;font-weight:500}

/* ── manifeste ── */
.manif{font-family:'Fraunces',serif;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.24;font-weight:400;
  max-width:22ch;letter-spacing:-.02em;color:var(--encre)}

/* ── timeline ── */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;
  border-top:1px solid var(--trait)}
.etape{padding:30px 26px 34px;border-right:1px solid var(--trait);position:relative;transition:.5s var(--e)}
.etape:hover{background:var(--blanc)}
.etape .n{font-family:'Fraunces',serif;font-size:3rem;color:var(--trait);line-height:1;display:block;
  margin-bottom:16px;transition:color .5s var(--e)}
.etape:hover .n{color:var(--or)}

/* ── profil ── */
.profil{display:grid;grid-template-columns:minmax(280px,430px) 1fr;gap:62px;align-items:start;margin-top:16px}
.photo{position:relative;overflow:hidden;isolation:isolate}
.photo img{transition:transform 1.2s var(--e);filter:grayscale(.15) contrast(1.04)}
.photo:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.06)}
.photo-lgd{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);margin-top:16px;display:block}
.jetons{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.jeton{padding:10px 19px;border:1px solid var(--trait);font-size:.94rem;color:var(--encre2);transition:.45s var(--e)}
.jeton:hover{border-color:var(--or);color:var(--or);background:var(--blanc)}

/* ── tarifs ── */
.prix{font-family:'Fraunces',serif;font-size:2.8rem;line-height:1;margin:18px 0 8px;letter-spacing:-.02em}
.prix small{font-family:'Inter',sans-serif;font-size:1.02rem;color:var(--gris);letter-spacing:0;
  font-weight:500}
.carte.vedette{background:var(--blanc)}
.carte.vedette::after{transform:scaleY(1)}
.badge-v{position:absolute;top:36px;right:32px;font-family:'JetBrains Mono',monospace;font-size:.76rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--papier);background:var(--encre);padding:7px 15px}

/* ── FAQ ── */
details.faq{border-bottom:1px solid var(--trait);padding:24px 0}
details.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:'Fraunces',serif;font-size:1.22rem;cursor:pointer;transition:color .35s}
details.faq summary:hover{color:var(--or)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:'JetBrains Mono',monospace;font-size:1.3rem;
  color:var(--or);transition:transform .45s var(--e);flex-shrink:0}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin-top:14px;max-width:76ch;animation:ouvre .5s var(--e)}
@keyframes ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── contact ── */
.contact-zone{background:var(--encre);color:var(--papier);padding:96px 0}
.contact-zone h2,.contact-zone h3{color:var(--papier)}
.contact-zone p{color:rgba(246,244,239,.68)}
.contact-zone .sec{border-bottom-color:rgba(246,244,239,.16)}
.contact-zone .sec .l{color:rgba(246,244,239,.5)}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;margin-top:12px}
.champ{margin-bottom:20px}
.champ label{display:block;font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(246,244,239,.66);margin-bottom:10px}
.champ input,.champ select,.champ textarea{width:100%;padding:12px 0;border:0;
  border-bottom:1px solid rgba(246,244,239,.22);background:transparent;color:var(--papier);font-size:1rem;
  font-family:inherit;transition:.45s var(--e)}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(246,244,239,.32)}
.champ select option{background:var(--encre);color:var(--papier)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;border-bottom-color:var(--or)}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ci{padding:16px 0;border-bottom:1px solid rgba(246,244,239,.14)}
.ci b{display:block;font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(246,244,239,.6);margin-bottom:7px;font-weight:400}
.ci a,.ci span{font-size:1.08rem;color:var(--papier);transition:color .3s}
.ci a:hover{color:var(--or)}
.contact-zone .btn-p{background:var(--or);border-color:var(--or);color:var(--encre)}
.contact-zone .btn-p::before{background:var(--papier)}
.contact-zone .btn-p:hover{color:var(--encre);border-color:var(--papier)}

/* ── pied ── */
footer{background:var(--encre);color:rgba(246,244,239,.74);padding:0 0 30px;font-size:.96rem}
footer .wrap{border-top:1px solid rgba(246,244,239,.14);padding-top:56px}
footer h4{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,244,239,.58);margin-bottom:18px;font-weight:400}
footer p{color:rgba(246,244,239,.74);font-size:.96rem;margin-bottom:9px}
footer a{transition:.3s}footer a:hover{color:var(--or)}
.f-grid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.2fr;gap:46px}
.f-soc{display:flex;gap:11px;margin-top:20px}
.f-soc a{width:40px;height:40px;border:1px solid rgba(246,244,239,.2);display:grid;place-items:center;
  transition:.45s var(--e)}
.f-soc a:hover{background:var(--or);border-color:var(--or);color:var(--encre)}
.f-bas{border-top:1px solid rgba(246,244,239,.14);margin-top:52px;padding-top:26px;display:flex;
  flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.92rem;color:rgba(246,244,239,.58)}

/* ── apparitions ── */
[data-anim]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform .9s var(--e)}
/* filet de securite : contenu visible meme sans JS */
@media (scripting:none){[data-anim]{opacity:1;transform:none}}
html:not(.js-ok) [data-anim]{opacity:1!important;transform:none!important}

[data-anim].vu{opacity:1!important;transform:none!important}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
.ligne-anim{height:1px;background:var(--trait);position:relative;overflow:hidden}
.ligne-anim::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--e);
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4))}
.ligne-anim.vu::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}
  [data-anim]{opacity:1;transform:none}}

/* ═════ HOLOGRAPHIE ÉDITORIALE ═════ */
@keyframes irise{to{background-position:300% center}}

/* filet holographique sous chaque en-tête de section */
.sec{position:relative}
.sec::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  background-size:300% 100%;animation:irise 7s linear infinite;
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e)}
.sec.vu::after{transform:scaleX(1)}

/* mots en italique : nacre irisée au lieu de l'or plat */
.ital{background:linear-gradient(100deg,var(--or) 0%,var(--iris3) 26%,var(--iris2) 48%,
  var(--iris1) 68%,var(--or) 100%);background-size:300% auto;-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;animation:irise 9s linear infinite}

/* cartes : bordure irisée permanente + nappe nacrée au survol */
.carte::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .55s;mix-blend-mode:multiply;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),transparent 45%),
    repeating-linear-gradient(102deg,
      rgba(0,217,192,.22) 0%,rgba(91,124,250,.2) 7%,rgba(180,92,240,.2) 14%,
      rgba(244,114,182,.18) 21%,rgba(200,135,63,.18) 28%,rgba(0,217,192,.22) 35%);
  background-size:auto,300% 300%;background-position:0 0,var(--mx,50%) var(--my,50%)}
.carte:hover::before{opacity:.85}
.carte::after{width:3px;background:linear-gradient(180deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:100% 300%;animation:irise-v 6s linear infinite}
@keyframes irise-v{to{background-position:0 300%}}
.carte>*:not(.badge-v):not(.num){position:relative;z-index:2}
.carte>.badge-v,.carte>.num{z-index:2}

/* icônes : anneau irisé permanent, plein au survol */
.ico::after{content:"";position:absolute;inset:-1px;padding:1px;
  background:conic-gradient(from var(--tour,0deg),var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;animation:rot 7s linear infinite;
  transition:opacity .5s}
.carte:hover .ico::after{opacity:0}

/* prix : nacre */
.prix{color:var(--encre);-webkit-text-fill-color:var(--encre);position:relative;
  display:inline-block;padding-bottom:10px}
.prix::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(100deg,var(--iris1),var(--iris2) 40%,var(--iris3) 70%,var(--or));
  background-size:300% auto;animation:irise 7s linear infinite}
.prix small{-webkit-text-fill-color:var(--gris)}

/* repères du hero : chiffres nacrés */
.hero-meta div b,.hero-meta div b span{color:var(--encre);-webkit-text-fill-color:var(--encre);
  font-family:'Fraunces',serif;font-size:2.15rem;line-height:1;font-weight:600}
.hero-meta div{position:relative;padding-left:16px}
.hero-meta div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:linear-gradient(180deg,var(--iris1),var(--iris3));background-size:100% 200%;
  animation:irise-v 5s linear infinite}

/* projets : liseré irisé qui se déploie */
.projet::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;transition:transform .7s var(--e);
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:300% 100%;animation:irise 6s linear infinite}
.projet:hover::after{transform:scaleX(1)}
.projet-vis{position:relative;isolation:isolate}
.projet-vis::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(108deg,rgba(0,217,192,.3) 0%,rgba(91,124,250,.28) 8%,
    rgba(180,92,240,.26) 16%,rgba(244,114,182,.24) 24%,rgba(0,217,192,.3) 32%);
  background-size:280% 100%}
.projet:hover .projet-vis::after{opacity:.9;animation:balaye 1.6s var(--e)}
@keyframes balaye{0%{background-position:190% 0}100%{background-position:-90% 0}}

/* photo : cadre irisé + reflet nacré */
.photo::before{content:"";position:absolute;inset:0;padding:3px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--tour,0deg),var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:rot 9s linear infinite}
.photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .6s;mix-blend-mode:overlay;
  background:linear-gradient(112deg,transparent 34%,rgba(0,217,192,.45) 44%,rgba(180,92,240,.4) 52%,
    rgba(244,114,182,.35) 60%,transparent 70%);background-size:260% 100%}
.photo:hover::after{opacity:1;animation:balaye 1.8s var(--e)}

/* étapes : numéro irisé au survol + liseré */
.etape:hover .n{background:linear-gradient(100deg,var(--iris1),var(--iris2),var(--iris3));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:irise 5s linear infinite}
.etape::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);
  transform-origin:left;transition:transform .6s var(--e);
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:300% 100%;animation:irise 6s linear infinite}
.etape:hover::after{transform:scaleX(1)}

/* boutons : reflet nacré qui balaie */
.btn{isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .4s;mix-blend-mode:overlay;
  background:linear-gradient(112deg,transparent 36%,rgba(0,217,192,.6) 46%,rgba(180,92,240,.55) 54%,
    transparent 64%);background-size:280% 100%}
.btn:hover::after{opacity:1;animation:balaye 1.3s var(--e)}

/* jetons : bordure irisée au survol */
.jeton{position:relative;isolation:isolate;background:transparent}
.jeton::before{content:"";position:absolute;inset:-1px;padding:1px;z-index:-1;opacity:0;transition:opacity .45s;
  background:conic-gradient(from var(--tour,0deg),var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:rot 5s linear infinite}
.jeton:hover::before{opacity:1}
.jeton:hover{border-color:transparent}

/* bandeau : losanges irisés */
.piste span::before{background:linear-gradient(100deg,var(--iris1),var(--iris3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* réseaux sociaux du pied : cadre irisé */
.f-soc a{position:relative;isolation:isolate}
.f-soc a::before{content:"";position:absolute;inset:-1px;padding:1px;z-index:-1;opacity:.45;
  transition:opacity .45s;
  background:conic-gradient(from var(--tour,0deg),var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:rot 7s linear infinite}
.f-soc a:hover::before{opacity:1}

/* FAQ : signe + irisé */
details.faq summary::after{background:linear-gradient(100deg,var(--iris1),var(--iris2),var(--iris3));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:irise 6s linear infinite}
details.faq{position:relative}
details.faq::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;transition:transform .6s var(--e);
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:300% 100%;animation:irise 6s linear infinite}
details.faq[open]::after{transform:scaleX(1)}

/* zone contact : liseré irisé en haut */
.contact-zone{position:relative}
.contact-zone::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  background-size:300% 100%;animation:irise 5s linear infinite}
.contact-zone .champ input:focus,.contact-zone .champ select:focus,.contact-zone .champ textarea:focus{
  border-bottom-color:transparent;
  background-image:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat}

/* barre de progression déjà irisée : on l'épaissit */
#prog{height:3px;background-size:300% 100%;animation:irise 4s linear infinite}

/* ── responsive ── */
@media(max-width:1040px){
  .g2,.g3{grid-template-columns:1fr}
  .g4,.tl{grid-template-columns:repeat(2,1fr)}
  .carte:nth-child(odd){border-right:0}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .morph{margin:0 auto;max-width:330px}
  .hero-meta{flex-wrap:wrap;gap:26px}
  .profil{grid-template-columns:1fr;gap:34px}
  .photo{max-width:420px}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .f-grid{grid-template-columns:1fr 1fr;gap:34px}
  .projet-int{grid-template-columns:1fr;gap:18px}
  .projet-vis{width:100%;height:200px}
  .projet-fl{display:none}
}
@media(max-width:900px){
  .g4,.tl{grid-template-columns:1fr}
  nav#mainnav{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--papier);padding:12px 0 20px;border-bottom:1px solid var(--trait);
    box-shadow:0 24px 46px -24px rgba(13,13,15,.3);transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:.45s var(--e);
    /* Le menu deplie fait plus de 1300 px. Sans limite de hauteur il depassait
       l'ecran et s'arretait au milieu des abonnements, sans moyen de defiler.
       La ligne en vh sert de repli : si dvh n'est pas reconnu, la regle entiere
       serait ignoree et on se retrouverait sans limite du tout. */
    max-height:calc(100vh - 66px);
    max-height:calc(100dvh - 66px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Ceinture et bretelles : tant que le menu n'est pas ouvert, rien de ce
     qu'il contient ne doit pouvoir etre touche, quelle que soit la regle de
     visibilite d'un enfant. */
  nav#mainnav{pointer-events:none}
  nav#mainnav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}

  /* Menu ouvert : il doit passer devant la barre d'actions (300) et le bandeau
     cookies (9998). Le menu vit dans le contexte d'empilement de l'en-tete :
     c'est donc l'en-tete qu'on remonte, et on efface ce qui gene en bas. */
  body.menu-ouvert header{z-index:9999}
  body.menu-ouvert .barre-mobile{display:none}
  body.menu-ouvert #cookie-banner-global{display:none}
  body.menu-ouvert{overflow:hidden}

  nav#mainnav>ul{flex-direction:column;align-items:stretch;width:100%}
  nav#mainnav>ul>li>a{padding:14px 5vw;border-bottom:1px solid var(--trait2)}
  nav#mainnav>ul>li>a::after{display:none}
  /* visibility:inherit, surtout pas visible : le menu ferme est cache par
     visibility:hidden sur nav#mainnav, mais une valeur "visible" posee ici
     annulait cette regle pour le sous-menu. Resultat, menu ferme, des bandes
     invisibles de toute la largeur restaient cliquables par-dessus la page
     et ouvraient Tarifs, Services ou Logiciels au lieu du lien touche. */
  .nav-boutique-menu{position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;
    border:0;border-top:0;border-bottom:0;background:var(--papier2);padding:0}
  /* Et une fois le menu ouvert, le sous-menu doit s'afficher sans dependre
     de l'heritage pendant la transition. */
  nav#mainnav.open .nav-boutique-menu{visibility:visible}
  .nav-boutique-menu::before{display:none}
  .nav-panneau{width:100%;grid-template-columns:1fr;border-left:0}
  .nav-boutique-menu a{padding:13px 5vw 15px;border-right:0;
    border-bottom:1px solid var(--trait2);font-size:.9rem}
  .nav-boutique-menu a:hover{padding-left:5vw}
  .nav-boutique-menu a i{margin-bottom:5px}
  .nav-boutique-menu a s{font-size:.83rem;margin-top:4px}
  .burger{display:block}
  section{padding:76px 0}
  .carte{border-right:0}
  .etape{border-right:0;border-bottom:1px solid var(--trait)}
}
@media(max-width:620px){
  .ligne{grid-template-columns:1fr}.f-grid{grid-template-columns:1fr}
  .hero{padding:52px 0 66px}
  .carte{padding:30px 24px 34px}
  /* Sur telephone la section faisait exactement la largeur de son texte : le
     fond sombre s'arretait pile ou les mots commencent, donc on ne voyait
     l'encadre qu'au centre, rien sur les cotes. On le fait deborder jusqu'aux
     bords de l'ecran, et on rend au texte sa marge par le padding. */
  .contact-zone{padding:70px 16px;width:100vw;margin-left:calc(50% - 50vw)}
}

/* ══════════════ HOLOGRAPHIE PERMANENTE ══════════════
   Visible sans survol. Ne touche jamais un texte de lecture. */

/* — halo irise diffus au fond de chaque section — */
section:not(.contact-zone)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(58% 42% at 12% 8%,rgba(0,217,192,.13),transparent 62%),
    radial-gradient(52% 46% at 88% 22%,rgba(180,92,240,.12),transparent 62%),
    radial-gradient(64% 50% at 50% 96%,rgba(91,124,250,.10),transparent 66%)}
section:nth-of-type(even):not(.contact-zone)::before{
  background:
    radial-gradient(56% 44% at 86% 10%,rgba(244,114,182,.11),transparent 62%),
    radial-gradient(50% 44% at 10% 30%,rgba(0,217,192,.12),transparent 62%),
    radial-gradient(62% 48% at 46% 94%,rgba(200,135,63,.10),transparent 66%)}

/* — cartes : nacre permanente, franche au survol — */
.carte::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3;
  transform:scaleY(1);transform-origin:top;opacity:.5;transition:opacity .5s var(--e)}
.carte:hover::after{opacity:1}
.carte.vedette::after{opacity:1;width:4px}

/* — grands chiffres d'etape : irises en permanence — */
.etape .n{background:linear-gradient(100deg,var(--iris1),var(--iris2) 34%,var(--iris3) 62%,var(--iris4) 84%,var(--or));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;opacity:.62;
  animation:irise 9s linear infinite;transition:opacity .5s var(--e)}
.etape:hover .n{opacity:1}

/* — numeros de section : irises — */
.sec .n{background:linear-gradient(100deg,var(--iris1),var(--iris2) 40%,var(--iris3) 72%,var(--or));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:irise 8s linear infinite;font-weight:700}

/* — vignettes de realisation : nacre permanente legere — */
.projet-vis::after{opacity:.34}
.projet:hover .projet-vis::after{opacity:.9}
.projet{position:relative}
.projet::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;transition:transform .7s var(--e);
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:300% 100%;animation:irise 7s linear infinite}
.projet:hover::after{transform:scaleX(1)}

/* — jetons : contour nacre permanent — */
.jeton::before{opacity:.55}
.jeton:hover::before{opacity:1}

/* — puces des listes : degrade au lieu du trait or plat — */
.carte li::before{width:10px;height:2px;
  background:linear-gradient(90deg,var(--iris1),var(--iris3));
  background-size:300% 100%;animation:irise 6s linear infinite}

/* — en-tete : filet irise une fois la page defilee — */
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;opacity:0;
  transition:opacity .5s var(--e);
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  background-size:300% 100%;animation:irise 8s linear infinite}
header.fixe::after{opacity:1}
header.fixe{border-bottom-color:transparent}

/* — bandeau defilant : pastilles irisees plus vives — */
.piste span::before{font-size:.72rem;
  background:linear-gradient(100deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:irise 5s linear infinite}

/* — zone de contact : voile conique lent sur le noir — */
.contact-zone{isolation:isolate;overflow:hidden}
.contact-zone::after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;opacity:.3;
  background:conic-gradient(from var(--tour,0deg) at 62% 34%,
    rgba(0,217,192,.5),rgba(91,124,250,.42),rgba(180,92,240,.44),
    rgba(244,114,182,.34),rgba(0,217,192,.5));
  filter:blur(78px);animation:rot 26s linear infinite}
.contact-zone>*{position:relative;z-index:2}

/* — pied de page : filet superieur irise — */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3),var(--iris4),var(--iris1));
  background-size:300% 100%;animation:irise 10s linear infinite;opacity:.75}

/* — respect des preferences d'accessibilite — */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

.note-tarifs{margin-top:30px;max-width:78ch;font-size:.95rem;color:var(--gris);line-height:1.72;
  padding-left:16px;border-left:2px solid var(--trait)}

/* — signification du sigle — */
.sigle{margin-top:56px;padding-top:34px;border-top:1px solid var(--trait);
  display:grid;grid-template-columns:auto 1fr;gap:46px;align-items:start}
.sigle-t{font-family:'Fraunces',serif;font-size:clamp(2.4rem,5vw,3.9rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--iris1),var(--iris2) 38%,var(--iris3) 68%,var(--or));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:irise 9s linear infinite}
.sigle-g{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.sigle-g div{position:relative;padding-left:15px}
.sigle-g div::before{content:"";position:absolute;left:0;top:5px;bottom:3px;width:2px;
  background:linear-gradient(180deg,var(--iris1),var(--iris3));background-size:100% 200%;
  animation:irise-v 6s linear infinite}
.sigle-g b{display:block;font-family:'Fraunces',serif;font-size:1.16rem;margin-bottom:7px;color:var(--encre)}
.sigle-g span{font-size:.95rem;color:var(--gris);line-height:1.66}

/* — bandeau photo — */
.bandeau-photo{margin:52px 0 0;position:relative;isolation:isolate}
.bandeau-photo img{width:100%;height:clamp(190px,26vw,330px);object-fit:cover;display:block}
.bandeau-photo::after{content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(190px,26vw,330px);pointer-events:none;opacity:.2;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(104deg,rgba(0,217,192,.32) 0%,rgba(91,124,250,.28) 9%,
    rgba(180,92,240,.28) 18%,rgba(244,114,182,.24) 27%,rgba(0,217,192,.32) 36%);
  background-size:300% 100%;animation:irise 12s linear infinite}
.bandeau-photo figcaption{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:.76rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gris2)}
@media(max-width:900px){
  .sigle{grid-template-columns:1fr;gap:26px}
  .sigle-g{grid-template-columns:1fr;gap:20px}
}

/* ══════════════ HOLOGRAPHIE REELLE ══════════════
   Feuillet de diffraction : spectre + speculaire + rainures.
   Pilote par --mx/--my (eclat), --px/--py (spectre), --ang (angle). */

.foil{position:relative;isolation:isolate;
  --mx:50%;--my:50%;--px:50%;--py:50%;--ang:108deg;--foil:.2}
.foil>*{position:relative;z-index:5}
.foil::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:var(--foil);transition:opacity .5s var(--e);
  mix-blend-mode:hard-light;
  background-image:
    radial-gradient(farthest-corner circle at var(--mx) var(--my),
      rgba(255,255,255,.85) 3%,rgba(255,255,255,.12) 22%,transparent 56%),
    repeating-linear-gradient(var(--ang),
      hsl(340 90% 64%) 0%,hsl(20 90% 64%) 3%,hsl(48 88% 62%) 6%,hsl(96 82% 56%) 9%,
      hsl(160 84% 56%) 12%,hsl(196 88% 60%) 15%,hsl(238 88% 66%) 18%,hsl(288 88% 66%) 21%,
      hsl(340 90% 64%) 24%),
    repeating-linear-gradient(82deg,rgba(255,255,255,.18) 0 1px,transparent 1px 4px);
  background-blend-mode:screen,overlay,normal;
  background-size:170% 170%,190% 190%,auto;
  background-position:var(--px) var(--py),calc(100% - var(--px)) var(--py),0 0}
.foil:hover{--foil:.46}

/* sur fond sombre le spectre doit ajouter de la lumiere, pas en retirer */
.foil-nuit::before{mix-blend-mode:screen;
  background-image:
    radial-gradient(farthest-corner circle at var(--mx) var(--my),
      rgba(255,255,255,.5) 3%,rgba(255,255,255,.07) 24%,transparent 58%),
    repeating-linear-gradient(var(--ang),
      hsl(340 92% 58%) 0%,hsl(20 92% 58%) 3%,hsl(48 90% 56%) 6%,hsl(96 86% 50%) 9%,
      hsl(160 88% 50%) 12%,hsl(196 92% 56%) 15%,hsl(238 92% 60%) 18%,hsl(288 92% 60%) 21%,
      hsl(340 92% 58%) 24%),
    repeating-linear-gradient(82deg,rgba(255,255,255,.1) 0 1px,transparent 1px 4px)}
.foil-nuit{--foil:.34}
.foil-nuit:hover{--foil:.5}

/* relief : uniquement sur les elements isoles, jamais dans une grille jointive */
.relief{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .5s var(--e);will-change:transform}
.relief:hover{transition:transform .12s linear}

/* la nacre d'origine s'efface au profit du feuillet.
   Attention : .carte::before EST .foil::before — on ne l'eteint pas, on le pilote. */
.projet-vis::after{opacity:0!important}
.projet:hover .projet-vis::after{opacity:0!important}
.photo::after{opacity:0!important}
.bandeau-photo::after{opacity:0!important}

/* intensites par famille */
.projet-vis{--foil:.22}
.projet:hover .projet-vis{--foil:.5}
.photo{--foil:.16}
.photo:hover{--foil:.38}
.bandeau-photo{--foil:.18}
.bandeau-photo:hover{--foil:.34}
.ico{--foil:.3}
.jeton{--foil:.18}
.jeton:hover{--foil:.45}

@media (prefers-reduced-motion:reduce){
  .relief{transform:none!important}
  .foil::before{opacity:calc(var(--foil) * .6)}
}

/* ══════════════ TRANSFORMATION 3D HOLOGRAPHIQUE ══════════════ */

/* grille de fond du projecteur */

@media (prefers-reduced-motion:reduce){
  .holo3d-halo,
}

/* schema redescendu dans « Comment ca se passe » */
.schema-bas{margin:56px 0 0;display:grid;grid-template-columns:minmax(220px,330px) 1fr;
  gap:42px;align-items:center;padding-top:38px;border-top:1px solid var(--trait)}
.schema-bas .morph{margin:0;max-width:330px}
.schema-bas figcaption{font-family:'Fraunces',serif;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.42;color:var(--encre);max-width:26ch}
.schema-bas figcaption::after{content:"";display:block;width:74px;height:2px;margin-top:16px;
  background:linear-gradient(90deg,var(--iris1),var(--iris2),var(--iris3));
  background-size:300% 100%;animation:irise 7s linear infinite}
@media(max-width:900px){
  .schema-bas{grid-template-columns:1fr;gap:24px;text-align:center}
  .schema-bas .morph{margin:0 auto}
  .schema-bas figcaption{margin:0 auto}
}

/* ══════════════ TRANSFORMATION — vraies photos ══════════════ */
/* ombre portee au sol, discrete */

/* l'objet reste au centre de l'ecran pendant le defilement */
@media(min-width:1041px){
  .hero .hero-grid{align-items:start}
  .hero .hero-grid>div:last-child{position:sticky;top:calc(50vh - 260px)}
  .hero{padding-bottom:0}
  
}
@media(max-width:1040px){
  .holo3d{margin:0 auto;max-width:360px}
  
}

/* schema du bas : boucle continue (ni defilement, ni survol) */
#morphBas .mo-puce{animation:bascule-a 13s ease-in-out infinite}
#morphBas .mo-ecran{animation:bascule-b 13s ease-in-out infinite}
@keyframes bascule-a{
  0%,34%{opacity:1;transform:scale(1)}
  50%,84%{opacity:0;transform:scale(1.3) rotate(8deg)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes bascule-b{
  0%,34%{opacity:0;transform:scale(.86) rotate(-5deg)}
  50%,84%{opacity:1;transform:none}
  100%{opacity:0;transform:scale(.86) rotate(-5deg)}
}
@media (prefers-reduced-motion:reduce){
  #morphBas .mo-puce,#morphBas .mo-ecran{animation:none}
}

/* ══════════════ OBJET 3D HOLOGRAPHIQUE (WebGL) ══════════════ */
.holo3d{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;margin-left:auto;
  display:grid;place-items:center}
.holo3d-scene{position:relative;z-index:2;width:100%;height:100%;
  display:grid;place-items:center}
.holo3d-scene canvas{max-width:100%;max-height:100%}
/* nappe de lumiere sous l'objet : la trace du projecteur */
@keyframes respire{50%{transform:scale(1.14);opacity:.7}}
.holo3d .morph-lbl{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris2);white-space:nowrap;transition:color .6s var(--e)}
.holo3d.actif .morph-lbl{color:var(--iris1)}
/* l'objet reste sous les yeux pendant la transformation */
@media(min-width:1041px){
  .hero .hero-grid{align-items:start}
  .hero .hero-grid>div:last-child{position:sticky;top:calc(50vh - 265px)}
}
@media(max-width:1040px){.holo3d{margin:0 auto;max-width:360px}}
@media (prefers-reduced-motion:reduce){.holo3d-sol{animation:none}}

/* ══════════════ CONVERSION : ce qui fait rester et appeler ══════════════ */

/* la promesse chiffree, juste sous le titre */
.promesse{margin:18px 0 20px;padding:13px 18px;border-left:3px solid var(--or);
  background:linear-gradient(90deg,rgba(200,135,63,.09),rgba(200,135,63,0));
  font-size:1.02rem;line-height:1.62;color:var(--encre);max-width:60ch}
.promesse b{font-weight:700;white-space:nowrap}

/* bouton telephone : aussi visible que le bouton principal */
.btn-tel{position:relative;display:inline-flex;align-items:center;gap:9px;padding:16px 26px;
  border-radius:2px;font-size:.94rem;font-weight:700;font-family:inherit;
  border:1px solid var(--encre);background:var(--papier);color:var(--encre);
  transition:.4s var(--e);white-space:nowrap}
.btn-tel:hover{background:var(--encre);color:var(--papier)}
.btn-tel svg{flex-shrink:0}

/* signature : on achete a quelqu'un, pas a un site */
.hero-signe{display:flex;align-items:center;gap:12px;margin:18px 0 0;
  font-size:.95rem;color:var(--gris);line-height:1.5;max-width:52ch}
.hero-signe img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--blanc);box-shadow:0 2px 10px rgba(13,13,15,.14)}

/* telephone dans l'en-tete */
.entete-tel{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:100px;
  border:1px solid var(--trait);font-family:'JetBrains Mono',monospace;font-size:.82rem;
  font-weight:600;color:var(--encre);white-space:nowrap;transition:.35s var(--e)}
.entete-tel:hover{border-color:var(--or);color:var(--or);background:var(--blanc)}
.entete-tel svg{flex-shrink:0}
@media(max-width:1180px){.entete-tel span{display:none}
  .entete-tel{padding:9px 11px}}

/* barre d'action fixe : sur mobile, toujours a portee de pouce */
.barre-mobile{display:none}
@media(max-width:900px){
  .barre-mobile{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;
    position:fixed;left:0;right:0;bottom:0;z-index:300;padding:10px 12px
    calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(246,244,239,.94);backdrop-filter:blur(14px) saturate(150%);
    border-top:1px solid var(--trait)}
  .barre-mobile a{display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 10px;border-radius:2px;font-weight:700;font-size:.95rem;
    font-family:inherit;white-space:nowrap}
  .bm-tel{border:1px solid var(--encre);color:var(--encre);background:var(--papier)}
  .bm-devis{background:var(--encre);color:var(--papier)}
  /* la barre ne doit pas masquer le pied de page */
  footer{padding-bottom:96px}
}
@media(max-width:520px){
  .promesse{font-size:.96rem;padding:11px 14px}
  .btn-tel{width:100%;justify-content:center}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
}