/* Les polices, hébergées avec le site (pas de Google Fonts : rien ne part chez un tiers) ; Inter et Manrope, variables */
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(fonts/manrope.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }
/* Kyndos Studio : la vitrine (2026-11-09). Moderne, verre léger, sa propre identité : blanc cassé (ou nuit), deux lueurs
   douces violet et turquoise, Manrope et Inter, l'accent violet ; le logo : le K curseur (identite.html), puis « yndos ».
   Clair ou sombre : selon l'appareil, ou le bouton (retenu dans le navigateur). */
:root {
  --fond: #f6f7f9; --texte: #0e1525; --doux: #5d6576; --accent: #6a3cf5; --accent-fonce: #5427e0;
  --verre: rgb(255 255 255 / .62); --bord: rgb(255 255 255 / .9); --trait: rgb(14 21 37 / .09);
  --panneau: #eaeef5; --ombre: 0 1px 2px rgb(14 21 37 / .05), 0 18px 40px -20px rgb(14 21 37 / .22);
  --lueur1: rgb(106 60 245 / .14); --lueur2: rgb(20 190 200 / .12);
}
:root[data-theme="sombre"] {
  --fond: #0b0f1a; --texte: #eef1f8; --doux: #9aa3b6; --accent: #a988ff; --accent-fonce: #c3abff;
  --verre: rgb(255 255 255 / .05); --bord: rgb(255 255 255 / .1); --trait: rgb(255 255 255 / .09);
  --panneau: #141a29; --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 22px 44px -22px rgb(0 0 0 / .7);
  --lueur1: rgb(106 60 245 / .24); --lueur2: rgb(20 190 200 / .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0b0f1a; --texte: #eef1f8; --doux: #9aa3b6; --accent: #a988ff; --accent-fonce: #c3abff;
    --verre: rgb(255 255 255 / .05); --bord: rgb(255 255 255 / .1); --trait: rgb(255 255 255 / .09);
    --panneau: #141a29; --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 22px 44px -22px rgb(0 0 0 / .7);
    --lueur1: rgb(106 60 245 / .24); --lueur2: rgb(20 190 200 / .12);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light dark; }
body {
  margin: 0; min-height: 100vh; color: var(--texte); font: 400 17px/1.65 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: var(--fond);
  transition: background-color .3s, color .3s;
}
h1, h2, h3 { margin: 0; font-family: "Manrope", sans-serif; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
p { margin: 0; }
a { color: inherit; }
.largeur { width: min(1120px, 100% - 40px); margin-inline: auto; }
.pixel { image-rendering: pixelated; }
.verre { background: var(--verre); border: 1px solid var(--bord); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--ombre); }

/* Le logo (identite.html) : le K curseur (la barre violette, le chevron de la couleur du texte), puis « yndos » en Manrope ;
   « Studio » écrit discrètement à côté, dans l'en-tête seulement */
.logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; color: var(--texte); text-decoration: none; }
.logo .mot { display: inline-flex; align-items: flex-end; font: 800 28px/1 "Manrope", sans-serif; letter-spacing: -.05em; }
.logo .mot svg { width: .66em; height: .74em; margin: 0 .015em .125em 0; overflow: visible; }
.k-chevron { stroke: currentColor; }
.k-curseur { fill: url(#k-degrade); }
.logo-studio { margin-top: 3px; font: 500 15px/1 "Inter", sans-serif; color: var(--doux); }
.logo.petit .mot { font-size: 22px; }

/* L'en-tête : une barre de verre qui flotte */
.entete { position: sticky; top: 14px; z-index: 10; margin-top: 14px; }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 10px 0 22px; border-radius: 18px; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a { padding: 8px 14px; border-radius: 10px; color: var(--doux); font-weight: 500; font-size: 15px; text-decoration: none; transition: background .15s, color .15s; }
.menu a:hover { background: var(--trait); color: var(--texte); }
/* Le Discord : le logo, en bouton rond (en-tête et pied) */
.menu a.icone-lien, .icone-lien { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: 6px; border-radius: 12px; background: var(--trait); color: var(--texte); transition: background .15s, color .15s; }
.menu a.icone-lien:hover, .icone-lien:hover { background: #5865f2; color: #fff; }
.icone-lien svg { width: 20px; height: 20px; }
.pied-droite { display: flex; align-items: center; gap: 14px; } .pied-droite .icone-lien { margin: 0; }
.theme { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 6px; border: 0; border-radius: 12px; background: var(--trait); color: var(--texte); cursor: pointer; }
.theme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .lune { fill: currentColor; stroke: none; }
.theme .soleil { display: none; }
:root[data-theme="sombre"] .theme .lune { display: none; } :root[data-theme="sombre"] .theme .soleil { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .theme .lune { display: none; } :root:not([data-theme="clair"]) .theme .soleil { display: block; } }

/* L'ouverture */
.ouverture { display: grid; justify-items: start; gap: 24px; padding: 128px 0 110px; }
.ouverture h1 { max-width: 900px; font-size: clamp(38px, 6vw, 72px); }
.ouverture h1 em { font-style: normal; color: var(--accent); }
.ouverture p { max-width: 600px; color: var(--doux); font-size: 19px; }
.boutons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.bouton { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 14px; font: 600 16px "Inter", sans-serif; text-decoration: none; white-space: nowrap; transition: transform .15s, opacity .15s; }
.bouton:hover { transform: translateY(-2px); }
.bouton.plein { background: var(--texte); color: var(--fond); }
.bouton.verre { color: var(--texte); }

/* Les projets : de grandes rangées qui alternent, séparées par un trait fin (pas de cartes) */
.projets, .studio { display: grid; gap: 8px; padding: 30px 0 90px; }
.projets > h2, .studio > h2 { margin-bottom: 18px; font-size: clamp(30px, 3.6vw, 42px); }
.rangee { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 44px 0; border-top: 1px solid var(--trait); }
.rangee:nth-of-type(even) .visuel { order: 2; }
.visuel { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 26px; background: var(--panneau); overflow: hidden; }
.visuel.hylora { background: linear-gradient(150deg, #e6e2fb, #dbe6fb); }
.visuel.hylora img { width: min(62%, 300px); filter: drop-shadow(0 8px 12px rgb(27 24 56 / .22)); }
/* Les logos des projets : la marque et le nom, côte à côte */
.marque-projet { display: inline-flex; align-items: center; gap: 14px; font: 800 38px "Manrope", sans-serif; letter-spacing: -.035em; }
.marque-projet img { width: 64px; height: 64px; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .25)); }
.visuel.silens { background: radial-gradient(circle at 50% 35%, #231d55, #0d0f1a 75%); color: #fff; }
.visuel.silens b { color: #a99dff; font-weight: 800; }
.visuel.erp { align-content: center; gap: 22px; }
.visuel.erp .marque-projet { color: var(--texte); }
.visuel.erp b { color: var(--accent); font-weight: 800; }
.texte { display: grid; align-content: center; justify-items: start; gap: 14px; }
.texte h3 { font-size: clamp(28px, 3vw, 38px); }
.texte p { color: var(--doux); font-size: 17px; }
.lien { margin-top: 4px; color: var(--accent); font-weight: 600; text-decoration: none; }
.lien:hover { color: var(--accent-fonce); text-decoration: underline; }

/* Le studio : trois colonnes de texte, un trait fin au-dessus */
.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.colonnes > div { display: grid; align-content: start; gap: 10px; padding-top: 26px; border-top: 1px solid var(--trait); }
.colonnes h3 { font-size: 22px; }
.colonnes p { color: var(--doux); }

/* L'appel : le Discord */
.appel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 70px; padding: 40px 44px; border-radius: 26px; }
.appel > div { display: grid; gap: 8px; }
.appel h2 { font-size: clamp(26px, 3vw, 34px); }
.appel p { color: var(--doux); }

/* Le pied */
.pied { border-top: 1px solid var(--trait); }
.pied-ligne { display: flex; justify-content: space-between; align-items: center; height: 84px; color: var(--doux); font-size: 14px; }

@media (max-width: 860px) {
  .rangee { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 0; }
  .rangee:nth-of-type(even) .visuel { order: 0; }
  .colonnes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .appel { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .ouverture { padding: 72px 0 60px; }
  .menu a { padding: 8px 10px; }
  .entete-ligne { padding-left: 16px; }
  .logo-studio { display: none; }
}

/* ── Les animations (2026-11-09) ──
   Le logo au chargement (moins d'une seconde) : le curseur clignote, le chevron se trace, « yndos » s'écrit, puis « Studio ».
   Le contenu qui passe sous la barre du haut s'efface (le script en bas de index.html).
   Les blocs « revele » glissent et apparaissent quand ils arrivent à l'écran. Rien ne bouge si l'appareil demande moins
   d'animations, et tout reste visible sans JavaScript. */
.lettres { display: inline-flex; }
.logo.anime .k-curseur { animation: k-clignote .22s steps(1) 1; }
.logo.anime .k-chevron { stroke-dasharray: 64; stroke-dashoffset: 64; animation: k-trace .3s .15s cubic-bezier(.3, .7, .3, 1) forwards; }
.logo.anime .lettres span { opacity: 0; transform: translateY(.12em); animation: k-lettre .25s calc(.3s + var(--i) * .035s) cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes k-clignote { 0% { opacity: 1; } 50% { opacity: .1; } }
@keyframes k-trace { to { stroke-dashoffset: 0; } }
@keyframes k-lettre { to { opacity: 1; transform: none; } }

.js .revele { opacity: 0; transform: translateY(36px) scale(.98); transition: opacity .55s cubic-bezier(.25, .1, .25, 1) var(--d, 0s), transform .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.js .revele.visible { opacity: 1; transform: none; }
/* Dans une rangée de projet : l'image arrive avec un léger zoom, le texte un peu après */
.js .rangee.revele .visuel { transform: scale(.93); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.js .rangee.revele.visible .visuel { transform: none; }
.js .rangee.revele .texte { opacity: 0; transform: translateY(22px); transition: opacity .55s .1s, transform .7s .1s cubic-bezier(.16, 1, .3, 1); }
.js .rangee.revele.visible .texte { opacity: 1; transform: none; }
.visuel img, .visuel .marque-projet { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.rangee:hover .visuel img, .rangee:hover .visuel .marque-projet { transform: scale(1.04); }

/* La barre du haut, plus opaque dès qu'on descend */
.entete-ligne { transition: background-color .3s, box-shadow .3s; }
/* « Studio » apparaît une fois le logo écrit */
.logo.anime .logo-studio { opacity: 0; animation: k-lettre .3s .55s forwards; }
.entete.defile .entete-ligne { background: rgb(255 255 255 / .82); }
:root[data-theme="sombre"] .entete.defile .entete-ligne { background: rgb(16 20 32 / .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .entete.defile .entete-ligne { background: rgb(16 20 32 / .8); } }

.menu a { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .logo.anime .k-curseur, .logo.anime .k-chevron, .logo.anime .lettres span, .logo.anime .logo-studio { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .js .revele, .js .rangee.revele .visuel, .js .rangee.revele .texte { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Le dégradé maillé (2026-11-09) : violet, lilas, turquoise, vif dans le haut de la page, puis le fond uni ── */
.maille { position: absolute; inset: 0 0 auto; z-index: -1; height: 940px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.maille::before { content: ""; position: absolute; inset: -120px -80px 0; filter: blur(90px); opacity: .13;
  background:
    radial-gradient(38% 46% at 18% 22%, #8a5cff, transparent 70%),
    radial-gradient(34% 40% at 78% 12%, #c4a8ff, transparent 70%),
    radial-gradient(36% 44% at 62% 62%, #3fd2d8, transparent 65%),
    radial-gradient(30% 36% at 34% 72%, #b06cff, transparent 70%); }
.maille.basse { height: 560px; }
:root[data-theme="sombre"] .maille::before { opacity: .14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .maille::before { opacity: .14; } }

/* ── L'en-tête : le menu, le menu Projets qui se déroule, les actions, le menu du téléphone ── */
.menu { display: flex; align-items: center; gap: 2px; }
.menu > a, .deroulant > a { display: inline-flex; align-items: center; gap: 5px; }
.menu a.actif { background: var(--trait); color: var(--texte); }
.fleche { width: 12px; height: 12px; transition: transform .2s; }
.deroulant { position: relative; }
.panneau { position: absolute; top: calc(100% + 10px); left: -10px; display: grid; gap: 4px; width: 330px; padding: 8px; border-radius: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.deroulant::after { content: ""; position: absolute; inset: 100% -10px auto; height: 14px; }   /* le pont entre le lien et le panneau */
.deroulant:hover .panneau, .deroulant:focus-within .panneau { opacity: 1; visibility: visible; transform: none; }
.deroulant:hover .fleche, .deroulant:focus-within .fleche { transform: rotate(180deg); }
:root[data-theme="sombre"] .panneau { background: rgb(18 22 34 / .92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .panneau { background: rgb(18 22 34 / .92); } }
:root:not([data-theme="sombre"]) .panneau { background: rgb(255 255 255 / .9); }
.projet-menu { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background .15s; }
.projet-menu:hover { background: var(--trait); }
.projet-menu img { width: 40px; height: 40px; object-fit: contain; }
.projet-menu img.pixel { width: 52px; object-fit: contain; }
.projet-menu span { display: grid; line-height: 1.3; } .projet-menu b { font: 700 15px "Manrope", sans-serif; } .projet-menu small { color: var(--doux); font-size: 13px; }
.actions { display: flex; align-items: center; gap: 6px; }
.actions .icone-lien, .actions .theme { margin: 0; }
.bouton-contact { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--texte); color: var(--fond); font: 600 14.5px "Inter", sans-serif; text-decoration: none; white-space: nowrap; transition: transform .15s; }
.bouton-contact:hover { transform: translateY(-1px); }
.burger { display: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--trait); color: var(--texte); cursor: pointer; }
.burger svg { width: 20px; height: 20px; }
.menu-mobile { display: grid; gap: 4px; margin-top: 8px; padding: 10px; border-radius: 18px; }
.menu-mobile[hidden] { display: none; }
.menu-mobile > a:not(.projet-menu):not(.bouton) { padding: 12px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.menu-mobile .bouton { justify-content: center; margin-top: 6px; }
:root:not([data-theme="sombre"]) .menu-mobile { background: rgb(255 255 255 / .92); }
:root[data-theme="sombre"] .menu-mobile { background: rgb(18 22 34 / .94); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .menu-mobile { background: rgb(18 22 34 / .94); } }
@media (max-width: 900px) {
  .menu, .bouton-contact { display: none; }
  .burger { display: grid; }
}

/* ── Le pied : le logo, les liens, Discord ── */
.pied-ligne { gap: 20px; flex-wrap: wrap; height: auto; min-height: 84px; padding: 18px 0; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pied-liens a { color: var(--doux); font-size: 14px; text-decoration: none; } .pied-liens a:hover { color: var(--texte); }

/* ── Les pages simples (Carrières, Mentions légales) ── */
.page-tete { display: grid; justify-items: start; gap: 18px; padding: 110px 0 50px; }
.page-tete h1 { font-size: clamp(36px, 5vw, 58px); }
.page-tete p { max-width: 640px; color: var(--doux); font-size: 19px; }
.texte-long { display: grid; gap: 34px; max-width: 760px; padding: 10px 0 80px; }
.texte-long section { display: grid; gap: 10px; padding-top: 26px; border-top: 1px solid var(--trait); }
.texte-long h2 { font-size: 24px; }
.texte-long p, .texte-long li { color: var(--doux); }
.texte-long ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.texte-long a { color: var(--accent); }
.a-remplir { color: var(--texte); font-weight: 600; }

/* Les liens vers une section ou un projet : on s'arrête juste sous la barre du haut */
.projets, .studio, .rangee { scroll-margin-top: 70px; }

/* ── Les pages projet (2026-11-09) : la tête (la marque en grand, le nom, la phrase, les boutons), ce que fait le projet
   en colonnes de texte (pas de cartes), les autres projets ── */
.projet-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 110px 0 70px; }
.projet-tete .texte h1 { font-size: clamp(40px, 5.4vw, 64px); }
.projet-tete .texte p { font-size: 19px; }
.projet-tete .visuel { aspect-ratio: 16 / 11; }
.fonctions { display: grid; gap: 8px; padding: 20px 0 80px; }
.fonctions > h2 { margin-bottom: 18px; font-size: clamp(28px, 3.2vw, 38px); }
.fonctions .colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
.autres { display: grid; gap: 18px; padding: 10px 0 70px; }
.autres h2 { font-size: 24px; }
.autres-liens { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.autres-liens .projet-menu { padding: 8px 12px 8px 8px; }
@media (max-width: 860px) {
  .projet-tete { grid-template-columns: minmax(0, 1fr); padding: 60px 0 40px; gap: 28px; }
  .projet-tete .visuel { order: -1; }
  .fonctions .colonnes { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}

/* Le choix de la langue (FR · DE · EN) : la langue en cours en gras sur un fond léger, l'autre en lien */
.langues { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--trait); }
.langues > * { display: grid; place-items: center; min-width: 32px; height: 34px; padding: 0 6px; border-radius: 9px; font: 600 13px "Inter", sans-serif; text-decoration: none; }
.langues b { background: var(--fond); color: var(--texte); box-shadow: 0 1px 2px rgb(14 21 37 / .12); }
.langues a { color: var(--doux); } .langues a:hover { color: var(--texte); }
.langues.petit > * { height: 30px; }
@media (max-width: 900px) { .actions .langues { display: none; } }
.menu-mobile .langues { justify-self: start; margin: 6px 0 0 6px; }