/*
Theme Name: Webmagena 2026
Theme URI: https://webmagena.fr
Author: Lucie — Webmagena
Description: Thème de Webmagena, gamme pastel sur fond clair (rose poudré, lavande, menthe, abricot). Page d'accueil de présentation, blog, pages intérieures, encart d'auteure collant et styles des pages de prospection produites par SEOBOSS. Le portrait se remplace dans Personnaliser, ou en écrasant assets/lucie.jpg.
Version: 5.12.0
Requires at least: 6.0
Tested up to: 6.8
License: Propriétaire — usage privé
Text Domain: webmagena
*/

/* ===========================================================================
   WEBMAGENA — page d'accueil
   Gamme pastel sur fond très clair : rose poudré, lavande, menthe, abricot.
   On retrouve les partis pris du premier jet — dégradés sur les titres et les
   boutons, lueurs d'ambiance, angles ronds, contrastes marqués — mais en
   demi-teintes, et sur du clair.
   =========================================================================== */
:root{
  /* Gamme pastel sur fond très clair. Les accents restent des demi-teintes,
     pas des pastels pâles : il faut qu'un dégradé de titre reste lisible. */
  --fond:#FAF6FA;
  --carte:#FFFFFF;
  --carte-creuse:#F3EDF5;

  --rose:#D2718E;
  --rose-fonce:#C25E80;
  --lavande:#8E7BD1;
  --lavande-fonce:#7A66C4;
  --menthe:#57BDB6;
  --abricot:#EDA46A;

  --texte:#3B3348;
  /* Plus aucun gris : le texte secondaire est une lavande profonde, et les
     filets sont teintés du même violet plutôt que d'être neutres. */
  --attenue:#6B5C96;
  --trait:rgba(142,123,209,.26);
  --trait-fort:rgba(142,123,209,.42);

  --voile:rgba(142,123,209,.05);
  --voile-fort:rgba(142,123,209,.11);
  --entete:rgba(250,246,250,.86);
  --sur-accent:#FFFFFF;

  /* Les deux dégradés de la maison : le doux pour le texte, le soutenu pour
     les boutons — un dégradé pastel derrière du blanc ne se lit pas. */
  --degrade:linear-gradient(96deg,var(--rose),var(--lavande) 60%,var(--menthe));
  --degrade-plein:linear-gradient(96deg,var(--rose-fonce),var(--lavande-fonce));

  --display:'Bricolage Grotesque',Georgia,serif;
  --corps:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --large:min(1180px,92vw);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:var(--corps); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* Lueurs d'ambiance : trois taches de couleur, très diffuses, fixes. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -10%, rgba(210,113,142,.22), transparent 62%),
    radial-gradient(50vw 50vw at 92% 8%, rgba(142,123,209,.20), transparent 62%),
    radial-gradient(55vw 55vw at 50% 108%, rgba(87,189,182,.16), transparent 62%);
}
.wm-page{position:relative; z-index:1}

:focus-visible{outline:2px solid var(--rose); outline-offset:3px; border-radius:4px}

