@charset "UTF-8";
/*
Theme Name: Kamkok
Theme URI: https://restaurant-kamkok.fr
Author: Agence Netlinqueen
Description: Kamkok, magazine de cuisine. Archetype BQ, la planche et les quatre crans.
Version: 1.0.4
Text Domain: restaurant-kamkok
*/

/* =========================================================================
   KAMKOK — ARCHETYPE BQ « Planche photographique et quatre crans »

   Le systeme tient en quatre regles, toutes verifiables sur le rendu :

   1. UN SEUL RAPPORT D IMAGE. Toute photographie du site, sans une seule
      exception, est posee en aspect-ratio: var(--kk-planche). La variable
      vaut 21/9 et n est redefinie qu une fois, sous 900px, a 4/3. Le reseau
      joue partout sur la variete des cadrages, ici la focale est unique.
   2. QUATRE CRANS DE TEXTE. Manchette, plat, corps, micro. Rien entre les
      deux. Les themes freres en comptent six ou sept.
   3. AUCUNE CARTE. Zero border-radius, zero box-shadow, zero bordure de
      bloc. La separation vient du blanc et du filet capillaire.
   4. UN ACCENT BIDIRECTIONNEL. La figue #6B2D5C mesure 9,74:1 aussi bien
      en texte sur blanc que pour du blanc pose dessus. Une seule valeur
      suffit la ou la plupart des themes en maintiennent deux.
   ========================================================================= */

:root {
    /* Papier et encre. Le blanc est pur, la surface est FROIDE, jamais beige. */
    --kk-blanc:      #FFFFFF;
    --kk-craie:      #F3F2F3;
    --kk-craie-2:    #E9E6E9;
    --kk-encre:      #131013;   /* 18,90:1 sur blanc */
    --kk-doux:       #3C363B;   /* 11,78:1 */
    --kk-gris:       #5E565C;   /*  7,09:1 */
    --kk-filet:      #E3DFE2;
    --kk-filet-fort: #C6BEC4;

    /* L accent unique. */
    --kk-figue:      #6B2D5C;   /* 9,74:1 dans les deux sens */
    --kk-figue-p:    #4E1F43;
    --kk-figue-c:    #D8A9C8;   /* 9,39:1 sur l encre */
    /* Teinte reservee aux libelles poses SUR une planche voilee : le rose
       moyen n y tenait que 4,00:1, sous le seuil du petit texte. Mesure
       refaite sur le rendu : 5,88:1. */
    --kk-rose-clair: #EFD5E6;
    --kk-clair:      #F6F1F4;   /* 8,73:1 sur la figue */

    /* LE rapport d image du site. Une seule declaration, aucune exception. */
    --kk-planche: 21 / 9;

    /* Les quatre crans, et rien entre eux. */
    --kk-t-manchette: clamp(2.4rem, 5.6vw, 5.2rem);
    --kk-t-plat:      clamp(1.3rem, 1.9vw, 1.7rem);
    --kk-t-corps:     1rem;
    --kk-t-micro:     0.72rem;

    --kk-rang:  1280px;
    /* Mesure unique de la colonne de lecture, en px et non en ch : sinon
       chaque bloc calcule sa largeur sur sa propre taille de police et les
       bords ne s alignent pas. */
    --kk-mesure: 660px;
    --kk-marge: clamp(20px, 5vw, 56px);
    --kk-hh:    72px;

    --kk-serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
    --kk-sans:  "Fustat", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (max-width: 900px) {
    :root { --kk-planche: 4 / 3; --kk-hh: 64px; }
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--kk-blanc);
    color: var(--kk-encre);
    font-family: var(--kk-sans);
    font-size: var(--kk-t-corps);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }

/* Aucun arrondi decoratif nulle part. Le seul rayon du theme est le
   contour de focus, et c est deliberement le seul. */
*:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--kk-figue);
    outline-offset: 3px;
    border-radius: 2px;
}
.kk-sombre :focus-visible,
.kk-carnet :focus-visible,
.kk-pied :focus-visible { outline-color: var(--kk-figue-c); }

.kk-saut {
    position: absolute; left: -9999px; top: 0;
    background: var(--kk-encre); color: #fff; padding: 12px 18px; z-index: 999;
}
.kk-saut:focus { left: 12px; top: 12px; }

