@font-face{font-family:'Space Grotesk';font-weight:300 700;font-display:swap;
  src:url(polices/space-grotesk-latin-98a0d4.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-weight:300 700;font-display:swap;
  src:url(polices/space-grotesk-latin-ext-cc7d24.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --fond:#070C16; --panneau:#0B1220; --arete:#1543AC; --vive:#5380EA; --violet:#6115AC; --violet-clair:#B57DF0;
  --rasante:rgba(145,198,255,.16); --texte:#C6D6EC; --clair:#E8F2FF; --faible:#7F95B5; --lien:#8FB0FF;
}
*{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.65 'Space Grotesk',Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--lien);text-decoration:none}
a:hover{text-decoration:underline}
.page{max-width:1180px;margin:0 auto;padding:0 32px}
.caps{text-transform:uppercase;letter-spacing:.32em;font-size:12px;color:var(--faible)}
#ciel{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ── bandeau ── */
header{position:sticky;top:0;z-index:10;background:rgba(7,12,22,.82);backdrop-filter:blur(10px);box-shadow:inset 0 -1px 0 var(--rasante)}
header .page{display:flex;align-items:center;justify-content:space-between;height:68px}
.marque{display:flex;align-items:center;gap:14px;color:var(--clair)}
.marque:hover{text-decoration:none}
.marque img{width:40px;height:40px}
.marque b{font-weight:500;font-size:20px;letter-spacing:.42em}
/* Le geste du menu de METACUBE : le mot survolé prend la lumière (lueur,
   rasante sous le mot) et un reflet le traverse une fois. Rien ne se remplit. */
nav a{margin-left:18px;padding:7px 12px;position:relative;overflow:hidden;display:inline-block;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--texte);
  transition:color .16s,box-shadow .16s,text-shadow .16s}
nav a:hover{color:#eaf4ff;text-decoration:none;text-shadow:0 0 14px rgba(145,198,255,.55);
  box-shadow:inset 0 -1px 0 rgba(145,198,255,.5),inset 0 1px 0 rgba(198,228,255,.10),0 0 24px rgba(105,170,255,.20)}
nav a::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-125%);
  background:linear-gradient(104deg,transparent 32%,rgba(198,228,255,.30) 47%,rgba(145,198,255,.10) 56%,transparent 74%)}
nav a:hover::after{opacity:1;animation:fam-reflet .55s cubic-bezier(.3,0,.2,1) forwards}
@keyframes fam-reflet{from{transform:translateX(-125%)}to{transform:translateX(125%)}}
@media (prefers-reduced-motion:reduce){nav a:hover::after{animation:none;opacity:0}}

/* ── ouverture ── */
.ouverture{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;min-height:calc(100vh - 68px);padding:30px 0}
.ouverture h1{margin:18px 0 24px;font-weight:400;font-size:46px;line-height:1.16;color:var(--clair)}
.ouverture h1 span{color:#fff}
.ouverture p{max-width:580px;margin:0 0 16px;font-size:17px}
.ouverture .piliers{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 32px;padding:0;list-style:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faible)}
.ouverture .piliers li{padding-left:12px;border-left:2px solid var(--arete)}
.astre{position:relative;justify-self:center;width:100%;max-width:470px;aspect-ratio:1}
.astre .coeur{position:absolute;inset:14%;background:url(img/ifc_embleme.png) center/cover;
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 71%);mask-image:radial-gradient(circle,#000 55%,transparent 71%)}
.astre .orbite{position:absolute;inset:0;border:1px solid rgba(83,128,234,.22);border-radius:50%;animation:tour 38s linear infinite}
.astre .orbite:nth-child(2){inset:6%;border-color:rgba(97,21,172,.35);animation-duration:26s;animation-direction:reverse;transform:rotateX(62deg)}
.astre .orbite:nth-child(3){inset:-4%;border-style:dashed;border-color:rgba(83,128,234,.12);animation-duration:60s}
.astre .orbite i{position:absolute;top:-4px;left:50%;width:7px;height:7px;background:var(--vive);border-radius:50%;box-shadow:0 0 12px var(--vive)}
.astre .orbite:nth-child(2) i{background:var(--violet-clair);box-shadow:0 0 12px var(--violet-clair)}
@keyframes tour{to{transform:rotate(360deg)}}
.astre .orbite:nth-child(2){animation-name:tour2}
@keyframes tour2{from{transform:rotateX(62deg) rotate(0)}to{transform:rotateX(62deg) rotate(-360deg)}}
.boutons{display:flex;gap:14px;flex-wrap:wrap}
.bouton{display:inline-block;padding:12px 22px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--clair);
  border:1px solid var(--arete);background:var(--panneau);box-shadow:inset 2px 0 0 var(--vive)}
.bouton:hover{text-decoration:none;border-color:var(--vive);box-shadow:inset 2px 0 0 var(--vive),0 0 18px rgba(83,128,234,.35)}
.bouton.discret{background:transparent;box-shadow:none;border-color:rgba(83,128,234,.35)}

