/* ==========================================================================
   COUCHE 2 — COMPOSANTS
   Transcription de la maquette v2 « Domptez les abysses ».
   Aucune valeur hexadécimale : uniquement des variables de la couche 1.
   ========================================================================== */

html { scroll-behavior: smooth; background: var(--kr-noir); }

body {
  background-color: var(--kr-noir);
  color: var(--kr-ivoire);
  font-family: var(--kr-font-corps);
  line-height: var(--kr-lh-corps);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kr-font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--kr-lh-titre);
  letter-spacing: var(--kr-ls-titre);
  text-wrap: balance;
}
h3, h4, h5, h6 { letter-spacing: -.02em; }

a { color: inherit; }
::selection { background: var(--kr-orange); color: var(--kr-noir); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--kr-orange);
  outline-offset: 3px;
}

.crk-muted { color: var(--kr-gris); }
.crk-point { color: var(--kr-orange); }

.crk-wrap { width: min(var(--kr-container), calc(100% - 48px)); margin-inline: auto; }

/* --- Micro-label --------------------------------------------------------- */

.crk-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--kr-or);
  font-family: var(--kr-font-corps);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: var(--kr-ls-meta);
  text-transform: uppercase;
}
.crk-eyebrow::before {
  content: "";
  width: 42px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--kr-orange), var(--kr-or));
}

/* --- Boutons ------------------------------------------------------------- */

.crk-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: var(--kr-radius-btn);
  font-family: var(--kr-font-corps);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--kr-transition), box-shadow var(--kr-transition), background var(--kr-transition);
}
.crk-btn:hover, .wp-block-button__link:hover { transform: translateY(-2px); }

.crk-btn--primaire {
  background: var(--kr-orange);
  color: var(--kr-noir);
  box-shadow: 0 14px 40px var(--kr-orange-22);
}
.crk-btn--fantome,
.is-style-outline .wp-block-button__link {
  border: 1px solid var(--kr-or-60);
  color: var(--kr-or);
  background: var(--kr-noir-52);
}
.crk-btn--fantome:hover { background: var(--kr-or-15); }

/* --- En-tête ------------------------------------------------------------- */

.crk-header {
  position: relative;
  z-index: 30;
  padding-block: var(--kr-s3);
  border-bottom: 1px solid var(--kr-ivoire-10);
  background: var(--kr-noir);
}
body.home .crk-header {
  position: absolute;
  inset: 0 0 auto;
  border-bottom: 0;
  background: linear-gradient(180deg, var(--kr-noir-82), transparent);
}

.crk-header .wp-block-site-title a {
  font-family: var(--kr-font-display);
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kr-ivoire);
}
.crk-header .wp-block-site-title a::after { content: "."; color: var(--kr-orange); }

.crk-header .wp-block-navigation {
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.crk-header .wp-block-navigation a { position: relative; padding-block: 10px; text-decoration: none; color: var(--kr-ivoire); }
.crk-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 3px;
  height: 2px;
  background: var(--kr-orange);
  transition: right var(--kr-transition);
}
.crk-header .wp-block-navigation a:hover::after { right: 0; }

/* --- Hero ---------------------------------------------------------------- */

