/*
Theme Name: Laikaa
Theme URI: https://laikaa.fr
Author: Laikaa - Romain Paris
Author URI: https://laikaa.fr
Description: Theme WordPress sur-mesure, leger et sans dependance, concu pour Laikaa. Design system "Klein" : bleu nuit, bleu Klein, corail. Aucun page builder, aucun jQuery, polices auto-hebergees (RGPD), schema LocalBusiness integre.
Version: 3.61.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laikaa
Tags: business, one-column, custom-colors, custom-menu, custom-logo, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   LAIKAA — DESIGN SYSTEM "KLEIN"                                    v2.0.0
   ---------------------------------------------------------------------
   01. Polices          08. Header & navigation   15. Footer
   02. Tokens           09. Hero                  16. Barre mobile
   03. Reset & base     10. Ruban defilant        17. Blocs Gutenberg
   04. Typographie      11. En-tetes de section   18. Utilitaires
   05. Layout           12. Composants            19. Mouvement & a11y
   06. Signature        13. Formulaire
   07. Boutons          14. Blog & articles
   ========================================================================== */


/* 01. POLICES ============================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin.woff2') format('woff2-variations'),
       url('assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  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: 'Inter';
  src: url('assets/fonts/inter-latin.woff2') format('woff2-variations'),
       url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}


/* 02. TOKENS ============================================================== */

:root {
  /* --- Palette "Klein" --- */
  --lk-nuit:     #12142E;   /* fonds sombres, titres         */
  --lk-nuit-2:   #1C1F3F;   /* surfaces sombres surelevees   */
  --lk-nuit-d:   #05061A;   /* relief du CTA secondaire      */
  --lk-klein:    #2B3FF0;   /* liens, aplats, accents froids */
  --lk-klein-d:  #1F2FC4;
  --lk-corail:   #FF6B5B;   /* CTA — couleur d'action unique */
  --lk-corail-d: #E8503F;
  --lk-brume:    #F2F1F7;   /* fonds clairs alternes         */
  --lk-ardoise:  #6E6C82;   /* texte courant                 */
  --lk-trait:    #DEDDE8;   /* bordures                      */
  --lk-blanc:    #FFFFFF;
  --lk-succes:   #147A4C;
  --lk-erreur:   #C03221;

  /* --- Matiere : grain fin sur les fonds sombres --- */
  --lk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

  /* --- Espacement : echelle 8 --- */
  --lk-s1: .5rem;
  --lk-s2: 1rem;
  --lk-s3: 1.5rem;
  --lk-s4: 2.5rem;
  --lk-s5: 4rem;
  --lk-s6: 6rem;
  --lk-s7: 8rem;

  /* --- Typographie : ratio 1,25 --- */
  --lk-t-xs:  .8125rem;
  --lk-t-s:   .9375rem;
  --lk-t-m:   1.0625rem;
  --lk-t-l:   1.375rem;
  --lk-t-xl:  1.75rem;

  --lk-font-titre: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --lk-font-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --lk-wrap: 1200px;
  --lk-wrap-etroit: 780px;
  --lk-r:   14px;
  --lk-r-s: 10px;
  --lk-haut: 4.9rem;

  /* --- Ombres --- */
  --lk-o-s: 0 1px 2px rgba(18, 20, 46, .06);
  --lk-o:   0 4px 10px rgba(18, 20, 46, .05), 0 16px 40px rgba(18, 20, 46, .08);
  --lk-o-l: 0 8px 20px rgba(18, 20, 46, .07), 0 32px 72px rgba(18, 20, 46, .14);

  --lk-ease: cubic-bezier(.4, 0, .2, 1);
  --lk-tr: .25s cubic-bezier(.4, 0, .2, 1);
}


/* 03. RESET & BASE ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--lk-haut) + 1rem);
}

body {
  margin: 0;
  background: var(--lk-blanc);
  color: var(--lk-ardoise);
  font-family: var(--lk-font-texte);
  font-size: var(--lk-t-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

a { color: var(--lk-klein); text-underline-offset: .18em; }
a:hover { color: var(--lk-klein-d); }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; height: 1px; background: var(--lk-trait); margin: var(--lk-s4) 0; }

::selection { background: var(--lk-corail); color: var(--lk-nuit); }


/* 04. TYPOGRAPHIE ÉDITORIALE ============================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lk-font-titre);
  color: var(--lk-nuit);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  margin: 0 0 var(--lk-s2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3rem); margin-top: var(--lk-s5); }
h3 { font-size: clamp(1.2rem, 1.05rem + .75vw, 1.75rem); margin-top: var(--lk-s4); font-weight: 700; }
h4 { font-size: var(--lk-t-l); margin-top: var(--lk-s3); font-weight: 700; }
h5, h6 { font-size: var(--lk-t-m); margin-top: var(--lk-s3); font-weight: 700; }

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 var(--lk-s3); }
p:last-child { margin-bottom: 0; }

.lk-lead { font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem); line-height: 1.55; }

strong, b { color: var(--lk-nuit); font-weight: 600; }

/* Surligneur corail trace a la main — reserve aux mots-cles */
.lk-marqueur {
  position: relative;
  font-style: normal;
  white-space: nowrap;
  z-index: 0;
}

/*
 * Le non-retour a la ligne convient a deux ou trois mots, pas a une
 * expression entiere : sur un telephone, "referencement local integre"
 * depassait la largeur de l'ecran et poussait la page a defiler
 * lateralement. En dessous de 48 rem, le surlignage accepte donc de se
 * couper, et le fond suit chaque ligne.
 */
@media (max-width: 48rem) {
  .lk-marqueur {
    white-space: normal;
    /* Le fond passe sur l'element lui-meme : le calque en position
       absolue couvrirait le rectangle entier au lieu de suivre chaque
       ligne, et deborderait sur le texte voisin. */
    background: var(--lk-corail);
    border-radius: 6px;
    padding: .02em .16em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .lk-marqueur::after { display: none; }
}
.lk-marqueur::after {
  content: "";
  position: absolute;
  /* Le bloc couvre la hauteur complete du texte : un simple soulignement
     rendait le mot difficile a lire une fois la couleur posee dessous. */
  left: -.14em;
  right: -.14em;
  top: -.04em;
  bottom: -.08em;
  background: var(--lk-corail);
  border-radius: 6px;
  transform: skewX(-5deg) rotate(-.4deg);
  z-index: -1;
}

blockquote {
  margin: var(--lk-s4) 0;
  padding: var(--lk-s3) var(--lk-s4);
  border-left: 4px solid var(--lk-corail);
  background: var(--lk-brume);
  border-radius: 0 var(--lk-r-s) var(--lk-r-s) 0;
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-l);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--lk-nuit);
}
blockquote p:last-child { margin-bottom: 0; }

code, pre { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: .9em; }
code { background: var(--lk-brume); padding: .15em .4em; border-radius: 4px; }
pre {
  background: var(--lk-nuit);
  color: var(--lk-brume);
  padding: var(--lk-s3);
  border-radius: var(--lk-r-s);
  overflow-x: auto;
}
pre code { background: none; padding: 0; color: inherit; }

table { width: 100%; border-collapse: collapse; margin: var(--lk-s4) 0; font-size: var(--lk-t-s); }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--lk-trait); }
th { font-family: var(--lk-font-titre); color: var(--lk-nuit); font-weight: 700; }


/* 05. LAYOUT ============================================================== */

.lk-wrap { width: min(100% - 2.5rem, var(--lk-wrap)); margin-inline: auto; }
.lk-wrap--etroit { width: min(100% - 2.5rem, var(--lk-wrap-etroit)); }

.lk-section { padding-block: var(--lk-s6); }
.lk-section--brume { background: var(--lk-brume); }

.lk-section--nuit {
  position: relative;
  isolation: isolate;
  background: var(--lk-nuit);
  color: rgba(242, 241, 247, .76);
  overflow: hidden;
}
.lk-section--nuit::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lk-grain);
  opacity: .085;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}
.lk-section--nuit h1, .lk-section--nuit h2,
.lk-section--nuit h3, .lk-section--nuit h4,
.lk-section--nuit strong { color: var(--lk-blanc); }
/* Les liens des blocs sombres passent en corail, sauf les boutons : sur
   un CTA au fond corail, la meme regle rendait le libelle invisible. */
.lk-section--nuit a:not(.lk-btn) { color: var(--lk-corail); }

.lk-section__entete { max-width: 44rem; margin-bottom: var(--lk-s5); }
.lk-section__entete--centre { margin-inline: auto; text-align: center; }

.lk-grid { display: grid; gap: var(--lk-s3); }
.lk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.lk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.lk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

@media (max-width: 767px) {
  .lk-section { padding-block: var(--lk-s5); }
  .lk-section__entete { margin-bottom: var(--lk-s4); }
}


/* 06. SIGNATURE DE MARQUE — LE TRÉMA ====================================== */

.lk-trema::after {
  content: "";
  display: block;
  width: 22px;
  height: 8px;
  margin-top: var(--lk-s2);
  /* Ecart calque sur le trema du i de Laikaa : deux diametres entre les
     centres. A 30 px d'ecart, l'oeil lisait deux points sans rapport. */
  background:
    radial-gradient(circle 4px at 4px 4px,  var(--lk-corail) 99%, transparent 100%),
    radial-gradient(circle 4px at 18px 4px, var(--lk-corail) 99%, transparent 100%);
  background-repeat: no-repeat;
}
.lk-section__entete--centre .lk-trema::after { margin-inline: auto; }

.lk-liste { list-style: none; padding-left: 0; margin: 0; }
.lk-liste li { position: relative; padding-left: 2.1rem; margin-bottom: var(--lk-s2); }
.lk-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 20px;
  height: 5px;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px,  var(--lk-corail) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 17.5px 2.5px, var(--lk-corail) 99%, transparent 100%);
  background-repeat: no-repeat;
}
.lk-liste--klein li::before {
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px,  var(--lk-klein) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 17.5px 2.5px, var(--lk-klein) 99%, transparent 100%);
  background-repeat: no-repeat;
}


/* 07. BOUTONS ============================================================= */

.lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: var(--lk-t-m);
  line-height: 1.2;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 0;
  border-radius: var(--lk-r-s);
  cursor: pointer;
  text-align: center;
  transition: transform var(--lk-tr), box-shadow var(--lk-tr),
              background-color var(--lk-tr), color var(--lk-tr);
}

/* CTA principal — corail, couleur d'action unique du site */
.lk-btn--signal {
  background: var(--lk-corail);
  color: var(--lk-nuit);
  box-shadow: 0 4px 0 var(--lk-corail-d);
}
.lk-btn--signal:hover,
.lk-btn--signal:focus-visible {
  background: var(--lk-corail);
  color: var(--lk-nuit);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lk-corail-d);
}
.lk-btn--signal:active { transform: translateY(4px); box-shadow: none; }

/* CTA secondaire — une surface, jamais un simple filet.
 *
 * Le trace precedent posait un bouton transparent cercle de --lk-trait
 * sur des cartes blanches : un rapport de contraste de 1,2 entre le
 * contour et le fond, et aucun entre le bouton et la carte. Sur la
 * grille de tarifs, "Demander un devis" et "Voir le detail" se lisaient
 * comme des etiquettes inertes a cote du bouton corail de la carte du
 * milieu, qui, lui, se voyait.
 *
 * Le corail reste la couleur d'action unique du site. Le secondaire
 * prend donc le bleu nuit : trois niveaux restent lisibles d'un coup
 * d'oeil — corail pour l'action attendue, nuit pour l'alternative,
 * lien souligne pour le detail — sans introduire de quatrieme couleur.
 */
.lk-btn--ghost {
  background: var(--lk-nuit);
  color: var(--lk-blanc);
  border: 0;
  box-shadow: 0 4px 0 var(--lk-nuit-d);
}
.lk-btn--ghost:hover,
.lk-btn--ghost:focus-visible {
  background: var(--lk-nuit-2);
  color: var(--lk-blanc);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lk-nuit-d);
}
.lk-btn--ghost:active { transform: translateY(4px); box-shadow: none; }

/* Sur les blocs sombres, la meme regle inversee : une surface claire.
   Le filet blanc a 28 % qui servait ici disparaissait tout autant sur
   le fond nuit que son homologue gris sur fond blanc. */
.lk-section--nuit .lk-btn--ghost,
.lk-hero .lk-btn--ghost,
.lk-bandeau .lk-btn--ghost,
.lk-article-cta .lk-btn--ghost,
.lk-encart-devis .lk-btn--ghost {
  background: rgba(242, 241, 247, .13);
  color: var(--lk-blanc);
  border: 2px solid rgba(242, 241, 247, .58);
  box-shadow: none;
}
.lk-section--nuit .lk-btn--ghost:hover,
.lk-section--nuit .lk-btn--ghost:focus-visible,
.lk-hero .lk-btn--ghost:hover,
.lk-hero .lk-btn--ghost:focus-visible,
.lk-bandeau .lk-btn--ghost:hover,
.lk-bandeau .lk-btn--ghost:focus-visible,
.lk-article-cta .lk-btn--ghost:hover,
.lk-article-cta .lk-btn--ghost:focus-visible,
.lk-encart-devis .lk-btn--ghost:hover,
.lk-encart-devis .lk-btn--ghost:focus-visible {
  background: var(--lk-blanc);
  border-color: var(--lk-blanc);
  color: var(--lk-nuit);
  transform: translateY(2px);
}

.lk-btn--large { padding: 1.2rem 2.4rem; font-size: var(--lk-t-l); }
.lk-btn--bloc  { display: flex; width: 100%; }

.lk-btns { display: flex; flex-wrap: wrap; gap: var(--lk-s2); align-items: center; }
.lk-section__entete--centre .lk-btns { justify-content: center; }

.lk-btn-note { font-size: var(--lk-t-xs); margin-top: var(--lk-s2); }
.lk-hero .lk-btn-note { color: rgba(242, 241, 247, .55); }

@media (max-width: 480px) {
  .lk-btns { flex-direction: column; align-items: stretch; }
  .lk-btns .lk-btn { width: 100%; }
}


/* 08. HEADER : ILOT FLOTTANT ============================================== */

.lk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--lk-corail);
  color: var(--lk-nuit);
  padding: .8rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--lk-r-s) 0;
}
.lk-skip:focus { left: 0; }

/* L'en-tete flotte : il ne touche jamais les bords de l'ecran. */
.lk-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: .9rem;
  transition: padding-top .3s ease;
  pointer-events: none;
}
.lk-header > * { pointer-events: auto; }
.lk-header.is-scrolled { padding-top: .5rem; }

/* La barre elle-meme : pilule arrondie, verre depoli. */
.lk-header__inner {
  display: flex;
  align-items: center;
  gap: var(--lk-s3);
  width: min(100% - 1.75rem, var(--lk-wrap));
  margin-inline: auto;
  min-height: 3.9rem;
  padding: .45rem .45rem .45rem 1.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(18, 20, 46, .07);
  box-shadow: 0 1px 2px rgba(18, 20, 46, .04), 0 12px 32px rgba(18, 20, 46, .09);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition: background-color .3s ease, border-color .3s ease,
              box-shadow .3s ease, min-height .3s ease;
}

/* Sur l'accueil, l'ilot est sombre et translucide au-dessus du hero. */
.lk-header--transparent .lk-header__inner {
  background: rgba(18, 20, 46, .34);
  border-color: rgba(242, 241, 247, .16);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.lk-header--transparent .lk-nav > ul > li > a,
.lk-header--transparent .lk-header__tel { color: rgba(242, 241, 247, .9); }
.lk-header--transparent .lk-nav > ul > li > a:hover,
.lk-header--transparent .lk-header__tel:hover { color: var(--lk-blanc); }
.lk-header--transparent .lk-burger { color: var(--lk-blanc); }
.lk-header--transparent .lk-logo { color: var(--lk-blanc); }

/* Des le defilement, l'ilot repasse en clair, partout. */
.lk-header.is-scrolled .lk-header__inner {
  background: rgba(255, 255, 255, .93);
  border-color: rgba(18, 20, 46, .08);
  box-shadow: 0 1px 2px rgba(18, 20, 46, .05), 0 14px 38px rgba(18, 20, 46, .12);
  min-height: 3.5rem;
}
.lk-header.is-scrolled .lk-nav > ul > li > a,
.lk-header.is-scrolled .lk-header__tel,
.lk-header.is-scrolled .lk-burger,
.lk-header.is-scrolled .lk-logo { color: var(--lk-nuit); }

/* Les pages interieures reservent la hauteur de l'ilot. */
body:not(.home) #contenu { padding-top: var(--lk-haut); }

/* --- Signature typographique : lettrage, trema corail --- */
.lk-logo {
  flex-shrink: 0;
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--lk-nuit);
  text-decoration: none;
  transition: color .3s ease, font-size .3s ease;
}
.lk-logo:hover { color: var(--lk-nuit); }
.lk-header--transparent:not(.is-scrolled) .lk-logo:hover { color: var(--lk-blanc); }
.lk-logo__trema { color: var(--lk-corail); }
.lk-header.is-scrolled .lk-logo { font-size: 1.42rem; }
.lk-footer .lk-logo { color: var(--lk-blanc); font-size: 1.7rem; }

/* --- Navigation --- */
.lk-nav { margin-left: auto; }
.lk-nav > ul {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lk-nav > ul > li > a {
  position: relative;
  display: block;
  padding: .45rem 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--lk-nuit);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.lk-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--lk-corail);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--lk-ease);
}
.lk-nav > ul > li > a:hover::after,
.lk-nav > ul > .current-menu-item > a::after { transform: scaleX(1); }

/* Le CTA du panneau mobile ne doit jamais apparaitre en desktop. */
.lk-nav__cta { display: none; }

