/* ==========================================================================
   Le Corps Inspire, systeme de blocs, vague 1
   Source : Referentiel LCI (charte graphique), tokens officiels
   ========================================================================== */

:root{
  /* Couleurs */
  --lci-amethyste:#5C3D8F; --lci-aubergine:#3D2870; --lci-violet-clair:#9B7DC4;
  --lci-lavande:#F0EBF7; --lci-or:#C8873A; --lci-vert:#2E7D52;
  --lci-or-hover:#B07730; --lci-vert-hover:#266A45; --lci-amethyste-hover:#4E3478;
  --lci-text-dark:#14101F; --lci-text-medium:#4A3A6E; --lci-text-light:#7A6890;
  --lci-text-on-dark:#FBF7F0;
  --lci-text-on-dark-soft:rgba(251,247,240,0.78);
  --lci-text-on-dark-mute:rgba(251,247,240,0.62);
  /* Typographie */
  --lci-font-serif:'Cormorant Garamond', Georgia, serif;
  --lci-font-sans:'Inter', -apple-system, sans-serif;
  --lci-h-hero:clamp(48px,7vw,88px);
  --lci-h1:clamp(40px,5vw,64px);
  --lci-h2:clamp(32px,4vw,48px);
  --lci-h3:clamp(22px,2.5vw,28px);
  --lci-quote-big:clamp(24px,3vw,32px);
  --lci-number:clamp(64px,8vw,96px);
  --lci-body:clamp(16px,1.1vw,18px);
  --lci-body-small:14px;
  --lci-caption:13px;
  --lci-button:15px;
  --lci-label:12px;
  --lci-lh-tight:1.15; --lci-lh-normal:1.40; --lci-lh-reading:1.65;
  /* Espacement */
  --lci-space-xs:0.5rem; --lci-space-s:1rem; --lci-space-m:1.5rem;
  --lci-space-l:3rem; --lci-space-xl:5rem; --lci-space-2xl:7.5rem;
  --lci-gout-liee:1.125rem; --lci-gout-normale:1.875rem; --lci-gout-rupture:2.5rem;
  --lci-container-max:75rem;
  --lci-gutter:clamp(1.25rem,5vw,5rem);
  /* Rayons, bordures, ombres */
  --lci-radius-s:0.375rem; --lci-radius-m:0.5rem; --lci-radius-l:0.75rem;
  --lci-border:1px solid var(--lci-violet-clair);
  --lci-shadow-soft:0 2px 8px rgba(26,15,46,0.08);
  --lci-shadow-card:0 4px 16px rgba(26,15,46,0.10);
  --lci-transition:200ms ease-out;
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body.lci{margin:0;font-family:var(--lci-font-sans);font-size:var(--lci-body);
  line-height:var(--lci-lh-reading);color:var(--lci-text-dark);background:var(--lci-lavande)}
.lci h1,.lci h2,.lci h3{font-family:var(--lci-font-serif);line-height:var(--lci-lh-tight);
  font-weight:600;margin:0 0 0.5em;
  /* Sans cela « Qu'est-ce que le Rolfing® ? » laisse le point
     d'interrogation seul sur la deuxieme ligne. */
  text-wrap:balance}
.lci p,.lci li{text-wrap:pretty}
.lci h1{font-size:var(--lci-h1)}
.lci h2{font-size:var(--lci-h2);font-style:italic}
.lci h3{font-size:var(--lci-h3);font-style:italic}
.lci img{max-width:100%;display:block}
.lci a{color:inherit}
.lci-container{max-width:var(--lci-container-max);margin:0 auto}

/* --- Sections et fonds --------------------------------------------------- */
.lci-section{padding:var(--lci-space-2xl) var(--lci-gutter);display:flow-root} /* flow-root : la marge d'un <p> ne fuit pas hors d'une section sans padding */
/* ---------------------------------------------------------------------
   Jetons qui suivent le fond de la section. Un bloc qui les emploie change
   de couleurs tout seul quand Arnaud change le fond dans l'admin, au lieu
   d'exiger une regle « .bg-amethyste .mon-bloc » de plus. Valeurs claires
   par defaut (page, lavande, transparent), redefinies sur les fonds fonces.
   Deux accents et non un seul : --sur-accent est l'or decoratif des grands
   caracteres (chiffres, guillemets, titres de carte), --sur-lien celui des
   liens et des petits libelles. L'or ne tient pas le contraste en petit
   texte sur amethyste, il y passe donc en creme.
   --------------------------------------------------------------------- */
:root,.bg-lavande,.bg-transparent{
  --sur-titre:var(--lci-aubergine);
  --sur-texte:var(--lci-text-medium);
  --sur-doux:var(--lci-text-light);
  --sur-accent:var(--lci-amethyste);
  --sur-lien:var(--lci-amethyste);
  --sur-bordure:var(--lci-violet-clair);
  --sur-carte:#fff}
/* .lci-callout et .lci-newsletter peignent leur propre aplat amethyste : ils
   emportent les jetons fonces meme poses dans une section claire. Sans ca,
   « .bg-transparent h2 », ecrite plus bas et de meme specificite, sortait leur
   titre en aubergine sur amethyste (contraste mesure 1,45, illisible). */
.bg-amethyste,.bg-aubergine,.lci-callout,.lci-newsletter{
  --sur-titre:var(--lci-text-on-dark);
  --sur-texte:var(--lci-text-on-dark-soft);
  --sur-doux:var(--lci-text-on-dark-mute);
  --sur-accent:var(--lci-or);
  --sur-lien:var(--lci-text-on-dark);
  --sur-bordure:rgba(251,247,240,.22);
  --sur-carte:rgba(251,247,240,.07)}

.bg-lavande{background:var(--lci-lavande);color:var(--lci-text-dark)}
.bg-amethyste{background:var(--lci-amethyste);color:var(--lci-text-on-dark)}
.bg-aubergine{background:var(--lci-aubergine);color:var(--lci-text-on-dark)}
.bg-amethyste h2,.bg-amethyste h3,.bg-aubergine h2,.bg-aubergine h3{color:var(--lci-text-on-dark)}
.bg-lavande h2,.bg-lavande h3{color:var(--lci-aubergine)}
.bg-amethyste p,.bg-aubergine p{color:var(--lci-text-on-dark-soft)}

/* --- Eyebrow, en-tete de section ----------------------------------------- */
.lci-eyebrow{font-family:var(--lci-font-sans);text-transform:uppercase;
  letter-spacing:0.12em;font-size:var(--lci-label);font-weight:600;margin:0 0 14px}
.bg-lavande .lci-eyebrow{color:var(--lci-amethyste)}
.bg-amethyste .lci-eyebrow,.bg-aubergine .lci-eyebrow{color:var(--lci-text-on-dark-mute)}
.lci-sec-head{max-width:var(--lci-container-max);margin:0 auto var(--lci-space-l)}
.lci-sec-head.centre{text-align:center}
.lci-sec-head .chapo{max-width:720px;margin:0}
.lci-sec-head.centre .chapo{margin:0 auto}

/* --- Boutons (4 variantes, radius 6px, min-height 48px) ------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;min-height:48px;
  font:600 var(--lci-button)/1 var(--lci-font-sans);border-radius:var(--lci-radius-s);
  text-decoration:none;border:0;cursor:pointer;transition:var(--lci-transition)}
/* Prefixe .lci obligatoire : sans lui, « .lci a{color:inherit} » l'emporte
   en specificite et les boutons heritent de la couleur de leur section au
   lieu d'appliquer la leur.

   Texte fonce sur l'or : le creme ne donnait que 2,82 de contraste, loin
   du seuil de 4,5. Ici 6,21, et 4,92 sur l'or survole. */
.lci a.btn-primary,.lci .btn-primary{background:var(--lci-or);color:var(--lci-text-dark)}
.lci .btn-primary:hover{background:var(--lci-or-hover)}
.lci a.btn-positive,.lci .btn-positive{background:var(--lci-vert);color:var(--lci-text-on-dark)}
.lci .btn-positive:hover{background:var(--lci-vert-hover)}
.lci a.btn-secondary-dark,.lci .btn-secondary-dark{background:transparent;color:var(--lci-text-on-dark);
  border:2px solid var(--lci-text-on-dark);padding:14px 30px}
.lci .btn-secondary-dark:hover{background:rgba(251,247,240,0.12)}
.lci a.btn-secondary-light,.lci .btn-secondary-light{background:transparent;color:var(--lci-amethyste);
  border:2px solid var(--lci-amethyste);padding:14px 30px}
.lci .btn-secondary-light:hover{background:rgba(92,61,143,0.08)}
/* Les gabarits posent btn-secondary-light en dur : sur fond fonce il serait
   amethyste sur amethyste. Il prend la couleur du fond plutot que d'ajouter
   une condition dans chaque gabarit. */
.lci .bg-amethyste .btn-secondary-light,.lci .bg-aubergine .btn-secondary-light{
  color:var(--lci-text-on-dark);border-color:var(--lci-text-on-dark)}
.lci .bg-amethyste .btn-secondary-light:hover,.lci .bg-aubergine .btn-secondary-light:hover{
  background:rgba(251,247,240,0.12)}

/* --- Traitement photo (charte, 100% CSS) ---------------------------------- */
.lci-photo{position:relative;overflow:hidden;border-radius:var(--lci-radius-m);isolation:isolate;margin:0}
.lci-photo>img{display:block;width:100%;height:100%;object-fit:cover}
.lci-photo.a-traiter>img{filter:saturate(0.85) brightness(0.95)}
.lci-photo.a-traiter::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") repeat,
    var(--lci-amethyste);
  background-size:140px 140px,auto;
  mix-blend-mode:soft-light;opacity:0.9}
.lci-photo.a-traiter::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 58%,rgba(20,12,40,0.18) 100%)}
/* Couverture d'article : elle accompagne le texte, elle ne l'ecrase pas.
   Sans plafond, la figure prend toute la largeur de la section (1200 px)
   alors que la colonne de lecture en fait 680, et la photo repousse le
   texte sous la ligne de flottaison. Le plafond de hauteur protege des
   images verticales, qui feraient sinon trois ecrans. */
/* --- Gabarit d'article -----------------------------------------------------
   Deux colonnes : la lecture a gauche, ce qui l'entoure a droite. La marge
   de gauche est reduite au minimum de la charte, le vide inutile passe a
   droite et devient utile. Un seul axe : le fil d'Ariane, le titre, l'image
   et le texte partagent le meme bord gauche. */
.lci-article{max-width:720px;margin:0 auto}
.lci-large{max-width:1360px;margin:0 auto}
.lci-grille-article{display:grid;grid-template-columns:minmax(0,936px) 300px;
  gap:clamp(40px,4vw,64px);align-items:start}
.lci-colonne{min-width:0;max-width:936px}
/* Marge de gauche resserree de 30 % sur les pages d'article : le contenu
   commence plus tot, le vide part a droite ou il sert a quelque chose. */
.lci-article-tete,.lci-grille-article,[data-block="article-suite"]{
  padding-left:calc(var(--lci-gutter) * .7);padding-right:calc(var(--lci-gutter) * .7)}
.lci-grille-article{padding-top:0;padding-bottom:0}
/* La colonne de lecture est deja bornee a 720 : une largeur en plus sur la
   prose la retrecirait deux fois. Ailleurs (page temoignage), .lci-article
   et .lci-prose gardent leur reglage centre, plus haut dans ce fichier. */
.lci-grille-article .lci-prose{max-width:none}

.lci-grille-article .lci-prose{font-size:19px}

/* La colonne de droite suit le defilement, elle est la quand on la cherche */
.lci-rail{padding-top:56px}
.lci-rail-collant{position:sticky;top:96px}
/* Le rail reprend le menu de /ressources/ tel quel (.lci-blog-nav) ; seule
   la position differe, a droite d'un article, a gauche d'un catalogue. */
.lci-rail .lci-blog-nav{gap:22px}
.lci-rail .lci-nav-tout{font-weight:600;color:var(--lci-amethyste);text-decoration:none}
.lci-rail .lci-nav-tout:hover{text-decoration:underline}

/* Deux colonnes seulement quand il y a vraiment la place : sous 1150 px,
   la colonne de lecture deviendrait plus etroite qu'avant le partage. */
@media(max-width:1150px){
  .lci-grille-article{grid-template-columns:1fr}
  .lci-rail-collant{position:static}
  .lci-rail{padding-top:0}
}

.lci-article-tete{padding-top:var(--lci-space-xl);padding-bottom:calc(var(--lci-space-xl) + 40px)}
.lci-article-tete h1{color:var(--lci-text-on-dark);font-style:italic;margin:14px 0 0}
.lci-article-tete .chapo{color:var(--lci-text-on-dark);font-size:20px;
  line-height:var(--lci-lh-reading);margin:var(--lci-space-s) 0 0;font-style:normal}
.lci-article-meta{margin:var(--lci-space-m) 0 0;font-size:var(--lci-body-small);
  color:var(--lci-text-on-dark-mute)}
.lci-article-meta a{color:var(--lci-text-on-dark);text-decoration:none;
  border-bottom:1px solid rgba(251,247,240,.35)}
.lci-ariane{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.lci-article-tete .lci-ariane a{color:var(--lci-text-on-dark);text-decoration:none}
.lci-article-tete .lci-ariane a:hover{text-decoration:underline}
.lci-ariane span{margin:0 8px;color:var(--lci-violet-clair)}

/* La couverture chevauche l'aplat : c'est ce qui relie l'en-tete au texte */
.couverture{margin:-80px 0 var(--lci-space-m)}
.couverture>.lci-photo{display:block;box-shadow:0 18px 50px rgba(26,15,46,.28)}
.couverture img{max-height:62vh;object-fit:cover}
.couverture figcaption{margin-top:8px;font-size:var(--lci-caption);color:var(--lci-text-light);
  text-align:right}
@media(max-width:767px){
  .couverture{margin-top:-48px}
  .couverture img{max-height:52vh}
  .lci-article-tete{padding-bottom:calc(var(--lci-space-l) + 40px)}
}

/* Themes et retour */
.lci-themes{margin-top:var(--lci-space-m)}
.lci-themes-titre{font-family:var(--lci-font-sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lci-text-light);margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.lci-grille-article .chip,.lci-rail .chip{background:#fff;border:var(--lci-border);
  border-radius:999px;padding:7px 16px;font-size:var(--lci-body-small);
  color:var(--lci-aubergine);text-decoration:none;
  transition:border-color var(--lci-transition),color var(--lci-transition)}
.lci-grille-article .chip:hover{border-color:var(--lci-amethyste);color:var(--lci-amethyste)}
.lci-grille-article .chip.pilier{background:var(--lci-amethyste);
  border-color:var(--lci-amethyste);color:var(--lci-text-on-dark)}
.lci-grille-article .chip.pilier:hover{background:var(--lci-aubergine);
  border-color:var(--lci-aubergine);color:var(--lci-text-on-dark)}
.lci-retour{margin-top:var(--lci-space-l);padding-top:var(--lci-space-m);
  border-top:1px solid rgba(155,125,196,.4)}
.lci-retour a{font-weight:600;color:var(--lci-amethyste);text-decoration:none}
.lci-retour a:hover{text-decoration:underline}

/* Bloc auteur en pied d'article. Sans ces regles, l'initiale de l'avatar
   s'affichait comme une lettre orpheline au-dessus du texte. */
.lci-colonne .auteur{display:flex;align-items:center;gap:16px;margin-top:var(--lci-space-l);
  padding-top:var(--lci-space-m);border-top:1px solid rgba(155,125,196,.4)}
.lci-colonne .auteur .portrait{flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  background:var(--lci-amethyste);color:var(--lci-text-on-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--lci-font-serif);font-style:italic;font-size:22px;line-height:1}
.lci-colonne .auteur p{margin:0;font-size:var(--lci-body-small);color:var(--lci-text-medium)}
.lci-colonne .auteur a{color:var(--lci-amethyste);font-weight:600}
.lci-large h2.alire{margin-top:var(--lci-space-l)}

/* --- Hero ------------------------------------------------------------------ */
.lci-hero{text-align:center;padding:var(--lci-space-2xl) var(--lci-gutter) var(--lci-space-xl);
  position:relative;overflow:hidden}
.lci-hero h1{font-size:var(--lci-h-hero);color:var(--lci-text-on-dark);font-style:italic}
.lci-hero .sous-titre{max-width:540px;margin:0 auto var(--lci-space-m);color:var(--lci-text-on-dark-soft)}
/* Un sous-titre ecrit en plusieurs paragraphes se lit a gauche : au-dela de
   trois ou quatre lignes, le centrage oblige l'oeil a chercher le debut de
   chaque ligne, ce qu'un lecteur de 65 ans ne fait pas. Un sous-titre court
   reste centre, rien ne change pour les autres heros du site. */
.lci-hero .sous-titre p{margin:0}
.lci-hero .sous-titre p+p{margin-top:.9em}
.lci-hero .sous-titre:has(p+p){max-width:62ch}
/* Sur ordinateur il reste centre (10 novembre) : deux paragraphes de deux
   lignes se lisent sans effort, et un bloc aligne a gauche plus etroit que le
   titre creait un second axe. L'alignement a gauche ne vaut que sur telephone,
   ou chaque paragraphe fait quatre a cinq lignes (regle dans le bloc suivant). */
/* Sur telephone, 120 px au-dessus du titre et un titre a 48 px poussaient le
   bouton de reservation sous l'ecran (mesure du 2 novembre, 375 x 667). Ecrit
   ici et non dans le bloc mobile general : une regle de meme specificite
   ecrite plus bas dans le fichier la battrait. */
@media (max-width:767px){
  .lci-hero{padding-top:var(--lci-space-l)}
  .lci-hero h1{font-size:40px}
  .lci-hero .saut-bureau{display:none}
  .lci-hero .sous-titre:has(p+p){text-align:left}
}
/* Un titre coupe en deux lignes par une barre verticale (filtre saut_titre)
   doit tenir sa premiere ligne entiere : 16,7 em pour celle de l'accueil, mesure
   du 10 novembre. Le corps du titre suit donc la largeur de l'ecran. */
@media (min-width:768px){
  .lci-hero h1:has(.saut-bureau){font-size:clamp(36px,5.2vw,88px)}
}
.lci-hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:var(--lci-space-m)}

/* Sous les boutons du hero : ce qui vient apres le clic, la troisieme porte
   en lien simple, puis la signature de marque. Le hero est toujours sur fond
   fonce : les jetons --sur-* suivent. */
.lci-hero-reassurance{max-width:52ch;margin:10px auto 0;text-align:center;
  font-size:var(--lci-body-small);color:var(--sur-doux)}
.lci-hero-tertiaire{margin:12px 0 0;text-align:center;font-size:var(--lci-body-small)}
.lci-hero-tertiaire a{color:var(--sur-lien);text-decoration:underline;
  text-underline-offset:3px}
/* La couleur est portee par « .lci-hero .lci-hero-signature » et non par la
   classe seule : « .bg-amethyste p » la battait, et la signature sortait en
   creme au lieu de l'or. */
.lci-hero .lci-hero-signature{margin:var(--lci-space-m) 0 0;text-align:center;
  font-family:var(--lci-font-serif);font-style:italic;font-weight:600;
  font-size:28px;line-height:1.25;color:var(--sur-accent)}
.lci-hero.variante-video .lci-hero-reassurance,
.lci-hero.variante-video .lci-hero-tertiaire,
.lci-hero.variante-video .lci-hero-signature{text-align:left;margin-left:0}

/* Le lien sous une citation phare. */
.lci-quote-lien{margin:18px 0 0;text-align:center;font-size:var(--lci-body-small)}
.lci-quote-lien a{color:var(--sur-lien);text-decoration:underline;
  text-underline-offset:3px}
.lci-quote-lien a::after{content:"\2192";margin-left:6px}

/* Champs concentriques d'une grille de cartes : l'etendue de
   l'accompagnement croit d'une carte a l'autre, un anneau de plus a chaque
   fois. Volontairement pas une fleur de vie : la geometrie sacree ferait
   basculer la lecture vers l'esoterique. */
.lci-need-champs{width:48px;height:48px;margin-bottom:16px}
.lci-need-champs svg{width:100%;height:100%;display:block;overflow:visible}
.lci-need-champs circle{fill:none;stroke:var(--sur-accent);stroke-width:1.1;
  opacity:.85}
/* Photo supposee deja traitee (SPEC-photos-bakees-canva) : le
   traitement charte ne s'applique que via .a-traiter. Le voile
   d'opacite reste, seule exception au no-gradient toleree pour le hero. */
.lci-hero.variante-photo .lci-hero-fond{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center}
.lci-hero.variante-photo .lci-hero-fond::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(61,40,112,0.34) 0%,rgba(61,40,112,0.26) 55%,rgba(20,12,40,0.48) 100%)}
.lci-hero.voile-leger .lci-hero-fond::after{
  background:linear-gradient(180deg,rgba(61,40,112,0.20) 0%,rgba(61,40,112,0.14) 55%,rgba(20,12,40,0.32) 100%)}
