/* ============================================================
   Karaibart — couche multi-pages.

   style.css garde la charte du site (tokens, boutons, cartes, fenêtres).
   Ce fichier n'ajoute QUE les composants qui n'existaient pas quand le site
   tenait sur une seule page : fil d'Ariane, en-tête de page, corps de texte
   long, encadré « piège », tableau des mesures, pied de page en colonnes.

   Aucune redéfinition des composants existants : .card, .proj, .offer, .repo,
   .status, .btn viennent de style.css et ne sont pas touchés ici.
   Aucune police distante, aucune ressource externe.
   ============================================================ */

/* ---------- marque ---------- */
.brand{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.brand-name{ letter-spacing:.02em; }
/* « AI » est réellement dans Karaïb — le nom précède le pivot vers l'IA.
   Mise en valeur PUREMENT visuelle : le texte reste « KARAIBART » d'un seul
   tenant, et le nom accessible vient de l'aria-label du lien. */
.brand-ai{
  color:var(--accent);
  text-shadow:0 0 18px var(--halo);
}
.footer-base .brand-ai{ color:var(--accent); }
/* Dans le corps de texte, la mise en valeur est discrète : une note visuelle,
   pas un cri au milieu d'un paragraphe. */
.prose .brand-ai{ color:var(--accent-d); font-weight:650; text-shadow:none; }
.brand-baseline{
  display:none; font:500 .72rem/1 var(--mono); color:var(--faint);
  letter-spacing:.04em; padding-left:.6rem; border-left:1px solid var(--panel-b);
}
@media (min-width:1080px){ .brand-baseline{ display:inline-block; } }

/* Le sélecteur de langue est un LIEN, plus un bouton : il doit être
   navigable et indexable — c'est la moitié du correctif hreflang. */
.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:36px; padding:.35rem .6rem;
  border:1px solid var(--panel-b); border-radius:var(--r-sm);
  font:700 .78rem/1 var(--mono); color:var(--muted); background:transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lang-toggle:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- fil d'Ariane ---------- */
.breadcrumb{ max-width:var(--maxw); margin:0 auto; padding:5.6rem 1.5rem 0; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; font-size:.82rem; }
.breadcrumb li+li::before{ content:"›"; color:var(--panel-bh); margin-right:.4rem; }
.breadcrumb a{ color:var(--faint); }
.breadcrumb a:hover{ color:var(--accent); text-decoration:underline; }
.breadcrumb [aria-current]{ color:var(--ink); font-weight:600; }

/* ---------- en-tête de page ---------- */
.page-head{ padding-top:2.4rem; padding-bottom:1rem; }
.page-head h1{ font-size:clamp(2rem, 5vw, 3.15rem); margin:.4rem 0 .9rem; }
.page-head .kicker{ margin-bottom:.2rem; }
/* Le kicker de style.css a un line-height serré, pensé pour une seule ligne.
   Sur mobile un intitulé long passe sur deux lignes et elles se chevauchent. */
.kicker{ line-height:1.5; }
.lede{ max-width:62ch; color:var(--muted); font-size:1.08rem; }
.lede p+p{ margin-top:.7rem; }
.lede strong{ color:var(--ink); }

/* ---------- corps de texte long ---------- */
.prose{ max-width:72ch; margin:0 auto; }
.prose.center{ text-align:center; }
.prose h2{
  font-size:1.5rem; margin:2.6rem 0 .9rem; padding-top:1.6rem;
  border-top:1px solid var(--panel-b);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.12rem; margin:1.7rem 0 .5rem; }
.prose p{ color:var(--muted); margin-bottom:1rem; }
.prose strong{ color:var(--ink); font-weight:650; }
.prose a{ color:var(--accent-d); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--accent); }
.prose ul, .prose ol{ margin:0 0 1.2rem 1.15rem; color:var(--muted); }
.prose li{ margin-bottom:.5rem; }
.prose li strong{ color:var(--ink); }
.prose code{
  font:600 .86em var(--mono); background:var(--bg-2); color:var(--ink);
  padding:.12em .38em; border-radius:5px; border:1px solid var(--panel-b);
}
.prose .pull{
  font-size:1.22rem; font-weight:650; color:var(--ink); line-height:1.4;
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:3px solid var(--teal);
}
.inline-link{ color:var(--accent-d); font-weight:600; }
.inline-link:hover{ text-decoration:underline; }

