/* Aivita — couche premium, 13 septembre 2026.
   Servie depuis ce serveur (CSP default-src 'self'). Aucune ressource tierce.
   Mouvement : chargement orchestré, révélations au défilement, schéma d'agents vivant,
   terminaux qui s'écrivent. Tout s'arrête si le visiteur a demandé moins de mouvement. */

@view-transition { navigation: auto; }
::view-transition-old(root){ animation: .28s cubic-bezier(.4,0,.2,1) both fondu-sortie; }
::view-transition-new(root){ animation: .42s cubic-bezier(.2,.7,.2,1) both fondu-entree; }
@keyframes fondu-sortie{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes fondu-entree{ from{ opacity:0; transform:translateY(8px) } }

html{ scroll-behavior:smooth }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:4px }

/* ── Navigation collante, verre fumé ── */
.nav{ position:sticky; top:0; z-index:40; background:rgba(13,9,24,.78);
      -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px);
      transition:box-shadow .3s ease }
.nav.defile{ box-shadow:0 10px 30px rgba(0,0,0,.35) }
.nav a{ position:relative; transition:color .25s ease }
.nav a:not(.cta)::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
      background:var(--or); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.nav a:not(.cta):hover::after{ transform:scaleX(1) }
.nav a[aria-current="page"]::after{ display:none }

/* ── Boutons : un reflet d'or qui passe ── */
.raccourci,.nav .cta{ position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, background .25s ease }
.raccourci::before{ content:""; position:absolute; inset:0; left:-60%; width:50%;
      background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
      transform:skewX(-18deg); transition:left .7s ease }
.raccourci:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(212,175,55,.22) }
.raccourci:hover::before{ left:120% }

/* ── Le chargement : le titre, puis le chapeau, puis le reste ── */
@keyframes monte{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.hero > *, .scene-texte > *{ animation:monte .9s cubic-bezier(.2,.7,.2,1) both }
.hero > *:nth-child(2), .scene-texte > *:nth-child(2){ animation-delay:.12s }
.hero > *:nth-child(3), .scene-texte > *:nth-child(3){ animation-delay:.24s }
.hero > *:nth-child(4), .scene-texte > *:nth-child(4){ animation-delay:.36s }
.hero > *:nth-child(5), .scene-texte > *:nth-child(5){ animation-delay:.48s }

/* ── Révélations au défilement (posées par premium.js, jamais sur ce qui est déjà à l'écran) ── */
.revele{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
.revele.vu{ opacity:1; transform:none }

/* ── Scène d'ouverture large : texte + visuel ── */
.scene{ max-width:1180px; margin:0 auto; padding:46px 24px 30px; display:grid;
        grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center }
.scene h1{ font-size:clamp(1.75rem,3.3vw,2.55rem); letter-spacing:0; line-height:1.18 }
.scene .chapo{ margin-bottom:26px }
.scene-visuel{ position:relative; animation:monte 1.1s .2s cubic-bezier(.2,.7,.2,1) both }
@media(max-width:900px){ .scene{ grid-template-columns:1fr; gap:30px; padding-top:30px } }

/* ── Photographie éditoriale ── */
.photo-premium{ position:relative; margin:40px auto; max-width:1180px; padding:0 24px }
.photo-premium .cadre{ position:relative; border-radius:18px; overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,.5); aspect-ratio:16/9; background:#120C1E }
.photo-premium img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06);
      transition:transform 1.6s cubic-bezier(.2,.7,.2,1) }
.photo-premium.vu img, .photo-premium:not(.revele) img{ transform:scale(1) }
.photo-premium .cadre::after{ content:""; position:absolute; inset:0;
      background:linear-gradient(180deg,transparent 55%,rgba(13,9,24,.72)) }
.photo-premium figcaption{ position:absolute; left:48px; right:48px; bottom:24px; z-index:1;
      font-family:Cinzel,Georgia,serif; color:var(--creme); font-size:clamp(1rem,2.2vw,1.35rem); line-height:1.35 }
.photo-premium figcaption small{ display:block; font-family:Montserrat,sans-serif; font-size:.74rem;
      color:rgba(237,231,218,.72); margin-top:6px; letter-spacing:.02em }
@media(max-width:600px){ .photo-premium .cadre{ aspect-ratio:4/3 } .photo-premium figcaption{ left:36px; right:36px; bottom:16px } }

/* ── L'orchestre : le schéma d'agents vivant, avec son interrupteur ── */
.orchestre{ position:relative; background:radial-gradient(120% 90% at 50% 40%,#1b1330 0%,#0a0714 70%);
      border:1px solid var(--bord); border-radius:20px; padding:18px 18px 16px;
      box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04) }
