/*
Theme Name: GeneratePress LSSEO
Theme URI: https://www.laurentsimon-seo.com
Description: Child theme GeneratePress pour laurentsimon-seo.com -- identite Matrix inverse (blanc + violet). Tokens issus de design/palettes.json (source unique). Ne JAMAIS hardcoder une couleur hors de ce bloc de variables.
Author: Laurent Simon Pro
Template: generatepress
Version: 0.9.56
*/

/* ============================================================
   Tokens LSSEO -- miroir de design/palettes.json (entree LSSEO)
   Toute evolution de palette part de palettes.json, puis ici.
   ============================================================ */
:root {
  --lsseo-primary: #7c3aed;
  --lsseo-primary-hover: #6d28d9;
  --lsseo-primary-light: #a78bfa;
  --lsseo-primary-glow: rgba(124, 58, 237, 0.3);
  --lsseo-primary-subtle: rgba(124, 58, 237, 0.05);

  --lsseo-white: #ffffff;
  --lsseo-off-white: #faf5ff;
  --lsseo-lavender: #f5f3ff;
  --lsseo-lavender-deep: #ede9fe;

  /* Palette A "Amethyste Pro" -- en-tete / pied de page violets profonds, texte blanc (WCAG AAA) */
  --lsseo-mauve: #6d28d9;          /* en-tete : blanc dessus 7.10:1 AAA */
  --lsseo-mauve-deep: #3b0764;     /* pied de page : texte lavande clair 11:1 AAA */
  --lsseo-mauve-text-light: #e9d5ff;
  --lsseo-rule-on-dark: rgba(255, 255, 255, 0.12); /* filet de separation sur fond fonce */
  --lsseo-header-text: #ffffff;
  --lsseo-header-text-soft: #ddd6fe;

  --lsseo-gray-50: #fafafa;
  --lsseo-gray-100: #f4f4f5;
  --lsseo-gray-300: #d4d4d8;
  --lsseo-gray-500: #71717a;
  --lsseo-gray-700: #3f3f46;
  --lsseo-gray-900: #18181b;

  --lsseo-success: #10b981;
  --lsseo-warning: #f59e0b;
  --lsseo-serp-url: #15803d; /* vert d'URL facon SERP Google (semantique, hero accueil) */
  --lsseo-error: #ef4444;

  --lsseo-heading: #18181b;
  --lsseo-text: #3f3f46;
  --lsseo-muted: #52525b;
  --lsseo-link: #7c3aed;
  --lsseo-link-hover: #6d28d9;

  --lsseo-font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --lsseo-font-heading: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --lsseo-font-code: "JetBrains Mono", "Fira Code", monospace;

  --lsseo-radius: 12px;
  --lsseo-radius-sm: 8px;
  --lsseo-shadow: 0 1px 3px rgba(24, 24, 27, 0.06), 0 8px 24px rgba(24, 24, 27, 0.05);
  --lsseo-shadow-primary: 0 8px 24px var(--lsseo-primary-glow);
}

/* ============================================================
   Base & typographie
   ============================================================ */
body {
  font-family: var(--lsseo-font-body);
  color: var(--lsseo-text);
  background-color: var(--lsseo-off-white);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lsseo-font-heading);
  color: var(--lsseo-heading);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 700;
}

h1, .entry-title {
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  font-weight: 800;
}
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem); margin-top: 2.5rem; }
h3 { font-size: clamp(1.15rem, 1vw + 1rem, 1.4rem); }

/* La largeur de lecture est gouvernee par la colonne d'article (voir plus bas),
   pas par un plafond fixe sur chaque paragraphe -- sinon grand vide a droite. */

a {
  color: var(--lsseo-link);
  text-decoration-color: var(--lsseo-primary-light);
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover, a:focus {
  color: var(--lsseo-link-hover);
  text-decoration-color: var(--lsseo-link-hover);
}

code, pre, kbd { font-family: var(--lsseo-font-code); }

/* Eyebrow / libelle */
.lsseo-label {
  display: inline-block;
  font-family: var(--lsseo-font-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lsseo-primary);
  background: var(--lsseo-lavender);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

/* Accent sous les titres de section */
.entry-content h2 {
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--lsseo-lavender-deep);
}

/* ============================================================
   En-tete & marque
   ============================================================ */
.site-header {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  border-bottom: 1px solid var(--lsseo-primary);
  box-shadow: 0 2px 14px rgba(59, 7, 100, 0.25);
}
.site-description {
  color: var(--lsseo-header-text-soft);
}
.main-title,
.site-title {
  font-family: var(--lsseo-font-heading);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.main-title a,
.site-title a {
  color: var(--lsseo-header-text);
}
/* GP force .main-title a:hover a var(--contrast) (sombre) -> on garde le blanc */
.main-title a:hover,
.main-title a:focus,
.site-title a:hover,
.site-title a:focus {
  color: var(--lsseo-header-text);
}
.main-title a::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--lsseo-header-text);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
  vertical-align: baseline;
}
.site-description { color: var(--lsseo-header-text-soft); }

