.front.template-piikivi {
  --pk-container: 1200px;
  --pk-section-y: 5rem;
  --pk-block-gap: 2rem;
  --pk-radius-sm: 0.25rem;
  --pk-radius-md: 0.5rem;
  --pk-radius-lg: 1rem;
  --pk-radius-pill: 9999px;
  --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --pk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --pk-text-h1: 2.5rem;
  --pk-text-h2: 2rem;
  --pk-text-h3: 1.5rem;
  --pk-text-body: 1rem;
  --pk-heading-weight: 700;
  --pk-heading-transform: none;
  --pk-heading-tracking: 0;
  --pk-body-leading: 1.6;
  --pk-btn-radius: 0.5rem;
  --pk-btn-px: 1.5rem;
  --pk-btn-py: 0.75rem;
  --pk-btn-weight: 600;
  --pk-btn-transform: none;
}

/* =====================================================
   TEMPLATE: PIIKIVI (privé — site vitrine piikivi.fr)

   « Taillé dans le silex » sans le dire : page claire minérale,
   vert sapin en encre, lime réservé à l'étincelle (eyebrows,
   surlignages, CTA). Signature graphique : COINS TAILLÉS
   (clip-path, zéro border-radius) + puces « éclat ».

   Palette fixe (template privé, identité verrouillée) :
   - minéral  #F6F7F4  fond de page
   - sauge    #E7EFE6  fonds de section pastel
   - sapin    #103B2C  brand (= brandColor du tenant)
   - encre    #0C2A1F  titres + sections sombres
   - silex    #54655B  texte secondaire
   - ligne    #D8DED6  filets/bordures
   - lime     var(--accent-color, #C5F82A)

   Typo : Bricolage Grotesque (display, via settings.headingFont)
   + Instrument Sans (body, via settings.bodyFont) + Spline Sans
   Mono (étiquettes/prix, @font-face embarqué ci-dessous — seuls
   body/heading sont chargés par le layout).

   Conventions de section (styles conditionnés par la classe) :
   - défaut/minéral : service « filet haut + icône carré sauge »
   - .section-white : service « carte bordée »
   - .section-primary/.section-black : sombre, service filet
     translucide + icône lime
   - .section-primary-pastel : sauge (fond forcé #E7EFE6)

   Header : variante `minimal`. Le DERNIER item du menu principal
   est stylé en bouton CTA (convention : créer un item « Parlons
   de votre projet » → /contact en dernière position).

   CSS PUR (pas de @apply) — servi tel quel par /template.css.
   ===================================================== */

/* -- Spline Sans Mono : @font-face embarqué (2 graisses, même
      fichier variable). Fallback silencieux sur ui-monospace. -- */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/splinesansmono/v13/R70BjzAei_CDNLfgZxrW6wrZOF2WX5KZmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/splinesansmono/v13/R70BjzAei_CDNLfgZxrW6wrZOF2WX5yZmF2a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================
   BASE — fond minéral, encre, sélection lime
   ===================================================== */
.front.template-piikivi {
  background: #f6f7f4;
  color: #0c2a1f;
}
.front.template-piikivi ::selection {
  background: var(--accent-color, #c5f82a);
  color: #0c2a1f;
}

/* -- Typographie display -- */
.front.template-piikivi h1,
.front.template-piikivi h2,
.front.template-piikivi h3,
.front.template-piikivi h4,
.front.template-piikivi h5,
.front.template-piikivi h6,
.front.template-piikivi .section-title,
.front.template-piikivi .block-title {
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: var(--pk-heading-weight, 800);
  letter-spacing: var(--pk-heading-tracking, -0.015em);
}
.front.template-piikivi h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
}
.front.template-piikivi :is(h3, h4, h5, h6) {
  font-weight: 700;
  color: #0c2a1f;
  margin: 1.25em 0 0.5em;
  line-height: 1.25;
}
.front.template-piikivi h3 { font-size: 1.5rem; }
.front.template-piikivi h4 { font-size: 1.25rem; }
.front.template-piikivi h5 { font-size: 1.1rem; }
.front.template-piikivi h6 { font-size: 1rem; }
.front.template-piikivi p {
  line-height: var(--pk-body-leading, 1.65);
}

