/* =====================================================================
   Maison INVICTA — « Le fil d'or » (couche d'expérience)
   Actif seulement avec html.mi-magic (posée par magic.js).
   ===================================================================== */

/* Logo SVG : mêmes dimensions que les PNG */
.mi-emblem{overflow:visible}
.mi-emblem.hero-emblem{width:clamp(120px,18vw,168px);height:auto;display:block;margin-inline:auto}
.mi-wordmark.hero-wordmark{width:min(560px,82vw);height:auto;display:block;margin:40px auto 18px;overflow:visible}
.mi-emblem.finale-emblem{width:clamp(104px,11vw,136px);height:auto;margin-bottom:14px}
.mi-emblem path,.mi-emblem line,.mi-wordmark path,.mi-wordmark line{will-change:transform,opacity}

/* Avant l'ouverture : rien ne clignote */
.mi-intro .hero .wrap>*,.mi-intro #bar,.mi-intro .mi-thread{opacity:0}
.mi-magic .hero .emblem,.mi-magic .hero .wordmark,.mi-magic .hero .label,.mi-magic .hero h1,.mi-magic .hero .lede{animation:none}

/* Fonds de nuit transparents : le ciel étoilé passe derrière */
.mi-sky{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
.mi-magic .mi-sky{display:block}
.mi-magic main{position:relative;z-index:1}
.mi-magic footer{position:relative;z-index:1}
.mi-magic .hero{background:radial-gradient(ellipse at 50% 30%,rgba(0,58,71,.85) 0%,rgba(12,27,44,0) 62%)}
.mi-magic .finally{background:radial-gradient(ellipse at 50% 20%,rgba(0,58,71,.8) 0%,rgba(12,27,44,0) 60%)}
.mi-magic .band{background:rgba(19,34,51,.55)}
.mi-magic .contact-sec{background:rgba(19,34,51,.6)}

/* Indice de défilement */
.hero{position:relative}
.hero-scroll{display:none}
.mi-magic .hero-scroll{display:block;position:absolute;left:50%;bottom:28px;width:1px;height:54px;background:var(--ivory-faint);overflow:hidden}
.mi-magic .hero-scroll span{position:absolute;left:-1px;top:-10px;width:3px;height:10px;border-radius:2px;background:var(--gold);animation:mi-cue 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes mi-cue{0%{transform:translateY(0)}70%,100%{transform:translateY(70px)}}

/* Le fil d'or */
.mi-thread{position:absolute;left:0;top:0;z-index:5;pointer-events:none;overflow:visible;display:none}
.mi-magic .mi-thread{display:block}
.mi-thread-path{fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .8s}
.mi-thread-tip{fill:var(--glow);opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 4px rgba(202,164,117,.95)) drop-shadow(0 0 12px rgba(175,145,56,.8))}
.mi-thread-dot{fill:var(--night);stroke:var(--gold);stroke-width:1;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .9s cubic-bezier(.3,1.6,.5,1),fill .6s}
.mi-thread-dot.on{transform:scale(1);fill:var(--gold)}
@media (max-width:820px){.mi-thread-dot{r:2.4px}}

/* Les filets remplacés par le fil */
.mi-magic .verdict,.mi-magic .timeline{border-top-color:transparent!important;background:none!important}

/* Bandeau : la partie dorée s'illumine quand le fil la souligne */
.band .big em{transition:text-shadow 1.2s,color 1.2s}
.band .big em.lit{text-shadow:0 0 28px rgba(175,145,56,.45)}
.finally .plan{transition:text-shadow 1.2s,opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.finally .plan.lit{text-shadow:0 0 28px rgba(175,145,56,.4)}

/* Ligne du temps : « Avec une Maison » s'allume */
.timeline>div:not(.without){transition:opacity .8s}
.mi-magic .timeline>div:not(.without) .label{transition:color .8s}
.mi-magic .timeline>div.lit .label{color:var(--gold-deep)}
.mi-magic .timeline .without{opacity:.55}

/* Sections papier : ouverture en cercle (la figure de la Maison) */
.mi-magic .questions,.mi-magic .continuity{clip-path:circle(var(--r,150%) at 50% 0%)}

/* Mots qui s'allument */
.mi-word{will-change:opacity}
.mi-line{padding-bottom:.06em}

/* Grand mot INVICTA en profondeur */
.why{position:relative;overflow:hidden}
.why .wrap{position:relative;z-index:1}
.why-giant{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:0;pointer-events:none;white-space:nowrap;line-height:.8}
.why-giant span{display:inline-block;font-family:var(--display);font-size:clamp(9rem,30vw,30rem);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);padding-left:20vw}

/* Principes : titre fixe à gauche, chiffres romains */
.numeral{display:block;font-family:var(--accent);font-size:1.7rem;line-height:1;color:var(--gold);letter-spacing:.04em;margin-bottom:12px}
@media (min-width:980px){
  .principles .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,6vw,96px);align-items:start}
  .principles .phead{position:sticky;top:130px}
  .principles .plist{grid-template-columns:minmax(0,1fr);margin-top:0}
  .principles .plist article{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px;padding-block:40px}
  .principles .plist article .numeral{grid-row:span 2;margin:4px 0 0}
  .principles .plist article h3,.principles .plist article p{grid-column:2}
}