/* Navigation -- sur en-tete mauve : texte fonce (AA), majuscules */
.main-navigation {
  background: transparent;
}
.main-navigation .main-nav ul li a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.8rem;
  transition: color 0.15s ease;
}
/* --- Systeme de couleur de la nav : override CONSOLIDE de GeneratePress ---
   GP colore les liens de nav via var(--accent) (bleu du theme) dans PLUSIEURS
   etats : survol, focus, item courant, ancetre/parent d'un sous-onglet actif
   (li[class*="current-menu-"], ce qui inclut current-menu-ancestor), recherche
   active. Sur l'en-tete mauve, TOUS ces etats doivent etre blancs. On replique
   les selecteurs EXACTS de GP (meme specificite, charges apres -> on gagne) pour
   couvrir tous les etats d'un seul bloc, sans rustine etat par etat. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a,
.main-navigation .main-nav ul li.search-item.active > a {
  color: var(--lsseo-header-text);
}
/* Soulignement anime sobre */
.main-navigation .main-nav ul li > a {
  position: relative;
}
.main-navigation .main-nav ul li > a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 2px;
  background: var(--lsseo-header-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.main-navigation .main-nav ul li > a:hover::after,
.main-navigation .main-nav ul li.current-menu-item > a::after {
  transform: scaleX(1);
}
/* Sous-menu deroulant (onglet Expertises) : GP donne un fond clair par defaut
   (var(--base)) sur lequel nos liens blancs seraient illisibles. On le passe en
   violet profond, texte clair, coherent avec l'identite de l'en-tete. */
.main-navigation .main-nav ul ul.sub-menu {
  background: var(--lsseo-mauve-deep);
  border-top: 3px solid var(--lsseo-primary);
  box-shadow: 0 14px 32px rgba(59, 7, 100, 0.35);
  border-radius: 0 0 var(--lsseo-radius-sm) var(--lsseo-radius-sm);
  overflow: hidden;
}
.main-navigation .main-nav ul ul.sub-menu li a {
  color: var(--lsseo-header-text-soft);
  letter-spacing: 1px;
}
.main-navigation .main-nav ul ul.sub-menu li:hover > a,
.main-navigation .main-nav ul ul.sub-menu li a:hover,
.main-navigation .main-nav ul ul.sub-menu li a:focus {
  color: var(--lsseo-header-text);
  background: rgba(255, 255, 255, 0.08);
}
/* Le soulignement anime encombre dans un deroulant vertical : on le neutralise */
.main-navigation .main-nav ul ul.sub-menu li > a::after { display: none; }

/* ============================================================
   Boutons
   ============================================================ */
.button,
button.button,
.wp-block-button__link,
.entry-content .button {
  display: inline-block;
  background-color: var(--lsseo-primary);
  color: var(--lsseo-white);
  border: 0;
  border-radius: var(--lsseo-radius-sm);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  box-shadow: var(--lsseo-shadow-primary);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.button:hover,
.wp-block-button__link:hover,
.entry-content .button:hover {
  background-color: var(--lsseo-primary-hover);
  color: var(--lsseo-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--lsseo-primary-glow);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--lsseo-primary);
  border: 2px solid var(--lsseo-primary);
  background: transparent;
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--lsseo-primary);
  color: var(--lsseo-white);
}

/* ============================================================
   Cartes (service teaser) & sections
   ============================================================ */
.lsseo-card {
  background: var(--lsseo-off-white);
  border: 1px solid var(--lsseo-lavender-deep);
  border-radius: var(--lsseo-radius);
  padding: 1.25rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lsseo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.16);
  border-color: var(--lsseo-primary);
}
/* Carte en colonne : titre colle en haut, lien pousse en bas (alignement egal) */
.lsseo-card { display: flex; flex-direction: column; }
.lsseo-card > h3:first-child { margin-top: 0; }
.lsseo-card > p { margin-top: 0.6rem; }
.lsseo-card > p:last-child { margin-top: auto; padding-top: 0.75rem; margin-bottom: 0; }
/* Lien "en savoir plus" avec fleche qui glisse au survol de la carte */
.lsseo-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}
.lsseo-more::after {
  content: "\2192";
  transition: transform 0.2s ease;
}
.lsseo-card:hover .lsseo-more::after { transform: translateX(4px); }
.lsseo-section-alt {
  background-color: var(--lsseo-lavender-deep);
  border-radius: var(--lsseo-radius);
}

/* ============================================================
   Pied de page (sombre)
   ============================================================ */
.site-footer,
.site-info {
  background-color: var(--lsseo-mauve-deep);
  color: var(--lsseo-mauve-text-light);
}
.site-info {
  padding: 1.5rem 0;
  font-size: 0.9rem;
}
.site-footer a,
.site-info a {
  color: #c4b5fd;
}
.site-footer a:hover,
.site-info a:hover {
  color: var(--lsseo-white);
}

/* ============================================================
   Formulaires (dont Contact Form 7) -- palette respectee
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.wpcf7 input,
.wpcf7 textarea {
  border: 1px solid var(--lsseo-lavender-deep);
  border-radius: var(--lsseo-radius-sm);
  background: var(--lsseo-white);
  color: var(--lsseo-text);
  padding: 0.6rem 0.8rem;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--lsseo-primary);
  outline: 3px solid var(--lsseo-primary-subtle);
  outline-offset: 0;
}

/* Boutons d'envoi (formulaires, CF7) alignes sur la marque */
input[type="submit"],
button[type="submit"],
.wpcf7-submit {
  background-color: var(--lsseo-primary);
  color: var(--lsseo-white);
  border: 0;
  border-radius: var(--lsseo-radius-sm);
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--lsseo-shadow-primary);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--lsseo-primary-hover);
  transform: translateY(-2px);
}

/* Puces de liste accentuees */
.entry-content ul li::marker { color: var(--lsseo-primary); }

/* ============================================================
   Arriere-plan lignes de code (pages internes)
   ============================================================ */
#lsseo-code-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.lsseo-code-line {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-family: var(--lsseo-font-code);
  font-size: 14px;
  line-height: 1;
  color: var(--lsseo-primary);
  opacity: 0.12;
  will-change: transform;
  animation-name: lsseo-drift-ltr;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.lsseo-code-line.is-rtl {
  animation-name: lsseo-drift-rtl;
}
@keyframes lsseo-drift-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes lsseo-drift-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* Contenu sur fond clair : lisible par-dessus le code, qui reste dans les marges. */
body.lsseo-codebg-on .inside-article {
  background: rgba(250, 245, 255, 0.94);
  border-radius: var(--lsseo-radius);
  box-shadow: var(--lsseo-shadow);
}
body.lsseo-codebg-on .site-content {
  background: transparent;
}

/* ============================================================
   En-tete collant (sticky) -- la nav est DANS #masthead (verifie live),
   donc rendre .site-header sticky emporte marque + navigation ensemble.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}
/* Ombre portee accentuee des que l'en-tete flotte au-dessus du contenu */
.site-header {
  box-shadow: 0 2px 14px rgba(59, 7, 100, 0.25), 0 8px 24px rgba(59, 7, 100, 0.12);
}
/* L'ancre de defilement doit degager la hauteur de l'en-tete collant */
:target { scroll-margin-top: 120px; }
html { scroll-padding-top: 120px; }

/* ============================================================
   Rythme vertical & respiration des sections
   ============================================================ */