/* --- Actions de droite --- */
/* La marge automatique pousse le groupe contre le bord droit de l'ilot.
   En desktop, c'est le menu qui occupait l'espace intermediaire ; en
   dessous de 1000 px il passe en position fixe et sort du flux, si bien
   que le bouton burger se retrouvait colle au logo faute de quoi que ce
   soit pour le repousser. */
.lk-header__actions {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  margin-left: auto;
}

.lk-header__tel {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--lk-nuit);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.lk-header__tel:hover { color: var(--lk-corail); }

.lk-header__devis {
  padding: .78rem 1.35rem;
  font-size: .875rem;
  border-radius: 100px;
  box-shadow: 0 3px 0 var(--lk-corail-d);
}
.lk-header__devis:hover { box-shadow: 0 1px 0 var(--lk-corail-d); }

/* --- Burger --- */
.lk-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--lk-nuit);
  border-radius: 100px;
}
.lk-burger svg { width: 24px; height: 24px; }
.lk-burger__close { display: none; }
.lk-burger[aria-expanded="true"] .lk-burger__open  { display: none; }
.lk-burger[aria-expanded="true"] .lk-burger__close { display: block; }

@media (max-width: 1180px) {
  .lk-nav > ul { gap: 1.05rem; }
  .lk-header__tel span { display: none; }
}

@media (max-width: 1000px) {
  .lk-header__inner { padding-left: 1.25rem; }
  .lk-burger { display: inline-flex; }
  .lk-header__devis, .lk-header__tel { display: none; }

  /* Le panneau mobile se detache lui aussi des bords. */
  .lk-nav {
    position: fixed;
    inset: calc(var(--lk-haut) + .4rem) .875rem auto .875rem;
    display: none;
    max-height: calc(100dvh - var(--lk-haut) - 1.5rem);
    overflow-y: auto;
    margin: 0;
    padding: .5rem 1.25rem 1.25rem;
    background: var(--lk-blanc);
    border: 1px solid rgba(18, 20, 46, .08);
    border-radius: 22px;
    box-shadow: 0 24px 56px rgba(18, 20, 46, .22);
  }
  .lk-nav.is-open { display: block; }

  .lk-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .lk-nav > ul > li { border-bottom: 1px solid var(--lk-trait); }
  .lk-nav > ul > li:last-child { border-bottom: 0; }
  .lk-nav > ul > li > a {
    padding: 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--lk-nuit) !important;
  }
  .lk-nav > ul > li > a::after { display: none; }

  .lk-nav__cta { display: grid; gap: .6rem; margin-top: 1.1rem; }
  .lk-nav__cta .lk-btn { width: 100%; border-radius: 100px; }
  .lk-nav__tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem;
    font-family: var(--lk-font-titre);
    font-weight: 700;
    color: var(--lk-nuit);
    text-decoration: none;
    border: 2px solid var(--lk-trait);
    border-radius: 100px;
  }
}

@media (max-width: 420px) {
  .lk-header__inner { padding-left: 1.1rem; }
  .lk-logo { font-size: 1.35rem; }
}


/* 09. HERO ================================================================ */

.lk-hero {
  position: relative;
  isolation: isolate;
  background: var(--lk-nuit);
  color: rgba(242, 241, 247, .78);
  padding-block: calc(var(--lk-haut) + var(--lk-s5)) var(--lk-s7);
  overflow: hidden;
}

/* Nappe de couleur : bleu Klein et corail qui se repondent */
.lk-hero::before {
  content: "";
  position: absolute;
  inset: -35% -12% auto auto;
  width: 80vw;
  height: 80vw;
  max-width: 1020px;
  max-height: 1020px;
  background:
    radial-gradient(circle at 62% 38%, rgba(43, 63, 240, .42) 0%, transparent 58%),
    radial-gradient(circle at 32% 68%, rgba(255, 107, 91, .24) 0%, transparent 60%);
  filter: blur(10px);
  z-index: -2;
  pointer-events: none;
}

.lk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lk-grain);
  opacity: .1;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.lk-hero__inner { position: relative; z-index: 1; }

.lk-hero__grid {
  display: grid;
  gap: var(--lk-s5);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .lk-hero__grid { grid-template-columns: 1.1fr .9fr; gap: var(--lk-s6); }
}

.lk-hero h1 { color: var(--lk-blanc); margin-bottom: var(--lk-s3); }
.lk-hero h1 em {
  position: relative;
  font-style: normal;
  white-space: nowrap;
  z-index: 0;
  color: var(--lk-nuit);
}
.lk-hero h1 em::after {
  content: "";
  position: absolute;
  left: -.14em;
  right: -.14em;
  top: -.04em;
  bottom: -.08em;
  background: var(--lk-corail);
  border-radius: 8px;
  transform: skewX(-5deg) rotate(-.4deg);
  z-index: -1;
}

.lk-hero__lead {
  font-size: clamp(1.0625rem, 1rem + .55vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242, 241, 247, .72);
  max-width: 33rem;
  margin-bottom: var(--lk-s4);
}

/* Pastilles de preuve, vitrees */
.lk-preuve {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 var(--lk-s4);
  padding: 0;
  list-style: none;
}
.lk-preuve li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .9rem;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(242, 241, 247, .94);
  background: rgba(242, 241, 247, .07);
  border: 1px solid rgba(242, 241, 247, .17);
  border-radius: 99px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lk-preuve svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--lk-corail); }

/* Carte de devis */
.lk-hero__carte {
  position: relative;
  background: var(--lk-blanc);
  color: var(--lk-ardoise);
  border-radius: 18px;
  padding: var(--lk-s4);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .42);
  overflow: hidden;
}
.lk-hero__carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--lk-corail), var(--lk-klein));
}
.lk-hero__carte h2 { margin: 0 0 var(--lk-s1); font-size: var(--lk-t-l); color: var(--lk-nuit); }
@media (min-width: 980px) { .lk-hero__carte { transform: rotate(.6deg); } }

@media (max-width: 767px) {
  .lk-hero { padding-block: calc(var(--lk-haut) + var(--lk-s4)) var(--lk-s5); }
  .lk-hero__carte { padding: var(--lk-s3); }
}


/* 10. RUBAN DÉFILANT ====================================================== */

.lk-ruban {
  position: relative;
  background: var(--lk-corail);
  color: var(--lk-nuit);
  padding: .95rem 0;
  overflow: hidden;
}
.lk-ruban__piste { display: flex; width: max-content; animation: lk-defile 46s linear infinite; }
.lk-ruban ul {
  display: flex;
  align-items: center;
  gap: var(--lk-s4);
  list-style: none;
  margin: 0;
  padding: 0 var(--lk-s4) 0 0;
}
.lk-ruban li {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-s4);
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lk-ruban li::after {
  content: "";
  width: 18px;
  height: 5px;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px,  var(--lk-nuit) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 15.5px 2.5px, var(--lk-nuit) 99%, transparent 100%);
  background-repeat: no-repeat;
}
@keyframes lk-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lk-ruban:hover .lk-ruban__piste { animation-play-state: paused; }


/* 11. EN-TÊTES DE SECTION ================================================= */

.lk-num {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--lk-font-titre);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lk-klein);
  margin-bottom: var(--lk-s2);
}
.lk-num::before {
  content: attr(data-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: .72rem;
  letter-spacing: 0;
}
.lk-section--nuit .lk-num, .lk-hero .lk-num { color: var(--lk-corail); }
.lk-section__entete--centre .lk-num { justify-content: center; }

.lk-surtitre {
  display: inline-block;
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lk-klein);
  margin-bottom: var(--lk-s1);
}
.lk-section--nuit .lk-surtitre, .lk-hero .lk-surtitre { color: var(--lk-corail); }


/* 12. COMPOSANTS ========================================================== */

/* --- Cartes --- */
.lk-carte {
  position: relative;
  overflow: hidden;
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  padding: var(--lk-s4);
  transition: transform .3s var(--lk-ease), box-shadow .3s ease, border-color .3s ease;
}
.lk-carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lk-corail);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--lk-ease);
}
.lk-carte:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--lk-o-l);
}
.lk-carte:hover::before { transform: scaleX(1); }
.lk-carte h3 { margin-top: 0; font-size: var(--lk-t-l); }
.lk-carte p:last-child { margin-bottom: 0; }

.lk-carte__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--lk-r-s);
  background: var(--lk-nuit);
  color: var(--lk-corail);
  margin-bottom: var(--lk-s3);
  transition: transform .3s var(--lk-ease);
}
.lk-carte__icone svg { width: 24px; height: 24px; }
.lk-carte:hover .lk-carte__icone { transform: rotate(-6deg) scale(1.07); }

/* --- Manifeste : bloc typographique massif --- */
/*
 * L'ancienne regle « .lk-manifeste p » imposait le corps d'affichage du
 * manifeste — 28 px en Archivo 800 — a tout paragraphe de la section.
 * Elle valait (0,1,1) et battait donc chaque classe simple : le surtitre
 * « Pourquoi ce prix », le sous-titre, le libelle de la bascule et les
 * trois paragraphes du simulateur s'affichaient tous en display.
 *
 * .lk-manifeste__phrase, plus bas, fait le meme travail sur le seul
 * element concerne. La regle generique est donc supprimee plutot que
 * contournee une fois de plus.
 */
.lk-manifeste__note {
  font-family: var(--lk-font-texte) !important;
  font-size: var(--lk-t-m) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  color: rgba(242, 241, 247, .6) !important;
  max-width: 40rem !important;
  margin-top: var(--lk-s3) !important;
}

/* --- Chiffres cles --- */
.lk-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--lk-s4) var(--lk-s3);
  text-align: center;
}
.lk-chiffre__val {
  display: block;
  font-family: var(--lk-font-titre);
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  font-weight: 800;
  color: var(--lk-nuit);
  line-height: .95;
  letter-spacing: -.055em;
}
.lk-section--nuit .lk-chiffre__val { color: var(--lk-corail); }
.lk-chiffre__lib {
  display: block;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: .7rem;
  color: var(--lk-ardoise);
}
.lk-section--nuit .lk-chiffre__lib { color: rgba(242, 241, 247, .66); }

/* --- Tarifs --- */
.lk-tarifs {
  display: grid;
  gap: var(--lk-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
  align-items: start;
}
.lk-tarif {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: 18px;
  padding: var(--lk-s4);
  transition: transform .3s var(--lk-ease), box-shadow .3s ease;
}
.lk-tarif:hover { transform: translateY(-5px); box-shadow: var(--lk-o); }

.lk-tarif--vedette {
  position: relative;
  background: var(--lk-nuit);
  border: 0;
  color: rgba(242, 241, 247, .74);
  box-shadow: 0 28px 68px rgba(18, 20, 46, .3);
}
.lk-tarif--vedette .lk-tarif__nom,
.lk-tarif--vedette .lk-tarif__prix,
.lk-tarif--vedette strong { color: var(--lk-blanc); }
.lk-tarif--vedette .lk-tarif__desc,
.lk-tarif--vedette .lk-tarif__prix small { color: rgba(242, 241, 247, .58); }
@media (min-width: 900px) {
  .lk-tarif--vedette { transform: scale(1.04); }
  .lk-tarif--vedette:hover { transform: scale(1.04) translateY(-5px); }
}

.lk-tarif__badge {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lk-corail);
  color: var(--lk-nuit);
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .38rem .95rem;
  border-radius: 99px;
  white-space: nowrap;
}
.lk-tarif__nom {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-l);
  font-weight: 800;
  color: var(--lk-nuit);
  margin: 0 0 .35rem;
  letter-spacing: -.02em;
}
.lk-tarif__desc { font-size: var(--lk-t-s); margin-bottom: var(--lk-s3); }
.lk-tarif__prix {
  font-family: var(--lk-font-titre);
  font-size: 3rem;
  font-weight: 800;
  color: var(--lk-nuit);
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.lk-tarif__prix small {
  display: block;
  font-family: var(--lk-font-texte);
  font-size: var(--lk-t-xs);
  font-weight: 400;
  color: var(--lk-ardoise);
  letter-spacing: 0;
  margin-top: .4rem;
}
.lk-tarif .lk-liste { margin: var(--lk-s3) 0; flex-grow: 1; }
.lk-tarif .lk-liste li { font-size: var(--lk-t-s); margin-bottom: .65rem; }
.lk-tarif .lk-btn { margin-top: var(--lk-s2); }

/* --- FAQ : <details> natif, aucun JS requis --- */
.lk-faq { max-width: 48rem; margin-inline: auto; }
.lk-faq details { border-bottom: 1px solid var(--lk-trait); }
.lk-faq details:first-of-type { border-top: 1px solid var(--lk-trait); }
.lk-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lk-s3);
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: var(--lk-t-m);
  color: var(--lk-nuit);
  line-height: 1.4;
  transition: color .2s ease;
}
.lk-faq summary:hover { color: var(--lk-klein); }
.lk-faq summary::-webkit-details-marker { display: none; }
.lk-faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: .15rem;
  background: var(--lk-corail);
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .3s var(--lk-ease);
}
.lk-faq details[open] summary::after { transform: rotate(45deg); }
.lk-faq details > div { padding: 0 0 1.5rem; max-width: 44rem; }

/* --- Realisations --- */
.lk-real {
  display: grid;
  gap: var(--lk-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Trois colonnes en grand ecran plutot que quatre : chaque groupe de
   references se range en rangees pleines, et la capture gagne assez de
   largeur pour qu'on y lise le titre du site — ce qui est tout l'interet
   de la montrer. */
@media (min-width: 62rem) {
  .lk-real { grid-template-columns: repeat(3, 1fr); }
}

/* Portrait du bloc "Votre interlocuteur".
   L'image est detouree : lui poser un cadre arrondi et une ombre
   dessinerait le contour d'un rectangle qui n'existe pas. Sa largeur est
   bornee parce qu'une photo qui remplit toute la colonne prend le pas
   sur le texte qu'elle est censee accompagner. */
.lk-portrait { display: flex; justify-content: center; }
.lk-portrait__img {
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* Intertitre d'un groupe de references (vitrines / boutiques). */
.lk-real-groupe { margin-top: var(--lk-s4); margin-bottom: var(--lk-s2); }
.lk-real-groupe:first-of-type { margin-top: 0; }
.lk-real-groupe__titre {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-l);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lk-nuit);
  margin: 0 0 .25rem;
}
.lk-real-groupe__texte {
  font-size: var(--lk-t-s);
  color: var(--lk-ardoise);
  margin: 0;
  max-width: 46ch;
}
.lk-real__item {
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  overflow: hidden;
  transition: transform .3s var(--lk-ease), box-shadow .3s ease;
}
.lk-real__item:hover { transform: translateY(-6px); box-shadow: var(--lk-o-l); }
.lk-real__shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lk-brume);
  border-bottom: 1px solid var(--lk-trait);
}
.lk-real__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s var(--lk-ease);
}
.lk-real__item:hover .lk-real__shot img { transform: scale(1.05); }
.lk-real__corps { padding: var(--lk-s3); background: var(--lk-blanc); transition: background-color .3s ease; }
.lk-real__item:hover .lk-real__corps { background: var(--lk-nuit); }
.lk-real__metier {
  font-family: var(--lk-font-titre);
  font-weight: 700;
  color: var(--lk-nuit);
  font-size: var(--lk-t-m);
  margin: 0 0 .2rem;
  transition: color .3s ease;
}
.lk-real__lieu { font-size: var(--lk-t-xs); color: var(--lk-ardoise); margin: 0; transition: color .3s ease; }

/* Lien vers le site livre, quand l'adresse est renseignee. */
/* La zone tactile fait 44 px de haut : au doigt, la hauteur d'une ligne
   de texte se rate une fois sur trois, et un lien rate sur une reference
   est une preuve qui ne sert a rien. Les marges negatives compensent le
   rembourrage pour que le texte reste aligne sur le reste de la carte. */
.lk-real__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: .1rem -.6rem -.7rem;
  padding: 0 .6rem;
  font-size: var(--lk-t-xs);
  font-weight: 650;
  color: var(--lk-klein);
  text-underline-offset: .2em;
}
.lk-real__lien:hover, .lk-real__lien:focus-visible { color: var(--lk-corail-d); }

/* Le portrait se cale au milieu de la colonne de texte plutot que de
   rester colle en haut, ce qui laissait un vide sous l'image. */
.lk-portrait { align-items: center; }
.lk-real__item:hover .lk-real__metier { color: var(--lk-blanc); }
.lk-real__item:hover .lk-real__lieu { color: var(--lk-corail); }

/* --- Etapes : numeros surdimensionnes en contour --- */
.lk-etapes { counter-reset: etape; display: grid; gap: var(--lk-s4); }
@media (min-width: 860px) { .lk-etapes { grid-template-columns: repeat(3, 1fr); gap: var(--lk-s5); } }
.lk-etape { counter-increment: etape; position: relative; padding-top: var(--lk-s5); }
.lk-etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--lk-font-titre);
  font-size: clamp(3rem, 2rem + 3vw, 4.4rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--lk-corail);
}
.lk-etape h3 { margin-top: 0; font-size: var(--lk-t-l); }

