/* Pages secondaires de kyras.ai (Fonctionnalités, Intégrations, Cas d'usage, Ressources).
   S'empile sur /site/landing-extrait.css, copie conforme des jetons, boutons, nav, FAQ et pied de la landing.
   Ici seulement ce que la landing n'a pas : les menus de la nav, l'en-tête de page, les sections communes. */

/* ── Sections et titres (valeurs de lp/DESIGN.md) ───────────────────────────────────────────────── */
.sec{padding:136px 0}
.sec.tight{padding-top:24px}
.sec.white{background:var(--white);border-block:1px solid var(--line)}
.sh{max-width:760px}
.sh.center{margin:0 auto;text-align:center}
.sh h2+.lead{margin-top:22px}
.sh+*{margin-top:64px}
@media (max-width:760px){.sec{padding:88px 0}.sh+*{margin-top:44px}}

/* ── En-tête de page secondaire : même voix que le héros de la landing ─────────────────────────── */
.phero{padding:150px 0 0;text-align:center}
.phero .in{max-width:960px;margin:0 auto}
.phero h1{max-width:900px;margin:0 auto}
.phero .lead{margin:26px auto 0;max-width:56ch}
.phero .ctas{margin-top:34px}
.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:700;color:var(--faint);margin-bottom:28px}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.crumbs a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--line-2)}
@media (max-width:640px){.phero{padding-top:120px}.phero h1{font-size:clamp(34px,8vw,44px)}}