/* Zone d'article : contenu centre, largeur de lecture confortable, air interne */
.inside-article {
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 4vw, 3.25rem);
}
body.lsseo-codebg-on .inside-article {
  padding: clamp(1.75rem, 3vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem);
}
/* Colonne de lecture : sur les pages de contenu, l'article est centre. Largeur
   calee sur l'optimum de lisibilite (~66 caracteres par ligne, "66 de
   Bringhurst" corrobore par NN/g, Baymard, Butterick). Exprimee en em (regle
   d'or portable : le ch reel depend de la fonte). ~42em de bloc, moins le
   padding lateral (~2x3.25rem), donne un texte de ~66-70ch, dans la zone
   F-pattern reellement balayee (<600px) et sous le plafond WCAG de 80ch.
   Enquete : voir memoire reference_largeur_colonne_lecture_ux. L'accueil reste
   pleine largeur pour la grille de cartes (sera retravaille selon la doctrine WOW). */
body:not(.home) .inside-article {
  /* Base (mobile/tablette) : colonne de lecture unique centree, confortable. */
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop : patron "titres larges, corps lisible" (Stripe/Linear -- choix
   Monsieur #47, enquete UX desktop). L'article s'elargit (la page occupe
   l'ecran), MAIS le corps de texte courant reste borne a la mesure de lecture
   (~74 car). Titres, chapos, cartes et CTA respirent sur toute la largeur : ce
   sont eux qui donnent la sensation d'ampleur, sans allonger les lignes de corps
   (qui, au-dela de ~90 car, fatiguent la lecture). Corps agrandi a ~19px pour un
   rendu premium (interligne 1.7 conserve). Enquete : voir memoire
   reference_largeur_colonne_lecture_ux. */
@media (min-width: 769px) {
  body { font-size: 1.1875rem; }
  body:not(.home) .inside-article { max-width: 64rem; }
  body:not(.home) .entry-content > p { max-width: 74ch; }
}
/* Accueil : paragraphes plafonnes pour la lisibilite du hero ; les cartes et
   sections en pleine largeur ne sont pas affectees. */
body.home .entry-content > p { max-width: 72ch; }

/* Flux editorial : espacement homogene entre blocs consecutifs */
.entry-content > * + * { margin-top: 1.2rem; }
.entry-content > h2 + *,
.entry-content > h3 + * { margin-top: 0.9rem; }
.entry-content > * + h2 { margin-top: 3rem; }
.entry-content > * + h3 { margin-top: 2.2rem; }
/* Listes plus aerees */
.entry-content ul,
.entry-content ol { padding-left: 1.4rem; }
.entry-content li + li { margin-top: 0.5rem; }

/* Grille de cartes services : gouttiere reguliere, colonnes fluides */
.lsseo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.lsseo-card { height: 100%; }

/* Section pleine largeur (fond alterne) : marge interne genereuse */
.lsseo-section-alt {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin: 2.5rem 0;
}

/* ============================================================
   Rendu mobile (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 1rem; line-height: 1.65; }

  /* --- En-tete mobile : titre et hamburger sur UNE seule rangee ---------------
     Constat (mesure du 27/07/2026, viewports 320/360/390/430) : `.inside-header`
     est deja en flex, mais avec `flex-wrap: wrap` et un padding de 20px/30px.
     Le titre a 25px mesure 297px : ajoute aux 60px de padding et aux 55px du
     bouton, il depasse la largeur d'un telephone -> le hamburger part a la ligne
     et l'en-tete grimpe a 131px (161px a 320px de large).
     ATTENTION, contre-intuitif : reduire la seule taille du titre NE SUFFIT PAS.
     Le balayage montre que meme a 14px le bouton reste a la ligne tant que le
     conteneur n'est pas maitrise. Il faut donc `min-width: 0` sur la marque
     (sans quoi un element flex refuse de retrecir sous son contenu) ET une
     taille de titre FLUIDE. Le retour a la ligne du conteneur, lui, est
     CONSERVE (`flex-wrap: wrap`) : c'est ce qui permet au menu deroulant de
     s'installer sur sa propre rangee, sous le titre et le bouton. Voir le
     commentaire de la declaration elle-meme, plus bas.
     Taille derivee, non choisie : la largeur disponible vaut
     (largeur d'ecran - 32 de padding - 55 du bouton - 10 de gouttiere), et le
     titre occupe environ 11,9 x sa taille de police. Le clamp ci-dessous suit
     cette pente -- mesure sans troncature de 320px a 430px.
     Resultat : en-tete 131px -> 81px, cible tactile 55x60 conservee, desktop
     strictement inchange (verifie a 1280px). Aucun `!important` necessaire :
     `.site-header .inside-header` (0,2,0) bat la regle GeneratePress (0,1,0). */
  .site-header .inside-header {
    /* `wrap` et non `nowrap` : le titre et le bouton tiennent sur la
       premiere rangee (titre plafonne), et le menu deploye occupe la
       seconde en pleine largeur. Verifie a 320/360/390/430. */
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
  }
  .site-header .site-branding {
    flex: 1 1 auto;
    min-width: 0; /* sans quoi le titre impose sa largeur intrinseque */
  }
  .site-header #mobile-menu-control-wrapper { flex: 0 0 auto; }
  .site-header .main-title {
    font-size: clamp(18px, 5.4vw, 24px);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Declencheur (barres puis croix) : blanc dans TOUS ses etats.
     GeneratePress emet `button.menu-toggle:hover, button.menu-toggle:focus
     { color: var(--contrast) }`, soit #222222 -- presque noir -- avec une
     specificite (0,2,1) qui bat un simple `.menu-toggle:hover` (0,2,0).
     Or sur iOS le `:focus` PERSISTE apres l'appui (et le `:hover` y reste
     « colle ») : une fois touche, le bouton restait donc sombre sur
     l'en-tete mauve. Mesure du 28/07 : etat normal blanc, `:hover` et
     `:focus` a rgb(34,34,34), `:active` blanc -- d'ou l'aspect intermittent.
     On ancre sur `#masthead` et non sur le wrapper : GeneratePress sert DEUX
     `button.menu-toggle` dans l'en-tete -- celui du wrapper (visible) et un
     second dans `.inside-navigation` (masque par un reglage du Customizer).
     Ancrer sur le wrapper laissait le second au noir : il serait reapparu avec
     le defaut d'origine le jour ou ce reglage changerait. `#masthead
     button.menu-toggle:hover` vaut (1,1,2) et bat le (0,2,1) de GP, sans
     !important.
     ERRATUM au passage : l'ancienne regle portait
     `.main-navigation .mobile-menu-control-wrapper .menu-toggle`, un selecteur
     DESCENDANT alors que les deux classes vivent sur le MEME element
     (`<nav class="main-navigation mobile-menu-control-wrapper">`). Elle ne
     matchait donc rien -- verifie par `element.matches()`. */
  #masthead button.menu-toggle,
  #masthead button.menu-toggle:hover,
  #masthead button.menu-toggle:focus,
  #masthead button.menu-toggle:focus-visible,
  #masthead button.menu-toggle:active {
    color: var(--lsseo-header-text);
  }
  /* Menu deroulant mobile : reste sur le violet, texte clair lisible */
  .main-navigation .main-nav ul li a {
    letter-spacing: 1px;
    font-size: 0.85rem;
  }
  .main-navigation .main-nav ul ul.sub-menu {
    background: var(--lsseo-mauve-deep);
  }
  /* Le soulignement anime encombre en liste verticale : on le neutralise */
  .main-navigation .main-nav ul li > a::after { display: none; }

  /* Ancre sticky : marge reduite (en-tete plus court en mobile) */
  :target { scroll-margin-top: 90px; }
  html { scroll-padding-top: 90px; }

  /* Cartes empilees, un peu plus compactes */
  .lsseo-cards { gap: 1rem; margin-top: 1.5rem; }
  .lsseo-section-alt { margin: 1.75rem 0; }

  /* Le fond de code reste discret sans deborder */
  .lsseo-code-line { font-size: 12px; opacity: 0.09; }
}

/* ============================================================
   Pied de page enrichi (marque + liens + contact + copyright)
   ============================================================ */
.site-info .inside-site-info { display: block; text-align: left; }
.lsseo-footer {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 2rem 3rem;
  align-items: start;
  padding-bottom: 1.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--lsseo-rule-on-dark);
}
/* Chaque colonne : meme structure verticale -> les tops s'alignent proprement */
.lsseo-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* En-tete de colonne (Navigation / Contact) : cale l'alignement visuel */
.lsseo-footer-h {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--lsseo-header-text-soft);
  margin-bottom: 0.15rem;
}
.lsseo-footer-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lsseo-white);
}
.lsseo-footer-tagline {
  margin-top: 0.1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--lsseo-mauve-text-light);
  max-width: 34ch;
}
.lsseo-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lsseo-footer-copy {
  font-size: 0.82rem;
  opacity: 0.85;
}
@media (max-width: 768px) {
  .lsseo-footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ============================================================
   Focus clavier visible (accessibilite -- exemplarite)
   ============================================================ */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--lsseo-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sur l'en-tete mauve et le pied violet : contour blanc pour rester visible */
.site-header a:focus-visible,
.main-navigation a:focus-visible,
.site-info a:focus-visible {
  outline-color: var(--lsseo-header-text);
}

/* ============================================================
   Accessibilite : mouvement reduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Hero anime accueil (concept C : « la recherche qui trouve »)
   Namespace #lsseo-hero-c. Rendu via generate_after_header, borne
   dans le conteneur du site (max-width 1200px, centre). JS : assets/hero-c.js.
   ============================================================ */
#lsseo-hero-c {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 60px) clamp(16px, 4vw, 40px) clamp(30px, 5vh, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: radial-gradient(1000px 460px at 50% -12%, var(--lsseo-lavender-deep), transparent 62%);
}
/* Ligne 2/3 = presentation d'une methode (pas un concurrent) : label violet distinct */
#lsseo-hero-c .lsc-result.lsc-method .lsc-url {
  color: var(--lsseo-primary);
  font-family: var(--lsseo-font-code, "JetBrains Mono", monospace);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#lsseo-hero-c .lsc-result.lsc-method .lsc-url::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lsseo-primary);
}
#lsseo-hero-c .lsc-eyebrow {
  display: inline-block;
  background: var(--lsseo-lavender-deep);
  color: var(--lsseo-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
#lsseo-hero-c .lsc-h1 {
  font-weight: 800;
  line-height: 1.06;
  color: var(--lsseo-heading);
  font-size: clamp(2rem, 5vw, 3.3rem);
  letter-spacing: -1px;
  max-width: 16ch;
  margin: 0 auto 14px;
}
#lsseo-hero-c .lsc-accent { color: var(--lsseo-primary); }
#lsseo-hero-c .lsc-sub {
  color: var(--lsseo-text);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
  max-width: 52ch;
  margin: 0 auto 24px;
  line-height: 1.5;
}
#lsseo-hero-c .lsc-cta {
  display: inline-block;
  background: var(--lsseo-primary);
  color: var(--lsseo-white);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--lsseo-radius-sm);
  text-decoration: none;
  box-shadow: var(--lsseo-shadow-primary);
  transition: transform 0.22s ease, background 0.22s ease;
  margin-bottom: clamp(28px, 4vh, 44px);
}
#lsseo-hero-c .lsc-cta:hover {
  background: var(--lsseo-primary-hover);
  transform: translateY(-3px);
  color: var(--lsseo-white);
}
#lsseo-hero-c .lsc-scene {
  width: 100%;
  max-width: 600px;
  text-align: left;
  margin: 0 auto;
}
#lsseo-hero-c .lsc-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--lsseo-white);
  border-radius: 32px;
  padding: 15px 22px;
  box-shadow: 0 12px 40px rgba(59, 7, 100, 0.14), 0 2px 6px rgba(59, 7, 100, 0.07);
  border: 1px solid var(--lsseo-header-text-soft);
}
#lsseo-hero-c .lsc-ico { width: 22px; height: 22px; flex-shrink: 0; }
#lsseo-hero-c .lsc-ico circle,
#lsseo-hero-c .lsc-ico line { stroke: var(--lsseo-primary); }
#lsseo-hero-c .lsc-qwrap {
  font-family: var(--lsseo-font-code, "JetBrains Mono", monospace);
  font-size: clamp(0.95rem, 2vw, 1.12rem);
  color: var(--lsseo-heading);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Hauteur FIXE (pas min-height) : la barre ne doit pas fluctuer selon que la
     requete est vide ou remplie (le caret seul est moins haut que le texte). */
  height: 1.5em;
  line-height: 1.5em;
  flex: 1;
}
#lsseo-hero-c .lsc-caret {
  display: inline-block;
  width: 2px;
  height: 1.25em;
  background: var(--lsseo-primary);
  margin-left: 2px;
  animation: lsc-blink 1s step-end infinite;
}
@keyframes lsc-blink { 50% { opacity: 0; } }
/* Loader : cercle qui tourne entre la fin de la frappe et l'affichage des resultats
   (metaphore d'une recherche qui charge). Anime seulement quand actif (.on). */
#lsseo-hero-c .lsc-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--lsseo-lavender-deep);
  border-top-color: var(--lsseo-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#lsseo-hero-c .lsc-spinner.on { opacity: 1; animation: lsc-spin 0.7s linear infinite; }
@keyframes lsc-spin { to { transform: rotate(360deg); } }
#lsseo-hero-c .lsc-results {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
#lsseo-hero-c .lsc-result {
  background: var(--lsseo-white);
  border-radius: 14px;
  padding: 15px 19px;
  box-shadow: 0 6px 22px rgba(59, 7, 100, 0.07);
  border: 1px solid rgba(221, 214, 254, 0.7);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: relative;
}
#lsseo-hero-c .lsc-result.is-show { opacity: 1; transform: translateY(0); }
#lsseo-hero-c .lsc-url {
  font-family: var(--lsseo-font-code, "JetBrains Mono", monospace);
  font-size: 12px;
  color: var(--lsseo-serp-url);
  margin-bottom: 5px;
}
#lsseo-hero-c .lsc-title {
  color: var(--lsseo-primary);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  margin-bottom: 6px;
  line-height: 1.25;
}
#lsseo-hero-c .lsc-snip {
  color: var(--lsseo-text);
  font-size: 0.9rem;
  line-height: 1.45;
}
#lsseo-hero-c .lsc-hero-result {
  order: -1;
  border-color: var(--lsseo-primary);
  box-shadow: 0 14px 40px rgba(124, 58, 237, 0.24);
  background: linear-gradient(180deg, var(--lsseo-white), #faf5ff);
}
#lsseo-hero-c .lsc-badge {
  position: absolute;
  top: -11px;
  left: 16px;
  background: var(--lsseo-primary);
  color: var(--lsseo-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 11px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#lsseo-hero-c .lsc-badge.is-show { opacity: 1; transform: scale(1); }
/* Etat final « resolu » : apres une passe unique des 5 requetes, le resultat #1
   se pose (pulse de glow one-shot, puis emphase persistante). Grammaire commune aux
   3 heros : « un tour, un climax resolu » (comme hero A .settled / hero B). */
@keyframes lsc-settle {
  0%   { box-shadow: 0 14px 40px rgba(124, 58, 237, 0.24); }
  45%  { box-shadow: 0 16px 50px rgba(124, 58, 237, 0.5), 0 0 0 3px rgba(124, 58, 237, 0.16); }
  100% { box-shadow: 0 14px 44px rgba(124, 58, 237, 0.34); }
}
#lsseo-hero-c .lsc-hero-result.lsc-settled {
  animation: lsc-settle 1.2s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  #lsseo-hero-c .lsc-caret { animation: none; opacity: 0; }
  #lsseo-hero-c .lsc-result { opacity: 1; transform: none; }
  #lsseo-hero-c .lsc-badge { opacity: 1; transform: none; }
  #lsseo-hero-c .lsc-hero-result.lsc-settled { animation: none; }
  #lsseo-hero-c .lsc-spinner.on { animation: none; }
}

/* ------------------------------------------------------------
   Accueil : MEME traitement propre que les autres pages (a-propos,
   expertises). Le montage specifique a l'accueil (verre depoli + plein
   ecran force + wrappers transparents + fusion hero/contenu) a ete RETIRE
   le 14/07 (Monsieur) : il regressait (frost invisible + separation vide
   entre les 2 blocs). L'accueil utilise desormais la carte standard sur le
   fond matrix discret, comme les pages qui « affichent les choses proprement ».
   On ne garde ici que la typographie de section (design landing).
   ------------------------------------------------------------ */
/* Hauteur d'en-tete DESKTOP. Ne sert plus qu'au calcul de hauteur du hero C
   (`#lsseo-hero-c`, plus bas), regle elle-meme annulee en mobile. La mention
   « sert aussi au drawer mobile » a ete retiree le 28/07/2026 : le drawer
   n'existe plus. La valeur 100px vaut pour le DESKTOP (101px mesures de 899 a
   1440px) ; en mobile l'en-tete fait 81px et aucune regle n'en depend. */
:root { --lsseo-header-h: 100px; }

/* Animation centrale PLEIN ECRAN a l'arrivee (effet WOW, demande Monsieur 14/07).
   On restaure UNIQUEMENT la hauteur + le centrage -- PAS de frost ni de fusion
   hero/contenu (retires, ils regressaient). Le contenu standard suit en dessous,
   defilement normal. */
body.home #lsseo-hero-c {
  /* 95 % de la hauteur disponible (viewport moins l'en-tete) : laisse un leger
     espace en bas qui invite au defilement (demande Monsieur 15/07). */
  min-height: calc((100svh - var(--lsseo-header-h)) * 0.95);
  justify-content: center;
}
/* Mobile : hauteur naturelle (le plein ecran force ne rend pas naturel au doigt).
   Config mobile approfondie apres validation desktop. */