.kk-rang { width: 100%; max-width: var(--kk-rang); margin: 0 auto; padding: 0 var(--kk-marge); }
.kk-plein { width: 100%; }

/* ── La planche : l unique traitement d image du theme ────────────────── */
.kk-planche {
    position: relative;
    overflow: hidden;
    background: var(--kk-craie-2);
    aspect-ratio: var(--kk-planche);
}
.kk-planche img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* aspect-ratio est porte par le CONTENEUR, jamais par l img, pour que
       les attributs width/height natifs de WordPress ne reprennent pas la
       main sur le cadrage (cf. resolution du cas moreha v1.0.2). */
}

/* ── Typographie ─────────────────────────────────────────────────────── */
.kk-manchette {
    font-family: var(--kk-serif);
    font-weight: 400;
    font-size: var(--kk-t-manchette);
    line-height: 1.02;
    letter-spacing: -0.015em;
}
.kk-plat {
    font-family: var(--kk-serif);
    font-weight: 400;
    font-size: var(--kk-t-plat);
    line-height: 1.16;
}
.kk-micro {
    font-family: var(--kk-sans);
    font-size: var(--kk-t-micro);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.2;
}
.kk-accent { color: var(--kk-figue); }
/* Sur une planche voilee, la figue foncee ne se detacherait pas : l accent
   bascule sur sa variante claire, mesuree a 9,39:1 sur l encre. */
.kk-ouverture-texte .kk-accent,
.kk-coiffe-texte .kk-accent,
.kk-rubrique-texte .kk-accent { color: var(--kk-figue-c); }
.kk-souligne {
    color: var(--kk-figue);
    box-shadow: inset 0 -0.09em 0 0 var(--kk-figue);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.kk-deck {
    font-size: 1.06rem;
    line-height: 1.62;
    color: var(--kk-doux);
    max-width: 60ch;
}

/* ── L etiquette de section : un filet, un mot ────────────────────────── */
.kk-etiquette {
    display: flex; align-items: center; gap: 16px;
    border-top: 1px solid var(--kk-encre);
    padding-top: 12px;
    margin-bottom: 34px;
}
.kk-etiquette::after { content: ""; flex: 1 1 auto; }
.kk-etiquette .kk-micro { color: var(--kk-figue); }
.kk-etiquette-compte { color: var(--kk-gris); font-size: var(--kk-t-micro); letter-spacing: 0.1em; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.kk-bouton {
    display: inline-block;
    font-family: var(--kk-sans);
    font-size: var(--kk-t-micro);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 15px 30px;
    background: var(--kk-encre);
    color: var(--kk-blanc);
    transition: background 200ms ease;
    cursor: pointer;
}
.kk-bouton:hover { background: var(--kk-figue); }
.kk-bouton--ligne { background: none; color: var(--kk-encre); box-shadow: inset 0 0 0 1.5px var(--kk-encre); }
.kk-bouton--ligne:hover { background: var(--kk-encre); color: var(--kk-blanc); }
.kk-bouton--clair { background: var(--kk-blanc); color: var(--kk-encre); }
.kk-bouton--clair:hover { background: var(--kk-figue-c); color: var(--kk-encre); }

/* ── En-tete : solide, jamais transparente ───────────────────────────── */
.kk-entete {
    position: sticky; top: 0; z-index: 50;
    background: var(--kk-blanc);
    border-bottom: 1px solid var(--kk-filet);
    transition: border-color 200ms ease;
}
.kk-entete--fixe { border-bottom-color: var(--kk-encre); }
.kk-entete-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: var(--kk-hh);
}
.kk-marque { display: inline-flex; align-items: center; color: var(--kk-encre); }
.kk-marque svg { height: 30px; width: auto; }

.kk-nav-liste { display: flex; align-items: center; gap: 30px; }
.kk-nav-liste a {
    font-family: var(--kk-sans);
    font-size: var(--kk-t-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kk-encre);
    padding: 6px 0;
    position: relative;
}
.kk-nav-liste a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1.5px; background: var(--kk-figue);
    transform: scaleX(0); transform-origin: left;
    transition: transform 220ms ease;
}
.kk-nav-liste a:hover::after,
.kk-nav-liste a.est-courant::after { transform: scaleX(1); }
.kk-nav-liste .kk-nav-contact {
    box-shadow: inset 0 0 0 1.5px var(--kk-encre);
    padding: 9px 18px;
    transition: background 200ms ease, color 200ms ease;
}
.kk-nav-liste .kk-nav-contact::after { display: none; }
.kk-nav-liste .kk-nav-contact:hover { background: var(--kk-encre); color: var(--kk-blanc); }

