/* ==========================================================================
   Habillage des pages intérieures à la charte de l'accueil (2026-11-02, « refais les autres pages du site, garde
   les textes, mais refais-les en cohérence avec notre charte graphique »). Chargée après lyon-NNN.css sur toutes les
   pages sauf l'accueil (front-page.php a sa propre feuille, assets/nouvelle-version/nv-N.css).
   Charte : noir chaud #1C1A17 (titres, boutons, sections foncées, pied), champagne #C2A36B (mot en italique des
   titres, coches, boutons des sections foncées), fond sable #F5EFE4 et crème #EDE2CF, Gambetta (titres) et Onest
   (texte). L'ancienne feuille passe entièrement par des variables --l-* : on les redéfinit ici, puis on reprend
   les éléments qui doivent ressembler à l'accueil (en-tête, bannière, boutons, petits titres, mots en couleur).
   ========================================================================== */

/* Polices de l'accueil. Gambetta est déclarée à la seule graisse 500 : les titres de l'ancienne feuille, écrits en
   600, sortent en 500 comme sur l'accueil (le fichier variable est ramené à 500, sans gras simulé). */
@font-face{font-family:'Gambetta Titres';font-style:normal;font-weight:500;font-display:swap;src:url(nouvelle-version/polices/gambetta-variable.woff2) format('woff2')}
@font-face{font-family:'Gambetta Titres';font-style:italic;font-weight:500;font-display:swap;src:url(nouvelle-version/polices/gambetta-variable-italic.woff2) format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url(nouvelle-version/polices/onest-latin.woff2) format('woff2')}
html{font-synthesis:none}

:root{
  --l-titre:'Gambetta Titres',Georgia,'Times New Roman',serif;
  --l-corps:'Onest',ui-sans-serif,system-ui,sans-serif;
  --l-rayon:14px;
  /* noir chaud */
  --l-encre:#1C1A17;--l-encre-2:#2A2723;--l-encre-3:#36322D;--l-voile:#14120F;
  --l-sapin-fond:#1C1A17;--l-turquoise-fonce:#1C1A17;
  /* fonds */
  --l-fond:#F5EFE4;--l-sable:#EDE2CF;--l-carte:#FFFFFF;--l-carte-chaude:#FAF6EF;
  --l-trait:#E2D7C3;--l-trait-fort:#D3C6AE;
  /* texte */
  --l-texte:#3C3A34;--l-doux:#5F5B52;
  --l-sur-fonce:#F1EADD;--l-sur-fonce-2:#D9D0C0;--l-sur-fonce-doux:#C9BFAE;--l-sur-sapin:#EDE2CF;
  /* boutons : noir chaud, texte sable */
  --l-chaud:#1C1A17;--l-chaud-fonce:#3A3631;--l-chaud-texte:#F5EFE4;--l-chaud-lisible:#1C1A17;--l-chaud-clair:#C2A36B;
  /* accents : texte en noir chaud sur fond clair, champagne sur fond foncé et en décor */
  --l-turquoise:#1C1A17;--l-or-texte:#1C1A17;
  --l-turquoise-clair:#C2A36B;--l-or-clair:#C2A36B;--l-dore:#C2A36B;--l-or:#C2A36B;--l-sapin:#C2A36B;
  --l-or-pale:#F1E8D8;--l-icone-fond:#F1E8D8;
  --l-anneau-vert:#E8DBC3;--l-anneau-chaud:#E8DBC3;
  /* ronds du décor, comme le grand rond de la bannière de l'accueil */
  --l-rond-1:#E8DBC3;--l-rond-2:#EFE5D4;--l-rond-sable-1:#E2D2B6;--l-rond-sable-2:#F2EADC;
  --l-etoile:#E7A93B;
  --l-champagne:#C2A36B;
}

/* Titres : Gambetta 500, comme l'accueil */
h1,h2,h3,h4,.mpl-h2{font-weight:500;letter-spacing:-.02em}

/* Mot en couleur des titres : champagne en italique, comme « site internet » sur l'accueil */
.mpl-accent,.mpl-section--encre .mpl-accent,.mpl-section--sapin .mpl-h2 .mpl-accent,.mpl-hero .mpl-accent,.mpl-porte .mpl-accent,.mpl-svc__titre .mpl-accent,.mpl-bphoto .mpl-accent{color:var(--l-champagne);font-style:italic}