/* --- Temoignages --- */
.lk-temoins { display: grid; gap: var(--lk-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.lk-temoin {
  display: flex;
  flex-direction: column;
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  padding: var(--lk-s4);
}
.lk-temoin__note { color: var(--lk-corail); letter-spacing: .1em; margin-bottom: var(--lk-s2); }
.lk-temoin__txt { font-size: var(--lk-t-s); flex-grow: 1; margin-bottom: var(--lk-s3); color: var(--lk-nuit); }
.lk-temoin__qui { display: flex; align-items: center; gap: .75rem; }
.lk-temoin__qui img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.lk-temoin__nom { font-family: var(--lk-font-titre); font-weight: 700; font-size: var(--lk-t-s); color: var(--lk-nuit); }
.lk-temoin__meta { font-size: var(--lk-t-xs); color: var(--lk-ardoise); }

/* --- Bandeau CTA --- */
.lk-bandeau {
  background: var(--lk-nuit);
  border-radius: 18px;
  padding: var(--lk-s5);
  text-align: center;
  color: rgba(242, 241, 247, .78);
}
.lk-bandeau h2 { color: var(--lk-blanc); margin-top: 0; }
.lk-bandeau .lk-btns { justify-content: center; margin-top: var(--lk-s3); }


/* 13. FORMULAIRE ========================================================== */

.lk-form { display: grid; gap: var(--lk-s3); }
.lk-champ { display: grid; gap: .4rem; }
.lk-champ label {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-s);
  font-weight: 700;
  color: var(--lk-nuit);
}
.lk-champ label .req { color: var(--lk-erreur); }
.lk-optionnel {
  font-family: var(--lk-font-texte);
  font-weight: 400;
  font-size: var(--lk-t-xs);
  color: var(--lk-ardoise);
}

.lk-champ input,
.lk-champ select,
.lk-champ textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid var(--lk-trait);
  border-radius: var(--lk-r-s);
  background: var(--lk-blanc);
  font-size: var(--lk-t-m);
  color: var(--lk-nuit);
  transition: border-color var(--lk-tr), box-shadow var(--lk-tr);
}
.lk-champ input::placeholder, .lk-champ textarea::placeholder { color: #a5a3b5; }
.lk-champ input:focus, .lk-champ select:focus, .lk-champ textarea:focus {
  outline: none;
  border-color: var(--lk-klein);
  box-shadow: 0 0 0 3px rgba(43, 63, 240, .15);
}
.lk-champ textarea { min-height: 6.5rem; resize: vertical; }
.lk-champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6C82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}

/* Honeypot : hors ecran mais atteignable par un robot */
.lk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.lk-form__note { font-size: var(--lk-t-xs); color: var(--lk-ardoise); text-align: center; margin: 0; }

/* Le pied du formulaire forme un groupe : l'ecart genereux de la grille
   separe les champs, pas le bouton de ses deux lignes de rappel. */
.lk-form__pied { display: flex; flex-direction: column; gap: .5rem; }

/* Alternative telephonique, sous le bouton d'envoi : discrete au regard du
   CTA principal, mais atteignable au pouce sur mobile. */
.lk-form__appel { font-size: var(--lk-t-s); color: var(--lk-ardoise); text-align: center; margin: 0; }
.lk-form__appel a { color: inherit; font-weight: 600; text-underline-offset: .2em; }
.lk-form__appel a:hover,
.lk-form__appel a:focus-visible { color: var(--lk-corail-d); }
.lk-form-bloc .lk-alerte { margin-bottom: var(--lk-s3); }

.lk-alerte {
  padding: 1rem 1.25rem;
  border-radius: var(--lk-r-s);
  font-size: var(--lk-t-s);
  border-left: 4px solid;
}
.lk-alerte--ok { background: rgba(20, 122, 76, .08); border-color: var(--lk-succes); color: #0f5c39; }
.lk-alerte--ko { background: rgba(192, 50, 33, .07); border-color: var(--lk-erreur); color: var(--lk-erreur); }

.lk-section--nuit .lk-form-bloc {
  background: var(--lk-blanc);
  color: var(--lk-ardoise);
  padding: var(--lk-s4);
  border-radius: var(--lk-r);
  box-shadow: var(--lk-o-l);
}
.lk-section--nuit .lk-form-bloc h2 { color: var(--lk-nuit); }


/* 14. BLOG & ARTICLES ===================================================== */

.lk-page-entete {
  position: relative;
  isolation: isolate;
  background: var(--lk-nuit);
  color: rgba(242, 241, 247, .74);
  padding-block: calc(var(--lk-s5) + 1rem) var(--lk-s5);
  overflow: hidden;
}
.lk-page-entete::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lk-grain);
  opacity: .09;
  mix-blend-mode: overlay;
  z-index: -1;
}
.lk-page-entete::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, rgba(43, 63, 240, .38) 0%, transparent 62%);
  z-index: -2;
  pointer-events: none;
}
.lk-page-entete h1 { color: var(--lk-blanc); margin-bottom: var(--lk-s2); }
.lk-page-entete .lk-lead { max-width: 44rem; color: rgba(242, 241, 247, .72); }

.lk-fil { font-size: var(--lk-t-xs); color: rgba(242, 241, 247, .58); margin-bottom: var(--lk-s2); }
.lk-fil a { color: rgba(242, 241, 247, .78); text-decoration: none; }
.lk-fil a:hover { color: var(--lk-corail); text-decoration: underline; }
.lk-fil span { margin: 0 .4rem; opacity: .45; }

.lk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s2);
  font-size: var(--lk-t-xs);
  color: rgba(242, 241, 247, .62);
  margin-bottom: 0;
}

.lk-article { max-width: 44rem; margin-inline: auto; }
.lk-article > * { margin-bottom: var(--lk-s3); }
.lk-article h2 { margin-top: var(--lk-s5); }
.lk-article h3 { margin-top: var(--lk-s4); }
.lk-article ul, .lk-article ol { padding-left: 1.35rem; }
.lk-article li { margin-bottom: .6rem; }
.lk-article img { border-radius: var(--lk-r-s); }
.lk-article figure { margin: var(--lk-s4) 0; }
.lk-article figcaption { font-size: var(--lk-t-xs); color: var(--lk-ardoise); text-align: center; margin-top: .6rem; }

.lk-cartes-articles { display: grid; gap: var(--lk-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.lk-art-carte {
  display: flex;
  flex-direction: column;
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  overflow: hidden;
  transition: transform .3s var(--lk-ease), box-shadow .3s ease;
}
.lk-art-carte:hover { transform: translateY(-5px); box-shadow: var(--lk-o-l); }
.lk-art-carte__img { aspect-ratio: 16 / 9; background: var(--lk-brume); overflow: hidden; }
.lk-art-carte__img img { width: 100%; height: 100%; object-fit: cover; }
.lk-art-carte__corps { padding: var(--lk-s3); display: flex; flex-direction: column; flex-grow: 1; }
.lk-art-carte h2, .lk-art-carte h3 { font-size: var(--lk-t-l); margin: 0 0 .6rem; line-height: 1.2; }
.lk-art-carte h2 a, .lk-art-carte h3 a { color: var(--lk-nuit); text-decoration: none; }
.lk-art-carte h2 a:hover, .lk-art-carte h3 a:hover { color: var(--lk-klein); }
.lk-art-carte p { font-size: var(--lk-t-s); flex-grow: 1; }
.lk-art-carte__lire {
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: var(--lk-t-s);
  color: var(--lk-klein);
  text-decoration: none;
  margin-top: var(--lk-s2);
}
.lk-art-carte__lire:hover { text-decoration: underline; }

.lk-pagination { display: flex; gap: .5rem; justify-content: center; margin-top: var(--lk-s5); flex-wrap: wrap; }
.lk-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.7rem;
  height: 2.7rem;
  padding: 0 .8rem;
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r-s);
  text-decoration: none;
  color: var(--lk-nuit);
  font-size: var(--lk-t-s);
  font-weight: 600;
}
.lk-pagination .page-numbers:hover { border-color: var(--lk-nuit); }
.lk-pagination .page-numbers.current { background: var(--lk-nuit); color: var(--lk-blanc); border-color: var(--lk-nuit); }

.lk-auteur {
  display: flex;
  gap: var(--lk-s3);
  align-items: flex-start;
  padding: var(--lk-s3);
  background: var(--lk-brume);
  border-radius: var(--lk-r);
  margin-top: var(--lk-s4);
}
.lk-auteur img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lk-auteur__nom { font-family: var(--lk-font-titre); font-weight: 700; color: var(--lk-nuit); margin: 0 0 .25rem; }
.lk-auteur p { font-size: var(--lk-t-s); margin: 0; }

.lk-article-cta {
  margin-top: var(--lk-s5);
  padding: var(--lk-s4);
  background: var(--lk-nuit);
  border-radius: 18px;
  text-align: center;
  color: rgba(242, 241, 247, .76);
}
.lk-article-cta h2 { margin-top: 0; font-size: var(--lk-t-xl); color: var(--lk-blanc); }

.lk-vide { text-align: center; padding-block: var(--lk-s6); }
.lk-recherche { display: flex; gap: .5rem; max-width: 26rem; margin-inline: auto; }
.lk-recherche input[type="search"] {
  flex: 1;
  padding: .9rem 1rem;
  border: 1.5px solid var(--lk-trait);
  border-radius: var(--lk-r-s);
  font-size: var(--lk-t-m);
}
.lk-recherche input[type="search"]:focus {
  outline: none;
  border-color: var(--lk-klein);
  box-shadow: 0 0 0 3px rgba(43, 63, 240, .15);
}


/* 15. FOOTER ============================================================== */

.lk-footer {
  position: relative;
  isolation: isolate;
  background: var(--lk-nuit);
  color: rgba(242, 241, 247, .66);
  padding-block: var(--lk-s6) var(--lk-s3);
  font-size: var(--lk-t-s);
  overflow: hidden;
}
.lk-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lk-grain);
  opacity: .07;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}
.lk-footer a { color: rgba(242, 241, 247, .8); text-decoration: none; }
.lk-footer a:not(.lk-logo):not(.lk-btn):hover { color: var(--lk-corail); text-decoration: underline; }

/* Le logo reste un logo, dans l'en-tete comme dans le pied de page :
   un lettrage de marque souligne au survol fait accident d'affichage. */
.lk-logo, .lk-logo:hover, .lk-logo:focus-visible { text-decoration: none; }

.lk-footer__grid {
  display: grid;
  gap: var(--lk-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-bottom: var(--lk-s4);
}
.lk-footer__marque { max-width: 23rem; }
.lk-footer__marque .lk-logo { margin-bottom: var(--lk-s2); }
.lk-footer h2, .lk-footer h3 {
  font-size: var(--lk-t-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--lk-corail);
  margin: 0 0 var(--lk-s2);
  font-weight: 800;
}
.lk-footer ul { list-style: none; margin: 0; padding: 0; }
.lk-footer li { margin-bottom: .55rem; }

/* Signature typographique massive */
.lk-footer__signature {
  font-family: var(--lk-font-titre);
  font-size: clamp(3.5rem, 1rem + 15vw, 12rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 241, 247, .17);
  margin: var(--lk-s5) 0 var(--lk-s3);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.lk-footer__bas {
  border-top: 1px solid rgba(242, 241, 247, .13);
  padding-top: var(--lk-s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s2) var(--lk-s3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--lk-t-xs);
}
.lk-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--lk-s2); }
.lk-footer__legal li { margin: 0; }


/* 16. BARRE D'ACTION MOBILE =============================================== */

.lk-barre-mobile { display: none; }

@media (max-width: 767px) {
  .lk-barre-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--lk-trait);
  }
  .lk-barre-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 50px;
    border-radius: var(--lk-r-s);
    font-family: var(--lk-font-titre);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
  }
  .lk-barre-mobile svg { width: 18px; height: 18px; }
  .lk-barre-mobile__devis { background: var(--lk-corail); color: var(--lk-nuit); }
  .lk-barre-mobile__tel   { background: var(--lk-nuit); color: var(--lk-blanc); }
  body.has-barre-mobile { padding-bottom: 4.75rem; }
}


/* 17. BLOCS GUTENBERG ===================================================== */

.wp-block-image img { border-radius: var(--lk-r-s); }
.wp-block-button__link {
  background: var(--lk-corail);
  color: var(--lk-nuit);
  font-family: var(--lk-font-titre);
  font-weight: 700;
  border-radius: var(--lk-r-s);
  padding: 1.05rem 1.9rem;
  box-shadow: 0 4px 0 var(--lk-corail-d);
  transition: transform var(--lk-tr), box-shadow var(--lk-tr);
}
.wp-block-button__link:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--lk-corail-d); color: var(--lk-nuit); }
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--lk-nuit);
  border: 2px solid var(--lk-trait);
  box-shadow: none;
}
.wp-block-separator { border: 0; height: 1px; background: var(--lk-trait); }
.wp-block-quote { border-left: 4px solid var(--lk-corail); padding-left: var(--lk-s3); }
.wp-block-details {
  border-bottom: 1px solid var(--lk-trait);
  padding-bottom: var(--lk-s2);
  margin-bottom: var(--lk-s2);
}
.wp-block-details summary {
  font-family: var(--lk-font-titre);
  font-weight: 700;
  color: var(--lk-nuit);
  cursor: pointer;
  padding: .8rem 0;
}
.wp-block-details summary:hover { color: var(--lk-klein); }

.alignwide { width: min(100% - 2.5rem, 1280px); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }


/* 18. UTILITAIRES ========================================================= */

.lk-centre { text-align: center; }
.lk-mt-0 { margin-top: 0 !important; }
.lk-mb-0 { margin-bottom: 0 !important; }
.lk-mt-3 { margin-top: var(--lk-s3); }
.lk-mt-4 { margin-top: var(--lk-s4); }
.lk-mt-5 { margin-top: var(--lk-s5); }
.lk-mesure { max-width: 44rem; }
.lk-mesure-centre { max-width: 44rem; margin-inline: auto; }

.screen-reader-text, .lk-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* 19. MOUVEMENT, ACCESSIBILITÉ, IMPRESSION ================================ */

/* Apparition au defilement */
.lk-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--lk-ease), transform .65s var(--lk-ease);
}
.lk-reveal.is-visible { opacity: 1; transform: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lk-corail);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Cibles tactiles confortables */
@media (pointer: coarse) {
  .lk-nav > ul > li > a, .lk-footer a { min-height: 44px; display: flex; align-items: center; }
  .lk-faq summary { padding-block: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lk-reveal { opacity: 1; transform: none; transition: none; }
  .lk-ruban__piste { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .lk-header, .lk-footer, .lk-barre-mobile, .lk-btns, .lk-form, .lk-ruban { display: none !important; }
  body { color: #000; background: #fff; }
  .lk-hero, .lk-page-entete, .lk-section--nuit { background: #fff !important; color: #000 !important; }
  .lk-hero h1, .lk-page-entete h1 { color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; }
}


/* 20. BLOCS REFONDUS ====================================================== */

/* --- 20.1 Hero : appel telephonique en action secondaire ---------------- */

.lk-hero__appel {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem 1.6rem .55rem .55rem;
  border-radius: 100px;
  background: rgba(242, 241, 247, .06);
  border: 1px solid rgba(242, 241, 247, .18);
  color: var(--lk-blanc);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--lk-tr), border-color var(--lk-tr), transform var(--lk-tr);
}
.lk-hero__appel:hover {
  background: rgba(242, 241, 247, .11);
  border-color: rgba(242, 241, 247, .34);
  color: var(--lk-blanc);
  transform: translateY(-2px);
}
.lk-hero__appel svg { color: var(--lk-corail); flex-shrink: 0; }

/* Portrait rond, cercle corail : un visage rassure plus qu'une icone */
.lk-hero__portrait {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lk-corail);
  box-shadow: 0 0 0 3px rgba(255, 107, 91, .18);
  transition: transform var(--lk-tr);
}
.lk-hero__appel:hover .lk-hero__portrait { transform: scale(1.06); }
.lk-hero__appel span { display: flex; flex-direction: column; line-height: 1.25; }
.lk-hero__appel strong {
  font-family: var(--lk-font-titre);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lk-blanc);
  font-variant-numeric: tabular-nums;
}
.lk-hero__appel small { font-size: .78rem; color: rgba(242, 241, 247, .62); }

/* Hero allege : moins de texte, plus de respiration */
.lk-hero__lead { margin-bottom: var(--lk-s3); max-width: 27rem; }
.lk-preuve { margin-bottom: var(--lk-s4); }


/* --- 20.2 Prestations : 3 x 2 en desktop, carrousel en mobile ----------- */

.lk-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lk-s3);
}

@media (max-width: 1040px) {
  .lk-cartes { grid-template-columns: repeat(2, 1fr); }
}

/* En dessous de 768 px : defilement horizontal avec accroche.
   Six cartes empilees feraient une colonne interminable sur un telephone. */
@media (max-width: 767px) {
  .lk-cartes {
    display: flex;
    gap: var(--lk-s2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Debordement pleine largeur pour que les cartes filent bord a bord */
    margin-inline: -1.25rem;
    padding: .5rem 1.25rem 1.25rem;
  }
  .lk-cartes::-webkit-scrollbar { display: none; }

  .lk-cartes .lk-carte {
    flex: 0 0 78%;
    scroll-snap-align: center;
    /* L apparition au defilement est desactivee dans un carrousel :
       les cartes hors ecran resteraient invisibles. */
    opacity: 1;
    transform: none;
  }
}

.lk-cartes__indice { display: none; }
@media (max-width: 767px) {
  .lk-cartes__indice {
    display: block;
    text-align: center;
    font-size: var(--lk-t-xs);
    color: var(--lk-ardoise);
    margin: 0;
  }
  .lk-cartes__indice::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 5px;
    margin-left: .5rem;
    vertical-align: middle;
    background:
      radial-gradient(circle 2.5px at 2.5px 2.5px,  var(--lk-corail) 99%, transparent 100%),
      radial-gradient(circle 2.5px at 13.5px 2.5px, var(--lk-corail) 99%, transparent 100%);
    background-repeat: no-repeat;
  }
}


/* --- 20.3 Manifeste : comparaison en deux colonnes ---------------------- */

.lk-manifeste__grille {
  display: grid;
  gap: var(--lk-s5);
  align-items: center;
}
@media (min-width: 940px) {
  .lk-manifeste__grille { grid-template-columns: 1fr 1fr; gap: var(--lk-s6); }
}

/* Accroche courte : deux membres, comme le titre du hero. Elle peut donc
   porter une taille forte sans alourdir le bloc, parce qu'elle tient en
   cinq mots. C'est la longueur qui pesait, pas le corps. */