.crk-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: min(940px, 100svh);
  overflow: hidden;
  border-bottom: 1px solid var(--kr-or-38);
  background: var(--kr-noir);
}
.crk-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--kr-noir) 0%, rgba(11,13,15,.97) 34%, rgba(11,13,15,.45) 66%, rgba(11,13,15,.12) 100%),
    linear-gradient(180deg, rgba(11,13,15,.10), rgba(11,13,15,.90)),
    var(--kr-hero-image, none);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  filter: saturate(1.03) contrast(1.05);
}
.crk-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 79% 42%, var(--kr-orange-22), transparent 24%),
    linear-gradient(180deg, transparent 65%, var(--kr-noir) 100%);
}
.crk-hero__grille {
  position: absolute;
  z-index: -1;
  left: -5%; right: -5%; bottom: -10%;
  height: 52%;
  opacity: .24;
  background-image:
    linear-gradient(var(--kr-bleu-grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--kr-bleu-grille) 1px, transparent 1px);
  background-size: 90px 60px;
  transform: perspective(480px) rotateX(62deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, #000, transparent);
  pointer-events: none;
}
.crk-hero__contenu { width: 100%; padding: 150px 0 210px; }
.crk-hero__copie { max-width: 800px; }
.crk-hero h1 {
  /* 13.5ch : « RÉFÉRENCEMENT » (13 signes) tient sur sa ligne, le titre
     se compose en trois lignes comme sur la maquette au lieu de quatre. */
  max-width: 13.5ch;
  font-size: clamp(2.6rem, 5.6vw, 5.9rem);
}
.crk-hero h1 .crk-accent { color: var(--kr-orange); text-shadow: 0 0 44px var(--kr-orange-22); }
.crk-hero__chapo {
  margin-top: 28px;
  max-width: 620px;
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  color: var(--kr-ivoire-70);
}
.crk-hero__chapo strong { color: var(--kr-orange); font-weight: 600; }
.crk-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --- Barre de repères ---------------------------------------------------- */

.crk-reperes {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -128px;
  border: 1px solid var(--kr-ivoire-10);
  border-radius: var(--kr-radius-bloc);
  background: var(--kr-noir-82);
  backdrop-filter: blur(16px);
  box-shadow: var(--kr-ombre);
}
.crk-repere { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 22px 26px; min-height: 100px; }
.crk-repere + .crk-repere { border-left: 1px solid var(--kr-or-38); }
.crk-repere svg { width: 32px; height: 32px; stroke: var(--kr-or); fill: none; stroke-width: 1.7; }
.crk-repere strong { display: block; font-family: var(--kr-font-display); font-size: 1rem; font-weight: 400; text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em; }
.crk-repere small { display: block; margin-top: 5px; color: var(--kr-gris); font-size: .67rem; text-transform: uppercase; letter-spacing: .035em; line-height: 1.35; }

/* --- Bandeau défilant ---------------------------------------------------- */

.crk-marquee { overflow: hidden; border-block: 1px solid var(--kr-or-38); background: var(--kr-abysse); }
.crk-marquee__piste {
  display: flex;
  gap: 28px;
  width: max-content;
  padding-block: 12px;
  color: var(--kr-or);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
  animation: crk-defile 26s linear infinite;
}
@keyframes crk-defile { to { transform: translateX(-50%); } }

/* --- Sections ------------------------------------------------------------ */

.crk-section { position: relative; padding-block: var(--kr-s6); }
.crk-section--abysse { background: var(--kr-degrade-profondeur); }
.crk-section__tete { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: end; margin-bottom: 48px; }
.crk-section__tete h2 { max-width: 13ch; font-size: clamp(2.3rem, 4.2vw, 4.4rem); }
.crk-section__tete p:last-child { max-width: 610px; font-size: 1.08rem; color: var(--kr-gris); }

/* --- Services ------------------------------------------------------------ */

.crk-services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.crk-service {
  position: relative;
  min-height: 310px;
  padding: 28px 22px 64px;
  border: 1px solid var(--kr-or-38);
  border-radius: var(--kr-radius-carte);
  background: linear-gradient(160deg, var(--kr-panneau), var(--kr-noir));
  overflow: hidden;
  transition: transform var(--kr-transition), border-color var(--kr-transition), box-shadow var(--kr-transition);
}
.crk-service::before {
  content: "";
  position: absolute;
  top: -85px; right: -85px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kr-orange-13), transparent 65%);
  opacity: 0;
  transition: opacity var(--kr-transition);
}
.crk-service:hover { transform: translateY(-7px); border-color: var(--kr-orange); box-shadow: var(--kr-ombre-carte); }
.crk-service:hover::before { opacity: 1; }
.crk-service svg { width: 44px; height: 44px; stroke: var(--kr-or); fill: none; stroke-width: 1.45; margin-bottom: 52px; }
.crk-service h3 { font-size: clamp(.86rem, .9vw, 1.02rem); overflow-wrap: anywhere; }
.crk-service p { margin-top: 14px; color: var(--kr-gris); font-size: .82rem; }
.crk-service__fleche { position: absolute; left: 22px; bottom: 22px; color: var(--kr-or); font-size: 1.3rem; line-height: 1; }
.crk-service a { text-decoration: none; }
.crk-service a::after { content: ""; position: absolute; inset: 0; }