@media (max-width: 768px) {
  body.home #lsseo-hero-c { min-height: auto; }
}

body.home .entry-content > h2 {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 1.4rem;
}
body.home .entry-content > h2:first-child { margin-top: 1rem; }
/* Listes/paragraphes de section : colonne de lecture bornee et centree */
body.home .entry-content > ul,
body.home .entry-content > p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
body.home .lsseo-cards { margin-bottom: 1.5rem; }
body.home .entry-content > p:last-child {
  text-align: center;
  margin-top: 3rem;
}

/* ============================================================
   Hero anime page EXPERTISES (concept A : « De la donnee au sommet »)
   Namespace #lsseo-hero-a. Rendu via generate_after_header sur la page
   expertises, borne dans le conteneur (max-width 1200px). JS : assets/hero-a.js.
   ============================================================ */
#lsseo-hero-a {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 44px);
}
#lsseo-hero-a .la-text { max-width: 600px; }
#lsseo-hero-a .la-eyebrow {
  display: inline-block;
  background: var(--lsseo-lavender-deep);
  color: var(--lsseo-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 7px 15px;
  border-radius: 20px;
  margin-bottom: 22px;
}
#lsseo-hero-a .la-h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--lsseo-heading);
  margin-bottom: 18px;
}
#lsseo-hero-a .la-accent { color: var(--lsseo-primary); }
#lsseo-hero-a .la-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--lsseo-text);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 30px;
}