/* ── Aube (fin de page, reprise de .final de la landing) ─────────────────────────────────────────── */
.final{padding:160px 0 184px;background:linear-gradient(180deg,var(--paper) 0%,#E6F7EF 24%,#BDE9D7 52%,#DDEFE6 76%,#F6E7D8 100%);overflow:clip}
.final .sh{max-width:820px}
.final h2{font-size:clamp(34px,2.2vw + 18px,58px);letter-spacing:-.032em}
.final .lead{color:#33504B}
.final .ctas{margin-top:36px}
.final .garantie{margin-top:22px;font-size:15px;color:#33504B}
@media (max-width:760px){.final{padding:104px 0 128px}}

/* ── FAQ des pages secondaires : la grammaire de la landing ─────────────────────────────────────── */
.faq{padding:136px 0}
.faq .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.faq .grid>div:first-child{position:sticky;top:120px}
.faq details p{padding:0 26px 24px;color:var(--muted);max-width:60ch}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr;gap:32px}.faq .grid>div:first-child{position:static}}
@media (max-width:760px){.faq{padding:88px 0}}

/* ── Puce « Lecture seule » ─────────────────────────────────────────────────────────────────────── */
.lock{display:inline-flex;align-items:center;gap:6px;background:var(--mint-soft);color:var(--mint-deep);font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:6px 10px}
.lock svg{width:12px;height:12px}

/* ── Surfaces du navigateur ─────────────────────────────────────────────────────────────────────── */
html{scrollbar-color:#C9D3CF transparent}

/* ══ Hub Intégrations : le mur des sources ═════════════════════════════════════════════════════════ */
.mur{padding-top:96px}
.fam{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;padding:44px 0;border-top:1px solid var(--line)}
.fam:first-of-type{border-top:0;padding-top:0}
.fam>div:first-child{position:sticky;top:110px}
.fam h2{font-size:clamp(24px,.8vw + 18px,30px);letter-spacing:-.022em}
.fam>div:first-child p{margin-top:12px;color:var(--muted);font-size:16px;max-width:30ch;text-wrap:pretty}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;grid-auto-flow:row dense}
.tile{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .2s}
/* Une source qui a sa page : la grande tuile, la porte. */
.tile.page{grid-column:span 2;min-height:300px;padding:26px}
a.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.tile .id{display:flex;align-items:center;gap:14px}
.tile .lg{flex:0 0 52px;width:52px;height:52px;border-radius:15px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);display:grid;place-items:center}
.tile .lg img{width:28px;height:28px}
.tile .id b{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.2;display:block}
.tile .id small{display:block;font-size:13px;font-weight:700;color:var(--faint);margin-top:2px}
.tile.page .id{flex-direction:column;align-items:flex-start;gap:18px}
.tile.page .lg{flex-basis:64px;width:64px;height:64px;border-radius:18px}
.tile.page .lg img{width:34px;height:34px}
.tile.page .id b{font-size:22px}
.tile .desc{font-size:16px;color:var(--muted);line-height:1.45;text-wrap:pretty}
/* La ligne « lu » : ce que Kyras lit, avec le point menthe du branchement. */
.tile .lu{display:flex;gap:10px;align-items:baseline;font-size:14px;font-weight:700;color:var(--ink);line-height:1.45;font-variant-numeric:tabular-nums lining-nums}
.tile .lu i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--mint-2);box-shadow:0 0 0 3px var(--mint-soft);transform:translateY(-1px)}
.tile .pied{margin-top:auto;padding-top:6px}
.tile .voir{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.tile .voir .jeton{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(16,40,40,.08);transition:transform .24s var(--ease),background .2s}
.tile .voir .jeton svg{width:14px;height:14px}
a.tile:hover .voir .jeton{transform:translateX(3px);background:var(--ink);color:var(--mint)}
/* Une source lue sans page dédiée : la tuile compacte, en ligne. */
.tile.compact{box-shadow:none;background:rgba(255,255,255,.6);padding:16px 18px;gap:10px}
.tile.compact .lg{flex-basis:44px;width:44px;height:44px;border-radius:13px;box-shadow:none}
.tile.compact .lg img{width:24px;height:24px}
.tile.compact .id b{font-size:17px}
.tile.compact .lu{font-weight:500;color:var(--muted)}
.tile.compact .lock{align-self:flex-start}
.tile.large{grid-column:1/-1;flex-direction:row;align-items:center;gap:24px}
.tile.large .id{flex:0 0 260px}
.tile.large .lu{flex:1}
.tile.tiers{grid-column:span 2}
.tile.pile{grid-column:span 4;flex-direction:row;align-items:center;gap:20px}
.tile.pile .id{flex:0 0 220px}
.tile.pile .lu{flex:1}
.fam:last-of-type .tile.page{grid-row:span 3;min-height:0}
@media (prefers-reduced-motion:reduce){.tile,.tile .voir .jeton{transition:none}a.tile:hover{transform:none}}
@media (max-width:1100px){.fam{grid-template-columns:1fr;gap:24px}.fam>div:first-child{position:static}}
@media (max-width:900px){.tile.large,.tile.pile{flex-direction:column;align-items:flex-start;gap:10px}.tile.large .id,.tile.pile .id{flex-basis:auto}}
@media (max-width:760px){.tiles{grid-template-columns:1fr 1fr;gap:12px}.tile.page{grid-column:1/-1;min-height:0}.fam:last-of-type .tile.page{grid-row:auto}.tile.compact,.tile.large,.tile.tiers,.tile.pile{grid-column:span 1}.tile.compact .lock{display:none}.tile.compact{padding:14px}.tile.compact .id{flex-direction:column;align-items:flex-start;gap:10px}}
/* La nuit du hub : l'adresse du serveur et ses trois outils */
.night .mcpg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.night .mcpg .lead{margin-top:22px}
.adresse{margin-top:30px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--e2);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 16px}
.adresse code{font:700 15px/1.3 var(--font);color:#fff;letter-spacing:-.005em;word-break:break-all}
.adresse span{font-size:13px;color:rgba(255,255,255,.6)}
.outils{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.outils li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.outils b{font-size:15px;color:var(--mint);font-weight:700}
.outils span{font-size:15px;color:rgba(255,255,255,.72)}
.hotes{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.6)}
.hotes .h{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:700}
.hotes .h img{width:20px;height:20px;border-radius:6px;background:#fff;padding:2px}
.hotes .h.attente{background:transparent;border:1px dashed rgba(255,255,255,.22);color:rgba(255,255,255,.62);font-weight:500}
@media (max-width:960px){.night .mcpg{grid-template-columns:1fr;gap:40px}}

/* ══ Pages source ══════════════════════════════════════════════════════════════════════════════════ */
.phero .marque{width:84px;height:84px;margin:0 auto 30px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);display:grid;place-items:center}
.phero .marque img{width:44px;height:44px}
.phero .reassure{margin-top:22px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:15px;color:var(--nav-text,#4E5F5D)}
.phero .reassure span{display:inline-flex;align-items:center;gap:8px}
.phero .reassure svg{width:16px;height:16px;color:var(--mint-deep)}
.preuve{max-width:760px;margin:72px auto 0;text-align:left}
.preuve figcaption{text-align:center}
.preuve .host{font-size:15px}
.preuve figcaption{text-align:center;margin-top:16px;font-size:14px;color:var(--faint)}
.reponse .chiffre{display:inline-block;background:var(--mint-soft);border-radius:8px;padding:1px 8px;font-weight:900;font-variant-numeric:tabular-nums}
.reponse .prov{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);border-top:1px dashed var(--line-2);padding-top:10px}
.reponse .prov img{width:16px;height:16px}
.fiche{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.fiche .card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-2);overflow:hidden}
.fiche .card .hd{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);background:#FBFCFB}
.fiche .card .hd img{width:22px;height:22px}
.fiche .card .hd b{font-size:15px}
.fiche .card .hd .lock{margin-left:auto}
.fiche .cols2{display:grid;grid-template-columns:1fr 1fr}
.fiche .cols2>div{padding:20px 22px}
.fiche .cols2>div+div{border-left:1px solid var(--line)}
.fiche h3{font-size:13px;font-weight:700;color:var(--faint);letter-spacing:0;margin-bottom:10px}
.fiche ul{list-style:none;display:flex;flex-direction:column}
.fiche li{font-size:15px;padding:9px 0;border-top:1px solid var(--line);line-height:1.4}
.fiche li:first-child{border-top:0;padding-top:0}
.fiche .note{padding:14px 22px;border-top:1px solid var(--line);font-size:14px;color:var(--faint);background:var(--paper)}
@media (max-width:960px){.fiche{grid-template-columns:1fr;gap:36px}}
@media (max-width:560px){.fiche .cols2{grid-template-columns:1fr}.fiche .cols2>div+div{border-left:0;border-top:1px solid var(--line)}}
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.q{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-1)}
.q .u{align-self:flex-start;background:var(--ink);color:#fff;border-radius:16px 16px 16px 4px;padding:12px 14px;font-weight:700;line-height:1.4;font-size:16px}
.q p{font-size:15px;color:var(--muted)}
.qs+.ex{margin-top:18px}
@media (max-width:960px){.qs{grid-template-columns:1fr}}
.croise{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.croise h2+.lead{margin-top:22px}
.croise ul{list-style:none;border-top:1px solid var(--line-2)}
.croise li{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line-2)}
.croise .paire{display:flex;align-items:center;gap:8px}
.croise .paire>span{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);display:grid;place-items:center}
.croise .paire img{width:26px;height:26px}
.croise .paire i{width:16px;height:2px;background:var(--mint-2);border-radius:2px}
.croise li b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.croise li b+span{display:block;margin-top:8px;color:var(--muted);font-size:16px;max-width:52ch}
@media (max-width:960px){.croise{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.croise li{grid-template-columns:1fr;gap:14px}}
.face{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.face .bcard{min-height:0;text-align:left;padding-bottom:32px}
.face ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.face li{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:15px;padding-top:10px;border-top:1px solid rgba(16,40,40,.08)}
.face li b{font-weight:700}
@media (max-width:760px){.face{grid-template-columns:1fr}.face li{grid-template-columns:1fr;gap:2px}}
.limites{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.limites ul{list-style:none;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-1);padding:8px 24px}
.limites li{padding:18px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.limites li:first-child{border-top:0}
@media (max-width:960px){.limites{grid-template-columns:1fr;gap:32px}}
.acces .bcard .vis{margin-top:28px}
.face .bcard p{margin-left:0;max-width:46ch}
.night .host{color:var(--ink)}
.fiche h2+.lead,.limites h2+.lead{margin-top:22px}
.night .mcpg>*{min-width:0}
@media (max-width:960px){.night .mcpg{grid-template-columns:minmax(0,1fr)}}
a.src{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
a.src:hover{text-decoration-color:var(--ink)}
/* Sur téléphone, la preuve se relit : plus de réduction d'échelle, la fenêtre se recompose à sa largeur. */
@media (max-width:560px){
  .preuve .fit,.night .mcpg .fit{height:auto!important;overflow:visible}
  .preuve .fit-in,.night .mcpg .fit-in{width:auto!important;transform:none!important}
  .preuve .host .fil,.night .host .fil{padding:16px}
  .preuve .host .u,.night .host .u{max-width:100%;font-size:15px}
  .preuve .host .a p,.night .host .a p{font-size:15px}
  .host .bar .hosts span:not(.on){display:none}
}
.tile .lu .nw{white-space:nowrap}
.tile.pile .lu,.tile.large .lu{flex:1 1 auto;min-width:0}
.tile.pile .lock,.tile.large .lock{align-self:center;flex:0 0 auto}
@media (max-width:760px){
  .tile.large,.tile.pile,.tile.tiers:last-child{grid-column:1/-1}
  .tile.pile,.tile.large{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 14px}
  .tile.pile .id,.tile.large .id{flex-direction:row;align-items:center;flex:1 1 100%}
  .tile.pile .lu,.tile.large .lu{flex-basis:100%}
}

/* ══ Pages Fonctionnalités ═════════════════════════════════════════════════════════════════════════ */
.scene-f{max-width:620px;margin:72px auto 0;min-height:0;padding:36px 32px 0;text-align:left}
.scene-f.dark .acard{margin-bottom:32px}
.scene-f .vis{margin-top:0;padding-top:0}
.scene-f .mix,.scene-f .mixq{margin-bottom:24px}
.regles{list-style:none;border-top:1px solid var(--line-2)}
.regles li{padding:24px 0;border-bottom:1px solid var(--line-2)}
.regles b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.regles b+span{display:block;margin-top:8px;color:var(--muted);font-size:16px;max-width:56ch}
.srcs-f{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.srcs-f img{width:30px;height:30px;padding:5px;border-radius:9px;background:#fff;border:1px solid var(--line)}
.portes li{padding:0}
.portes a{display:grid;grid-template-columns:minmax(0,260px) 1fr auto;gap:24px;align-items:center;padding:28px 8px;border-radius:16px;transition:background .2s}
.portes a:hover{background:#fff}
.portes a b+span{margin-top:0}
.portes .voir{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.portes .voir .jeton{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(16,40,40,.08)}
.portes a:hover .voir .jeton{background:var(--ink);color:var(--mint)}
@media (max-width:760px){.portes a{grid-template-columns:1fr;gap:8px}.scene-f{padding:24px 18px 0;margin-top:48px}}
.croise .regles li{grid-template-columns:minmax(0,230px) 1fr;gap:28px}
.croise .regles b+span{margin-top:0}
@media (max-width:520px){.croise .regles li{grid-template-columns:1fr;gap:8px}}
.consent li .gest{font-size:11px;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:4px 8px;white-space:nowrap}

/* ══ « En vrai, dans Kyras » : une vraie capture de l'app, annotée ═════════════════════════════════ */
.envrai .cadre-app{position:relative;max-width:1180px;margin:0 auto;border-radius:18px;overflow:visible;background:#FAFAF7;box-shadow:0 40px 100px -40px rgba(16,40,40,.45),0 0 0 1px var(--line)}
.envrai .cadre-app img{display:block;width:100%;height:auto;border-radius:18px}
.envrai .annot{position:absolute;inset:0;pointer-events:none}
.envrai .anneau{position:absolute;border:3px solid var(--mint-2);border-radius:14px;box-shadow:0 0 0 6px rgba(128,232,192,.28)}
.envrai .fleches{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.envrai .fleches path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.envrai .pastille{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;font-weight:900;font-size:16px;box-shadow:0 6px 16px -6px rgba(16,40,40,.5),0 0 0 3px #fff}
.envrai .legende{list-style:none;max-width:1180px;margin:36px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:l}
.envrai .legende li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.envrai .legende li i{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:16px}
.envrai .legende b{display:block;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.envrai .legende span{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
@media (max-width:860px){.envrai .legende{grid-template-columns:1fr}.envrai .pastille{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:13px}.envrai .anneau{border-width:2px;border-radius:8px;box-shadow:0 0 0 4px rgba(128,232,192,.28)}}
/* Les pastilles se posent sur le coin de leur anneau, sur tous les écrans. */
.envrai .pastille{left:var(--cx);top:var(--cy);width:38px;height:38px;margin:-19px 0 0 -19px;font-size:17px}
@media (max-width:860px){.envrai .pastille{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:13px}}
/* La bascule des pages Fonctionnalités : un visuel mis à l'échelle ne doit jamais élargir son panneau. */
.versus .vis.after{min-width:0}
.versus .vis.after>.fit{flex:1 1 auto;min-width:0;width:100%}