/* --------------------------------------------------------------- en-tête -- */
.wm-entete{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px); background:var(--entete);
  border-bottom:1px solid var(--trait-fort);
}
.wm-entete__interieur{
  width:var(--large); margin:0 auto; padding:16px 0;
  display:flex; align-items:center; gap:28px;
}
.wm-logo{
  font-family:var(--display); font-weight:800; font-size:22px;
  letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
}
.wm-logo em{
  font-style:normal;
  background:var(--degrade);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-nav{margin-left:auto; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.wm-nav a{
  text-decoration:none; font-size:15px; font-weight:500; color:var(--attenue);
  padding:6px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
.wm-nav a:hover{color:var(--texte); border-bottom-color:var(--rose)}
.wm-nav .wm-nav--ia{color:var(--texte)}
.wm-nav .wm-nav--preuve{color:var(--texte)}
.wm-nav .wm-nav--preuve::before{
  content:''; display:inline-block; width:7px; height:7px; margin-right:8px;
  border-radius:50%; background:var(--menthe); vertical-align:middle;
  box-shadow:0 0 0 4px rgba(87,189,182,.18);
}
.wm-nav .wm-nav--ia::before{
  content:''; display:inline-block; width:7px; height:7px; margin-right:8px;
  border-radius:50%; background:var(--abricot); vertical-align:middle;
  box-shadow:0 0 0 4px rgba(237,164,106,.16);
}
.wm-entete__tel{
  font-family:var(--mono); font-size:14px; color:var(--texte);
  text-decoration:none; padding:9px 16px; border-radius:999px;
  border:1px solid var(--trait); background:var(--voile);
  transition:border-color .2s,background .2s;
}
.wm-entete__tel:hover{border-color:var(--rose); background:rgba(210,113,142,.10)}

/* ------------------------------------------------------------------ héros -- */
.wm-heros{width:var(--large); margin:0 auto; padding:88px 0 72px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.wm-chapeau{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--attenue); margin:0 0 22px; display:flex; align-items:center; gap:12px;
}
.wm-chapeau::before{
  content:''; width:36px; height:2px; border-radius:2px;
  background:var(--degrade);
}
.wm-titre{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(38px,5.4vw,66px); margin:0 0 24px;
}
.wm-titre span{
  background:var(--degrade);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-chapo{font-size:19px; color:var(--attenue); max-width:34em; margin:0 0 34px}
.wm-actions{display:flex; gap:14px; flex-wrap:wrap}
.wm-bouton{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  padding:15px 26px; border-radius:999px; font-weight:600; font-size:16px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .2s;
}
.wm-bouton--plein{
  color:var(--sur-accent); background:var(--degrade-plein);
  box-shadow:0 12px 28px -14px rgba(194,94,128,.55);
}
.wm-bouton--plein:hover{transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(194,94,128,.65)}
.wm-bouton--vide{border:1px solid var(--trait); color:var(--texte); background:var(--voile)}
.wm-bouton--vide:hover{border-color:var(--menthe); transform:translateY(-2px)}

/* ---- Signature : la requête et ce qu'elle donne -------------------------- */
.wm-serp{
  background:linear-gradient(180deg,var(--carte),var(--carte-creuse));
  border:1px solid var(--trait); border-radius:22px; padding:22px;
  box-shadow:0 18px 40px -28px rgba(59,51,72,.28);
}
.wm-serp__barre{
  display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:14px;
  background:var(--voile); border:1px solid var(--trait); margin-bottom:18px;
}
.wm-serp__loupe{width:15px; height:15px; flex:0 0 auto; opacity:.65}
.wm-serp__barre{min-width:0; overflow:hidden}
.wm-serp__saisie{
  font-family:var(--mono); font-size:14.5px; color:var(--texte);
  white-space:nowrap; overflow:hidden;
  /* Sans min-width:0, un élément flexible refuse de descendre sous la
     largeur de son contenu : la requête, en nowrap, sortait de la carte
     et emportait toute la page avec elle sur téléphone. */
  min-width:0; flex:1 1 auto;
}
.wm-serp__curseur{
  display:inline-block; width:8px; margin-left:1px;
  border-bottom:2px solid var(--rose); animation:wm-clignote 1s steps(1) infinite;
}
@keyframes wm-clignote{50%{opacity:0}}

.wm-serp__liste{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.wm-ligne{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:13px 15px; border-radius:14px;
  background:var(--voile); border:1px solid transparent;
  transition:transform .55s cubic-bezier(.22,1,.36,1), background .4s, border-color .4s;
}
.wm-ligne__rang{
  font-family:var(--mono); font-size:12px; color:var(--attenue);
  text-align:right; transition:color .4s;
}
.wm-ligne__nom{font-size:15px; color:var(--attenue); transition:color .4s;
  min-width:0; overflow-wrap:anywhere}
.wm-ligne__barre{width:74px; height:5px; border-radius:3px; background:var(--voile-fort); overflow:hidden}
.wm-ligne__barre i{display:block; height:100%; width:22%; border-radius:3px;
  background:var(--menthe); transition:width .8s cubic-bezier(.22,1,.36,1), background .5s}
.wm-ligne--vous{border-color:rgba(210,113,142,.38); background:rgba(210,113,142,.09)}
.wm-ligne--vous .wm-ligne__nom{color:var(--texte); font-weight:600}
.wm-ligne--vous .wm-ligne__rang{color:var(--rose)}
.wm-ligne--vous .wm-ligne__barre i{background:linear-gradient(90deg,var(--rose),var(--lavande))}
.wm-serp.est-classe .wm-ligne--vous{transform:translateY(calc(-100% - 9px))}
.wm-serp.est-classe .wm-ligne--pousse{transform:translateY(calc(100% + 9px))}
.wm-serp.est-classe .wm-ligne--vous .wm-ligne__barre i{width:96%}

.wm-serp__ia{
  margin-top:18px; padding:16px; border-radius:14px;
  border:1px dashed rgba(237,164,106,.45); background:rgba(237,164,106,.07);
  opacity:0; transform:translateY(8px); transition:opacity .6s .5s, transform .6s .5s;
}
.wm-serp.est-classe .wm-serp__ia{opacity:1; transform:none}
.wm-serp__ia strong{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--abricot); margin-bottom:7px; font-weight:500;
}
.wm-serp__ia p{margin:0; font-size:14.5px; color:var(--attenue)}
.wm-serp__ia a{color:var(--texte); text-decoration-color:rgba(237,164,106,.65); text-underline-offset:3px}

/* ------------------------------------------------------------ présentation -- */
.wm-section{width:var(--large); margin:0 auto; padding:84px 0}
.wm-section__titre{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin:0 0 18px;
}
.wm-section__intro{color:var(--attenue); font-size:18px; max-width:60ch; margin:0 0 46px}

/* Le paragraphe « mon propre outil » : c'est l'argument qui n'appartient
   qu'à elle, donc il est mis en avant — mais sans carte ni ombre, pour ne
   pas concurrencer les trois cartes qui suivent. */
.wm-phare{
  position:relative; max-width:62ch; margin:0 0 26px; padding:20px 0 20px 26px;
  font-size:19px; line-height:1.55; color:var(--texte);
}
/* Le filet dégradé est un pseudo-élément et non un border-image : même
   rendu, mais aucune surprise de largeur ni de coin. */
.wm-phare::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:3px; background:var(--degrade);
}
.wm-phare strong{font-weight:700}
.wm-phare em{
  font-style:normal; font-weight:600;
  background:var(--degrade);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.wm-moi{display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start}
.wm-portrait{position:relative}
.wm-portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px;
  border:1px solid var(--trait);
}
.wm-portrait::after{
  content:''; position:absolute; inset:auto -14px -14px auto; width:120px; height:120px;
  border-radius:18px; z-index:-1; filter:blur(28px); opacity:.65;
  background:var(--degrade);
}
.wm-portrait__vide{
  display:none; aspect-ratio:4/5; border-radius:18px; border:1px dashed var(--trait);
  background:var(--carte-creuse);
  place-items:center; text-align:center; padding:26px;
}
.wm-portrait.sans-photo img{display:none}
.wm-portrait.sans-photo .wm-portrait__vide{display:grid}
.wm-portrait__vide span{font-family:var(--mono); font-size:12.5px; color:var(--attenue); line-height:1.7}
.wm-portrait__legende{
  margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--attenue);
}

.wm-moi__texte p{margin:0 0 20px; font-size:18px}
.wm-moi__texte p:first-child{font-size:22px; color:var(--texte)}
.wm-moi__texte strong{color:var(--texte); font-weight:600}
.wm-depuis{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; padding:0; list-style:none;
}
.wm-depuis li{
  font-family:var(--mono); font-size:12.5px; color:var(--attenue);
  padding:8px 14px; border-radius:999px; border:1px solid var(--trait);
  background:var(--voile);
}
.wm-depuis li::before{content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:9px; vertical-align:middle; background:var(--menthe)}
.wm-depuis li:nth-child(2)::before{background:var(--rose)}
.wm-depuis li:nth-child(3)::before{background:var(--lavande)}

/* --------------------------------------------------------------- métiers --- */
.wm-cartes{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.wm-carte{
  position:relative; padding:30px 26px 28px; border-radius:18px;
  background:var(--carte);
  border:1px solid var(--trait); overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.wm-carte::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--rose);
}
.wm-carte:nth-child(2)::before{background:var(--menthe)}
.wm-carte:nth-child(3)::before{background:var(--lavande)}
.wm-carte:hover{transform:translateY(-4px); border-color:var(--trait-fort)}
.wm-carte h3{font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; margin:0 0 12px}
.wm-carte p{margin:0; color:var(--attenue); font-size:16px}

/* --------------------------------------------------------------- citation -- */
.wm-credo{
  width:var(--large); margin:0 auto; padding:64px 0 84px;
}
.wm-credo blockquote{
  margin:0; padding:48px 52px; border-radius:22px;
  background:linear-gradient(135deg,rgba(210,113,142,.14),rgba(142,123,209,.12) 55%,rgba(87,189,182,.12));
  border:1px solid var(--trait);
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(23px,2.9vw,34px); line-height:1.25;
}
.wm-credo cite{
  display:block; margin-top:22px; font-family:var(--mono); font-style:normal;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--attenue);
}

/* ---------------------------------------------------------------- contact -- */
.wm-contact{
  width:var(--large); margin:0 auto 96px; padding:56px 52px; border-radius:22px;
  background:linear-gradient(180deg,var(--carte),var(--carte-creuse));
  border:1px solid var(--trait);
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
}
.wm-contact h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(26px,3vw,36px); margin:0 0 12px; line-height:1.1}
.wm-contact p{margin:0; color:var(--attenue); max-width:46ch}