/* Elements strictement mobiles : masques sur desktop, hors media query. */
.kk-nav-close { display: none; }
.kk-nav-logo  { display: none; }
.kk-burger    { display: none; }

/* ── Le hero : une planche, la manchette dessus, la legende dessous ──── */
.kk-ouverture-planche { position: relative; }

/* Regle GLOBALE, surtout pas scopee a un bloc. Scopee a
   .kk-ouverture-planche et .kk-coiffe, elle laissait les voiles de la
   planche de rubrique en flux normal, donc hauts de zero pixel : la photo
   n y etait pas voilee du tout et le titre tombait sur du bois clair.
   Constate a la mesure (1,13:1) puis confirme sur la capture. */
.kk-voile {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Le voile est fait de trois couches superposees : un assombrissement
   general leger, une remontee sombre par le bas pour porter la manchette,
   et une nappe figue en diagonale qui rattache la photo a la palette. */
/* Les valeurs ci-dessous ont ete relevees sur le rendu, texte masque, en
   n echantillonnant que la boite de chaque element de texte. La premiere
   version (.86 a 0%, nul des 62%) laissait le haut du H1 sur une zone
   claire de la photo : 3,39:1, sous le seuil. La remontee est donc plus
   haute et plus soutenue. */
.kk-voile--1 { background: linear-gradient(180deg, rgba(19,16,19,.42) 0%, rgba(19,16,19,.18) 42%, rgba(19,16,19,.16) 100%); }
.kk-voile--2 { background: linear-gradient(0deg, rgba(19,16,19,.94) 0%, rgba(19,16,19,.88) 26%, rgba(19,16,19,.70) 48%, rgba(19,16,19,.34) 70%, rgba(19,16,19,0) 92%); }
.kk-voile--3 { background: linear-gradient(118deg, rgba(107,45,92,.36) 0%, rgba(107,45,92,.05) 62%); }

.kk-ouverture-texte {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 var(--kk-marge) clamp(24px, 4vw, 52px);
}
.kk-ouverture-texte .kk-rang { padding: 0; }
.kk-ouverture-texte .kk-manchette { color: #fff; max-width: 17ch; }
/* inline-block : la boite epouse le texte au lieu de s etendre sur toute
   la largeur du hero, ou elle chevaucherait les zones claires de la photo. */
.kk-ouverture-oeil { color: var(--kk-rose-clair); margin-bottom: 16px; display: inline-block; }
.kk-coiffe-texte .kk-micro,
.kk-rubrique-texte .kk-micro { color: var(--kk-rose-clair); }

/* Ces blocs portent AUSSI la classe .kk-rang, qui fournit la marge
   laterale. Un raccourci « padding: X 0 » remettrait cette marge a zero et
   collerait le texte au bord du viewport sous 1280px, la ou le max-width ne
   masque plus l erreur. On ne touche donc qu au vertical.
   (cf. design/CLAUDE.md, resolution d erreurs #11) */
.kk-legende { padding-top: clamp(32px, 4vw, 54px); padding-bottom: clamp(40px, 5vw, 68px); }
.kk-legende-grille {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px); align-items: start;
}
.kk-legende-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.kk-releves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kk-releve { border-top: 1px solid var(--kk-encre); padding-top: 12px; }
.kk-releve-n {
    font-family: var(--kk-serif);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1; color: var(--kk-figue);
}
.kk-releve-l { color: var(--kk-gris); font-size: var(--kk-t-micro); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }

/* ── Le fil : aucune carte, deux colonnes ────────────────────────────── */
.kk-fil { padding: clamp(36px, 5vw, 64px) 0; }
.kk-tete-article { margin-bottom: clamp(40px, 5vw, 72px); }
.kk-tete-article .kk-planche { margin-bottom: 22px; }
.kk-tete-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }

.kk-fil-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 4vw, 56px) clamp(24px, 4vw, 52px);
}
.kk-billet { display: block; }
.kk-billet .kk-planche { margin-bottom: 16px; }
.kk-billet-meta {
    border-top: 1px solid var(--kk-filet-fort);
    padding-top: 11px; margin-bottom: 10px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.kk-billet-cat { color: var(--kk-figue); }
.kk-billet-duree { color: var(--kk-gris); font-size: var(--kk-t-micro); letter-spacing: 0.1em; }
.kk-billet h2, .kk-billet h3 { transition: color 200ms ease; }
.kk-billet:hover h2, .kk-billet:hover h3 { color: var(--kk-figue); }
.kk-billet img { transition: transform 600ms ease; }
.kk-billet:hover img { transform: scale(1.03); }
.kk-billet-extrait { color: var(--kk-doux); margin-top: 10px; font-size: 0.95rem; }

/* ── La rubrique : une seule, donc une planche pleine largeur ─────────── */
.kk-rubrique { padding: clamp(36px, 5vw, 64px) 0; }
.kk-rubrique-lien { display: block; position: relative; }
.kk-rubrique-lien .kk-planche img { transition: transform 800ms ease; }
.kk-rubrique-lien:hover .kk-planche img { transform: scale(1.04); }
.kk-rubrique-texte {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(20px, 3vw, 44px);
    color: #fff;
}
.kk-rubrique-texte .kk-manchette { color: #fff; }
.kk-rubrique-fleche { margin-top: 14px; color: var(--kk-figue-c); }

/* ── Le carnet : le seul aplat de couleur du site ─────────────────────── */
.kk-carnet { background: var(--kk-figue); color: var(--kk-clair); }
.kk-carnet-inner { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(40px, 6vw, 84px); }
.kk-carnet-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(26px, 4vw, 64px); align-items: center;
}
.kk-carnet .kk-etiquette { border-top-color: rgba(246,241,244,.42); }
.kk-carnet .kk-etiquette .kk-micro { color: var(--kk-figue-c); }
.kk-carnet-nom { font-family: var(--kk-serif); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; color: #fff; }
.kk-carnet-role { color: var(--kk-figue-c); margin-top: 10px; }
.kk-carnet-bio { margin-top: 20px; color: var(--kk-clair); }
.kk-carnet-bio p { margin-bottom: 0.9em; }
.kk-carnet-bio ul { margin: 0 0 1em; }
.kk-carnet-bio li { position: relative; padding-left: 1.5em; margin-bottom: 0.45em; }
.kk-carnet-bio li::before {
    content: ""; position: absolute; left: 0; top: 0.5em;
    width: 10px; height: 10px;
    border: 1.8px solid var(--kk-figue-c);
    border-color: var(--kk-figue-c) var(--kk-figue-c) transparent transparent;
    border-radius: 50%;
    transform: rotate(-40deg);
}
.kk-carnet .kk-bouton { margin-top: 22px; }

/* ── Article ─────────────────────────────────────────────────────────── */
.kk-coiffe { position: relative; }
/* (positionnement des voiles : voir la regle globale .kk-voile plus haut) */
.kk-coiffe-texte {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--kk-marge) clamp(22px, 3.5vw, 48px);
    color: #fff;
}
.kk-coiffe-texte .kk-rang { padding: 0; }
.kk-coiffe-texte h1 { color: #fff; max-width: 20ch; }
.kk-coiffe--uni { background: var(--kk-encre); aspect-ratio: auto; padding: clamp(46px, 7vw, 92px) 0; }
.kk-coiffe--uni .kk-coiffe-texte { position: static; padding: 0; }

.kk-fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: var(--kk-t-micro); letter-spacing: 0.1em; text-transform: uppercase; }
.kk-fil-ariane a { color: rgba(255,255,255,.96); }
.kk-fil-ariane a:hover { color: #fff; text-decoration: underline; }
.kk-fil-ariane span { color: rgba(255,255,255,.6); }
.kk-fil-ariane .kk-sep { color: rgba(255,255,255,.45); }
.kk-fil-ariane--encre a { color: var(--kk-gris); }
.kk-fil-ariane--encre a:hover { color: var(--kk-encre); }
.kk-fil-ariane--encre span { color: var(--kk-gris); }
.kk-fil-ariane--encre .kk-sep { color: var(--kk-filet-fort); }

.kk-article { padding: clamp(34px, 5vw, 60px) 0; }
.kk-article-meta { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; border-bottom: 1px solid var(--kk-filet); padding-bottom: 16px; margin-bottom: 30px; color: var(--kk-gris); }
.kk-vedette { margin-bottom: 32px; }
.kk-lecture { max-width: var(--kk-mesure, 74ch); margin-inline: auto; }
.kk-lecture > * { margin-bottom: 1.25em; }

/* ── entry-content ───────────────────────────────────────────────────── */
.entry-content { font-size: 1.03rem; line-height: 1.75; color: var(--kk-doux); }
.entry-content p { margin-bottom: 1.25em; }
.entry-content h2 { font-family: var(--kk-serif); font-weight: 400; font-size: var(--kk-t-plat); color: var(--kk-encre); margin: 1.9em 0 0.6em; }
.entry-content h3 { font-family: var(--kk-serif); font-weight: 400; font-size: 1.22rem; color: var(--kk-encre); margin: 1.6em 0 0.5em; }
.entry-content a { color: var(--kk-figue); box-shadow: inset 0 -1px 0 0 var(--kk-figue); }
.entry-content a:hover { background: var(--kk-figue); color: #fff; box-shadow: none; }
.entry-content img { margin: 1.6em 0; }
.entry-content strong { font-weight: 700; color: var(--kk-encre); }
.entry-content blockquote {
    border-left: 2px solid var(--kk-figue);
    padding-left: 22px; margin: 1.8em 0;
    font-family: var(--kk-serif); font-size: 1.2rem; line-height: 1.4; color: var(--kk-encre);
}

/* Bullets decoratifs. Le reset global supprime les puces natives, il faut
   donc les redessiner. Signature du theme : « le zeste », un demi-anneau
   OUVERT (deux cotes adjacents colores seulement), a ne pas confondre avec
   l anneau ferme d interieurmer ni avec le quart de disque plein de seeliia. */
.entry-content ul { list-style: none; padding-left: 0; margin-bottom: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.4em; }
.entry-content ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; }
.entry-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    border: 1.8px solid var(--kk-figue);
    border-color: var(--kk-figue) var(--kk-figue) transparent transparent;
    border-radius: 50%;
    transform: rotate(-40deg);
    flex-shrink: 0;
}
.entry-content ol li { margin-bottom: 0.5em; }

/* ── Bloc auteur ─────────────────────────────────────────────────────── */
.kk-plume { border-top: 1px solid var(--kk-encre); margin-top: 44px; padding-top: 26px; }
.kk-plume-grille { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; }
.kk-plume-bio { color: var(--kk-doux); font-size: 0.97rem; }
.kk-plume-nom { font-family: var(--kk-serif); font-size: 1.35rem; }
.kk-plume-role { color: var(--kk-figue); font-size: var(--kk-t-micro); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }

.kk-etiquettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.kk-etiquettes a { font-size: var(--kk-t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-gris); box-shadow: inset 0 0 0 1px var(--kk-filet-fort); padding: 7px 12px; }
.kk-etiquettes a:hover { color: var(--kk-figue); box-shadow: inset 0 0 0 1px var(--kk-figue); }

.kk-voisins { padding: clamp(34px, 5vw, 60px) 0; border-top: 1px solid var(--kk-filet); }

/* ── Archive ─────────────────────────────────────────────────────────── */
.kk-archive { padding: clamp(34px, 5vw, 60px) 0; }
.kk-archive-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 56px) clamp(24px, 4vw, 52px); }
.kk-dossier { background: var(--kk-craie); padding: clamp(34px, 5vw, 64px) 0; }
.kk-dossier-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kk-dossier-corps { color: var(--kk-doux); }
.kk-dossier-corps p { margin-bottom: 1em; }
.kk-dossier-corps ul { margin: 0 0 1.1em; }
.kk-dossier-corps li { position: relative; padding-left: 1.5em; margin-bottom: 0.45em; }
.kk-dossier-corps li::before {
    content: ""; position: absolute; left: 0; top: 0.5em;
    width: 10px; height: 10px;
    border: 1.8px solid var(--kk-figue);
    border-color: var(--kk-figue) var(--kk-figue) transparent transparent;
    border-radius: 50%; transform: rotate(-40deg);
}