.lk-manifeste__phrase {
  font-family: var(--lk-font-titre);
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--lk-blanc);
  margin: 0;
  max-width: 20rem;
}
.lk-manifeste__phrase .lk-marqueur { color: var(--lk-nuit); }

.lk-manifeste__sous {
  font-size: var(--lk-t-m);
  line-height: 1.55;
  color: rgba(242, 241, 247, .6);
  max-width: 24rem;
  margin-top: var(--lk-s3);
}

/* --- Tableau comparatif : par critere, pas par personne --- */

.lk-compare {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(242, 241, 247, .14);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(242, 241, 247, .02);
  table-layout: fixed;
}

/* Le style global des tableaux pose un filet gris clair sous chaque
   cellule. Sur ce bloc, qui vit sur fond nuit, ce filet ressort en clair
   et decoupe la comparaison en tranches. On repart de zero ici. */
.lk-compare th,
.lk-compare td {
  padding: .9rem 1.25rem;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  border-bottom: 0;
}

.lk-compare thead th {
  padding-block: .8rem;
  border-bottom: 1px solid rgba(242, 241, 247, .14);
  background: rgba(242, 241, 247, .04);
}
.lk-compare thead th:first-child { width: 34%; }

.lk-compare__th {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lk-compare__th--agence { color: rgba(242, 241, 247, .62); }
.lk-compare__th--direct {
  color: var(--lk-blanc);
  font-size: .95rem;
  letter-spacing: -.03em;
  text-transform: none;
}
.lk-compare__th--direct .lk-logo__trema,
.lk-compare__mob .lk-logo__trema { color: var(--lk-corail); }

.lk-compare tbody tr + tr th,
.lk-compare tbody tr + tr td {
  border-top: 1px solid rgba(242, 241, 247, .09);
}

.lk-compare__critere {
  font-family: var(--lk-font-titre);
  font-weight: 700 !important;
  font-size: .88rem;
  color: var(--lk-blanc);
  line-height: 1.35;
}

.lk-compare__agence,
.lk-compare__direct {
  font-size: .88rem;
  line-height: 1.4;
}
.lk-compare__agence { color: rgba(242, 241, 247, .62); }
.lk-compare__direct { color: rgba(242, 241, 247, .93); font-weight: 500 !important; }

/* Libelle de colonne repete en mobile, masque en desktop */
.lk-compare__mob { display: none; }

/*
 * En dessous de 720 px, trois colonnes de texte deviennent illisibles :
 * chaque cellule tomberait sur six lignes. Le critere passe donc en
 * en-tete de rangee sur toute la largeur, et les deux reponses restent
 * cote a cote en dessous — c'est la comparaison directe qui fait la
 * valeur du tableau, la perdre en empilant tout reviendrait a le
 * transformer en liste.
 */
@media (max-width: 720px) {
  .lk-compare,
  .lk-compare tbody,
  .lk-compare tbody tr { display: block; }

  .lk-compare thead { display: none; }

  .lk-compare tbody tr {
    padding: 1rem 1rem 1.15rem;
  }
  .lk-compare tbody tr + tr {
    border-top: 1px solid rgba(242, 241, 247, .09);
  }
  .lk-compare tbody tr + tr th,
  .lk-compare tbody tr + tr td { border-top: 0; }

  .lk-compare__critere {
    display: block;
    padding: 0 0 .7rem;
    font-size: .95rem;
  }

  .lk-compare__agence,
  .lk-compare__direct {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - .4rem);
    padding: 0;
    font-size: .84rem;
  }
  .lk-compare__agence { padding-right: .8rem; }
  .lk-compare__direct {
    padding-left: .8rem;
    border-left: 2px solid var(--lk-corail);
  }

  .lk-compare__mob {
    display: block;
    font-family: var(--lk-font-titre);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .3rem;
  }
  .lk-compare__agence .lk-compare__mob { color: rgba(242, 241, 247, .66); }
  .lk-compare__direct .lk-compare__mob {
    color: var(--lk-blanc);
    font-size: .78rem;
    letter-spacing: -.02em;
    text-transform: none;
  }

}

.lk-manifeste .lk-manifeste__note {
  margin-top: var(--lk-s5) !important;
  max-width: 52rem !important;
  padding-top: var(--lk-s4);
  border-top: 1px solid rgba(242, 241, 247, .12);
}


/* --- 20.4 Formulaire compact du hero ----------------------------------- */

.lk-champs-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lk-s2);
}
@media (max-width: 380px) {
  .lk-champs-duo { grid-template-columns: 1fr; }
}

.lk-form-bloc--compact { padding-block: .25rem; }
.lk-form-bloc--compact h2 {
  font-size: 1.2rem;
  margin-bottom: var(--lk-s2);
}
.lk-form-bloc--compact .lk-form { gap: .85rem; }
.lk-form-bloc--compact .lk-champ { gap: .3rem; }
.lk-form-bloc--compact .lk-champ label { font-size: .82rem; }
.lk-form-bloc--compact .lk-champ input,
.lk-form-bloc--compact .lk-champ select {
  padding: .72rem .85rem;
  font-size: 1rem;
}
.lk-form-bloc--compact .lk-btn { padding: .95rem 1.5rem; }
.lk-form-bloc--compact .lk-form__note { font-size: .78rem; }

/* La carte du hero se resserre en consequence */
.lk-hero__carte { padding: var(--lk-s3) var(--lk-s3) 1.35rem; }
@media (min-width: 980px) { .lk-hero__carte { padding: 1.75rem; } }


/* --- 20.5 Zone libre sur "Autre besoin" --------------------------------- */

.lk-champ--autre[hidden] { display: none; }
.lk-champ--autre {
  animation: lk-apparait .25s var(--lk-ease);
}
.lk-champ--autre textarea { min-height: 5rem; }

@keyframes lk-apparait {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-champ--autre { animation: none; }
}


/* 21. SOUS-MENUS DE L'EN-TÊTE ============================================ */

.lk-nav > ul > li { position: relative; }

/* Chevron sur les entrees qui ont un sous-menu */
.lk-nav > ul > .menu-item-has-children > a { padding-right: 1.05rem; }
.lk-nav > ul > .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
  transition: transform .25s var(--lk-ease), opacity .25s ease;
}
.lk-nav > ul > .menu-item-has-children:hover > a::before,
.lk-nav > ul > .menu-item-has-children:focus-within > a::before {
  opacity: 1;
  transform: rotate(45deg) translate(1px, 1px);
}

/* Le bouton d'accordeon est injecte en JavaScript sur toutes les tailles
   d'ecran : il doit donc etre explicitement masque hors mobile, sinon un
   bouton sans style apparait dans la barre en desktop. */
.lk-sous-bouton { display: none; }

.lk-nav .sub-menu {
  position: absolute;
  top: calc(100% + .85rem);
  left: 0;
  transform: translateY(-6px);
  min-width: 15rem;
  max-width: min(20rem, calc(100vw - 3rem));
  margin: 0;
  padding: .45rem;
  list-style: none;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(18, 20, 46, .08);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(18, 20, 46, .16);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s var(--lk-ease), visibility .2s;
}

/* Passerelle invisible : evite que le sous-menu se ferme entre les deux */
.lk-nav > ul > .menu-item-has-children::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: .95rem;
}

.lk-nav > ul > li:hover > .sub-menu,
.lk-nav > ul > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lk-nav .sub-menu li { margin: 0; }
.lk-nav .sub-menu a {
  display: block;
  padding: .68rem .85rem;
  border-radius: 10px;
  font-size: .89rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--lk-nuit) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.lk-nav .sub-menu a::after { display: none; }
.lk-nav .sub-menu a:hover,
.lk-nav .sub-menu a:focus-visible { background: var(--lk-brume); }
.lk-nav .sub-menu .current-menu-item > a { background: var(--lk-brume); font-weight: 600; }

/* --- Mobile : accordeon --- */
@media (max-width: 1000px) {
  .lk-nav > ul > .menu-item-has-children > a::before { display: none; }
  .lk-nav > ul > .menu-item-has-children::after { display: none; }

  .lk-nav .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 .75rem .9rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .lk-nav .menu-item-has-children.is-ouvert > .sub-menu { display: block; }

  .lk-nav .sub-menu a {
    padding: .62rem 0 .62rem .95rem;
    font-size: .95rem;
    border-left: 2px solid var(--lk-trait);
    border-radius: 0;
    white-space: normal;
  }
  .lk-nav .sub-menu a:hover { background: none; border-left-color: var(--lk-corail); }

  /* Bouton d ouverture ajoute en JavaScript */
  .lk-sous-bouton {
    position: absolute;
    right: 0;
    top: .35rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--lk-nuit);
    border-radius: 8px;
  }
  .lk-sous-bouton::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s var(--lk-ease);
  }
  .lk-sous-bouton[aria-expanded="true"]::before {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .lk-nav > ul > .menu-item-has-children { position: relative; }
}


/* 22. EN-TÊTE DE PAGE SOUS L'ÎLOT ======================================== */

/* L'en-tete etant transparent partout, les pages interieures doivent
   reserver sa hauteur dans leur propre bandeau sombre. */
body:not(.home) #contenu { padding-top: 0; }

.lk-page-entete {
  padding-block: calc(var(--lk-haut) + var(--lk-s4)) var(--lk-s5);
}

/* Les pages sans bandeau sombre gardent une marge de securite */
body:not(.home) #contenu > .lk-section:first-child {
  padding-top: calc(var(--lk-haut) + var(--lk-s4));
}


/* ==========================================================================
   23. PAGES DE PRESTATION
   Les pages de service etaient de longues colonnes de texte. Trois leviers
   cassent la lecture lineaire : un en-tete qui donne le prix tout de suite,
   une colonne laterale collante qui garde le devis a portee, et un rythme
   typographique qui distingue enfin les niveaux.
   ========================================================================== */

/* --- 23.1 En-tete de page --- */

.lk-service-hero {
  position: relative;
  isolation: isolate;
  background: var(--lk-nuit);
  color: rgba(242, 241, 247, .74);
  padding-block: calc(var(--lk-haut) + var(--lk-s4)) var(--lk-s5);
  overflow: hidden;
}
.lk-service-hero::before {
  content: "";
  position: absolute;
  inset: -70% -15% auto auto;
  width: 65vw;
  height: 65vw;
  max-width: 760px;
  max-height: 760px;
  background:
    radial-gradient(circle at 60% 40%, rgba(43, 63, 240, .38) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(255, 107, 91, .18) 0%, transparent 62%);
  z-index: -2;
  pointer-events: none;
}
.lk-service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lk-grain);
  opacity: .09;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.lk-service-hero h1 {
  color: var(--lk-blanc);
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem);
  margin-bottom: var(--lk-s2);
}
.lk-service-hero .lk-lead {
  color: rgba(242, 241, 247, .74);
  max-width: 38rem;
  margin-bottom: var(--lk-s3);
}
.lk-service-hero .lk-preuve { margin-bottom: var(--lk-s4); }
.lk-service-hero .lk-preuve svg { color: var(--lk-corail); }

.lk-service-hero__grid {
  display: grid;
  gap: var(--lk-s4);
  align-items: start;
}
@media (min-width: 900px) {
  .lk-service-hero__grid { grid-template-columns: 1.6fr .9fr; gap: var(--lk-s5); }
}

/* Bloc de prix, detache du texte */
.lk-service-prix {
  background: rgba(242, 241, 247, .06);
  border: 1px solid rgba(242, 241, 247, .16);
  border-radius: 18px;
  padding: var(--lk-s3) var(--lk-s4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lk-service-prix__val {
  font-family: var(--lk-font-titre);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--lk-blanc);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.lk-service-prix__mention {
  font-size: var(--lk-t-s);
  color: rgba(242, 241, 247, .6);
  margin: .5rem 0 0;
}
.lk-service-prix__delai {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--lk-t-s);
  font-weight: 600;
  color: var(--lk-corail);
  margin: var(--lk-s2) 0 0;
}


/* --- 23.2 Corps : contenu + colonne collante --- */

.lk-service__grid {
  display: grid;
  gap: var(--lk-s5);
  align-items: start;
}
@media (min-width: 1000px) {
  .lk-service__grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--lk-s6); }
}

.lk-service__contenu { max-width: 44rem; }

.lk-service__aside { display: none; }
@media (min-width: 1000px) {
  .lk-service__aside { display: block; }
  .lk-service__collant {
    position: sticky;
    top: calc(var(--lk-haut) + 1.25rem);
    display: grid;
    gap: var(--lk-s3);
  }
}

/* Sommaire ancre */
.lk-sommaire {
  background: var(--lk-brume);
  border-radius: var(--lk-r);
  padding: var(--lk-s3);
  margin: 0;
  border: 0;
}
.lk-sommaire__titre {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-klein);
  margin: 0 0 .85rem;
}
.lk-sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: som;
}
.lk-sommaire li { counter-increment: som; margin-bottom: .1rem; }
.lk-sommaire a {
  display: block;
  padding: .42rem 0 .42rem 1.65rem;
  position: relative;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--lk-ardoise);
  text-decoration: none;
  border-radius: 6px;
  transition: color .18s ease;
}
.lk-sommaire a::before {
  content: counter(som, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .45rem;
  font-family: var(--lk-font-titre);
  font-size: .7rem;
  font-weight: 800;
  color: var(--lk-trait);
  transition: color .18s ease;
}
.lk-sommaire a:hover,
.lk-sommaire a.is-actif { color: var(--lk-nuit); font-weight: 600; }
.lk-sommaire a:hover::before,
.lk-sommaire a.is-actif::before { color: var(--lk-corail); }

/* Encart de devis */
.lk-encart-devis {
  background: var(--lk-nuit);
  border-radius: var(--lk-r);
  padding: var(--lk-s3);
  color: rgba(242, 241, 247, .74);
}
.lk-encart-devis__titre {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-l);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lk-blanc);
  margin: 0 0 .45rem;
}
.lk-encart-devis__txt { font-size: .875rem; line-height: 1.5; margin: 0 0 var(--lk-s3); }
.lk-encart-devis .lk-btn { font-size: .95rem; padding: .9rem 1.2rem; }
.lk-encart-devis__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .8rem;
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--lk-blanc) !important;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.lk-encart-devis__tel:hover { color: var(--lk-corail) !important; }
.lk-encart-devis__tel svg { color: var(--lk-corail); }


/* --- 23.3 Rythme de lecture dans le contenu --- */

/* Le premier paragraphe fait office de chapeau */
.lk-service__contenu > .lk-lead:first-child,
.lk-service__contenu > p.lk-lead {
  font-size: var(--lk-t-l);
  line-height: 1.5;
  color: var(--lk-nuit);
  font-weight: 500;
  padding-left: var(--lk-s3);
  border-left: 3px solid var(--lk-corail);
  margin-bottom: var(--lk-s4);
}

/* Titres de section : numerotes, aeres, impossibles a confondre */
.lk-service__contenu h2 {
  position: relative;
  margin-top: var(--lk-s6);
  padding-top: var(--lk-s3);
  border-top: 1px solid var(--lk-trait);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}
.lk-service__contenu > h2:first-of-type { margin-top: var(--lk-s4); }

.lk-service__contenu h3 {
  margin-top: var(--lk-s4);
  font-size: var(--lk-t-l);
  color: var(--lk-nuit);
}

/* Les listes de prestations deviennent des blocs, plus des puces */
.lk-service__contenu .lk-liste {
  display: grid;
  gap: .1rem;
  margin: var(--lk-s3) 0;
}
.lk-service__contenu .lk-liste li {
  padding: .95rem 1.1rem .95rem 2.9rem;
  margin: 0;
  background: var(--lk-brume);
  border-radius: 10px;
  line-height: 1.5;
  transition: background-color .2s ease, transform .2s ease;
}
.lk-service__contenu .lk-liste li::before { left: 1.1rem; top: 1.4em; }
.lk-service__contenu .lk-liste li:hover {
  background: #eae9f2;
  transform: translateX(3px);
}

/* Citation : declaration pleine largeur */
.lk-service__contenu blockquote {
  border: 0;
  border-radius: var(--lk-r);
  background: var(--lk-nuit);
  color: var(--lk-blanc);
  padding: var(--lk-s4);
  margin: var(--lk-s5) 0;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.32;
  position: relative;
}
.lk-service__contenu blockquote::before {
  content: "";
  position: absolute;
  top: var(--lk-s4);
  left: 0;
  width: 4px;
  height: 2.2rem;
  background: var(--lk-corail);
  border-radius: 0 4px 4px 0;
}
.lk-service__contenu blockquote p { color: var(--lk-blanc); }

/* Separateur : le trema plutot qu'un filet */
.lk-service__contenu .wp-block-separator {
  height: 7px;
  width: 19px;
  margin: var(--lk-s5) 0;
  background:
    radial-gradient(circle 3.5px at 3.5px 3.5px,  var(--lk-corail) 99%, transparent 100%),
    radial-gradient(circle 3.5px at 15.5px 3.5px, var(--lk-corail) 99%, transparent 100%);
  background-repeat: no-repeat;
  border: 0;
}

/* Boutons dans le flux : detaches du texte */
.lk-service__contenu .wp-block-buttons { margin: var(--lk-s4) 0; }

/* FAQ du contenu */
.lk-service__contenu .wp-block-details {
  background: var(--lk-brume);
  border: 0;
  border-radius: 10px;
  padding: 0 1.1rem;
  margin-bottom: .5rem;
}
.lk-service__contenu .wp-block-details summary {
  padding: 1.05rem 0;
  font-size: var(--lk-t-m);
  line-height: 1.4;
}
.lk-service__contenu .wp-block-details[open] { padding-bottom: .6rem; }

@media (max-width: 999px) {
  .lk-service__contenu { max-width: none; }
  .lk-service__contenu h2 { margin-top: var(--lk-s5); }
}


/* ==========================================================================
   24. TARIFS : COMPARATIF ET REGLE DE DECISION
   Sans comparaison lisible, le prospect prend le moins cher par defaut :
   il ne voit pas ce qu'il achete en plus.
   ========================================================================== */