/* --- Méthode ------------------------------------------------------------- */

.crk-methode { display: grid; grid-template-columns: .8fr 1.4fr; min-height: 560px; border-block: 1px solid var(--kr-or-38); background: var(--kr-noir); }
.crk-methode__visuel {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-right: 1px solid var(--kr-or-38);
  background-image: linear-gradient(180deg, rgba(11,13,15,.06), rgba(11,13,15,.74)), var(--kr-methode-image, none);
  background-size: cover;
  background-position: center;
}
.crk-methode__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 53% 61%, var(--kr-orange-22), transparent 26%), linear-gradient(90deg, transparent 58%, var(--kr-noir));
}
.crk-methode__contenu { padding: 82px 64px; }
.crk-methode h2 { max-width: 15ch; font-size: clamp(2.1rem, 3.8vw, 4rem); }
.crk-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 54px; }
.crk-etape { position: relative; padding-top: 48px; }
.crk-etape:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 2px; color: var(--kr-or); }
.crk-etape__num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--kr-or-60); border-radius: 50%; color: var(--kr-or); font-size: .66rem; font-weight: 900; }
.crk-etape h3 { font-size: .88rem; color: var(--kr-or); }
.crk-etape p { margin-top: 12px; color: var(--kr-gris); font-size: .8rem; }

/* --- Panneaux du bas ----------------------------------------------------- */

.crk-panneaux { display: grid; grid-template-columns: 1.05fr 1fr 1.05fr; border-bottom: 1px solid var(--kr-or-38); background: var(--kr-noir); }
.crk-panneau { position: relative; isolation: isolate; min-height: 420px; padding: 54px 42px; overflow: hidden; }
.crk-panneau + .crk-panneau { border-left: 1px solid var(--kr-or-38); }
.crk-panneau h2 { max-width: 17ch; font-size: clamp(1.5rem, 2vw, 2.3rem); }
.crk-panneau p:not(.crk-eyebrow) { margin-top: 24px; max-width: 430px; color: var(--kr-gris); }
.crk-panneau--image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(11,13,15,.97) 0%, rgba(11,13,15,.76) 55%, rgba(11,13,15,.30) 100%), var(--kr-panneau-image, none);
  background-size: cover;
  background-position: center;
}
.crk-lien { display: inline-flex; gap: 12px; margin-top: 32px; color: var(--kr-or); font-size: .74rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.crk-lien:hover { color: var(--kr-orange); }

/* --- Étiquettes et portrait ---------------------------------------------- */

.crk-tags { display: flex; flex-wrap: wrap; gap: var(--kr-s1); margin-top: var(--kr-s3); padding: 0; list-style: none; }
.crk-tags li { padding: 7px 15px; border: 1px solid var(--kr-or-38); border-radius: 999px; color: var(--kr-ivoire-70); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.crk-portrait { display: grid; grid-template-columns: 132px 1fr; gap: var(--kr-s3); align-items: center; margin-top: var(--kr-s3); }
.crk-portrait img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; border: 1px solid var(--kr-or-60); }
.crk-portrait__vide { display: grid; place-items: center; width: 132px; height: 132px; padding: var(--kr-s2); border: 1px dashed var(--kr-or-60); border-radius: 50%; color: var(--kr-or); font-size: .6rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.3; }

/* --- Fil d'Ariane, FAQ, NAP, timeline ------------------------------------ */

.crk-ariane { margin-bottom: var(--kr-s3); font-size: .74rem; color: var(--kr-ivoire-45); }
.crk-ariane ol { display: flex; flex-wrap: wrap; gap: var(--kr-s1); margin: 0; padding: 0; list-style: none; }
.crk-ariane li + li::before { content: "/"; margin-inline-end: var(--kr-s1); color: var(--kr-or-38); }
.crk-ariane a { color: var(--kr-ivoire-70); text-decoration: none; }
.crk-ariane a:hover { color: var(--kr-orange); }

.crk-faq details { padding-block: var(--kr-s3); border-bottom: 1px solid var(--kr-ivoire-10); }
.crk-faq summary { display: flex; justify-content: space-between; gap: var(--kr-s2); cursor: pointer; list-style: none; font-family: var(--kr-font-display); font-size: .95rem; text-transform: uppercase; letter-spacing: -.02em; }
.crk-faq summary::-webkit-details-marker { display: none; }
.crk-faq summary::after { content: "+"; color: var(--kr-or); font-size: 1.4rem; line-height: 1; }
.crk-faq details[open] summary::after { content: "–"; }
.crk-faq details p { margin-top: var(--kr-s2); max-width: var(--kr-texte-max); color: var(--kr-gris); }

.crk-nap { padding: var(--kr-s3); border: 1px solid var(--kr-or-38); border-left: 2px solid var(--kr-or); border-radius: var(--kr-radius-carte); background: var(--kr-panneau); }
.crk-nap dt { color: var(--kr-gris); font-size: .68rem; letter-spacing: var(--kr-ls-meta); text-transform: uppercase; }
.crk-nap dd { margin: 4px 0 var(--kr-s2); font-weight: 600; }

.crk-timeline { position: relative; padding-inline-start: var(--kr-s4); }
.crk-timeline::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 6px; width: 2px; background: var(--kr-teal); }
.crk-jalon { position: relative; padding-bottom: var(--kr-s4); }
.crk-jalon::before { content: ""; position: absolute; inset-inline-start: calc(var(--kr-s4) * -1 + 1px); top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--kr-or); }
.crk-jalon__date { color: var(--kr-or); font-size: .72rem; font-weight: 900; letter-spacing: var(--kr-ls-meta); text-transform: uppercase; }