/* ── Pages ───────────────────────────────────────────────────────────── */
.kk-page { padding: clamp(34px, 5vw, 60px) 0; }
.kk-page-corps { max-width: 68ch; }
.kk-contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.kk-contact-panneau { border-top: 2px solid var(--kk-encre); padding-top: 26px; }
.kk-plan-bloc { border-top: 1px solid var(--kk-encre); padding-top: 18px; margin-bottom: 34px; }
.kk-plan-liste li { border-bottom: 1px solid var(--kk-filet); }
.kk-plan-liste a { display: block; padding: 12px 0; font-family: var(--kk-serif); font-size: 1.1rem; }
.kk-plan-liste a:hover { color: var(--kk-figue); }

/* ── Contact Form 7 ──────────────────────────────────────────────────── */
.wpcf7-form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    display: flex; flex-direction: column; gap: 7px;
    font-size: var(--kk-t-micro); font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--kk-encre);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--kk-filet-fort);
    background: var(--kk-blanc); color: var(--kk-encre);
    font-family: var(--kk-sans); font-size: 0.97rem;
    letter-spacing: normal; text-transform: none; font-weight: 400;
    transition: border-color 180ms ease;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus { border-color: var(--kk-figue); }
.wpcf7-form textarea { min-height: 165px; resize: vertical; }
/* Requalifie pour battre .wpcf7-form input (0-1-1) : une classe simple
   posee sur l input perdrait le duel de specificite. */