.lk-tva {
  display: inline-block;
  font-size: var(--lk-t-s);
  color: var(--lk-ardoise);
  background: var(--lk-brume);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  margin: 0;
}

/* --- Regle de decision, mise en avant --- */
.lk-regle {
  background: var(--lk-nuit);
  border-radius: var(--lk-r);
  padding: var(--lk-s3) var(--lk-s4);
  margin: var(--lk-s4) 0;
}
.lk-regle__titre {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin: 0 0 .6rem;
}
.lk-regle__txt {
  font-family: var(--lk-font-titre);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--lk-blanc);
  margin: 0;
}
.lk-regle__txt strong { color: var(--lk-corail); font-weight: 700; }

/* --- Tableau comparatif, version claire --- */
.lk-cmp {
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  overflow: hidden;
  margin: var(--lk-s4) 0;
  background: var(--lk-blanc);
}

.lk-cmp__entete,
.lk-cmp__ligne {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.25fr;
  gap: 1rem;
  padding: .85rem 1.15rem;
  align-items: start;
}

.lk-cmp__entete {
  background: var(--lk-brume);
  border-bottom: 1px solid var(--lk-trait);
  padding-block: .75rem;
}
.lk-cmp__th {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lk-ardoise);
}
.lk-cmp__th--fort { color: var(--lk-nuit); }

.lk-cmp__ligne + .lk-cmp__ligne { border-top: 1px solid var(--lk-trait); }
.lk-cmp__ligne:last-child {
  background: var(--lk-brume);
  border-top: 2px solid var(--lk-trait);
}
.lk-cmp__ligne:last-child .lk-cmp__a,
.lk-cmp__ligne:last-child .lk-cmp__b {
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: var(--lk-t-l);
  letter-spacing: -.03em;
  color: var(--lk-nuit);
}

.lk-cmp__critere {
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: .86rem;
  color: var(--lk-nuit);
  line-height: 1.35;
}
.lk-cmp__a,
.lk-cmp__b { font-size: .86rem; line-height: 1.4; }
.lk-cmp__a { color: var(--lk-ardoise); }
.lk-cmp__b { color: var(--lk-nuit); font-weight: 500; }

/* Case non comprise : trait plutot que croix */
.lk-cmp__vide { color: #b6b4c4; }
.lk-cmp__vide span[aria-hidden] { position: relative; padding-left: 1.1rem; }
.lk-cmp__vide span[aria-hidden]::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 1px;
  background: currentColor;
}

.lk-cmp__mob { display: none; }

@media (max-width: 720px) {
  .lk-cmp__entete { display: none; }
  .lk-cmp__ligne { grid-template-columns: 1fr; gap: .45rem; padding: 1rem 1.1rem 1.15rem; }
  .lk-cmp__critere { font-size: .95rem; margin-bottom: .2rem; }
  .lk-cmp__mob {
    display: block;
    font-family: var(--lk-font-titre);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lk-ardoise);
    margin-bottom: .1rem;
  }
  .lk-cmp__b {
    padding-left: .85rem;
    border-left: 2px solid var(--lk-corail);
  }
  .lk-cmp__b .lk-cmp__mob { color: var(--lk-corail); }
}

/* --- Mention sous la grille de l'accueil --- */
.lk-tarifs__apres {
  max-width: 46rem;
  margin: var(--lk-s4) auto 0;
  text-align: center;
  font-size: var(--lk-t-s);
  color: var(--lk-ardoise);
  line-height: 1.6;
}
.lk-tarifs__apres strong { color: var(--lk-nuit); }


/* 22. SIMULATEUR DE VISIBILITE IA ========================================= */

.lk-outil-tete__inner { max-width: 46rem; }
.lk-outil-tete h1 { margin-bottom: var(--lk-s2); }

/* Barre de saisie : une pilule unique, champ et bouton dans le meme
   contenant, comme un appareil et non comme un formulaire. */
.lk-geo__form {
  display: flex;
  gap: .5rem;
  margin-top: var(--lk-s4);
  padding: .5rem;
  border-radius: 100px;
  background: rgba(242, 241, 247, .07);
  border: 1px solid rgba(242, 241, 247, .16);
  flex-wrap: wrap;
}
.lk-geo__form input {
  flex: 1 1 15rem;
  min-height: 56px;
  padding: 0 1.4rem;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--lk-blanc);
  background: transparent;
  border: 0;
  border-radius: 100px;
}
.lk-geo__form input::placeholder { color: rgba(242, 241, 247, .60); } /* .45 tombait a 3,9:1 : lisible seulement pour qui sait deja quoi taper. */
.lk-geo__form input:focus-visible { outline: 2px solid var(--lk-corail); outline-offset: 2px; }
.lk-geo__form .lk-btn {
  flex: 0 0 auto;
  min-height: 56px;
  border-radius: 100px;
  box-shadow: none;
}
.lk-geo__form .lk-btn:hover { transform: none; box-shadow: none; filter: brightness(1.06); }

/* Points de suspension anime pendant le travail du serveur. */
.lk-geo__form .lk-btn.is-occupe { opacity: .85; cursor: progress; }
.lk-geo__form .lk-btn.is-occupe [data-libelle]::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: lk-points 1.2s steps(4, end) infinite;
}
@keyframes lk-points {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

.lk-geo__note { font-size: var(--lk-t-xs); color: rgba(242, 241, 247, .55); margin-top: var(--lk-s2); }

@media (max-width: 34rem) {
  .lk-geo__form { border-radius: 20px; }
  .lk-geo__form input { flex-basis: 100%; text-align: center; }
  .lk-geo__form .lk-btn { width: 100%; }
}

/* --- Console de progression --- */
.lk-geo__console {
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  padding: var(--lk-s4);
  box-shadow: 0 1px 2px rgba(18, 20, 46, .04), 0 18px 44px -28px rgba(18, 20, 46, .5);
}
.lk-geo__barre {
  height: 4px;
  border-radius: 99px;
  background: var(--lk-trait);
  overflow: hidden;
  margin-bottom: var(--lk-s3);
}
.lk-geo__barre span {
  display: block;
  height: 100%;
  width: 12%;
  border-radius: 99px;
  background: var(--lk-corail);
  transition: width .6s var(--lk-ease);
}
.lk-geo__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lk-geo__etapes li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--lk-t-s);
  color: var(--lk-trait);
  transition: color .3s ease;
}
.lk-geo__etapes li.is-actif { color: var(--lk-nuit); font-weight: 600; }
.lk-geo__etapes li.is-fait  { color: var(--lk-ardoise); font-weight: 400; }
.lk-geo__puce {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lk-trait); flex: none;
  transition: background-color .3s ease, transform .3s ease;
}
.lk-geo__etapes li.is-actif .lk-geo__puce { background: var(--lk-corail); transform: scale(1.35); }
.lk-geo__etapes li.is-fait  .lk-geo__puce { background: var(--lk-succes); transform: none; }

/* --- Erreur --- */
.lk-geo__erreur {
  padding: var(--lk-s4);
  border-radius: var(--lk-r);
  background: #FCEBE8;
  border-left: 3px solid #C03221;
  color: #8E2317;
}
.lk-geo__erreur strong { display: block; font-family: var(--lk-font-titre); margin-bottom: .3rem; }
.lk-geo__erreur p { margin: 0; font-size: var(--lk-t-s); }

/* --- Carte de resultat --- */
.lk-geo__carte {
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 20, 46, .04), 0 24px 60px -34px rgba(18, 20, 46, .55);
}

.lk-geo__tete {
  display: flex;
  align-items: center;
  gap: var(--lk-s4);
  flex-wrap: wrap;
  padding: var(--lk-s4);
  background: var(--lk-nuit);
  background-image: radial-gradient(110% 130% at 100% 0%, rgba(43, 63, 240, .34), transparent 62%);
  color: rgba(242, 241, 247, .78);
}
.lk-geo__verdict { flex: 1 1 17rem; }
.lk-geo__verdict h2 {
  color: var(--lk-blanc);
  margin: 0 0 .4rem;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
}
.lk-geo__domaine {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin: 0 0 .35rem;
}
.lk-geo__phrase { margin: 0; font-size: var(--lk-t-s); line-height: 1.5; }
.lk-geo__compte { margin: .8rem 0 0; font-size: var(--lk-t-s); color: var(--lk-blanc); }
.lk-geo__compte strong { color: var(--lk-corail); font-size: 1.15rem; }