/* Aucune capitale forcée (le hero du socle met .htc-title en uppercase). */
.front.template-piikivi :is(h1, h2, h3, h4, h5, h6, .section-title, .block-title, .htc-title) {
  text-transform: var(--pk-heading-transform, none);
}

/* =====================================================
   TOPBAR — encre sobre (tel + réseaux), liens hover lime
   ===================================================== */
.front.template-piikivi .site-topbar {
  background: #0c2a1f;
  color: rgba(255, 255, 255, 0.7);
}
.front.template-piikivi .site-topbar a,
.front.template-piikivi .site-topbar span,
.front.template-piikivi .site-topbar svg {
  color: rgba(255, 255, 255, 0.7);
}
.front.template-piikivi .site-topbar a:hover {
  color: var(--accent-color, #c5f82a);
}

/* =====================================================
   TITRES DE SECTION — alignés à GAUCHE, eyebrow mono au-dessus
   avec un éclat lime. (wrapper > h2.section-title + p.section-subtitle,
   inversé en colonne pour poser l'eyebrow au-dessus du titre.)
   ===================================================== */
.front.template-piikivi div:has(> .section-title) {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  text-align: left;
}
.front.template-piikivi .section-title,
.front.template-piikivi .block-title {
  text-align: left;
}
.front.template-piikivi .section-title {
  max-width: 24ch;
}
.front.template-piikivi .block-title {
  margin-bottom: 2rem;
}
.front.template-piikivi .section-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1rem 0;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #54655b;
}
/* Puce « éclat » devant l'eyebrow. */
.front.template-piikivi .section-subtitle::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--accent-color, #c5f82a);
  clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 88%, 0 30%);
}
/* Gras dans un titre = surlignage lime (marqueur), signature du template. */
.front.template-piikivi .section-title strong,
.front.template-piikivi .block-title strong,
.front.template-piikivi h1 strong,
.front.template-piikivi h2 strong {
  font-weight: inherit;
  color: inherit;
  background: linear-gradient(transparent 62%, var(--accent-color, #c5f82a) 62%, var(--accent-color, #c5f82a) 94%, transparent 94%);
}
/* Sur section sombre : surlignage illisible → gras = lime. */
.front.template-piikivi :is(.section-primary, .section-black, .section-green) :is(.section-title, .block-title, h1, h2) strong {
  background: none;
  color: var(--accent-color, #c5f82a);
}
.front.template-piikivi :is(.section-primary, .section-black, .section-green) .section-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

/* =====================================================
   SECTIONS — encre pour le sombre, sauge pour le pastel
   ===================================================== */
.front.template-piikivi .section-primary {
  background-color: #0c2a1f;
}
.front.template-piikivi .section-primary-pastel {
  background-color: #e7efe6;
}
.front.template-piikivi .section-white {
  background-color: #ffffff;
}

/* =====================================================
   HEADER (variante minimal) — clair minéral, sticky,
   nav centrée, soulignement lime. Dernier item du menu
   principal = BOUTON CTA (« Parlons de votre projet »).
   ===================================================== */
.front.template-piikivi #site-header-wrap header {
  background: rgba(246, 247, 244, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #d8ded6;
  box-shadow: none;
}
.front.template-piikivi #site-header-wrap a,
.front.template-piikivi #site-header-wrap nav a,
.front.template-piikivi #site-header-wrap .text-gray-800,
.front.template-piikivi #site-header-wrap .text-gray-700 {
  color: #0c2a1f;
}
.front.template-piikivi #site-header-wrap header .container > .flex {
  position: relative;
  min-height: 88px;
}
/* Nav EN FLUX (pas d'absolu sur le nav : le header mesure sa largeur
   pour décider du burger — un nav pleine largeur force le burger).
   Menu aligné à DROITE du wrapper (le CTA « Parlons de votre projet »
   se retrouve au bord droit du container, comme les liens). Le nav
   reste shrink-to-content : pas de burger intempestif. */
.front.template-piikivi #site-header-wrap header .flex-1 {
  justify-content: flex-end;
  position: relative;
}
.front.template-piikivi #site-header-wrap nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.975rem;
  font-weight: 500;
  color: #54655b;
  padding: 0.4rem 0;
}
.front.template-piikivi #site-header-wrap nav a:hover {
  color: #0c2a1f;
}
.front.template-piikivi #site-header-wrap nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-color, #c5f82a);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.front.template-piikivi #site-header-wrap nav a:hover::after,
.front.template-piikivi #site-header-wrap nav a.router-link-active::after,
.front.template-piikivi #site-header-wrap nav a.router-link-exact-active::after {
  transform: scaleX(1);
}
.front.template-piikivi #site-header-wrap nav a.router-link-active,
.front.template-piikivi #site-header-wrap nav a.router-link-exact-active {
  color: #0c2a1f;
}
/* --- CTA header : DERNIER item du menu principal en bouton sapin,
       coin taillé. Convention : item « Parlons de votre projet ». --- */