.lci-hero.a-traiter .lci-hero-fond{filter:saturate(0.85) brightness(0.95)}
.lci-hero.voile-fort .lci-hero-fond::after{
  background:linear-gradient(180deg,rgba(61,40,112,0.55) 0%,rgba(61,40,112,0.45) 55%,rgba(20,12,40,0.70) 100%)}
/* Ombre portee sur les textes : la lisibilite sans assombrir la photo */
.lci-hero.variante-photo h1,.lci-hero.variante-photo .sous-titre,
.lci-hero.variante-photo .lci-eyebrow{text-shadow:0 2px 12px rgba(20,12,40,0.55)}
.lci-hero.variante-photo>*{position:relative;z-index:1}
/* Hero leger sur fond clair (fiches methodes, gabarit C) */
.lci-hero.bg-transparent h1,.lci-hero.bg-lavande h1{color:var(--lci-aubergine)}
.lci-hero.bg-transparent .sous-titre,.lci-hero.bg-lavande .sous-titre{color:var(--lci-text-medium)}
/* Variante video : texte a gauche, FacePop a droite (facade au clic).
   Colonne de 400px = la largeur pour laquelle regler le player FacePop. */
.lci-hero.variante-video{text-align:left;
  padding-top:var(--lci-space-xl);padding-bottom:var(--lci-space-xl)}
/* La colonne de texte epouse son contenu (le sous-titre est cape a
   540px) au lieu de prendre toute la place restante : sinon un vide
   s'installe entre le texte et la video sur les grands ecrans. Les deux
   colonnes se centrent alors ensemble. */
.lci-hero-colonnes{display:grid;grid-template-columns:minmax(0,580px) 400px;
  gap:56px;align-items:center;justify-content:center;
  max-width:var(--lci-container-max);margin:0 auto}
.lci-hero.variante-video .sous-titre{margin-left:0}
.lci-hero.variante-video .lci-hero-actions{justify-content:flex-start}
/* Le script FacePop injecte une iframe en pixels fixes : on impose la
   largeur de la colonne, sinon elle deborde. La hauteur reste celle
   reglee dans FacePop. */
.lci-hero-video{position:relative}
.lci-hero-video iframe{width:100%!important;max-width:100%;border:0;
  display:block;border-radius:var(--lci-radius-m)}
/* Invite au son quand le navigateur a impose le muet (Safari, Brave) */
.lci-hero-video-son{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:2;background:#fff;border:0;border-radius:999px;cursor:pointer;
  color:var(--lci-amethyste);font:600 var(--lci-body-small) var(--lci-font-sans);
  padding:10px 20px;box-shadow:var(--lci-shadow-card);white-space:nowrap}
.lci-hero-video-son::before{content:"🔊";margin-right:8px}
.lci-hero-video-son:hover{background:var(--lci-amethyste);color:var(--lci-text-on-dark)}
.lci-hero-video-facade{display:block;width:100%;aspect-ratio:5/8;padding:0;
  border:0;border-radius:var(--lci-radius-m);overflow:hidden;cursor:pointer;
  position:relative;background:var(--lci-aubergine)}
.lci-hero-video-facade img{width:100%;height:100%;object-fit:cover;
  transition:var(--lci-transition)}
.lci-hero-video-facade:hover img{filter:saturate(0.9) brightness(0.9)}
.lci-hero-video-facade::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,0.92) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M23 19l16 9-16 9V19z" fill="%235C3D8F"/></svg>') center/100% no-repeat}
.lci-hero-video-facade.chargee{display:none}
@media (max-width:900px){
  .lci-hero-colonnes{grid-template-columns:1fr;gap:32px}
  .lci-hero-video{max-width:400px;width:100%;margin:0 auto}
}

/* --- Bandeau de confiance -------------------------------------------------- */
.lci-trust{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center;
  padding:18px var(--lci-gutter);text-transform:uppercase;letter-spacing:0.1em;
  font-size:var(--lci-label);font-weight:600;color:var(--lci-text-on-dark-soft)}
.lci-trust .sep{color:var(--lci-or)}

/* --- Grille de cartes (needs) ---------------------------------------------- */
.lci-needs{display:grid;gap:18px;max-width:var(--lci-container-max);margin:0 auto}
.lci-needs.cols-2{grid-template-columns:repeat(2,1fr)}
.lci-needs.cols-3{grid-template-columns:repeat(3,1fr)}
.lci-needs.cols-4{grid-template-columns:repeat(4,1fr)}
.lci-need{background:#fff;border:var(--lci-border);border-radius:var(--lci-radius-m);
  padding:32px 28px;color:var(--lci-text-dark);text-decoration:none;display:flex;
  flex-direction:column;transition:transform var(--lci-transition),
  box-shadow var(--lci-transition),border-color var(--lci-transition)}
a.lci-need:hover{border-color:var(--lci-amethyste);
  box-shadow:inset 0 0 0 1px var(--lci-amethyste),0 12px 28px rgba(26,15,46,0.20);
  transform:translateY(-5px)}
a.lci-need:hover h3{color:var(--lci-amethyste)}
a.lci-need:hover .lci-need-num{transform:scale(1.12)}
a.lci-need:hover .more{color:var(--lci-aubergine)}
.lci-need-num{font-family:var(--lci-font-serif);font-style:italic;font-size:28px;
  color:var(--lci-or);margin-bottom:12px;transform-origin:left center;
  transition:transform var(--lci-transition)}

/* Illustration facultative en tete de carte : elle occupe toute la largeur,
   par-dessus le rembourrage de la carte, d'ou les marges negatives. La carte
   recadre le bandeau, il faut donc que le sujet tienne au centre. */
.lci-need-photo{margin:-32px -28px 20px;border-radius:var(--lci-radius-m) var(--lci-radius-m) 0 0;
  overflow:hidden;line-height:0}
.lci-need-photo img{width:100%;height:auto;display:block;
  transition:transform var(--lci-transition)}
a.lci-need:hover .lci-need-photo img{transform:scale(1.03)}
.lci-need h3{color:var(--lci-aubergine);transition:color var(--lci-transition)}
.lci-need p{margin:0;color:var(--lci-text-medium);font-size:var(--lci-body-small);line-height:var(--lci-lh-reading)}
.lci-need .more,.lci-method .more{display:inline-block;
  transition:transform var(--lci-transition),color var(--lci-transition)}
a.lci-need:hover .more,.lci-method:hover .more{transform:translateX(5px)}
.lci-need .more{margin-top:auto;padding-top:14px;font-weight:600;font-size:var(--lci-body-small);color:var(--lci-amethyste)}
/* Sur fond fonce, toutes les couleurs pensees pour le fond blanc
   deviennent illisibles : le lien restait amethyste sur amethyste, et
   le survol repeignait le titre en amethyste. Il faut donc reprendre
   l'etat de repos ET l'etat de survol, pas seulement le titre. */
.bg-amethyste .lci-need,.bg-aubergine .lci-need{
  background:rgba(251,247,240,0.06);border-color:rgba(251,247,240,0.25);
  color:var(--lci-text-on-dark)}
.bg-amethyste .lci-need h3,.bg-aubergine .lci-need h3{color:var(--lci-text-on-dark)}
.bg-amethyste .lci-need p,.bg-aubergine .lci-need p{color:var(--lci-text-on-dark-soft)}
.bg-amethyste .lci-need .more,.bg-aubergine .lci-need .more{
  color:var(--lci-text-on-dark)}
.bg-amethyste a.lci-need:hover,.bg-aubergine a.lci-need:hover{
  background:rgba(251,247,240,0.14);border-color:rgba(251,247,240,0.7);
  box-shadow:inset 0 0 0 1px rgba(251,247,240,0.7),0 12px 28px rgba(20,12,40,0.35)}
.bg-amethyste a.lci-need:hover h3,.bg-aubergine a.lci-need:hover h3,
.bg-amethyste a.lci-need:hover .more,.bg-aubergine a.lci-need:hover .more{
  color:var(--lci-text-on-dark)}
/* L'or ne tient pas le contraste du texte sur amethyste : reserve au
   marqueur, qui est un gros caractere decoratif. */
.bg-amethyste .lci-need-num,.bg-aubergine .lci-need-num{color:var(--lci-or)}

/* --- Chiffres cles ---------------------------------------------------------- */
.lci-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  max-width:var(--lci-container-max);margin:0 auto;text-align:center}
.lci-stat .num{font-family:var(--lci-font-serif);font-style:italic;font-size:var(--lci-number);
  line-height:1;color:var(--lci-text-on-dark)}
.lci-stat .num.gold{color:var(--lci-or)}
.lci-stat .cap{margin-top:10px;text-transform:uppercase;letter-spacing:0.1em;
  font-size:var(--lci-label);font-weight:600;color:var(--lci-text-on-dark-mute)}

/* --- Grille de methodes ------------------------------------------------------ */
.lci-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:var(--lci-container-max);margin:0 auto}
.lci-method{background:#fff;border:var(--lci-border);border-radius:var(--lci-radius-m);
  padding:28px 24px;text-decoration:none;color:var(--lci-text-dark);display:flex;
  flex-direction:column;position:relative;
  transition:transform var(--lci-transition),box-shadow var(--lci-transition),
  border-color var(--lci-transition)}
.lci-method:hover{border-color:var(--lci-amethyste);
  box-shadow:inset 0 0 0 1px var(--lci-amethyste),0 12px 28px rgba(26,15,46,0.20);
  transform:translateY(-5px)}
.lci-method:hover h3{color:var(--lci-amethyste)}
.lci-method.vedette:hover{box-shadow:inset 0 0 0 1px var(--lci-or),0 12px 28px rgba(26,15,46,0.28)}
.lci-method.vedette:hover h3{color:var(--lci-or)}
.lci-method .cat{text-transform:uppercase;letter-spacing:0.1em;font-size:11px;
  font-weight:600;color:var(--lci-text-light);margin-bottom:8px}
.lci-method h3{font-size:20px;color:var(--lci-aubergine);
  transition:color var(--lci-transition)}
.lci-method p{font-size:var(--lci-body-small);color:var(--lci-text-medium);margin:0}
.lci-method .more{margin-top:auto;padding-top:14px;font-weight:600;
  font-size:var(--lci-body-small);color:var(--lci-amethyste)}
.lci-method.vedette{background:var(--lci-aubergine);border-color:var(--lci-aubergine);color:var(--lci-text-on-dark)}
.lci-method.vedette h3{color:var(--lci-text-on-dark)}
.lci-method.vedette p{color:var(--lci-text-on-dark-soft)}
.lci-method.vedette .cat{color:var(--lci-text-on-dark-mute)}
.lci-method.vedette .more{color:var(--lci-or)}
.lci-method .badge{position:absolute;top:-11px;left:24px;background:var(--lci-or);
  /* Aubergine et non creme : en 11 px capitales sur l'or, le creme tombe a
     2,82 de contraste, sous le seuil de 4,5 exige pour du petit texte. */
  color:var(--lci-aubergine);font-size:11px;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px}

/* --- Citation phare ----------------------------------------------------------- */
.lci-quote-feature{max-width:900px;margin:0 auto;text-align:center}
.lci-quote-feature blockquote{font-family:var(--lci-font-serif);font-style:italic;
  font-size:var(--lci-quote-big);line-height:var(--lci-lh-normal);
  color:var(--sur-titre);margin:0 0 24px}
.lci-quote-feature blockquote::before{content:"\00ab\00a0";color:var(--lci-or)}
.lci-quote-feature blockquote::after{content:"\00a0\00bb";color:var(--lci-or)}
.lci-quote-feature .name{font-weight:600;font-size:var(--lci-body-small);color:var(--sur-titre)}
.lci-quote-feature .role{display:block;font-size:var(--lci-caption);color:var(--sur-doux);margin-top:2px}

/* --- Temoignages (identique LP flyer-afr) -------------------------------------- */
.lci-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  max-width:var(--lci-container-max);margin:0 auto}
.lci-testimonial{background:var(--sur-carte);border:1px solid var(--sur-bordure);border-radius:var(--lci-radius-m);
  cursor:pointer;text-decoration:none;display:flex;flex-direction:column;overflow:hidden;
  color:inherit;transition:border-color var(--lci-transition),box-shadow var(--lci-transition),
  transform var(--lci-transition)}
/* Meme survol que les cartes de benefices (.lci-need) : levee, ombre, filet */
.lci-testimonial:hover{border-color:var(--sur-lien);transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px var(--sur-lien),0 12px 28px rgba(26,15,46,0.20)}
.lci-testimonial:hover .lci-testimonial-quote{color:var(--sur-lien)}
.lci-testimonial-lire{transition:transform var(--lci-transition)}
.lci-testimonial:hover .lci-testimonial-lire{transform:translateX(5px)}
.lci-testimonial-thumb{aspect-ratio:16/9;background:var(--lci-aubergine) center/cover no-repeat;
  position:relative;overflow:hidden}
.lci-testimonial-thumb.a-traiter{filter:saturate(0.85) brightness(0.92)}
.lci-testimonial-thumb::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,0.92) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M23 19l16 9-16 9V19z" fill="%235C3D8F"/></svg>') center/100% no-repeat}
/* Le gabarit dynamique ne pose pas .sans-video : il ecrit data-vignette vide.
   Sans cette seconde regle, une carte sans video affiche quand meme un gros
   bouton de lecture sur un rectangle aubergine, et le clic ne lance rien. */
.lci-testimonial.sans-video .lci-testimonial-thumb::after,
.lci-testimonial[data-vignette=""] .lci-testimonial-thumb::after{content:none}
.lci-testimonial-body{display:flex;flex-direction:column;flex-grow:1;padding:1.5rem 1.5rem 1.75rem}
/* La citation porte la preuve a elle seule : une partie des visiteurs ne
   lancera jamais la video. Elle passe devant le nom et le role (6 septembre). */
.lci-testimonial-quote{font-family:var(--lci-font-serif);font-style:italic;
  font-size:1.375rem;line-height:1.3;font-weight:400;color:var(--sur-titre);
  margin:0 0 1.125rem;flex-grow:1}
.lci-testimonial-quote::before{content:"\00ab\00a0";color:var(--lci-or)}
.lci-testimonial-quote::after{content:"\00a0\00bb";color:var(--lci-or)}
.lci-testimonial-meta{display:flex;align-items:center;gap:0.75rem;padding-top:0.875rem;
  border-top:1px solid var(--sur-bordure)}