/* Jauge : un degrade conique, sans image ni SVG. */
.lk-geo__jauge {
  --pct: 0;
  --teinte: var(--lk-corail);
  flex: 0 0 auto;
  width: 140px; height: 140px;
  border-radius: 50%;
  /*
   * La grille repartissait le chiffre et le libelle sur deux rangees de
   * 80 et 60 px : 42 px de vide s'intercalaient, et le nombre flottait
   * haut dans le cercle. En colonne, les deux se suivent.
   *
   * Le padding bas corrige le centrage optique : les chiffres ne
   * remplissent pas leur cadratin, l'encre du couple tombait 2,2 px
   * sous le centre geometrique. Retirer 4,5 px en bas remonte
   * l'ensemble de la moitie, soit exactement l'ecart mesure.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 4.5px;
  position: relative;
  background: conic-gradient(var(--teinte) calc(var(--pct) * 1%), rgba(242, 241, 247, .14) 0);
}
.lk-geo__jauge[data-etat="vert"]   { --teinte: #2FBF7E; }
.lk-geo__jauge[data-etat="orange"] { --teinte: #E9A13B; }
.lk-geo__jauge[data-etat="rouge"]  { --teinte: #FF6B5B; }
.lk-geo__jauge::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--lk-nuit);
}
.lk-geo__chiffre {
  position: relative;
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--lk-blanc);
  font-variant-numeric: tabular-nums;
}
.lk-geo__sur {
  position: relative;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(242, 241, 247, .62);
  margin-top: .1rem;
}

/* --- Liste des controles --- */
.lk-geo__liste { list-style: none; margin: 0; padding: 0; }
.lk-geo__item {
  padding: var(--lk-s3) var(--lk-s4);
  border-top: 1px solid var(--lk-trait);
  animation: lk-monte .45s var(--lk-ease) backwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes lk-monte {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-geo__item { animation: none; }
}

.lk-geo__item-tete { display: flex; align-items: center; gap: .7rem; }
.lk-geo__item-tete h3 { flex: 1; margin: 0; font-size: 1.02rem; }
.lk-geo__marque {
  width: 22px; height: 22px; border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
  background: var(--lk-trait);
}
.lk-geo__marque::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lk-blanc);
}
.lk-geo__item[data-etat="vert"]   .lk-geo__marque { background: #147A4C; }
.lk-geo__item[data-etat="orange"] .lk-geo__marque { background: #B45309; }
.lk-geo__item[data-etat="rouge"]  .lk-geo__marque { background: #C03221; }

.lk-geo__pts {
  font-family: var(--lk-font-titre);
  font-size: .82rem;
  color: var(--lk-ardoise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lk-geo__pts b { font-size: 1.1rem; color: var(--lk-nuit); }

.lk-geo__mini {
  height: 3px;
  border-radius: 99px;
  background: var(--lk-trait);
  margin: .6rem 0 .7rem;
  overflow: hidden;
}
.lk-geo__mini span { display: block; height: 100%; border-radius: 99px; background: var(--lk-nuit); }
.lk-geo__item[data-etat="vert"]   .lk-geo__mini span { background: #147A4C; }
.lk-geo__item[data-etat="orange"] .lk-geo__mini span { background: #B45309; }
.lk-geo__item[data-etat="rouge"]  .lk-geo__mini span { background: #C03221; }

.lk-geo__resume { margin: 0; font-size: var(--lk-t-s); color: var(--lk-nuit); }
.lk-geo__fix {
  margin: .7rem 0 0;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: var(--lk-brume);
  font-size: var(--lk-t-s);
  line-height: 1.5;
  color: var(--lk-ardoise);
}
.lk-geo__fix b {
  display: block;
  font-family: var(--lk-font-titre);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin-bottom: .25rem;
}

.lk-geo__pied {
  padding: var(--lk-s3) var(--lk-s4);
  border-top: 1px solid var(--lk-trait);
  background: var(--lk-brume);
}
.lk-geo__pied p { margin: 0; font-size: var(--lk-t-s); color: var(--lk-ardoise); }

@media (max-width: 34rem) {
  .lk-geo__tete, .lk-geo__item, .lk-geo__pied { padding-inline: var(--lk-s3); }
  .lk-geo__jauge { width: 116px; height: 116px; }
  .lk-geo__chiffre { font-size: 2.1rem; }
}

/* --- Pedagogie sous l outil --- */
.lk-geo__grille {
  display: grid;
  gap: var(--lk-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin-top: var(--lk-s4);
}
.lk-geo__grille h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.lk-geo__grille p { margin: 0; color: var(--lk-ardoise); font-size: var(--lk-t-s); }

/* 23. ENCART VERS L OUTIL ================================================= */

.lk-encart-outil {
  display: flex;
  align-items: center;
  gap: var(--lk-s4);
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: var(--lk-s5);
  padding: var(--lk-s4);
  border-radius: 18px;
  background: var(--lk-nuit);
  color: rgba(242, 241, 247, .78);
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(43, 63, 240, .35), transparent 60%);
}
.lk-encart-outil__txt { flex: 1 1 22rem; }
.lk-encart-outil h2 { color: var(--lk-blanc); font-size: var(--lk-t-xl); margin-bottom: .5rem; }
.lk-encart-outil p { margin: 0; font-size: var(--lk-t-s); line-height: 1.55; }
.lk-encart-outil__oeil {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin: 0 0 .5rem !important;
}
.lk-encart-outil .lk-btn { flex: 0 0 auto; }

@media (max-width: 40rem) {
  .lk-encart-outil { padding: var(--lk-s3); }
  .lk-encart-outil .lk-btn { width: 100%; }
}

/*
 * Les boutons inseres depuis l editeur portent lk-btn sur le conteneur
 * .wp-block-button et non sur le lien : la mise en forme habillait une
 * boite vide pendant que le lien gardait le style par defaut de
 * Gutenberg. On reporte donc l apparence sur le lien lui-meme.
 */
.wp-block-button.lk-btn {
  display: inline-flex;
  padding: 0;
  background: none !important;
  box-shadow: none !important;
}
.wp-block-button.lk-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: var(--lk-t-m);
  line-height: 1.2;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 0;
  border-radius: var(--lk-r-s);
  transition: transform var(--lk-tr), box-shadow var(--lk-tr);
}
.wp-block-button.lk-btn--signal > .wp-block-button__link {
  background: var(--lk-corail);
  color: var(--lk-nuit);
  box-shadow: 0 4px 0 var(--lk-corail-d);
}
.wp-block-button.lk-btn--signal > .wp-block-button__link:hover,
.wp-block-button.lk-btn--signal > .wp-block-button__link:focus-visible {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--lk-corail-d);
}
.wp-block-button.lk-btn--ghost > .wp-block-button__link {
  background: var(--lk-nuit);
  color: var(--lk-blanc);
  box-shadow: 0 4px 0 var(--lk-nuit-d);
}

/* Carte tarifaire sans montant : l'intitule remplace le chiffre absent. */
.lk-service-prix__oeil {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin: 0 0 .5rem;
}
.lk-service-prix--sans .lk-service-prix__mention {
  color: var(--lk-blanc);
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Familles du menu deroulant : le navigateur les met en italique gras par
   defaut, ce qui jure avec le reste. On les rend discretes et lisibles. */
.lk-champ optgroup {
  font-family: var(--lk-font-titre);
  font-style: normal;
  font-weight: 700;
  font-size: .82rem;
  color: var(--lk-ardoise);
}
.lk-champ optgroup option {
  font-family: var(--lk-font-corps);
  font-weight: 400;
  font-size: 1rem;
  color: var(--lk-nuit);
}


/* 24. PAGE CONSULTANT SEO ================================================= */

.lk-seo-hero { padding-block: var(--lk-s6) var(--lk-s6); }
.lk-seo-hero__grid {
  display: grid;
  gap: var(--lk-s5);
  grid-template-columns: 1.25fr .85fr;
  align-items: start;
  margin-top: var(--lk-s3);
}
@media (max-width: 62rem) {
  .lk-seo-hero__grid { grid-template-columns: 1fr; }
}

.lk-seo-hero h1 { margin-bottom: var(--lk-s3); }
.lk-seo-hero h1 em {
  font-style: normal;
  color: var(--lk-corail);
}

.lk-seo-hero__points {
  list-style: none;
  margin: var(--lk-s4) 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.lk-seo-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--lk-t-s);
  color: rgba(242, 241, 247, .84);
  line-height: 1.45;
}
.lk-seo-hero__points svg { flex: none; color: var(--lk-corail); margin-top: .12rem; }

/* Carte laterale : ce que le visiteur veut savoir avant de lire le reste,
   pose a cote du titre plutot qu au bas de la page. */
.lk-seo-hero__carte {
  padding: var(--lk-s4);
  border-radius: 18px;
  background: rgba(242, 241, 247, .05);
  border: 1px solid rgba(242, 241, 247, .13);
}
.lk-seo-hero__carte-oeil {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin: 0 0 var(--lk-s3);
}
.lk-seo-hero__liste {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .7rem;
  color: rgba(242, 241, 247, .86);
  font-size: var(--lk-t-s);
  line-height: 1.5;
}
.lk-seo-hero__liste::marker { color: var(--lk-corail); }
.lk-seo-hero__liste li::marker { color: var(--lk-corail); font-weight: 700; }
.lk-seo-hero__carte-note {
  margin: var(--lk-s3) 0 0;
  padding-top: var(--lk-s3);
  border-top: 1px solid rgba(242, 241, 247, .13);
  font-size: var(--lk-t-xs);
  color: rgba(242, 241, 247, .58);
}

/* Ligne de prix des cartes de prestation. */
.lk-carte__prix {
  margin-top: auto;
  padding-top: var(--lk-s2);
  font-family: var(--lk-font-titre);
  font-weight: 700;
  font-size: var(--lk-t-s);
  color: var(--lk-nuit);
}
.lk-carte__prix::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--lk-corail);
  margin-bottom: .55rem;
}


/* 25. AJUSTEMENTS D ESPACEMENT ============================================ */

/* Grille simple pour les prestations qui portent un tarif : on les
   compare du regard, pas en faisant defiler. */
.lk-cartes--grille {
  display: grid !important;
  /* 20 rem plutot que 17 : a 17, quatre colonnes se forment sur un grand
     ecran et le texte tombe sur des colonnes de six mots. Trois colonnes
     plus larges se lisent mieux, et cinq cartes se rangent en 3 + 2. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--lk-s3) !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.lk-cartes--grille .lk-carte {
  width: auto !important;
  min-width: 0 !important;
  flex: initial !important;
  scroll-snap-align: none;
  /* Colonne, pour que la ligne de tarif tombe au bas de chaque carte
     quelle que soit la longueur du texte au-dessus. */
  display: flex;
  flex-direction: column;
}

/*
 * Respiration des blocs de contenu.
 *
 * Les titres etaient poses juste au-dessus de leur paragraphe, sans
 * ecart suffisant pour qu on lise le second comme la suite du premier
 * plutot que comme sa continuation. Un titre a besoin d air au-dessus,
 * beaucoup moins en dessous : c est ce rapport qui dit au lecteur ou
 * commence une idee.
 */
.lk-carte h3 { margin-top: 0; margin-bottom: .55rem; }
.lk-carte p { margin: 0 0 .75rem; }
.lk-carte p:last-child { margin-bottom: 0; }

/* La ligne de tarif doit rester collee au bas de la carte, sinon elle
   flotte a une hauteur differente dans chaque colonne et l'oeil ne peut
   plus comparer. Le selecteur reprend l'element pour passer devant la
   regle generique ci-dessus, qui remettait la marge a zero. */
.lk-carte p.lk-carte__prix { margin-top: auto; margin-bottom: 0; }

.lk-etape h3 { margin-bottom: .6rem; }
.lk-etape p { margin: 0; }

.lk-real__corps { padding-block: var(--lk-s3) calc(var(--lk-s3) + .2rem); }
.lk-real__metier { margin-bottom: .3rem; }

.lk-section__entete h2 { margin-bottom: .9rem; }
.lk-section__entete .lk-lead { margin-top: 0; }
.lk-section__entete .lk-num { margin-bottom: 1rem; }

/* Les paragraphes qui se suivent dans une colonne de texte. */
.lk-prose p + p,
.lk-service__corps p + p { margin-top: 1.1rem; }

/* Une image suivie de sa legende ou d un titre. */
.lk-prose img,
.lk-service__corps img { margin-block: var(--lk-s3); }
.lk-prose figure,
.lk-service__corps figure { margin-block: var(--lk-s4); }
.lk-prose figcaption { margin-top: .6rem; font-size: var(--lk-t-xs); color: var(--lk-ardoise); }

/* Un titre qui suit un paragraphe a besoin de plus d air au-dessus. */
.lk-prose h2, .lk-service__corps h2 { margin-top: var(--lk-s5); margin-bottom: .9rem; }
.lk-prose h3, .lk-service__corps h3 { margin-top: var(--lk-s4); margin-bottom: .6rem; }
.lk-prose h2:first-child, .lk-service__corps h2:first-child { margin-top: 0; }

/* Les listes collaient au paragraphe qui les introduit. */
.lk-prose ul, .lk-prose ol,
.lk-service__corps ul, .lk-service__corps ol { margin-block: 1rem; }
.lk-prose li + li, .lk-service__corps li + li { margin-top: .45rem; }

/* 26. ESPACEMENTS RELEVÉS AU PIXEL ======================================== */

/*
 * Cinq paires de blocs se touchaient, mesurees a moins de 8 px d ecart
 * sur mobile. Ce ne sont pas des oublis de marge mais des marges a zero
 * heritees de regles generiques : chaque element ci-dessous recoit
 * l ecart qui correspond a son role, pas une valeur uniforme.
 */

/* Surtitre numerote puis phrase manifeste. Les selecteurs reprennent le
   nom de balise parce que la regle generique du bloc, ".lk-manifeste p",
   remet toutes les marges a zero et l emporte sinon. */
.lk-manifeste .lk-num { margin-bottom: 1.15rem; }
.lk-manifeste p.lk-manifeste__phrase { margin-bottom: 1.3rem; }
.lk-manifeste p.lk-manifeste__sous { margin-top: 0; }

/* Titre de groupe de references et sa ligne d explication. */
.lk-real-groupe__titre { margin-bottom: .55rem; }

/* Metier puis commune : un couple etiquette + precision, ecart court
   mais qui doit rester visible. */
.lk-real__metier { margin-bottom: .45rem; }

/* Nom de la formule et sa description. */
.lk-tarif__nom { margin-bottom: .6rem; }
.lk-tarif__desc { margin-bottom: 1.1rem; }

/* 27. TROIS CORRECTIONS RELEVÉES À L'ŒIL ================================== */

/*
 * Les deux reperes du hero tiennent sur une ligne, y compris a 375 px.
 * A deux elements, le passage a la ligne ne gagne rien : il casse la
 * lecture horizontale et fait descendre le bouton d'appel sous la ligne
 * de flottaison. Le rembourrage et le corps se resserrent juste assez
 * pour que les deux entrent.
 */
.lk-preuve { flex-wrap: nowrap; }

@media (max-width: 26rem) {
  .lk-preuve { gap: .4rem; }
  .lk-preuve li {
    padding: .42rem .7rem;
    font-size: .78rem;
    white-space: nowrap;
  }
  .lk-preuve li svg { width: 15px; height: 15px; }
}

/*
 * "A partir de" au-dessus du montant.
 *
 * Sans regle propre, la mention heritait du corps du prix : elle
 * s'affichait a 48 px, collee au chiffre, et se lisait comme un morceau
 * du montant. Elle passe sur sa propre ligne, au corps du texte courant.
 */
.lk-tarif__des {
  display: block;
  font-family: var(--lk-font-texte, var(--lk-font-corps));
  font-size: var(--lk-t-xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--lk-ardoise);
  margin-bottom: .3rem;
}
.lk-tarif--vedette .lk-tarif__des,
.lk-tarif--phare .lk-tarif__des { color: rgba(242, 241, 247, .6); }

/* Meme traitement sur la carte tarifaire des pages de prestation, ou le
   montant est rendu d'un seul tenant. */
.lk-service-prix__val { line-height: 1.1; }

/*
 * Intertitre d'un groupe de references.
 *
 * Il suivait la grille du groupe precedent d'assez pres pour se lire
 * comme la legende de la derniere vignette plutot que comme l'annonce de
 * celles qui viennent. Un titre appartient a ce qui le suit : l'ecart
 * au-dessus doit donc etre nettement plus grand que celui du dessous.
 */
.lk-real-groupe { margin-top: var(--lk-s6); margin-bottom: var(--lk-s3); }
.lk-real-groupe:first-of-type { margin-top: 0; }

/*
 * Un bouton ne se souligne jamais.
 *
 * Le soulignement est le signal d'un lien dans une phrase : il dit "ce
 * mot mene ailleurs". Un bouton porte deja ce signal par sa forme, et
 * l'ajouter au survol donne l'impression que le libelle se casse. Les
 * regles de survol du pied de page et du fil d'Ariane attrapaient les
 * boutons qui s'y trouvent, d'ou cette mise au point explicite, assez
 * specifique pour passer devant elles.
 */
a.lk-btn,
a.lk-btn:hover,
a.lk-btn:focus,
a.lk-btn:focus-visible,
.lk-footer a.lk-btn:hover,
.lk-fil a.lk-btn:hover,
.wp-block-button > .wp-block-button__link,
.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link:focus-visible {
  text-decoration: none;
}


/* 28. COLONNE UTILE DU HERO DE PRESTATION ================================= */

.lk-service-hero__col { display: flex; flex-direction: column; gap: var(--lk-s3); }

.lk-hero-form,
.lk-hero-outil {
  background: var(--lk-blanc);
  border-radius: 18px;
  padding: var(--lk-s3);
  box-shadow: 0 1px 2px rgba(18, 20, 46, .05), 0 22px 50px -30px rgba(18, 20, 46, .6);
}
.lk-hero-form__titre,
.lk-hero-outil__oeil {
  font-family: var(--lk-font-titre);
  font-weight: 800;
  color: var(--lk-nuit);
  margin: 0 0 var(--lk-s2);
}
.lk-hero-form__titre { font-size: 1.05rem; }
.lk-hero-outil__oeil {
  font-size: var(--lk-t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-corail);
  margin-bottom: .5rem;
}
.lk-hero-outil__txt {
  font-size: var(--lk-t-s);
  line-height: 1.5;
  color: var(--lk-ardoise);
  margin: 0 0 var(--lk-s3);
}

/* Le simulateur pose dans une carte claire : la barre reprend le fond
   de la page plutot que le voile clair prevu pour les blocs sombres. */
.lk-hero-outil .lk-geo__form {
  margin-top: 0;
  background: var(--lk-brume);
  border-color: var(--lk-trait);
}
.lk-hero-outil .lk-geo__form input { color: var(--lk-nuit); min-height: 48px; }
.lk-hero-outil .lk-geo__form input::placeholder { color: var(--lk-ardoise); }
.lk-hero-outil .lk-geo__form .lk-btn { min-height: 48px; padding-inline: 1.25rem; }

/*
 * CTA secondaire sur fond sombre.
 *
 * Un remplissage a 13 % de blanc sur du bleu nuit donne un rapport de
 * 1,3 entre le bouton et son fond : l'oeil ne le lit pas comme un
 * bouton, seulement comme du texte un peu plus clair. Le contour passe
 * au blanc franc, ce qui suffit a le poser sans lui faire concurrencer
 * le corail du bouton principal.
 */
.lk-section--nuit .lk-btn--ghost,
.lk-hero .lk-btn--ghost,
.lk-bandeau .lk-btn--ghost,
.lk-article-cta .lk-btn--ghost,
.lk-encart-devis .lk-btn--ghost,
.lk-service-hero .lk-btn--ghost {
  background: rgba(242, 241, 247, .08);
  border: 2px solid var(--lk-blanc);
  color: var(--lk-blanc);
}


/* 29. HERO DE PRESTATION, VERSION ÉPURÉE ================================== */

/* Une seule colonne : le titre respire, l'action se voit. */
.lk-service-hero__grid { display: block; max-width: 46rem; }

/* La pastille du prix se distingue des autres reperes : c'est la seule
   qui reponde a la question posee avant toutes les autres. */
.lk-preuve__prix {
  background: var(--lk-corail) !important;
  border-color: var(--lk-corail) !important;
  color: var(--lk-nuit) !important;
  font-weight: 700 !important;
}
.lk-preuve__prix svg { color: var(--lk-nuit) !important; }

.lk-service-hero .lk-btns { margin-top: var(--lk-s4); }

/* Le hero de la page SEO suit la meme regle : une colonne, une action. */
.lk-seo-hero__grid { display: block; max-width: 46rem; }
.lk-seo-hero__prix { font-weight: 650; color: var(--lk-blanc) !important; }
.lk-seo-hero__prix svg { color: var(--lk-corail); }

/* 30. PASTILLES FINES DANS LES HEROS ====================================== */

/*
 * Les reperes du hero etaient dimensionnes comme des boutons : un
 * rembourrage genereux, un corps proche du texte courant, et une bordure
 * marquee. A trois ou quatre, ils formaient un pave qui poussait l'action
 * sous la ligne de flottaison. Ce sont des mentions, pas des commandes :
 * ils reprennent la taille d'une legende.
 */
.lk-service-hero .lk-preuve,
.lk-seo-hero__points {
  gap: .4rem;
  margin-bottom: var(--lk-s3);
}
.lk-service-hero .lk-preuve li,
.lk-seo-hero__points li {
  padding: .28rem .7rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 99px;
  background: rgba(242, 241, 247, .06);
  border: 1px solid rgba(242, 241, 247, .14);
}
.lk-service-hero .lk-preuve li svg,
.lk-seo-hero__points li svg { width: 13px; height: 13px; }

/* La pastille du prix garde sa couleur, sans grossir pour autant. */
.lk-service-hero .lk-preuve__prix { font-weight: 700 !important; }

/* Le hero de la page SEO utilise une liste verticale : elle prend la
   meme forme que les pastilles des autres pages. */
.lk-seo-hero__points {
  display: flex;
  flex-wrap: wrap;
}
.lk-seo-hero__points li { align-items: center; }

/* 31. BOUTONS EN PILULE =================================================== */

/*
 * Tous les boutons prennent la forme du "Devis gratuit" de l'en-tete.
 * Deux rayons differents sur la meme page donnaient l'impression de deux
 * jeux de composants venus de projets differents, et les boutons de
 * contenu paraissaient plus lourds que ceux de la barre.
 */
.lk-btn,
.wp-block-button__link,
.wp-block-button.lk-btn > .wp-block-button__link,
.lk-form button[type="submit"],
.lk-geo__form .lk-btn {
  border-radius: 100px;
}

/* 32. PAGE TARIFS ========================================================= */

/*
 * Quatre colonnes, mais seulement la ou il y a quatre formules. La regle
 * s'appliquait a toutes les grilles de tarifs : sur l'accueil, qui n'en
 * affiche que trois, elle laissait une colonne vide a droite et poussait
 * les offres vers la gauche.
 */
@media (min-width: 68rem) {
  .lk-tarifs--quatre { grid-template-columns: repeat(4, 1fr); }
}

/* Trois offres, centrees dans la largeur de lecture. */
.lk-tarifs { justify-content: center; }

.lk-tarifs__note {
  max-width: 52rem;
  margin: var(--lk-s5) auto 0;
  padding-top: var(--lk-s4);
  border-top: 1px solid var(--lk-trait);
  text-align: center;
  font-size: var(--lk-t-s);
  color: var(--lk-ardoise);
}
.lk-tarifs__note strong { color: var(--lk-nuit); }

/* Le detail garde la largeur de lecture d'un texte suivi, pas celle de
   la grille : au-dela de 70 caracteres par ligne, l'oeil se perd en
   revenant a la ligne. */
.lk-tarifs__detail { max-width: 44rem; margin-inline: auto; }
.lk-tarifs__detail h2 {
  font-size: var(--lk-t-xl);
  margin-top: var(--lk-s5);
  padding-top: var(--lk-s4);
  border-top: 1px solid var(--lk-trait);
}
.lk-tarifs__detail h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lk-tarifs__detail .wp-block-separator { display: none; }


/* 33. RYTHME VISUEL DES PAGES DE PRESTATION =============================== */

/*
 * Bande de chiffres. Le bleu nuit coupe la page en deux et fait respirer
 * ce qui suit ; les valeurs reprennent le lettrage des titres, qui est
 * ce qui identifie la marque au premier coup d'oeil.
 */
.lk-bande {
  background: var(--lk-nuit);
  background-image:
    radial-gradient(120% 160% at 100% 0%, rgba(43, 63, 240, .28), transparent 60%),
    var(--lk-grain);
  background-blend-mode: normal, soft-light;
  padding-block: var(--lk-s4);
}
.lk-bande__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lk-s3);
  text-align: center;
}
.lk-bande__liste li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.lk-bande__liste li + li { border-left: 1px solid rgba(242, 241, 247, .13); }
.lk-bande__val {
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--lk-blanc);
  font-variant-numeric: tabular-nums;
}
.lk-bande__lib {
  font-size: var(--lk-t-xs);
  color: rgba(242, 241, 247, .62);
  line-height: 1.35;
}
@media (max-width: 34rem) {
  .lk-bande__liste { gap: var(--lk-s2); }
  .lk-bande__liste li + li { border-left-width: 1px; }
  .lk-bande__lib { font-size: .68rem; }
}

/*
 * Le texte de la page. Le premier paragraphe passe en accroche, et
 * chaque titre de niveau 2 recoit un filet corail : deux reperes qui
 * suffisent a decouper un texte long sans y ajouter d'images.
 */
.lk-service__contenu > p:first-of-type {
  font-size: var(--lk-t-l);
  line-height: 1.55;
  color: var(--lk-nuit);
}
.lk-service__contenu h2 {
  position: relative;
  margin-top: var(--lk-s5);
  padding-top: var(--lk-s3);
}
.lk-service__contenu h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: var(--lk-corail);
}
.lk-service__contenu h2:first-child { margin-top: 0; padding-top: 0; }
.lk-service__contenu h2:first-child::before { display: none; }

/*
 * Les citations gardent le fond bleu nuit deja defini plus haut. La
 * regle qui se trouvait ici passait le fond en gris clair sans toucher
 * a la couleur du texte, restee blanche par une declaration anterieure :
 * le bloc devenait illisible, du blanc sur du gris.
 */
.lk-service__contenu blockquote p:last-child { margin-bottom: 0; }


/* 34. PREUVE VISUELLE ===================================================== */

/*
 * Emplacement des captures annotees. Deux dispositions : une image
 * seule, ou deux cote a cote pour un avant / apres.
 *
 * Les captures sont posees sur le bleu nuit et non sur le fond de page :
 * une copie d'ecran claire, seule au milieu du blanc, se confond avec la
 * page qui la porte et perd son statut de piece a conviction.
 */
.lk-preuvev__grille {
  display: grid;
  gap: var(--lk-s3);
  padding: var(--lk-s3);
  border-radius: 18px;
  background: var(--lk-nuit);
  background-image: radial-gradient(120% 150% at 100% 0%, rgba(43, 63, 240, .3), transparent 62%);
}
.lk-preuvev__grille--paire { grid-template-columns: 1fr 1fr; }
@media (max-width: 46rem) {
  .lk-preuvev__grille--paire { grid-template-columns: 1fr; }
}