/* ------------------------------------------------------------------ pied --- */
.wm-pied{border-top:1px solid var(--trait); padding:30px 0}
.wm-pied__interieur{
  width:var(--large); margin:0 auto; display:flex; gap:20px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  font-size:14px; color:var(--attenue);
}
.wm-pied a{text-decoration:none}
.wm-pied a:hover{color:var(--texte)}

/* ------------------------------------------------------------ apparitions -- */
.wm-js .wm-monte{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.wm-js .wm-monte.est-vu{opacity:1; transform:none}

/* ------------------------------------------------------------ responsive --- */
@media (max-width:960px){
  .wm-heros{grid-template-columns:1fr; gap:44px; padding:60px 0 48px}
  .wm-moi{grid-template-columns:1fr; gap:34px}
  .wm-portrait{max-width:320px}
  .wm-cartes{grid-template-columns:1fr}
  .wm-contact{grid-template-columns:1fr; padding:40px 30px}
  .wm-credo blockquote{padding:34px 28px}
  .wm-entete__tel{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .wm-nav{gap:16px}
  .wm-nav a{font-size:14px}
  .wm-section{padding:60px 0}
}

/* ===========================================================================
   TÉLÉPHONE — largeurs stables
   Sous 700 px, on abandonne le dimensionnement fluide (clamp, vw) pour des
   valeurs fixes : c'est moins malin, mais rien ne peut plus déborder de
   l'écran. Trois causes de débordement sont traitées ici :
     1. les gouttières en vw, qui varient avec la barre de défilement ;
     2. les pistes de grille et les éléments flexibles, qui refusent par
        défaut de se rétrécir sous la largeur de leur contenu (min-width:auto) ;
     3. la lueur décorative du portrait, qui débordait de 14 px + son flou.
   =========================================================================== */
@media (max-width:700px){
  /* 1. Gouttières fixes plutôt qu'un pourcentage de la fenêtre. */
  :root{--large:calc(100% - 36px)}

  /* 2. Tout ce qui est grille ou boîte flexible peut rétrécir. */
  .wm-heros > *, .wm-moi > *, .wm-cartes > *, .wm-contact > *,
  .wm-serp > *, .wm-entete__interieur > *, .wm-pied__interieur > *{min-width:0}
  .wm-entete__interieur{flex-wrap:wrap; gap:10px 20px}
  .wm-nav{margin-left:0; width:100%}
  .wm-serp{padding:16px}
  .wm-serp__saisie{font-size:12px}
  .wm-ligne{grid-template-columns:20px minmax(0,1fr) auto; gap:10px; padding:11px 12px}
  .wm-ligne__barre{width:52px}
  .wm-ligne__nom{font-size:13.5px}
  .wm-serp__ia p{font-size:13.5px}

  /* 3. La lueur du portrait sortait du cadre : on la retire ici. */
  .wm-portrait::after{display:none}
  .wm-portrait{max-width:none}

  /* Tailles fixes : plus aucun clamp ni vw sur cette page. */
  .wm-titre{font-size:33px; letter-spacing:-.025em}
  .wm-chapo{font-size:17px; margin-bottom:26px}
  .wm-section__titre{font-size:27px}
  .wm-section__intro{font-size:17px; margin-bottom:34px}
  .wm-phare{font-size:17px; padding:16px 0 16px 18px; margin-bottom:22px}
  .wm-moi__texte p{font-size:17px}
  .wm-moi__texte p:first-child{font-size:19px}
  .wm-credo{padding:40px 0 56px}
  .wm-credo blockquote{font-size:20px; padding:26px 22px; line-height:1.35}
  .wm-contact{padding:30px 22px; margin-bottom:64px}
  .wm-contact h2{font-size:24px}
  .wm-carte{padding:24px 20px}
  .wm-carte h3{font-size:19px}

  /* Les boutons prennent toute la largeur : deux boutons côte à côte, à
     cette largeur, se coupent toujours mal. */
  .wm-actions{flex-direction:column; align-items:stretch; gap:10px}
  .wm-bouton{width:100%; justify-content:center; padding:14px 20px}

  /* Le mot le plus long d'un titre ne peut plus élargir la page. */
  .wm-titre, .wm-section__titre, .wm-contact h2, .wm-carte h3,
  .wm-page-tete h1{overflow-wrap:break-word}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .wm-js .wm-monte{opacity:1; transform:none}
}

/* ===========================================================================
   PAGES INTÉRIEURES, BLOG, ARTICLE
   Le même vocabulaire que la page d'accueil : encre, dégradés de marque,
   Bricolage Grotesque pour les titres.
   =========================================================================== */
.wm-entete__interieur{padding-left:0;padding-right:0}

.wm-page-tete{width:var(--large);margin:0 auto;padding:72px 0 34px;border-bottom:1px solid var(--trait)}
.wm-page-tete h1{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(32px,4.6vw,54px);margin:0 0 14px}
.wm-page-tete p{color:var(--attenue);font-size:18px;margin:0;max-width:60ch}

.wm-contenu{width:var(--large);margin:0 auto;padding:48px 0 80px;max-width:min(760px,92vw)}
.wm-contenu h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:29px;margin:44px 0 14px}
.wm-contenu h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:22px;margin:32px 0 12px}
.wm-contenu p{margin:0 0 20px}
.wm-contenu a{color:var(--texte);text-decoration-color:var(--rose);text-underline-offset:3px}
.wm-contenu a:hover{color:var(--rose)}
.wm-contenu ul,.wm-contenu ol{color:var(--attenue);padding-left:22px;margin:0 0 20px}
.wm-contenu li{margin-bottom:9px}
.wm-contenu img{border-radius:14px;margin:26px 0}
.wm-contenu blockquote{margin:26px 0;padding:20px 26px;border-left:3px solid var(--rose);
  background:var(--voile);border-radius:0 18px 18px 0;color:var(--texte)}
.wm-contenu blockquote p:last-child{margin:0}
.wm-contenu code{font-family:var(--mono);font-size:14px;background:var(--voile-fort);
  padding:2px 6px;border-radius:5px}
.wm-contenu pre{background:var(--carte);border:1px solid var(--trait);border-radius:14px;
  padding:20px;overflow:auto;font-family:var(--mono);font-size:14px}
.wm-contenu table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15.5px}
.wm-contenu th,.wm-contenu td{padding:11px 13px;border-bottom:1px solid var(--trait);text-align:left}
.wm-contenu th{color:var(--texte);font-weight:600}
.wm-contenu td{color:var(--attenue)}

.wm-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--attenue);margin:0 0 10px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.wm-meta span{display:flex;align-items:center;gap:8px}
.wm-meta span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--menthe)}

.wm-liste{width:var(--large);margin:0 auto;padding:48px 0 80px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.wm-vignette{position:relative;display:flex;flex-direction:column;padding:28px 26px;border-radius:18px;
  background:var(--carte);
  border:1px solid var(--trait);overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.wm-vignette::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rose)}