.front.template-piikivi #site-header-wrap .flex-1 > nav li:last-child a {
  background: #103b2c;
  color: #ffffff;
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.3rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background 0.2s ease, transform 0.15s ease;
}
.front.template-piikivi #site-header-wrap .flex-1 > nav li:last-child a:hover {
  background: #0c2a1f;
  color: #ffffff;
  transform: translateY(-1px);
}
.front.template-piikivi #site-header-wrap .flex-1 > nav li:last-child a::after {
  display: none;
}
/* Header : téléphone + réseaux masqués (sobriété minérale). */
.front.template-piikivi #site-header-wrap header a[href^="tel:"],
.front.template-piikivi #site-header-wrap header a[aria-label="Facebook"],
.front.template-piikivi #site-header-wrap header a[aria-label="Twitter"],
.front.template-piikivi #site-header-wrap header a[aria-label="Instagram"],
.front.template-piikivi #site-header-wrap header a[aria-label="LinkedIn"] {
  display: none;
}
.front.template-piikivi #site-header-wrap header .border-l {
  border-left: 0;
  padding-left: 0;
}

/* =====================================================
   BOUTONS — famille display, coin taillé, zéro radius.
   Primaire = lime/encre ; secondaire = filet encre.
   ===================================================== */
.front.template-piikivi .hero-cta,
.front.template-piikivi .cta-button,
.front.template-piikivi .ic-button,
.front.template-piikivi .pricing-cta {
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: var(--pk-btn-weight, 700);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.front.template-piikivi :is(.hero-cta, .cta-button, .ic-button, .pricing-cta):hover {
  transform: translateY(-2px);
}
.front.template-piikivi .hero-cta,
.front.template-piikivi .cta-button {
  background: var(--accent-color, #c5f82a);
  color: #0c2a1f;
  box-shadow: none;
}
/* Secondaire : filet intérieur (inset, pour suivre le coin taillé —
   une vraie bordure serait tranchée par le clip-path). */
.front.template-piikivi .hero-cta-secondary {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px currentColor;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: var(--pk-btn-weight, 700);
  transition: transform 0.15s ease;
}
.front.template-piikivi .hero-cta-secondary:hover {
  transform: translateY(-2px);
}
.front.template-piikivi .ic-button {
  background: #103b2c;
  color: #ffffff;
}
.front.template-piikivi .ic-button:hover {
  background: #0c2a1f;
}

/* =====================================================
   HERO — CLAIR (encre sur minéral), à rebours des templates
   sombres : le header reste opaque, pas de scrim.
   L'option textColor du bloc reste respectée.
   ===================================================== */
.front.template-piikivi .block-hero-v2,
.front.template-piikivi .block-hero {
  background: transparent;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.front.template-piikivi :is(.block-hero-v2, .block-hero) > * {
  position: relative;
  z-index: 1;
}
/* Décor minéral : grande facette sauge taillée + éclat lime, dans le
   coin droit du hero. Pur CSS, statique, discret. */
.front.template-piikivi :is(.block-hero-v2, .block-hero)::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -5%;
  width: min(44%, 560px);
  aspect-ratio: 1;
  background: #e7efe6;
  clip-path: polygon(38% 0, 100% 16%, 94% 74%, 58% 100%, 20% 86%, 10% 32%);
  z-index: 0;
  pointer-events: none;
}
/* L'éclat du hero = le même éclat triangulaire désaxé que le logo
   (comme s'il venait d'être frappé de la grande pierre sauge). */
.front.template-piikivi :is(.block-hero-v2, .block-hero)::after {
  content: "";
  position: absolute;
  top: 13%;
  right: 9%;
  width: clamp(22px, 2.4vw, 34px);
  aspect-ratio: 1.08;
  background: var(--accent-color, #c5f82a);
  clip-path: polygon(0% 21%, 84% 0%, 100% 100%);
  z-index: 0;
  pointer-events: none;
}
/* Titre du hero : plus grand que le h1 du socle (text-5xl), interligne
   serré, vraie respiration dessous — comme la maquette. */
.front.template-piikivi :is(.block-hero-v2, .block-hero) .htc-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.7rem;
}
.front.template-piikivi :is(.block-hero-v2, .block-hero) .htc-description {
  font-size: 1.15rem;
  color: #54655b;
  max-width: 52ch;
}

/* Sous-titre du hero = EYEBROW : mono uppercase + éclat lime,
   remonté AU-DESSUS du titre (flex + order sur le conteneur texte). */
.front.template-piikivi .block-hero-v2 div:has(> .htc-title) {
  display: flex;
  flex-direction: column;
}
.front.template-piikivi .block-hero-v2 div:has(> .htc-title) > * {
  width: 100%;
}
.front.template-piikivi .htc-subtitle {
  order: -1;
  margin: 0 0 1.1rem 0;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #54655b;
}
.front.template-piikivi .htc-subtitle::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 10px;
  vertical-align: baseline;
  background: var(--accent-color, #c5f82a);
  clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 88%, 0 30%);
}

/* Points clés (features) du hero : valeur en mono. Le front rend le
   titre en <strong class="block font-bold"> (pas de .hf-title, qui
   n'existe qu'en édition) — on cible les deux. */
.front.template-piikivi .hero-feature :is(.hf-title, strong.font-bold) {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-weight: 500;
  font-style: normal; /* pas d'italique synthétisé (la mono n'en a pas) */
  font-size: 1.1rem;
}

/* Points clés (features) du hero : filet haut, SANS icône (le bloc
   les impose ; le design "valeur mono + label" n'en veut pas). */
.front.template-piikivi .hero-feature {
  background: transparent;
  border: 0;
  border-top: 1px solid #d8ded6;
  border-radius: 0;
  padding-left: 0;
}
.front.template-piikivi .hero-feature-icon {
  display: none;
}
.front.template-piikivi :is(.section-primary, .section-black) .hero-feature {
  border-top-color: rgba(255, 255, 255, 0.15);
}

/* =====================================================
   SERVICE — UN bloc, TROIS skins selon la classe de section.
   Base (fond minéral / pastel) : filet haut + icône carré sauge,
   aligné à gauche.
   ===================================================== */
.front.template-piikivi .block-service {
  background: transparent;
  border: 0;
  border-top: 2px solid #d8ded6;
  border-radius: 0;
  padding: 1.3rem 0 0 0;
  text-align: left;
  transition: border-color 0.25s ease;
}
.front.template-piikivi .block-service:hover {
  border-top-color: #103b2c;
  transform: none;
}
.front.template-piikivi .service-content {
  align-items: flex-start;
  text-align: left;
}
.front.template-piikivi .service-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  color: #103b2c;
  background: #e7efe6;
  margin-bottom: 1.1rem;
}
.front.template-piikivi .service-icon .service-icon-svg {
  width: 24px;
  height: 24px;
}
.front.template-piikivi .block-service h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
}
.front.template-piikivi .block-service p,
.front.template-piikivi .block-service .service-description {
  color: #54655b;
  font-size: 0.95rem;
}
.front.template-piikivi .service-link {
  color: #103b2c;
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- Skin section-white : carte bordée, coin taillé. --- */
.front.template-piikivi .section-white .block-service {
  background: #f6f7f4;
  border: 1px solid #d8ded6;
  padding: 1.8rem 1.6rem;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.front.template-piikivi .section-white .block-service:hover {
  border-color: #103b2c;
  transform: translateY(-4px);
}

/* --- Skin sombre : filet translucide + icône lime. --- */
.front.template-piikivi :is(.section-primary, .section-black) .block-service {
  background: transparent;
  border: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  padding: 1.3rem 0 0 0;
  clip-path: none;
}
.front.template-piikivi :is(.section-primary, .section-black) .block-service:hover {
  border-top-color: var(--accent-color, #c5f82a);
  transform: none;
}
.front.template-piikivi :is(.section-primary, .section-black) .service-icon {
  color: var(--accent-color, #c5f82a);
  background: rgba(255, 255, 255, 0.08);
}
.front.template-piikivi :is(.section-primary, .section-black) .block-service h3 {
  color: #ffffff;
}
.front.template-piikivi :is(.section-primary, .section-black) .block-service p,
.front.template-piikivi :is(.section-primary, .section-black) .block-service .service-description {
  color: rgba(255, 255, 255, 0.72);
}

/* =====================================================
   BANDEAUX « VOIR TOUT » (blog / réalisations / événements)
   — bouton sapin coin taillé, famille display
   ===================================================== */
.front.template-piikivi .list-cta-band-link {
  background: #103b2c;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background 0.2s ease, transform 0.15s ease;
}
.front.template-piikivi .list-cta-band-link:hover {
  background: #0c2a1f;
  color: #ffffff;
  transform: translateY(-2px);
}
.front.template-piikivi :is(.section-primary, .section-black) .list-cta-band-link {
  background: var(--accent-color, #c5f82a);
  color: #0c2a1f;
}
.front.template-piikivi .list-cta-band-icon {
  color: #103b2c;
}

/* =====================================================
   RÉASSURANCE (trust-item) — compacte, éclat sapin
   ===================================================== */
.front.template-piikivi .pk-trust-item__icon {
  color: #103b2c;
  background: #e7efe6;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.front.template-piikivi :is(.section-primary, .section-black) .pk-trust-item__icon {
  color: var(--accent-color, #c5f82a);
  background: rgba(255, 255, 255, 0.08);
}
.front.template-piikivi .pk-trust-item__description {
  color: #54655b;
}
.front.template-piikivi :is(.section-primary, .section-black) .pk-trust-item__description {
  color: rgba(255, 255, 255, 0.72);
}

/* =====================================================
   CHIFFRES — stats (rangée) et featured-stat (dominant)
   ===================================================== */
.front.template-piikivi .pk-stats__value {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-weight: 500;
  color: #0c2a1f;
}
.front.template-piikivi .pk-stats__label {
  color: #54655b;
}
.front.template-piikivi :is(.section-primary, .section-black) .pk-stats__value {
  color: var(--accent-color, #c5f82a);
}
.front.template-piikivi :is(.section-primary, .section-black) .pk-stats__label {
  color: rgba(255, 255, 255, 0.72);
}
/* Featured-stat : panneau encre auto-porté (même sur section claire),
   coin taillé inversé, valeur lime énorme. */
.front.template-piikivi .pk-featured-stat {
  background: #0c2a1f;
  padding: 3.5rem 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}
.front.template-piikivi .pk-featured-stat__value {
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: 800;
  font-size: clamp(4rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-color, #c5f82a);
}
.front.template-piikivi .pk-featured-stat__description {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* =====================================================
   PRICING — cartes blanches coin taillé ; la carte avec
   badge (featured) passe en encre, badge et éclats lime.
   ===================================================== */
.front.template-piikivi .pricing-card {
  background: #ffffff;
  border: 1px solid #d8ded6;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.front.template-piikivi .pricing-name {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #54655b;
}
.front.template-piikivi .pricing-price {
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -0.02em;
  color: #0c2a1f;
}
.front.template-piikivi .pricing-period {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 1rem;
  color: #54655b;
}
.front.template-piikivi .pricing-feature-icon {
  color: #103b2c;
}
.front.template-piikivi .pricing-badge {
  background: var(--accent-color, #c5f82a);
  color: #0c2a1f;
  border-radius: 0;
  font-weight: 700;
}
/* Carte mise en avant : encre. */
.front.template-piikivi .pricing-card--featured {
  background: #0c2a1f;
  border-color: #0c2a1f;
  transform: none;
}
.front.template-piikivi .pricing-card--featured :is(.pricing-price, h3) {
  color: #ffffff;
}
.front.template-piikivi .pricing-card--featured :is(.pricing-name, .pricing-period) {
  color: var(--accent-color, #c5f82a);
}
.front.template-piikivi .pricing-card--featured .pricing-feature,
.front.template-piikivi .pricing-card--featured .pricing-feature-text {
  color: rgba(255, 255, 255, 0.85);
}
.front.template-piikivi .pricing-card--featured .pricing-feature-icon {
  color: var(--accent-color, #c5f82a);
}
.front.template-piikivi .pricing-cta {
  background: #103b2c;
  color: #ffffff;
  border-radius: 0;
}
.front.template-piikivi .pricing-card--featured .pricing-cta {
  background: var(--accent-color, #c5f82a);
  color: #0c2a1f;
}

/* =====================================================
   FAQ — cartes blanches coin taillé, question en display,
   chevron remplacé par un éclat qui pivote.
   ===================================================== */
.front.template-piikivi .block-faq details {
  background: #ffffff;
  border: 1px solid #d8ded6;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.front.template-piikivi .block-faq summary {
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0c2a1f;
}
.front.template-piikivi .block-faq .faq-chevron {
  color: #103b2c;
}
.front.template-piikivi .block-faq details[open] .faq-chevron {
  color: #7a9a2e;
}
/* Sur fond sauge, les cartes FAQ restent blanches (contraste porté
   par le fond de section). */

/* =====================================================
   CARTES (news / réalisations / blog) — blanches, bordées,
   coin taillé, survol sobre (translation + bordure sapin).
   ===================================================== */
.front.template-piikivi .block-card {
  background: #ffffff;
  border: 1px solid #d8ded6;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.front.template-piikivi .block-card:hover {
  transform: translateY(-4px);
  border-color: #103b2c;
}
.front.template-piikivi .block-card .card-media {
  border-radius: 0;
}
.front.template-piikivi .card-badge {
  background: var(--accent-color, #c5f82a);
  color: #0c2a1f;
  border-radius: 0;
  font-weight: 700;
}

/* Illustrated-card : image nette, contenu généreux. */
.front.template-piikivi .block-illustrated-card {
  border-radius: 0;
}
.front.template-piikivi .block-illustrated-card img {
  border-radius: 0;
}
.front.template-piikivi .ic-subtitle {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #54655b;
}

/* =====================================================
   TÉMOIGNAGES — carte blanche, citation display
   ===================================================== */
.front.template-piikivi .block-testimonial {
  background: #ffffff;
  border: 1px solid #d8ded6;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.front.template-piikivi .block-testimonial blockquote {
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
  font-weight: 500;
}
.front.template-piikivi .testimonial-photo {
  border-radius: 9999px; /* seule exception ronde : un visage reste un visage */
}

/* =====================================================
   TEXTE RICHE — CONVENTION EYEBROW : un paragraphe placé EN TÊTE
   d'un bloc Texte et immédiatement suivi d'un Titre 2 est rendu
   en eyebrow (mono uppercase + éclat). Permet le duo eyebrow+titre
   DANS une colonne (à côté d'une image), là où le titre de section
   est pleine largeur. Usage : 1re ligne = paragraphe court
   (« Au quotidien »), 2e ligne = Titre 2, puis le contenu.
   ===================================================== */
.front.template-piikivi .block-text > p:first-child:has(+ h2) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1rem 0;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #54655b;
  line-height: 1.4;
}
.front.template-piikivi .block-text > p:first-child:has(+ h2)::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--accent-color, #c5f82a);
  clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 88%, 0 30%);
}
.front.template-piikivi :is(.section-primary, .section-black) .block-text > p:first-child:has(+ h2) {
  color: rgba(255, 255, 255, 0.55);
}
/* Le h2 d'un bloc texte respire en bas ; collé à l'eyebrow en haut.
   Le sélecteur adjacent bat le `.front .block-text h2:not(:first-child)
   { margin-top: 6rem }` du socle (pensé pour les articles longs). */
.front.template-piikivi .block-text > h2 {
  margin: 0 0 0.6em 0;
}
.front.template-piikivi .block-text > p:first-child:has(+ h2) + h2 {
  margin-top: 0;
}

/* =====================================================
   TEXTE RICHE — puces « éclat » dans les listes des blocs texte
   ===================================================== */
.front.template-piikivi .block-text ul {
  list-style: none;
  padding-left: 0;
}
.front.template-piikivi .block-text ul > li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0.5rem 0;
}
.front.template-piikivi .block-text ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  background: #103b2c;
  clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 88%, 0 30%);
}
.front.template-piikivi :is(.section-primary, .section-black) .block-text ul > li::before {
  background: var(--accent-color, #c5f82a);
}
/* Les listes imbriquées gardent l'éclat, en plus petit. */
.front.template-piikivi .block-text ul ul > li::before {
  width: 8px;
  height: 8px;
}

/* =====================================================
   TIMELINE — badge de ligne en mono sur sapin (peut porter
   « 1 » « 2 »... : le champ date est libre)
   ===================================================== */
.front.template-piikivi .timeline-date {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  background: #103b2c;
  color: var(--accent-color, #c5f82a);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.front.template-piikivi .timeline-card {
  background: #ffffff;
  border: 1px solid #d8ded6;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

/* =====================================================
   FORMULAIRE CONTACT — champs nets, focus sapin
   ===================================================== */
.front.template-piikivi .block-contact input,
.front.template-piikivi .block-contact select,
.front.template-piikivi .block-contact textarea {
  background: #ffffff;
  border: 1px solid #d8ded6;
  border-radius: 0;
  color: #0c2a1f;
}
.front.template-piikivi .block-contact input:focus,
.front.template-piikivi .block-contact select:focus,
.front.template-piikivi .block-contact textarea:focus {
  border-color: #103b2c;
  outline: 2px solid var(--accent-color, #c5f82a);
  outline-offset: 0;
  box-shadow: none;
}

/* =====================================================
   CTA (bloc) — bandeau : le bloc reste transparent, on
   compte sur une section-primary ; boutons lime hérités.
   ===================================================== */
.front.template-piikivi .block-cta,
.front.template-piikivi .block-cta-v2 > div {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* =====================================================
   FOOTER — encre, liens clairs, hover lime
   ===================================================== */
.front.template-piikivi .block-footer {
  background: #0c2a1f;
  color: rgba(255, 255, 255, 0.6);
}
.front.template-piikivi .block-footer a:hover {
  color: var(--accent-color, #c5f82a);
}
.front.template-piikivi .block-footer .grid p.font-bold {
  color: #ffffff;
  font-family: 'Bricolage Grotesque', var(--font-heading, system-ui), sans-serif;
}
.front.template-piikivi .block-footer .border-t {
  border-color: rgba(255, 255, 255, 0.12);
}

/* =====================================================
   GALERIE / IMAGES — angles nets partout
   ===================================================== */
.front.template-piikivi .block-gallery img,
.front.template-piikivi .block-image img {
  border-radius: 0;
}

/* =====================================================
   ACCESSIBILITÉ — focus visible lime, motion réduite
   ===================================================== */
.front.template-piikivi :is(a, button, summary):focus-visible {
  outline: 3px solid var(--accent-color, #c5f82a);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .front.template-piikivi * {
    transition: none !important;
    animation: none !important;
  }
}