.lk-preuvev__vue { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.lk-preuvev__vue img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  background: var(--lk-brume);
}

.lk-preuvev__role {
  font-family: var(--lk-font-titre);
  font-size: var(--lk-t-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lk-corail);
}
.lk-preuvev__date {
  font-size: var(--lk-t-xs);
  color: rgba(242, 241, 247, .6);
  font-variant-numeric: tabular-nums;
}

.lk-preuvev__reperes { margin-top: var(--lk-s3); max-width: 46rem; }
.lk-preuvev__note {
  margin-top: var(--lk-s3);
  font-size: var(--lk-t-xs);
  color: var(--lk-ardoise);
}


/* 35. PAGES LIÉES ========================================================= */

.lk-suite__grille {
  display: grid;
  gap: var(--lk-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.lk-suite__carte {
  display: grid;
  gap: .4rem;
  padding: var(--lk-s3);
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: var(--lk-r);
  text-decoration: none;
  transition: transform .3s var(--lk-ease), box-shadow .3s ease, border-color .3s ease;
}
.lk-suite__carte:hover,
.lk-suite__carte:focus-visible {
  transform: translateY(-4px);
  border-color: var(--lk-corail);
  box-shadow: var(--lk-o-l);
}
.lk-suite__nom {
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--lk-nuit);
  letter-spacing: -.02em;
}
.lk-suite__txt {
  font-size: var(--lk-t-s);
  line-height: 1.45;
  color: var(--lk-ardoise);
}
.lk-suite__fleche { color: var(--lk-corail); margin-top: .3rem; }
.lk-suite__carte:hover .lk-suite__fleche { transform: translateX(3px); }

/* L'introduction de la rubrique se lit comme un texte, pas comme une grille. */
.lk-blog-intro { padding-bottom: 0; }
.lk-blog-intro .lk-prose { max-width: 44rem; }


/* 36. SCHEMAS DES PRESTATIONS ============================================= */

.lk-schema { padding-block: var(--lk-s5); }
.lk-schema__fig { margin: 0; }
.lk-schema__fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(18, 20, 46, .06), 0 26px 60px -34px rgba(18, 20, 46, .6);
}

/* 37. DEUX REPÈRES AU MAXIMUM SUR MOBILE ================================== */

/*
 * Trois pastilles tiennent sur une ligne en grand ecran, mais pas sur un
 * telephone : la troisieme passe seule a la ligne et le bloc gagne une
 * hauteur entiere, qui repousse le bouton hors du premier ecran. Le
 * troisieme repere est donc masque sous 48 rem.
 *
 * Il est retire de l'affichage, pas du code : c'est une decision de mise
 * en page, et l'information reste dans la page pour les moteurs comme
 * pour les lecteurs d'ecran, qui ne sont pas concernes par la place
 * disponible a l'ecran.
 */
@media (max-width: 48rem) {
  .lk-service-hero .lk-preuve li:nth-child(n+3),
  .lk-seo-hero__points li:nth-child(n+3) {
    display: none;
  }
}

/*
 * Les reperes de la page SEO suivent la meme regle que ceux des autres
 * heros : deux au maximum sur mobile, et assez resserres pour tenir sur
 * une ligne. Ils utilisent une classe distincte, la regle precedente ne
 * les atteignait pas.
 */
@media (max-width: 26rem) {
  .lk-seo-hero__points { gap: .4rem; flex-wrap: nowrap; }
  .lk-seo-hero__points li {
    padding: .42rem .7rem;
    font-size: .78rem;
    white-space: nowrap;
  }
  .lk-seo-hero__points li svg { width: 15px; height: 15px; }
}

/* Ligne d'aide sous un champ : elle precise sans alourdir le libelle. */
.lk-champ__aide {
  margin: .4rem 0 0;
  font-size: var(--lk-t-xs);
  line-height: 1.45;
  color: var(--lk-ardoise);
}

/* Familles du menu deroulant : en capitales, elles se lisent comme des
   en-tetes meme quand le systeme ignore la mise en forme des optgroup. */
.lk-champ optgroup {
  font-family: var(--lk-font-titre);
  font-style: normal;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--lk-ardoise);
  background: var(--lk-brume);
}
.lk-champ optgroup option {
  font-family: var(--lk-font-texte, var(--lk-font-corps));
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--lk-nuit);
  background: var(--lk-blanc);
}

/* =====================================================================
   38. Corrections issues de l'audit CRO
   ===================================================================== */

/* --- Liens dans un bloc clair imbrique dans une section sombre --------
   .lk-section--nuit a:not(.lk-btn) passe le lien en corail, ce qui est
   juste sur le fond nuit (7,4:1) mais faux dans les cartes a fond blanc
   qui y sont imbriquees : le corail n'y atteint que 2,8:1. C'est ce qui
   rendait le meme composant .lk-form__appel ardoise sous un formulaire
   et corail sous l'autre.                                              */

.lk-section--nuit .lk-form-bloc a:not(.lk-btn),
.lk-section--nuit .lk-carte a:not(.lk-btn),
.lk-section--nuit .lk-tarif a:not(.lk-btn) {
  color: var(--lk-ardoise);
}

.lk-section--nuit .lk-form-bloc a:not(.lk-btn):hover,
.lk-section--nuit .lk-form-bloc a:not(.lk-btn):focus-visible,
.lk-section--nuit .lk-carte a:not(.lk-btn):hover,
.lk-section--nuit .lk-carte a:not(.lk-btn):focus-visible {
  color: var(--lk-nuit);
}

/* --- Pied de page : liens de navigation trop serres ------------------
   A 18 px de haut et .55rem d'ecart, deux liens voisins se touchent
   presque : au pouce, la cible reelle est ambigue.                     */

@media (max-width: 720px) {
  .lk-footer li { margin-bottom: 0; }

  .lk-footer li a:not(.lk-btn) {
    display: inline-block;
    padding-block: .45rem;
  }
}

/* --- Plancher typographique du texte informatif ----------------------
   Les micro-libelles en capitales (numeros, familles du menu deroulant,
   en-tetes de colonne) restent sous 13 px : la graisse et l'interlettrage
   les rendent lisibles, et les agrandir casserait la hierarchie. Seul le
   texte qui se lit comme une phrase est remonte.                       */

@media (max-width: 720px) {
  .lk-form__note,
  .lk-form-bloc--compact .lk-form__note,
  .lk-hero__appel small {
    font-size: var(--lk-t-xs);
  }
}

/* =====================================================================
   39. Refonte offre : Pack Demarrage, garantie, pont fiche vers site
   ===================================================================== */

/* --- Hero : trois reperes, deux seulement sur les petits ecrans ------
   .lk-preuve est en nowrap pour tenir sur une ligne. A 26 rem, trois
   badges ne rentrent plus : le troisieme sort. Meme regle que sur les
   pages de prestation.                                                 */

@media (max-width: 26rem) {
  .lk-preuve li:nth-child(n+3) { display: none; }
}

/* --- Prix barre du Pack ---------------------------------------------
   Le montant plein doit rester lisible, pas decoratif : c'est lui qui
   donne sa valeur a la remise. Il passe donc a cote du prix, au corps
   du texte courant, et non en exposant.                                */

.lk-tarif__barre {
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--lk-font-texte);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lk-ardoise);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  vertical-align: middle;
}
.lk-tarif--vedette .lk-tarif__barre { color: rgba(242, 241, 247, .68); }

/* --- Pont : commencer par la fiche ----------------------------------- */

.lk-tarif__pont {
  margin: var(--lk-s3) 0 0;
  padding-top: var(--lk-s3);
  border-top: 1px dashed var(--lk-trait);
  font-size: var(--lk-t-xs);
  line-height: 1.55;
  color: var(--lk-ardoise);
}
.lk-tarif__pont strong { display: block; color: var(--lk-nuit); }

/* --- Encarts sous la grille : justification et garantie -------------- */

.lk-tarifs__notes {
  display: grid;
  gap: var(--lk-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  max-width: 58rem;
  margin: var(--lk-s5) auto 0;
}

.lk-encart {
  background: var(--lk-blanc);
  border: 1px solid var(--lk-trait);
  border-radius: 14px;
  padding: var(--lk-s3) var(--lk-s4) var(--lk-s4);
}
.lk-encart h3 {
  margin: 0 0 .4rem;
  font-size: 1.02rem;
  font-weight: 700;
}
.lk-encart p {
  margin: 0;
  font-size: var(--lk-t-s);
  color: var(--lk-ardoise);
  line-height: 1.6;
}

/* La garantie engage : elle se distingue du simple argumentaire. */
.lk-encart--garantie {
  border-color: var(--lk-corail);
  box-shadow: 0 0 0 3px rgba(255, 107, 91, .1);
}
.lk-encart--garantie h3 { color: var(--lk-corail-d); }

/* --- Comparatif a trois colonnes ------------------------------------
   Le tableau d'origine opposait deux colonnes. Avec Wix en plus, la
   mise cote a cote de 50 % ne tient plus : trois colonnes de texte a
   390 px donneraient des cellules de 110 px. Sous 720 px, chaque
   reponse prend donc toute la largeur, precedee de son libelle, et
   seule celle de Laikaa garde le filet corail.                        */

.lk-compare--trois thead th:first-child { width: 22%; }

@media (max-width: 720px) {
  .lk-compare--trois .lk-compare__agence,
  .lk-compare--trois .lk-compare__direct {
    display: block;
    width: 100%;
    padding: .55rem 0 0;
    border-left: 0;
  }
  .lk-compare--trois .lk-compare__direct {
    margin-top: .55rem;
    padding: .55rem 0 0 .8rem;
    border-top: 1px solid rgba(242, 241, 247, .12);
    border-left: 2px solid var(--lk-corail);
  }
}

/* --- Tuiles de choix du besoin ---------------------------------------
   Le <select> reste soumis et valide nativement. Il ne peut donc etre
   ni display:none ni visibility:hidden : le navigateur refuserait de
   signaler un champ requis non focalisable. Il devient transparent et
   sort du flux, tout en restant a sa place dans l'arbre.              */

.lk-sr-champ {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}

.lk-tuiles { display: flex; flex-direction: column; gap: .55rem; }

.lk-tuiles__rang {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.lk-tuile {
  flex: 1 1 auto;
  min-height: 48px;
  padding: .7rem 1rem;
  border: 1.5px solid var(--lk-trait);
  border-radius: 12px;
  background: var(--lk-blanc);
  color: var(--lk-nuit);
  font-family: var(--lk-font-texte);
  font-size: var(--lk-t-s);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--lk-ease), background .16s var(--lk-ease);
}
.lk-tuile:hover { border-color: var(--lk-ardoise); }
.lk-tuile:focus-visible {
  outline: 2px solid var(--lk-klein);
  outline-offset: 2px;
}
.lk-tuile[aria-pressed="true"] {
  border-color: var(--lk-corail);
  background: rgba(255, 107, 91, .08);
}

/* Second niveau : plus discret, il precise un choix deja fait. */
.lk-tuiles__rang--deux { padding-left: .6rem; border-left: 2px solid var(--lk-corail); }
.lk-tuile--fin {
  flex: 0 1 auto;
  min-height: 44px;
  padding: .55rem .85rem;
  font-size: var(--lk-t-xs);
  font-weight: 500;
}

/* L'aide de choix ne concerne que le second niveau. */
.lk-champ__aide--tuiles { margin-top: .55rem; }

@media (max-width: 30rem) {
  .lk-tuiles__rang { flex-direction: column; }
  .lk-tuiles__rang--deux { flex-direction: row; flex-wrap: wrap; }
}

/* =====================================================================
   40. Debordement des heros et comparatif lisible sur mobile
   ===================================================================== */

/* --- Heros coupes -----------------------------------------------------
   Un element de grille ou de flex garde par defaut min-width:auto : il
   refuse de descendre sous la largeur minimale de son contenu. Il suffit
   alors d'un seul bloc qui ne sait pas se couper — ici les reperes du
   hero, passes en nowrap quand les libelles etaient courts — pour que la
   colonne reclame 402 px dans un ecran de 375. La section etant en
   overflow:hidden, le debordement ne defile pas : il est coupe net.

   La regle ci-dessous rend la contrainte inoperante partout ou elle
   pourrait se reproduire, quel que soit le contenu ajoute plus tard.  */

.lk-hero__grid > *,
.lk-hero__inner > *,
.lk-service-hero > *,
.lk-seo-hero > * {
  min-width: 0;
}

/* Les reperes reviennent au retour a la ligne. Avec « Vous n'avez rien
   a rediger » et « Livre en 15 jours », la somme depasse la largeur
   utile : leur interdire de passer a la ligne fabriquait le
   debordement au lieu de l'eviter.                                     */
.lk-preuve { flex-wrap: wrap; }

/* --- Comparatif : une carte par critere sur mobile --------------------
   L'en-tete de colonnes restait affiche sous 720 px : quatre colonnes
   se partageaient 375 px, soit 90 px chacune. Et les trois reponses
   s'empilaient sans distinction visible, avec le meme gris pour « Wix »
   et pour « Agence ».

   Chaque critere devient donc une carte : son intitule en tete, puis
   trois lignes libelle / reponse. Seule celle de Laikaa est mise en
   avant, ce qui est le seul point que le lecteur doit retenir.        */

@media (max-width: 720px) {

  .lk-compare--trois thead { display: none; }

  .lk-compare--trois,
  .lk-compare--trois tbody,
  .lk-compare--trois tr { display: block; }

  .lk-compare--trois tbody tr {
    padding: var(--lk-s3) 0;
    border-top: 1px solid rgba(242, 241, 247, .12);
  }
  .lk-compare--trois tbody tr:first-child { border-top: 0; }

  .lk-compare--trois .lk-compare__critere {
    display: block;
    padding: 0 0 .55rem;
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(242, 241, 247, .6);
  }

  /*
   * Les deux reponses passent cote a cote plutot que l'une sous l'autre.
   * Empilees, il fallait memoriser la premiere pour la comparer a la
   * seconde ; en colonnes, l'oeil fait l'aller-retour sans effort, ce
   * qui est tout l'interet d'un comparatif.
   *
   * Deux colonnes seulement, grace a la bascule : a trois, chaque
   * cellule tomberait sous 110 px. La colonne masquee sort de la grille,
   * les deux restantes se partagent la largeur automatiquement.
   *
   * La distinction ne passe plus par l'opacite. Signaler « moins
   * important » en rendant « moins lisible » ne marche pas ici : les
   * deux cotes doivent se lire pour que l'ecart se voie. Chaque reponse
   * a donc sa surface, et le texte des deux reste a fort contraste.
   */
  .lk-compare--trois tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: var(--lk-s3) 0;
  }

  .lk-compare--trois .lk-compare__critere { grid-column: 1 / -1; }

  .lk-compare--trois .lk-compare__agence,
  .lk-compare--trois .lk-compare__direct {
    display: block;
    width: auto;
    margin: 0;
    padding: .6rem .7rem;
    border: 0;
    border-radius: 10px;
    font-size: .86rem;
    line-height: 1.4;
    /* Les deux colonnes s'alignent en hauteur : une reponse courte face
       a une longue ne doit pas donner deux blocs decales. */
    align-self: stretch;
  }

  .lk-compare--trois .lk-compare__agence {
    background: rgba(242, 241, 247, .06);
    color: rgba(242, 241, 247, .82);
  }

  .lk-compare--trois .lk-compare__direct {
    padding-left: .6rem;
    border-left: 3px solid var(--lk-corail);
    background: rgba(255, 107, 91, .13);
    color: var(--lk-blanc);
    font-weight: 500;
  }

  /* Le libelle coiffe sa colonne, marqueur compris : une croix sobre
     d'un cote, une coche corail de l'autre. L'oeil trie sans lire.   */
  .lk-compare--trois .lk-compare__mob {
    display: block;
    margin: 0 0 .35rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid currentColor;
    font-family: var(--lk-font-texte);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  .lk-compare--trois .lk-compare__mob::before {
    content: "";
    display: inline-block;
    vertical-align: -.14em;
    width: .9rem;
    height: .9rem;
    margin-right: .28rem;
    border-radius: 50%;
    background: currentColor;
    -webkit-mask: var(--marque) center / .58rem no-repeat;
    mask: var(--marque) center / .58rem no-repeat;
  }

  .lk-compare--trois .lk-compare__agence .lk-compare__mob {
    color: rgba(242, 241, 247, .5);
    --marque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .lk-compare--trois .lk-compare__direct .lk-compare__mob {
    color: var(--lk-corail);
    --marque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.6l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .lk-compare--trois .lk-compare__direct .lk-compare__mob .lk-logo__trema { color: var(--lk-corail); }

  /* Sous 22 rem, deux colonnes donnent moins de 150 px chacune : on
     repasse a l'empilement, qui reste lisible. */
  @media (max-width: 22rem) {
    .lk-compare--trois tbody tr { grid-template-columns: 1fr; }
  }
}

/* --- Surlignage du H1 sur deux lignes ---------------------------------
   Le fond corail est dessine par un ::after en position absolue, qui ne
   sait couvrir qu'une seule ligne : d'ou le white-space:nowrap. Avec un
   titre plus long que l'ancien, cette interdiction poussait le mot a
   393 px dans une colonne de 335 et le faisait couper.

   Sous 30 rem, le fond passe donc sur l'element lui-meme avec
   box-decoration-break:clone, qui le reproduit sur chaque ligne. Le
   rendu est identique, il tient sur deux lignes.                      */

@media (max-width: 30rem) {
  .lk-hero h1 em {
    white-space: normal;
    padding: .04em .14em .08em;
    background: var(--lk-corail);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .lk-hero h1 em::after { display: none; }
}

/* Le champ masque heritait de .lk-champ select { width:100% } : sans
   plus de specificite, il reclamait toute la largeur du formulaire. */
.lk-champ .lk-sr-champ,
select.lk-sr-champ { width: 1px; }

/* =====================================================================
   41. Les engagements : un bloc a part, pas deux encarts de plus
   ===================================================================== */

/*
 * Les garanties etaient rendues comme des encarts blancs sur fond brume :
 * elles se lisaient comme une note de bas de grille, alors que ce sont
 * les deux seules promesses opposables du site. Le fond nuit les detache
 * de la grille tarifaire sans ajouter de bruit, et reprend le contraste
 * deja utilise pour le manifeste.
 */

.lk-garanties {
  max-width: 58rem;
  margin: var(--lk-s5) auto 0;
  padding: var(--lk-s4) var(--lk-s4) var(--lk-s5);
  background: var(--lk-nuit);
  border-radius: 20px;
  /* Un lisere corail en haut : le bloc s'annonce avant d'etre lu. */
  box-shadow: inset 0 3px 0 0 var(--lk-corail);
}

.lk-garanties__titre {
  margin: 0 0 var(--lk-s4);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  color: var(--lk-blanc);
  text-align: center;
}
.lk-garanties__titre .lk-marqueur { color: var(--lk-nuit); }

.lk-garanties__grille {
  display: grid;
  gap: var(--lk-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.lk-garantie {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'icone titre' 'icone texte';
  gap: .25rem .9rem;
  align-content: start;
}

.lk-garantie__icone {
  grid-area: icone;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 107, 91, .14);
  color: var(--lk-corail);
  flex-shrink: 0;
}

.lk-garantie h3 {
  grid-area: titre;
  margin: 0;
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lk-blanc);
}
.lk-garantie h3 sup { font-size: .62em; }

.lk-garantie p {
  grid-area: texte;
  margin: .35rem 0 0;
  font-size: var(--lk-t-s);
  line-height: 1.6;
  color: rgba(242, 241, 247, .78);
}
.lk-garantie p strong { color: var(--lk-blanc); }

/* Sous 34 rem, l'icone passe au-dessus : deux colonnes laisseraient
   moins de 12 rem au texte, soit trois mots par ligne. */
@media (max-width: 34rem) {
  .lk-garanties { padding-inline: var(--lk-s3); }
  .lk-garantie {
    grid-template-columns: 1fr;
    grid-template-areas: 'icone' 'titre' 'texte';
    gap: .55rem;
  }
}

/* L'explication de la remise reste une note, pas un engagement. */
.lk-tarifs__notes { max-width: 34rem; }

/* --- Grille tarifaire a cinq offres -----------------------------------
   Cinq colonnes ne tiennent qu'au-dela de 1100 px : en dessous, chaque
   carte tomberait sous 200 px et les puces se liraient sur six lignes.
   La grille descend donc par paliers, en gardant a chaque etape des
   colonnes de largeur egale plutot qu'une derniere carte orpheline
   plus large que les autres.                                          */

.lk-tarifs--cinq { grid-template-columns: 1fr; }

@media (min-width: 34rem) {
  .lk-tarifs--cinq { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 52rem) {
  .lk-tarifs--cinq { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 69rem) {
  .lk-tarifs--cinq { grid-template-columns: repeat(5, 1fr); }
  /* A cinq de front, le rembourrage des cartes doit ceder un peu. */
  .lk-tarifs--cinq .lk-tarif { padding-inline: var(--lk-s3); }
  .lk-tarifs--cinq .lk-tarif__prix { font-size: 2.1rem; }
  .lk-tarifs--cinq .lk-tarif__barre { font-size: .92rem; margin-left: .35rem; }
}

/* =====================================================================
   42. Selecteur de besoin en deux etapes, et bulles d'information
   ===================================================================== */

/* --- Choix du besoin --------------------------------------------------
   Les propositions se replient sous leur objectif. Le chevron tourne a
   l'ouverture, le filet corail relie visuellement le sous-niveau a
   l'entree dont il depend.                                            */

.lk-choix { display: flex; flex-direction: column; gap: .5rem; }

.lk-choix__groupe { display: flex; flex-direction: column; }

.lk-choix__famille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--lk-trait);
  border-radius: 12px;
  background: var(--lk-blanc);
  color: var(--lk-nuit);
  font-family: var(--lk-font-texte);
  font-size: var(--lk-t-s);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--lk-ease), background .16s var(--lk-ease);
}
.lk-choix__famille::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-right: 2px solid var(--lk-ardoise);
  border-bottom: 2px solid var(--lk-ardoise);
  transform: rotate(45deg);
  transition: transform .18s var(--lk-ease);
}
.lk-choix__famille[aria-expanded="true"] {
  border-color: var(--lk-nuit);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.lk-choix__famille[aria-expanded="true"]::after {
  margin-top: .2rem;
  transform: rotate(-135deg);
  border-color: var(--lk-nuit);
}
.lk-choix__famille:hover { border-color: var(--lk-ardoise); }

/* Le panneau prolonge son objectif : bordures jointives, pas de gouttiere. */
.lk-choix__options {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .45rem .45rem .55rem;
  border: 1.5px solid var(--lk-nuit);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: color-mix(in srgb, var(--lk-brume) 60%, var(--lk-blanc));
}
.lk-choix__options[hidden] { display: none; }

.lk-choix__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--lk-blanc);
  color: var(--lk-nuit);
  font-family: var(--lk-font-texte);
  font-size: var(--lk-t-xs);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--lk-ease), background .16s var(--lk-ease);
}
.lk-choix__option:hover { border-color: var(--lk-ardoise); }
.lk-choix__option[aria-pressed="true"] {
  border-color: var(--lk-corail);
  background: rgba(255, 107, 91, .08);
  font-weight: 600;
}
.lk-choix__option[aria-pressed="true"]::after {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--lk-corail);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.6l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.6l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.lk-choix__famille:focus-visible,
.lk-choix__option:focus-visible {
  outline: 2px solid var(--lk-klein);
  outline-offset: 2px;
}