.wm-vignette:nth-child(3n+2)::before{background:var(--menthe)}
.wm-vignette:nth-child(3n+3)::before{background:var(--lavande)}
.wm-vignette:hover{transform:translateY(-4px);border-color:var(--trait-fort)}
.wm-vignette h2{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.wm-vignette h2 a{text-decoration:none}
.wm-vignette h2 a:hover{color:var(--rose)}
.wm-vignette p{color:var(--attenue);font-size:15.5px;margin:0}
.wm-vignette__lire{margin-top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rose);text-decoration:none}

.wm-pagination{width:var(--large);margin:0 auto 80px;display:flex;gap:10px;flex-wrap:wrap}
.wm-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--trait);
  text-decoration:none;font-size:15px;color:var(--attenue)}
.wm-pagination .page-numbers:hover{color:var(--texte);border-color:var(--rose)}
.wm-pagination .page-numbers.current{color:var(--sur-accent);border-color:transparent;font-weight:700;
  background:var(--rose)}

.wm-vide{width:var(--large);margin:0 auto;padding:80px 0 120px;text-align:center}
.wm-vide h1{font-family:var(--display);font-size:clamp(40px,7vw,84px);font-weight:800;
  letter-spacing:-.04em;margin:0 0 16px}
.wm-vide h1 span{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm-vide p{color:var(--attenue);font-size:18px;margin:0 0 30px}

.wm-nav-articles{width:var(--large);margin:0 auto 80px;display:flex;gap:16px;justify-content:space-between;
  flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--trait)}
.wm-nav-articles a{font-size:15.5px;text-decoration:none;color:var(--attenue);max-width:44%}
.wm-nav-articles a:hover{color:var(--texte)}
.wm-nav-articles small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rose);margin-bottom:6px}

/* Menu déroulant sur petit écran : la navigation passe sous le logo. */
@media (max-width:860px){
  .wm-entete__interieur{flex-wrap:wrap;gap:12px 20px}
  .wm-nav{margin-left:0;order:3;width:100%;overflow-x:auto;padding-bottom:4px}
  .wm-entete__tel{margin-left:auto;display:inline-block}
}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap}
.wm-saut{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--rose);
  color:var(--sur-accent);font-weight:700;border-radius:0 0 12px 0}
.wm-saut:focus{left:0}


/* ===========================================================================
   DEUX COLONNES : article + encart de présentation collant
   =========================================================================== */
.wm-colonnes{width:var(--large);margin:0 auto;padding:48px 0 80px;
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.wm-colonnes .wm-contenu{width:auto;max-width:none;margin:0;padding:0}
.wm-colonnes__cote{align-self:start}

/* La colonne défile normalement avec la page, puis s'arrête juste avant de
   sortir de l'écran par le haut. Aucune barre de défilement interne. */
@media (min-width:961px){
  .wm-colonnes__cote{position:sticky; bottom:24px}
}

@media (max-width:960px){
  .wm-colonnes{grid-template-columns:1fr;gap:44px;padding-bottom:60px}
  .wm-colonnes__cote{max-width:420px}
}

/* ===========================================================================
   ENCART DE PRÉSENTATION (barre latérale des articles)
   Repris du bloc autonome, pour ne plus avoir à coller de CSS dans un widget.
   =========================================================================== */
.wmc{--wmc-fond:var(--fond);--wmc-rose:var(--rose);--wmc-lavande:var(--lavande);
  --wmc-menthe:var(--menthe);--wmc-abricot:var(--abricot);
  --wmc-texte:var(--texte);--wmc-attenue:var(--attenue);--wmc-trait:var(--trait);
  background:linear-gradient(180deg,var(--carte),var(--carte-creuse));
  border:1px solid var(--wmc-trait);border-radius:22px;padding:26px 24px 24px;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--wmc-texte);line-height:1.6;font-size:15.5px;
  box-shadow:0 14px 32px -26px rgba(59,51,72,.24)}
.wmc *{box-sizing:border-box}
.wmc__photo{position:relative;width:96px;margin:0 0 18px}
.wmc__photo img{width:96px;height:120px;object-fit:cover;border-radius:14px;
  border:1px solid var(--wmc-trait);display:block}
.wmc__photo::after{content:'';position:absolute;inset:auto -8px -8px auto;width:56px;height:56px;
  border-radius:14px;z-index:-1;filter:blur(20px);opacity:.6;
  background:var(--degrade)}
.wmc__oeil{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wmc-attenue);
  margin:0 0 8px;display:flex;align-items:center;gap:10px}
.wmc__oeil::before{content:'';width:24px;height:2px;border-radius:2px;
  background:var(--degrade)}