.wpcf7-form input.wpcf7-submit {
    width: 100%; border: 0;
    background: var(--kk-encre); color: var(--kk-blanc);
    font-family: var(--kk-sans); font-size: var(--kk-t-micro); font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: 16px 30px; cursor: pointer;
    transition: background 200ms ease;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--kk-figue); }

/* ── Pied ────────────────────────────────────────────────────────────── */
.kk-pied { background: var(--kk-encre); color: var(--kk-clair); border-top: 3px solid var(--kk-figue); }
.kk-pied-inner { padding-top: clamp(40px, 5vw, 68px); }
.kk-pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: clamp(24px, 3vw, 48px); }
.kk-pied-titre { font-size: var(--kk-t-micro); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kk-figue-c); margin-bottom: 16px; }
.kk-pied-desc { color: rgba(246,241,244,.78); font-size: 0.94rem; }
.kk-pied .kk-marque { color: var(--kk-clair); margin-bottom: 16px; }
.kk-pied-liste li { margin-bottom: 10px; position: relative; padding-left: 1.4em; }
.kk-pied-liste li::before {
    content: ""; position: absolute; left: 0; top: 0.52em;
    width: 9px; height: 9px;
    border: 1.6px solid var(--kk-figue-c);
    border-color: var(--kk-figue-c) var(--kk-figue-c) transparent transparent;
    border-radius: 50%; transform: rotate(-40deg);
}
.kk-pied-liste a { color: rgba(246,241,244,.86); font-size: 0.94rem; }
.kk-pied-liste a:hover { color: #fff; text-decoration: underline; }
.kk-pied-bas { border-top: 1px solid rgba(246,241,244,.2); margin-top: clamp(30px, 4vw, 52px); padding: 22px 0; text-align: center; color: rgba(246,241,244,.66); font-size: var(--kk-t-micro); letter-spacing: 0.1em; }

/* ── Etat vide ───────────────────────────────────────────────────────── */
.kk-vide { border-top: 1px solid var(--kk-encre); padding-top: 26px; }
.kk-vide-texte { max-width: 54ch; color: var(--kk-doux); }

/* ── Reveal : part d un etat DEJA LISIBLE ────────────────────────────── */
/* Regle absolue du reseau : jamais de contenu masque a l etat initial. Le
   bloc est lisible sans JS (opacite pleine hors .kk-js) et, meme avec JS,
   il ne descend jamais sous .55. */
html.kk-js [data-kk-reveal] {
    opacity: .55;
    transform: translateY(10px);
    transition: opacity 620ms ease, transform 620ms ease;
}
html.kk-js [data-kk-reveal].est-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html.kk-js [data-kk-reveal] { opacity: 1; transform: none; }
    .kk-billet:hover img, .kk-rubrique-lien:hover .kk-planche img { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kk-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 900px) {
    .kk-legende-grille,
    .kk-tete-corps,
    .kk-carnet-grille,
    .kk-dossier-grille,
    .kk-contact-grille { grid-template-columns: minmax(0, 1fr); }
    .kk-fil-grille, .kk-archive-grille { grid-template-columns: minmax(0, 1fr); }
    .kk-plume-grille { grid-template-columns: minmax(0, 1fr); }
    .kk-dossier-grille .kk-planche { order: -1; }

    .kk-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-right: -8px;
    }
    .kk-nav {
        position: fixed; inset: 0;
        background: var(--kk-encre);
        z-index: 100;
        display: flex; flex-direction: column;
        padding: 20px var(--kk-marge) 40px;
        transform: translateX(100%);
        transition: transform 300ms ease;
        overflow-y: auto;
    }
    .kk-nav--ouvert { transform: none; }
    .kk-nav-tete { display: flex; align-items: center; justify-content: space-between; height: var(--kk-hh); }
    .kk-nav-logo { display: inline-flex; color: var(--kk-clair); }
    .kk-nav-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; color: var(--kk-clair); margin-right: -8px;
    }
    .kk-nav-liste { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 28px; width: 100%; }
    .kk-nav-liste li { width: 100%; border-bottom: 1px solid rgba(246,241,244,.16); }
    .kk-nav-liste a { display: block; width: 100%; padding: 17px 0; color: var(--kk-clair); font-size: 0.9rem; }
    .kk-nav-liste a::after { background: var(--kk-figue-c); }
    .kk-nav-liste .kk-nav-contact {
        box-shadow: none; padding: 17px 0; color: var(--kk-figue-c);
    }
    .kk-nav-liste .kk-nav-contact:hover { background: none; color: #fff; }

    .kk-ouverture-texte { padding-bottom: 20px; }
    .kk-ouverture-texte .kk-manchette { max-width: none; }
    .kk-releves { gap: 14px; }
}
@media (max-width: 560px) {
    .kk-releves { grid-template-columns: minmax(0, 1fr); }
    .kk-pied-grille { grid-template-columns: minmax(0, 1fr); }
    .kk-legende-actions .kk-bouton { width: 100%; text-align: center; }
}

