/* ============================================================
   KIT DE CONTINUITÉ — le langage de la home, factorisé.
   Toute sous-page se construit avec ces composants et rien d'autre.
   Palette et polices : les tokens de styles.css, aucune nouveauté.
   ============================================================ */

/* ---- 1. Hero de chapitre : kicker numéroté + titre Agency + lede ---- */
.k-hero{
  padding-top:clamp(120px,16vh,190px);
  padding-bottom:clamp(28px,4vw,60px);
}
.k-hero .d-1{margin-top:18px;font-size:clamp(44px,6.4vw,104px)}
.k-hero .lede{margin-top:24px;max-width:64ch}

/* ---- 2. Numérotation unifiée : Agency sable plein ---- */
.k-num{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  line-height:1;color:var(--ornament);
}
.k-num-lg{font-size:clamp(56px,6.4vw,96px)}
.k-num-md{font-size:clamp(30px,3vw,44px)}

/* ---- 3. Intro : colonne collante + contenu ---- */
.k-cols{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,90px);align-items:start;
}
.k-side{position:sticky;top:clamp(90px,14vh,140px)}
.k-side .d-2,.k-side .d-3{margin-top:16px}
@media(max-width:1000px){
  .k-cols{grid-template-columns:1fr;gap:clamp(22px,4vw,40px)}
  .k-side{position:static}
}

/* ---- 4. Carte sombre (le langage projets de la home, version ouverte) ---- */
.k-card-dark{
  background:var(--dark-panel);color:var(--cream-on-dark);
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:16px;
  padding:clamp(20px,2.6vw,36px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .k-card-dark:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--sand-rgb),.45);
    box-shadow:0 20px 50px rgba(var(--ink-rgb),.28);
  }
}
.k-card-dark .k-title{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(21px,2.1vw,32px);line-height:1.1;letter-spacing:-.01em;
  text-transform:none;color:var(--cream-on-dark);max-width:26ch;
}
.k-card-dark .k-claim{
  margin-top:8px;color:rgba(var(--cream-rgb),.68);
  font-size:clamp(14.5px,1.05vw,16.5px);max-width:58ch;
}
/* fiche technique interne : colonnes séparées par des filets crème */
.k-card-dark .k-spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  /* rangees espacees quand les volets passent sur deux lignes */
  gap:clamp(18px,2.2vw,28px) 0;margin-top:clamp(18px,2.2vw,28px);
  border-top:1px solid rgba(var(--cream-rgb),.16);
  padding-top:clamp(14px,1.6vw,20px);
}
.k-card-dark .k-spec .mini{padding:0 clamp(16px,1.8vw,28px)}
.k-card-dark .k-spec .mini:first-child{padding-left:0}
.k-card-dark .k-spec .mini + .mini{border-left:1px solid rgba(var(--cream-rgb),.14)}
.k-card-dark .k-spec .mini h4{
  color:var(--ornament);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
}
.k-card-dark .k-spec .mini h4::before{border-color:rgba(var(--cream-rgb),.5)}
.k-card-dark .k-spec .mini ul{color:rgba(var(--cream-rgb),.72);font-size:13.5px;line-height:1.7}
.k-card-dark .k-spec .mini li::before{background:var(--ornament)}
@media(max-width:760px){
  .k-card-dark .k-spec .mini{padding:14px 0}
  .k-card-dark .k-spec .mini + .mini{border-left:none;border-top:1px solid rgba(var(--cream-rgb),.14)}
}

/* ---- 5. Bande panneau sable (grilles secondaires) ---- */
.k-panel{background:var(--panel)}