/* ---------- encadré « piège appris sur le terrain » ----------
   C'est le bloc signature des pages capacités : le contre-exemple mesuré.
   Il doit se repérer d'un coup d'œil dans une page longue. */
.trap-h{ border-top-color:var(--gold) !important; }
.trap{
  background:var(--tint-warm);
  border:1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-left:3px solid var(--gold);
  border-radius:var(--r-sm); padding:1.2rem 1.35rem; margin-bottom:1.2rem;
}
.trap p:last-child{ margin-bottom:0; }
.trap table{ margin:1rem 0; }

/* ---------- bloc « à compléter » ----------
   Visible exprès. Une page publiée avec un trou nommé vaut mieux
   qu'une page remplie de texte générique. */
.todo-block{
  border:1px dashed var(--panel-bh); border-radius:var(--r-sm);
  background:var(--bg-2); padding:1.1rem 1.25rem; margin:1.2rem 0;
}
.todo-block p{ margin:0; font-size:.92rem; }

/* ---------- tableaux ---------- */
.table-wrap{ overflow-x:auto; margin-bottom:1.4rem; max-width:100%; }
/* Filet de sécurité : si un <table> échappe à wrap_tables, il défile quand même
   dans sa boîte au lieu d'entraîner le document entier. */
.prose table{ display:block; overflow-x:auto; max-width:100%; }
.table-wrap > table{ display:table; overflow:visible; }
.prose table, .measures{ width:100%; border-collapse:collapse; font-size:.9rem; }
.prose th, .prose td, .measures th, .measures td{
  text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--panel-b);
  vertical-align:top;
}
.prose th, .measures th{
  font:600 .74rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--panel-bh);
}
.measures td.num{ font:700 1rem var(--mono); color:var(--ink); white-space:nowrap; }
.measures code{ font-size:.78rem; color:var(--faint); background:transparent; border:0; padding:0; }
.tag-manual{
  display:inline-block; font:600 .64rem/1 var(--mono); letter-spacing:.06em;
  color:var(--gold-d); background:var(--tint-gold); border:1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius:4px; padding:.2em .4em; margin-left:.35rem; vertical-align:middle;
}
.measured-at{ font-size:.88rem; color:var(--faint); margin-bottom:1.2rem; }

/* ---------- listes de liens ---------- */
.link-grid{ list-style:none; margin-left:0 !important; display:grid; gap:.5rem; }
.link-grid li{
  padding:.7rem .9rem; border:1px solid var(--panel-b); border-radius:var(--r-sm);
  background:var(--panel-s); font-size:.92rem; transition:border-color .2s var(--ease);
}
.link-grid li:hover{ border-color:var(--accent); }
.link-grid a{ color:var(--accent-d); font-weight:600; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.deliverables{ counter-reset:d; list-style:none; margin-left:0 !important; }
.deliverables li{
  counter-increment:d; position:relative; padding-left:2.4rem; margin-bottom:.85rem;
}
.deliverables li::before{
  content:counter(d,decimal-leading-zero); position:absolute; left:0; top:.05em;
  font:700 .8rem/1.5 var(--mono); color:var(--teal-d);
}
.planned{ color:var(--muted); }
.planned li{ margin-bottom:.55rem; }
.notice{
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius:var(--r-sm); padding:1rem 1.15rem; color:var(--ink) !important;
}

/* ---------- questions fréquentes ---------- */
.faq{
  border:1px solid var(--panel-b); border-radius:var(--r-sm);
  margin-bottom:.6rem; background:var(--panel-s);
}
.faq summary{
  cursor:pointer; padding:.9rem 1.1rem; font-weight:650; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-weight:700; flex:none; }
.faq[open] summary::after{ content:"−"; }
.faq > div{ padding:0 1.1rem 1rem; }
.faq > div p{ margin:0; color:var(--muted); font-size:.94rem; }

/* ---------- fiches projet / offre en page ---------- */
.proj-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.6rem; }
.offer-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.offer-meta span{
  font:600 .72rem/1 var(--mono); letter-spacing:.04em; color:var(--faint);
  border:1px solid var(--panel-b); border-radius:99px; padding:.4em .8em;
}
.offer-meta.big span{ font-size:.82rem; }
.offer .offer-n{ font:800 .78rem/1 var(--mono); color:var(--teal-d); letter-spacing:.08em; }
.offer h3 a{ color:inherit; }
.offer h3 a:hover{ color:var(--accent); }
.proj h3 a{ color:inherit; }
.proj h3 a:hover{ color:var(--accent); }
.proj-badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.badge{
  font:600 .66rem/1 var(--mono); letter-spacing:.05em; padding:.35em .6em;
  border-radius:4px; border:1px solid var(--panel-b); color:var(--faint);
}
.badge-os{ color:var(--indigo-d); border-color:color-mix(in srgb, var(--indigo) 28%, transparent);
  background:color-mix(in srgb, var(--indigo) 8%, var(--panel)); }