.wmc__nom{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.wmc__nom span{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmc p{margin:0 0 14px;color:var(--wmc-attenue)}
.wmc__reperes{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:7px}
.wmc__reperes li{font-size:12px;color:var(--wmc-attenue);padding:5px 11px;border-radius:999px;
  border:1px solid var(--wmc-trait);background:var(--voile)}
.wmc__reperes li::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:var(--wmc-menthe)}
.wmc__reperes li:nth-child(2)::before{background:var(--wmc-rose)}
.wmc__reperes li:nth-child(3)::before{background:var(--wmc-lavande)}
.wmc__cta{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:15px;
  color:var(--sur-accent);background:var(--degrade-plein);
  padding:13px 18px;border-radius:999px;transition:transform .18s ease}
.wmc__cta:hover{color:var(--sur-accent);transform:translateY(-2px)}
.wmc__note{display:block;margin-top:12px;font-size:12.5px;color:var(--wmc-attenue);text-align:center}
.wmc__note a{color:var(--wmc-texte)}
@media (max-width:900px){.wmc{position:static}}
@media (prefers-reduced-motion:reduce){.wmc__cta{transition:none}}

/* ===========================================================================
   MODÈLE DE PAGE « référencement métier + ville »
   Les pages produites par SEOBOSS n'ont plus besoin d'embarquer leur style :
   il vit ici une fois pour toutes. Sur un site CLIENT, qui n'a pas ce thème,
   gardez la version du modèle qui contient son <style>.
   =========================================================================== */
.wmp{--wmp-fond:var(--fond);--wmp-carte:var(--carte);--wmp-rose:var(--rose);--wmp-lavande:var(--lavande);--wmp-menthe:var(--menthe);--wmp-abricot:var(--abricot);--wmp-texte:var(--texte);--wmp-attenue:var(--attenue);--wmp-trait:var(--trait);
  background:var(--wmp-carte);color:var(--wmp-texte);border-radius:22px;padding:clamp(26px,5vw,60px);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.65;font-size:17px}
.wmp *{box-sizing:border-box}
.wmp h2,.wmp h3{color:var(--wmp-texte);letter-spacing:-.02em;line-height:1.15;margin:0 0 14px}
.wmp h2{font-size:clamp(25px,3.4vw,38px);font-weight:800}
.wmp h3{font-size:20px;font-weight:700}
.wmp p{margin:0 0 18px}
.wmp__oeil{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wmp-attenue);margin:0 0 16px;display:flex;align-items:center;gap:12px}
.wmp__titre span{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmp__oeil::before{content:'';width:34px;height:2px;border-radius:2px;background:var(--degrade)}
.wmp__chapo{font-size:19px;color:var(--wmp-attenue);max-width:40em}
.wmp__cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px;color:var(--sur-accent);background:var(--degrade-plein);padding:15px 28px;border-radius:999px;box-shadow:0 12px 30px -14px rgba(210,113,142,.75)}
.wmp__cta:hover{color:var(--sur-accent);transform:translateY(-2px)}
.wmp__sec{margin:46px 0 0;padding-top:38px;border-top:1px solid var(--wmp-trait)}
.wmp__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px}
.wmp__carte{position:relative;padding:24px 22px;border-radius:18px;background:var(--voile);border:1px solid var(--wmp-trait);overflow:hidden}
.wmp__carte::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--wmp-rose)}
.wmp__carte:nth-child(2)::before{background:var(--wmp-menthe)}
.wmp__carte:nth-child(3)::before{background:var(--wmp-lavande)}
.wmp__carte:nth-child(4)::before{background:var(--wmp-abricot)}
.wmp__carte p{margin:0;color:var(--wmp-attenue);font-size:15.5px}
.wmp__carte h3{margin-bottom:9px}
.wmp__moi{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;margin-top:24px}
.wmp__moi img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:1px solid var(--wmp-trait)}
.wmp__moi p:first-of-type{font-size:19px;color:var(--wmp-texte)}
.wmp__etapes{counter-reset:etape;list-style:none;padding:0;margin:24px 0 0}
.wmp__etapes li{position:relative;counter-increment:etape;padding:0 0 0 62px;margin-bottom:26px}
.wmp__etapes li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:18px;color:var(--sur-accent);background:var(--degrade-plein)}
.wmp__etapes strong{display:block;color:var(--wmp-texte);font-size:18px;margin-bottom:5px}
.wmp__etapes span{color:var(--wmp-attenue)}
.wmp__liste{list-style:none;padding:0;margin:0}
.wmp__liste li{position:relative;padding:0 0 0 30px;margin-bottom:14px;color:var(--wmp-attenue)}
.wmp__liste li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--wmp-menthe)}
.wmp__liste strong{color:var(--wmp-texte)}
.wmp__franchise{margin-top:24px;padding:26px 28px;border-radius:18px;border:1px dashed rgba(237,164,106,.45);background:rgba(237,164,106,.07)}
.wmp__franchise h3{color:var(--wmp-abricot)}
.wmp__franchise ul{margin:0;padding-left:20px;color:var(--wmp-attenue)}
.wmp__franchise li{margin-bottom:10px}
.wmp details{border:1px solid var(--wmp-trait);border-radius:14px;padding:16px 20px;margin-bottom:12px;background:var(--voile)}
.wmp summary{cursor:pointer;font-weight:600;color:var(--wmp-texte);list-style:none}
.wmp summary::-webkit-details-marker{display:none}
.wmp summary::after{content:'+';float:right;color:var(--wmp-rose);font-weight:800}
.wmp details[open] summary::after{content:'–'}
.wmp details p{margin:14px 0 0;color:var(--wmp-attenue)}
.wmp__final{margin-top:46px;padding:34px;border-radius:18px;border:1px solid var(--wmp-trait);background:linear-gradient(135deg,rgba(210,113,142,.14),rgba(142,123,209,.12) 55%,rgba(87,189,182,.12))}
.wmp__final h2{margin-bottom:10px}
.wmp__signature{margin-top:22px;font-size:14.5px;color:var(--wmp-attenue)}
.wmp a{color:var(--wmp-texte)}
@media (max-width:640px){.wmp{font-size:16px;border-radius:18px}.wmp__moi{grid-template-columns:1fr}.wmp__moi img{max-width:220px}}

/* ===========================================================================
   PAGE RÉSULTATS
   Mise en forme du contenu « Résultats : deux sites passés à l'index »,
   collé dans l'éditeur classique. Le contenu n'embarque aucun style.
   =========================================================================== */
.wmr{color:var(--texte);font-size:17px;line-height:1.65}
.wmr *{box-sizing:border-box}
.wmr h2,.wmr h3{letter-spacing:-.02em;line-height:1.15;margin:0 0 14px;font-family:var(--display)}
.wmr__oeil{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--attenue);margin:0 0 16px;display:flex;align-items:center;gap:12px}
.wmr__oeil::before{content:'';width:34px;height:2px;border-radius:2px;background:var(--degrade)}
.wmr__titre{font-size:clamp(26px,3.6vw,40px);font-weight:800;margin-bottom:18px}
.wmr__titre span{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmr__chapo{font-size:19px;color:var(--attenue);max-width:44em;margin:0 0 12px}

.wmr__cas{margin:44px 0 0;padding:30px 28px;border-radius:22px;
  background:var(--carte);border:1px solid var(--trait)}
.wmr__entete{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--trait)}
.wmr__entete h3{font-size:23px;font-weight:700;margin:0}
.wmr__meta{font-family:var(--mono);font-size:12.5px;color:var(--attenue);margin:0}

.wmr__figure{margin:0 0 22px}
.wmr__figure img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--trait)}
.wmr__figure figcaption{font-family:var(--mono);font-size:12px;color:var(--attenue);margin-top:10px}