/* Colonne animation : panneau de classement */
#lsseo-hero-a .la-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
#lsseo-hero-a .la-panel {
  position: relative;
  width: min(100%, 440px);
  background: var(--lsseo-white);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(59, 7, 100, 0.18), 0 2px 0 var(--lsseo-header-text-soft);
  padding: 20px 20px 22px;
  overflow: hidden;
}
#lsseo-hero-a .la-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lsseo-primary), var(--lsseo-mauve-deep));
}
/* Barre de recherche : reprend le modele epure de l'accueil (hero C .lsc-bar) --
   fond blanc arrondi, loupe statique a gauche, caret clignotant, spinner a droite. */
#lsseo-hero-a .la-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lsseo-white);
  border: 1px solid var(--lsseo-header-text-soft);
  border-radius: 28px;
  padding: 12px 18px;
  box-shadow: 0 10px 34px rgba(59, 7, 100, 0.12), 0 2px 6px rgba(59, 7, 100, 0.06);
  margin-bottom: 18px;
}
#lsseo-hero-a .la-ico { width: 20px; height: 20px; flex-shrink: 0; }
#lsseo-hero-a .la-ico circle,
#lsseo-hero-a .la-ico line { stroke: var(--lsseo-primary); }
#lsseo-hero-a .la-qwrap {
  font-family: var(--lsseo-font-code);
  font-size: 13px;
  color: var(--lsseo-heading);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Hauteur FIXE (pas min-height) : la barre ne fluctue pas selon la longueur
     de la requete tapee (meme correctif que hero C). */
  height: 1.5em;
  line-height: 1.5em;
  flex: 1;
}
#lsseo-hero-a .la-caret {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--lsseo-primary);
  margin-left: 2px;
  animation: la-blink 1.1s step-end infinite;
}
@keyframes la-blink { 50% { opacity: 0; } }
/* Spinner (droite) : tourne pendant le TRAVAIL d'optimisation, avant l'actualisation. */
#lsseo-hero-a .la-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--lsseo-lavender-deep);
  border-top-color: var(--lsseo-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#lsseo-hero-a .la-spinner.on { opacity: 1; animation: la-spin 0.7s linear infinite; }
@keyframes la-spin { to { transform: rotate(360deg); } }
/* Actualisation de la recherche : la barre pulse (halo violet) pour signifier
   qu'on relance la requete afin de constater les gains (apres le travail). */
#lsseo-hero-a .la-search.is-scanning { animation: la-scan 0.8s ease; }
@keyframes la-scan {
  0%   { box-shadow: 0 10px 34px rgba(59, 7, 100, 0.12), 0 2px 6px rgba(59, 7, 100, 0.06); }
  45%  { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16), 0 10px 34px rgba(59, 7, 100, 0.12); }
  100% { box-shadow: 0 10px 34px rgba(59, 7, 100, 0.12), 0 2px 6px rgba(59, 7, 100, 0.06); }
}
/* Liste = 8 slots de ROWH=48px. Toutes les lignes sont en absolu et permutent
   par translateY (echange de rang anime), demande Monsieur 14/07. */