/* Petits titres au-dessus des H2 : capitales espacées en noir chaud (champagne sur fond foncé), comme l'accueil */
.mpl-surtitre{font:700 12.5px/1.3 var(--l-corps);letter-spacing:.16em;text-transform:uppercase;color:var(--l-encre)}
.mpl-section--encre .mpl-surtitre,.mpl-section--sapin .mpl-surtitre{color:var(--l-champagne)}

/* Boutons : pilule noir chaud, contour discret pour le second ; dans les sections foncées, champagne à texte noir */
.mpl-btn{font-weight:600;font-size:clamp(18px,1.35vw,20px)}
.mpl-btn--verre{border-color:#D3C6AE;color:var(--l-encre);background:transparent}
.mpl-btn--verre:hover{background:var(--l-encre);color:var(--l-fond);border-color:var(--l-encre)}
.mpl-btn--contour .mpl-ico{color:var(--l-encre)}
.mpl-section--encre .mpl-btn--action,.mpl-section--sapin .mpl-btn--action{background:var(--l-champagne);color:var(--l-encre)}
.mpl-section--encre .mpl-btn--action:hover,.mpl-section--sapin .mpl-btn--action:hover{background:#D1B680}
.mpl-section--encre .mpl-btn--verre,.mpl-section--sapin .mpl-btn--verre{border-color:rgba(241,234,221,.45);color:var(--l-sur-fonce)}

/* En-tête : plein, fond sable, monogramme de l'accueil, devis en pilule noire ; téléphone champagne à icône blanche sur téléphone */
.mpl-entete{position:sticky;top:0;background:var(--l-fond);border-bottom:1px solid var(--l-trait)}
.mpl-logo--image{display:block;line-height:0}
.mpl-logo--image img{display:block;width:auto;height:clamp(54px,4.4vw,66px);mix-blend-mode:multiply}
.mpl-nav>a,.mpl-nav__groupe>a{color:var(--l-encre)}
.mpl-entete__devis{background:var(--l-encre);color:var(--l-fond)}
.mpl-entete__devis:hover{background:var(--l-chaud-fonce)}
@media (max-width:1080px){
  .mpl-logo--image img{height:48px}
  .mpl-entete__tel{background:var(--l-champagne)!important;color:#fff!important;border-radius:50%!important}
  .mpl-burger{background:var(--l-encre)}
}

/* Bannière (inc/composants.php, mpl_banniere_photo) : fond sable avec le grand rond champagne, texte à gauche,
   photo arrondie à droite ; sobre (sans photo) sur les pages légales, le plan du site, les articles et la 404 */
.mpl-bandeau{position:relative;overflow:hidden;padding:clamp(40px,5vw,76px) 0 clamp(44px,5vw,76px);border-bottom:1px solid var(--l-trait);background-color:var(--l-fond);background-image:radial-gradient(circle 420px at left -150px top -170px,#E8DBC3 99.5%,transparent 100%),radial-gradient(circle 120px at right -50px bottom 70px,#E8DBC3 99%,transparent 100%),linear-gradient(180deg,var(--l-fond) 0%,var(--l-sable) 100%);background-repeat:no-repeat}
.mpl-bandeau__grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.mpl-bandeau--sobre .mpl-bandeau__grille{grid-template-columns:minmax(0,1fr)}
.mpl-bandeau--sobre .mpl-bandeau__texte{max-width:900px}
.mpl-bandeau__texte>:last-child{margin-bottom:0}
.mpl-bandeau .mpl-ariane{margin:0 0 22px}
.mpl-bandeau .mpl-ariane,.mpl-bandeau .mpl-ariane a{color:var(--l-doux)}
.mpl-bandeau .mpl-ariane a{color:var(--l-encre)}
.mpl-bandeau__h1{font-family:var(--l-titre);font-weight:500;font-size:clamp(40px,4.6vw,68px);line-height:1.04;letter-spacing:-.025em;color:var(--l-encre);margin:0 0 24px;text-wrap:balance}
.mpl-bandeau--sobre .mpl-bandeau__h1{font-size:clamp(38px,4.2vw,60px)}
.mpl-bandeau__lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;max-width:36em;color:var(--l-texte);margin:0 0 22px}
.mpl-bandeau__lead strong{color:var(--l-encre)}
.mpl-bandeau .mpl-coches{margin:0 0 28px}
.mpl-bandeau__boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.mpl-bandeau__visuel{position:relative;overflow:hidden;border-radius:var(--l-rayon);aspect-ratio:4/3;background:var(--l-sable)}
.mpl-bandeau__visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .mpl-bandeau__grille{grid-template-columns:minmax(0,1fr)}
  .mpl-bandeau__visuel{order:-1}
  .mpl-bandeau{background-image:radial-gradient(circle 200px at left -90px top -100px,#E8DBC3 99.2%,transparent 100%),radial-gradient(circle 70px at right -30px bottom 120px,#E8DBC3 99%,transparent 100%),linear-gradient(180deg,var(--l-fond) 0%,var(--l-sable) 100%)}
}
@media (max-width:640px){
  .mpl-bandeau__h1{font-size:clamp(36px,10vw,48px)}
  .mpl-bandeau__boutons .mpl-btn{width:100%}
}

/* Pied de page : noir chaud, nom en Gambetta, liens clairs */
.mpl-pied{background:var(--l-encre)}
.mpl-pied__nom{font-weight:500}

/* Formulaire de devis : panneau noir chaud uni (plus de feuillage vert derrière), bouton champagne à texte noir */
.mpl-contact__form{border-radius:var(--l-rayon);background:var(--l-encre)}
.mpl-form__envoi{background:var(--l-champagne);color:var(--l-encre)}
.mpl-form__envoi:hover{background:#D1B680}

/* Serpentin des étapes (ol.mpl-serp) : la règle .mpl-serp de l'illustration « page de résultats Google » de l'ancienne
   feuille (position absolue, fond blanc) s'appliquait aussi à la liste et la sortait du flux sur la page SEO */
ol.mpl-serp{position:static;inset:auto;display:block;background:none;font-family:inherit;color:inherit}

/* Bannière sobre (mentions légales, politique de confidentialité, plan du site, articles, 404) : plus de hauteur
   minimale héritée de l'ancienne bannière photo (.mpl-bphoto--court, 420 à 520 px), juste le fil d'Ariane, le H1 et
   la ligne de texte, avec un rond plus petit (2026-11-02, « améliore la bannière ») */
.mpl-bandeau.mpl-bphoto--court,.mpl-bandeau--sobre{min-height:0}
.mpl-bandeau--sobre{padding:clamp(40px,4.4vw,64px) 0 clamp(36px,4vw,56px);background-image:radial-gradient(circle 260px at left -110px top -130px,#E8DBC3 99.5%,transparent 100%),radial-gradient(circle 90px at right -36px bottom 30px,#E8DBC3 99%,transparent 100%),linear-gradient(180deg,var(--l-fond) 0%,var(--l-sable) 100%)}
.mpl-bandeau--sobre .mpl-bandeau__h1{margin-bottom:14px}
.mpl-bandeau--sobre .mpl-bandeau__lead{font-size:16px;color:var(--l-doux);margin:0}
.mpl-bandeau--sobre .mpl-bandeau__boutons{margin-top:22px}
@media (max-width:900px){
  .mpl-bandeau--sobre{background-image:radial-gradient(circle 150px at left -80px top -90px,#E8DBC3 99.2%,transparent 100%),linear-gradient(180deg,var(--l-fond) 0%,var(--l-sable) 100%)}
}

/* Menu mobile : le téléphone ressort sur fond champagne, texte noir chaud (2026-11-02, il était noir sur le menu noir) */
.mpl-mob__tel{background:var(--l-chaud-clair)!important;color:var(--l-encre)!important}
.mpl-mob__tel:hover{background:#D1B680!important}
.mpl-carbone:hover{border-color:var(--l-chaud-clair)}

/* Pages légales, plan du site, 404 : bannière sobre centrée (2026-11-02, « sur les pages légales centre les titres ») */
.mpl-bandeau--sobre .mpl-bandeau__texte{max-width:900px;margin-left:auto;margin-right:auto;text-align:center}
.mpl-bandeau--sobre .mpl-ariane ol{justify-content:center}
.mpl-bandeau--sobre .mpl-bandeau__boutons{justify-content:center}

/* Badge Website Carbon : pastille claire couleur sable, petite fleur champagne, phrase dictée en ligne principale (2026-11-02) */
a.mpl-carbone{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:10px 18px 10px 12px;border:0!important;border-radius:16px;background:#F5EFE4!important;color:#1C1A17!important;text-decoration:none!important;line-height:1.3;transition:background-color .2s ease}
a.mpl-carbone:hover{background:#EDE2CF!important}
a.mpl-carbone span{padding:0;background:none}
.mpl-carbone__fleur{flex:none;width:30px;height:30px}
.mpl-carbone__texte{display:flex;flex-direction:column;gap:2px;min-width:0}
a.mpl-carbone .mpl-carbone__pct{font-size:14px;font-weight:600;color:#1C1A17}
a.mpl-carbone .mpl-carbone__g{font-size:12.5px;font-weight:400;color:#5F5B52}
a.mpl-carbone sub{font-size:.75em;line-height:0}

/* Animations légères, comme sur le site de Mylène Rivaton (2026-11-02) : coches, numéros d'étapes, pictos
   et initiales des avis s'ouvrent une fois à leur arrivée à l'écran (classes posées par lyon-N.js : sans
   script, tout reste affiché) ; cartes qui se soulèvent au survol. Rien pour qui demande moins d'animations. */
@media (prefers-reduced-motion:no-preference){
  .mp-anim .mp-pop{transition:scale .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
  .mp-anim .mp-pop:not(.est-vu){scale:.3;opacity:0}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mpl-real,.mpl-svc__carte,.mpl-prix--photo,.mpl-serp__carte{transition:translate .25s ease}
  .mpl-real:hover,.mpl-svc__carte:hover,.mpl-prix--photo:hover,.mpl-serp__carte:hover{translate:0 -5px}
}

/* « Toutes les réalisations » en vrai bouton (2026-11-02, « fais vrai cta ici ») : en haut à droite de la section
   sur ordinateur, sous la grille sur téléphone et tablette, comme l'ancien lien */
.mpl-tete-ligne > .mpl-btn{margin-bottom:4px}
@media (max-width:900px){
  .mpl-tete-ligne > .mpl-btn{display:none}
}

/* Badge carbone plus discret (2026-11-02, « un truc un peu moins visible, plus discret ») : sans fond, filet fin,
   textes dans les gris chauds du pied, petite fleur */
a.mpl-carbone{gap:10px;padding:8px 14px 8px 10px;border:1px solid rgba(255,255,255,.16)!important;border-radius:12px;background:transparent!important;color:#C9BFAE!important}
a.mpl-carbone:hover{background:rgba(255,255,255,.04)!important;border-color:rgba(194,163,107,.6)!important}
.mpl-carbone__fleur{width:22px;height:22px;opacity:.85}
a.mpl-carbone .mpl-carbone__pct{font-size:13px;font-weight:500;color:#D9D0C0}
a.mpl-carbone .mpl-carbone__g{font-size:12px;color:#A69E8E}

/* -------------------------------------------------------------------------
   2026-11-02 (pages vitrine, e-commerce, consultant SEO)
   ------------------------------------------------------------------------- */
/* Bannière : la photo prend la hauteur du texte à gauche (maquettes allongées en 4/5 pour ne rien couper) */
@media (min-width:901px){
  .mpl-bandeau:not(.mpl-bandeau--sobre) .mpl-bandeau__grille{align-items:stretch}
  .mpl-bandeau__visuel{aspect-ratio:auto;min-height:420px}
}
/* Portrait de la présentation en rond, comme sur l'accueil (« arrondis ma photo ») */
.mpl-duo--portrait .mpl-duo__visuel{align-self:center;justify-self:start;width:100%;max-width:460px;min-height:0;aspect-ratio:1/1;border-radius:50%}
.mpl-duo--portrait .mpl-duo__visuel img{object-position:50% 24%}
.mpl-duo--portrait .mpl-depuis{display:none}
@media (max-width:900px){
  .mpl-duo--portrait .mpl-duo__visuel{justify-self:center;max-width:340px;max-height:none;aspect-ratio:1/1}
}
/* Étapes en frise, reprises de l'accueil (nv-N.css) aux variables des pages intérieures */
.mpa-frise-cadre{position:relative;max-width:1180px;margin:0 auto}
.mpa-frise{--axe:clamp(76px,7vw,108px);--pastille:clamp(62px,5vw,74px);list-style:none;margin:0!important;padding:0!important}
.mpa-frise__etape{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--axe) minmax(0,1fr);align-items:center;margin:0!important;padding:clamp(14px,1.6vw,24px) 0}
.mpa-frise__etape::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background-image:radial-gradient(circle,rgba(194,163,107,.75) 1.8px,transparent 2.4px);background-size:4px 12px;background-repeat:repeat-y;background-position:center top}
.mpa-frise__etape:first-child::before{top:50%}
.mpa-frise__etape:last-child::before{bottom:50%}
.mpa-frise__photo{grid-row:1;grid-column:1;position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:var(--l-rayon);background:var(--l-encre-2)}
.mpa-frise__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mpa-frise__num{grid-row:1;grid-column:2;justify-self:center;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--pastille);height:var(--pastille);border:6px solid var(--l-encre);border-radius:50%;background:var(--l-fond);color:var(--l-encre);font-family:var(--l-titre);font-weight:500;font-size:clamp(21px,1.7vw,26px);line-height:1;transition:background-color .35s ease,color .35s ease}
.mpa-frise__num.est-atteint{background:var(--l-champagne);color:var(--l-encre)}
.mpa-frise__ligne{display:none;position:absolute;z-index:1;width:4px;margin-left:-2px;pointer-events:none}
.a-fil-js .mpa-frise__ligne{display:block}
.mpa-frise__ligne>span{display:block;width:100%;height:0;border-radius:2px;background:var(--l-champagne);transition:height .25s linear}
.a-fil-calme .mpa-frise__ligne>span{transition:none}
.mpa-frise__carte{grid-row:1;grid-column:3;position:relative;z-index:1;padding:clamp(24px,2.6vw,38px);background:#fff;border-radius:var(--l-rayon);color:var(--l-texte)}
.mpa-frise__etape:nth-child(even) .mpa-frise__photo{grid-column:3}
.mpa-frise__etape:nth-child(even) .mpa-frise__carte{grid-column:1}
.mpa-frise__carte h3{margin:0 0 10px;color:var(--l-encre);font-size:clamp(23px,1.9vw,28px);line-height:1.2}
.mpa-frise__carte p{margin:0 0 8px;color:var(--l-texte);font-size:17px;line-height:1.6}
.mpa-frise__carte p:last-child{margin-bottom:0}
.mpa-frise__carte strong{color:var(--l-encre)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mpa-frise__photo img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .mpa-frise__etape:hover .mpa-frise__photo img{transform:scale(1.05)}
}
@media (max-width:700px){
  .mpa-frise-cadre{max-width:560px}
  .mpa-frise{--axe:48px;--pastille:48px}
  .mpa-frise__etape{grid-template-columns:var(--axe) minmax(0,1fr);column-gap:14px;align-items:start;padding:0 0 26px}
  .mpa-frise__etape:last-child{padding-bottom:0}
  .mpa-frise__etape::before{left:calc(var(--axe) / 2)}
  .mpa-frise__etape:first-child::before{top:calc(var(--pastille) / 2)}
  .mpa-frise__etape:last-child::before{bottom:auto;height:calc(var(--pastille) / 2)}
  .mpa-frise__num{grid-column:1;grid-row:1;border-width:4px;font-size:20px}
  .mpa-frise__photo,.mpa-frise__etape:nth-child(even) .mpa-frise__photo{grid-column:2;grid-row:1;aspect-ratio:4/3;border-radius:var(--l-rayon) var(--l-rayon) 0 0}
  .mpa-frise__carte,.mpa-frise__etape:nth-child(even) .mpa-frise__carte{grid-column:2;grid-row:2;padding:20px 22px 24px;border-radius:0 0 var(--l-rayon) var(--l-rayon)}
  .mpa-frise__carte h3{font-size:23px}
  .mpa-frise__carte p{font-size:16.5px}
}
.mpa-frise-cadre{margin-top:clamp(8px,1vw,16px)}
.mp-anim .mpa-frise__num.mp-pop{transition:scale .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease,background-color .35s ease,color .35s ease}
/* Bannière dont la photo a son sujet en bas (maquette de Tammaia, page Villeurbanne : seul le mur au-dessus est généré) */
.mpl-bandeau--bas .mpl-bandeau__visuel img{object-position:50% 100%}
/* H1 des pages de service plus grand, nettement au-dessus des H2 (2026-11-02, « augmente taille H1 ») ; les pages
   légales gardent leur titre plus petit (bannière sobre) */
.mpl-bandeau:not(.mpl-bandeau--sobre) .mpl-bandeau__h1{font-size:clamp(44px,5.4vw,78px);line-height:1.02}
@media (max-width:900px){
  .mpl-bandeau:not(.mpl-bandeau--sobre) .mpl-bandeau__h1{font-size:clamp(40px,11vw,54px)}
}
/* Plus de trait de feutre sous « Mes engagements » (règle de l'agence : aucun trait sous un mot) */
.mpl-trait{padding-bottom:0}
.mpl-trait svg{display:none}

/* « Mes engagements » en liste cochée, comme sur l'accueil (2026-11-02, pages vitrine et e-commerce) */
.mpl-plus{list-style:none;margin:0 0 4px;padding:0}
.mpl-plus li{position:relative;margin:0;padding:12px 0 12px 32px;border-bottom:1px solid var(--l-trait);font-size:clamp(17px,1.25vw,18.5px);line-height:1.55;color:var(--l-texte)}
.mpl-plus li::before{content:"";position:absolute;left:0;top:calc(12px + .3em);width:18px;height:18px;background:var(--l-encre);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.mpl-plus strong{color:var(--l-encre)}
.mpl-duo--portrait .mpl-plus + .mpl-duo__action{margin-top:28px}

/* Tarifs à deux cartes (page vitrine : création + référencement, sans la maintenance) */
.mpl-svc:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;margin-left:auto;margin-right:auto}
@media (max-width:900px){ .mpl-svc:has(> :nth-child(2):last-child){grid-template-columns:minmax(0,1fr)} }

/* Page Villeurbanne : section locale (texte et quartiers) */
#villeurbanne .mpl-conteneur{max-width:980px}
#villeurbanne p{font-size:clamp(17px,1.25vw,18.5px);line-height:1.65;color:var(--l-texte)}
#villeurbanne .mpl-communes{margin:22px 0 26px}

/* Page consultant SEO refaite (2026-11-02, plan ChatSEO) : cartes à titre H3 (consultant / agence / interne,
   ce qui est inclus), titre des communes couvertes */
.mpl-cartes3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,20px);margin-top:clamp(8px,1vw,14px)}
.mpl-cartes3 article{margin:0;padding:clamp(22px,2vw,30px);background:#fff;border:1px solid var(--l-trait);border-radius:var(--l-rayon)}
.mpl-cartes3 h3{margin:0 0 12px;font:500 clamp(21px,1.6vw,24px)/1.22 var(--l-titre);letter-spacing:-.01em;color:var(--l-encre)}
.mpl-cartes3 p{margin:0 0 10px;font-size:16.5px;line-height:1.6;color:var(--l-texte)}
.mpl-cartes3 p:last-child{margin-bottom:0}
.mpl-cartes3 strong{color:var(--l-encre)}
@media (max-width:1100px){ .mpl-cartes3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .mpl-cartes3{grid-template-columns:minmax(0,1fr)} }
#engagements .mpl-coches--lignes{max-width:1100px;margin-left:auto;margin-right:auto}
.mpl-local__zones{margin:clamp(30px,3vw,42px) 0 16px;font:500 clamp(21px,1.6vw,25px)/1.25 var(--l-titre);color:var(--l-encre)}
#local .mpl-communes{margin:0 0 20px}

/* Page consultant SEO plus agréable à lire (2026-11-02, « mots en gras, puces, images, que ce soit sympa à lire ») */
/* Résultats : capture du site en haut de chaque carte */
.mpl-cas__carte{overflow:hidden}
.mpl-cas__photo{position:relative;margin:calc(-1 * clamp(24px,2.4vw,34px)) calc(-1 * clamp(24px,2.4vw,34px)) 22px;aspect-ratio:4/3;overflow:hidden;background:var(--l-sable)}
.mpl-cas__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Consultant, agence ou interne : tableau, colonne du consultant mise en avant */
.mpl-comparatif{max-width:1120px;margin:clamp(8px,1vw,14px) auto 0;background:#fff;border:1px solid var(--l-trait);border-radius:var(--l-rayon);overflow:hidden}
.mpl-comparatif table{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.5}
.mpl-comparatif th,.mpl-comparatif td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--l-trait)}
.mpl-comparatif tbody tr:last-child th,.mpl-comparatif tbody tr:last-child td{border-bottom:0}
.mpl-comparatif thead th{padding-top:20px;padding-bottom:20px;font:500 clamp(20px,1.6vw,24px)/1.15 var(--l-titre);color:var(--l-encre);background:var(--l-fond)}
.mpl-comparatif thead th.est-moi{background:var(--l-encre);color:#fff}
.mpl-comparatif thead th small{display:block;margin-top:5px;font:700 12px/1.2 var(--l-corps);letter-spacing:.12em;text-transform:uppercase;color:var(--l-champagne)}
.mpl-comparatif tbody th{width:19%;font-weight:700;color:var(--l-encre)}
.mpl-comparatif td{color:var(--l-texte)}
.mpl-comparatif td.est-moi{background:var(--l-fond)}
.mpl-comparatif td strong{color:var(--l-encre)}
.mpl-comparatif__fin{max-width:860px;margin:24px auto 0;text-align:center;font-size:clamp(17px,1.25vw,18.5px);line-height:1.6;color:var(--l-texte)}
@media (max-width:760px){
  .mpl-comparatif{background:transparent;border:0;border-radius:0;overflow:visible}
  .mpl-comparatif thead{display:none}
  .mpl-comparatif table,.mpl-comparatif tbody,.mpl-comparatif tr,.mpl-comparatif th,.mpl-comparatif td{display:block;width:auto}
  .mpl-comparatif tr{margin:0 0 14px;background:#fff;border:1px solid var(--l-trait);border-radius:var(--l-rayon);overflow:hidden}
  .mpl-comparatif tbody th{width:auto;padding:14px 18px;background:var(--l-encre);color:#fff;font:500 21px/1.2 var(--l-titre);border-bottom:0}
  .mpl-comparatif td,.mpl-comparatif tbody tr:last-child td{padding:12px 18px;border-bottom:1px solid var(--l-trait)}
  .mpl-comparatif td:last-child{border-bottom:0!important}
  .mpl-comparatif td::before{content:attr(data-col);display:block;margin-bottom:3px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--l-doux)}
}
/* Ce qui est inclus : pictogramme en tête de carte */
.mpl-cartes3 .mpl-picto{width:52px;height:52px;margin:0 0 16px}

/* Comparatif consultant / agence / interne plus percutant (2026-11-02, « visuellement plus impactant ») : colonne du
   consultant en noir chaud de haut en bas avec une coche champagne par ligne, deux autres colonnes effacées,
   pictogramme dans un rond devant chaque critère, conclusion en grand */
.mpl-comparatif{max-width:1160px}
.mpl-comparatif table{font-size:17px}
.mpl-comparatif th,.mpl-comparatif td{padding:20px 22px;vertical-align:middle}
.mpl-comparatif thead th{padding-top:26px;padding-bottom:26px;font-size:clamp(22px,1.8vw,27px)}
.mpl-comparatif thead th:not(.est-moi):not(:first-child){color:var(--l-doux)}
.mpl-comparatif thead th.est-moi{font-size:clamp(24px,2vw,30px)}
.mpl-comparatif thead th.est-moi small{font-size:12.5px;margin-top:7px}
.mpl-comparatif tbody th{white-space:nowrap;font-size:17px}
.mpl-comparatif tbody th .mpl-ico{display:inline-block;vertical-align:middle;box-sizing:border-box;width:38px;height:38px;padding:9px;margin:-4px 12px 0 0;border-radius:50%;background:var(--l-sable);color:var(--l-encre);stroke-width:2}
.mpl-comparatif td{color:var(--l-doux)}
.mpl-comparatif td.est-moi{background:var(--l-encre);color:#E4DCCB;border-bottom-color:rgba(255,255,255,.1)}
.mpl-comparatif td.est-moi strong{color:#fff}
.mpl-comparatif td.est-moi::before{content:"";display:inline-block;vertical-align:middle;width:24px;height:24px;margin:-3px 10px 0 0;border-radius:50%;
  background:var(--l-champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A17' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.mpl-comparatif__fin{max-width:900px;margin-top:30px;font:500 clamp(21px,1.7vw,25px)/1.4 var(--l-titre);color:var(--l-encre)}
.mpl-comparatif__fin strong{font-weight:500;color:var(--l-encre);font-style:italic}
@media (max-width:760px){
  .mpl-comparatif tbody th{white-space:normal;background:var(--l-sable);color:var(--l-encre);font:700 17px/1.3 var(--l-corps)}
  .mpl-comparatif tbody th .mpl-ico{background:#fff}
  .mpl-comparatif td.est-moi::before{position:static}
  .mpl-comparatif td.est-moi{padding-top:14px}
  .mpl-comparatif td.est-moi::before{display:none}
  .mpl-comparatif td.est-moi strong::before{content:"";display:inline-block;vertical-align:middle;width:20px;height:20px;margin:-3px 8px 0 0;border-radius:50%;
    background:var(--l-champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A17' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
  .mpl-comparatif td.est-moi::after{content:none}
  .mpl-comparatif td.est-moi{color:#E4DCCB}
  .mpl-comparatif td[data-col]::before{color:var(--l-doux)}
  .mpl-comparatif td.est-moi[data-col]::before{display:block;color:var(--l-champagne)}
  .mpl-comparatif__fin{font-size:20px}
}

/* Même largeur que les autres sections (2026-11-02, « cette section même width que les autres, idem autres pages ») :
   tarifs à deux cartes, comparatif et engagements de la page SEO, section locale de Villeurbanne */
.mpl-svc:has(> :nth-child(2):last-child){max-width:none}
.mpl-comparatif,#engagements .mpl-coches--lignes{max-width:none}
#villeurbanne .mpl-conteneur{max-width:var(--content,1560px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,80px);align-items:start}
#villeurbanne .mpl-surtitre,#villeurbanne .mpl-h2{grid-column:1/-1}
#villeurbanne p{grid-column:1}
#villeurbanne .mpl-communes{grid-column:2;grid-row:3 / span 3;margin:6px 0 0;align-self:start}
@media (max-width:900px){
  #villeurbanne .mpl-conteneur{grid-template-columns:minmax(0,1fr)}
  #villeurbanne .mpl-communes{grid-column:1;grid-row:auto;margin:18px 0 22px}
}
/* Titres des cartes de prix : le passage en champagne peut aller à la ligne (« Google et intelligences artificielles »
   débordait de la carte, 2026-11-02) */
.mpl-svc__titre .mpl-accent,.mpl-svc .mpl-accent{white-space:normal}
.mpl-svc__carte{min-width:0;overflow-wrap:break-word}
/* Page SEO : section « référencement local et national » avec photo (2026-11-02, « il manque une image, je fais du
   local et du national, c'est trop centré SEO local ») */
.mpl-local{align-items:stretch;margin-bottom:clamp(8px,1vw,14px)}
.mpl-local .mpl-duo__visuel{min-height:460px}
.mpl-local .mpl-duo__visuel img{object-position:50% 40%}
.mpl-local__titre{margin:26px 0 10px;font:500 clamp(21px,1.6vw,25px)/1.25 var(--l-titre);color:var(--l-encre)}
.mpl-local p{font-size:clamp(17px,1.2vw,18px);line-height:1.6}
.mpl-local .mpl-plus{margin-top:6px}
.mpl-local .mpl-plus li{padding-top:9px;padding-bottom:9px;font-size:17px}
.mpl-local .mpl-plus li::before{top:calc(9px + .3em)}

/* Prix des pages vitrine et e-commerce en un seul bloc (2026-11-02, « image à gauche, le prix à droite, juste un
   seul bloc ») : photo sur toute la hauteur à gauche ; titre, prix, phrase, objectifs, ce qui est inclus (déplié)
   et bouton à droite */
.mpl-svc:has(> .mpl-svc__carte:only-child){grid-template-columns:minmax(0,1fr)}
@media (min-width:901px){
  .mpl-svc > .mpl-svc__carte:only-child{display:grid;grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(32px,4vw,64px);row-gap:0;padding:0 var(--pad) 0 0;align-content:start}
  .mpl-svc > .mpl-svc__carte:only-child > *{grid-column:2}
  .mpl-svc > .mpl-svc__carte:only-child > .mpl-svc__photo{grid-column:1;grid-row:1 / span 6;margin:0;aspect-ratio:auto;height:100%;min-height:560px}
  .mpl-svc > .mpl-svc__carte:only-child > .mpl-svc__titre{margin-top:var(--pad)}
  .mpl-svc > .mpl-svc__carte:only-child > .mpl-svc__actions{padding-bottom:var(--pad)}
  .mpl-svc > .mpl-svc__carte:only-child .mpl-coches--prix{columns:2;column-gap:28px}
  .mpl-svc > .mpl-svc__carte:only-child .mpl-coches--prix li{break-inside:avoid}
}
.mpl-svc > .mpl-svc__carte:only-child:hover{translate:none}


/* Titres des cartes de prix agrandis (2026-11-03, « augmente taille de ces titres ») : bloc unique des pages de service plus grand encore */
.mpl-svc .mpl-svc__titre{font-size:clamp(30px,2.6vw,40px)}
.mpl-svc > .mpl-svc__carte:only-child > .mpl-svc__titre{font-size:clamp(36px,3.4vw,50px);line-height:1.05}
/* Plus d'air entre le titre des cartes de tarifs et « À partir de » (2026-11-03), comme sur l'accueil */
.mpl-svc .mpl-svc__titre{margin-bottom:clamp(16px,1.5vw,22px)}