.lci-testimonial-rule{width:1.5rem;height:1px;background:var(--lci-or);flex:0 0 auto}
.lci-testimonial-name{font-weight:500;font-size:0.8125rem;color:var(--sur-doux)}
.lci-testimonial-role{font-size:0.75rem;color:var(--sur-doux)}
.lci-testimonial-role::before{content:"\00a0\00b7\00a0";color:var(--sur-bordure)}
.lci-testimonials-more{text-align:center;margin-top:var(--lci-space-l)}
/* Pont temoignage <-> histoire de corps (article F6) */
.lci-histoire-lien{display:flex;flex-direction:column;gap:6px;background:#fff;
  border:var(--lci-border);border-left:6px solid var(--lci-or);
  border-radius:var(--lci-radius-m);padding:18px 22px;text-decoration:none;
  color:var(--lci-text-dark);margin-bottom:var(--lci-space-l);
  transition:border-color var(--lci-transition),box-shadow var(--lci-transition)}
.lci-histoire-lien:hover{border-color:var(--lci-amethyste);border-left-color:var(--lci-or);
  box-shadow:var(--lci-shadow-card)}
.lci-histoire-lien .eyebrow{font:600 var(--lci-label) var(--lci-font-sans);
  text-transform:uppercase;letter-spacing:0.1em;color:var(--lci-or)}
.lci-histoire-lien strong{font-family:var(--lci-font-serif);font-style:italic;
  font-size:20px;color:var(--lci-aubergine)}
.lci-histoire-lien span:last-child{font:600 var(--lci-body-small) var(--lci-font-sans);
  color:var(--lci-amethyste)}

/* Page dediee d'un temoignage */
.lci-temoignage-page .signature{font:600 var(--lci-body-small) var(--lci-font-sans);
  color:var(--lci-amethyste);text-transform:uppercase;letter-spacing:0.08em}
.lci-temoignage-page .chips{display:flex;flex-wrap:wrap;gap:8px}
.lci-temoignage-page .chips .chip{background:#fff;border:var(--lci-border);border-radius:999px;
  padding:7px 16px;font:600 var(--lci-caption) var(--lci-font-sans);
  color:var(--lci-amethyste);text-decoration:none}
.lci-video-facade{position:relative;aspect-ratio:16/9;border-radius:var(--lci-radius-m);
  overflow:hidden;cursor:pointer;background:var(--lci-aubergine)}
.lci-video-facade .vignette{position:absolute;inset:0;background:center/cover no-repeat;
  filter:saturate(0.85) brightness(0.8);transition:var(--lci-transition)}
.lci-video-facade:hover .vignette{filter:saturate(0.9) brightness(0.9)}
.lci-video-facade .lancer{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;background:none;border:0;cursor:pointer}
.lci-video-facade .rond{display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;border-radius:50%;background:rgba(251,247,240,0.94);
  color:var(--lci-amethyste);font-size:26px;padding-left:6px;
  box-shadow:var(--lci-shadow-card);transition:var(--lci-transition)}
.lci-video-facade:hover .rond{transform:scale(1.06)}
.lci-video-facade .libelle{font:600 var(--lci-body-small) var(--lci-font-sans);
  color:var(--lci-text-on-dark);text-shadow:0 1px 6px rgba(20,12,40,0.6)}
.lci-video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lci-testimonial-lire{margin-top:12px;font-weight:600;font-size:var(--lci-body-small);
  color:var(--sur-lien)}

/* Temoignages dynamiques : item, filtres du hub, transcription */
.lci-t-item{display:flex;flex-direction:column;gap:10px}
.lci-t-item .lci-testimonial{flex:1}
.lci-t-filtres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  max-width:var(--lci-container-max);margin:0 auto var(--lci-space-l)}
.lci-t-filtres .chip{background:#fff;border:var(--lci-border);border-radius:999px;
  padding:8px 18px;font:600 var(--lci-body-small) var(--lci-font-sans);
  color:var(--lci-amethyste);cursor:pointer;transition:var(--lci-transition)}
.lci-t-filtres .chip:hover{border-color:var(--lci-amethyste)}
.lci-t-filtres .chip.actif{background:var(--lci-amethyste);color:var(--lci-text-on-dark);
  border-color:var(--lci-amethyste)}
.lci-t-filtres .groupe{align-self:center;margin-left:14px;text-transform:uppercase;
  letter-spacing:0.1em;font:600 var(--lci-label) var(--lci-font-sans);
  color:var(--lci-text-light)}
.lci-t-filtres .groupe:first-of-type{margin-left:4px}
.lci-t-transcription{background:#fff;border:var(--lci-border);border-radius:var(--lci-radius-m)}
.lci-t-transcription summary{cursor:pointer;padding:12px 16px;list-style:none;
  font:600 var(--lci-body-small) var(--lci-font-sans);color:var(--lci-amethyste);
  display:flex;justify-content:space-between;align-items:center}
.lci-t-transcription summary::-webkit-details-marker{display:none}
.lci-t-transcription summary::after{content:"+";font-size:1.2rem}
.lci-t-transcription[open] summary::after{content:"\2212"}
.lci-t-transcription .contenu{padding:0 16px 14px;font-size:var(--lci-body-small);
  color:var(--lci-text-medium)}
.lci-t-transcription .contenu p{margin:0 0 10px}

/* --- Etapes / process ------------------------------------------------------------ */
.lci-process{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;
  max-width:var(--lci-container-max);margin:0 auto}
.lci-process-step{position:relative}
/* fleche or entre les colonnes (maquette du 17 aout) */
.lci-process-step+.lci-process-step::before{content:"\2192";position:absolute;left:-40px;top:96px;
  font-size:24px;line-height:1;color:var(--sur-accent);opacity:.8}
.lci-process-step h3{display:flex;align-items:center;gap:14px;color:var(--sur-accent);
  font-size:clamp(28px,2.6vw,36px);margin:0 0 12px}
.lci-process-num{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--sur-accent);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--lci-font-sans);
  font-style:normal;font-weight:600;font-size:14px;color:var(--sur-accent)}
.lci-process-accroche{font-weight:600;color:var(--sur-titre)!important;font-size:var(--lci-body)!important;margin-bottom:8px!important}
.lci-process-step p{color:var(--sur-texte);font-size:var(--lci-body-small);margin:0}
.lci-process-pied{margin-top:18px!important;padding-top:12px;border-top:1px solid var(--sur-bordure);
  font-size:11px!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sur-accent)!important}
.lci-process-foot{text-align:center;margin-top:var(--lci-space-l)}

/* --- Comparaison deux colonnes ---------------------------------------------------- */
.lci-audience{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:var(--lci-container-max);margin:0 auto}
.lci-audience-col{border-radius:var(--lci-radius-m);padding:34px 30px;color:var(--lci-text-on-dark)}
.lci-audience-col.yes{background:var(--lci-amethyste)}
.lci-audience-col.no{background:var(--lci-aubergine)}
.lci-audience-col .col-tag{display:inline-block;font-weight:600;font-size:var(--lci-label);
  letter-spacing:0.12em;text-transform:uppercase;margin-bottom:12px}