#lsseo-hero-a .la-list { position: relative; height: 384px; }
#lsseo-hero-a .la-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 10px;
  border-radius: 9px;
  opacity: 1;
  /* opacity animee : un concurrent repousse SOUS la 8e place (rang 9) s'efface. */
  transition: transform 0.9s cubic-bezier(0.65, 0.02, 0.25, 1), opacity 0.5s ease;
  will-change: transform;
}
#lsseo-hero-a .la-pos {
  font-family: var(--lsseo-font-code);
  font-size: 13px;
  font-weight: 600;
  color: var(--lsseo-text);
  width: 26px;
  text-align: center;
  flex: none;
  opacity: 0.65;
}
#lsseo-hero-a .la-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
#lsseo-hero-a .la-bars i {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: var(--lsseo-header-text-soft);
}
#lsseo-hero-a .la-bars i:first-child { width: 65%; background: var(--lsseo-lavender-deep); }
#lsseo-hero-a .la-bars i:last-child { width: 88%; }
/* La ligne « vous » : demarre SOUS la 8e place (rang 9), MASQUEE (opacity 0) -> il y a
   bien 8 concurrents affiches au depart. La 1re recherche la fait ENTRER en 8e (.in :
   apparition + bascule mauve), puis elle grimpe (top:0 ancre le translateY sur le HAUT
   de la liste : translateY(0) = 1re place -- BUG FIX 14/07). */
#lsseo-hero-a .la-you {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--lsseo-off-white);
  border: 1px solid var(--lsseo-header-text-soft);
  box-shadow: none;
  color: var(--lsseo-text);
  z-index: 5;
  /* Masque a l'origine : « votre-site » n'est PAS dans les resultats au depart ; il
     surgit en 8e place a l'issue de la 1re recherche (demande Monsieur 15/07). */
  opacity: 0;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.65, 0.02, 0.25, 1),
              opacity 0.5s ease, background 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
#lsseo-hero-a .la-you.in { /* apparait en 8e (mauve) une fois la 1re recherche lancee */
  opacity: 1;
  background: linear-gradient(135deg, var(--lsseo-primary), var(--lsseo-mauve-deep));
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(124, 58, 237, 0.45);
  color: var(--lsseo-white);
}
#lsseo-hero-a .la-you .la-pos {
  font-weight: 700;
  font-size: 15px;
  color: inherit;
  opacity: 1;
}
#lsseo-hero-a .la-site {
  font-family: var(--lsseo-font-code);
  font-size: 14px;
  font-weight: 700;
  color: inherit;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#lsseo-hero-a .la-rise {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  opacity: 0; /* « en hausse » cache tant que la ligne est neutre */
  transition: opacity 0.4s ease;
}
#lsseo-hero-a .la-you.in .la-rise { opacity: 1; }
#lsseo-hero-a .la-you.at-top {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 16px 34px rgba(124, 58, 237, 0.55);
}
/* Barre de progression « Optimisation… » qui se remplit au fil de la montee
   8e -> 1re place (remplace les chips, demande Monsieur 14/07). */
#lsseo-hero-a .la-progress { margin-top: 18px; }
#lsseo-hero-a .la-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}
#lsseo-hero-a .la-progress-label {
  color: var(--lsseo-mauve-deep);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#lsseo-hero-a .la-progress-label::after { content: "…"; }