.badge-live{ color:var(--accent-d); border-color:color-mix(in srgb, var(--accent) 28%, transparent);
  background:var(--accent-soft); }
.proj-link{
  display:inline-block; margin-top:.9rem; font-weight:650; font-size:.88rem;
  color:var(--accent-d);
}
.proj-link:hover{ text-decoration:underline; }
.muted{ color:var(--faint); font-size:.9rem; }

/* ---------- portes de contact / bancs d'essai ---------- */
.doors{ display:grid; gap:.9rem; margin-bottom:1.6rem; }
.door{
  border:1px solid var(--panel-b); border-left:3px solid var(--teal);
  border-radius:var(--r-sm); padding:1rem 1.2rem; background:var(--panel-s);
}
.door h3{ font-size:1rem; margin-bottom:.3rem; }
.door p{ color:var(--muted); font-size:.9rem; }
.bench{
  border:1px solid var(--panel-b); border-radius:var(--r); padding:1.5rem;
  background:var(--panel-s); display:flex; flex-direction:column; gap:.6rem;
}
.bench h3{ font-size:1.08rem; }
.bench p{ color:var(--muted); font-size:.92rem; flex:1; }
.bench .btn{ align-self:flex-start; }
.demo-fallback{
  margin-top:1rem; font-size:.85rem; color:var(--faint); line-height:1.6;
  border-top:1px solid var(--panel-b); padding-top:.9rem;
}
.privacy-note{
  margin-top:1.2rem; font-size:.85rem; color:var(--faint); line-height:1.6;
  background:var(--bg-2); border-radius:var(--r-sm); padding:.9rem 1rem;
}

/* ---------- bandeau de mesures ---------- */
.metrics-note{
  grid-column:1/-1; text-align:center; font-size:.8rem; color:var(--faint);
  margin-top:.6rem;
}
.metrics-note a{ color:var(--faint); text-decoration:underline; text-underline-offset:2px; }
.metrics-note a:hover{ color:var(--accent); }