.lci-audience-col.yes .col-tag{color:#7ED9A7}
.lci-audience-col.no .col-tag{color:#F0B9A2}
.lci-audience-col h3{color:var(--lci-text-on-dark)}
.lci-audience-col ul{list-style:none;margin:0;padding:0}
.lci-audience-col li{padding-left:30px;position:relative;margin-bottom:12px;
  font-size:var(--lci-body-small);color:var(--lci-text-on-dark-soft)}
.lci-audience-col.yes li::before{content:"\2713";position:absolute;left:0;color:#7ED9A7;font-weight:700}
.lci-audience-col.no li::before{content:"\2715";position:absolute;left:0;color:#F0B9A2;font-weight:700}

/* --- Media + texte ------------------------------------------------------------------ */
.lci-mediatext{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,4vw,64px);
  align-items:center;max-width:var(--lci-container-max);margin:0 auto}
.lci-mediatext.image-droite .lci-photo{order:2}
.lci-mediatext h2{text-wrap:balance}
.lci-mediatext .signoff{display:inline-block;margin-top:16px;font-family:var(--lci-font-serif);
  font-style:italic;font-size:20px;color:var(--lci-amethyste);text-decoration:none}
.bg-amethyste .lci-mediatext .signoff,.bg-aubergine .lci-mediatext .signoff{color:var(--lci-or)}
/* Pied « qui vous recoit » (maquette du 17 aout) : cabinets, mentions, limite */
.lci-mediatext .lci-photo.cadrage-portrait{max-width:520px;box-shadow:0 14px 44px rgba(26,15,46,.16)}
/* Un portrait tient mieux le face a face avec sa colonne de texte. */
/* La colonne epouse la largeur du portrait : sinon le reste de la colonne
   s'ajoute a la gouttiere et l'ecart parait double. Bornee a partir de
   768 px : la regle de repli en une colonne vit dans un media query, et une
   regle plus specifique la battrait sur telephone. */
@media (min-width:768px){
  .lci-mediatext:has(.cadrage-portrait){grid-template-columns:minmax(0,520px) 1fr}
}
.lci-mediatext .lci-photo.cadrage-portrait img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.lci-cabinets{display:flex;flex-wrap:wrap;gap:12px 48px;margin:22px 0;padding:18px 0;
  border-top:1px solid rgba(155,125,196,.4);border-bottom:1px solid rgba(155,125,196,.4)}
.lci-cabinets div{margin:0}
.lci-cabinets dt{font-family:var(--lci-font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lci-amethyste);margin-bottom:6px}
.lci-cabinets dd{margin:0;font-size:var(--lci-body)}
.bg-amethyste .lci-cabinets dt,.bg-aubergine .lci-cabinets dt{color:var(--lci-text-on-dark-mute)}
.lci-mediatext .lci-mentions{font-size:var(--lci-caption);color:var(--lci-text-light);margin:0 0 12px}
.bg-amethyste .lci-mediatext .lci-mentions,.bg-aubergine .lci-mediatext .lci-mentions{color:var(--lci-text-on-dark-mute)}
.lci-mediatext .lci-limite-inline{font-size:var(--lci-caption);font-style:italic;color:var(--lci-text-medium);
  border-left:2px solid var(--lci-violet-clair);padding-left:14px;margin:0 0 6px}
.bg-amethyste .lci-mediatext .lci-limite-inline,.bg-aubergine .lci-mediatext .lci-limite-inline{color:var(--lci-text-on-dark-soft)}
/* Liste numerotee editoriale (maquette du 17 aout, « Le Rolfing en trois
   phrases ») : numero en or, <strong> de tete en eyebrow, phrase en serif */
.lci-mediatext ol{list-style:none;margin:0;padding:0;counter-reset:pt}
.lci-mediatext ol li{counter-increment:pt;display:grid;grid-template-columns:44px 1fr;gap:0 16px;
  padding:22px 0;border-bottom:1px solid rgba(155,125,196,.35)}
.lci-mediatext ol li:first-child{padding-top:8px}
.lci-mediatext ol li:last-child{border-bottom:0}
.lci-mediatext ol li::before{content:"0" counter(pt);font-family:var(--lci-font-serif);font-style:italic;
  font-size:20px;color:var(--lci-or);line-height:1.2;grid-row:1/3}
.lci-mediatext ol li>strong:first-child{display:block;font-family:var(--lci-font-sans);font-style:normal;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;
  color:var(--lci-text-light)}
.bg-amethyste .lci-mediatext ol li>strong:first-child,.bg-aubergine .lci-mediatext ol li>strong:first-child{color:var(--lci-text-on-dark-mute)}
.lci-mediatext ol li>span,.lci-mediatext ol li{font-family:var(--lci-font-serif);font-style:italic;font-size:22px;line-height:1.45}
.bg-amethyste .lci-mediatext ol li,.bg-aubergine .lci-mediatext ol li{color:var(--lci-text-on-dark)}

/* --- Texte editorial ------------------------------------------------------------------ */
.lci-prose{margin:0 auto}
.lci-prose.etroite{max-width:680px}
.lci-prose.normale{max-width:900px}
.lci-prose h2,.lci-prose h3{font-style:italic}
.lci-prose blockquote{font-family:var(--lci-font-serif);font-style:italic;
  font-size:22px;color:var(--sur-accent);border-left:2px solid var(--sur-accent);
  margin:1.5em 0;padding-left:1.5rem}

/* --- Figures et pauses dans le corps d'un article (4 septembre 2026) --------
   Trois placements nommes, jamais de pourcentage libre : un vocabulaire
   fixe fait la reconnaissabilite du blog, le reglage image par image la
   defait. Sur mobile, tout revient a pleine largeur. La legende vient du
   titre de l'image (website/image_formats.py). */
.lci-prose .lci-figure{margin:2em 0;padding:0;clear:both}
.lci-prose .lci-figure .lci-photo{display:block;width:100%;padding:0;border:0;
  background:none;cursor:zoom-in;font:inherit;color:inherit;text-align:inherit}
/* L'image en grand : un dialog natif, sans bibliotheque. Le fond sombre est
   le seul aplat aubergine autorise par-dessus une page. */
.lci-zoom{border:0;padding:0;background:transparent;max-width:min(96vw,1800px);max-height:96vh}
.lci-zoom::backdrop{background:rgba(20,12,40,.88)}
.lci-zoom img{display:block;max-width:96vw;max-height:88vh;width:auto;height:auto;
  margin:0 auto;border-radius:var(--lci-radius-m);cursor:zoom-out}
.lci-zoom figcaption{color:var(--lci-text-on-dark);font-family:var(--lci-font-sans);
  font-size:14px;text-align:center;margin-top:.8em}
.lci-prose .lci-figure img{width:100%;height:auto}
.lci-prose .lci-figure figcaption{font-family:var(--lci-font-sans);font-style:normal;
  font-size:14px;line-height:1.5;color:var(--sur-doux);margin-top:.6em}
.lci-prose .lci-figure.reduite{width:60%;margin-left:auto;margin-right:auto}
.lci-prose .lci-figure.habillee{width:40%;float:right;clear:right;margin:.3em 0 1em 1.6em}
/* Un intertitre passe toujours sous un flottant, jamais a cote de lui. */
.lci-prose h2,.lci-prose h3{clear:both}
@media (max-width:640px){
  .lci-prose .lci-figure.reduite,.lci-prose .lci-figure.habillee{
    width:100%;float:none;margin:2em 0}
}
/* La pause sensorielle : un aplat, un filet, du serif, et le mot « Pause »
   en tete. Deux pauses qui se suivent sont soudees en une seule boite. Les
   jetons --sur-* suivent le fond de la section. */
.lci-prose .pause{font-family:var(--lci-font-serif);font-style:italic;font-size:1.08em;
  line-height:1.55;color:var(--sur-titre);background:var(--sur-carte);
  border-left:3px solid var(--sur-accent);
  border-radius:0 var(--lci-radius-m) var(--lci-radius-m) 0;
  margin:2em 0;padding:1.1em 1.4em 1.1em 1.5em;clear:both}
.lci-prose .pause+.pause{margin-top:-2em;padding-top:0;border-top-right-radius:0}
/* Le lecteur natif, en ligne avec le texte qui l'annonce, visible
   d'emblee : un lecteur qui survole la page ne devinerait pas qu'il y a
   de l'audio. */
.lci-prose audio.lci-audio{display:inline-block;vertical-align:middle;width:min(100%,380px);
  height:36px;margin:.2em 0 .2em .4em}

/* --- FAQ -------------------------------------------------------------------------------- */
.lci-faq-list{max-width:820px;margin:0 auto}
/* Deux colonnes a partir de 6 questions (voir FaqBlock). Chaque colonne
   est un flux a part : deplier une reponse a droite ne decale rien a
   gauche, ce qu'une grille en rangees ne sait pas faire. */
@media (min-width:861px){
  .lci-faq-list.deux-colonnes{max-width:var(--lci-container-max);
    display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}
}
.lci-faq-item{border-bottom:var(--lci-border)}
.lci-faq-item summary{cursor:pointer;padding:18px 4px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.lci-faq-item summary::-webkit-details-marker{display:none}
.lci-faq-item summary::after{content:"+";font-size:1.4rem;color:var(--lci-amethyste);flex-shrink:0}
.lci-faq-item[open] summary::after{content:"\2212"}
/* 68rem serait trop long a lire : on borne la reponse a ~85 caracteres. */
.lci-faq-answer{padding:0 4px 20px;font-size:var(--lci-body-small);max-width:66ch}
.bg-amethyste .lci-faq-item,.bg-aubergine .lci-faq-item{border-bottom-color:rgba(251,247,240,0.25)}
.bg-amethyste .lci-faq-item summary,.bg-aubergine .lci-faq-item summary{color:var(--lci-text-on-dark)}
.bg-amethyste .lci-faq-item summary::after,.bg-aubergine .lci-faq-item summary::after{content:"+";color:var(--lci-or)}
.bg-amethyste .lci-faq-item[open] summary::after,.bg-aubergine .lci-faq-item[open] summary::after{content:"\2212"}
.bg-amethyste .lci-faq-answer,.bg-aubergine .lci-faq-answer{color:var(--lci-text-on-dark-soft)}

/* --- Carte d'appel ------------------------------------------------------------------------ */
.lci-callout{max-width:820px;margin:0 auto;background:var(--lci-amethyste);
  border-radius:var(--lci-radius-l);padding:72px 56px;text-align:center;color:var(--lci-text-on-dark)}
.lci .lci-callout h2{color:var(--sur-titre)}
.lci-callout .lede{color:var(--lci-text-on-dark-soft);max-width:540px;margin:0 auto var(--lci-space-m)}
.lci-callout .items{color:var(--lci-text-on-dark-mute);font-size:var(--lci-body-small);margin:0 0 var(--lci-space-m)}
.lci-callout .items .sep{color:var(--lci-or);margin:0 8px}
.lci-callout .reassure{margin-top:14px;font-size:var(--lci-caption);color:var(--lci-text-on-dark-mute)}

/* --- Tarifs -------------------------------------------------------------------------------- */
.lci-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:var(--lci-container-max);margin:0 auto}
.lci-price-card{background:#fff;border:var(--lci-border);border-radius:var(--lci-radius-m);
  padding:36px 30px;display:flex;flex-direction:column}
.lci-price-card .cat{text-transform:uppercase;letter-spacing:0.1em;font-size:var(--lci-label);
  font-weight:600;color:var(--lci-text-light);margin-bottom:10px}
.lci-price-card .num{font-family:var(--lci-font-serif);font-style:italic;font-size:56px;
  line-height:1;color:var(--lci-aubergine)}
.lci-price-card .num small{font-family:var(--lci-font-sans);font-style:normal;
  font-size:var(--lci-body-small);color:var(--lci-text-light);margin-left:6px}
.lci-price-card p{font-size:var(--lci-body-small);color:var(--lci-text-medium)}
.lci-price-card ul{list-style:none;margin:0 0 20px;padding:0;font-size:var(--lci-body-small)}
.lci-price-card li{padding-left:24px;position:relative;margin-bottom:8px;color:var(--lci-text-medium)}
.lci-price-card li::before{content:"\2713";position:absolute;left:0;color:var(--lci-vert)}
.lci-price-card .btn{margin-top:auto;justify-content:center}
.lci-price-card.avant{background:var(--lci-amethyste);border-color:var(--lci-amethyste);color:var(--lci-text-on-dark)}
.lci-price-card.avant .num{color:var(--lci-text-on-dark)}
.lci-price-card.avant .cat,.lci-price-card.avant .num small{color:var(--lci-text-on-dark-mute)}
.lci-price-card.avant p,.lci-price-card.avant li{color:var(--lci-text-on-dark-soft)}

/* --- CTA final, bandeau CTA, newsletter ------------------------------------------------------ */
.lci-cta-final{text-align:center;max-width:820px;margin:0 auto}
.lci-cta-final .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-top:var(--lci-space-m)}
.lci-cta-final .escape{margin-top:var(--lci-space-l);font-size:var(--lci-body-small);
  color:var(--lci-text-on-dark-mute)}
/* L'or sur aubergine plafonne a 4,02 : le creme porte le lien a 11,3. */
.lci-cta-final .escape a{color:var(--lci-text-on-dark);text-decoration:underline;
  text-underline-offset:3px;font-weight:600}
.lci-cta-band{padding:56px var(--lci-gutter)}
.lci-cta-band .row{max-width:var(--lci-container-max);margin:0 auto;display:flex;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.lci-cta-band .phrase{font-family:var(--lci-font-serif);font-style:italic;font-size:26px;
  color:var(--lci-text-on-dark);margin:0}
.lci-newsletter{max-width:640px;margin:0 auto;text-align:center}
.lci .lci-newsletter h2{color:var(--sur-titre)}
.lci-nl-form{display:flex;gap:10px;justify-content:center;margin-top:var(--lci-space-m);flex-wrap:wrap}
.lci-nl-form input[type=email]{flex:1;min-width:240px;background:#fff;
  border:var(--lci-border);border-radius:var(--lci-radius-s);padding:14px 16px;
  font:400 var(--lci-body-small) var(--lci-font-sans);color:var(--lci-text-dark)}
.lci-nl-form input[type=email]:focus{outline:2px solid var(--lci-or)}
.lci-newsletter .reassure{margin-top:12px;font-size:var(--lci-caption);color:var(--lci-text-on-dark-mute)}
.lci-nl-message{margin-top:var(--lci-space-m);font-size:var(--lci-body);color:var(--sur-texte)}

/* --- Cabinets ---------------------------------------------------------------------------------- */
.lci-locations{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;max-width:var(--lci-container-max);margin:0 auto}
.lci-location{background:#fff;border:var(--lci-border);border-radius:var(--lci-radius-m);
  padding:26px 28px;display:flex;flex-direction:column}
.lci-location h3{color:var(--lci-aubergine);margin-bottom:10px}
.lci-location .adresse{margin:0 0 8px}
.lci-location .horaires{margin:0 0 8px;font-weight:600;color:var(--lci-amethyste);
  font-size:var(--lci-body-small)}
.lci-location .acces{margin:0 0 14px;font-size:var(--lci-body-small);
  color:var(--lci-text-medium)}
.lci-location .acces p,.lci-location .acces ul,.lci-location .acces ol{margin:0 0 6px}
.lci-location .acces>:last-child{margin-bottom:0}
.lci-location .acces ul,.lci-location .acces ol{padding-left:1.2em}
.lci-location .acces a{color:var(--lci-amethyste);text-decoration:underline}
/* Dates de venue et d'absence : deux colonnes des qu'il y en a beaucoup,
   pour qu'un semestre entier ne fasse pas enfler la carte */
.lci-agenda{margin:0 0 14px;padding:14px 16px;background:var(--lci-lavande);
  border-radius:var(--lci-radius-s);font-size:var(--lci-body-small)}
.lci-agenda-titre{margin:0 0 8px;font-weight:600;color:var(--lci-aubergine)}
.lci-agenda ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.lci-agenda li{margin:0 0 6px;break-inside:avoid;color:var(--lci-text-medium)}
.lci-agenda li .note{color:var(--lci-text-light)}
.lci-agenda-lien{display:inline-block;margin-top:6px;font-weight:600;
  color:var(--lci-amethyste);text-decoration:none}
.lci-agenda-lien:hover{text-decoration:underline}
.lci-agenda-absence{margin:8px 0 0;color:var(--lci-or);font-weight:600}
@media (max-width:600px){ .lci-agenda ul{columns:1} }
.lci-location .itineraire{margin-top:auto;padding-top:14px;font-weight:600;
  font-size:var(--lci-body-small);color:var(--lci-amethyste);text-decoration:none}
/* Plan OpenStreetMap, charge directement : aucun cookie a faire accepter */
.lci-carte{width:100%;aspect-ratio:16/10;display:block;border:0;
  border-radius:var(--lci-radius-m);margin-bottom:14px;
  background:var(--lci-lavande)}

/* --- Video (facade au clic, lecture dans la page) ------------------------------------------------ */
.lci-video{max-width:900px;margin:0 auto}
.lci-video-cadre{position:relative;aspect-ratio:16/9;border-radius:var(--lci-radius-m);
  overflow:hidden;background:var(--lci-aubergine)}
.lci-video-cadre iframe{width:100%;height:100%;border:0;display:block}
/* Portee au cadre du bloc Video : sans ce prefixe, ces regles ecrasaient la
   facade de la page temoignage (declaree plus haut, meme nom de classe) et la
   sortaient du flux en inset:0, ce qui recouvrait toute la page. */
.lci-video-cadre .lci-video-facade{position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;cursor:pointer;background:transparent}
.lci-video-cadre .lci-video-facade img{width:100%;height:100%;object-fit:cover}
.lci-video-cadre .lci-video-facade.a-traiter img{filter:saturate(0.85) brightness(0.95)}
.lci-video-cadre .lci-video-facade::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:rgba(251,247,240,0.92) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M23 19l16 9-16 9V19z" fill="%235C3D8F"/></svg>') center/100% no-repeat;
  transition:var(--lci-transition)}
.lci-video-cadre .lci-video-facade:hover::after{transform:translate(-50%,-50%) scale(1.08)}
.lci-video figcaption{margin-top:12px;text-align:center;font-size:var(--lci-body-small);
  color:var(--lci-text-medium)}
.bg-amethyste .lci-video figcaption,.bg-aubergine .lci-video figcaption{
  color:var(--lci-text-on-dark-soft)}
.lci-video-erreur{color:var(--lci-or);font-weight:600;text-align:center}

/* --- Sommaire de page --------------------------------------------------------------------------- */
.lci-sommaire{max-width:760px;margin:0 auto;background:#fff;border:var(--lci-border);
  border-radius:var(--lci-radius-m);padding:24px 28px}
.lci-sommaire[hidden]{display:none}
.lci-sommaire-titre{margin:0 0 12px;font-weight:600;color:var(--lci-aubergine);
  font-size:var(--lci-body-small);text-transform:uppercase;letter-spacing:0.06em}
.lci-sommaire ol{margin:0;padding:0;list-style:none;counter-reset:sommaire;
  columns:2;column-gap:32px}
.lci-sommaire li{counter-increment:sommaire;margin:0 0 8px;break-inside:avoid}
.lci-sommaire li::before{content:counter(sommaire) ". ";color:var(--lci-or);font-weight:600}
.lci-sommaire a{color:var(--lci-text-medium);text-decoration:none;
  font-size:var(--lci-body-small)}
.lci-sommaire a:hover{color:var(--lci-amethyste);text-decoration:underline}
@media (max-width:600px){ .lci-sommaire ol{columns:1} }
/* Les titres vises ne doivent pas se coller sous la nav collante */
.lci [data-block] h2[id],
/* Le bloc Ancre : sans ce decalage, la barre de navigation collante
   (68 px) recouvre le sur-titre et le haut du titre vises. */
.lci-ancre{scroll-margin-top:96px}

/* --- Note Google -------------------------------------------------------------------------------- */
.lci-avis{max-width:520px;margin:0 auto;text-align:center}
.lci-avis-note{margin:0 0 4px;display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap}
.lci-avis-etoiles{color:var(--lci-or);font-size:28px;letter-spacing:2px}
.lci-avis-chiffre{font-weight:600;font-size:var(--lci-h3);color:var(--lci-aubergine)}
.lci-avis-source{margin:0 0 18px;color:var(--lci-text-medium);
  font-size:var(--lci-body-small)}
.lci-avis-mention{margin:14px 0 0;font-size:var(--lci-caption);
  color:var(--lci-text-light);font-style:italic}
.bg-amethyste .lci-avis-chiffre,.bg-aubergine .lci-avis-chiffre{color:var(--lci-text-on-dark)}
.bg-amethyste .lci-avis-source,.bg-aubergine .lci-avis-source,
.bg-amethyste .lci-avis-mention,.bg-aubergine .lci-avis-mention{color:var(--lci-text-on-dark-soft)}

/* --- Separateur, espace ------------------------------------------------------------------------- */
.lci-divider-filet{border:none;border-top:1px solid var(--lci-violet-clair);
  max-width:120px;margin:48px auto}
.lci-divider-point{text-align:center;font-family:var(--lci-font-serif);
  font-size:24px;color:var(--lci-violet-clair);margin:32px 0}
.lci-spacer-s{height:var(--lci-space-s)}
.lci-spacer-m{height:var(--lci-space-m)}
.lci-spacer-l{height:var(--lci-space-l)}
.lci-spacer-xl{height:var(--lci-space-xl)}

/* --- Popup video (temoignages) ------------------------------------------------------------------- */
.lci-vmodal{display:none;position:fixed;inset:0;background:rgba(20,12,40,0.85);
  z-index:50;align-items:center;justify-content:center;padding:24px}
.lci-vmodal.ouverte{display:flex}
.lci-vmodal .vbox{width:min(900px,100%);aspect-ratio:16/9;position:relative}
.lci-vmodal iframe{width:100%;height:100%;border:0;border-radius:var(--lci-radius-m)}
.lci-vmodal .vfermer{position:absolute;top:-42px;right:0;background:none;border:0;
  color:var(--lci-text-on-dark);font-size:1.8rem;cursor:pointer}

/* --- Responsive ----------------------------------------------------------------------------------- */
@media(max-width:991px){
  .lci-needs.cols-3,.lci-needs.cols-4{grid-template-columns:repeat(2,1fr)}
  .lci-methods{grid-template-columns:repeat(2,1fr)}
  .lci-testimonials{grid-template-columns:1fr}
  .lci-stats{gap:24px}
  .lci-process{gap:32px}
}
@media(max-width:767px){
  .lci-section{padding:var(--lci-space-l) var(--lci-gutter)}
  /* Le bandeau de preuves : deux lignes equilibrees sur telephone, jamais
     quatre items empiles. Les separateurs sortent du flux, les quatre items
     se rangent en 2 x 2. */
  .lci-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
    align-items:start;text-align:center}
  .lci-trust .sep{display:none}
  .lci-trust{font-size:13px}
  /* Un lien d'approfondissement reste une cible tactile confortable. */
  .lci-b-lien,
  .lci-mediatext .signoff{padding-top:9px;padding-bottom:9px}

  /* Les coupures de ligne voulues sur ecran large n'ont pas de sens dans
     une colonne de telephone, ou elles couperaient au mauvais endroit. */
  br.saut-bureau{display:none}
  .lci-cta-final p br{display:none}

  /* Public de 55 a 75 ans : sur telephone, aucun texte de contenu sous
     16 px. Restent volontairement en petit : les sur-titres, la mention de
     cadre et les lignes de sortie, qui sont des libelles, pas du contenu. */
  .lci-need p,
  .lci-callout .items,
  .lci-audience-col li,
  .lci-parcours-pied p{font-size:16px}
  /* Les trois niveaux de rythme, resserres sur telephone. */
  .pt-liee{padding-top:0.875rem!important} .pb-liee{padding-bottom:0.875rem!important}
  .pt-normale{padding-top:1.375rem!important} .pb-normale{padding-bottom:1.375rem!important}
  .pt-rupture{padding-top:1.875rem!important} .pb-rupture{padding-bottom:1.875rem!important}
  .lci-needs.cols-2,.lci-needs.cols-3,.lci-needs.cols-4{grid-template-columns:1fr}
  .lci-methods{grid-template-columns:1fr}
  .lci-stats{grid-template-columns:1fr}
  .lci-process{grid-template-columns:1fr}
  .lci-process-step+.lci-process-step::before{content:none}
  .lci-audience{grid-template-columns:1fr}
  .lci-mediatext{grid-template-columns:1fr}
  .lci-mediatext.image-droite .lci-photo{order:0}
  .lci-locations{grid-template-columns:1fr}
  .lci-pricing{grid-template-columns:1fr}
  .lci-callout{padding:48px 24px}
  .lci-cta-band .row{justify-content:center;text-align:center}
}

/* --- Reglages de section : espacements charte, fond transparent ---------------- */
.pt-0{padding-top:0!important}
.pt-s{padding-top:var(--lci-space-s)!important}
.pt-m{padding-top:var(--lci-space-m)!important}
.pt-l{padding-top:var(--lci-space-l)!important}
.pt-xl{padding-top:var(--lci-space-xl)!important}
.pt-2xl{padding-top:var(--lci-space-2xl)!important}
.pt-liee{padding-top:var(--lci-gout-liee)!important}
.pt-normale{padding-top:var(--lci-gout-normale)!important}
.pt-rupture{padding-top:var(--lci-gout-rupture)!important}
.pb-0{padding-bottom:0!important}
.pb-s{padding-bottom:var(--lci-space-s)!important}
.pb-m{padding-bottom:var(--lci-space-m)!important}
.pb-l{padding-bottom:var(--lci-space-l)!important}
.pb-xl{padding-bottom:var(--lci-space-xl)!important}
.pb-2xl{padding-bottom:var(--lci-space-2xl)!important}
.pb-liee{padding-bottom:var(--lci-gout-liee)!important}
.pb-normale{padding-bottom:var(--lci-gout-normale)!important}
.pb-rupture{padding-bottom:var(--lci-gout-rupture)!important}

/* Un bouton rendu en lien simple : reserve a l'approfondissement, jamais a
   une action. La regle du 6 septembre : les boutons agissent, les liens
   expliquent. */
.lci-b-lien{display:inline-block;font-family:var(--lci-font-serif);
  font-style:italic;font-size:var(--lci-body);color:var(--sur-lien);
  text-decoration:underline;text-underline-offset:4px}
.lci-b-lien:hover{opacity:.8}
.bg-transparent{background:transparent;color:var(--lci-text-dark)}
.bg-transparent h2,.bg-transparent h3{color:var(--lci-aubergine)}
.bg-transparent .lci-eyebrow{color:var(--lci-amethyste)}
.lci-trust-wrap{padding:0}

/* --- Section libre, colonnes ---------------------------------------------------- */
.lci-libre{margin:0 auto}
.lci-libre.etroite{max-width:680px}
.lci-libre.normale{max-width:900px}
.lci-libre.pleine{max-width:var(--lci-container-max)}
.lci-cols{display:grid;gap:clamp(24px,4vw,48px);max-width:var(--lci-container-max);margin:0 auto}
.lci-cols.d-50-50{grid-template-columns:1fr 1fr}
.lci-cols.d-33-66{grid-template-columns:1fr 2fr}
.lci-cols.d-66-33{grid-template-columns:2fr 1fr}

/* --- Briques de contenu ----------------------------------------------------------- */
.mb-0{margin-bottom:0!important}
.mb-xs{margin-bottom:var(--lci-space-xs)!important}
.mb-s{margin-bottom:var(--lci-space-s)!important}
.mb-m{margin-bottom:var(--lci-space-m)!important}
.mb-l{margin-bottom:var(--lci-space-l)!important}
.mb-xl{margin-bottom:var(--lci-space-xl)!important}
.al-gauche{text-align:left}
.al-centre{text-align:center}
.al-droite{text-align:right}
.lci-p.petite{font-size:var(--lci-body-small)}
.bg-amethyste .lci-p,.bg-aubergine .lci-p{color:var(--lci-text-on-dark-soft)}
.lci-liste{margin:0;padding-left:1.5em}
.lci-liste li{margin-bottom:8px}
.lci-liste.style-puce{list-style:disc}
.lci-liste.style-tiret li::marker{content:"\2013\00a0\00a0";color:var(--lci-or)}
.lci-liste.style-coche li::marker{content:"\2713\00a0\00a0";color:var(--lci-vert)}
.bg-amethyste .lci-liste.style-coche li::marker,
.bg-aubergine .lci-liste.style-coche li::marker{color:#7ED9A7}
.lci-liste.style-numeros{list-style:decimal}
.lci-liste.style-romains{list-style:lower-roman}
.lci-img{margin-left:0;margin-right:0}
.lci-img img{width:100%}
.lci-img.l-100{width:100%}
.lci-img.l-66{width:66%}
.lci-img.l-50{width:50%}
.lci-img.l-33{width:33%}
.lci-img.al-centre{margin-left:auto;margin-right:auto}
.lci-img.al-droite{margin-left:auto}
.lci-img figcaption{font-size:var(--lci-caption);color:var(--lci-text-light);margin-top:8px}
.bg-amethyste .lci-img figcaption,.bg-aubergine .lci-img figcaption{color:var(--lci-text-on-dark-mute)}
/* --- Prise de rendez-vous Trafft ------------------------------------------------------- */
.lci-rdv{max-width:1000px;margin:0 auto}
.lci-rdv-facade{text-align:center}
.lci-rdv-facade .reassure{margin:14px 0 0;font-size:var(--lci-body-small);
  color:var(--lci-text-light)}
.bg-amethyste .lci-rdv-facade .reassure,.bg-aubergine .lci-rdv-facade .reassure{
  color:var(--lci-text-on-dark-mute)}
.lci-rdv-calendrier{background:#fff;border:var(--lci-border);
  border-radius:var(--lci-radius-m);padding:12px;box-shadow:var(--lci-shadow-card)}
.lci-rdv-calendrier .embedded-booking{width:100%}
.lci-rdv-pied{margin:22px auto 0;text-align:center;font-size:var(--lci-body-small);
  color:var(--lci-text-medium)}
.lci-rdv-pied a{color:var(--lci-amethyste);font-weight:600;text-decoration:underline;
  margin-left:8px}
.bg-amethyste .lci-rdv-pied,.bg-aubergine .lci-rdv-pied{color:var(--lci-text-on-dark-soft)}
.bg-amethyste .lci-rdv-pied a,.bg-aubergine .lci-rdv-pied a{color:var(--lci-text-on-dark)}
.lci-rdv-repli{margin:10px 0 2px;text-align:center;font-size:var(--lci-caption);
  color:var(--lci-text-light)}
.lci-rdv-repli a{color:var(--lci-amethyste);font-weight:600}

.lci-embed{max-width:820px;margin:0 auto}
.lci-embed iframe{display:block;width:100%;border:0;border-radius:var(--lci-radius-m);background:#fff}
@media(max-width:767px){
  .lci-cols{grid-template-columns:1fr!important}
  .lci-img.l-66,.lci-img.l-50,.lci-img.l-33{width:100%}
}

/* --- Quiz : parcours et resultat ------------------------------------------------------ */
.lci-quiz{max-width:680px;margin:0 auto}
.quiz-intro{margin-bottom:var(--lci-space-l)}
.quiz-progression{height:8px;background:#fff;border:var(--lci-border);border-radius:999px;overflow:hidden}
.quiz-progression .barre{height:100%;background:var(--lci-or);transition:width 300ms ease-out}
.quiz-compte{margin:8px 0 var(--lci-space-l);font-size:var(--lci-caption);color:var(--lci-text-light);
  text-transform:uppercase;letter-spacing:0.1em;font-weight:600}
.quiz-erreurs{background:#fff;border:2px solid var(--lci-or);border-radius:var(--lci-radius-m);
  padding:14px 18px;margin-bottom:var(--lci-space-m);color:var(--lci-text-dark)}
.quiz-erreurs ul{margin:6px 0 0 18px}
.quiz-question{border:0;padding:0;margin:0 0 var(--lci-space-l)}
.quiz-question legend{font-family:var(--lci-font-serif);font-style:italic;font-weight:600;
  font-size:var(--lci-h3);color:var(--lci-aubergine);margin-bottom:var(--lci-space-m);padding:0}
.quiz-etape-intro{margin:0 0 var(--lci-space-m);color:var(--lci-text-medium)}
.quiz-opt{display:flex;align-items:flex-start;gap:12px;background:#fff;border:var(--lci-border);
  border-radius:var(--lci-radius-m);padding:14px 16px;margin-bottom:10px;cursor:pointer;
  font-size:var(--lci-body);line-height:1.5;transition:border-color var(--lci-transition)}
.quiz-opt:hover{border-color:var(--lci-amethyste)}
.quiz-opt input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--lci-amethyste)}
.quiz-opt:has(input:checked){border-color:var(--lci-amethyste);
  box-shadow:inset 0 0 0 1px var(--lci-amethyste);background:#faf8fd}
.quiz-echelle{display:flex;flex-wrap:wrap;gap:8px}
.quiz-echelle .pill{cursor:pointer}
.quiz-echelle .pill input{position:absolute;opacity:0;width:0;height:0}
.quiz-echelle .pill span{display:flex;align-items:center;justify-content:center;min-width:46px;
  height:46px;background:#fff;border:var(--lci-border);border-radius:var(--lci-radius-s);
  font:600 var(--lci-body) var(--lci-font-sans);color:var(--lci-text-medium);
  transition:var(--lci-transition)}
.quiz-echelle .pill:hover span{border-color:var(--lci-amethyste)}
.quiz-echelle .pill input:checked+span{background:var(--lci-amethyste);color:var(--lci-text-on-dark);
  border-color:var(--lci-amethyste)}
.quiz-echelle .pill input:focus-visible+span{outline:2px solid var(--lci-or);outline-offset:2px}
.quiz-champ{display:block;margin-bottom:var(--lci-space-m);font-weight:600;color:var(--lci-aubergine)}
.quiz-champ input{display:block;width:100%;margin-top:6px;background:#fff;border:var(--lci-border);
  border-radius:var(--lci-radius-s);padding:14px 16px;font:400 var(--lci-body) var(--lci-font-sans);
  color:var(--lci-text-dark)}
.quiz-champ input:focus{outline:2px solid var(--lci-or)}
.quiz-confidentialite{font-size:var(--lci-caption);color:var(--lci-text-light);margin-top:var(--lci-space-m)}
.quiz-nav{display:flex;justify-content:space-between;gap:16px;margin-top:var(--lci-space-l)}
.quiz-nav .btn:only-child{margin-left:auto}
.lci-quiz-resultat{max-width:680px;margin:0 auto}
.lci-quiz-resultat .radar{margin:0 0 var(--lci-space-l);text-align:center}
.lci-quiz-resultat .radar img{max-width:100%;height:auto}
.lci-quiz-resultat .texte{margin-bottom:var(--lci-space-l)}
.lci-quiz-resultat .secondaire{background:#fff;border:var(--lci-border);
  border-radius:var(--lci-radius-m);padding:20px 24px;margin-bottom:var(--lci-space-l)}
.lci-quiz-resultat .secondaire h2{font-size:var(--lci-h3);margin-bottom:6px}


/* =====================================================================
   Le Corps Inspiré : Blog (index + page catégorie)
   À APPENDRE à www/website/static/website/css/lci.css
   Dépend des tokens déjà définis en tête de lci.css (--lci-*).
   Aucun framework, aucune dépendance externe, aucun @import.
   ===================================================================== */

/* --- Tokens locaux au blog ------------------------------------------ */
:root {
  --lci-blog-nav-w: 236px;   /* largeur de la colonne de menu */
  --lci-blog-gap:    60px;   /* gouttière menu / contenu */
  --lci-blog-plaque: 150px;  /* hauteur fixe de la plaque de carte */
}

/* Le prototype du design portait un text-decoration:none global, absent
   du CSS livre : sans lui, titres et chapos des cartes sont soulignes. */
.lci-art-carte, .lci-temo-carte, .lci-nav-item, .lci-tag, .lci-rangee-titre,
.lci-btn-contour, .lci-btn-or, .lci-btn-vert, .lci-cat-retour { text-decoration: none; }
/* Focus visible (AA, public senior) */
.lci-art-carte:focus-visible, .lci-temo-carte:focus-visible,
.lci-nav-item:focus-visible, .lci-tag:focus-visible,
.lci-rangee-titre:focus-visible, .lci-btn-contour:focus-visible,
.lci-btn-or:focus-visible, .lci-btn-vert:focus-visible,
.lci-cat-retour:focus-visible { outline: 2px solid var(--lci-or); outline-offset: 2px; }

/* =====================================================================
   1 · SQUELETTE DE PAGE
   ===================================================================== */

.lci-blog-section        { padding: 72px var(--lci-gutter) 24px; background: var(--lci-lavande); }
.lci-blog-section--fin   { padding-bottom: 88px; }
.lci-blog-wrap           { max-width: var(--lci-container-max); margin: 0 auto; }

/* Grille menu + contenu */
.lci-blog-grille {
  max-width: var(--lci-container-max); margin: 0 auto;
  display: grid; grid-template-columns: var(--lci-blog-nav-w) 1fr;
  gap: var(--lci-blog-gap); align-items: start;
}
.lci-blog-contenu { min-width: 0; }            /* indispensable : autorise le rétrécissement */

/* Héro éditorial */
.lci-blog-hero        { background: var(--lci-lavande); padding: 64px var(--lci-gutter) 44px; }
.lci-blog-eyebrow     { font-size: 12px; font-weight: 600; letter-spacing: .18em;
                        text-transform: uppercase; color: var(--lci-amethyste); }
.lci-blog-h1          { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                        font-size: clamp(36px, 4.6vw, 56px); line-height: 1.1;
                        letter-spacing: -.01em; color: var(--lci-aubergine);
                        margin: 14px 0 0; max-width: 860px; }
.lci-blog-chapo       { font-size: 17.5px; line-height: 1.6; color: var(--lci-text-medium);
                        max-width: 760px; margin: 18px 0 0; text-wrap: pretty; }
                        /* 760px = ~95 caractères. Ne pas supprimer : mesure de lecture. */

/* =====================================================================
   2 · MENU LATÉRAL (Bénéfices / Formats / Mots-clés)
   Volontairement NON sticky : plus haut que l'écran, il masquerait
   les mots-clés une fois épinglé.
   ===================================================================== */

.lci-blog-nav        { display: flex; flex-direction: column; gap: 26px; }
.lci-nav-titre       { font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
                       text-transform: uppercase; color: var(--lci-text-light); margin-bottom: 10px; }
.lci-nav-titre--fort { color: var(--lci-amethyste); }
.lci-nav-liste       { display: flex; flex-direction: column; gap: 2px; }
.lci-nav-filet       { height: 1px; background: rgba(155,125,196,.5); }

.lci-nav-item        { display: block; padding: 12px; border-radius: var(--lci-radius-s);
                       font-size: 14.5px; line-height: 1.35; color: var(--lci-text-medium);
                       background: transparent; transition: var(--lci-transition); }
.lci-nav-item:hover  { background: #fff; color: var(--lci-aubergine); }
.lci-nav-item.is-active { background: var(--lci-amethyste); color: var(--lci-text-on-dark); font-weight: 600; }
.lci-nav-item--sec   { padding: 10px 12px; font-size: 14px; }

.lci-nav-tags        { display: flex; flex-wrap: wrap; gap: 7px; }
.lci-tag             { display: inline-flex; align-items: center; background: #fff;
                       color: var(--lci-text-medium); border: 1px solid rgba(155,125,196,.75);
                       border-radius: 100px; font-size: 13px; padding: 7px 13px;
                       line-height: 1.2; transition: var(--lci-transition); }
.lci-tag:hover       { border-color: var(--lci-amethyste); color: var(--lci-aubergine); }

/* =====================================================================
   3 · TRAITEMENT PHOTO (charte §7), 100 % CSS, aucune retouche
   Toute image du blog passe par .lci-photo-teinte + .lci-photo-vignette.
   ===================================================================== */

.lci-photo-fond {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.95);
  /* en balise image (cartes) : meme cadrage que le fond CSS */
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lci-photo-teinte {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") repeat,
    var(--lci-amethyste);
  background-size: 140px 140px, auto;
  mix-blend-mode: soft-light; opacity: .9;
}
.lci-photo-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(20,12,40,.18) 100%);
}

/* =====================================================================
   4 · CARTE ARTICLE
   Deux états : parue (fond blanc, ombre) / à paraître (carte fantôme).
   Deux plaques : photo de couverture, ou plaque typographique.
   ===================================================================== */

.lci-art-grille      { display: grid; grid-template-columns: repeat(3, 1fr);
                       gap: 18px; align-items: stretch; }

.lci-art-carte       { display: flex; flex-direction: column; height: 100%;
                       border-radius: var(--lci-radius-m); overflow: hidden;
                       border: 1px solid var(--lci-violet-clair); background: #fff;
                       box-shadow: var(--lci-shadow-soft); transition: var(--lci-transition); }
/* Meme survol que les cartes de benefices (.lci-need) : levee, ombre, filet */
.lci-art-carte:hover { border-color: var(--lci-amethyste); transform: translateY(-5px);
                       box-shadow: inset 0 0 0 1px var(--lci-amethyste), 0 12px 28px rgba(26,15,46,0.20); }
.lci-art-carte:hover .lci-art-titre { color: var(--lci-amethyste); }
.lci-art-carte:hover .lci-art-pied { transform: translateX(5px); }


/* Plaque : hauteur FIXE. Ne pas repasser en aspect-ratio, la plaque
   se retrouverait écrasée dans la colonne de contenu réduite. */
.lci-art-plaque      { position: relative; height: var(--lci-blog-plaque); overflow: hidden;
                       display: flex; align-items: flex-end; justify-content: flex-start;
                       background: var(--lci-lavande); }
.lci-art-plaque--photo { background: var(--lci-aubergine); }

/* Plaque typographique : le nom de la rubrique, calé en bas à gauche.
   white-space normal = il passe à la ligne au lieu d'être rogné. */
.lci-art-lettrine    { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                       font-size: 25px; line-height: 1.06; padding: 15px 16px;
                       letter-spacing: -.01em; text-wrap: balance; color: var(--lci-violet-clair); }

.lci-art-corps       { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.lci-art-cat         { color: var(--lci-amethyste); }
.lci-art-meta        { font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
                       text-transform: uppercase; color: var(--lci-text-light); line-height: 1.5; }
.lci-art-titre       { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                       font-size: 23px; line-height: 1.24; color: var(--lci-text-dark);
                       margin: 10px 0 0; text-wrap: pretty; }
.lci-art-chapo       { font-size: 14px; line-height: 1.55; color: var(--lci-text-medium); margin: 10px 0 0; }
.lci-art-pied        { margin-top: auto; padding-top: 16px; font-size: 14.5px;
                       font-weight: 600; color: var(--lci-amethyste);
                       align-self: flex-start; transition: transform var(--lci-transition); }

/* =====================================================================
   5 · RANGÉE PAR CATÉGORIE (index)
   ===================================================================== */

.lci-rangees         { display: flex; flex-direction: column; gap: 64px; min-width: 0; }
.lci-rangee-titre    { display: block; font-family: var(--lci-font-serif); font-style: italic;
                       font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15;
                       color: var(--lci-amethyste); border-top: 1px solid rgba(155,125,196,.5);
                       padding-top: 20px; margin-bottom: 24px; }
.lci-rangee-titre:hover { color: var(--lci-aubergine); }

/* Lien « voir tout » : libellé explicite, cible 54px. Ne pas réduire
   à une simple flèche, public 45-75 ans. */
.lci-btn-contour     { display: inline-flex; align-items: center; gap: 10px;
                       border: 2px solid var(--lci-amethyste); color: var(--lci-amethyste);
                       font-size: var(--lci-button); font-weight: 600; padding: 13px 26px;
                       border-radius: var(--lci-radius-s); transition: var(--lci-transition); }
.lci-btn-contour:hover      { background: var(--lci-amethyste); color: var(--lci-text-on-dark); }
.lci-btn-contour--clair     { border-color: var(--lci-text-on-dark); color: var(--lci-text-on-dark); }
.lci-btn-contour--clair:hover { background: var(--lci-text-on-dark); color: var(--lci-aubergine); }
.lci-rangee-pied     { margin-top: 22px; }

/* =====================================================================
   6 · BOUTONS DU MAGAZINE
   ===================================================================== */

/* Un seul CTA or par section. */
.lci-btn-or          { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
                       margin-top: 26px; background: var(--lci-or); color: var(--lci-text-on-dark);
                       font-size: var(--lci-button); font-weight: 600; padding: 15px 30px;
                       border-radius: var(--lci-radius-s); transition: var(--lci-transition); }
.lci-btn-or:hover    { background: var(--lci-or-hover); }
.lci a.lci-btn-vert, .lci-btn-vert { background: var(--lci-vert); color: var(--lci-text-on-dark);
                       font-size: var(--lci-button); font-weight: 600; padding: 15px 28px;
                       border-radius: var(--lci-radius-s); white-space: nowrap;
                       transition: var(--lci-transition); }
.lci-btn-vert:hover  { background: var(--lci-vert-hover); }

/* =====================================================================
   7 · PAGE CATÉGORIE
   ===================================================================== */

.lci-cat-hero        { background: var(--lci-lavande); padding: 36px var(--lci-gutter) 48px; }
.lci a.lci-cat-retour, .lci-cat-retour { display: inline-flex; align-items: center; gap: 8px;
                       font-size: 14.5px; font-weight: 600; color: var(--lci-amethyste); }
.lci-cat-h1          { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                       font-size: clamp(38px, 5vw, 60px); line-height: 1.08;
                       letter-spacing: -.01em; color: var(--lci-aubergine); margin: 12px 0 0; }
.lci-cat-compte      { font-size: 13.5px; color: var(--lci-text-light); margin-top: 20px; }
.lci-cat-soustitre   { font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
                       text-transform: uppercase; color: var(--lci-amethyste);
                       border-top: 1px solid rgba(155,125,196,.5); padding-top: 20px; }
.lci-cat-soustitre--sec { color: var(--lci-text-light); margin-top: 56px; }

/* Carte vedette : les DEUX pistes sont fluides. Une piste image figée
   ferait tomber le texte à ~20 caractères par ligne. */
.lci-art-carte.vedette      { display: grid;
                              grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
                              margin-top: 18px; }
.lci-vedette-plaque         { position: relative; overflow: hidden; min-height: 240px;
                              background: var(--lci-lavande); height: auto; }
.lci-vedette-corps          { padding: 32px 34px; display: flex; flex-direction: column;
                              justify-content: center; }
.lci-vedette-titre          { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                              font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18;
                              color: var(--lci-text-dark); margin: 12px 0 0; text-wrap: pretty; }
.lci-vedette-chapo          { font-size: 15.5px; line-height: 1.6; color: var(--lci-text-medium);
                              margin: 13px 0 0; max-width: 420px; text-wrap: pretty; }

/* Encart d'abonnement */
.lci-encart-abo      { margin-top: 36px; padding: 26px 30px; background: #fff;
                       border: 1px solid var(--lci-violet-clair); border-radius: var(--lci-radius-m);
                       display: flex; align-items: center; justify-content: space-between;
                       gap: 24px; flex-wrap: wrap; }
.lci-encart-titre    { font-family: var(--lci-font-serif); font-style: italic;
                       font-size: 24px; color: var(--lci-aubergine); line-height: 1.2; }
.lci-encart-sous     { font-size: 14.5px; color: var(--lci-text-medium); margin-top: 6px; }

/* =====================================================================
   8 · TÉMOIGNAGES
   Index : bande aubergine pleine largeur, 3 colonnes.
   Catégorie : bloc aubergine DANS la colonne de contenu, 2 colonnes.
   ===================================================================== */

.lci-temo-bande      { background: var(--lci-aubergine); padding: 88px var(--lci-gutter); margin-top: 64px; }
.lci-temo-bloc       { background: var(--lci-aubergine); border-radius: var(--lci-radius-m);
                       padding: 44px 42px; margin-top: 56px; }
.lci-temo-entete     { border-top: 1px solid rgba(155,125,196,.45); padding-top: 20px; margin-bottom: 30px; }
.lci-temo-h2         { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                       font-size: clamp(28px, 3vw, 40px); line-height: 1.15;
                       color: var(--lci-text-on-dark); margin: 12px 0 0; }
.lci-temo-lede       { font-size: 16px; line-height: 1.6; color: var(--lci-text-on-dark-mute);
                       margin: 8px 0 32px; max-width: 640px; }

.lci-temo-grille     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lci-temo-grille--2  { grid-template-columns: repeat(2, 1fr); }

.lci-temo-carte      { display: flex; flex-direction: column; background: var(--lci-amethyste);
                       border-radius: var(--lci-radius-m); overflow: hidden;
                       border: 1px solid rgba(155,125,196,.4); transition: var(--lci-transition); }
.lci-temo-carte:hover { border-color: var(--lci-violet-clair); transform: translateY(-5px);
                        box-shadow: inset 0 0 0 1px var(--lci-violet-clair), 0 12px 28px rgba(26,15,46,0.30); }
.lci-temo-vignette   { position: relative; aspect-ratio: 16/9; overflow: hidden;
                       background: var(--lci-aubergine); transition: var(--lci-transition); }
.lci-temo-carte:hover .lci-temo-vignette { box-shadow: inset 0 0 0 2px var(--lci-violet-clair); }
.lci-temo-corps      { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.lci-temo-citation   { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                       font-size: 20px; line-height: 1.4; color: var(--lci-text-on-dark);
                       margin: 0; text-wrap: pretty; }
.lci-temo-guillemet  { color: var(--lci-or); }
.lci-temo-pied       { margin-top: auto; padding-top: 20px; }
.lci-temo-filet      { height: 1px; background: rgba(155,125,196,.45); margin-bottom: 13px; }
.lci-temo-qui        { font-size: 12.5px; font-weight: 600; letter-spacing: .09em;
                       text-transform: uppercase; color: var(--lci-text-on-dark-soft); }

/* Le rond de lecture vit dans le CORPS de la carte, pas sur la vignette :
   sur la vignette il recouvrait le contenu dès que la carte rétrécissait. */
.lci-temo-voir       { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
                       font-size: 14px; font-weight: 600; color: var(--lci-text-on-dark); }
.lci-temo-play       { width: 26px; height: 26px; border-radius: 50%;
                       background: rgba(251,247,240,.92); display: inline-flex;
                       align-items: center; justify-content: center; flex: 0 0 auto;
                       transition: var(--lci-transition); }
.lci-temo-play::after { content: ''; width: 0; height: 0; margin-left: 2px;
                        border-left: 8px solid var(--lci-amethyste);
                        border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.lci-temo-carte:hover .lci-temo-play { background: var(--lci-text-on-dark); transform: scale(1.09); }
.lci-temo-voir { transition: transform var(--lci-transition); }
.lci-temo-carte:hover .lci-temo-voir { transform: translateX(5px); }

/* =====================================================================
   9 · RESPONSIVE, reprend les points de rupture existants du site
   ===================================================================== */

@media (max-width: 991px) {
  .lci-blog-grille   { grid-template-columns: 1fr; gap: 36px; }
  .lci-blog-nav      { flex-direction: row; flex-wrap: wrap; gap: 20px 32px; }
  .lci-blog-nav > div { flex: 1 1 240px; }
  .lci-nav-liste     { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .lci-nav-item      { border: 1px solid var(--lci-violet-clair); background: #fff; }
  .lci-nav-filet     { display: none; }
  .lci-art-grille    { grid-template-columns: repeat(2, 1fr); }
  .lci-temo-grille   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .lci-art-carte.vedette { grid-template-columns: 1fr; }
  .lci-vedette-plaque    { min-height: 200px; }
  .lci-temo-bloc         { padding: 32px 24px; }
}

@media (max-width: 600px) {
  .lci-art-grille    { grid-template-columns: 1fr; }
  .lci-temo-grille,
  .lci-temo-grille--2 { grid-template-columns: 1fr; }
  .lci-blog-section  { padding-top: 48px; }
  .lci-temo-bande    { padding: 56px var(--lci-gutter); }
}

/* --- Tableau de bord (pilotage, staff) ------------------------------------------------ */
.lci-tdb{max-width:var(--lci-container-max);margin:0 auto}
.tdb-tete{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.tdb-periodes{display:flex;gap:8px}
.tdb-periodes .chip{background:#fff;border:var(--lci-border);border-radius:999px;
  padding:6px 16px;font:600 var(--lci-body-small) var(--lci-font-sans);
  color:var(--lci-amethyste);text-decoration:none}
.tdb-periodes .chip.actif{background:var(--lci-amethyste);color:var(--lci-text-on-dark);
  border-color:var(--lci-amethyste)}
.tdb-dates{display:flex;align-items:center;gap:8px;font-size:var(--lci-body-small);
  color:var(--lci-text-medium)}
.tdb-dates input{border:var(--lci-border);border-radius:var(--lci-radius-s);
  padding:5px 8px;font:400 var(--lci-body-small) var(--lci-font-sans);background:#fff}
.tdb-dates .chip{background:#fff;border:var(--lci-border);border-radius:999px;
  padding:6px 16px;font:600 var(--lci-body-small) var(--lci-font-sans);
  color:var(--lci-amethyste);cursor:pointer}
.tdb-dates.actif .chip{background:var(--lci-amethyste);color:var(--lci-text-on-dark);
  border-color:var(--lci-amethyste)}
.tdb-note{color:var(--lci-text-light);font-size:var(--lci-body-small);margin:8px 0 var(--lci-space-l)}
.tdb-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:991px){.tdb-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tdb-grille{grid-template-columns:1fr}}
.tdb-carte{background:#fff;border:var(--lci-border);border-left:6px solid var(--lci-violet-clair);
  border-radius:var(--lci-radius-m);padding:18px 20px}
.tdb-carte header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tdb-carte h2{font-family:var(--lci-font-sans);font-style:normal;font-size:14px;
  font-weight:600;color:var(--lci-text-medium);margin:0}
.tdb-carte .pastille{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.tdb-carte.badge-vert{border-left-color:var(--lci-vert)}
.tdb-carte.badge-vert .pastille{background:var(--lci-vert)}
.tdb-carte.badge-orange{border-left-color:var(--lci-or)}
.tdb-carte.badge-orange .pastille{background:var(--lci-or)}
.tdb-carte.badge-rouge{border-left-color:#B3402A}
.tdb-carte.badge-rouge .pastille{background:#B3402A}
.tdb-carte.badge-gris .pastille{background:var(--lci-violet-clair)}
.tdb-carte .valeur{font-family:var(--lci-font-serif);font-style:italic;font-size:34px;
  color:var(--lci-aubergine);margin:8px 0 4px}
.tdb-carte .valeur small{font-size:14px;font-family:var(--lci-font-sans);
  font-style:normal;color:var(--lci-text-light)}
.tdb-carte .fleche{font-size:20px;color:var(--lci-amethyste)}
.tdb-carte .repere{font-size:var(--lci-caption);color:var(--lci-text-light);margin:6px 0 0}
.tdb-carte .leviers{margin-top:10px;border-top:1px dashed var(--lci-violet-clair);padding-top:10px}
.tdb-carte .leviers p{font-size:var(--lci-body-small);color:var(--lci-text-medium);margin:0 0 6px}

/* --- Chrome : navigation ------------------------------------------------------------ */
.lci-nav{background:var(--lci-aubergine);position:sticky;top:0;z-index:40}
.lci-nav-inner{max-width:var(--lci-container-max);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lci-nav .marque{font-family:var(--lci-font-serif);font-style:italic;font-size:1.5rem;
  color:var(--lci-text-on-dark);text-decoration:none}
.lci-nav-liens{display:flex;align-items:center;gap:26px}
.lci-nav-liens a{color:var(--lci-text-on-dark-soft);text-decoration:none;font-size:15px;
  font-weight:500;transition:color var(--lci-transition)}
.lci-nav-liens a:hover{color:var(--lci-text-on-dark)}
/* La section ou l'on est : un cadre creme autour du lien */
.lci-nav-liens a{padding:6px 10px;margin:-6px -10px;border-radius:6px;border:1px solid transparent}
.lci-nav-liens a.is-active{color:var(--lci-text-on-dark);border-color:rgba(251,247,240,.55)}
.lci-nav-liens a.btn{padding:12px 22px;min-height:0;margin:0}
.lci-nav-toggle{display:none}
.lci-nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.lci-nav-burger span{display:block;width:24px;height:2px;background:var(--lci-text-on-dark)}
@media(max-width:900px){
  .lci-nav-burger{display:flex}
  .lci-nav-liens{display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:18px;padding:12px 0 18px}
  .lci-nav-toggle:checked ~ .lci-nav-liens{display:flex}
}

/* --- Chrome : footer ----------------------------------------------------------------- */
/* Aubergine, comme la nav : c'est le fond fonce de la charte. Le
   --lci-text-dark qui servait ici est une couleur de texte, pas un fond.
   Le filet or detache le pied quand la derniere section est aussi
   aubergine (les blocs d'appel a l'action le sont souvent). */
.lci-footer{background:var(--lci-aubergine);color:var(--lci-text-on-dark);
  border-top:2px solid var(--lci-or);
  padding:26px var(--lci-gutter) 22px;font-size:var(--lci-body-small)}
/* Le plan du site : colonnes sur ecran large, accordeon sur telephone
   pour ne pas transformer le bas de page en liste interminable. */
.lci-footer-plan{max-width:var(--lci-container-max);margin:0 auto 22px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px 32px;
  padding-bottom:20px;border-bottom:1px solid rgba(251,247,240,.18)}
.lci-footer-col .titre{margin:0 0 10px;font-weight:600;font-size:var(--lci-caption);
  text-transform:uppercase;letter-spacing:0.07em;color:var(--lci-or)}
.lci-footer-col ul{margin:0;padding:0;list-style:none}
.lci-footer-col li{margin:0 0 6px;line-height:1.4}
.lci-footer-col a{font-size:var(--lci-caption);border-bottom:0;opacity:.85}
.lci-footer-col a:hover{opacity:1;border-bottom:1px solid var(--lci-or)}
@media(max-width:600px){
  .lci-footer-plan{grid-template-columns:1fr;gap:14px}
  .lci-footer-col ul{columns:2;column-gap:20px}
}
.lci-footer-haut{max-width:var(--lci-container-max);margin:0 auto;display:flex;
  align-items:baseline;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.lci-footer .identite{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lci-footer .marque{font-family:var(--lci-font-serif);font-style:italic;font-size:1.25rem}
.lci-footer .devise{opacity:.7;font-size:var(--lci-caption)}
.lci-footer .liens{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap}
.lci-footer a{color:var(--lci-text-on-dark);text-decoration:none;
  border-bottom:1px solid rgba(251,247,240,.35);
  transition:border-color var(--lci-transition)}
.lci-footer a:hover{border-bottom-color:var(--lci-or)}
.lci-footer .copyright{opacity:.55;font-size:var(--lci-caption)}
.lci-footer .mentions{max-width:var(--lci-container-max);margin:14px auto 0;padding-top:12px;
  border-top:1px solid rgba(251,247,240,.18);opacity:.6;font-size:11.5px;line-height:1.5}
@media(max-width:767px){
  .lci-footer-haut{flex-direction:column;align-items:flex-start;gap:12px}
}

/* --- Pages d'erreur (404, 500) -------------------------------------------- */
.lci-404 h1{color:var(--lci-aubergine);font-style:italic;font-size:var(--lci-h2)}
.lci-404 .reprendre{margin-top:var(--lci-space-l);font-weight:600}
.lci-404 .liens{list-style:none;margin:0;padding:0}
.lci-404 .liens li{margin:12px 0;padding-left:1.1em;text-indent:-1.1em}
.lci-404 .liens li::before{content:'\2192';color:var(--lci-or);margin-right:0.4em}
.lci-404 .liens a,.lci-404 .lede a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--lci-violet-clair);text-underline-offset:3px}
.lci-404 .liens a{color:var(--lci-amethyste);font-weight:600}
.lci-404 .lci-callout{margin-top:var(--lci-space-xl)}
.lci-404 .reference{margin:var(--lci-space-l) auto 0;max-width:680px;
  text-align:center;font-size:var(--lci-caption);color:var(--lci-text-light)}

/* Mouvement desactive pour qui le demande (accessibilite) */
@media (prefers-reduced-motion: reduce){
  .lci-need,.lci-method,.lci-need .more,.lci-method .more,.lci-need-num{
    transition-duration:1ms}
  a.lci-need:hover,.lci-method:hover{transform:none}
  a.lci-need:hover .more,.lci-method:hover .more{transform:none}
  a.lci-need:hover .lci-need-num{transform:none}
  .lci-art-carte,.lci-temo-carte,.lci-art-pied,.lci-testimonial,.lci-testimonial-lire{transition-duration:1ms}
  .lci-art-carte:hover,.lci-temo-carte:hover,.lci-art-carte:hover .lci-art-pied,
  .lci-testimonial:hover,.lci-testimonial:hover .lci-testimonial-lire{transform:none}
}

/* Motifs de fond (maquette Claude Design du 17 aout) : filigrane en
   pseudo-element masque, la couleur vient du fond de la section. Le
   lemniscate est unique et centre, la fleur de vie est une trame de
   cercles (rayon 16 a 260 px). Sans mask-image, rien ne s'affiche. */
.lci-section[class*=" motif-"],.lci-hero[class*=" motif-"]{position:relative;isolation:isolate}
[class*=" motif-"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.lci-hero.variante-photo::before{content:none}
.bg-lavande[class*=" motif-"]::before,.bg-transparent[class*=" motif-"]::before{background:var(--lci-amethyste);opacity:.10}
.bg-amethyste[class*=" motif-"]::before{background:var(--lci-violet-clair);opacity:.22}
.bg-aubergine[class*=" motif-"]::before{background:var(--lci-violet-clair);opacity:.17}
[data-block="cta-final"][class*=" motif-"]::before{background:var(--lci-or);opacity:.14}
.motif-lem::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M100,50%20C132,12%20196,14%20196,50%20C196,86%20132,88%20100,50%20C68,12%204,14%204,50%20C4,86%2068,88%20100,50%20Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M100,50%20C132,12%20196,14%20196,50%20C196,86%20132,88%20100,50%20C68,12%204,14%204,50%20C4,86%2068,88%20100,50%20Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-size:122% auto;mask-size:122% auto}
.motif-fdv-xs::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2027.713'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-16'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='16'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='32'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='-8'%20cy='13.856'%20r='16'/%3E%3Ccircle%20cx='8'%20cy='13.856'%20r='16'/%3E%3Ccircle%20cx='24'%20cy='13.856'%20r='16'/%3E%3Ccircle%20cx='-16'%20cy='27.713'%20r='16'/%3E%3Ccircle%20cx='0'%20cy='27.713'%20r='16'/%3E%3Ccircle%20cx='16'%20cy='27.713'%20r='16'/%3E%3Ccircle%20cx='32'%20cy='27.713'%20r='16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2027.713'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-16'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='16'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='32'%20cy='0.000'%20r='16'/%3E%3Ccircle%20cx='-8'%20cy='13.856'%20r='16'/%3E%3Ccircle%20cx='8'%20cy='13.856'%20r='16'/%3E%3Ccircle%20cx='24'%20cy='13.856'%20r='16'/%3E%3Ccircle%20cx='-16'%20cy='27.713'%20r='16'/%3E%3Ccircle%20cx='0'%20cy='27.713'%20r='16'/%3E%3Ccircle%20cx='16'%20cy='27.713'%20r='16'/%3E%3Ccircle%20cx='32'%20cy='27.713'%20r='16'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:16px 27.713px;mask-size:16px 27.713px}
.motif-fdv-s::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2048.497'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-28'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='28'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='56'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='-14'%20cy='24.249'%20r='28'/%3E%3Ccircle%20cx='14'%20cy='24.249'%20r='28'/%3E%3Ccircle%20cx='42'%20cy='24.249'%20r='28'/%3E%3Ccircle%20cx='-28'%20cy='48.497'%20r='28'/%3E%3Ccircle%20cx='0'%20cy='48.497'%20r='28'/%3E%3Ccircle%20cx='28'%20cy='48.497'%20r='28'/%3E%3Ccircle%20cx='56'%20cy='48.497'%20r='28'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2048.497'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-28'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='28'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='56'%20cy='0.000'%20r='28'/%3E%3Ccircle%20cx='-14'%20cy='24.249'%20r='28'/%3E%3Ccircle%20cx='14'%20cy='24.249'%20r='28'/%3E%3Ccircle%20cx='42'%20cy='24.249'%20r='28'/%3E%3Ccircle%20cx='-28'%20cy='48.497'%20r='28'/%3E%3Ccircle%20cx='0'%20cy='48.497'%20r='28'/%3E%3Ccircle%20cx='28'%20cy='48.497'%20r='28'/%3E%3Ccircle%20cx='56'%20cy='48.497'%20r='28'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:28px 48.497px;mask-size:28px 48.497px}
.motif-fdv-m::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2083.138'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-48'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='48'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='96'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='-24'%20cy='41.569'%20r='48'/%3E%3Ccircle%20cx='24'%20cy='41.569'%20r='48'/%3E%3Ccircle%20cx='72'%20cy='41.569'%20r='48'/%3E%3Ccircle%20cx='-48'%20cy='83.138'%20r='48'/%3E%3Ccircle%20cx='0'%20cy='83.138'%20r='48'/%3E%3Ccircle%20cx='48'%20cy='83.138'%20r='48'/%3E%3Ccircle%20cx='96'%20cy='83.138'%20r='48'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2083.138'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-48'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='48'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='96'%20cy='0.000'%20r='48'/%3E%3Ccircle%20cx='-24'%20cy='41.569'%20r='48'/%3E%3Ccircle%20cx='24'%20cy='41.569'%20r='48'/%3E%3Ccircle%20cx='72'%20cy='41.569'%20r='48'/%3E%3Ccircle%20cx='-48'%20cy='83.138'%20r='48'/%3E%3Ccircle%20cx='0'%20cy='83.138'%20r='48'/%3E%3Ccircle%20cx='48'%20cy='83.138'%20r='48'/%3E%3Ccircle%20cx='96'%20cy='83.138'%20r='48'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:48px 83.138px;mask-size:48px 83.138px}
.motif-fdv-l::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2084%20145.492'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-84'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='84'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='168'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='-42'%20cy='72.746'%20r='84'/%3E%3Ccircle%20cx='42'%20cy='72.746'%20r='84'/%3E%3Ccircle%20cx='126'%20cy='72.746'%20r='84'/%3E%3Ccircle%20cx='-84'%20cy='145.492'%20r='84'/%3E%3Ccircle%20cx='0'%20cy='145.492'%20r='84'/%3E%3Ccircle%20cx='84'%20cy='145.492'%20r='84'/%3E%3Ccircle%20cx='168'%20cy='145.492'%20r='84'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2084%20145.492'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-84'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='84'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='168'%20cy='0.000'%20r='84'/%3E%3Ccircle%20cx='-42'%20cy='72.746'%20r='84'/%3E%3Ccircle%20cx='42'%20cy='72.746'%20r='84'/%3E%3Ccircle%20cx='126'%20cy='72.746'%20r='84'/%3E%3Ccircle%20cx='-84'%20cy='145.492'%20r='84'/%3E%3Ccircle%20cx='0'%20cy='145.492'%20r='84'/%3E%3Ccircle%20cx='84'%20cy='145.492'%20r='84'/%3E%3Ccircle%20cx='168'%20cy='145.492'%20r='84'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:84px 145.492px;mask-size:84px 145.492px}
.motif-fdv-xl::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20259.808'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-150'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='150'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='300'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='-75'%20cy='129.904'%20r='150'/%3E%3Ccircle%20cx='75'%20cy='129.904'%20r='150'/%3E%3Ccircle%20cx='225'%20cy='129.904'%20r='150'/%3E%3Ccircle%20cx='-150'%20cy='259.808'%20r='150'/%3E%3Ccircle%20cx='0'%20cy='259.808'%20r='150'/%3E%3Ccircle%20cx='150'%20cy='259.808'%20r='150'/%3E%3Ccircle%20cx='300'%20cy='259.808'%20r='150'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20259.808'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-150'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='150'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='300'%20cy='0.000'%20r='150'/%3E%3Ccircle%20cx='-75'%20cy='129.904'%20r='150'/%3E%3Ccircle%20cx='75'%20cy='129.904'%20r='150'/%3E%3Ccircle%20cx='225'%20cy='129.904'%20r='150'/%3E%3Ccircle%20cx='-150'%20cy='259.808'%20r='150'/%3E%3Ccircle%20cx='0'%20cy='259.808'%20r='150'/%3E%3Ccircle%20cx='150'%20cy='259.808'%20r='150'/%3E%3Ccircle%20cx='300'%20cy='259.808'%20r='150'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:150px 259.808px;mask-size:150px 259.808px}
.motif-fdv-xxl::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20260%20450.333'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-260'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='260'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='520'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='-130'%20cy='225.167'%20r='260'/%3E%3Ccircle%20cx='130'%20cy='225.167'%20r='260'/%3E%3Ccircle%20cx='390'%20cy='225.167'%20r='260'/%3E%3Ccircle%20cx='-260'%20cy='450.333'%20r='260'/%3E%3Ccircle%20cx='0'%20cy='450.333'%20r='260'/%3E%3Ccircle%20cx='260'%20cy='450.333'%20r='260'/%3E%3Ccircle%20cx='520'%20cy='450.333'%20r='260'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20260%20450.333'%20fill='none'%20stroke='%23000'%20stroke-width='.6'%3E%3Ccircle%20cx='-260'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='0'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='260'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='520'%20cy='0.000'%20r='260'/%3E%3Ccircle%20cx='-130'%20cy='225.167'%20r='260'/%3E%3Ccircle%20cx='130'%20cy='225.167'%20r='260'/%3E%3Ccircle%20cx='390'%20cy='225.167'%20r='260'/%3E%3Ccircle%20cx='-260'%20cy='450.333'%20r='260'/%3E%3Ccircle%20cx='0'%20cy='450.333'%20r='260'/%3E%3Ccircle%20cx='260'%20cy='450.333'%20r='260'/%3E%3Ccircle%20cx='520'%20cy='450.333'%20r='260'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:260px 450.333px;mask-size:260px 450.333px}

/* Fil du magazine : un seul flux chronologique, filtre par le menu */
.lci-fil               { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.lci-fil-entete        { display: flex; align-items: baseline; justify-content: space-between;
                         gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(92,61,143,.22);
                         padding-top: 18px; }
.lci-fil-compte        { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
                         color: var(--lci-violet-clair); }
.lci-fil-pages         { display: flex; align-items: center; justify-content: center; gap: 20px;
                         flex-wrap: wrap; }
a.lci-nav-tout         { display: inline-block; padding: 11px 16px; border-radius: var(--lci-radius-s);
                         background: #fff; border: 1.5px solid var(--lci-amethyste);
                         color: var(--lci-amethyste); font-size: 14px; font-weight: 600;
                         text-decoration: none; transition: background .2s ease, color .2s ease; }
a.lci-nav-tout:hover   { background: var(--lci-amethyste); color: var(--lci-text-on-dark); }
#lci-zone:focus         { outline: none; }
#lci-zone[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
/* En-tete des recits sur fond clair (hub filtre) : le .lci-temo-h2 est
   ecrit pour le bloc aubergine, il disparait sur la lavande. */
.lci-fil-titre         { font-family: var(--lci-font-serif); font-style: italic; font-weight: 400;
                         font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--lci-aubergine);
                         margin: 6px 0 0; }
.lci-fil-lede          { font-size: 16px; line-height: 1.6; color: var(--lci-text-light);
                         margin: 8px 0 0; max-width: 60ch; }
/* Menu des ressources : compte par entree, croix sur l'entree active */
.lci-nav-item          { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lci-nav-n             { font-size: 12px; font-weight: 500; color: var(--lci-violet-clair);
                         font-variant-numeric: tabular-nums; }
.lci-nav-item:hover .lci-nav-n { color: var(--lci-amethyste); }
.lci-nav-x             { font-size: 16px; line-height: 1; opacity: .8; }
.lci-cat-format        { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: .04em;
                         color: var(--lci-amethyste); }
a.lci-nav-tout         { align-self: flex-start; }
@media (max-width: 991px) {
  /* Le menu passe en rangee : le bouton prend sa ligne, sans s'etirer */
  a.lci-nav-tout       { flex-basis: 100%; text-align: center; }
  .lci-nav-item        { display: inline-flex; }
}
/* Bouton « Tous les … » a droite du titre du groupe quand il filtre :
   la croix sur l'entree active ne parle pas a tout le monde. Un vrai
   petit bouton, pas un mot de plus dans le titre. */
.lci-nav-titre         { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lci-nav-titre a.lci-nav-enlever {
                         display: inline-flex; align-items: center; gap: 5px;
                         padding: 4px 10px; border-radius: 999px;
                         border: 1px solid var(--lci-violet-clair); background: #fff;
                         font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
                         color: var(--lci-amethyste); text-decoration: none; white-space: nowrap;
                         transition: background .2s ease, color .2s ease; }
.lci-nav-titre a.lci-nav-enlever:hover { background: var(--lci-amethyste); color: var(--lci-text-on-dark);
                         border-color: var(--lci-amethyste); }
.lci-nav-titre a.lci-nav-enlever::before { content: "\00d7"; font-size: 14px; line-height: 1; }
a.lci-nav-tout         { align-self: flex-start; }
@media (max-width: 991px) {
  /* Le menu passe en rangee : le bouton prend sa ligne, sans s'etirer */
  a.lci-nav-tout       { flex-basis: 100%; text-align: center; }
  .lci-nav-item        { display: inline-flex; }
}

/* Convention : dans une liste à puces d'un bloc « Texte éditorial », un
   lien se rend en pastille « Lire l'article ». Un intitulé souligné ne dit
   pas à tout le monde qu'il y a une page derrière ; une pastille avec sa
   flèche, si. Elle marque aussi, d'un coup d'œil, quelles notions de la
   liste ont leur page dédiée et lesquelles n'en ont pas encore.
   Portee au bloc Texte editorial seulement (data-block="texte") : sans ce
   garde-fou, la regle habillait en pastille TOUT lien situe dans une puce,
   y compris la liste de rebond de la page 404, dont les liens se retrouvaient
   encercles, flechees et pousses a la ligne. */
[data-block="texte"] .lci-prose li a { display: inline-flex; align-items: center; gap: 6px;
                         margin: 10px 0 2px; padding: 4px 14px 5px;
                         border: 1px solid var(--sur-bordure);
                         border-radius: 999px; background: var(--sur-carte);
                         color: var(--sur-lien); text-decoration: none;
                         font-size: .82em; font-weight: 600; white-space: nowrap;
                         transition: background .2s ease, color .2s ease,
                                     border-color .2s ease; }
[data-block="texte"] .lci-prose li a::after { content: "\2192"; transition: transform .2s ease; }
/* Chaque pastille sur sa propre ligne : suivies en fin de phrase, elles
   tombaient a une position differente d'une puce a l'autre, et la liste
   paraissait en desordre. Alignees a gauche, elles forment une colonne. */
[data-block="texte"] .lci-prose li > a:last-child { display: flex; width: fit-content; }
[data-block="texte"] .lci-prose li a:hover { background: var(--sur-lien);
                         border-color: var(--sur-lien);
                         /* Le fond du survol vaut --sur-lien : le texte prend
                            le fond de la section, pas une couleur en dur, sinon
                            l'aubergine se pose sur l'amethyste (contraste 1,45). */
                         color: var(--lci-lavande); }
[data-block="texte"] .lci-prose li a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
  [data-block="texte"] .lci-prose li a,[data-block="texte"] .lci-prose li a::after{transition-duration:1ms}
  [data-block="texte"] .lci-prose li a:hover::after{transform:none}
}
/* Certification au pied de page : presente sur toutes les pages, y compris
   les articles ou arrive un visiteur venu de Google. */
.lci-footer .credit    { font-size: var(--lci-caption); font-weight: 600;
                         color: var(--lci-or); letter-spacing: .01em; }

/* =====================================================================
   PORTES D'ENTRÉE (bloc « entrees ») : la fleur de vie se compose à
   mesure que l'engagement grandit. Un cercle pour le questionnaire, la
   fleur entière pour le parcours complet. La géométrie raconte la
   progression, aucun mot ne l'explique.
   ===================================================================== */
.lci-entrees-note      { max-width: var(--lci-container-max); margin: 0 auto 14px;
                         font-style: italic; font-size: 14px; color: var(--lci-text-light); }
/* Les entrees sont groupees en etages cote serveur (EntreesBlock.get_context),
   ce qui permet de poser une fleche entre deux etages. Chaque etage est une
   grille de 6 colonnes : une entree y occupe 6, 3 ou 2 selon sa largeur. */
.lci-entrees           { max-width: var(--lci-container-max); margin: 0 auto;
                         display: flex; flex-direction: column; }
.lci-entrees-ligne     { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
                         gap: 20px; align-items: stretch; }
/* Une flèche par entrée de l'étage qui suit, alignée sur elle : trois
   entrées en bas, trois flèches au-dessus. */
.lci-entrees-fleches   { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
                         gap: 20px; }
.lci-fleche            { display: flex; justify-content: center;
                         color: var(--lci-violet-clair); }
.lci-fleche.accent-vert{ color: var(--lci-vert); }
.lci-fleche.accent-or  { color: var(--lci-or); }
.lci-fleche svg        { display: block; }
.lci-fleche path       { fill: none; stroke: currentColor; stroke-width: 4.2;
                         stroke-linecap: round; stroke-linejoin: round; }
/* Largeur d'un bloc ou d'une flèche, en colonnes de la grille de six */
.span-2                { grid-column: span 2; }
.span-3                { grid-column: span 3; }
.span-4                { grid-column: span 4; }
.span-6                { grid-column: span 6; }

/* Un groupe encadre plusieurs entrées sous un même nom : les dix séances et
   l'accompagnement forment le parcours, face aux séances à l'unité. */
.lci-entrees-groupe    { position: relative; display: grid; gap: 20px;
                         padding: 34px 18px 18px; border: 1px solid rgba(155,125,196,.5);
                         border-radius: var(--lci-radius-l); background: rgba(155,125,196,.07); }
.lci-entrees-groupe.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lci-entrees-groupe.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lci-entrees-groupe-titre { position: absolute; top: 12px; left: 20px;
                         display: flex; align-items: center; gap: 10px;
                         font-size: 11px; font-weight: 600; letter-spacing: .15em;
                         text-transform: uppercase; color: var(--lci-amethyste); }
/* Un groupe facultatif porte lui-meme le pointille : les entrees qu'il
   contient gardent la bordure ordinaire, comme l'appel telephonique. */
.lci-entrees-groupe.facultatif { border: 2px dashed rgba(46, 125, 82, .45);
                         background: transparent; padding-top: 40px; }
.lci-entrees-groupe.facultatif .lci-entrees-groupe-titre { color: var(--lci-vert); }

/* Flèche horizontale entre les blocs d'un étage qui se lit de gauche à
   droite. Elle est portée par le bloc d'arrivée et non par celui de départ :
   elle prend ainsi sa couleur sans un mot de plus, or devant
   l'accompagnement. Même épaisseur de trait que les flèches verticales. */
.lci-entrees-ligne.enchainee > .lci-entree,
.lci-entrees-ligne.enchainee > .lci-entrees-groupe,
.lci-entrees-ligne.enchainee .lci-entrees-groupe .lci-entree { position: relative; }
.lci-entrees-ligne.enchainee > .lci-entree:not(:first-child)::before,
.lci-entrees-ligne.enchainee > .lci-entrees-groupe:not(:first-child)::before,
.lci-entrees-ligne.enchainee .lci-entrees-groupe .lci-entree ~ .lci-entree::before {
                         content: ""; position: absolute; left: -20px; top: 50%;
                         width: 20px; height: 20px; transform: translateY(-50%);
                         background: var(--lci-violet-clair);
                         -webkit-mask: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h15M12%205.5l6.5%206.5-6.5%206.5'/%3E%3C/svg%3E");
                         mask: no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h15M12%205.5l6.5%206.5-6.5%206.5'/%3E%3C/svg%3E"); }
.lci-entrees-ligne.enchainee > .lci-entree.accent-or::before,
.lci-entrees-ligne.enchainee .lci-entrees-groupe .lci-entree ~ .lci-entree.accent-or::before {
                         background: var(--lci-or); }
.lci-entrees-ligne.enchainee > .lci-entree.accent-vert::before,
.lci-entrees-ligne.enchainee .lci-entrees-groupe .lci-entree ~ .lci-entree.accent-vert::before {
                         background: var(--lci-vert); }
.lci-entree            { grid-column: span 6;
                         display: grid; grid-template-columns: 72px 1fr auto;
                         gap: clamp(18px, 3vw, 40px); align-items: center;
                         padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px);
                         background: #fff; border: 1px solid rgba(155,125,196,.5);
                         border-radius: var(--lci-radius-m); text-decoration: none;
                         transition: var(--lci-transition); }
a.lci-entree:hover     { border-color: var(--lci-amethyste);
                         box-shadow: var(--lci-shadow-card); transform: translateX(4px); }
.lci-entree.accent-vert{ background: rgba(46,125,82,.055); border-color: rgba(46,125,82,.26); }
a.lci-entree.accent-vert:hover { border-color: var(--lci-vert); }
.lci-entree.accent-or  { background: rgba(200,135,58,.045); border-color: rgba(200,135,58,.55); }
a.lci-entree.accent-or:hover   { border-color: var(--lci-or); }

/* La pastille : 37 cercles en réserve, rangés du centre vers l'extérieur.
   Seuls ceux du niveau sont dessinés, les autres n'existent pas : sinon
   toutes les pastilles se ressembleraient, chacune montrant déjà la fleur
   entière en pâle. La figure grandit donc vraiment d'un niveau à l'autre :
   un cercle, une paire, un trio, un début d'étoile, la graine de vie (7),
   la fleur de vie (19), puis la couronne suivante (37). */
.lci-entree-eng        { width: 72px; height: 72px; display: block; color: var(--lci-amethyste); }
.lci-entree-eng svg    { width: 100%; height: 100%; display: block; overflow: visible; }
.lci-entree-eng circle,
.lci-fleur circle       { display: none; fill: none; stroke: currentColor; stroke-width: .16;
                         transition: stroke .3s ease-out, opacity .3s ease-out; }
.eng-1 circle:nth-child(-n+1),
.eng-2 circle:nth-child(-n+2),
.eng-3 circle:nth-child(-n+3),
.eng-4 circle:nth-child(-n+4),
.eng-5 circle:nth-child(-n+5),
.eng-6 circle:nth-child(-n+19),
.eng-7 circle          { display: block; }

/* Ce qui reste à accomplir, en grisé. À partir de la première séance, la
   fleur de vie se devine autour des cercles acquis : on voit où mène le
   parcours. Au niveau 6 la fleur est complète, et c'est la couronne
   suivante qui s'annonce, celle de l'accompagnement. Les trois premières
   entrées n'ont pas de halo : elles n'engagent à rien, elles n'ont donc
   rien à annoncer. */
.eng-4 circle:nth-child(n+5):nth-child(-n+19),
.eng-5 circle:nth-child(n+6):nth-child(-n+19),
.eng-6 circle:nth-child(n+20) { display: block; stroke: var(--lci-violet-clair);
                         opacity: .22; }
.accent-or .lci-entree-eng   { color: var(--lci-or); }
.accent-vert .lci-entree-eng { color: var(--lci-vert); }

.lci-entree-corps      { min-width: 0; display: block; }
.lci-entree-sur        { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                         font-size: 11px; font-weight: 600; letter-spacing: .15em;
                         text-transform: uppercase; color: var(--lci-amethyste);
                         margin-bottom: 7px; }
.lci-entree-badge      { padding: 3px 9px; border: 1px solid rgba(155,125,196,.55);
                         border-radius: 999px; letter-spacing: .1em;
                         color: var(--lci-text-light); font-size: 10px; }
.lci-entree-titre      { display: block; font-family: var(--lci-font-serif); font-style: italic;
                         font-weight: 400; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.18;
                         color: var(--lci-aubergine); margin-bottom: 8px; }
.lci-entree-texte      { display: block; font-size: 15px; line-height: 1.58;
                         color: var(--lci-text-medium); max-width: 54ch; }
.lci-entree-droite     { display: flex; flex-direction: column; align-items: flex-end;
                         gap: 6px; text-align: right; }
/* La mention n'est verte que sur une entree gratuite : au-dessus d'un prix,
   le vert laisserait croire que c'est offert. */
.lci-entree-mention    { font-size: 11px; font-weight: 600; letter-spacing: .14em;
                         text-transform: uppercase; color: var(--lci-text-light); }
.accent-vert .lci-entree-mention { color: var(--lci-vert); }
.lci-entree-prix       { font-family: var(--lci-font-serif); font-style: italic;
                         font-size: 20px; color: var(--lci-amethyste); white-space: nowrap; }
.lci-entree-cta        { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
                         padding: 11px 20px; background: var(--lci-vert);
                         color: var(--lci-text-on-dark); border-radius: var(--lci-radius-s);
                         font-size: 13px; font-weight: 600; white-space: nowrap;
                         transition: var(--lci-transition); }
a.lci-entree:hover .lci-entree-cta { background: var(--lci-vert-hover); }
.accent-or .lci-entree-cta   { background: var(--lci-or); }
.accent-or a.lci-entree:hover .lci-entree-cta,
a.lci-entree.accent-or:hover .lci-entree-cta { background: var(--lci-or-hover); }

@media (max-width: 760px) {
  .lci-entree          { grid-template-columns: 72px 1fr; gap: 16px; }
  .lci-entree-droite   { grid-column: 1 / -1; align-items: flex-start; text-align: left;
                         margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .lci-entree,.lci-entree-eng circle{transition-duration:1ms}
  a.lci-entree:hover{transform:none}
}

/* Entrees compactes : la colonne de droite passe sous le texte */
.lci-entree.t-demi     { grid-column: span 3; }
.lci-entree.t-tiers    { grid-column: span 2; }
.lci-entree.t-demi,
.lci-entree.t-tiers    { grid-template-columns: 72px minmax(0, 1fr);
                         align-content: start; padding: 22px; }
.t-demi .lci-entree-droite,
.t-tiers .lci-entree-droite { grid-column: 2; align-items: flex-start;
                         text-align: left; margin-top: 12px; }
/* Titre et texte identiques quelle que soit la largeur de l'entree : une
   entree etroite ne doit pas avoir l'air d'une offre au rabais. */
/* Facultatif : le pointille dit qu'on peut sauter l'etape. Trait epaissi et
   tirets allonges, sinon la difference avec un trait plein ne se voit pas. */
.lci-entree.facultatif { border: 2px dashed rgba(92, 61, 143, .45); }
a.lci-entree.facultatif:hover { border-color: var(--lci-amethyste); }
.lci-entree.facultatif.accent-vert { border-color: rgba(46, 125, 82, .5); }
a.lci-entree.facultatif.accent-vert:hover { border-color: var(--lci-vert); }

@media (max-width: 900px) {
  .lci-entree.t-tiers  { grid-column: span 3; }
  .lci-fleche.t-tiers  { grid-column: span 3; }
  .lci-entrees-ligne.enchainee > .lci-entree::before,
  .lci-entrees-ligne.enchainee > .lci-entrees-groupe::before,
  .lci-entrees-ligne.enchainee .lci-entrees-groupe .lci-entree ~ .lci-entree::before { content: none; }
  .lci-entrees-groupe.cols-2,
  .lci-entrees-groupe.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lci-entree,
  .lci-entree.t-demi,
  .lci-entree.t-tiers  { grid-column: span 6; }
  /* Accueil v3 (5 septembre) : sur un telephone, chaque marche est une
     rangee. La pastille de 72 px prenait un tiers de la largeur ; a 48 px
     elle reste lisible (1, 3, 19, 37 cercles) et le texte retrouve 7 a 8
     mots par ligne. Le bouton prend toute la largeur, 44 px de haut, la
     cible tactile minimale. Le garde-fou sur le groupe evite qu'un groupe
     recree la grille etroite si l'admin en remet un. */
  .lci-entree          { grid-template-columns: 48px 1fr; gap: 14px; }
  .lci-entree-eng      { width: 48px; height: 48px; }
  .lci-entree-texte    { font-size: 16px; }
  .lci-entree-cta      { width: 100%; justify-content: center; min-height: 44px; }
  .lci-entrees-groupe  { grid-column: span 6; }
}

/* Dans un groupe, la largeur de l'entree ne s'applique plus : c'est la
   grille du groupe qui range ses entrees. */
.lci-entrees-ligne .lci-entrees-groupe .lci-entree { grid-column: auto; }

/* Une entrée mise en avant : celle que la plupart des gens choisissent. Le
   badge passe en aplat et la carte prend une bordure franche, sans changer
   de couleur d'accent : c'est une indication, pas une offre différente. */
.lci-entree.en-avant   { border-color: var(--lci-amethyste); border-width: 1.5px;
                         box-shadow: var(--lci-shadow-card); }
.lci-entree.en-avant .lci-entree-badge {
                         background: var(--lci-amethyste); border-color: var(--lci-amethyste);
                         color: var(--lci-text-on-dark); }
/* Lien d'une étape : même pastille que dans une liste à puces, pour que le
   visiteur reconnaisse le signal d'un article qui attend derrière. */
.lci-process-lien      { margin: 12px 0 0; }
.lci-process-lien a    { display: inline-flex; align-items: center; gap: 6px;
                         padding: 3px 12px 4px; border: 1px solid currentColor;
                         border-radius: 999px; text-decoration: none;
                         font-size: .82em; font-weight: 600; white-space: nowrap;
                         opacity: .85; transition: opacity .2s ease; }
.lci-process-lien a::after { content: "\2192"; }
.lci-process-lien a:hover { opacity: 1; }

/* Étapes en cartes : le repère passe en grand, le nom de la phase en
   petites capitales dessous, et un cadre rattache le texte à son titre.
   À utiliser quand le titre est ce que le lecteur cherche (« Séances 1 à
   3 »), là où les colonnes numérotées conviennent à un déroulé (l'appel,
   la séance, après). */
.lci-process.variante-cartes { gap: 20px; }
.variante-cartes .lci-process-step {
                         background: var(--sur-carte);
                         border: 1px solid var(--sur-bordure);
                         border-radius: var(--lci-radius-m);
                         padding: clamp(22px, 2.4vw, 30px); }
.variante-cartes .lci-process-step + .lci-process-step::before {
                         left: -20px; top: 50%; transform: translateY(-50%); }
.variante-cartes .lci-process-step h3 {
                         display: block; font-family: var(--lci-font-serif);
                         font-style: italic; font-weight: 300;
                         font-size: clamp(26px, 2.9vw, 36px); line-height: 1.05;
                         color: var(--sur-accent); margin: 0 0 6px; }
.variante-cartes .lci-process-phase {
                         font-size: 11px; font-weight: 600; letter-spacing: .16em;
                         text-transform: uppercase; color: var(--sur-titre);
                         margin: 0 0 12px !important; }
.variante-cartes .lci-process-step p { font-size: var(--lci-body-small); }

/* Liste verticale numerotee : un deroule de plus de trois temps, ou chaque
   etape porte un vrai paragraphe. */
.lci-process.variante-liste { grid-template-columns: 1fr; gap: 0;
  max-width: 760px; margin-left: auto; margin-right: auto; }
.variante-liste .lci-process-step + .lci-process-step::before { content: none; }
.variante-liste .lci-process-step { padding: 28px 0;
  border-top: 1px solid var(--sur-bordure); }
.variante-liste .lci-process-step:first-child { border-top: 0; padding-top: 0; }
.variante-liste .lci-process-step h3 { align-items: flex-start; margin-bottom: 10px; }
.variante-liste .lci-process-num { margin-top: 2px; }
.variante-liste .lci-process-step p { font-size: var(--lci-body); }

/* Parcours : la forme la plus compacte du bloc etapes. Sur bureau, l'intro,
   le tarif et le bouton tiennent une colonne de 35 %, la frise des etapes
   occupe les 65 % restants. La frise est la meme partout, bureau compris :
   un filet fin, des pastilles numerotees, aucune carte. Elle ne coute rien
   en hauteur, la colonne de gauche etant la plus haute des deux. */
.lci-parcours { display: grid; grid-template-columns: 35fr 65fr;
  gap: var(--lci-space-xl); max-width: var(--lci-container-max);
  margin-left: auto; margin-right: auto; align-items: start; }
.lci-parcours-intro h2 { margin: 0 0 var(--lci-space-s); }
.lci-parcours-chapo { color: var(--sur-texte); margin: 0 0 var(--lci-space-m); }
.lci-parcours-pied { margin: 0 0 var(--lci-space-m); }
.lci-parcours-pied p { color: var(--sur-texte); font-size: var(--lci-body-small);
  margin: 0 0 8px; }
.lci-parcours-pied p:last-child { margin-bottom: 0; }

.lci-parcours-etapes { list-style: none; margin: 0; padding: 0 0 0 38px;
  /* 600 px : la plus longue des cinq lignes en demande 522, plus les 38 du
     retrait de la frise. En dessous, elle se coupait en deux. */
  position: relative; max-width: 600px; }
.lci-parcours-etapes::before { content: ""; position: absolute;
  left: 13px; top: 8px; bottom: 8px; width: 1px;
  background: var(--sur-bordure); }
.lci-parcours-etapes li { position: relative; margin: 0 0 24px; padding: 0; }
.lci-parcours-etapes li:last-child { margin-bottom: 0; }
.lci-parcours-num { position: absolute; left: -38px; top: -1px;
  width: 28px; height: 28px; border: 1px solid var(--sur-accent);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-family: var(--lci-font-serif);
  font-weight: 600; font-size: 15px; color: var(--sur-accent);
  background: var(--lci-lavande); }
.bg-amethyste .lci-parcours-num { background: var(--lci-amethyste); }
.bg-aubergine .lci-parcours-num { background: var(--lci-aubergine); }
.lci-parcours-etapes h3 { font-size: 21px; margin: 0 0 4px;
  color: var(--sur-titre); }
.lci-parcours-etapes p { font-size: 16px; color: var(--sur-texte); margin: 0;
  line-height: var(--lci-lh-reading); }

@media (max-width: 900px) {
  .lci-parcours { grid-template-columns: 1fr; gap: var(--lci-space-l); }
  .lci-parcours-etapes li { margin-bottom: 22px; }
  .lci-parcours-etapes h3 { font-size: 19px; }
  /* Le tarif et la duree se lisent : ce n'est pas de la petite mention. */
  .lci-parcours-pied p { font-size: 16px; }
}
@media (max-width: 900px) {
  .lci-process.variante-cartes { gap: 16px; }
}

/* La même pastille, réutilisée en tête d'une étape de parcours. Ici pas de
   halo grisé au niveau 6 : à la fin des dix séances la fleur est complète,
   et rien n'a besoin de s'annoncer au-delà. */
.lci-fleur             { display: block; width: 56px; height: 56px; margin-bottom: 14px;
                         color: var(--sur-accent); }
.lci-fleur svg         { width: 100%; height: 100%; display: block; overflow: visible; }
.lci-fleur.eng-6 circle:nth-child(n+20) { display: none; }

/* Texte sous les étapes d'un parcours : ce qui se passe après, sur le même
   fond sombre que les cartes. */
.lci-process-apres     { max-width: 760px; margin: var(--lci-space-l) auto 0;
                         color: var(--sur-texte);
                         font-size: var(--lci-body-small); line-height: 1.7; }
.lci-process-apres h3  { font-family: var(--lci-font-serif); font-style: italic;
                         font-weight: 400; font-size: clamp(22px, 2.2vw, 27px);
                         color: var(--sur-titre); margin: 0 0 12px; }
.lci-process-apres p   { margin: 0 0 14px; }
.lci-process-apres ul  { margin: 0; padding-left: 1.1em; }
.lci-process-apres li  { margin-bottom: 8px; }
.lci-process-apres li::marker { color: var(--sur-accent); }

/* Pictogramme d'un paragraphe : une note de rythme ou de durée se repère
   avant d'être lue. Suit l'alignement du texte. */
.lci-p-icone           { display: block; width: 26px; height: 26px; margin-bottom: 10px;
                         color: var(--sur-accent); }
.al-centre .lci-p-icone { margin-left: auto; margin-right: auto; }
.al-droite .lci-p-icone { margin-left: auto; }
.lci-p-icone svg       { width: 100%; height: 100%; display: block; fill: none;
                         stroke: currentColor; stroke-width: 1.6;
                         stroke-linecap: round; stroke-linejoin: round; }

/* Note de bas de section d'un parcours : une précision de rythme, sous le
   texte, centrée et discrète. */
.lci-process-note      { max-width: 640px; margin: var(--lci-space-m) auto 0;
                         text-align: center; font-size: var(--lci-caption);
                         line-height: 1.7; color: var(--sur-doux); }
.lci-process-note .lci-p-icone { margin: 0 auto 8px; }

/* --- Impression (27 octobre 2026) ----------------------------------------
   Ecrite pour le guide des dix seances, qui se garde sur papier, mais
   valable partout : le chrome et les appels a l'action sortent, les aplats
   violets deviennent du blanc et le texte du noir. L'encre n'est pas la
   charte, et un lecteur qui imprime veut lire, pas cliquer. */
@media print {
  .lci-nav, .lci-footer, .btn, .lci-hero-actions, .lci-vmodal,
  [data-block="bandeau-cta"], [data-block="cta-final"],
  [data-block="newsletter"], [data-block="carte-appel"],
  a[href$="#imprimer"] { display: none !important; }
  .lci, .lci-section, .lci-hero, .bg-lavande, .bg-amethyste, .bg-aubergine,
  .bg-transparent { background: #fff !important; color: #000 !important; }
  .lci-section::before, .lci-hero::before { display: none !important; }
  .lci h1, .lci h2, .lci h3, .lci p, .lci li, .lci .lci-eyebrow,
  .lci .sous-titre { color: #000 !important; }
  .lci-section, .lci-hero { padding: 0 0 1.2cm !important; }
  .lci-hero h1 { font-size: 26pt; }
  .lci-prose { max-width: none; font-size: 11.5pt; line-height: 1.5; }
  .lci-prose h2 { page-break-after: avoid; margin-top: 1.1cm; }
  .lci-prose p { orphans: 3; widows: 3; }
  a { text-decoration: none; }
  @page { margin: 2cm; }
}