/* ---- 6. Médaillon à pictogramme (tags 26px / piliers 52px) ---- */
.k-ic{
  border-radius:50%;background:var(--ornament);border:1.5px solid var(--ink);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.k-ic-sm{width:26px;height:26px}
.k-ic-sm svg{width:13px;height:13px;display:block}
.k-ic-lg{width:clamp(46px,4vw,58px);aspect-ratio:1}
.k-ic-lg svg{width:46%;height:46%;display:block}

/* coches de réalisations sur carte sombre */
.k-card-dark .checks li{padding-left:26px;position:relative;line-height:1.7}
.k-card-dark .checks li::before{
  content:"✓";position:absolute;left:0;top:.32em;
  width:16px;height:16px;border-radius:50%;
  background:var(--ornament);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
}
.k-card-dark .checks li{list-style:none}

/* ---- 7. Carte à visuel : l'aurore de la home + médaillon thématique ---- */
/* ---- carte à visuel : aurore à gauche, dossier à droite ---- */
.k-card-dark.k-has-visual{
  display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  gap:clamp(20px,2.6vw,40px);padding:clamp(16px,1.8vw,24px);
}
.k-visual{
  position:relative;border-radius:12px;overflow:hidden;
  min-height:clamp(240px,24vw,320px);
  display:flex;align-items:center;justify-content:center;
}
.k-card-dark .k-inner{padding:clamp(8px,1vw,16px) clamp(4px,.6vw,12px) clamp(8px,1vw,16px) 0}
.k-visual .v-top{
  position:absolute;top:14px;left:14px;right:14px;
  display:flex;justify-content:space-between;gap:10px;z-index:2;
  color:var(--cream-on-dark);
}
.k-visual .v-num{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--cream-rgb),.4);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;
  background:rgba(var(--ink-rgb),.4);backdrop-filter:blur(6px);
}
.k-visual .v-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.k-visual .v-tags span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(var(--cream-rgb),.35);border-radius:999px;padding:5px 11px;
  background:rgba(var(--ink-rgb),.4);backdrop-filter:blur(6px);
}
/* le grain de la home */
.k-visual::after{
  content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* les cinq aurores de la home, en rotation */
.v-aurore.va-1{background:radial-gradient(120% 100% at 20% 0%,rgba(var(--accent-rgb),.32),transparent 55%),radial-gradient(130% 120% at 90% 100%,rgba(var(--proj-glow-rgb),.6),transparent 60%),linear-gradient(160deg,var(--proj-1a),var(--dark))}
.v-aurore.va-2{background:radial-gradient(120% 100% at 80% 0%,rgba(var(--accent-rgb),.26),transparent 50%),linear-gradient(200deg,var(--proj-2a),var(--dark))}
.v-aurore.va-3{background:radial-gradient(100% 100% at 50% 100%,rgba(var(--accent-rgb),.22),transparent 55%),linear-gradient(180deg,var(--proj-3a),var(--proj-3b))}
.v-aurore.va-4{background:radial-gradient(140% 90% at 10% 90%,rgba(var(--accent-rgb),.3),transparent 55%),linear-gradient(150deg,var(--proj-4a),var(--proj-4b))}
.v-aurore.va-5{background:radial-gradient(120% 110% at 90% 20%,rgba(var(--accent-rgb),.24),transparent 50%),linear-gradient(210deg,var(--proj-5a),var(--proj-5b))}
/* médaillon géant */
.k-ic-xl{width:clamp(84px,8vw,110px);aspect-ratio:1;box-shadow:0 18px 50px rgba(var(--ink-rgb),.45)}
.k-ic-xl svg{width:44%;height:44%;display:block}

/* variante photo : une vraie image remplace l'aurore, memes pastilles, meme grain */
.k-visual.v-photo>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.k-visual.v-photo>img.pos-top{object-position:center top}

/* ---- mobile : flux normal, visuel en bandeau ---- */
@media(max-width:900px){
  .k-card-dark.k-has-visual{grid-template-columns:1fr}
  .k-visual{min-height:0;aspect-ratio:16/10}
}

/* ---- 8. Accordéons de bande navy (le chapitre lourd d'About) ---- */
.on-dark .k-acc{border-top:1px solid rgba(var(--cream-rgb),.16)}
.on-dark .k-acc .acc-item{border-bottom-color:rgba(var(--cream-rgb),.16)}
.on-dark .k-acc .acc-head .idx{
  font-family:var(--font-title);font-size:clamp(18px,2vw,30px);letter-spacing:0;
  color:var(--ornament);
}
.on-dark .k-acc .acc-head h3{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(24px,3vw,44px);color:var(--cream-on-dark);
}
.on-dark .k-acc .acc-sub{color:rgba(var(--cream-rgb),.55)}
.on-dark .k-acc .acc-icon{border-color:rgba(var(--cream-rgb),.4)}
.on-dark .k-acc .acc-icon::before,
.on-dark .k-acc .acc-icon::after{background:var(--cream-on-dark)}
.on-dark .k-acc .acc-item.open .acc-icon::before,
.on-dark .k-acc .acc-item.open .acc-icon::after,
.on-dark .k-acc .acc-head:hover .acc-icon::before,
.on-dark .k-acc .acc-head:hover .acc-icon::after{background:var(--navy)}
@media(hover:hover) and (pointer:fine){
  .on-dark .k-acc .acc-head h3{transition:transform .5s var(--ease)}
  .on-dark .k-acc .acc-head:hover h3{transform:translateX(12px)}
}
.on-dark .k-acc .acc-content{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,28px);
}
@media(max-width:760px){.on-dark .k-acc .acc-content{grid-template-columns:1fr}}
.on-dark .k-acc .acc-content .lead-line{color:rgba(var(--cream-rgb),.82);max-width:72ch}
.on-dark .k-acc .acc-content strong{color:var(--cream-on-dark)}
.on-dark .k-acc .mini{
  background:var(--dark-panel);
  border:1px solid rgba(var(--cream-rgb),.14);
  border-radius:14px;
  padding:clamp(20px,2.2vw,30px);
}
.on-dark .k-acc .mini h4{color:var(--ornament);margin-bottom:14px}
.on-dark .k-acc .mini h4::before{border-color:rgba(var(--cream-rgb),.5)}
.on-dark .k-acc .mini ul{color:rgba(var(--cream-rgb),.72)}
.on-dark .k-acc .mini li::before{background:var(--ornament)}
.on-dark .k-acc .mini:last-child:nth-child(even){grid-column:auto}