/* ---------- bandeau de conversion ---------- */
.cta-band{ padding-top:1rem; }
.cta-card{
  max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.6rem;
  border:1px solid var(--panel-b); border-radius:var(--r); padding:2rem 2.2rem;
  background:var(--grad-soft);
}
.cta-card h2{ font-size:1.5rem; margin-bottom:.4rem; }
.cta-card p{ color:var(--muted); max-width:52ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.center{ text-align:center; }

/* ---------- pied de page ---------- */
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:2rem; text-align:left; padding-bottom:2.2rem;
  border-bottom:1px solid var(--panel-b); margin-bottom:1.8rem;
}
.footer-col h2{
  font:600 .72rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin-bottom:.9rem;
}
.footer-col ul{ list-style:none; display:grid; gap:.5rem; }
.footer-col a{ color:var(--muted); font-size:.9rem; }
.footer-col a:hover{ color:var(--accent); text-decoration:underline; }
.footer-base{ text-align:center; }
.footer-manifesto{
  max-width:56ch; margin:.6rem auto .8rem; color:var(--muted);
  font-size:.94rem; font-style:italic;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .breadcrumb{ padding-top:4.8rem; }
  .cta-card{ padding:1.6rem; }
  .prose h2{ font-size:1.3rem; }
}
@media (min-width:720px){
  .doors{ grid-template-columns:1fr; }
  .link-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- mouvement réduit ----------
   style.css gère déjà .reveal ; on couvre ici les composants ajoutés. */
@media (prefers-reduced-motion:reduce){
  .link-grid li, .lang-toggle, .proj-link{ transition:none; }
}

/* ---------- impression ----------
   Un dossier technique se relit souvent sur papier. */
@media print{
  .nav, .to-top, .scroll-progress, .cosmos, .spotlight,
  .cta-band, .footer-grid, .breadcrumb{ display:none !important; }
  body{ background:#fff; color:#111; }
  :root{ --ink:#111; --muted:#333; --panel:#fff; --panel-s:#fff; --bg:#fff; --bg-2:#fff; }
  .prose{ max-width:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; color:#555; }
}

/* tabicl.html : remplace un style="margin-left:auto" inline (bloqué par CSP). */
.nav-links-right{ margin-left:auto; }
/* Marges reprises des style= inline retirés de tabicl.html pour la CSP. */
.mt-6{ margin-top:1.5rem; }
.mt-9{ margin-top:2.2rem; }

/* ---------- bascule de thème ----------
   Bouton, pas lien : il ne mène nulle part. Cible tactile ≥ 44 px.
   L'icône affichée est celle du thème VERS lequel on va, pas celui en cours —
   un soleil sur fond sombre signifie « cliquer pour éclaircir ». */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:36px; padding:0; cursor:pointer;
  border:1px solid var(--panel-b); border-radius:var(--r-sm);
  background:transparent; color:var(--muted);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.theme-ico{
  width:16px; height:16px; display:block;
  background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
/* Masques SVG en data: URI — aucune requête, conforme à `img-src 'self' data:`. */
.theme-ico-moon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}
.theme-ico-sun{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cg%3E%3Crect x='11' y='1' width='2' height='4' rx='1'/%3E%3Crect x='11' y='19' width='2' height='4' rx='1'/%3E%3Crect x='1' y='11' width='4' height='2' rx='1'/%3E%3Crect x='19' y='11' width='4' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cg%3E%3Crect x='11' y='1' width='2' height='4' rx='1'/%3E%3Crect x='11' y='19' width='2' height='4' rx='1'/%3E%3Crect x='1' y='11' width='4' height='2' rx='1'/%3E%3Crect x='19' y='11' width='4' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}
/* En clair on propose la lune ; en sombre, le soleil. */
.theme-ico-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-ico-moon{ display:none; }
  :root:not([data-theme="light"]) .theme-ico-sun{ display:block; }
}
:root[data-theme="dark"] .theme-ico-moon{ display:none; }
:root[data-theme="dark"] .theme-ico-sun{ display:block; }
:root[data-theme="light"] .theme-ico-moon{ display:block; }
:root[data-theme="light"] .theme-ico-sun{ display:none; }

@media print{ .theme-toggle, .lang-toggle{ display:none !important; } }

/* ---------- pages projet : incident et chiffres ----------
   L'encadré « ce qui a mal tourné » se distingue du « piège » (ambre) :
   rouge sourd, parce qu'il raconte un incident subi, pas une leçon tirée. */
.wrong{
  background:color-mix(in srgb, var(--red) 5%, var(--panel));
  border:1px solid color-mix(in srgb, var(--red) 22%, transparent);
  border-left:3px solid var(--red);
  border-radius:var(--r-sm); padding:1.2rem 1.35rem; margin-bottom:1.2rem;
}
.wrong p:last-child{ margin-bottom:0; }
.fig-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.9rem; margin-bottom:1.4rem;
}
.fig{
  border:1px solid var(--panel-b); border-radius:var(--r-sm);
  background:var(--panel-s); padding:1rem 1.1rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.fig-v{ font:800 1.35rem/1.1 var(--mono); color:var(--ink); }
.fig-l{ font-size:.82rem; color:var(--muted); line-height:1.4; }