.wmr__chiffres{list-style:none;padding:0;margin:0 0 20px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.wmr__chiffres li{padding:18px;border-radius:18px;background:var(--voile);border:1px solid var(--trait)}
.wmr__chiffres b{display:block;font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em;
  background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmr__chiffres small{display:block;color:var(--attenue);font-size:13px;margin-top:6px;line-height:1.45}
.wmr__cas p{margin:0 0 16px;color:var(--attenue)}
.wmr__cas p:last-child{margin-bottom:0}

.wmr__franchise{margin-top:44px;padding:28px 30px;border-radius:22px;
  border:1px dashed rgba(237,164,106,.55);background:rgba(237,164,106,.10)}
.wmr__franchise h3{font-size:21px;font-weight:700}
.wmr__franchise p{color:var(--attenue);margin:0 0 14px}
.wmr__franchise ul{margin:0;padding-left:20px;color:var(--attenue)}
.wmr__franchise li{margin-bottom:12px}
.wmr__franchise strong{color:var(--texte)}

.wmr__final{margin-top:44px;padding:34px;border-radius:22px;border:1px solid var(--trait);
  background:linear-gradient(135deg,rgba(210,113,142,.14),rgba(142,123,209,.12) 55%,rgba(87,189,182,.12))}
.wmr__final h3{font-size:24px;font-weight:800}
.wmr__final p{color:var(--attenue);margin:0 0 18px}
.wmr__cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;
  font-size:17px;color:var(--sur-accent);background:var(--degrade-plein);padding:15px 28px;
  border-radius:999px;box-shadow:0 12px 28px -14px rgba(194,94,128,.55)}
.wmr__cta:hover{color:var(--sur-accent);transform:translateY(-2px)}

@media (max-width:640px){
  .wmr{font-size:16px}
  .wmr__cas,.wmr__franchise,.wmr__final{padding:22px 20px;border-radius:16px}
}


/* ===========================================================================
   ANCIENNE PAGE D'ACCUEIL — devenue « Problèmes d'indexation IA ? »
   Reprise de l'ancien thème Webmagena, entièrement confinée au conteneur
   .wmi et accordée à la gamme pastel : la page garde sa structure et ses
   animations, mais plus une seule de ses couleurs sombres d'origine.
   =========================================================================== */
.wmi .ac-cyan{--accent:var(--menthe);--grad:linear-gradient(135deg,var(--menthe),var(--lavande))}
.wmi .ac-violet{--accent:var(--lavande);--grad:linear-gradient(135deg,var(--lavande),var(--rose))}
.wmi .ac-orange{--accent:var(--abricot);--grad:linear-gradient(135deg,var(--abricot),var(--rose))}
.wmi .ac-pink{--accent:var(--rose);--grad:linear-gradient(135deg,var(--rose),var(--lavande))}
.wmi .ac-green{--accent:var(--menthe);--grad:linear-gradient(135deg,var(--menthe),var(--abricot))}
.wmi .ac-amber{--accent:var(--abricot);--grad:linear-gradient(135deg,var(--abricot),var(--rose))}
.wmi *{box-sizing:border-box;margin:0;padding:0}
.wmi a{color:inherit}
.wmi .wrap{max-width:var(--large);margin:0 auto;padding:0 28px}
.wmi .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
.wmi .eyebrow::before{content:"";width:24px;height:2px;border-radius:9px;background:var(--grad);display:inline-block}
.wmi h1, .wmi h2, .wmi h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.022em}
.wmi h2{font-size:clamp(28px,4vw,46px);margin-bottom:18px}
.wmi p.lead{font-size:clamp(18px,2.1vw,21px);color:var(--attenue);max-width:60ch}
.wmi .gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmi .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:1px solid var(--trait-fort);border-radius:11px;background:rgba(59,51,72,.03);cursor:pointer}
.wmi .nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--texte);margin:0 auto;transition:transform .25s ease,opacity .2s ease}
.wmi .nav-toggle:hover{border-color:var(--texte)}
.wmi .nav-toggle:focus-visible{outline:2px solid var(--menthe);outline-offset:3px}
.wmi .btn{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-decoration:none; display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:11px; border:1px solid transparent;background:var(--degrade-plein);color:var(--sur-accent);cursor:pointer; transition:transform .16s ease,box-shadow .25s ease,filter .2s; box-shadow:0 10px 30px -12px rgba(124,92,252,.7);}
.wmi .btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 36px -12px rgba(124,92,252,.85)}
.wmi .btn.ghost{background:transparent;border-color:var(--trait-fort);color:var(--texte);box-shadow:none}
.wmi .btn.ghost:hover{border-color:var(--texte);background:rgba(59,51,72,.04)}
.wmi .btn.big{padding:16px 28px;font-size:14px}
.wmi .btn .arr{transition:transform .2s}
.wmi .btn:hover .arr{transform:translateX(3px)}
.wmi a:focus-visible, .wmi .btn:focus-visible, .wmi button:focus-visible{outline:2px solid var(--menthe);outline-offset:3px}
.wmi .hero{padding:64px 0 80px;border-bottom:1px solid var(--trait)}
.wmi .hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:54px;align-items:center}
.wmi .hero h1{font-size:clamp(38px,5.6vw,68px);margin:20px 0 22px}
.wmi .hero h1 em{font-style:normal}
.wmi .hero .cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.wmi .hero .micro{font-family:var(--mono);font-size:12px;color:var(--attenue);margin-top:22px;letter-spacing:.02em}
.wmi .chart-card{background:linear-gradient(180deg,rgba(59,51,72,.04),rgba(59,51,72,.01)); border:1px solid var(--trait);border-radius:18px;padding:22px 22px 16px;position:relative;overflow:hidden; box-shadow:0 30px 80px -40px rgba(34,211,238,.45), 0 2px 6px rgba(59,51,72,.3);}
.wmi .chart-card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px; background:linear-gradient(135deg,rgba(124,92,252,.6),rgba(34,211,238,.5),transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.wmi .chart-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--attenue);margin-bottom:6px}
.wmi .chart-head .dot{display:inline-flex;align-items:center;gap:7px}
.wmi .chart-head .dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose);display:inline-block;box-shadow:0 0 10px var(--rose)}
.wmi .chart-svg{width:100%;height:auto;display:block}
.wmi .leg{display:flex;gap:20px;font-family:var(--mono);font-size:11px;color:var(--attenue);letter-spacing:.04em;margin-top:8px;flex-wrap:wrap}
.wmi .leg span{display:inline-flex;align-items:center;gap:7px}
.wmi .leg span::before{content:"";width:16px;height:3px;border-radius:9px;display:inline-block}
.wmi .leg .l-rust::before{background:linear-gradient(135deg,var(--abricot),var(--rose))}
.wmi .leg .l-teal::before{background:linear-gradient(135deg,var(--menthe),var(--menthe))}
.wmi section.block{padding:88px 0;border-bottom:1px solid var(--trait)}
.wmi .section-head{max-width:64ch;margin-bottom:46px}
.wmi .band-light{background:var(--sur-accent);border-bottom-color:var(--trait)}
.wmi .band-light .section-head h2{color:var(--texte)}
.wmi .band-light .section-head p.lead{color:var(--attenue)}
.wmi .band-light .eyebrow{color:var(--texte)}
.wmi .band-light .tier:not(.feature){box-shadow:0 24px 55px -32px var(--trait)}
.wmi .band-light .tier.feature{box-shadow:0 0 0 1px var(--accent),0 30px 72px -30px rgba(155,123,255,.85)}
.wmi .band-light .f, .wmi .band-light .step, .wmi .band-light .engine{box-shadow:0 22px 55px -34px var(--trait)}
.wmi .band-tint-violet{background:var(--carte-creuse);border-bottom-color:var(--trait)}
.wmi .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wmi .f{background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:28px 26px;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.wmi .f:hover{transform:translateY(-3px);border-color:var(--trait-fort)}
.wmi .gbar{height:3px;width:46px;border-radius:9px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.4,0,.2,1) .15s;margin-bottom:20px}
.wmi .reveal.in .gbar, .wmi .reveal.in .gbar-self{transform:scaleX(1)}
.wmi .f .n{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,50px);line-height:1;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmi .f .k{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--attenue);margin-top:14px;line-height:1.5}
.wmi .engine{background:linear-gradient(180deg,var(--carte-creuse),var(--carte));border:1px solid var(--trait);border-radius:22px;padding:clamp(34px,5vw,58px);position:relative;overflow:hidden}
.wmi .engine::after{content:"";position:absolute;top:-60px;right:-40px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.32),transparent 65%);pointer-events:none}
.wmi .engine h2{position:relative}
.wmi .engine p{color:var(--attenue);max-width:60ch;position:relative}
.wmi .engine .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;position:relative}
.wmi .engine .pill{font-family:var(--mono);font-size:12px;letter-spacing:.04em;border:1px solid var(--trait-fort);padding:9px 14px;border-radius:99px;color:var(--texte);background:rgba(59,51,72,.03)}
.wmi .engine .formula{font-family:var(--mono);font-size:13px;margin-top:30px;letter-spacing:.03em;position:relative;background:linear-gradient(135deg,var(--menthe),var(--menthe));-webkit-background-clip:text;background-clip:text;color:transparent}
.wmi .steps{display:flex;flex-direction:column;gap:16px}
.wmi .step{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:28px;align-items:start;background:var(--carte);border:1px solid var(--trait);border-radius:16px;transition:transform .25s ease,border-color .25s ease}
.wmi .step:hover{transform:translateY(-3px);border-color:var(--trait-fort)}
.wmi .chip{width:54px;height:54px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:16px;color:var(--fond);box-shadow:0 12px 28px -12px var(--accent)}
.wmi .step h3{font-size:25px;margin-bottom:10px}
.wmi .step p{color:var(--attenue);max-width:62ch}
.wmi .step .deliv{font-family:var(--mono);font-size:12.5px;color:var(--attenue);margin-top:14px;letter-spacing:.02em;border-left:2px solid var(--accent);padding-left:12px}
.wmi .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wmi .tier{background:var(--carte);border:1px solid var(--trait);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.wmi .tier:hover{transform:translateY(-4px);border-color:var(--trait-fort)}
.wmi .tier.feature{border-color:transparent;box-shadow:0 0 0 1px var(--accent),0 26px 70px -28px rgba(155,123,255,.7)}
.wmi .tier .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--attenue)}
.wmi .tier h3{font-size:24px;margin:14px 0 6px}
.wmi .tier .price{font-family:var(--mono);font-size:15px;font-weight:500;margin-bottom:18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmi .tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.wmi .tier li{font-size:15.5px;color:var(--attenue);padding-left:24px;position:relative;line-height:1.45}
.wmi .tier li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:50%;background:var(--grad)}
.wmi .tier .btn{justify-content:center;width:100%}
.wmi .tier .badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fond);background:var(--grad);padding:4px 10px;border-radius:99px;margin-bottom:10px;font-weight:600}
.wmi .honesty{background:var(--carte);border:1px solid var(--trait);border-radius:22px;padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start;position:relative;overflow:hidden}
.wmi .honesty::after{content:"";position:absolute;bottom:-80px;left:-40px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,179,71,.22),transparent 65%);pointer-events:none}
.wmi .honesty h2{font-size:clamp(26px,3.4vw,38px);position:relative}
.wmi .honesty p{color:var(--attenue);max-width:58ch;margin-bottom:16px;position:relative}
.wmi .honesty p:last-child{margin-bottom:0}
.wmi .honesty .mark{font-family:var(--display);font-weight:600;color:var(--texte)}
.wmi .final{padding:104px 0;text-align:center;border-bottom:1px solid var(--trait)}
.wmi .final h2{font-size:clamp(34px,5.5vw,62px);margin-bottom:18px}
.wmi .final p.lead{margin:0 auto 32px}
.wmi .final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.wmi .foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.wmi .foot-links{display:flex;gap:24px;flex-wrap:wrap}
.wmi .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.wmi .reveal.in{opacity:1;transform:none}
.wmi .facts .f:nth-child(2), .wmi .tiers .tier:nth-child(2), .wmi .steps .step:nth-child(2){transition-delay:.09s}
.wmi .facts .f:nth-child(3), .wmi .tiers .tier:nth-child(3), .wmi .steps .step:nth-child(3){transition-delay:.18s}
@media(max-width:880px){
  .wmi .hero-grid{grid-template-columns:1fr;gap:38px}
  .wmi .honesty{grid-template-columns:1fr;gap:24px}
  .wmi .tiers, .wmi .facts{grid-template-columns:1fr}
  .wmi .nav-toggle{display:flex}
  .wmi .step{grid-template-columns:1fr;gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .wmi .reveal{transition:none;opacity:1;transform:none}
  .wmi .gbar{transform:scaleX(1)}
}
.wmi .article .wrap{max-width:760px}
.wmi .backlink .arr{transition:transform .2s}
.wmi .backlink:hover .arr{transform:translateX(-3px)}
.wmi .post-head .eyebrow{margin-bottom:18px}
.wmi .post-foot .tags{display:flex;gap:8px;flex-wrap:wrap}
.wmi .post-foot .tags a{font-family:var(--mono);font-size:12px;color:var(--attenue);border:1px solid var(--trait-fort);padding:6px 12px;border-radius:99px;text-decoration:none}
.wmi .post-foot .tags a:hover{border-color:var(--accent);color:var(--accent)}
.wmi .post-nav .nl{font-size:11px;color:var(--attenue);display:block;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.wmi .listing .wrap{max-width:var(--large)}
.wmi .card .more .arr{transition:transform .2s}
.wmi .card .more:hover .arr{transform:translateX(3px)}
.wmi .article-hero .wrap{position:relative}
.wmi .article-hero .eyebrow{margin-bottom:16px}
.wmi .article-hero p.lead{margin-bottom:22px;max-width:58ch}
.wmi .article-hero .cta-row{display:flex;gap:13px;flex-wrap:wrap}
.wmi .side-card.feature{border-color:transparent;box-shadow:0 0 0 1px var(--accent),0 22px 60px -30px rgba(155,123,255,.6)}
.wmi .side-card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--attenue)}
.wmi .side-card .price{font-family:var(--mono);font-size:13.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.wmi .side-card .btn{width:100%;justify-content:center}
.wmi .cta-inline .eyebrow{margin-bottom:10px}
.wmi .cta-inline .btn{position:relative;flex:none}
.wmi .post-content a.btn{color:var(--sur-accent);text-decoration:none}
.wmi .post-content a.btn:hover{color:var(--sur-accent);text-decoration:none;filter:brightness(1.08)}
.wmi .post-content a.btn.ghost{color:var(--texte)}
.wmi .post-content a.btn .arr{text-decoration:none}
@media(max-width:620px){
  .wmi .cta-inline .btn{width:100%;justify-content:center}
}
.wmi .cta-end .eyebrow{justify-content:center;margin-bottom:14px}
.wmi .cta-end p.lead{margin:0 auto 24px;position:relative;max-width:54ch}
.wmi .cta-end .cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;position:relative}