#lsseo-hero-a .la-progress-pct {
  font-family: var(--lsseo-font-code);
  color: var(--lsseo-primary);
}
#lsseo-hero-a .la-progress-track {
  position: relative;
  height: 8px;
  border-radius: 6px;
  background: var(--lsseo-lavender-deep);
  overflow: hidden;
}
#lsseo-hero-a .la-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--lsseo-primary), var(--lsseo-mauve-deep));
  transition: width 0.9s cubic-bezier(0.65, 0.02, 0.25, 1);
}
/* Etat « travail d'optimisation en cours » (avant que la barre n'atteigne son niveau) :
   un reflet balaie la piste et le libelle pulse -- on comprend qu'un travail s'opere,
   PUIS la recherche est actualisee pour constater le gain (demande Monsieur 14/07). */
#lsseo-hero-a .la-progress.is-working .la-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.4), transparent);
  transform: translateX(-100%);
  animation: la-work-sweep 0.9s linear infinite;
}
@keyframes la-work-sweep { to { transform: translateX(100%); } }
#lsseo-hero-a .la-progress.is-working .la-progress-label { animation: la-work-pulse 0.9s ease-in-out infinite; }
@keyframes la-work-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  #lsseo-hero-a .la-you { transition: none; opacity: 1; }
  #lsseo-hero-a .la-progress-fill { transition: none; }
  #lsseo-hero-a .la-caret { animation: none; }
}
@media (max-width: 900px) {
  #lsseo-hero-a {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }
  #lsseo-hero-a .la-text { max-width: none; margin: 0 auto; }
  #lsseo-hero-a .la-sub { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   Menu mobile -- rendu NATIF GeneratePress (deroulant vertical).

   Le tiroir lateral (151 lignes de CSS + un script dedie) a ete RETIRE
   le 28/07/2026 sur decision de Monsieur : « on cherche a compliquer les
   choses inutilement, j'aimerais simplement un affichage de base ».
   Ce n'etait pas qu'une question de gout. Le tiroir etait `position: fixed`
   A L'INTERIEUR du contexte d'empilement de l'en-tete collant, et c'est de
   la que venaient TOUS les defauts de la session du 27-28/07 : fond ecrase
   par une regle GeneratePress plus specifique, marge haute heritee,
   declencheur recouvert et donc croix inoperante, voile qui floutait le
   menu des qu'on touchait au z-index, artefacts de composition sur Safari
   iOS. Sans positionnement, aucune de ces classes de defauts n'existe.

   Il ne reste donc ici que de l'HABILLAGE : largeur, fond, confort tactile.
   Tout le comportement (ouverture, `aria-expanded`, sous-menu accessible,
   bascule barres/croix) est fourni par GeneratePress -- on ne le refait pas.
   Reference : docs/enquetes/enquete-menu-hamburger-mobile-lsseo-cycle-144.md
   ============================================================ */
@media (max-width: 768px) {
  /* Menu ferme : la nav ne doit prendre aucune place, sinon elle occupe une
     rangee vide et epaissit le bandeau de 23px pour rien (mesure du 28/07 :
     104px au lieu de 81px).
     MAIS on ne masque PAS aveuglement : GeneratePress exclut nommement
     `.navigation-search` de son propre masquage mobile
     (`.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav)`),
     c'est-a-dire qu'il tient a garder la loupe accessible menu ferme. Masquer
     la nav entiere annulerait cette intention en silence le jour ou Monsieur
     activerait « Navigation Search » au Customizer. On borne donc la regle au
     cas ou il n'y a effectivement rien d'autre a afficher.
     Si `:has()` n'etait pas supporte, la regle est ignoree : le bandeau
     reprend 23px, aucune casse. */
  #site-navigation.main-navigation:not(.toggled):not(:has(.navigation-search)) {
    display: none;
  }

  /* Geometrie de la nav (les deux etats -- elle n'est visible qu'ouverte,
     cf. la regle de masquage ci-dessus). Pleine largeur, sur sa propre rangee
     sous le titre et le bouton. La marge negative annule le padding lateral
     du bandeau, pour que le menu touche les deux bords de l'ecran. */
  #site-navigation.main-navigation {
    flex: 1 0 100%;
    margin: 10px -16px -10px;
  }

  /* Fond. GeneratePress repeint la nav ouverte via
     `.has-inline-mobile-toggle #site-navigation.toggled` (1 ID + 2 classes),
     qui bat un selecteur simple : sans la reprise ci-dessous, le menu est
     peint en noir a 2 % d'opacite, donc transparent et illisible.
     On reprend la main avec 1 ID + 3 classes, sans `!important`. */
  #site-navigation.main-navigation,
  .has-inline-mobile-toggle #site-navigation.main-navigation.toggled {
    background: var(--lsseo-mauve-deep);
  }

  #site-navigation .inside-navigation { padding: 0; }
  #site-navigation .main-nav > ul { display: block; }
  #site-navigation .main-nav ul li { width: 100%; float: none; }
  #site-navigation .main-nav ul li a {
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--lsseo-rule-on-dark);
  }

  /* Declencheur du sous-menu (« Expertises ») : lui donner une SURFACE.
     GeneratePress promeut ce `<span>` en `role="button"` au runtime, mais sa
     boite reste celle d'un element inline : mesure du 28/07, 56 x 22 px, sous
     le minimum de 24 x 24 de WCAG 2.5.8. Pire, la cartographie tactile de la
     bande droite du lien montrait que **40 % seulement** des appuis
     atteignaient la fleche -- les 60 % restants naviguaient vers la page
     parente. Consequence silencieuse : les trois pages filles etaient de fait
     peu decouvrables depuis le menu mobile, sans que rien ne le signale.
     On l'etire sur toute la hauteur du lien, a droite, et on reserve la place
     correspondante dans le padding du lien pour que le libelle ne passe pas
     dessous. */
  #site-navigation .main-nav li.menu-item-has-children > a {
    position: relative;
    padding-right: 60px;
  }
  #site-navigation .dropdown-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   Hero anime page A PROPOS (concept B : « De la donnee a l'action »)
   Namespace #lsseo-hero-b (classes lb-*). Fragments de donnees -> noyau outil
   -> actions priorisees. Rendu via generate_after_header (is_page a-propos),
   borne conteneur 1180px. JS : assets/hero-b.js.
   ============================================================ */