/* ---- 9. Grille à filets : colonnes à trait noir + numéro sable ---- */
.k-rules-grid{
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
}
@media(max-width:900px){.k-rules-grid{grid-template-columns:1fr}}
.k-rule-item{border-top:2px solid var(--ink);padding-top:clamp(14px,1.8vw,22px)}
.on-dark .k-rule-item{border-top-color:rgba(var(--cream-rgb),.5)}
.k-rule-item h3{
  margin-top:12px;
  font-family:var(--font-body);font-weight:600;font-size:clamp(16px,1.3vw,19px);
  letter-spacing:-.015em;text-transform:none;
}
.k-rule-item p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.6}
.on-dark .k-rule-item p{color:rgba(var(--cream-rgb),.65)}

/* ---- 10. Citation de clôture en Agency ---- */
.on-dark.quote-block blockquote{
  font-family:var(--font-title);font-weight:400;font-synthesis:none;
  font-size:clamp(28px,3.8vw,58px);line-height:1.12;letter-spacing:-.01em;
  max-width:22ch;margin-inline:auto;
}

/* ---- 11. Mot fantôme de clôture (le bas de page de Projets, généralisé) ---- */
.k-ghost-host{position:relative;overflow:hidden;padding-bottom:clamp(70px,9vw,150px)}
.section:not(.on-dark) .cta-ghost,
.k-ghost-host:not(.on-dark) .cta-ghost{
  -webkit-text-stroke-color:rgba(var(--ink-rgb),.13);
}