/* ===========================================================================
   L'ANCIENNE ACCUEIL EN COLONNE
   Elle était bâtie pleine largeur. Dans la colonne d'un article, à côté de
   l'encart, ses grilles à deux et trois colonnes doivent se replier et ses
   respirations se resserrer — sinon tout se tasse.
   =========================================================================== */
.wm-colonnes .wmi .wrap{padding:0}
.wm-colonnes .wmi .hero-grid,
.wm-colonnes .wmi .honesty{grid-template-columns:1fr;gap:28px}
.wm-colonnes .wmi .facts,
.wm-colonnes .wmi .tiers{grid-template-columns:1fr;gap:14px}
.wm-colonnes .wmi .hero{padding:8px 0 44px}
.wm-colonnes .wmi .block{padding:44px 0}
.wm-colonnes .wmi .final{padding:52px 0}
.wm-colonnes .wmi h1{font-size:clamp(28px,4.4vw,40px)}
.wm-colonnes .wmi h2{font-size:clamp(24px,3.2vw,32px)}
.wm-colonnes .wmi .engine,
.wm-colonnes .wmi .honesty{padding:28px 26px}
.wm-colonnes .wmi .chart-card{padding:18px}


/* ===========================================================================
   ENCART D'OFFRE (barre latérale, sous la présentation)
   Repris de l'ancienne page d'accueil, condensé pour tenir en colonne.
   =========================================================================== */