.wp-block-separator, .crk-filet { border: 0; border-top: 1px solid var(--kr-or-38); opacity: 1; margin-block: var(--kr-s5); }

.crk-todo { display: inline-block; padding: 2px 8px; border: 1px dashed var(--kr-or); border-radius: var(--kr-radius-btn); background: var(--kr-or-15); color: var(--kr-or); font-size: .78rem; font-weight: 700; letter-spacing: .03em; }

.crk-footer { border-top: 1px solid var(--kr-or-38); background: var(--kr-noir); color: var(--kr-gris); font-size: .88rem; }
.crk-footer a { color: var(--kr-gris); text-decoration: none; }
.crk-footer a:hover { color: var(--kr-orange); }
.crk-footer .wp-block-list { list-style: none; padding: 0; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .crk-services { grid-template-columns: repeat(3, 1fr); }
  .crk-methode { grid-template-columns: 1fr; }
  .crk-methode__visuel { border-right: 0; border-bottom: 1px solid var(--kr-or-38); }
  .crk-methode__contenu { padding: var(--kr-s5) var(--kr-s3); }
  .crk-panneaux { grid-template-columns: 1fr; }
  .crk-panneau + .crk-panneau { border-left: 0; border-top: 1px solid var(--kr-or-38); }
  .crk-section__tete { grid-template-columns: 1fr; gap: var(--kr-s3); }
  .crk-reperes { grid-template-columns: repeat(2, 1fr); }
  .crk-repere:nth-child(3) { border-left: 0; }
  .crk-repere:nth-child(n+3) { border-top: 1px solid var(--kr-or-38); }
}

@media (max-width: 781px) {
  .crk-hero { min-height: auto; }
  .crk-hero::before { background-position: 72% center; }
  .crk-hero__contenu { padding: 120px 0 var(--kr-s5); }
  .crk-hero h1 { max-width: none; }
  .crk-services { grid-template-columns: 1fr; }
  .crk-service { min-height: auto; padding-bottom: 56px; }
  .crk-service svg { margin-bottom: var(--kr-s3); }
  .crk-etapes { grid-template-columns: 1fr 1fr; gap: var(--kr-s4) var(--kr-s3); }
  .crk-etape:not(:last-child)::after { display: none; }
  .crk-panneau { min-height: auto; padding: var(--kr-s4) var(--kr-s3); }
  .crk-reperes { grid-template-columns: 1fr; }
  .crk-repere + .crk-repere { border-left: 0; border-top: 1px solid var(--kr-or-38); }
  .crk-actions .crk-btn { width: 100%; }
}