/* ── sections ── */
section{padding:96px 0;box-shadow:inset 0 1px 0 var(--rasante)}
.titre{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.titre h2{margin:0;font-weight:500;font-size:28px;letter-spacing:.34em;text-transform:uppercase;color:var(--clair)}
.titre hr{flex:1;height:1px;border:0;background:linear-gradient(90deg,var(--arete),transparent)}
.chapeau{max-width:760px;margin:0 0 44px;font-size:17px}

/* LE LISERÉ GLISSANT — le bleu arête et le violet profond, 1 px, qui tourne
   autour de la carte survolée (même trait que les cases du schéma de ƒa21). */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.carte{position:relative;padding:26px 24px;background:var(--panneau);border:1px solid rgba(21,67,172,.55)}
.carte::after{content:'';position:absolute;inset:-1px;padding:1px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:conic-gradient(from var(--a),transparent 0 62%,#1543AC 72%,#6115AC 86%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.carte:hover::after{opacity:1;animation:liseret 1.8s linear infinite}
@keyframes liseret{to{--a:360deg}}
@media (prefers-reduced-motion:reduce){.carte:hover::after{animation:none;background:#1543AC}.astre .orbite{animation:none}}
.carte h3{margin:0 0 10px;font-weight:500;font-size:17px;color:var(--clair)}
.carte p{margin:0;font-size:14.5px}
.carte .n{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.28em;color:var(--violet-clair)}

/* METACUBE */
.produit{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.formule{margin:0 0 22px;padding-left:18px;border-left:2px solid var(--vive);font-size:24px;line-height:1.35;color:var(--clair)}
.produit p{margin:0 0 16px}
.video{position:relative;aspect-ratio:16/9;border:1px solid var(--arete);background:#000;box-shadow:0 0 60px rgba(21,67,172,.25)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fonctions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.avenir{display:flex;align-items:center;flex-wrap:wrap;gap:10px 26px;margin-top:22px;padding:16px 22px;border:1px dashed rgba(97,21,172,.55)}
.avenir ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte)}
.avenir li{padding-left:12px;border-left:2px solid var(--violet)}
.forces{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:56px;background:var(--arete)}
.force{padding:26px 22px;background:var(--panneau)}
.force b{display:block;margin-bottom:8px;font-weight:500;font-size:30px;color:var(--clair)}
.force span{font-size:14px}
.assistant{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;margin-top:56px;padding:34px 40px;
  background:var(--panneau);border:1px solid var(--arete);box-shadow:inset 2px 0 0 var(--vive)}
/* La sphère de l'assistant, dessinée par assistant.js avec le dessin du produit. */
.assistant .presence{display:block;width:170px;height:170px;
  -webkit-mask-image:radial-gradient(circle,#000 45%,transparent 70%);mask-image:radial-gradient(circle,#000 45%,transparent 70%)}
.assistant .apprend{margin:4px 0 14px;padding-left:14px;border-left:2px solid var(--violet-clair);font-size:17px;color:var(--clair)}
.assistant h3{margin:6px 0 12px;font-weight:500;font-size:24px;color:var(--clair)}
.assistant p{margin:0 0 12px;font-size:15px}
.pour{margin-top:36px;font-size:15px;color:var(--faible)}
.pour strong{color:var(--texte);font-weight:500}

/* SERVICES */
.poles{display:grid;grid-template-columns:1fr 1.6fr;gap:28px;align-items:start}
.pole{padding:30px 30px 26px;background:linear-gradient(180deg,rgba(11,18,32,.95),rgba(11,18,32,.7));border:1px solid rgba(21,67,172,.5)}
.pole>h3{margin:0 0 6px;font-weight:500;font-size:20px;color:var(--clair)}
.pole>.caps{display:block;margin-bottom:18px}
.pole ul{margin:0;padding:0;list-style:none}
.pole li{position:relative;padding:9px 0 9px 18px;font-size:14.5px;box-shadow:inset 0 -1px 0 rgba(145,198,255,.07)}
.pole li::before{content:'';position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--vive)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.badge{padding:6px 10px;font-size:11.5px;letter-spacing:.08em;color:var(--clair);border:1px solid rgba(97,21,172,.7);background:rgba(97,21,172,.14)}
.grille-ifc{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* MÉTHODE */
.principes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* FONDATEUR / CONTACT */
.fondateur{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.qui{padding-left:18px;border-left:2px solid var(--vive)}
.qui b{display:block;font-weight:500;font-size:22px;color:var(--clair)}
.coord{font-size:18px;line-height:2}
.horaires{display:inline-block;margin:14px 0 6px;padding:10px 18px;border:1px solid var(--arete);background:var(--panneau);font-size:15px;line-height:1.7}
.horaires b{display:block;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--clair)}
.linkedin{display:inline-flex;vertical-align:middle;color:var(--texte);transition:color .16s,filter .16s}
.linkedin:hover{color:var(--clair);filter:drop-shadow(0 0 8px rgba(145,198,255,.55))}
footer{padding:30px 0 40px;box-shadow:inset 0 1px 0 var(--rasante);font-size:12px;color:var(--faible)}
footer .page{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}


/* ── DEUX CHARTES — 03/10/2026 ──────────────────────────────────────────────
   IFC (conseil, sous-traitance ERP, développement) : fond blanc, texte bleu.
   METACUBE garde la nuit bleue : sa section est une bande sombre pleine
   largeur, où le ciel étoilé reste visible. Les composants lisent les mêmes
   jetons ; .clair les redéfinit. */
.clair{--fond:#FFFFFF; --panneau:#F3F6FC; --arete:#1543AC; --vive:#2F62D8; --violet-clair:#6115AC;
  --rasante:rgba(21,67,172,.12); --texte:#22385F; --clair:#0B2E7A; --faible:#5F7396; --lien:#1543AC;
  color:var(--texte)}
/* Pleine largeur : le fond déborde de la colonne de 1180 px jusqu'aux bords. */
.pleine{position:relative;background:var(--fond);box-shadow:0 0 0 100vmax var(--fond);clip-path:inset(0 -100vmax)}
section.pleine{box-shadow:0 0 0 100vmax var(--fond),inset 0 1px 0 var(--rasante)}
header.clair{background:rgba(255,255,255,.92);box-shadow:inset 0 -1px 0 var(--rasante)}
.clair .marque img{border-radius:50%}
.clair nav a:hover{color:var(--arete);text-shadow:none;box-shadow:inset 0 -1px 0 var(--arete)}
.clair nav a::after{background:linear-gradient(104deg,transparent 32%,rgba(21,67,172,.12) 47%,transparent 74%)}
.ouverture.clair h1 span{color:var(--arete)}
.clair .carte{border-color:rgba(21,67,172,.22)}
.clair .pole{background:var(--panneau);border-color:rgba(21,67,172,.22)}
.clair .pole li{box-shadow:inset 0 -1px 0 rgba(21,67,172,.10)}
.clair .badge{background:rgba(97,21,172,.07);border-color:rgba(97,21,172,.35)}
.clair .bouton{box-shadow:inset 2px 0 0 var(--vive)}
.clair .bouton:hover{box-shadow:inset 2px 0 0 var(--vive),0 0 14px rgba(21,67,172,.18)}
footer.clair{background:#fff}
/* La bande METACUBE : sombre, le ciel passe à travers. */
#metacube{box-shadow:inset 0 1px 0 var(--rasante)}

.trait{padding-bottom:2px;border-bottom:1px solid var(--vive);color:var(--clair)}
/* apparition au défilement */
.monte{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.monte.vu{opacity:1;transform:none}

@media (max-width:980px){
  .ouverture,.produit,.poles,.fondateur{grid-template-columns:1fr}
  .ouverture{min-height:0;padding-top:40px}
  .astre{max-width:320px;order:-1}
  .fonctions,.forces,.principes{grid-template-columns:1fr 1fr}
  .assistant{grid-template-columns:1fr;padding:26px}
  .ouverture h1{font-size:34px}
  nav a{margin-left:6px}
}
@media (max-width:600px){
  .page{padding:0 16px}
  nav{display:none}
  .fonctions,.forces,.principes,.grille-ifc{grid-template-columns:1fr}
  .titre h2{font-size:20px;letter-spacing:.22em}
  section{padding:64px 0}
}

/* ── UNE PAGE PAR ONGLET — 23/10/2026 ──────────────────────────────────────
   L'onglet de la page ouverte reste allumé : on sait où l'on est.
   L'accueil est en nuit bleue et ouvre cinq portes, une par page. */
nav a.ici{color:var(--clair);box-shadow:inset 0 -1px 0 var(--vive)}
.clair nav a.ici{color:var(--arete);box-shadow:inset 0 -1px 0 var(--arete)}
body.clair{background:#fff}
/* Le pied de page reste en bas de l'écran même quand la page est courte. */
body{display:flex;flex-direction:column;min-height:100vh}
body>main{flex:1 0 auto;width:100%}
body.clair #ciel{display:none}
main.seule section:first-child{padding-top:64px}
.accueil{display:flex;flex-direction:column;justify-content:center;gap:26px;min-height:calc(100vh - 68px - 92px);padding:14px 32px 18px}
.accueil .ouverture{min-height:0;padding:0;grid-template-columns:1.5fr 1fr}
.accueil .ouverture h1{font-size:40px;margin:14px 0 18px}
.accueil .ouverture .piliers{margin:16px 0 24px}
.portes .carte p{font-size:14px}
.accueil .astre{max-width:330px}
.portes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
a.porte{display:flex;flex-direction:column;color:var(--texte)}
a.porte:hover{text-decoration:none}
a.porte h3{letter-spacing:.2em;text-transform:uppercase;font-size:15px}
a.porte p{flex:1}
a.porte .aller{margin-top:16px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--vive);transition:transform .2s}
a.porte:hover .aller{transform:translateX(6px)}
@media (max-width:980px){.portes{grid-template-columns:1fr 1fr}.accueil .ouverture{grid-template-columns:1fr}}
@media (max-width:600px){.portes{grid-template-columns:1fr}.accueil{padding:28px 16px 36px}.accueil .astre{max-width:180px}.accueil .ouverture h1{font-size:30px}}

/* ── LE LIN SEMÉ DE LYS — 24/10/2026 ───────────────────────────────────────
   Les pages d'IFC quittent le blanc pour un fond lin, semé de petites fleurs
   de lys en relief, ton sur ton (Aurélien : « trop blanc », « plus
   chaleureux », « pars sur le semis fin »). METACUBE garde sa nuit bleue.
   Le semis est fixé à l'écran : la bande pleine largeur et le corps de la
   page le montrent sans raccord. */
.clair{--fond:#F3ECE0; --panneau:#E8DECB;
  --lys:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2256%22%3E%3Cg%20transform%3D%22translate%281.0%201.0%29%22%3E%3Cg%20transform%3D%22translate%284.0%204.0%29%20scale%280.5%29%22%20fill%3D%22rgba%28110%2C84%2C50%2C.20%29%22%3E%3Cpath%20d%3D%22M20%201C25%207%2027%2014%2023.5%2022H16.5C13%2014%2015%207%2020%201Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2022C11%2022.5%205%2020.5%203%2014.5C1.8%2010.5%204.5%206.8%208.5%208C6.5%2010.5%207.5%2014.5%2011.5%2016.5C14%2017.8%2016%2019%2016.5%2022Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2022C29%2022.5%2035%2020.5%2037%2014.5C38.2%2010.5%2035.5%206.8%2031.5%208C33.5%2010.5%2032.5%2014.5%2028.5%2016.5C26%2017.8%2024%2019%2023.5%2022Z%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2222.6%22%20width%3D%2215%22%20height%3D%223.2%22%20rx%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M17%2026.4C15.5%2030.5%2012.5%2033%209%2034C13.5%2035.5%2017.5%2033.5%2020%2029.5C22.5%2033.5%2026.5%2035.5%2031%2034C27.5%2033%2024.5%2030.5%2023%2026.4Z%22%2F%3E%3Cpath%20d%3D%22M18.6%2026.4H21.4L20%2038Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-0.6%20-0.6%29%22%3E%3Cg%20transform%3D%22translate%284.0%204.0%29%20scale%280.5%29%22%20fill%3D%22rgba%28255%2C255%2C255%2C.55%29%22%3E%3Cpath%20d%3D%22M20%201C25%207%2027%2014%2023.5%2022H16.5C13%2014%2015%207%2020%201Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2022C11%2022.5%205%2020.5%203%2014.5C1.8%2010.5%204.5%206.8%208.5%208C6.5%2010.5%207.5%2014.5%2011.5%2016.5C14%2017.8%2016%2019%2016.5%2022Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2022C29%2022.5%2035%2020.5%2037%2014.5C38.2%2010.5%2035.5%206.8%2031.5%208C33.5%2010.5%2032.5%2014.5%2028.5%2016.5C26%2017.8%2024%2019%2023.5%2022Z%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2222.6%22%20width%3D%2215%22%20height%3D%223.2%22%20rx%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M17%2026.4C15.5%2030.5%2012.5%2033%209%2034C13.5%2035.5%2017.5%2033.5%2020%2029.5C22.5%2033.5%2026.5%2035.5%2031%2034C27.5%2033%2024.5%2030.5%2023%2026.4Z%22%2F%3E%3Cpath%20d%3D%22M18.6%2026.4H21.4L20%2038Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%284.0%204.0%29%20scale%280.5%29%22%20fill%3D%22%23F3ECE0%22%3E%3Cpath%20d%3D%22M20%201C25%207%2027%2014%2023.5%2022H16.5C13%2014%2015%207%2020%201Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2022C11%2022.5%205%2020.5%203%2014.5C1.8%2010.5%204.5%206.8%208.5%208C6.5%2010.5%207.5%2014.5%2011.5%2016.5C14%2017.8%2016%2019%2016.5%2022Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2022C29%2022.5%2035%2020.5%2037%2014.5C38.2%2010.5%2035.5%206.8%2031.5%208C33.5%2010.5%2032.5%2014.5%2028.5%2016.5C26%2017.8%2024%2019%2023.5%2022Z%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2222.6%22%20width%3D%2215%22%20height%3D%223.2%22%20rx%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M17%2026.4C15.5%2030.5%2012.5%2033%209%2034C13.5%2035.5%2017.5%2033.5%2020%2029.5C22.5%2033.5%2026.5%2035.5%2031%2034C27.5%2033%2024.5%2030.5%2023%2026.4Z%22%2F%3E%3Cpath%20d%3D%22M18.6%2026.4H21.4L20%2038Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%281.0%201.0%29%22%3E%3Cg%20transform%3D%22translate%2832.0%2032.0%29%20scale%280.5%29%22%20fill%3D%22rgba%28110%2C84%2C50%2C.20%29%22%3E%3Cpath%20d%3D%22M20%201C25%207%2027%2014%2023.5%2022H16.5C13%2014%2015%207%2020%201Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2022C11%2022.5%205%2020.5%203%2014.5C1.8%2010.5%204.5%206.8%208.5%208C6.5%2010.5%207.5%2014.5%2011.5%2016.5C14%2017.8%2016%2019%2016.5%2022Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2022C29%2022.5%2035%2020.5%2037%2014.5C38.2%2010.5%2035.5%206.8%2031.5%208C33.5%2010.5%2032.5%2014.5%2028.5%2016.5C26%2017.8%2024%2019%2023.5%2022Z%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2222.6%22%20width%3D%2215%22%20height%3D%223.2%22%20rx%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M17%2026.4C15.5%2030.5%2012.5%2033%209%2034C13.5%2035.5%2017.5%2033.5%2020%2029.5C22.5%2033.5%2026.5%2035.5%2031%2034C27.5%2033%2024.5%2030.5%2023%2026.4Z%22%2F%3E%3Cpath%20d%3D%22M18.6%2026.4H21.4L20%2038Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-0.6%20-0.6%29%22%3E%3Cg%20transform%3D%22translate%2832.0%2032.0%29%20scale%280.5%29%22%20fill%3D%22rgba%28255%2C255%2C255%2C.55%29%22%3E%3Cpath%20d%3D%22M20%201C25%207%2027%2014%2023.5%2022H16.5C13%2014%2015%207%2020%201Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2022C11%2022.5%205%2020.5%203%2014.5C1.8%2010.5%204.5%206.8%208.5%208C6.5%2010.5%207.5%2014.5%2011.5%2016.5C14%2017.8%2016%2019%2016.5%2022Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2022C29%2022.5%2035%2020.5%2037%2014.5C38.2%2010.5%2035.5%206.8%2031.5%208C33.5%2010.5%2032.5%2014.5%2028.5%2016.5C26%2017.8%2024%2019%2023.5%2022Z%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2222.6%22%20width%3D%2215%22%20height%3D%223.2%22%20rx%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M17%2026.4C15.5%2030.5%2012.5%2033%209%2034C13.5%2035.5%2017.5%2033.5%2020%2029.5C22.5%2033.5%2026.5%2035.5%2031%2034C27.5%2033%2024.5%2030.5%2023%2026.4Z%22%2F%3E%3Cpath%20d%3D%22M18.6%2026.4H21.4L20%2038Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2832.0%2032.0%29%20scale%280.5%29%22%20fill%3D%22%23F3ECE0%22%3E%3Cpath%20d%3D%22M20%201C25%207%2027%2014%2023.5%2022H16.5C13%2014%2015%207%2020%201Z%22%2F%3E%3Cpath%20d%3D%22M16.5%2022C11%2022.5%205%2020.5%203%2014.5C1.8%2010.5%204.5%206.8%208.5%208C6.5%2010.5%207.5%2014.5%2011.5%2016.5C14%2017.8%2016%2019%2016.5%2022Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2022C29%2022.5%2035%2020.5%2037%2014.5C38.2%2010.5%2035.5%206.8%2031.5%208C33.5%2010.5%2032.5%2014.5%2028.5%2016.5C26%2017.8%2024%2019%2023.5%2022Z%22%2F%3E%3Crect%20x%3D%2212.5%22%20y%3D%2222.6%22%20width%3D%2215%22%20height%3D%223.2%22%20rx%3D%22.6%22%2F%3E%3Cpath%20d%3D%22M17%2026.4C15.5%2030.5%2012.5%2033%209%2034C13.5%2035.5%2017.5%2033.5%2020%2029.5C22.5%2033.5%2026.5%2035.5%2031%2034C27.5%2033%2024.5%2030.5%2023%2026.4Z%22%2F%3E%3Cpath%20d%3D%22M18.6%2026.4H21.4L20%2038Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
body.clair{background:var(--fond) var(--lys) fixed}
header.clair{background:rgba(243,236,224,.97)}
footer.clair{background:var(--fond)}
.clair.pleine{background:transparent;box-shadow:inset 0 1px 0 var(--rasante)}
.clair.pleine::before{content:'';position:absolute;inset:0 -100vmax;z-index:-1;background:var(--fond) var(--lys) fixed}
/* ── LA VOLTE — 24/10/2026 ─────────────────────────────────────────────────
   Les cartes de Services : au survol, la carte s'incline un temps sous le
   curseur (la Plaque, GAB-PROP-14), puis se retourne et donne le détail
   (les Cartes retournables, GAB-PROP-05). Aurélien : « un temps sur C puis
   la carte se retourne », « l'utilisateur ne sait pas attendre ». Les deux
   faces partagent une case de grille : la carte prend la hauteur de la plus
   haute, sans hauteur écrite. Au doigt, un appui retourne la carte. */
.volte{perspective:1000px;outline:none}
.volte-int{display:grid;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--flip,0deg) + var(--ry,0deg)));transition:transform .18s ease-out}
.volte.retournee .volte-int{--flip:180deg;transition:transform .45s cubic-bezier(.3,.9,.3,1)}
.volte.retournee.pose .volte-int{transition:transform .18s ease-out}
.volte .face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.volte .recto{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:linear-gradient(var(--angle,120deg),rgba(255,255,255,0) 30%,rgba(255,255,255,var(--brille,0)) 50%,rgba(255,255,255,0) 70%),var(--panneau)}
.volte .recto h3{margin:0}
.volte .verso{transform:rotateY(180deg);display:flex;align-items:center;background:#0B2E7A;border-color:#0B2E7A}
.volte .verso p{color:#F3ECE0}
.volte:hover,.volte:focus-visible{position:relative;z-index:2}
.volte:focus-visible .face{box-shadow:0 0 0 2px var(--vive)}
@media (prefers-reduced-motion:reduce){.volte-int,.volte.retournee .volte-int{transition:none}}/* Les portes de l'accueil sont des liens : le verso porte le texte et « Entrer ». */
a.volte{display:block;color:var(--texte)}
a.volte:hover{text-decoration:none}
.volte.porte .verso{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.volte.porte .verso .aller{color:#9DBBFF}
/* Sur la nuit bleue, le verso s'éclaire d'un bleu plus vif pour se détacher. */
body:not(.clair) .volte .verso{background:#123C9C;border-color:var(--vive)}/* L'assistant sous la vidéo, dans la colonne de droite : plus étroit, en haut
   de la page, il évite le défilement ; il se retourne comme les autres tuiles. */
.cote{display:flex;flex-direction:column;gap:22px;min-width:0}
.volte.assistant{display:block;margin:0;padding:0;background:none;border:0;box-shadow:none}
.volte.assistant .face{padding:20px 24px;background:var(--panneau);border:1px solid var(--arete);box-shadow:inset 2px 0 0 var(--vive)}
.volte.assistant .recto{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;justify-content:normal;text-align:left}
.volte.assistant .presence{width:110px;height:110px}
.volte.assistant h3{margin:4px 0 8px;font-size:20px}
.volte.assistant .apprend{margin:0;font-size:14.5px}
.volte.assistant .verso{flex-direction:column;align-items:flex-start;justify-content:center}
.volte.assistant .verso p{margin:0 0 10px;font-size:14.5px}
/* L'assistant en haut à gauche, au-dessus du texte (Aurélien, 24/10). */
.produit .volte.assistant{margin-bottom:26px}
.produit{align-items:start}

/* L'assistant dans la marge de gauche, sur les grands écrans : là où la page
   laisse un vide, du haut vers le bas, fixe pendant le défilement (Aurélien,
   24/10, sur sa copie d'écran annotée). Tout son texte y tient : il ne se
   retourne plus, recto et verso se lisent l'un sous l'autre. Sous 1 700 px,
   il reste en haut de la colonne de gauche. */
@media (min-width:1700px){
  .produit .volte.assistant{position:fixed;z-index:5;left:32px;top:96px;
    width:min(560px,calc((100vw - 1180px) / 2 - 64px));max-height:calc(100vh - 140px);overflow:auto;margin:0}
  .volte.assistant .volte-int{transform:none !important;display:block}
  .volte.assistant .face{-webkit-backface-visibility:visible;backface-visibility:visible}
  .volte.assistant .recto{grid-template-columns:1fr;justify-items:center;text-align:center;border-bottom:0;box-shadow:inset 2px 0 0 var(--vive)}
  .volte.assistant .recto .apprend{text-align:left}
  .volte.assistant .presence{width:150px;height:150px}
  .volte.assistant .verso{transform:none;background:var(--panneau);border-color:var(--arete);border-top:0}
  .volte.assistant .verso p{color:var(--texte)}
  body:not(.clair) .volte.assistant .verso{background:var(--panneau);border-color:var(--arete)}
}
/* L'apparition au défilement fait glisser le bloc produit (transform) ; un
   ancêtre transformé devient le repère d'un élément fixe : l'assistant
   s'affichait un instant au milieu de la page avant de rejoindre la marge
   (Aurélien, 24/10). Sur grand écran, le bloc produit apparaît en fondu seul. */
@media (min-width:1700px){.produit.monte,.produit.monte.vu{transform:none}}
/* ── LE MOTEUR AU TRAVAIL — 24/10/2026 ─────────────────────────────────────
   Les vidéos de la série LinkedIn, servies par le site lui-même : le visiteur
   qui n'arrive pas par LinkedIn les voit aussi (Aurélien). Une vidéo entre ici
   le jour où elle est postée. */
.episodes{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.episode{display:grid;grid-template-rows:auto 1fr;background:var(--panneau);border:1px solid var(--arete)}
.episode video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.episode .legende{padding:20px 24px 24px}
.episode .n{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--violet-clair)}
.episode h3{margin:0 0 10px;font-weight:500;font-size:19px;color:var(--clair)}
.episode p{margin:0;font-size:14.5px}
#au-travail .mention{margin:22px 0 0;font-size:13px;color:var(--faible)}
@media (max-width:980px){.episodes{grid-template-columns:1fr}}
/* ── L'ARMOIRE DES VIDÉOS — 24/10/2026 ─────────────────────────────────────
   L'armoire Monolithe de METACUBE (maquette d'Aurélien, 10/10/2026), confinée
   à #armoire : un tiroir par cycle de révision, une fiche debout par vidéo.
   Les textes ne sont jamais coupés : ils passent à la ligne. */
#armoire{--ar-cyan:hsl(196 92% 62%);--ar-bleu:hsl(228 85% 64%);--ar-violet:hsl(262 75% 66%);--ar-vert:hsl(142 72% 55%);
  --ar-txt:#e8eeff;--ar-moyen:rgba(232,238,255,.72);--ar-faible:rgba(232,238,255,.45);
  position:relative;height:640px;border:1px solid var(--arete);overflow:hidden;user-select:none;color:var(--ar-txt);
  background:radial-gradient(120% 90% at 35% 75%,hsl(232 55% 11%) 0%,#04060c 62%)}
#armoire .ar-scene{position:absolute;top:0;left:0;bottom:0;right:380px;perspective:1500px;perspective-origin:50% 40%;overflow:hidden;cursor:pointer}
#armoire .ar-scene.glisse,#armoire .ar-scene.glisse *{cursor:grabbing !important}
#armoire .ar-monde{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.22,.8,.2,1)}
#armoire .ancre,#armoire .glissiere{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
#armoire .glissiere{transition:transform .95s cubic-bezier(.2,.85,.25,1)}
#armoire .face{position:absolute;pointer-events:none}
#armoire .sol{background:radial-gradient(circle at 50% 50%,hsla(206,95%,55%,.20) 0%,hsla(250,80%,50%,.07) 20%,transparent 42%),repeating-linear-gradient(0deg,hsla(228,70%,62%,.08) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,hsla(228,70%,62%,.08) 0 1px,transparent 1px 64px);-webkit-mask-image:radial-gradient(circle,#000 22%,transparent 58%);mask-image:radial-gradient(circle,#000 22%,transparent 58%)}
#armoire .tav{pointer-events:auto;cursor:pointer;overflow:hidden;background:linear-gradient(180deg,hsl(226 36% 21%) 0%,hsl(236 42% 12%) 55%,hsl(246 46% 8%) 100%);border:1px solid hsla(196,80%,62%,.28);box-shadow:inset 0 1px 0 hsla(196,100%,80%,.6),inset 0 -1px 0 hsla(262,80%,66%,.4);transition:filter .3s}
#armoire .tav::after{content:'';position:absolute;inset:0;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.08) 42%,transparent 52%);pointer-events:none}
#armoire .tiroir.vide .tav{filter:brightness(.6)}
#armoire .tiroir.tente .tav{filter:brightness(1.35)}
#armoire .tiroir.ouvert .tav{border-color:hsla(142,72%,55%,.7)}
#armoire .lettre{position:absolute;left:10px;top:8px;font:500 15px/1 'Space Grotesk',sans-serif;color:var(--ar-cyan)}
#armoire .nomt{position:absolute;left:32px;right:10px;top:9px;font:500 9.5px/1.3 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ar-txt);text-shadow:0 0 8px hsla(196,95%,62%,.35)}
#armoire .pts{display:inline-flex;gap:3px;align-items:center}
#armoire .pts i{display:block;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--ar-cyan) 60%,var(--ar-violet));box-shadow:0 0 5px hsla(196,95%,62%,.8)}
#armoire .tav .pts{position:absolute;right:10px;bottom:9px}
#armoire .poignee{position:absolute;left:34%;right:34%;bottom:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ar-cyan),var(--ar-violet));box-shadow:0 0 8px hsla(196,95%,62%,.6);transition:box-shadow .4s,background .4s}
#armoire .tiroir.tente .poignee{box-shadow:0 0 16px hsla(196,95%,62%,1)}
#armoire .tiroir.ouvert .poignee{background:var(--ar-vert);box-shadow:0 0 12px hsla(142,72%,55%,.9)}
#armoire .tfond{background:linear-gradient(0deg,hsl(236 40% 8%),hsl(228 36% 15%))}
#armoire .tcote{background:linear-gradient(180deg,hsl(226 34% 19%),hsl(240 40% 8%));border-top:1px solid hsla(196,85%,65%,.5)}
#armoire .tdos{background:hsl(236 38% 10%);border-top:1px solid hsla(196,85%,65%,.4)}
#armoire .fiche{pointer-events:auto;cursor:pointer;visibility:hidden;border:1px solid hsla(196,80%,66%,.4);border-radius:3px;background:linear-gradient(180deg,hsl(222 36% 24%),hsl(232 40% 14%) 70%,hsl(240 42% 11%));box-shadow:inset 0 1px 0 hsla(196,100%,85%,.45);padding:10px 10px 0;overflow:visible;transition:transform .42s cubic-bezier(.2,.9,.3,1.12),border-color .3s,box-shadow .3s,visibility 0s .95s}
#armoire .tiroir.ouvert .fiche{visibility:visible;transition:transform .42s cubic-bezier(.2,.9,.3,1.12),border-color .3s,box-shadow .3s,visibility 0s 0s}
#armoire .fiche.survol{transform:translateY(-46px);border-color:hsla(196,95%,72%,.95);box-shadow:inset 0 1px 0 hsla(196,100%,85%,.75),0 0 20px hsla(196,95%,60%,.4)}
#armoire .fiche.armee{transform:translateY(-56px);border-color:var(--ar-vert);box-shadow:inset 0 1px 0 hsla(142,90%,80%,.6),0 0 24px hsla(142,72%,55%,.5)}
#armoire .onglet{position:absolute;top:-14px;height:14px;padding:0 7px;font:600 8.5px/14px 'Space Grotesk',sans-serif;letter-spacing:.12em;color:#04060c;background:linear-gradient(90deg,var(--ar-cyan),var(--ar-bleu));border-radius:3px 3px 0 0;white-space:nowrap}
#armoire .fiche.armee .onglet{background:var(--ar-vert)}
#armoire .f-nom{font:500 12px/1.25 'Space Grotesk',sans-serif}
#armoire .f-meta{font:400 9.5px/1.3 'Space Grotesk',sans-serif;color:var(--ar-moyen);margin-top:3px}
#armoire .f-trait{height:1px;margin:6px 0 5px;background:linear-gradient(90deg,var(--ar-cyan),var(--ar-violet) 55%,transparent)}
#armoire .f-prin{font:400 9px/1.25 'Space Grotesk',sans-serif;color:var(--ar-faible)}
#armoire .tiroir.tente .glissiere{transform:translateZ(14px)}
#armoire .tiroir.ouvert .glissiere{transform:translateZ(280px)}
#armoire .ar-hud{position:absolute;top:0;right:0;width:380px;height:100%;padding:24px 26px 20px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,rgba(9,13,30,.92),rgba(5,7,16,.96));border-left:1px solid hsla(196,90%,62%,.35)}
#armoire .ar-sous{font:300 21px 'Space Grotesk',sans-serif;margin-top:4px;color:var(--ar-txt)}
#armoire .ar-fil{font:400 11px 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ar-faible);padding-bottom:10px;border-bottom:1px solid hsla(228,60%,60%,.18)}
#armoire .ar-fil b{font-weight:500;color:var(--ar-cyan)}
#armoire .ar-corps{flex:1;overflow:auto;display:flex;flex-direction:column}
#armoire .resume{font:400 11px 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ar-moyen);margin-bottom:8px}
#armoire .puce{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid hsla(228,60%,60%,.10);font:400 12.5px 'Space Grotesk',sans-serif;cursor:pointer;transition:color .2s,padding .2s}
#armoire .puce b{display:inline-block;width:16px;font-weight:500;color:var(--ar-cyan)}
#armoire .puce.vide{color:var(--ar-faible)}
#armoire .puce:hover{color:var(--ar-cyan);padding-left:4px}
#armoire .ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid hsla(228,60%,60%,.12);cursor:pointer;transition:color .2s,padding .25s}
#armoire .ligne:hover,#armoire .ligne.on{color:var(--ar-cyan);padding-left:6px}
#armoire .ligne .n{font:400 14px 'Space Grotesk',sans-serif}
#armoire .ligne .c{font:400 11px 'Space Grotesk',sans-serif;color:var(--ar-faible);white-space:nowrap}
#armoire p.vide{margin:8px 0 0;font-size:13.5px;color:var(--ar-moyen)}
#armoire video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid hsla(196,80%,62%,.35);margin-bottom:14px}
#armoire .titre-fiche{font:500 21px/1.2 'Space Grotesk',sans-serif}
#armoire .meta{font:400 11px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ar-faible);margin:6px 0 10px}
#armoire .meta b{font-weight:500;color:var(--ar-cyan)}
#armoire .texte{margin:0;font-size:13.5px;line-height:1.6;color:var(--ar-moyen)}
#armoire .aide{display:flex;gap:18px;font:400 10.5px 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ar-faible)}
#armoire .aide i{display:inline-block;width:10px;height:14px;border:1px solid var(--ar-faible);border-radius:5px;margin-right:7px;vertical-align:-3px;position:relative;overflow:hidden}
#armoire .aide i::after{content:'';position:absolute;top:0;width:4px;height:6px;background:var(--ar-cyan)}
#armoire .aide i.g::after{left:0}
#armoire .aide i.d::after{right:0}
@media (max-width:980px){#armoire{height:auto}#armoire .ar-scene{position:relative;right:auto;height:420px}#armoire .ar-hud{position:relative;width:auto;height:auto}}
/* Les logos des outils (planche du 24/10/2026 : TVA 01 « Jauge 20 % »,
   Stripe 03 « Carte en orbite ») : dessinés pour la nuit, ils sont posés
   dans une pastille sombre, comme l'emblème d'IFC. */
.outil-tete{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.outil-tete .caps{margin:0}
.logo-outil{flex:none;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#12204a 0%,#05070f 72%);
  box-shadow:0 0 0 1px rgba(21,67,172,.35),0 10px 26px rgba(5,7,15,.25)}
/* La marque déposée METACUBE (INPI n° 5300882) porte son ® : au titre, à la porte de l'accueil, au pied de page (Aurélien, 24/10). */
sup.r{font-size:max(.55em,10px);vertical-align:super;line-height:0;letter-spacing:0;margin-left:.12em;font-weight:400}

/* ── LE MENU AU DOIGT — 24/10/2026 : sous 600 px, un bouton ☰ déplie les onglets ── */
.menu-bouton{display:none}
@media (max-width:600px){
  header .page{position:relative}
  .menu-bouton{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;
    background:transparent;border:1px solid rgba(145,198,255,.35);cursor:pointer}
  .menu-bouton span{display:block;height:2px;background:var(--clair);transition:transform .25s,opacity .25s}
  .menu-ouvert .menu-bouton span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-ouvert .menu-bouton span:nth-child(2){opacity:0}
  .menu-ouvert .menu-bouton span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.menu-ouvert nav{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;z-index:30;
    padding:8px 16px 14px;background:rgba(7,12,22,.97);box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 -1px 0 rgba(145,198,255,.16)}
  header.menu-ouvert nav a{margin:0;padding:13px 4px;font-size:13px;box-shadow:inset 0 -1px 0 rgba(145,198,255,.10)}
  header.clair.menu-ouvert nav{background:rgba(243,236,224,.98);box-shadow:0 14px 30px rgba(70,50,20,.18),inset 0 -1px 0 rgba(21,67,172,.12)}
  header.clair.menu-ouvert nav a{box-shadow:inset 0 -1px 0 rgba(21,67,172,.10)}
  .clair .menu-bouton{border-color:rgba(21,67,172,.35)}
}