/* ── Correctif portrait du carnet ─────────────────────────────────────
   Le portrait du persona est le seul visuel vertical du theme. La planche
   par defaut (21/9) prenait une bande horizontale au milieu d une photo
   en pied, ce qui coupait la tete. Cadrage portrait, ancre haut. */
.kk-carnet-grille .kk-planche { aspect-ratio: 4 / 5; }
.kk-carnet-grille .kk-planche img { object-position: center 18%; }
@media (max-width: 860px) {
    .kk-carnet-grille .kk-planche { aspect-ratio: 3 / 4; }
}




/* ── Colonne de lecture centree (regle universelle du reseau) ──────────
   Tous les blocs de l article partagent la meme mesure, centree. L image
   mise en avant y est BRIDEE comme les autres : elle doit tenir dans le
   conteneur, pas l elargir. */
.kk-article > .kk-rang > * {
    max-width: var(--kk-mesure, 74ch);
    margin-inline: auto;
}
.kk-plaque { margin-bottom: clamp(26px, 3vw, 38px); }
.kk-plaque .kk-planche { aspect-ratio: 16 / 9; }

/* ── Portrait de la persona ───────────────────────────────────────────
   Le portrait est le seul visuel vertical du theme : la planche generique
   (21/9) y coupait la tete. Classe dediee, appliquee aux trois endroits
   ou le portrait est rendu. */
.kk-planche.kk-portrait { aspect-ratio: 4 / 5; }
.kk-planche.kk-portrait img { object-position: center 18%; }
@media (max-width: 860px) {
    .kk-planche.kk-portrait { aspect-ratio: 3 / 4; }
}