#lsseo-hero-b {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) clamp(18px, 4vw, 40px) clamp(28px, 4vh, 44px);
  /* Contexte d'empilement isole : confine les z-index internes de l'animation
     (jusqu'a 500) SOUS l'en-tete collant (.site-header z-index 100). Sans cela,
     les etiquettes debordent au-dessus du header au defilement. */
  position: relative;
  z-index: 0;
  isolation: isolate;
}
#lsseo-hero-b .lb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lsseo-lavender-deep);
  color: var(--lsseo-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
#lsseo-hero-b .lb-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lsseo-primary);
}
#lsseo-hero-b .lb-title {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--lsseo-heading);
  max-width: 18ch;
  letter-spacing: -0.02em;
}
#lsseo-hero-b .lb-accent { color: var(--lsseo-primary); }
#lsseo-hero-b .lb-sub {
  margin: 16px auto 0;
  max-width: 54ch;
  color: var(--lsseo-text);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
}
/* Scene : nuage de donnees 3D en rotation -> conception de strategie -> etapes a plat */
#lsseo-hero-b .lb-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: clamp(22px, 4vh, 42px) auto 0;
  height: clamp(340px, 46vh, 440px);
}

/* ---- Nuage de donnees brutes : sphere 3D (projection manuelle en JS) ---- */
#lsseo-hero-b .lb-cloud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 58px;
  pointer-events: none;
}
/* Etiquette NON LISIBLE : petite puce de donnee (taille apparente variee par la
   profondeur). La rotation est peinte image par image -> aucune transition sur
   transform/opacity a l'etat de base (sinon la rotation trainerait). */
#lsseo-hero-b .lb-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19px;
  height: 10px;
  border-radius: 3px;
  background: var(--lsseo-header-text-soft);
  border: 1px solid rgba(124, 58, 237, 0.36);
  box-shadow: 0 2px 7px rgba(91, 33, 182, 0.14);
  overflow: hidden;
  /* Pas de will-change : a haute densite (~240 puces) il multiplierait les couches
     GPU. transform/opacity sont pilotes image par image en JS. */
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
/* Etiquette de strategie retenue : illuminee en mauve + geste de « verrouillage »
   (anneau one-shot facon .la-scan de hero-a). Un seul element a la fois, ponctuel
   -> paint borne, jamais par frame. Le pop d'echelle + l'avant-plan sont replies
   dans render() (compositor pur). */
@keyframes lb-sel-reveal {
  0%   { box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45), 0 0 0 0 rgba(124, 58, 237, 0.55); }
  100% { box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45), 0 0 0 12px rgba(124, 58, 237, 0); }
}
#lsseo-hero-b .lb-tag.sel {
  background: linear-gradient(135deg, var(--lsseo-primary), var(--lsseo-mauve-deep));
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45);
  animation: lb-sel-reveal 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Donnees non retenues : fondu enchaine SUR PLACE (transform inchange -> pas de derive) */
#lsseo-hero-b .lb-tag.gone { transition: opacity 1.1s ease; }
/* Temps 1 -- convergence : glissement du rassemblement, transform SEUL (compositor).
   Doit rester AVANT .flat (la derniere declaration `transition` gagne). */
#lsseo-hero-b .lb-tag.converge {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Temps 2 -- deploiement SUR PLACE (la puce ne bouge plus) : le rectangle s'ouvre.
   Pas de `transform` dans la liste (le mouvement est termine). */
#lsseo-hero-b .lb-tag.flat {
  width: min(440px, 82vw);
  height: 46px;
  border-radius: 12px;
  background: var(--lsseo-white);
  border: 1px solid var(--lsseo-lavender-deep);
  border-left: 3px solid var(--lsseo-primary);
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.1);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.55s ease, border-radius 0.55s ease,
              background-color 0.5s ease, box-shadow 0.5s ease;
}
/* Intitules des etapes, reveles quand la puce est devenue rectangle */
#lsseo-hero-b .lb-step-n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lsseo-primary), var(--lsseo-mauve-deep));
  color: var(--lsseo-white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s ease 0.22s;
}
#lsseo-hero-b .lb-step-l {
  font-size: 14px;
  font-weight: 600;
  color: var(--lsseo-heading);
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s ease 0.34s;
}
#lsseo-hero-b .lb-tag.flat .lb-step-n,
#lsseo-hero-b .lb-tag.flat .lb-step-l { opacity: 1; }

/* ---- Barre de progression « Conception de stratégies » ---- */
#lsseo-hero-b .lb-prog {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: min(92%, 420px);
  z-index: 450;
  transition: opacity 0.6s ease;
}
/* Phase 3 (mise a plat) : la barre disparait, la strategie est en place (Monsieur 15/07). */
#lsseo-hero-b .lb-prog.lb-prog-done { opacity: 0; }
#lsseo-hero-b .lb-prog.lb-prog-done .lb-prog-fill::after { animation: none; }
#lsseo-hero-b .lb-prog-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
#lsseo-hero-b .lb-prog-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lsseo-primary);
}
#lsseo-hero-b .lb-prog-pct {
  font-family: var(--lsseo-font-code);
  font-size: 11px;
  font-weight: 600;
  color: var(--lsseo-text);
  opacity: 0.75;
}
#lsseo-hero-b .lb-prog-track {
  height: 5px;
  border-radius: 999px;
  background: var(--lsseo-lavender-deep);
  overflow: hidden;
}
#lsseo-hero-b .lb-prog-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--lsseo-primary), var(--lsseo-mauve-deep));
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reflet qui balaie le remplissage (sensation de « calcul ») : un seul element,
   translate SEUL (compositor pur), clippe a la portion remplie par overflow. */
#lsseo-hero-b .lb-prog-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 64px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  transform: translateX(-64px);
  animation: lb-shimmer 1.8s ease-in-out infinite;
}
@keyframes lb-shimmer {
  0% { transform: translateX(-64px); }
  60%, 100% { transform: translateX(440px); }
}

@media (max-width: 760px) {
  #lsseo-hero-b .lb-stage { height: clamp(320px, 62vh, 400px); margin-top: 26px; }
  #lsseo-hero-b .lb-step-l { font-size: 13px; }
  #lsseo-hero-b .lb-step-n { width: 24px; height: 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #lsseo-hero-b .lb-tag,
  #lsseo-hero-b .lb-tag.converge,
  #lsseo-hero-b .lb-tag.flat,
  #lsseo-hero-b .lb-prog-fill { transition: none; }
  #lsseo-hero-b .lb-tag.sel { animation: none; }
  #lsseo-hero-b .lb-prog-fill::after { animation: none; }
}