.wmo{margin-top:16px;background:var(--carte);border:1px solid var(--trait);border-radius:22px;
  padding:24px 22px;font-size:15.5px;line-height:1.6;color:var(--texte)}
.wmo *{box-sizing:border-box}
.wmo__oeil{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--attenue);margin:0 0 8px;display:flex;align-items:center;gap:10px}
.wmo__oeil::before{content:'';width:24px;height:2px;border-radius:2px;background:var(--degrade)}
.wmo__titre{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 16px;line-height:1.2}
.wmo__liste{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.wmo__item{position:relative;padding:16px 16px 14px;border-radius:18px;background:var(--voile);
  border:1px solid var(--trait);overflow:hidden}
.wmo__item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--menthe)}
.wmo__item--entree::before{background:var(--rose)}
.wmo__item--coeur{background:linear-gradient(135deg,rgba(210,113,142,.12),rgba(142,123,209,.10));
  border-color:var(--trait-fort)}
.wmo__item--coeur::before{background:var(--degrade-plein)}
.wmo__tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--attenue);margin-bottom:6px}
.wmo__item h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.wmo__prix{font-family:var(--mono);font-size:13px;color:var(--rose-fonce);margin:0 0 8px}
.wmo__item--coeur .wmo__prix{color:var(--lavande-fonce)}
.wmo__quoi{font-size:14px;color:var(--attenue);margin:0}
.wmo__cta{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:15px;
  color:var(--sur-accent);background:var(--degrade-plein);padding:13px 18px;border-radius:999px;
  transition:transform .18s ease}
.wmo__cta:hover{color:var(--sur-accent);transform:translateY(-2px)}
.wmo__note{display:block;margin-top:12px;font-size:12.5px;color:var(--attenue);text-align:center}
@media (prefers-reduced-motion:reduce){.wmo__cta{transition:none}}

/* ===========================================================================
   BARRE LATÉRALE — blocs de rappel sous l'offre
   =========================================================================== */
.wmv{margin-top:16px;background:linear-gradient(140deg,rgba(210,113,142,.14),rgba(142,123,209,.12) 55%,rgba(87,189,182,.12));
  border:1px solid var(--trait);border-radius:22px;padding:24px 22px;color:var(--texte);
  font-family:var(--corps);line-height:1.6;font-size:15.5px}
.wmv__oeil{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--attenue);margin:0 0 8px;display:flex;align-items:center;gap:10px}
.wmv__oeil::before{content:'';width:24px;height:2px;border-radius:2px;background:var(--degrade)}
.wmv__titre{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em;
  line-height:1.2;margin:0 0 14px}
.wmv__chiffres{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wmv__chiffres li{padding:12px 10px;border-radius:14px;background:var(--carte);border:1px solid var(--trait);text-align:center}
.wmv__chiffres b{display:block;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;
  background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.wmv__chiffres small{display:block;color:var(--attenue);font-size:11.5px;margin-top:4px;line-height:1.35}
.wmv__quoi{margin:0 0 16px;color:var(--attenue);font-size:14.5px}
.wmv__cta{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:15px;
  color:var(--sur-accent);background:var(--degrade-plein);padding:12px 16px;border-radius:999px;
  transition:transform .18s ease}
.wmv__cta:hover{color:var(--sur-accent);transform:translateY(-2px)}

.wma{margin-top:16px;background:var(--carte);border:1px solid var(--trait);border-radius:22px;
  padding:22px;font-family:var(--corps);font-size:15px}
.wma__oeil{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--attenue);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.wma__oeil::before{content:'';width:24px;height:2px;border-radius:2px;background:var(--degrade)}
.wma__liste{list-style:none;padding:0;margin:0;counter-reset:lu}
.wma__liste li{position:relative;padding:11px 0 11px 32px;border-top:1px solid var(--trait);counter-increment:lu}
.wma__liste li:first-child{border-top:0;padding-top:0}
.wma__liste li::before{content:counter(lu);position:absolute;left:0;top:10px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--sur-accent);background:var(--degrade-plein)}
.wma__liste li:first-child::before{top:0}
.wma__liste a{display:block;text-decoration:none;color:var(--texte);font-weight:600;line-height:1.35}
.wma__liste a:hover{color:var(--rose)}


/* ===========================================================================
   BARRE LATÉRALE — formation
   =========================================================================== */
.wmf{margin-top:16px;background:var(--carte);border:1px solid var(--trait);border-radius:22px;
  padding:22px;font-family:var(--corps);font-size:15px;color:var(--texte)}
.wmf__tete{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.wmf__sceau{flex:0 0 auto;color:var(--lavande)}
.wmf__oeil{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--attenue);margin:0 0 4px}
.wmf__titre{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.wmf__quoi{margin:0 0 12px;color:var(--attenue);font-size:14.5px}
.wmf__quoi:last-child{margin-bottom:0}

/* ===========================================================================
   HAUT D'ARTICLE — on resserre
   Le titre, son filet et le premier intertitre étaient séparés par un vide
   d'une demi-page : trois marges qui s'additionnaient.
   =========================================================================== */
.wm-page-tete{padding-top:48px;padding-bottom:26px}
.wm-colonnes{padding-top:30px}
.wm-contenu > *:first-child{margin-top:0}
.wm-contenu h2:first-child,.wm-contenu h3:first-child{margin-top:0}
.wm-contenu p:empty{display:none}
.wm-contenu br:first-child{display:none}