/* --- Bulle d'information ---------------------------------------------
   Le detail du calcul n'interesse qu'une partie des lecteurs : il passe
   derriere un badge plutot que d'allonger la page pour tout le monde. */

.lk-tarif__prix { position: relative; }

.lk-info {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: .4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lk-ardoise) 26%, transparent);
  color: var(--lk-nuit);
  font-family: var(--lk-font-titre);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  vertical-align: middle;
  transition: background .16s var(--lk-ease);
}
.lk-info:hover { background: var(--lk-corail); color: var(--lk-blanc); }
.lk-info:focus-visible { outline: 2px solid var(--lk-klein); outline-offset: 2px; }
.lk-tarif--vedette .lk-info {
  background: rgba(242, 241, 247, .22);
  color: var(--lk-blanc);
}

.lk-info__bulle {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 20;
  display: block;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: var(--lk-nuit-d, #05061A);
  color: rgba(242, 241, 247, .86);
  font-family: var(--lk-font-texte);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 12px 30px -12px rgba(5, 6, 26, .6);
}
.lk-info__bulle[hidden] { display: none; }
.lk-info__bulle strong {
  display: block;
  margin-bottom: .3rem;
  color: var(--lk-blanc);
  font-weight: 700;
}

/* =====================================================================
   43. Comparatif : bascule entre concurrents sur mobile
   ===================================================================== */

/* La bascule ne sert qu'en dessous de 720 px : au-dela, les trois
   colonnes tiennent et se lisent d'un coup d'oeil.                    */
.lk-compare__bascule { display: none; }

@media (max-width: 720px) {

  .lk-compare__bascule {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .9rem;
  }

  /* La bascule s'intercale entre le titre de section et le tableau :
     sans cette remise a zero, la marge haute du tableau s'ajoute a la
     gouttiere du conteneur et laisse 128 px de vide. */
  .lk-compare__bascule + .lk-compare { margin-top: 0; }
  .lk-manifeste__grille:has(.lk-compare__bascule) { gap: 0; }

  .lk-compare__bascule-titre {
    margin: 0;
    font-size: var(--lk-t-xs);
    color: rgba(242, 241, 247, .62);
  }

  .lk-compare__bascule-groupe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem;
    padding: .3rem;
    border-radius: 12px;
    background: rgba(242, 241, 247, .07);
  }

  .lk-compare__onglet {
    min-height: 44px;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(242, 241, 247, .7);
    font-family: var(--lk-font-texte);
    font-size: var(--lk-t-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background .16s var(--lk-ease), color .16s var(--lk-ease);
  }
  .lk-compare__onglet[aria-pressed="true"] {
    background: var(--lk-corail);
    color: var(--lk-nuit);
  }
  .lk-compare__onglet:focus-visible { outline: 2px solid var(--lk-blanc); outline-offset: 2px; }

  /* Seule la colonne retenue reste affichee. */
  .lk-compare--trois[data-vs="soi"] .lk-compare__col--agence,
  .lk-compare--trois[data-vs="agence"] .lk-compare__col--soi { display: none; }
}

/* =====================================================================
   44. La ligne de prix : montant, montant barre et badge sur une ligne
   ===================================================================== */

/*
 * Le badge d'information etait un element en ligne dans un paragraphe
 * a 3 rem : des que le montant barre s'y ajoutait, la ligne depassait
 * la largeur de la carte et le badge basculait 48 px plus bas, sous le
 * prix, ou plus rien n'indiquait a quoi il se rapportait.
 *
 * Le paragraphe devient une boite flex alignee sur la ligne de base :
 * le montant, le montant barre et le badge se suivent, tandis que la
 * mention et le prefixe « A partir de » occupent leur propre ligne.
 */

.lk-tarif__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .45rem;
  row-gap: 0;
}

/* Prefixe au-dessus, mention en dessous : chacun sa ligne pleine. */
.lk-tarif__prix .lk-tarif__des,
.lk-tarif__prix small { flex: 0 0 100%; }

/* Les marges laterales sont desormais portees par la gouttiere. */
.lk-tarif__barre { margin-left: 0; }

.lk-info {
  margin-left: 0;
  /* Aligne sur la ligne de base du montant barre plutot que sur celle
     du montant, dont le corps est trois fois plus grand. */
  align-self: baseline;
  transform: translateY(-.1em);
}

/* La bulle sort du flux : elle ne doit pas compter comme element flex. */
.lk-info__bulle { flex: 0 0 auto; }

/* =====================================================================
   45. Simulateur de cout
   ===================================================================== */

/* Le simulateur est imbrique dans .lk-manifeste, dont « .lk-manifeste p »
   impose le corps d'affichage du manifeste — 28 px en Archivo 800 — a
   tout paragraphe descendant. Les regles du simulateur sont prefixees
   pour la battre, et ce garde-fou rattrape tout paragraphe ajoute plus
   tard sans y penser. */
.lk-simu p {
  font-family: var(--lk-font-texte);
  font-size: var(--lk-t-s);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: none;
  margin: 0;
}

.lk-simu {
  margin: 0 0 var(--lk-s5);
  padding: var(--lk-s4);
  border: 1px solid rgba(242, 241, 247, .13);
  border-radius: 18px;
  background: rgba(242, 241, 247, .035);
}

.lk-simu__entete { margin-bottom: var(--lk-s4); }
.lk-simu .lk-simu__titre {
  margin: 0 0 .3rem;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  color: var(--lk-blanc);
}
.lk-simu .lk-simu__sous {
  margin: 0;
  font-size: var(--lk-t-s);
  color: rgba(242, 241, 247, .68);
}

/* --- Reglages --- */

.lk-simu__reglages {
  display: grid;
  gap: var(--lk-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-bottom: var(--lk-s4);
}

.lk-simu__reglage label {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--lk-t-xs);
  font-weight: 600;
  color: rgba(242, 241, 247, .82);
}
.lk-simu__reglage output {
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: 1.05em;
  color: var(--lk-corail);
  font-variant-numeric: tabular-nums;
}

/* Curseur : dessine a la main, les styles natifs ne suivent pas le
   fond sombre et different d'un moteur a l'autre. */
.lk-simu__reglage input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;              /* zone de tap, la piste reste fine */
  background: transparent;
  cursor: pointer;
}
.lk-simu__reglage input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(242, 241, 247, .18);
}
.lk-simu__reglage input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(242, 241, 247, .18);
}
.lk-simu__reglage input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--lk-corail);
  box-shadow: 0 2px 8px rgba(5, 6, 26, .5);
}
.lk-simu__reglage input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--lk-corail);
}
.lk-simu__reglage input[type="range"]:focus-visible { outline: 2px solid var(--lk-blanc); outline-offset: 4px; }

.lk-simu__champ {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 12rem;
  padding: 0 .85rem;
  border: 1.5px solid rgba(242, 241, 247, .2);
  border-radius: 10px;
  background: rgba(5, 6, 26, .35);
  color: rgba(242, 241, 247, .6);
}
.lk-simu__champ:focus-within { border-color: var(--lk-corail); }
.lk-simu__champ input {
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lk-blanc);
  font-family: var(--lk-font-titre);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lk-simu__champ input:focus { outline: none; }

.lk-simu .lk-simu__note {
  margin: .4rem 0 0;
  font-size: .76rem;
  color: rgba(242, 241, 247, .5);
}

/* --- Graphe --- */

.lk-simu__figure { margin: 0 0 var(--lk-s3); }
.lk-simu__figure canvas { display: block; width: 100%; }

/* --- Totaux --- */

.lk-simu__totaux { list-style: none; margin: 0; padding: 0; }

.lk-simu__total {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .2rem .6rem;
  padding: .6rem 0;
  border-top: 1px solid rgba(242, 241, 247, .1);
  font-size: var(--lk-t-s);
  color: rgba(242, 241, 247, .82);
}
.lk-simu__puce {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  align-self: center;
}
.lk-simu .lk-simu__nom { font-weight: 600; }
.lk-simu .lk-simu__somme {
  font-family: var(--lk-font-titre);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lk-simu .lk-simu__heures {
  grid-column: 2 / -1;
  font-size: .78rem;
  color: rgba(242, 241, 247, .55);
}

.lk-simu__total--laikaa { color: var(--lk-blanc); }
.lk-simu__total--laikaa .lk-simu__somme { color: var(--lk-corail); }

.lk-simu .lk-simu__verdict {
  margin-top: var(--lk-s3);
  padding: .75rem .9rem;
  border-radius: 10px;
  background: rgba(255, 107, 91, .13);
  border-left: 3px solid var(--lk-corail);
  font-size: var(--lk-t-s);
  line-height: 1.5;
  color: var(--lk-blanc);
}

.lk-simu .lk-simu__pied {
  margin: var(--lk-s3) 0 0;
  font-size: .76rem;
  line-height: 1.55;
  color: rgba(242, 241, 247, .5);
}

@media (max-width: 30rem) {
  .lk-simu { padding: var(--lk-s3); }
  .lk-simu__champ { max-width: none; }
}

/* =====================================================================
   46. Respiration sur mobile
   ===================================================================== */

/*
 * A 390 px, plusieurs blocs se touchaient presque : le pied du
 * simulateur collait aux totaux, l'entete de section n'avait que 18 px
 * avant son contenu, et les tuiles de choix 8 px entre elles. Sur un
 * ecran ou tout est empile, ces marges reglees pour le desktop ne
 * separent plus rien.
 */

@media (max-width: 40rem) {

  /* --- Entetes de section --- */
  .lk-section__entete { margin-bottom: var(--lk-s4); }
  .lk-section__entete h2 + .lk-lead,
  .lk-section__entete .lk-trema + .lk-lead { margin-top: var(--lk-s3); }

  /* --- Simulateur --- */
  .lk-simu { padding: var(--lk-s4) var(--lk-s3) var(--lk-s4); }
  .lk-simu__entete { margin-bottom: var(--lk-s5); }
  .lk-simu__reglages { gap: var(--lk-s4); margin-bottom: var(--lk-s5); }
  .lk-simu__figure { margin-bottom: var(--lk-s4); }

  .lk-simu__total { padding-block: .85rem; }
  .lk-simu .lk-simu__verdict { margin-top: var(--lk-s4); padding: .9rem 1rem; }

  /* Le pied touchait les totaux : il porte desormais sa marge et un
     filet, qui separe la lecture du calcul de ses hypotheses. */
  .lk-simu .lk-simu__pied {
    margin-top: var(--lk-s4);
    padding-top: var(--lk-s3);
    border-top: 1px solid rgba(242, 241, 247, .1);
  }

  /* --- Choix du besoin --- */
  .lk-choix { gap: .7rem; }
  .lk-choix__options { gap: .45rem; padding: .55rem .55rem .65rem; }

  /* --- Engagements --- */
  .lk-garanties { padding: var(--lk-s4) var(--lk-s3) var(--lk-s5); }
  .lk-garanties__grille { gap: var(--lk-s5); }

  /* --- Cartes tarifaires --- */
  .lk-tarif .lk-liste li { margin-bottom: .8rem; }
  .lk-tarifs { gap: var(--lk-s4); }

  /* --- Comparatif --- */
  .lk-compare--trois tbody tr { padding-block: var(--lk-s4); }
}

/* --- La limite du calcul ---------------------------------------------
   Placee sous le resultat et non en note de bas de bloc : elle doit
   etre lue avant que le visiteur ne conclue, pas apres.               */

.lk-simu .lk-simu__limite {
  margin-top: var(--lk-s4);
  padding: .9rem 1rem;
  border: 1px solid rgba(242, 241, 247, .16);
  border-radius: 12px;
  background: rgba(242, 241, 247, .04);
}
.lk-simu .lk-simu__limite h4 {
  margin: 0 0 .35rem;
  font-family: var(--lk-font-titre);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lk-blanc);
}
.lk-simu .lk-simu__limite p {
  font-size: var(--lk-t-xs);
  line-height: 1.6;
  color: rgba(242, 241, 247, .78);
}