/* Domaines : halo doré qui suit la souris + étoile au survol */
.dgrid{position:relative}
.dgrid::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(280px circle at var(--mx,-999px) var(--my,-999px),rgba(175,145,56,.11),transparent 70%);opacity:0;transition:opacity .5s}
.dgrid:hover::after{opacity:1}
.dgrid li h3{transition:color .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.dgrid li:hover h3{color:var(--gold);transform:translateX(6px)}

/* Images d'ambiance (bichromie nuit/or, profondeur) */
.hero,.band,.finally{overflow:hidden}
.ambience{position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 25%,transparent 78%)}
.ambience__img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.1) brightness(.75);opacity:.28;mix-blend-mode:luminosity}
.ambience::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(175,145,56,.18),rgba(12,27,44,.4) 60%);mix-blend-mode:soft-light}

/* Curseur */
.mi-cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .4s}
.mi-cursor.on{opacity:1}
.mi-cursor__ring,.mi-cursor__dot{position:absolute;left:0;top:0;border-radius:50%}
.mi-cursor__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.35);transition:width .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1),margin .5s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s}
.mi-cursor__dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--gold)}
.mi-cursor.hot .mi-cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--gold);background:rgba(175,145,56,.06)}
.mi-cursor.paper .mi-cursor__ring{border-color:rgba(12,27,44,.35)}
.mi-cursor.paper.hot .mi-cursor__ring{border-color:var(--gold-deep)}
@media (pointer:fine){.mi-magic,.mi-magic a,.mi-magic button{cursor:none}.mi-magic input,.mi-magic textarea{cursor:text}}

@media print{.mi-sky,.mi-thread,.mi-cursor,.why-giant,.hero-scroll,.ambience{display:none!important}.mi-magic .questions,.mi-magic .continuity{clip-path:none}}

/* Photo d'ambiance présente : on retire la texture de la section (une seule matière à la fois) */
.band:has(.ambience)::after,.contact-sec:has(.ambience)::after,.finally:has(.ambience)::after{display:none}

/* Réglages par emplacement */
.ambience__img{opacity:.34}
.ambience--hero .ambience__img{opacity:.42;background-position:50% 40%}
.ambience--band{-webkit-mask-image:radial-gradient(ellipse 60% 75% at 68% 50%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 60% 75% at 68% 50%,#000 25%,transparent 80%)}
.ambience--band .ambience__img{opacity:.36;background-position:50% 50%;left:30%}
.ambience--finally{inset:-10% 0 -18%;-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 72%,#000 30%,transparent 82%);mask-image:radial-gradient(ellipse 80% 55% at 50% 72%,#000 30%,transparent 82%)}
.ambience--finally .ambience__img{opacity:.5;background-size:165% auto;background-position:38% 52%;filter:grayscale(1) contrast(1.1) brightness(.85)}
@media (max-width:820px){.ambience--finally .ambience__img{background-size:cover;background-position:42% 52%}}
@media (max-width:820px){.ambience--band .ambience__img{left:0}}

/* « Enfin » : paysage en profondeur (5 calques) */
.ambience--layers{opacity:1}
.ambience--layers .ambience__layer{filter:grayscale(.9) contrast(1.05) brightness(.8)}
/* Voile bleu de marque : l'image passe au second plan, le texte respire */
.ambience--layers::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:normal;
  background:radial-gradient(ellipse 70% 45% at 50% 38%,rgba(12,27,44,.78) 0%,rgba(12,27,44,.62) 55%,rgba(12,27,44,.5) 100%),linear-gradient(180deg,rgba(0,58,71,.18),rgba(12,27,44,.1))}
.ambience__layer{position:absolute;inset:-4% -3%;background-repeat:no-repeat;background-size:108% auto;background-position:50% 100%;will-change:transform}
.ambience__layer--3-meute{background-size:86% auto;background-position:50% 78%}
.ambience--layers .ambience__layer--3-meute{filter:grayscale(.9) brightness(1.15) contrast(1.12)}
@media (max-width:820px){.ambience__layer{background-size:auto 70%;background-position:42% 80%}.ambience__layer--3-meute{background-size:auto 58%;background-position:46% 74%}}

/* Ouverture adaptée à la hauteur de l'écran (iPad en paysage, petits portables) */
.mi-emblem.hero-emblem{width:clamp(96px,min(18vw,17vh),168px)}
.mi-wordmark.hero-wordmark{width:min(560px,82vw,64vh);margin:clamp(20px,4vh,40px) auto clamp(12px,2vh,18px)}
/* Grand « INVICTA » en filigrane : typographie de l'identité */
.why-giant span{font-family:var(--accent);letter-spacing:.06em}
.mi-magic .hero-scroll{bottom:clamp(12px,2.4vh,28px);height:clamp(30px,5vh,54px)}

/* Logotype : sur les écrans non Retina, l'anneau ivoire intérieur de l'emblème (≈ 0,7 px) se fond
   en gris flou contre l'anneau doré ; on l'épaissit d'un cheveu pour qu'il reste net. */
@media (max-resolution:1.5dppx),(-webkit-max-device-pixel-ratio:1.5){
  .mi-wordmark .em-inner{stroke:var(--mi-ivory,#fff);stroke-width:.3}
}