.orchestre svg{ display:block; width:100%; height:auto }
.orchestre .fil-lien{ stroke:rgba(212,175,55,.34); stroke-width:1.2; fill:none }
.orchestre .anneau{ fill:none; stroke:rgba(78,133,119,.55); stroke-width:1.2; stroke-dasharray:4 6 }
.orchestre .anneau-tourne{ transform-origin:260px 205px; animation:tourne 60s linear infinite }
@keyframes tourne{ to{ transform:rotate(360deg) } }
.orchestre .noeud rect, .orchestre .noeud circle.fond{ fill:#17102A; stroke:rgba(212,175,55,.55); stroke-width:1.2 }
.orchestre .coeur circle.fond{ fill:#221838; stroke:var(--or); stroke-width:1.6 }
.orchestre .coeur .pouls{ fill:none; stroke:var(--or); stroke-width:1; opacity:.6; transform-origin:260px 205px; animation:pouls 2.8s ease-out infinite }
@keyframes pouls{ from{ transform:scale(1); opacity:.55 } to{ transform:scale(1.7); opacity:0 } }
.orchestre text{ font-family:Montserrat,sans-serif; fill:var(--creme); font-size:12.5px; letter-spacing:.02em }
.orchestre text.titre{ font-family:Cinzel,Georgia,serif; font-size:14px; fill:var(--or); letter-spacing:.06em }
.orchestre text.petit{ font-size:10.5px; fill:var(--gris) }
.orchestre .paquet{ fill:var(--or) }
.orchestre .paquet.vert{ fill:#6FA697 }
.orchestre .bloque{ fill:#E08585 }
.orchestre .croix{ stroke:#E08585; stroke-width:1.6; opacity:0; animation:croix 3.6s ease-in-out infinite }
@keyframes croix{ 0%,62%{ opacity:0 } 70%,90%{ opacity:1 } 100%{ opacity:0 } }
.orchestre .pied{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 8px 2px; flex-wrap:wrap }
.orchestre .etat{ font-size:.84rem; color:var(--gris); min-height:1.3em; transition:color .3s ease }
.orchestre.arrete .etat{ color:var(--creme) }
.orchestre.arrete svg{ filter:grayscale(.85) brightness(.72); transition:filter .6s ease }
.orchestre svg{ transition:filter .6s ease }
.orchestre.arrete .pouls, .orchestre.arrete .anneau-tourne, .orchestre.arrete .croix{ animation-play-state:paused }

.interrupteur{ display:inline-flex; align-items:center; gap:12px; background:none; border:1px solid var(--bord);
      color:var(--creme); font:600 .86rem Montserrat,sans-serif; padding:7px 14px 7px 8px; border-radius:40px; cursor:pointer;
      transition:border-color .3s ease, background .3s ease }
.interrupteur:hover{ border-color:var(--or) }
.interrupteur .rail{ position:relative; width:46px; height:26px; border-radius:26px; background:var(--vert);
      box-shadow:inset 0 1px 3px rgba(0,0,0,.4); transition:background .35s ease }
.interrupteur .bille{ position:absolute; top:3px; left:23px; width:20px; height:20px; border-radius:50%;
      background:radial-gradient(circle at 35% 30%,#fff5cf,#D4AF37 55%,#9c7d1f); box-shadow:0 2px 6px rgba(0,0,0,.45);
      transition:left .35s cubic-bezier(.3,1.4,.5,1) }
.interrupteur[aria-pressed="false"] .rail{ background:#3a3150 }
.interrupteur[aria-pressed="false"] .bille{ left:3px }

/* ── Le terminal qui s'écrit ── */
.terminal{ background:#07050d; border:1px solid var(--bord); border-radius:14px; overflow:hidden;
      box-shadow:0 24px 60px rgba(0,0,0,.45); margin:28px 0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.terminal .barre{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:#140e22; border-bottom:1px solid var(--bord) }
.terminal .barre i{ width:10px; height:10px; border-radius:50%; background:#3a3150 }
.terminal .barre i:nth-child(1){ background:#C25A5A } .terminal .barre i:nth-child(2){ background:#D4AF37 } .terminal .barre i:nth-child(3){ background:#4E8577 }
.terminal .barre span{ margin-left:8px; font-size:.74rem; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.terminal pre{ margin:0; padding:18px 18px 20px; font-size:.8rem; line-height:1.75; color:#cfc7dd; white-space:normal; word-break:break-word }
.terminal .l{ display:block; white-space:pre-wrap; min-height:1.75em }
.terminal .p{ color:var(--or) }
.terminal .c{ color:#7d7394 }
.terminal .ok{ color:#6FA697 }
.terminal .ko{ color:#E08585 }
.terminal .curseur::after{ content:"▍"; color:var(--or); animation:clignote 1s steps(2) infinite }
@keyframes clignote{ 50%{ opacity:0 } }
.terminal.anime .l{ clip-path:inset(0 100% 0 0) }
.terminal.anime.vu .l{ animation:tape .7s steps(36) both; animation-delay:calc(var(--i,0) * .38s) }
@keyframes tape{ to{ clip-path:inset(0 0 0 0) } }

/* ── Avant / après, sans script ── */
.avant-apres{ margin:30px 0 }
.avant-apres input{ position:absolute; opacity:0; pointer-events:none }
.avant-apres .onglets{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--bord); border-radius:40px; background:var(--carte) }
.avant-apres label{ cursor:pointer; padding:8px 18px; border-radius:40px; font-size:.86rem; font-weight:600; color:var(--gris); transition:background .3s ease, color .3s ease }
.avant-apres #aa-avant:checked ~ .onglets label[for="aa-avant"]{ background:#C25A5A; color:#fff }
.avant-apres #aa-apres:checked ~ .onglets label[for="aa-apres"]{ background:var(--vert); color:#fff }
.avant-apres input:focus-visible ~ .onglets{ outline:2px solid var(--or); outline-offset:3px }
.avant-apres .vue{ display:none }
.avant-apres #aa-avant:checked ~ .vue-avant, .avant-apres #aa-apres:checked ~ .vue-apres{ display:block; animation:monte .5s cubic-bezier(.2,.7,.2,1) both }

/* ── Cartes d'offres : relief au survol ── */
.deux > div, .formules > div, .frise .jour{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease }
.deux > div:hover, .formules > div:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.28) }

/* ── Le sceau : la preuve écrite comme signature visuelle ── */
.sceau{ display:inline-flex; align-items:center; gap:10px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--or) }
.sceau::before{ content:""; width:22px; height:22px; border-radius:50%;
      background:radial-gradient(circle at 35% 30%,#e0876d,#B5543F 60%,#7e3526); box-shadow:0 2px 6px rgba(0,0,0,.4) }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .revele{ opacity:1; transform:none }
  .terminal.anime .l{ clip-path:none }
  .photo-premium img{ transform:none }
}

/* ── Largeur : l'en-tête et le menu s'alignent sur les scènes larges ── */
.haut > .wrap, .nav-in{ max-width:1180px }
.wrap:has(> .fil):has(+ .scene){ max-width:1180px }

/* ═══════════ Identité 13 sept : le sceau ouvert + la couleur agentique ═══════════ */
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg }
:root{ --menthe:#6FE3C1; --signal:#8B7CFF; --or-clair:#E8C766;
       --aurore:linear-gradient(120deg,#6FE3C1 0%,#8B7CFF 50%,#E8C766 100%) }

/* Le logo */
.marque{ display:inline-flex !important; align-items:center; gap:12px; letter-spacing:0 !important }
.marque .symbole{ width:36px; height:36px; flex-shrink:0; transition:transform .9s cubic-bezier(.3,1.4,.5,1) }
.marque:hover .symbole{ transform:rotate(-24deg) }
.marque .mot{ font-family:Cinzel,Georgia,serif; font-weight:600; font-size:1.3rem; letter-spacing:.2em; color:var(--creme) }
.marque .mot .i{ background:var(--aurore); -webkit-background-clip:text; background-clip:text; color:transparent }
.haut .groupe{ margin-left:48px }
@media(max-width:520px){ .marque .symbole{ width:30px; height:30px } .marque .mot{ font-size:1.1rem } .haut .groupe{ margin-left:42px } }

/* L'onglet vivant : un anneau de couleur qui tourne autour de l'appel principal */
.nav .nav-in .cta{ background:#120C1E; color:var(--creme); isolation:isolate; overflow:visible; border-radius:9px }
.nav .nav-in .cta::before{ content:""; position:absolute; inset:-1.5px; border-radius:10px; padding:1.5px; z-index:-1;
   background:conic-gradient(from var(--angle),var(--menthe),var(--signal),var(--or-clair),var(--menthe));
   -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
   animation:aura 5s linear infinite }
.nav .nav-in .cta::after{ content:""; position:absolute; inset:0; border-radius:9px; z-index:-2; background:#120C1E }
.nav .nav-in .cta:hover{ color:#fff; box-shadow:0 0 26px rgba(139,124,255,.38), 0 0 8px rgba(111,227,193,.25) }
@keyframes aura{ to{ --angle:360deg } }

/* Les onglets du menu : le soulignement prend la couleur des agents */
.nav a:not(.cta)::after{ background:var(--aurore); height:2px }
.nav a[aria-current="page"]{ border-bottom:0 !important; padding-bottom:4px !important;
   background:var(--aurore) bottom left / 100% 2px no-repeat }

/* Les boutons principaux */
.raccourci{ background-image:var(--aurore) !important; background-size:220% 100% !important; background-position:0% 50%;
   color:#0d0918 !important; transition:background-position .8s ease, transform .25s ease, box-shadow .25s ease }
.raccourci:hover{ background-position:100% 50%; box-shadow:0 14px 34px rgba(139,124,255,.3), 0 4px 12px rgba(111,227,193,.2) }
.bande.accent .raccourci{ background-image:none !important; background-color:#fff !important; color:var(--terre) !important }

/* Onglets avant / après, interrupteur, paquets : même famille de couleur */
.avant-apres #aa-apres:checked ~ .onglets label[for="aa-apres"]{ background:var(--aurore); color:#0d0918 }
.interrupteur .rail{ background:var(--aurore) }
.orchestre .paquet{ fill:var(--or-clair) }
.orchestre .paquet.vert{ fill:var(--menthe) }
.orchestre .coeur circle.fond{ stroke:var(--signal) }
.orchestre .coeur .pouls{ stroke:var(--signal) }

/* La banderole */
.banderole{ position:relative; overflow:hidden; padding:15px 0; margin:10px 0 0;
   border-block:1px solid transparent;
   border-image:linear-gradient(90deg,transparent,rgba(139,124,255,.55),rgba(111,227,193,.55),transparent) 1;
   background:linear-gradient(90deg,rgba(13,9,24,1),rgba(23,16,42,.9) 50%,rgba(13,9,24,1)) }
.banderole::before,.banderole::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:1; pointer-events:none }
.banderole::before{ left:0; background:linear-gradient(90deg,#0d0918,transparent) }
.banderole::after{ right:0; background:linear-gradient(270deg,#0d0918,transparent) }
.banderole .piste{ display:flex; width:max-content; animation:defile 42s linear infinite }
.banderole:hover .piste{ animation-play-state:paused }
.banderole ul{ display:flex; list-style:none; margin:0; padding:0 }
.banderole li{ display:flex; align-items:center; gap:22px; padding:0 22px 0 0; white-space:nowrap;
   font-family:Cinzel,Georgia,serif; font-size:.95rem; letter-spacing:.14em; color:var(--creme) }
.banderole li img{ width:18px; height:18px; opacity:.9 }
@keyframes defile{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .banderole .piste{ animation:none; flex-wrap:wrap; width:auto } .banderole ul[aria-hidden]{ display:none }
   .nav .nav-in .cta::before{ animation:none } }

/* ═══════════ Visage humain 13 sept : le portrait de la page À propos ═══════════ */

/* /a-propos et /en/about.html : le portrait à côté du texte « Qui fait le travail » */
.portrait-mel-titre{ scroll-margin-top:84px }
.portrait-mel-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,272px); gap:40px; align-items:start }
.portrait-mel-texte{ grid-column:1; grid-row:1; min-width:0 }
.portrait-mel-texte > *:last-child{ margin-bottom:0 }
.portrait-mel{ grid-column:2; grid-row:1; margin:6px 12px 0 0 }
/* Le cadre : un fin liseré au dégradé agentique, coins arrondis, ombre douce. Aucun filtre sur l'image.
   Les deux premières ombres dessinent un second liseré d'or décalé (l'écho d'un passe-partout),
   visible seulement à droite et en bas, sans élément de plus. */
.portrait-mel-cadre{ position:relative; padding:1.5px; border-radius:18px; background:var(--aurore);
   box-shadow:0 0 42px rgba(139,124,255,.14), 12px 12px 0 -1px var(--nuit), 12px 12px 0 0 rgba(212,175,55,.42), 0 26px 60px rgba(0,0,0,.5) }
.portrait-mel-cadre picture{ display:block; border-radius:16.5px; overflow:hidden; background:#120C1E }
.portrait-mel-cadre img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.portrait-mel figcaption{ display:flex; align-items:center; gap:10px; margin-top:26px; line-height:1.3;
   font-family:Cinzel,Georgia,serif; font-weight:600; font-size:.92rem; letter-spacing:.08em; color:var(--creme) }
.portrait-mel figcaption::before{ content:""; flex:none; width:22px; height:2px; border-radius:2px; background:var(--aurore) }
@media(max-width:719px){
  .portrait-mel-titre{ scroll-margin-top:124px }
  .portrait-mel-grille{ grid-template-columns:1fr; gap:26px }
  .portrait-mel{ grid-column:1; width:min(100% - 12px, 340px); margin:0 auto }
  .portrait-mel-texte{ grid-row:2 }
}
/* Révélation du portrait : confiée à premium.js (seulement sous la ligne de flottaison) */

/* ── Correctif 13 sept : overflow-x:hidden sur html/body faisait du body un conteneur de défilement,
   ce qui cassait le menu collant et les animations liées au défilement. « clip » coupe le débordement
   sans créer de conteneur. ── */
html, body{ overflow-x:clip }