/* =====================================================================
   premium.css — Couche « expérience » du site public.
   Chargée APRÈS style.css : elle ne remplace rien, elle surcharge.
   Pour revenir à l'ancien rendu : retirer la ligne premium.css dans
   partials/head.php (et premium.js dans partials/chrome-close.php).

   1. Typographie de titrage (Clash Display Bold)
   2. En-tête : transparent sur la bannière, plein au défilement
   3. Accueil : diaporama immersif + panneau de contrôle
   4. Boutons et flèches animées
   5. Mouvement au défilement (titres, images, barre de progression)
   ===================================================================== */

/* Police de titrage : Clash Display Bold (Fontshare, licence gratuite), servie depuis le site (assets/fonts/).
   « font-weight:100 900 » : cette graisse unique répond à toutes les graisses
   demandées, sans que le navigateur fabrique un faux gras par-dessus. */
@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-display-bold.otf') format('opentype');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --font-display:'Clash Display', 'Inter', sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. TYPOGRAPHIE ---------- */
h1, h2, .disp,
.blogx-title, .price-card h3, .cta-band-slide{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:0.012em; word-spacing:0.1em; /* Clash Display Bold : un peu d'air entre les lettres et les mots */
  font-variant-ligatures:none; font-feature-settings:"liga" 0, "clig" 0, "dlig" 0;
}
h1{ line-height:1.12; }
h2{ line-height:1.18; }
.section-head h2{ font-size:clamp(30px,3.8vw,52px); }
.sv-head h2{ font-size:clamp(26px,3.1vw,40px); font-weight:500; }
.solution-banner h1{ font-size:clamp(30px,3.8vw,50px); font-weight:500; }
.contact h1, .contact h2{ font-size:clamp(28px,4.4vw,58px); }
.cta-band-slide{ font-size:clamp(24px,3.4vw,44px) !important; font-weight:500 !important; }
.blogx-title{ font-size:clamp(18px,1.8vw,23px); line-height:1.35; }
.blogx-layout.is-grid .blogx-title{ font-size:16px; }
.stat-num{ font-family:var(--font-display); font-weight:500; letter-spacing:0; }

/* ---------- 2. EN-TÊTE ---------- */
/* ---------- 2. EN-TÊTE ET MENU ----------
   Même jeu que le modèle de référence :
   - en haut de page : barre transparente, filet clair en bas, liens blancs ;
   - au défilement : barre blanche fixe qui descend, liens sombres, ombre légère ;
   - liens : trait qui se déploie sur le bord inférieur de la barre ;
   - sous-menus : panneau blanc accroché sous la barre, qui remonte en fondu ;
     lignes séparées par un filet, décalage + flèche + trait au survol. */
:root{ --px-nav-h:96px; --px-green:#4F9D00; }

@media(min-width:981px){
  header.nav{
    padding:0 32px; height:var(--px-nav-h); background:var(--header-bg, #0c0c0d);
    border-bottom:1px solid transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    transition:height .4s ease, background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
  }
  header.nav .nav-inner{ height:100%; }
  header.nav nav{ height:100%; gap:0; align-items:stretch; }

  /* Liens de premier niveau : la hauteur de ligne = la hauteur de la barre,
     le trait de survol se pose donc exactement sur son bord inférieur. */
  #mainNav > a:not(.px-nav-cta), #mainNav .nav-dropdown-trigger{
    position:relative; display:flex; align-items:center; gap:7px; height:100%;
    margin-right:30px; padding:0; white-space:nowrap;
    font-size:14px; font-weight:700; letter-spacing:0.4px; text-transform:capitalize; color:#fff;
    transition:color .3s ease;
  }
  #mainNav .nav-dropdown{ height:100%; align-items:stretch; }
  #mainNav > a:not(.px-nav-cta)::after, #mainNav .nav-dropdown-trigger::after{
    content:''; position:absolute; left:0; right:auto; bottom:-1px; width:0; height:2px;
    background:#fff; transition:width .5s ease;
  }
  #mainNav > a:not(.px-nav-cta):hover::after, #mainNav > a.active:not(.px-nav-cta)::after,
  #mainNav .nav-dropdown-trigger:hover::after, #mainNav .nav-dropdown-trigger.active::after,
  #mainNav .nav-dropdown:hover > .nav-dropdown-trigger::after,
  #mainNav .nav-dropdown:focus-within > .nav-dropdown-trigger::after{ width:100%; right:auto; }
  #mainNav > a.active:not(.px-nav-cta), #mainNav .nav-dropdown-trigger.active,
  #mainNav > a:not(.px-nav-cta):hover, #mainNav .nav-dropdown-trigger:hover{ color:#fff; }

  /* Chevron (remplace le petit triangle) */
  #mainNav .nav-dropdown-caret{
    font-size:0; width:7px; height:7px; flex-shrink:0; margin-top:-3px;
    border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
    transform:rotate(45deg); transition:transform .35s ease, margin .35s ease;
  }
  #mainNav .nav-dropdown:hover .nav-dropdown-caret,
  #mainNav .nav-dropdown:focus-within .nav-dropdown-caret{ transform:rotate(225deg); margin-top:4px; }

  /* Panneau du sous-menu */
  #mainNav .nav-dropdown-menu{
    top:100%; left:0; padding-top:0; min-width:270px; z-index:150;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(10px); transition:opacity .5s ease, visibility .5s ease, transform .5s ease;
  }
  #mainNav .nav-dropdown:hover .nav-dropdown-menu,
  #mainNav .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  #mainNav .nav-dropdown-menu-inner{
    background:#fff; border:none; border-radius:0 0 6px 6px; padding:18px 40px 22px; gap:0;
    box-shadow:0 2px 6px rgba(40,40,40,0.1);
  }
  #mainNav .nav-dropdown-menu a{
    position:relative; display:block; padding:0; border-radius:0; background:none !important; transform:none !important;
    line-height:44px; font-size:14.5px; font-weight:400; letter-spacing:0.4px; white-space:nowrap; text-transform:none;
    border-bottom:1px solid #e9ebee; transition:padding-left .4s linear, color .3s ease;
  }
  #mainNav .nav-dropdown-menu a:last-child{ border-bottom-color:transparent; }
  #mainNav .nav-dropdown-item-title{ font:inherit; color:#16171f; transition:color .3s ease; }
  #mainNav .nav-dropdown-item-desc{ display:none; }
  /* Flèche qui glisse depuis la gauche */
  #mainNav .nav-dropdown-menu a::before{
    content:'→'; position:absolute; left:0; top:0; font-size:13px; color:var(--px-green);
    opacity:0; transform:translate(-10px, 0); transition:opacity .4s linear, transform .4s linear;
  }
  /* Trait qui se déploie sous la ligne */
  #mainNav .nav-dropdown-menu a::after{
    content:''; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--px-green);
    transition:width .4s linear; display:block;
  }
  #mainNav .nav-dropdown-menu a:hover{ padding-left:22px; background:none !important; }
  #mainNav .nav-dropdown-menu a:hover::before{ opacity:1; transform:translate(0, 0); }
  #mainNav .nav-dropdown-menu a:hover::after{ width:100%; }
  #mainNav .nav-dropdown-menu a:hover *{ color:var(--px-green) !important; }

  /* Bouton d'appel */
  .px-nav-cta{
    align-self:center; display:inline-flex; align-items:center; gap:10px; margin:0 6px 0 2px; padding:0 22px; height:46px;
    background:var(--btn, #caf600); color:#0a0a0a !important; border-radius:4px;
    font-size:14px !important; font-weight:700 !important; letter-spacing:0.4px; white-space:nowrap;
    transition:background-color .4s ease, color .4s ease, transform .4s var(--ease-out);
  }
  .px-nav-cta svg{ width:12px; height:12px; transition:transform .4s var(--ease-out); }
  .px-nav-cta:hover{ background:#fff; transform:translateY(-2px); }
  .px-nav-cta:hover svg{ transform:translate(3px,-3px); }
  header.nav .nav-social{ align-self:center; margin-left:18px; }
  header.nav .nav-social a{ color:#fff; border-color:rgba(255,255,255,0.3); }

  /* État 1 — tout en haut d'une page à bannière sombre : barre transparente. */
  body.px-top header.nav{
    background:transparent !important; box-shadow:none !important; border-bottom-color:rgba(255,255,255,0.15) !important;
  }

  /* État 2 — au défilement : barre NOIRE fixe, plus basse, qui descend (liens blancs). */
  body.px-scrolled header.nav{
    --px-nav-h:78px; background:var(--header-bg, #1f1f1f) !important; border-bottom-color:rgba(255,255,255,0.08) !important; /* gris anthracite du réglage « Apparence », pas un noir pur */
    box-shadow:0 6px 24px rgba(0,0,0,0.35) !important; animation:pxHeaderDrop .8s ease;
  }
  @keyframes pxHeaderDrop{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
}
@media(max-width:980px){
  .px-nav-cta{ display:none; }
  body.px-top header.nav{ background:linear-gradient(180deg, rgba(8,8,9,0.78) 0%, rgba(8,8,9,0) 100%) !important; box-shadow:none !important; border-bottom-color:transparent !important; }
}
@media (prefers-reduced-motion: reduce){ body.px-scrolled header.nav{ animation:none; } }


/* ---------- 3. ACCUEIL : DIAPORAMA IMMERSIF (≥ 981px) ---------- */
@media(min-width:981px){
  .hero{ display:block; position:relative; min-height:100svh; overflow:hidden; background:var(--bg); }
  .hero .aurora{ display:none; }
  .hero-photo{ position:absolute; top:0; right:0; bottom:0; left:auto; width:66%; height:100%; z-index:1; animation:none; }
  .hero-photo .glow{ display:none; }
  .hero-slide-img{
    object-position:center 22%; filter:none;
    transform:scale(1.02); transition:opacity 1.5s ease, transform 8s linear;
  }
  .hero-slide-img.active{ transform:scale(1.12); }
  /* Fondu de la photo vers le fond, côté texte et en bas. */
  .hero-photo::after{
    z-index:3;
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(12,12,13,0.92) 14%, rgba(12,12,13,0.55) 38%, rgba(12,12,13,0.12) 70%, rgba(12,12,13,0.3) 100%),
      linear-gradient(0deg, rgba(12,12,13,0.85) 0%, rgba(12,12,13,0) 34%),
      linear-gradient(180deg, rgba(12,12,13,0.78) 0%, rgba(12,12,13,0.35) 14%, rgba(12,12,13,0) 30%); /* haut assombri : menu lisible sur une photo claire */
  }
  /* Colonne de texte : alignée sur la grille du site (marge = celle de .wrap),
     avec une largeur UTILE constante quelle que soit la largeur de l'écran.
     (La marge gauche grandit sur les grands écrans : elle ne doit jamais
     être déduite de la largeur du texte.) */
  .hero-copy{
    /* Marge gauche du bloc : grille large (1340 px), comme sur le modèle — le bloc
       commence nettement plus à gauche que les sections du dessous. */
    --px-gutter:max(32px, calc((100vw - 1340px) / 2 + 16px));
    position:relative; z-index:4; display:flex; flex-direction:column; justify-content:center;
    box-sizing:border-box; min-height:100svh; width:100%; max-width:calc(var(--px-gutter) + 900px);
    padding:150px 40px 190px var(--px-gutter);
  }
  .hero h1{ font-size:clamp(40px,4.4vw,78px); font-weight:500; line-height:1.06; min-height:2.4em; max-width:860px; }
  .hero-slider{ order:-1; margin:0 0 22px; height:19px; max-width:none; }
  .hero-slide-item{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:19px; }
  .hero-slide-item{ font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--btn, #caf600); }
  .hero p.lede{ max-width:520px; font-size:16.5px; color:#c9c7bf; }
  .hero-slide-dots{ display:none; }
  .hero-cta{ align-items:center; }

  /* Panneau de contrôle du diaporama */
  .px-hero-ctl{
    position:absolute; z-index:5; left:max(32px, calc((100vw - 1340px) / 2 + 16px)); right:max(32px, calc((100vw - 1340px) / 2 + 16px)); bottom:44px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  }
  .px-hero-count{ font-family:var(--font-display); color:#fff; display:flex; align-items:baseline; gap:10px; }
  .px-hero-count b{ font-size:34px; font-weight:500; line-height:1; min-width:1.5em; }
  .px-hero-count span{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:#8f8d86; letter-spacing:0.08em; }
  .px-hero-bar{ flex:1; max-width:340px; height:2px; background:rgba(255,255,255,0.16); position:relative; overflow:hidden; align-self:center; margin:0 8px 12px; }
  .px-hero-bar i{ position:absolute; inset:0; background:var(--btn, #caf600); transform-origin:left; transform:scaleX(0); }
  .px-hero-bar i.run{ animation:pxBar 5.2s linear forwards; }
  @keyframes pxBar{ to{ transform:scaleX(1); } }
  .px-hero-arrows{ display:flex; gap:10px; margin-left:auto; margin-right:86px; } /* laisse la place au bouton WhatsApp flottant */
  .px-hero-arrows button{
    width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,0.28); background:rgba(12,12,13,0.35);
    color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);
    transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .35s var(--ease-out);
  }
  .px-hero-arrows button:hover{ background:var(--btn, #caf600); border-color:var(--btn, #caf600); color:#0a0a0a; transform:scale(1.06); }
  .px-hero-arrows svg{ width:18px; height:18px; }
  .px-scroll-hint{
    position:absolute; z-index:5; right:28px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center;
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.55);
    display:flex; align-items:center; gap:14px;
  }
  .px-scroll-hint::after{ content:''; width:54px; height:1px; background:rgba(255,255,255,0.4); animation:pxHint 2.4s ease-in-out infinite; transform-origin:left; }
  @keyframes pxHint{ 0%,100%{ transform:scaleX(.35); } 50%{ transform:scaleX(1); } }
}

/* ---------- 4. BOUTONS ET FLÈCHES ---------- */
.btn{ /* « background-color » en transition : pas de liseré de l'ancienne couleur au survol */
  position:relative; overflow:hidden; isolation:isolate; border-radius:100px; padding:14px 26px; font-weight:600;
  transition:color .35s ease, border-color .35s ease, background-color .2s ease .3s, transform .4s var(--ease-out), box-shadow .4s ease;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn.primary::before{ background:#0d0d0e; }
.btn.ghost::before{ background:var(--btn, #caf600); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn.primary:hover{ color:var(--btn, #caf600); filter:none; border-color:#0d0d0e; box-shadow:0 12px 28px rgba(0,0,0,0.25); }
.btn.ghost:hover{ color:#0a0a0a; border-color:var(--btn, #caf600); }

/* Gros bouton rond à flèche (accueil) */
.px-arrow-btn{
  width:86px; height:86px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden;
  transition:border-color .4s ease, color .4s ease, transform .5s var(--ease-out);
}
.px-arrow-btn::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--btn, #caf600); transform:scale(0); transition:transform .5s var(--ease-out); }
.px-arrow-btn svg{ position:relative; width:28px; height:28px; transition:transform .5s var(--ease-out); }
.px-arrow-btn:hover{ border-color:var(--btn, #caf600); color:#0a0a0a; transform:rotate(-8deg); }
.px-arrow-btn:hover::before{ transform:scale(1); }
.px-arrow-btn:hover svg{ transform:translate(4px,-4px); }

/* ---------- 5. MOUVEMENT AU DÉFILEMENT ---------- */
/* Barre de progression de lecture, tout en haut de l'écran. */
.px-progress{ display:none; } /* le site a déjà sa barre de progression (script.js) : pas de doublon */
.px-progress i{ display:block; height:100%; background:var(--btn, #caf600); transform-origin:left; transform:scaleX(var(--px-p, 0)); }

/* Apparitions plus amples et plus douces. */
.reveal{ transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal:not(.is-visible){ transform:translateY(34px); }

/* Titres de section : révélés par un masque qui remonte. */
.section-head h2, .sv-head h2{ clip-path:inset(0 0 100% 0); transform:translateY(22px); transition:clip-path 1s var(--ease-out), transform 1s var(--ease-out); }
.section-head.is-visible h2, .sv-head.is-visible h2, .is-visible > .section-head h2, .is-visible > .sv-head h2,
.px-ready .section-head.px-in h2, .px-ready .sv-head.px-in h2{ clip-path:inset(0 0 -10% 0); transform:none; }
/* Sécurité : sans JavaScript ou si l'observateur échoue, les titres restent visibles. */
html:not(.px-ready) .section-head h2, html:not(.px-ready) .sv-head h2{ clip-path:none; transform:none; }

/* Images : léger zoom au survol des cartes. */
.blog-card-media img, .price-card, .sv-card img, .webproj-card img{ will-change:transform; }

/* Numéros de section en étiquette. */
.section-num{ display:inline-flex; align-items:center; gap:10px; letter-spacing:0.14em; font-size:12px; }
.section-num::before{ content:''; width:26px; height:2px; background:currentColor; }

/* Bandeau final : fond qui se déplace doucement au défilement. */
.cta-band{ position:relative; overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .hero-slide-img, .hero-slide-img.active{ transform:none; transition:opacity .4s ease; }
  .section-head h2, .sv-head h2{ clip-path:none; transform:none; transition:none; }
  .px-hero-bar i.run{ animation:none; transform:scaleX(1); }
  .btn::before, .px-arrow-btn::before{ transition:none; }

}

/* ---------- Mobile et tablette (≤ 980px) ----------
   Le panneau de contrôle et le gros bouton rond sont réservés au grand écran :
   sur téléphone, le diaporama garde ses points de navigation sur la photo. */
.px-hero-ctl{ display:none; }
.hero-cta{ align-items:center; }
@media(min-width:981px){ .px-hero-ctl{ display:flex; } }
@media(max-width:980px){
  .px-arrow-btn{ display:none; }

  .hero h1{ font-size:clamp(34px,9.6vw,54px); font-weight:500; line-height:1.08; min-height:0; }
  .hero-slider{ margin-top:16px; }
  .hero-cta .btn{ padding:13px 22px; }
  .section-head h2{ font-size:clamp(27px,7.4vw,38px); }
  .btn{ padding:13px 22px; }
}

/* ---------- 6. CHIFFRES CLÉS : rangée claire, flèche et filets verticaux ---------- */
.stats-band{ background:#0d0d0e; color:#f4f2ea; padding:76px 0; border-top:none; border-bottom:1px solid rgba(255,255,255,0.08); } /* fond noir conservé */
.stats-band .aurora{ display:none; }
.stats-grid{ gap:0; }
.stats-band .stat-item,
.stats-band .stat-item:hover{
  background:none; border:none; border-radius:0; box-shadow:none; text-align:left; transform:none;
  padding:4px 44px; border-left:1px solid rgba(255,255,255,0.14);
}
.stats-band .stat-item:first-child{ border-left:none; padding-left:0; }
.stats-band .stat-num,
.stats-band .stat-item:hover .stat-num{
  display:flex; align-items:center; gap:6px; color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:clamp(38px,3.8vw,58px); letter-spacing:0; line-height:1;
}
.stats-band .stat-num span, .stats-band .stat-item:hover .stat-num span{ color:inherit; }
/* Flèche diagonale à droite du nombre : elle s'envole au survol. */
.stats-band .stat-num::after{
  content:''; width:30px; height:30px; margin-left:34px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23caf600' stroke-width='2'%3E%3Cpath d='M3 27 27 3M6 3h21v21'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s var(--ease-out);
}
.stats-band .stat-item:hover .stat-num::after{ transform:translate(6px,-6px); }
.stats-band .stat-label,
.stats-band .stat-item:hover .stat-label{
  font-family:'Inter', sans-serif; font-size:16px; font-weight:400; line-height:1.65; letter-spacing:0; text-transform:none;
  color:#b5b3ab; margin-top:22px; max-width:250px;
}
@media(max-width:980px){
  .stats-band{ padding:52px 0; }
  .stats-band .stat-item, .stats-band .stat-item:hover{ padding:22px 0 22px 22px; border-left:1px solid rgba(255,255,255,0.14); }
  .stats-band .stat-item:nth-child(odd){ border-left:none; padding-left:0; }
  .stats-band .stat-num::after{ width:22px; height:22px; margin-left:16px; }
  .stats-band .stat-label, .stats-band .stat-item:hover .stat-label{ font-size:14.5px; margin-top:12px; }
}

/* ---------- 7. TÉMOIGNAGE À LA UNE : photo ronde + guillemets, citation en grand ---------- */
.px-testi-on .section-head h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.px-testi-on .section-head, .px-testi-on .testi-home-carousel, .px-testi-on .testi-home-nav{ display:none !important; }
.px-testi-on{ background:#e3e6ed !important; } /* gris clair, pour détacher la section du blanc des sections voisines */
.px-testi{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(40px,7vw,110px); align-items:center; }
.px-testi-visual{ position:relative; display:flex; align-items:center; height:170px; }
.px-testi-mark{
  width:160px; height:160px; border-radius:50%; border:1px solid #16171f; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:#fff; color:#16171f;
}
.px-testi-mark svg{ width:40px; height:40px; }
.px-testi-photo{
  width:160px; height:160px; border-radius:50%; overflow:hidden; flex-shrink:0; margin-left:-30px; position:relative;
  background:var(--btn, #caf600); color:#0a0a0a; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:54px; font-weight:600;
}
.px-testi-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.px-testi-eyebrow{ display:block; font-size:15px; font-weight:700; color:var(--px-green); margin-bottom:26px; }
.px-testi-text{
  margin:0; font-size:clamp(19px,1.9vw,26px); line-height:1.55; font-weight:700; color:#16171f; letter-spacing:-0.005em;
  min-height:6.2em;
}
.px-testi-text.is-long{ font-size:clamp(17px,1.5vw,21px); }
.px-testi-foot{ display:flex; align-items:center; gap:34px; margin-top:34px; flex-wrap:wrap; }
.px-testi-arrows{ display:flex; gap:6px; }
.px-testi-arrows button{
  width:46px; height:46px; border-radius:50%; border:1px solid transparent; background:none; color:#16171f; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .3s ease, background-color .3s ease, transform .4s var(--ease-out);
}
.px-testi-arrows button:hover{ border-color:#16171f; background:#16171f; color:#fff; }
.px-testi-arrows svg{ width:20px; height:20px; }
.px-testi-who strong{ display:block; font-size:16.5px; font-weight:700; color:#16171f; }
.px-testi-who span{ display:block; font-size:14px; color:#4b4d5c; margin-top:4px; }
.px-testi-all{ margin-left:auto; font-size:14px; font-weight:700; color:#16171f; border-bottom:2px solid var(--btn, #caf600); padding-bottom:3px; }
.px-testi-all:hover{ color:var(--px-green); }
/* Changement de témoignage : fondu + léger glissement. */
.px-testi-text, .px-testi-who, .px-testi-photo{ transition:opacity .45s ease, transform .6s var(--ease-out); }
.px-testi.is-switching .px-testi-text, .px-testi.is-switching .px-testi-who{ opacity:0; transform:translateY(14px); }
.px-testi.is-switching .px-testi-photo{ opacity:0; transform:scale(.92); }
@media(max-width:860px){
  .px-testi{ grid-template-columns:1fr; gap:30px; }
  .px-testi-visual{ height:auto; }
  .px-testi-mark, .px-testi-photo{ width:108px; height:108px; }
  .px-testi-mark svg{ width:28px; height:28px; }
  .px-testi-photo{ margin-left:-22px; font-size:38px; }
  .px-testi-text{ min-height:0; }
  .px-testi-foot{ gap:18px; }
  .px-testi-all{ margin-left:0; width:100%; border-bottom:none; text-decoration:underline; }
}

/* ---------- 8. BANNIÈRE DES PAGES INTÉRIEURES ----------
   Photo en fond sur toute la largeur (fixe au défilement : effet de parallaxe),
   voile sombre, grand titre centré, fil d'Ariane centré en bas.
   La photo est choisie par page dans premium.js (variable --px-banner-img).
   Non concernée : la page du guide gratuit (.guide-banner), qui a sa mise en page. */
.solution-banner:not(.guide-banner){
  position:relative; isolation:isolate; overflow:hidden; display:flex;
  min-height:clamp(430px, 58vh, 620px); padding:0; border-bottom:none; background:#0d0d0e;
}
.solution-banner:not(.guide-banner)::before{
  content:''; display:block !important; position:absolute; inset:0; z-index:-2;
  background-image:var(--px-banner-img, url('assets/img/hero-photo-direction-artistique.jpg'));
  background-size:cover; background-position:center 30%; background-repeat:no-repeat; background-attachment:fixed;
}
.solution-banner:not(.guide-banner)::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,8,9,0.86) 0%, rgba(8,8,9,0.58) 42%, rgba(8,8,9,0.80) 100%);
}
.solution-banner:not(.guide-banner) > .wrap{
  width:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:calc(var(--px-nav-h, 96px) + 40px); padding-bottom:42px;
}
.solution-banner:not(.guide-banner) h1,
.solution-banner:not(.guide-banner) .px-banner-h{
  order:1; margin:auto 0 0; max-width:1100px; color:#fff;
  font-size:clamp(38px, 5.2vw, 82px); line-height:1.05;
}
.solution-banner:not(.guide-banner) .wrap > p:not(.article-preview-note){
  order:2; margin:20px auto 0; max-width:680px; color:#d6d4cc; font-size:17px; line-height:1.65;
}
.solution-banner:not(.guide-banner) .article-preview-note{ order:0; margin:0 0 6px; }
.solution-banner:not(.guide-banner) .hero-cta{ order:3; justify-content:center; margin-top:30px; }
.solution-banner:not(.guide-banner) .breadcrumb{
  order:9; margin:auto 0 0; padding-top:44px; justify-content:center;
  font-family:'Inter', sans-serif; font-size:15px; letter-spacing:0; text-transform:none; color:#fff;
}
.solution-banner:not(.guide-banner) .breadcrumb a{ color:#fff; font-weight:700; }
.solution-banner:not(.guide-banner) .breadcrumb a:hover{ color:var(--btn, #caf600); }
.solution-banner:not(.guide-banner) .breadcrumb .current{ color:#e6e4dc; font-weight:400; }
.solution-banner:not(.guide-banner) .article-meta{ color:#e6e4dc; }
@media(max-width:980px){
  .solution-banner:not(.guide-banner){ min-height:380px; }
  /* « fixed » est mal géré sur mobile (iOS) : photo normale, sans parallaxe. */
  .solution-banner:not(.guide-banner)::before{ background-attachment:scroll; }
  .solution-banner:not(.guide-banner) > .wrap{ padding-top:104px; padding-bottom:30px; }
  .solution-banner:not(.guide-banner) h1, .solution-banner:not(.guide-banner) .px-banner-h{ font-size:clamp(32px, 9vw, 48px); }
  .solution-banner:not(.guide-banner) .wrap > p:not(.article-preview-note){ font-size:15.5px; }
  .solution-banner:not(.guide-banner) .breadcrumb{ padding-top:30px; font-size:13.5px; flex-wrap:wrap; }
}

/* Bannière construite par premium.js (Contact, Formations) : même rendu que les autres. */
.px-banner-h{ font-family:var(--font-display); font-weight:500; letter-spacing:0.012em; word-spacing:0.1em; }
.solution-banner.px-banner-built h1{ font-size:clamp(34px, 4.4vw, 68px); }
.solution-banner.px-banner-built h1 span{ color:var(--btn, #caf600); background:none; -webkit-text-fill-color:currentColor; animation:none; }
/* Contact : le titre est passé dans la bannière, la section commence par ses coordonnées. */
.contact.px-contact-lead{ padding-top:90px; }
.contact.px-contact-lead .aurora{ display:none; }

/* Témoignage à la une : nom et fonction sous la photo, centrés sur elle. */
.px-testi-left{ display:flex; flex-direction:column; }
.px-testi-who{ width:230px; margin:22px 0 0 95px; text-align:center; } /* centre de la photo = 210px */
.px-testi-foot{ margin-top:30px; }
@media(max-width:860px){
  .px-testi-who{ width:210px; margin:16px 0 0 35px; }
}

/* Témoignage à la une — même jeu d'animation que le modèle :
   le cercle des guillemets arrive en roulant depuis la gauche, la photo en
   roulant depuis la droite (1,3 s), le texte glisse à l'horizontale dans le
   sens de la navigation (--px-dir : 1 = suivant, -1 = précédent). */
@keyframes pxRollFromLeft{ 0%{ opacity:0; transform:translate3d(-100%,0,0) rotate(-100deg); } 100%{ opacity:1; transform:none; } }
@keyframes pxRollFromRight{ 0%{ opacity:0; transform:translate3d(100%,0,0) rotate(100deg); } 100%{ opacity:1; transform:none; } }
@keyframes pxTextSlide{ 0%{ opacity:0; transform:translate3d(calc(70px * var(--px-dir, 1)),0,0); } 100%{ opacity:1; transform:none; } }
@keyframes pxWhoUp{ 0%{ opacity:0; transform:translate3d(0,14px,0); } 100%{ opacity:1; transform:none; } }
.px-testi.px-roll .px-testi-mark{ animation:pxRollFromLeft 1.3s ease both; }
.px-testi.px-roll .px-testi-photo{ animation:pxRollFromRight 1.3s ease both; }
.px-testi.px-roll .px-testi-text{ animation:pxTextSlide .75s cubic-bezier(.16,1,.3,1) both; }
.px-testi.px-roll .px-testi-who{ animation:pxWhoUp .7s ease .45s both; }
/* Sortie de l'ancien témoignage, juste avant l'entrée du nouveau. */
.px-testi-mark{ transition:opacity .3s ease, transform .3s ease; }
.px-testi.is-switching .px-testi-text{ opacity:0; transform:translate3d(calc(-50px * var(--px-dir, 1)),0,0); }
.px-testi.is-switching .px-testi-who{ opacity:0; transform:none; }
.px-testi.is-switching .px-testi-mark, .px-testi.is-switching .px-testi-photo{ opacity:0; transform:scale(.9); }
.px-testi-text, .px-testi-who, .px-testi-photo{ transition:opacity .3s ease, transform .3s ease; }
@media (prefers-reduced-motion: reduce){
  .px-testi.px-roll .px-testi-mark, .px-testi.px-roll .px-testi-photo,
  .px-testi.px-roll .px-testi-text, .px-testi.px-roll .px-testi-who{ animation:none; }
}

/* ---------- 9. MENU MOBILE (≤ 980px) — même jeu que le modèle ----------
   Panneau BLANC qui glisse depuis la GAUCHE, voile sombre sur le reste de
   l'écran, bouton rond de fermeture en haut à droite, liens sombres en gras
   avec chevron, sous-menus en accordéon. */
.px-nav-close{ display:none; }
@media(max-width:980px){
  header.nav nav{
    left:0; right:auto; width:260px; max-width:82vw; height:100vh; height:100dvh;
    background:#fff; border-left:none; box-shadow:none;
    padding:56px 0 24px; gap:0; justify-content:flex-start; align-items:stretch;
    transform:translateX(-100%); opacity:0; z-index:3;
    transition:transform .35s ease .25s, opacity .3s ease .25s;
  }
  header.nav nav.open{ transform:translateX(0); opacity:1; box-shadow:20px 0 60px rgba(0,0,0,0.25); }

  /* Liens de premier niveau */
  header.nav nav > a,
  header.nav nav .nav-dropdown-trigger{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:0 18px; line-height:42px; height:auto; margin:0;
    font-size:14.5px; font-weight:700; letter-spacing:0.4px; text-transform:capitalize; color:#16171f;
  }
  header.nav nav > a::after, header.nav nav .nav-dropdown-trigger::after,
  header.nav nav a.active::after{ display:none !important; }
  header.nav nav > a:hover, header.nav nav .nav-dropdown-trigger:hover,
  header.nav nav > a.active, header.nav nav .nav-dropdown-trigger.active,
  header.nav nav .nav-dropdown.is-open > .nav-dropdown-trigger{ color:var(--px-green); }
  header.nav nav .nav-dropdown{ width:100%; gap:0; }

  /* Chevron à droite : pointe vers la droite, puis vers le bas quand c'est ouvert. */
  header.nav nav .nav-dropdown-caret{
    font-size:0; width:7px; height:7px; flex-shrink:0; margin-right:4px;
    border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
    transform:rotate(-45deg); transition:transform .3s ease;
  }
  header.nav nav .nav-dropdown.is-open > .nav-dropdown-trigger .nav-dropdown-caret{ transform:rotate(45deg); }

  /* Sous-menus */
  header.nav nav .nav-dropdown-menu{ padding:0 0 8px; }
  header.nav nav .nav-dropdown-menu-inner{ border-left:none; gap:0; }
  header.nav nav .nav-dropdown-menu a{ display:block; padding:0 18px 0 34px; line-height:38px; }
  header.nav nav .nav-dropdown-item-title{ font-size:14px; font-weight:500; letter-spacing:0.3px; color:#16171f; }
  header.nav nav .nav-dropdown-menu a:hover .nav-dropdown-item-title{ color:var(--px-green); }
  header.nav nav .nav-dropdown-item-desc{ display:none; }

  /* Réseaux sociaux en bas du panneau */
  header.nav nav .nav-social{ margin:22px 18px 0; padding:20px 0 0; border-left:none; border-top:1px solid #e9ebee; }
  header.nav nav .nav-social a{ color:#16171f; border-color:rgba(0,0,0,0.2); }

  /* Voile sombre + bouton de fermeture */
  .nav-backdrop.show{ background:rgba(0,0,0,0.6); }
  body.nav-open .nav-toggle{ opacity:0; pointer-events:none; } /* la fermeture passe par le bouton rond */
  body.nav-open .nav-toggle span{ transform:none !important; }
  header.nav nav > a.px-nav-cta{ display:none; } /* bouton réservé au grand écran */
  .px-nav-close{
    display:flex; align-items:center; justify-content:center; position:fixed; top:26px; right:22px; z-index:6;
    width:38px; height:38px; border-radius:50%; border:1px solid #fff; background:transparent; color:#fff; cursor:pointer; padding:0;
    opacity:0; transform:scale(.8); pointer-events:none; transition:opacity .4s ease, transform .4s ease, background-color .3s ease, color .3s ease;
  }
  .px-nav-close svg{ width:14px; height:14px; }
  body.nav-open .px-nav-close{ opacity:1; transform:scale(1); pointer-events:auto; transition-delay:.45s, .45s, 0s, 0s; }
  .px-nav-close:hover{ background:#fff; color:#16171f; }
}

/* Menu mobile : panneau sombre (même gris anthracite que la barre du menu),
   liens blancs, page en cours et survol en vert. */
@media(max-width:980px){
  header.nav nav{ background:var(--header-bg, #1f1f1f); }
  header.nav nav.open{ box-shadow:20px 0 60px rgba(0,0,0,0.45); }
  header.nav nav > a, header.nav nav .nav-dropdown-trigger{ color:#fff; }
  header.nav nav > a:hover, header.nav nav .nav-dropdown-trigger:hover,
  header.nav nav > a.active, header.nav nav .nav-dropdown-trigger.active,
  header.nav nav .nav-dropdown.is-open > .nav-dropdown-trigger{ color:var(--btn, #caf600); }
  header.nav nav .nav-dropdown-item-title{ color:#d9d7cf; }
  header.nav nav .nav-dropdown-menu a:hover .nav-dropdown-item-title{ color:var(--btn, #caf600); }
  header.nav nav .nav-social{ border-top-color:rgba(255,255,255,0.14); }
  header.nav nav .nav-social a{ color:#fff; border-color:rgba(255,255,255,0.3); }
}

/* Témoignage à la une — ajustements :
   cercle des guillemets en noir, colonnes rapprochées, étoiles avant la
   citation, texte plus petit et moins gras, plus de lien « Voir tous les avis ». */
.px-testi{ grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:clamp(24px,3vw,48px); }
.px-testi-mark{ background:#16171f; border-color:#16171f; color:#fff; }
.px-testi-stars{ display:flex; gap:0; margin:0 0 16px; font-size:19px; letter-spacing:4px; line-height:1; color:#f5a623; }
.px-testi-stars i{ font-style:normal; color:#d5d7de; }
.px-testi-eyebrow{ margin-bottom:16px; }
.px-testi-text{ font-size:clamp(17px,1.35vw,20.5px); font-weight:500; line-height:1.7; min-height:5.2em; letter-spacing:0; }
.px-testi-text.is-long{ font-size:clamp(15.5px,1.15vw,17.5px); }
.px-testi-foot{ margin-top:24px; }
.px-testi.px-roll .px-testi-stars{ animation:pxWhoUp .6s ease .1s both; }
.px-testi.is-switching .px-testi-stars{ opacity:0; }
.px-testi-stars{ transition:opacity .3s ease; }
@media(max-width:860px){ .px-testi{ grid-template-columns:minmax(0,1fr); gap:26px; } .px-testi-text{ min-height:0; } }

/* Boutons verts sur fond SOMBRE (pied de page, accueil, bannières, blog, chiffres) :
   au survol ils se remplissent de BLANC — le remplissage noir prévu pour les fonds
   clairs les rendait invisibles (noir sur noir). */
footer .btn.primary::before, .site-footer .btn.primary::before,
.hero .btn.primary::before, .solution-banner .btn.primary::before,
.blogx .btn.primary::before, .stats-band .btn.primary::before,
.article-cta .btn.primary::before{ background:#fff; }
footer .btn.primary:hover, .site-footer .btn.primary:hover,
.hero .btn.primary:hover, .solution-banner .btn.primary:hover,
.blogx .btn.primary:hover, .stats-band .btn.primary:hover,
.blogx .article-cta .btn.primary:hover{
  color:#0a0a0a; border-color:#fff; background-color:#fff; filter:none; box-shadow:0 12px 28px rgba(0,0,0,0.45);
}
/* L'icône du bouton suit la couleur du texte. */
.btn svg{ transition:transform .4s var(--ease-out); }
.btn:hover svg{ transform:scale(1.08); }

/* Accueil : barre de progression du diaporama sous le titre (compteur supprimé) ;
   en bas, il ne reste que les deux flèches, à droite. */
.px-hero-bar{ display:none; }
@media(min-width:981px){
  .hero-copy .px-hero-bar{
    display:block; flex:none; align-self:flex-start; width:340px; max-width:100%; height:2px; margin:30px 0 0;
    background:rgba(255,255,255,0.18); position:relative; overflow:hidden;
  }
  .hero-copy .px-hero-bar + p.lede, .hero p.lede{ margin-top:26px; }
  .px-hero-ctl{ justify-content:flex-end; }
}

/* ---------- Accueil : disposition et distances du modèle (≥ 981px) ----------
   - le bloc accroche + titre part du haut (à ~110 px sous la barre du menu) ;
   - le bouton rond et les boutons sont juste sous le titre ;
   - en bas à gauche : filet de progression, puis texte court + flèches côte à côte. */
@media(min-width:981px){
  .hero-copy{
    justify-content:flex-start;
    padding-top:calc(var(--px-nav-h, 96px) + 108px); padding-bottom:270px;
  }
  .hero-slider{ margin:0 0 18px; }
  .hero h1{ font-size:clamp(36px,3.3vw,62px); line-height:1.17; min-height:2.34em; max-width:820px; }
  .hero-cta{ margin-top:34px; }

  .px-hero-foot{
    position:absolute; z-index:5; bottom:92px;
    left:max(32px, calc((100vw - 1340px) / 2 + 16px)); width:min(540px, 44vw);
  }
  .px-hero-foot .px-hero-bar{
    display:block; width:100%; height:2px; margin:0 0 28px; max-width:none; align-self:auto; flex:none;
    background:rgba(255,255,255,0.22); position:relative; overflow:hidden;
  }
  .px-hero-foot-row{ display:flex; align-items:center; gap:36px; }
  .px-hero-foot-row p.lede{ flex:1; margin:0; min-height:0; max-width:380px; font-size:15.5px; line-height:1.7; color:#e6e4dc; }
  .px-hero-foot .px-hero-ctl{ position:static; display:flex; flex:none; left:auto; right:auto; bottom:auto; }
  .px-hero-foot .px-hero-arrows{ margin:0; gap:8px; }
  .px-hero-foot .px-hero-arrows button{ width:48px; height:48px; }
}

/* Accueil (≥ 981px) : seul le bouton rond reste sous le titre, comme sur le modèle.
   Sur mobile, où le bouton rond est masqué, les deux boutons restent affichés. */
@media(min-width:981px){
  .hero .hero-cta .btn{ display:none; }
}

/* =====================================================================
   10. SECTIONS — même langage que le modèle
   Grille large (1340 px) alignée sur le diaporama, angles nets, ombres
   très douces, étiquette + grand titre à gauche / texte à droite,
   liens soulignés à flèche, boutons rectangulaires.
   ===================================================================== */
:root{
  --px-gutter:max(32px, calc((100vw - 1340px) / 2 + 16px));
  --px-ink:#16171f; --px-dim:#5c5e6b; --px-soft:#e3e6ed; --px-dark:#1b1b1d;
  --px-shadow:0 5px 60px rgba(40,40,40,0.07);
}
/* Polices : « Space Grotesk » n'est plus chargée — sans ceci, ces éléments tombent en police à empattements. */
.footer-col h4, .solution-price{ font-family:'Inter', sans-serif; }
.footer-brand .logo, .footer-brand-name, .solution-media-placeholder{ font-family:var(--font-display); font-weight:500; }

/* 10.1 Grille et rythme */
@media(min-width:981px){
  .wrap{ max-width:none; padding-left:var(--px-gutter); padding-right:var(--px-gutter); }
  .section{ padding:124px 0; }
}
.section{ border-bottom:none; }
.section.alt{ background:var(--px-soft); }

/* 10.2 En-tête de section : étiquette, grand titre, texte en vis-à-vis */
.section-num{ font-family:'Inter', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--px-green); margin-bottom:18px; }
.section-head{ margin-bottom:64px; }
.section-head h2{ font-size:clamp(30px,3.15vw,48px); line-height:1.16; color:var(--px-ink); max-width:780px; }
.section-head > p, .section-head-side p{ font-size:16.5px; line-height:1.75; color:var(--px-dim); }
@media(min-width:981px){
  .section-head{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:70px; align-items:end; }
  .section-head > p{ max-width:470px; padding:0 0 6px 26px; border-left:2px solid var(--btn, #caf600); justify-self:end; }
  .section-head-side{ justify-self:end; }
}

/* 10.3 Boutons : rectangulaires, comme le bouton du menu */
.btn, .cta-band-btn, .footer-cta{ border-radius:4px; }
.btn{ padding:16px 28px; font-weight:700; font-size:14.5px; letter-spacing:0.2px; }
.cta-band-btn{ padding:19px 32px; font-weight:700; }
.cta-band-btn:hover{ transform:translateY(-3px); }

/* 10.4 Logos partenaires : rangée entre deux filets */
.trust-strip{ padding:0; background:#fff; border-bottom:1px solid #ececf0; }
.trust-strip .wrap{ padding-top:46px; }
.trust-label{ display:inline-flex; align-items:center; gap:14px; font-size:12.5px; letter-spacing:0.12em; color:var(--px-dim); }
.trust-label::before, .trust-label::after{ content:''; width:34px; height:1px; background:#cfd1d9; }
.partners-carousel{ padding:22px 0 30px; }
.partner-badge{ padding:14px 34px; min-height:84px; }

/* 10.5 Cartes de service : photo pleine largeur, onglet à flèche, lien souligné */
.service-card{
  padding:0 0 34px; border:none; border-radius:0; background:#fff; box-shadow:var(--px-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .6s var(--ease-out), box-shadow .5s ease, background-color .35s ease;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 22px 60px rgba(20,20,20,0.13); }
.service-illustration{ position:relative; height:auto; aspect-ratio:16/11; border-radius:0; margin:0 0 28px; background:#e9eaee; flex-shrink:0; }
.service-illustration img{ transition:transform 1.4s var(--ease-out); }
.service-card:hover .service-illustration img{ transform:scale(1.08); }
.service-illustration::after{
  content:''; position:absolute; left:0; bottom:0; width:52px; height:46px; box-sizing:border-box;
  border-left:6px solid var(--btn, #caf600);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316171f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:width .5s var(--ease-out), border-color .35s ease;
}
.service-card:hover .service-illustration::after{ width:64px; border-left-color:#16171f; }
.service-card h3{ padding:0 30px; font-size:20px; line-height:1.35; letter-spacing:-0.01em; margin-bottom:12px; }
.service-card p{ padding:0 30px; font-size:14.5px; line-height:1.75; margin-bottom:24px; }
.service-card-more{
  align-self:flex-start; margin:auto 30px 0; padding-bottom:4px;
  font-family:'Inter', sans-serif; font-size:14px; font-weight:700; letter-spacing:0.2px; text-transform:none;
  color:var(--px-ink); border-bottom:2px solid var(--px-ink);
}
.svc-home-page{ gap:26px; padding:0 2px 46px; }
@media(min-width:981px){
  .svc-home-page > .service-card{ flex:0 0 calc((100% - 3*26px)/4); max-width:calc((100% - 3*26px)/4); }
}
/* Navigation des carrousels : repères en traits à gauche, flèches fines à droite */
.svc-home-nav{ justify-content:flex-end; gap:6px; margin-top:8px; }
.svc-home-dots{ order:-1; margin-right:auto; }
.svc-home-dots span, .work-dots span{ width:22px; height:3px; border-radius:0; background:#d5d7de; }
.svc-home-dots span.active, .work-dots span.active{ width:44px; background:var(--px-ink); transform:none; }
.svc-home-dots span:hover{ transform:none; }
.svc-home-arrow{ width:48px; height:48px; border:1px solid transparent; background:none; box-shadow:none; font-size:18px; }

/* 10.6 « Comment je travaille » : fiches blanches empilées sur une photo fixe */
.px-steps{ position:relative; background:#111 !important; isolation:isolate; overflow:clip !important; } /* « clip » et non « hidden » : le titre peut rester collé pendant le défilement */
.px-steps::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('assets/img/hero-photo-direction-artistique.jpg') center/cover no-repeat fixed;
}
.px-steps::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(14,14,15,0.93) 0%, rgba(14,14,15,0.8) 55%, rgba(14,14,15,0.62) 100%);
}
.px-steps .section-head h2{ color:#fff; }
.px-steps .section-num{ color:var(--btn, #caf600); }
.px-steps .section-head > p{ color:#c9c7bf; }
.px-steps .process-grid{ display:flex; flex-direction:column; gap:26px; }
.px-steps .process-grid::before{ display:none; }
.px-steps .process-step{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  text-align:left; background:#fff; border-radius:0; padding:34px 40px 36px; box-shadow:0 20px 60px rgba(0,0,0,0.25);
  transition:transform .6s var(--ease-out), background-color .35s ease;
}
.px-steps .process-step:hover{ transform:translateX(-10px); box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.px-steps .process-num{
  width:50px; height:50px; margin:0 24px 0 0; background:#fff; border:1px solid #d9dbe2; color:var(--px-ink);
  font-size:15px; font-weight:700; box-shadow:none;
}
.px-steps .process-step h3{ margin:0; padding:6px 0 6px 26px; border-left:1px solid #e3e5ea; font-size:20px; line-height:1.35; }
.px-steps .process-step p{ grid-column:1 / -1; margin-top:24px; padding-top:22px; border-top:1px solid #e3e5ea; font-size:15px; line-height:1.75; }
@media(min-width:981px){
  .px-steps > .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:90px; align-items:start; }
  .px-steps .section-head{ display:block; position:sticky; top:150px; margin:0; }
  .px-steps .section-head > p{ margin:30px 0 0; max-width:440px; justify-self:start; }
  .px-steps .process-step:nth-child(even){ margin-left:-46px; margin-right:46px; }
}
@media(max-width:980px){
  .px-steps::before{ background-attachment:scroll; }
  .px-steps .process-step{ padding:26px 24px 28px; }
  .px-steps .process-step h3{ font-size:18px; padding-left:18px; }
  .px-steps .process-num{ margin-right:18px; }
}

/* 10.7 Offres : grand panneau sombre, image d'un côté, texte de l'autre */
.solution-block{ gap:0; align-items:stretch; background:var(--px-dark); color:#fff; overflow:hidden; box-shadow:0 30px 70px rgba(20,20,20,0.16); }
.solution-media{ border-radius:0; aspect-ratio:auto; min-height:420px; background:#101011; }
.solution-media img{ transition:transform 1.6s var(--ease-out); }
.solution-block:hover .solution-media img{ transform:scale(1.05); }
.solution-media-placeholder{
  font-size:clamp(140px,17vw,250px); line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--btn, #caf600);
  background:radial-gradient(circle at 30% 30%, #262628 0%, #101011 70%);
}
.solution-copy{ padding:clamp(30px,5vw,74px); display:flex; flex-direction:column; justify-content:center; }
.solution-tagline{ font-family:'Inter', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.08em; color:var(--btn, #caf600); margin-bottom:16px; }
.solution-copy h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(26px,2.6vw,38px); line-height:1.18; color:#fff; letter-spacing:0.012em; margin-bottom:18px; }
.solution-copy p{ color:#b9b7b0; font-size:16px; line-height:1.8; }
.solution-foot{ gap:14px; margin-top:34px; padding-top:30px; border-top:1px solid rgba(255,255,255,0.12); }
.solution-block .btn.ghost{ color:#fff; border-color:rgba(255,255,255,0.3); }
.solution-block .btn.primary::before{ background:#fff; }
.solution-block .btn.primary:hover{ color:#0a0a0a; border-color:#fff; }
.solutions-list{ display:flex; flex-direction:column; gap:40px; }
@media(max-width:860px){ .solution-media{ min-height:240px; width:100%; } .solution-block{ gap:0; } }

/* 10.8 Travaux : grande image, cartouche blanc, flèches en bas à droite */
.work-carousel{ border:none; background:#111; box-shadow:var(--px-shadow); }
.work-slide{ height:clamp(340px,44vw,640px); }
.work-slide img{ filter:none; transition:transform 7s linear; }
.work-slide:hover img{ filter:none; transform:scale(1.06); }
.work-overlay{
  inset:auto auto 0 0; width:min(520px, calc(100% - 130px)); box-sizing:border-box;
  padding:26px 34px 28px; background:#fff; border-left:6px solid var(--btn, #caf600);
}
.work-tag{ font-family:'Inter', sans-serif; font-weight:700; font-size:12px; letter-spacing:0.1em; color:var(--px-green) !important; }
.work-overlay h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2vw,28px); text-transform:none; color:var(--px-ink); margin-top:8px; }
.work-overlay p{ color:var(--px-dim); font-size:14.5px; line-height:1.6; }
.work-arrow{
  top:auto; bottom:0; transform:none; width:60px; height:60px; border-radius:0; border:none;
  background:#fff; color:var(--px-ink); backdrop-filter:none; font-size:18px;
}
.work-arrow-prev{ left:auto; right:61px; }
.work-arrow-next{ right:0; }
.work-arrow:hover{ background:var(--btn, #caf600) !important; color:#0a0a0a !important; transform:none; }
.work-carousel-nav{ justify-content:flex-start; margin-top:26px; }
.work-cta{ justify-content:flex-start; margin-top:34px; }
@media(min-width:981px){
  /* repères à gauche, bouton à droite, sur la même ligne */
  .work-carousel-nav{ float:left; margin-top:52px; }
  .work-cta{ justify-content:flex-end; }
}
@media(max-width:640px){
  .work-overlay{ width:100%; padding:16px 18px 18px; }
  .work-overlay p{ display:none; }
  .work-arrow{ width:46px; height:46px; bottom:auto; top:0; }
  .work-arrow-prev{ right:47px; }
}

/* 10.9 Bandeau final */
.cta-band{ padding:92px 0; }
.cta-band-eyebrow{ font-family:'Inter', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.1em; opacity:1; }
@media(max-width:760px){ .cta-band{ padding:56px 0; } }

/* 10.10 Pied de page */
.site-footer{ padding-top:92px; }
.footer-grid{ padding-bottom:70px; }
.footer-col h4{ font-size:13px; letter-spacing:0.12em; margin-bottom:26px; }
.footer-col{ gap:14px; }
.footer-brand-name{ font-size:20px; letter-spacing:0.012em; }
.footer-social a{ width:42px; height:42px; }
.footer-bottom{ padding-top:28px; padding-bottom:28px; }
@media(max-width:760px){ .site-footer{ padding-top:56px; } .footer-grid{ padding-bottom:44px; } }

/* 10.11 Cartes des pages intérieures : mêmes angles nets */
.price-card, .testi-card, .sv-case, .sv-tier, .sv-web, .sv-svc, .value-card, .quicklink-card, .webproj-card, .icon-card,
.contact-item, .resa-service-card, .fmn-content-card, .fmn-course-card, .blog-card, .sv-faq-item, .sv-plan-col{ border-radius:4px; }

/* 10.12 Pages de service : mêmes étiquettes et mêmes titres que l'accueil */
.sv-head{ max-width:820px; margin-bottom:44px; }
.sv-head h2{ font-size:clamp(26px,2.7vw,40px); letter-spacing:0.012em; line-height:1.18; margin-bottom:14px; }
.sv-head .lp-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:0; margin-bottom:16px; background:none; border:none; border-radius:0;
  font-family:'Inter', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--px-green);
}
.sv-head .lp-eyebrow::before{ content:''; width:26px; height:2px; background:currentColor; }
.sv-dark .sv-head .lp-eyebrow{ color:var(--btn, #caf600); }
@media(min-width:981px){ .sv-section{ padding:100px 0; } }

/* 10.13 Contact et Formations */
.contact-form, .map-frame, .contact-item{ border-radius:4px; }
.contact-form{ box-shadow:var(--px-shadow); }
.fmn-hero h1 span{ color:var(--px-green); } /* le vert clair était illisible sur fond blanc */

/* 10.14 Chiffres clés — survol : plus de pavé lime (texte blanc illisible dessus).
   Le nombre passe au lime, la flèche s'envole, le libellé s'éclaircit. */
section.stats-band .stats-grid .stat-item,
section.stats-band .stats-grid .stat-item:hover{
  background:none !important; background-color:transparent !important; box-shadow:none !important; transform:none !important;
  border-color:rgba(255,255,255,0.14) !important;
}
section.stats-band .stats-grid .stat-item .stat-num,
section.stats-band .stats-grid .stat-item .stat-num *,
section.stats-band .stats-grid .stat-item .stat-label{ transition:color .35s ease; }
section.stats-band .stats-grid .stat-item:hover .stat-num,
section.stats-band .stats-grid .stat-item:hover .stat-num *{ color:#caf600 !important; }
section.stats-band .stats-grid .stat-item:hover .stat-label{ color:#fff !important; }

/* 10.15 « Comment je travaille » — même jeu que le modèle : les fiches se
   collent l'une après l'autre sous le menu et s'empilent pendant le défilement,
   chacune un peu plus large que la précédente. Au survol : pas de pavé lime,
   seul le numéro s'allume. */
.px-steps .process-grid .process-step,
.px-steps .process-grid .process-step:hover{
  background:#fff !important; background-color:#fff !important; border-color:transparent !important;
  transform:none !important; box-shadow:0 20px 60px rgba(0,0,0,0.25) !important;
}
.px-steps .process-step:hover h3{ color:var(--px-ink); }
.px-steps .process-step:hover p{ color:var(--px-dim); }
.px-steps .process-step .process-num{ transition:background-color .35s ease, border-color .35s ease, color .35s ease, transform .5s var(--ease-out); }
.px-steps .process-step:hover .process-num{
  background:var(--card-hover, #caf600) !important; border-color:var(--card-hover, #caf600) !important; color:#0a0a0a !important;
  transform:scale(1.1); box-shadow:none;
}
@media(min-width:981px){
  .px-steps .process-grid{ gap:34px; padding-bottom:10px; }
  .px-steps .process-step, .px-steps .process-step:nth-child(even){ position:sticky; margin:0 48px; }
  .px-steps .process-step:nth-child(1){ top:130px; }
  .px-steps .process-step:nth-child(2){ top:150px; margin:0 32px; }
  .px-steps .process-step:nth-child(3){ top:170px; margin:0 16px; }
  .px-steps .process-step:nth-child(4){ top:190px; margin:0; }
  .px-steps .process-step:nth-child(n+5){ top:210px; margin:0; }
}
@media(min-width:981px) and (max-height:620px){
  .px-steps .process-step, .px-steps .process-step:nth-child(even){ position:relative !important; top:auto !important; } /* écran trop bas : pas d'empilement */
}

/* 10.16 Cartes de service — même carte que le modèle :
   la photo dépasse en haut du fond blanc et se décale vers la droite ;
   en bas à gauche de la photo, un onglet à flèche qui s'ouvre au survol en
   bouton lime « En savoir plus ↗ » ; le titre se colore. Plus de pavé lime. */
.service-card.px-card,
.service-card.px-card:hover{
  position:relative; padding:0 0 40px; overflow:visible; isolation:isolate;
  background:none !important; background-color:transparent !important; box-shadow:none !important;
}
.service-card.px-card:hover{ transform:translateY(-6px); }
.service-card.px-card::before{
  content:''; position:absolute; z-index:-1; inset:46px 0 0 0; background:#fff; box-shadow:var(--px-shadow);
  transition:box-shadow .5s ease;
}
.service-card.px-card:hover::before{ box-shadow:0 24px 60px rgba(20,20,20,0.12); }
.px-card .service-illustration{ margin:0 0 30px 34px; width:auto; overflow:visible; aspect-ratio:10/9; }
.px-card .service-illustration::after{ content:none; }
.service-card.px-card:hover .service-illustration img{ transform:none; }
.px-card h3{ padding:0 28px 0 34px; transition:color .35s ease; }
.px-card p{ padding:0 28px 0 34px; margin-bottom:0; }
.service-card.px-card:hover h3{ color:var(--px-green); }
/* L'onglet */
.px-card .service-card-more,
.service-card.px-card:hover .service-card-more{
  position:absolute; left:-10px; bottom:0; margin:0; padding:0 18px; height:54px; box-sizing:border-box;
  display:inline-flex; align-items:center; border-bottom:none; white-space:nowrap;
  background:#fff; color:#16171f !important; box-shadow:inset 6px 0 0 var(--card-hover, #caf600);
  font-size:15px; font-weight:700; transform:none;
  transition:background-color .4s ease, padding .5s var(--ease-out), box-shadow .4s ease;
}
.px-card .service-card-more span{ display:inline-block; max-width:0; opacity:0; overflow:hidden; transition:max-width .55s var(--ease-out), opacity .35s ease, margin .5s var(--ease-out); }
.px-card .service-card-more svg{ width:17px; height:17px; margin-left:6px; flex-shrink:0; transition:transform .5s var(--ease-out); }
.service-card.px-card:hover .service-card-more{ background:var(--card-hover, #caf600); padding:0 28px; box-shadow:inset 6px 0 0 #16171f; }
.service-card.px-card:hover .service-card-more span{ max-width:220px; opacity:1; margin-right:8px; }
.service-card.px-card:hover .service-card-more svg{ transform:translate(2px,-2px); }
/* Écrans tactiles (pas de survol) : l'onglet est ouvert d'office. */
@media(hover:none){
  .px-card .service-card-more{ background:var(--card-hover, #caf600); padding:0 24px; box-shadow:inset 6px 0 0 #16171f; }
  .px-card .service-card-more span{ max-width:220px; opacity:1; margin-right:8px; }
}
/* Photo en hauteur : elle remplit le cadre sans l'agrandir (toutes les cartes gardent le même format). */
.service-illustration{ min-height:0; }
.service-illustration img{ position:absolute; inset:0; }

/* =====================================================================
   11. ACCUEIL SUR TÉLÉPHONE ET TABLETTE (≤ 980px) — même diaporama que
   sur grand écran : photo en fond sur toute la hauteur, accroche au-dessus
   du titre, bouton rond, puis en bas le filet de progression, le texte
   court et les deux flèches.
   ===================================================================== */
@media(max-width:980px){
  .hero{ display:block; position:relative; min-height:max(600px, 100svh); padding:0; overflow:hidden; background:var(--bg, #0c0c0d); }
  .hero .aurora{ display:none; }
  .hero-photo{ position:absolute; inset:0; width:100%; height:100%; min-height:0; order:0; margin:0; z-index:1; animation:none; border-radius:0; }
  .hero-photo .glow{ display:none; }
  .hero-slide-img{ filter:none; transform:scale(1.02); transition:opacity 1.5s ease, transform 8s linear; }
  .hero-slide-img.active{ transform:scale(1.1); }
  .hero-photo::after{
    content:''; position:absolute; inset:0; z-index:3;
    background:linear-gradient(180deg, rgba(12,12,13,0.9) 0%, rgba(12,12,13,0.74) 34%, rgba(12,12,13,0.58) 58%, rgba(12,12,13,0.92) 100%);
  }
  .hero-copy{
    position:relative; z-index:4; display:flex; flex-direction:column; box-sizing:border-box;
    padding:128px 22px 0; min-height:0;
  }
  .hero-slider{ order:-1; margin:0 0 14px; height:36px; max-width:none; } /* deux lignes possibles : l'accroche n'est plus coupée */
  .hero-slide-item{ white-space:normal; overflow:visible; display:flex; align-items:flex-end; height:36px; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; line-height:1.5; color:var(--btn, #caf600); }
  .hero h1{ font-size:clamp(32px,8.8vw,52px); line-height:1.12; min-height:0; }
  .hero-slide-dots{ display:none; }
  .hero-cta{ margin-top:28px; }
  .hero .hero-cta .btn{ display:none; }
  .hero .px-arrow-btn{ display:inline-flex; width:68px; height:68px; }
  .hero .px-arrow-btn svg{ width:22px; height:22px; }

  .px-hero-foot{ position:absolute; z-index:5; left:22px; right:22px; bottom:30px; }
  .px-hero-foot .px-hero-bar{
    display:block; width:100%; height:2px; margin:0 0 20px; background:rgba(255,255,255,0.22); position:relative; overflow:hidden;
  }
  .px-hero-bar i{ position:absolute; inset:0; background:var(--btn, #caf600); transform-origin:left; transform:scaleX(0); }
  .px-hero-bar i.run{ animation:pxBarM 5.2s linear forwards; }
  .px-hero-foot-row{ display:flex; flex-direction:column; gap:18px; padding-right:78px; } /* place du bouton WhatsApp flottant */
  .px-hero-foot-row p.lede{ margin:0; min-height:0; max-width:460px; font-size:14.5px; line-height:1.65; color:#e6e4dc; }
  .px-hero-foot .px-hero-ctl{ display:flex; position:static; }
  .px-hero-arrows{ display:flex; gap:8px; margin:0; }
  .px-hero-arrows button{
    width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.32); background:rgba(12,12,13,0.35);
    color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .px-hero-arrows button:active{ background:var(--btn, #caf600); border-color:var(--btn, #caf600); color:#0a0a0a; }
  .px-hero-arrows svg{ width:17px; height:17px; }
}
@keyframes pxBarM{ to{ transform:scaleX(1); } }
@media(max-width:980px) and (prefers-reduced-motion: reduce){
  .hero-slide-img, .hero-slide-img.active{ transform:none; }
  .px-hero-bar i.run{ animation:none; transform:scaleX(1); }
}

/* Cartes de service : ombre portée uniquement SOUS la carte, sans débord latéral.
   Le carrousel masque tout ce qui dépasse de son cadre : une ombre large y était
   coupée net à gauche et en bas. Celle-ci tient entièrement dans le cadre. */
.service-card.px-card::before{ box-shadow:0 26px 26px -26px rgba(20,22,30,0.22); }
.service-card.px-card:hover::before{ box-shadow:0 34px 30px -28px rgba(20,22,30,0.34); }
.svc-home-page{ padding-top:10px; } /* la carte qui se soulève au survol n'est plus rognée en haut */
#home-services .section-head, .svc-home-carousel{ margin-top:0; }

/* Chiffres clés — flèche animée au survol, comme sur le modèle :
   elle s'envole vers le haut-droit, puis revient depuis le bas-gauche. */
.stats-band .stat-num::after{ background-position:0 0; background-size:100% 100%; }
.stats-band .stat-item:hover .stat-num::after{ transform:none; animation:pxArrowFly .7s cubic-bezier(.65,0,.35,1); }
@keyframes pxArrowFly{
  0%{ background-position:0 0; }
  45%{ background-position:34px -34px; }
  45.01%{ background-position:-34px 34px; }
  100%{ background-position:0 0; }
}
@media (prefers-reduced-motion: reduce){ .stats-band .stat-item:hover .stat-num::after{ animation:none; } }

/* Diaporama : le bloc du bas (filet + texte + flèches) ne bouge plus d'une
   diapositive à l'autre. Le texte occupe toujours la même hauteur (3 lignes
   sur grand écran, 4 sur téléphone), qu'il soit court ou long, et commence
   toujours à la même place. */
@media(min-width:981px){
  .px-hero-foot-row{ align-items:flex-start; height:calc(15.5px * 1.7 * 3); }
  .px-hero-foot-row p.lede{ height:100%; overflow:visible; }
  .px-hero-foot .px-hero-ctl{ align-self:center; }
}
@media(max-width:980px){
  .px-hero-foot-row p.lede{ height:calc(14.5px * 1.65 * 4); overflow:visible; }
}

/* 10.17 Fiches d'étapes : illustration ronde (photo + pastille à icône), comme le modèle.
   La photo et l'icône se choisissent par étape dans le dashboard (Page Builder). */
.px-steps .process-media{
  grid-column:1 / -1; position:relative; width:min(230px, 62%); aspect-ratio:1; margin:28px auto 0; padding:0;
  border-radius:50%; overflow:hidden; background:#e9eaee;
}
.px-steps .process-step h3{ align-self:stretch; display:flex; align-items:center; }
.px-steps .process-step > .process-num, .px-steps .process-step > h3{ margin-bottom:24px; }
.px-steps .process-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.px-steps .process-step:hover .process-media img{ transform:scale(1.08); }
.px-steps .process-ico{
  position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:var(--card-hover, #caf600); color:#0a0a0a; display:flex; align-items:center; justify-content:center;
  transition:transform .6s var(--ease-out);
}
.px-steps .process-ico svg{ width:46%; height:46%; }
.px-steps .process-step:hover .process-ico{ transform:translate(-50%,-50%) scale(1.1); }
.px-steps .process-step:hover .process-ico svg{ color:#0a0a0a; }
.px-steps .process-media + p{ margin-top:26px; padding-top:0; border-top:none; }
/* Le filet sous l'en-tête de la fiche (numéro + titre) */
.px-steps .process-step:has(.process-media){ row-gap:0; }
.px-steps .process-step:has(.process-media) > h3{ position:relative; }
.px-steps .process-step:has(.process-media) > h3::after{
  content:''; position:absolute; left:-200px; right:0; bottom:-24px; height:1px; background:#e3e5ea;
}
.px-steps .process-step{ overflow:hidden; }
@media(min-width:981px) and (max-height:720px){
  .px-steps .process-step, .px-steps .process-step:nth-child(even){ position:relative !important; top:auto !important; } /* fiches trop hautes pour s'empiler sur cet écran */
}

/* 10.18 Angles adoucis : uniquement les fiches d'étapes « Comment je travaille ». */
:root{ --px-radius:12px; }
.px-steps .process-step{ border-radius:var(--px-radius); }

/* Cartes de service : photo plus grande (format carré, comme le modèle). */
.px-card .service-illustration{ aspect-ratio:1 / 1; margin-bottom:34px; }
.service-card.px-card::before{ top:52px; }

/* 10.19 Fiches d'étapes — empilement identique au modèle (≥ 981px) :
   même largeur et même point d'accroche pour toutes ; la fiche accrochée
   rétrécit à 85 % (classe .is-stuck posée par premium.js) et la suivante,
   en taille réelle, vient la recouvrir. */
@media(min-width:981px){
  .px-steps .process-grid{ gap:40px; }
  .px-steps .process-grid .process-step,
  .px-steps .process-grid .process-step:nth-child(n){ top:110px; margin:0; transform-origin:center center; }
  .px-steps .process-grid .process-step.is-stuck,
  .px-steps .process-grid .process-step.is-stuck:hover{ transform:scale(.85) !important; }
}
@media(min-width:981px) and (max-height:720px){
  .px-steps .process-grid .process-step.is-stuck,
  .px-steps .process-grid .process-step.is-stuck:hover{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .px-steps .process-grid .process-step.is-stuck{ transform:none !important; }
}

/* 10.20 Étiquettes au-dessus des titres de section (« 01 — CE QUE JE FAIS », « LE SERVICE »…) :
   retirées sur tout le site. Pour les réafficher, supprimer cette règle. */
.section-num, .sv-head .lp-eyebrow{ display:none !important; }

/* Cartes de service entre 901 et 1180px (tablette paysage, petite fenêtre) :
   quatre cartes de front y étaient trop étroites — deux par rangée. */
@media(min-width:901px) and (max-width:1180px){
  .svc-home-page > .service-card{ flex:0 0 calc((100% - 26px)/2); max-width:calc((100% - 26px)/2); }
}

/* 10.21 Pied de page — disposition du modèle.
   Titres de colonne en grand (sans capitales), liens blancs, coordonnées en plus gros.
   Sur téléphone et tablette : deux colonnes côte à côte (Navigation | Services),
   la marque au-dessus et le contact en dessous sur toute la largeur. */
.footer-col h4{ font-size:20px; font-weight:700; letter-spacing:0; text-transform:none; color:#d6d6d6; margin-bottom:14px; }
.footer-col{ gap:16px; }
.footer-col a{ color:#fff; font-size:15px; font-weight:500; }
.footer-col a:hover{ color:var(--btn, #caf600); }
.footer-contact > a:not(.btn){ font-size:18px; font-weight:500; }
.footer-contact span{ color:#b9b7b0; }
.footer-contact .footer-cta, .footer-contact .footer-cta:hover{ color:#0a0a0a; font-size:14.5px; font-weight:700; }
@media(max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:44px 20px; }
  .footer-brand, .footer-contact{ grid-column:1 / -1; }
  .footer-brand p{ max-width:420px; }
}
@media(max-width:560px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-col h4{ font-size:19px; }
  .footer-col a{ font-size:14.5px; }
  .footer-contact > a:not(.btn){ font-size:17px; }
}

/* Blocs gris clair : même gris soutenu partout (#e3e6ed), pour un meilleur contraste
   avec les cartes blanches — y compris les sections grises des pages de service. */
.sv-section.sv-alt{ background:#e3e6ed; }

/* Boutons : angles droits partout (aucun arrondi). */
.btn, .btn::before, .cta-band-btn, .footer-cta, .px-nav-cta, .section-head-cta,
.sv-tier-btn, .lp-pcard-btn, .price-card .btn, button.btn, a.btn{ border-radius:0 !important; }

/* 10.22 « Comment je travaille » — section épinglée (classe .px-pin posée par premium.js, ≥ 981px).
   La section n'a que la hauteur d'une fiche. Elle reste sous le menu pendant que les
   fiches montent l'une après l'autre ; hauteurs et mouvements sont réglés par premium.js. */
@media(min-width:981px){
  .px-steps.px-pin{ padding:0 !important; background-image:none !important; }
  .px-steps.px-pin::before, .px-steps.px-pin::after{ display:none; }
  .px-steps.px-pin > .wrap{
    position:sticky; top:78px; box-sizing:border-box; overflow:hidden; padding-top:100px; padding-bottom:0;
    background:
      linear-gradient(90deg, rgba(14,14,15,0.93) 0%, rgba(14,14,15,0.8) 55%, rgba(14,14,15,0.62) 100%),
      #111 url('assets/img/hero-photo-direction-artistique.jpg') center/cover no-repeat fixed;
  }
  .px-steps.px-pin .section-head{ position:static; }
  .px-steps.px-pin .process-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:0; }
  .px-steps.px-pin .process-grid .process-step:nth-child(n){
    grid-area:1 / 1; align-self:start; position:relative; top:auto; margin:0;
    opacity:1 !important; transform-origin:center center; will-change:transform;
  }
}

/* 10.23 Pages de service : la grille d'avis devient le témoignage à la une (même modèle que l'accueil). */
.lp-testi-section.px-testi-on{ padding:96px 0; }
.lp-testi-section.px-testi-on .lp-testis,
.lp-testi-section.px-testi-on .lp-eyebrow{ display:none !important; }
.lp-testi-section.px-testi-on > .wrap > h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media(max-width:860px){ .lp-testi-section.px-testi-on{ padding:60px 0; } }
/* Sections « fond gris » choisies dans le Page Builder : même gris soutenu que le reste du site. */
section.pb-bg-alt{ background:#e3e6ed !important; }

/* =====================================================================
   12. « COMMENT JE TRAVAILLE » — style « advisory » du modèle
   Photo en fond sur toute la section, grand titre en haut à gauche, puis
   une rangée de cartes translucides : pastille à icône, titre, texte,
   filet et étiquette de l'étape. (Classe .px-glass posée par premium.js ;
   les anciennes règles .px-steps ne s'appliquent plus.)
   L'icône de chaque étape se choisit dans le dashboard (Page Builder).
   ===================================================================== */
.px-glass{ position:relative; isolation:isolate; overflow:hidden; background:#111 !important; padding:120px 0 130px; }
.px-glass::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('assets/img/hero-photo-direction-artistique.jpg') center/cover no-repeat fixed;
}
.px-glass::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,12,13,0.82) 0%, rgba(12,12,13,0.62) 45%, rgba(12,12,13,0.78) 100%);
}
.px-glass .section-head{ display:block; margin-bottom:64px; }
.px-glass .section-head h2{ color:#fff; max-width:760px; font-size:clamp(32px,3.4vw,54px); line-height:1.14; }
.px-glass .section-head > p{ max-width:520px; margin:26px 0 0; padding:0 0 0 22px; border-left:2px solid var(--btn, #caf600); color:#e0ded6; justify-self:start; }

.px-glass .process-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.px-glass .process-grid::before{ display:none; }
.px-glass .process-grid .process-step,
.px-glass .process-grid .process-step:hover{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:46px 38px 42px; border-radius:0; border:none !important;
  background:rgba(255,255,255,0.17) !important; background-color:rgba(255,255,255,0.17) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:none !important; color:#fff;
}
.px-glass .process-grid .process-step:hover{
  background:rgba(255,255,255,0.27) !important; background-color:rgba(255,255,255,0.27) !important;
  transform:translateY(-8px);
}
/* Pastille à icône (la photo ronde de l'ancien style n'est plus affichée) */
.px-glass .process-media{
  order:1; width:78px; height:78px; margin:0 0 60px; border-radius:6px; overflow:hidden; position:relative; flex-shrink:0;
  background:linear-gradient(160deg, #4a4a4c 0%, #1c1c1e 100%);
  transition:background-color .35s ease, transform .5s var(--ease-out);
}
.px-glass .process-media img{ display:none; }
.px-glass .process-ico{
  position:absolute; inset:0; width:auto; transform:none; border-radius:0; background:none; color:#fff;
  display:flex; align-items:center; justify-content:center; transition:color .35s ease, background-color .35s ease;
}
.px-glass .process-ico svg{ width:38px; height:38px; }
.px-glass .process-step:hover .process-media{ transform:translateY(-4px); }
.px-glass .process-step:hover .process-ico{ background:var(--card-hover, #caf600); color:#0a0a0a; transform:none; }
.px-glass .process-step:hover .process-ico svg{ color:#0a0a0a; }
/* Titre et texte */
.px-glass .process-step h3,
.px-glass .process-step:hover h3{ order:2; margin:0 0 20px; padding:0; border:none; font-size:22px; line-height:1.3; color:#fff; }
.px-glass .process-step p,
.px-glass .process-step:hover p{
  order:3; width:100%; margin:0 0 30px; padding:0 0 38px; border:none; border-bottom:1px solid rgba(255,255,255,0.55);
  font-size:15.5px; line-height:1.7; color:#f1f0ec; flex-grow:1;
}
/* Étiquette de l'étape (« Étape 01 ») */
.px-glass .process-step .process-num,
.px-glass .process-step:hover .process-num{
  order:4; width:auto; height:auto; margin:0; padding:3px 9px; border-radius:3px; display:inline-flex;
  background:transparent !important; border:1px solid rgba(255,255,255,0.7) !important; color:#fff !important;
  font-size:13px; font-weight:600; letter-spacing:0; box-shadow:none; transform:none;
}
.px-glass .process-step .process-num::before{ content:'Étape\00a0'; }
/* Sans icône (ancien fichier de blocs) : la carte commence par le titre. */
.px-glass .process-step:not(:has(.process-media)) h3{ margin-top:6px; }

@media(max-width:1180px){
  .px-glass .process-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:980px){
  .px-glass{ padding:76px 0 84px; }
  .px-glass::before{ background-attachment:scroll; }
  .px-glass .section-head{ margin-bottom:44px; }
  .px-glass .process-grid .process-step, .px-glass .process-grid .process-step:hover{ padding:34px 28px 32px; }
  .px-glass .process-media{ margin-bottom:38px; }
}
@media(max-width:640px){
  .px-glass .process-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
}

/* =====================================================================
   13. PAGE PROFIL — ouverture en deux volets (style « consultant » du modèle)
   Structure construite par premium.js à partir du contenu de la page.
   ===================================================================== */
.px-profile{ position:relative; background:#fff; color:var(--px-ink); overflow:hidden; }
.px-pf-media{ position:relative; background:#111; overflow:hidden; }
.px-pf-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.px-pf-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,12,13,0.5) 0%, rgba(12,12,13,0) 26%, rgba(12,12,13,0) 52%, rgba(12,12,13,0.86) 100%);
}
.px-pf-cta{ position:absolute; z-index:2; left:var(--px-gutter, 32px); right:32px; bottom:44px; max-width:340px; }
.px-pf-cta p{ margin:0 0 24px; color:#fff; font-size:16.5px; line-height:1.7; }
.px-pf-btn{
  display:inline-flex; align-items:center; gap:12px; padding:19px 28px; background:#fff; color:#16171f;
  font-size:15px; font-weight:700; letter-spacing:0.2px; transition:background-color .35s ease, transform .4s var(--ease-out);
}
.px-pf-btn svg{ width:15px; height:15px; transition:transform .4s var(--ease-out); }
.px-pf-btn:hover{ background:var(--btn, #caf600); transform:translateY(-3px); }
.px-pf-btn:hover svg{ transform:translate(3px,-3px); }

.px-pf-body{ box-sizing:border-box; }
.px-pf-eyebrow{ margin:0 0 20px; font-size:15.5px; font-weight:600; color:var(--px-green); }
.px-pf-body h1{ margin:0 0 30px; font-size:clamp(27px,2.55vw,44px); line-height:1.22; color:var(--px-ink); }
.px-pf-lead{ margin:0 0 22px; font-size:17px; line-height:1.75; font-weight:700; color:var(--px-ink); }
.px-pf-text{ margin:0; font-size:16.5px; line-height:1.8; color:#8a8c97; }
.px-pf-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:30px 60px; margin-top:34px; }
.px-pf-contact{ display:flex; flex-direction:column; gap:6px; }
.px-pf-contact > a{ font-size:16px; font-weight:500; color:var(--px-ink); width:fit-content; transition:color .25s ease; }
.px-pf-contact > a[href^="mailto:"]{ color:var(--px-green); }
.px-pf-contact > a:hover{ color:var(--px-green); text-decoration:underline; }
.px-pf-social{ display:flex; gap:10px; margin-top:16px; }
.px-pf-social a{
  width:38px; height:38px; border-radius:50%; background:#16171f; display:flex; align-items:center; justify-content:center;
  transition:background-color .3s ease, transform .4s var(--ease-out);
}
.px-pf-social svg{ width:16px; height:16px; fill:#fff; transition:fill .3s ease; }
.px-pf-social a:hover{ background:var(--btn, #caf600); transform:translateY(-3px); }
.px-pf-social a:hover svg{ fill:#0a0a0a; }
.px-pf-cv > div{ margin:0 !important; }

/* Prénom en très grand, à la verticale, à cheval sur la limite photo / texte :
   la moitié posée sur la photo est blanche, l'autre moitié est sombre. */
.px-pf-name{ display:none; }

@media(min-width:981px){
  .px-profile{ display:grid; grid-template-columns:44.5% minmax(0,1fr); min-height:max(680px, 100svh); }
  .px-pf-media{ min-height:100%; }
  .px-pf-body{
    align-self:center; max-width:820px;
    padding:calc(var(--px-nav-h, 96px) + 56px) var(--px-gutter, 32px) 70px clamp(120px, 12.5vw, 250px);
  }
  .px-pf-name{
    display:grid; position:absolute; z-index:3; left:44.5%; top:calc(50% + var(--px-nav-h, 96px) / 2); transform:translate(-50%, -50%);
    writing-mode:vertical-rl; font-family:var(--font-display); font-weight:500; line-height:1; white-space:nowrap;
    font-size:min(23vh, 13.5vw); letter-spacing:-0.01em; pointer-events:none; user-select:none;
  }
  .px-pf-name i{ grid-area:1 / 1; font-style:normal; }
  .px-pf-name i:first-child{ color:#fff; clip-path:inset(0 50% 0 0); }
  .px-pf-name i:last-child{ color:#16171f; clip-path:inset(0 0 0 50%); }
}
@media(max-width:980px){
  .px-pf-media{ height:min(78svh, 620px); }
  .px-pf-cta{ left:22px; right:22px; bottom:30px; }
  .px-pf-body{ padding:46px 22px 54px; }
}

/* Sous l'ouverture : les faits clés en rangée, puis les logiciels. */
.px-profile-page #profil{ padding-top:70px; padding-bottom:80px; }
.about-grid.px-facts-only{ display:block; }
.px-facts-only .facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:none; border-left:1px solid #e3e5ea; }
.px-facts-only .facts li{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px 24px;
  border-bottom:1px solid #e3e5ea; border-right:1px solid #e3e5ea; border-top:1px solid #e3e5ea; margin-top:-1px; font-size:16px;
}
.px-facts-only .facts li span:first-child{ font-family:'Inter', sans-serif; font-weight:700; font-size:12px; letter-spacing:0.1em; color:var(--px-green); }
.px-facts-only .facts li span:last-child{ font-weight:600; color:var(--px-ink); }
@media(max-width:980px){ .px-facts-only .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media(max-width:520px){ .px-facts-only .facts{ grid-template-columns:minmax(0,1fr); } }

/* =====================================================================
   14. TARIFS — disposition du modèle (page « pricing »)
   Colonnes sans cadre : nom, phrase, liste à coches séparées par des filets,
   prix en grand tout en bas. La formule mise en avant (et celle survolée)
   prend un fond gris avec un coin teinté, un filet sombre à droite et un
   onglet à flèche en haut à droite, qui s'ouvre en « Demander cette formule ».
   Contenu inchangé : tout reste géré dans le dashboard (Tarifs des services).
   ===================================================================== */
.price-grid{ gap:0; margin-top:26px; align-items:stretch; }
.price-card,
.price-card.is-featured{
  position:relative; display:flex; flex-direction:column; padding:62px 48px 54px;
  background:transparent; color:var(--px-ink); border:none; border-right:1px solid transparent; border-radius:0 !important; box-shadow:none;
  transition:background-color .45s ease, border-color .45s ease;
}
.price-card::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; transition:opacity .45s ease;
  background:linear-gradient(315deg, rgba(202,246,0,0.34) 0%, rgba(202,246,0,0) 30%), #f6f6f7;
}
.price-card:hover, .price-card.is-featured{ transform:none; box-shadow:none; border-right-color:var(--px-ink); }
.price-card:hover::before, .price-card.is-featured::before{ opacity:1; }
.price-card > *{ position:relative; z-index:1; }

.price-badge{
  order:0; position:static; align-self:flex-start; margin:0 0 12px; padding:0; background:none; border:none; border-radius:0;
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--px-green);
}
.price-card h3{ order:1; font-family:'Inter', sans-serif; font-size:23px; font-weight:700; letter-spacing:0; line-height:1.3; color:var(--px-ink); padding-right:60px; }
.price-tagline{ order:2; margin:18px 0 0; font-size:15.5px; line-height:1.7; color:#8a8c97; opacity:1; }
.price-delay{ order:3; margin:16px 0 0; font-size:14px; color:var(--px-dim); opacity:1; }
.price-features{ order:4; flex:1; margin:26px 0 0; padding:0; border-top:none; gap:0; }
.price-features li{ padding:17px 0 17px 30px; font-size:15px; line-height:1.5; color:var(--px-ink); border-bottom:1px solid #e3e5ea; }
.price-features li:last-child{ border-bottom:none; }
.price-features li::before,
.price-card.is-featured .price-features li::before{ content:'✓'; top:17px; color:var(--px-green); font-weight:800; }
.price-amount{ order:5; margin:34px 0 0; gap:6px; }
.price-amount strong,
.price-card.is-featured .price-amount strong{
  font-family:var(--font-display); font-weight:500; font-size:clamp(26px,2.3vw,34px); letter-spacing:0.01em; line-height:1.1; color:var(--px-ink);
}
.price-prefix, .price-suffix{ font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.06em; color:var(--px-dim); opacity:1; }

/* Onglet à flèche : le bouton « Demander cette formule », replié en haut à droite. */
.price-card .price-cta,
.price-card:not(.is-featured) .price-cta{
  position:absolute; z-index:2; top:0; right:-1px; width:auto; height:56px; min-width:56px; box-sizing:border-box;
  padding:0 20px; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:0;
  background:var(--px-ink); color:#fff; border:none; border-radius:0 !important; box-shadow:none;
  font-size:0; font-weight:700; white-space:nowrap; opacity:0; transform:none;
  transition:opacity .35s ease, font-size .35s ease, padding .4s var(--ease-out), color .3s ease, background-color .3s ease;
}
.price-card .price-cta::before{ background:var(--btn, #caf600); }
.price-card .price-cta::after{
  content:''; width:16px; height:16px; flex-shrink:0;
  background:currentColor;
  -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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.price-card:hover .price-cta, .price-card.is-featured .price-cta, .price-card .price-cta:focus-visible{ opacity:1; }
.price-card .price-cta:hover,
.price-card:not(.is-featured) .price-cta:hover,
.price-card .price-cta:focus-visible{
  font-size:14px; padding:0 22px; gap:10px; color:#0a0a0a; background:var(--btn, #caf600); border:none; transform:none; box-shadow:none;
}
.price-note{ margin-top:40px; color:var(--px-dim); opacity:1; }

/* Écrans tactiles : pas de survol — l'onglet est visible et ouvert sur chaque formule. */
@media(hover:none){
  .price-card .price-cta, .price-card:not(.is-featured) .price-cta{ opacity:1; font-size:13.5px; padding:0 18px; gap:10px; }
  .price-card h3{ padding-right:0; margin-top:34px; }
}
@media(max-width:900px){
  .price-grid, .price-grid[data-count="2"], .price-grid[data-count="4"]{ max-width:560px; }
  .price-card, .price-card.is-featured{ padding:54px 28px 44px; border-right:none; border-bottom:1px solid #e3e5ea; }
  .price-card:hover, .price-card.is-featured{ border-right:none; }
}
/* Titres des formules alignés : les colonnes sans étiquette « Le plus choisi » réservent sa hauteur. */
@media(min-width:901px){ .price-grid:has(.price-badge) .price-card:not(.is-featured) h3{ margin-top:28px; } }

/* =====================================================================
   15. ACCORDÉONS — présentation du modèle (page « faqs »)
   Plus de cadres : chaque ligne est séparée par un filet ; question en
   grand, flèche ↗ à droite qui pivote en ↘ quand la ligne est ouverte ;
   réponse en gris. Concerne les questions fréquentes des pages de service
   et le parcours (Expérience Pro) de la page Profil.
   ===================================================================== */
:root{
  --px-acc-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316171f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E");
}
/* Questions fréquentes */
.sv-faq-wrap{ max-width:none; }
.sv-faq{ gap:0; max-width:900px; }
.sv-faq-item,
.sv-faq-item:hover{
  background:none !important; background-color:transparent !important; border:none !important; border-bottom:1px solid #cfd2da !important;
  border-radius:0 !important; padding:0; box-shadow:none !important; transform:none !important;
}
.sv-faq-item summary{ align-items:flex-start; gap:28px; padding:26px 0; font-size:20px; font-weight:700; line-height:1.4; color:var(--px-ink); transition:color .3s ease; }
.sv-faq-item:hover summary, .sv-faq-item[open] summary{ color:var(--px-ink); }
.sv-faq-item summary:hover{ color:var(--px-green); }
.sv-faq-plus,
.sv-faq-item:hover .sv-faq-plus{
  width:22px; height:22px; margin-top:3px; border-radius:0; background:var(--px-acc-arrow) center/contain no-repeat !important;
  transition:transform .4s var(--ease-out);
}
.sv-faq-plus::before, .sv-faq-plus::after{ display:none; }
.sv-faq-item[open] .sv-faq-plus{ transform:rotate(90deg); }
.sv-faq-a,
.sv-faq-item:hover .sv-faq-a{ max-width:760px; padding:0 50px 30px 0; font-size:15.5px; line-height:1.8; color:#7d808c !important; }
.sv-faq-item:hover .sv-faq-a *{ color:inherit; }
@media(max-width:640px){
  .sv-faq-item summary{ font-size:17px; padding:20px 0; gap:16px; }
  .sv-faq-plus{ width:18px; height:18px; }
  .sv-faq-a{ padding-right:0; }
}

/* Parcours de la page Profil : même flèche, mêmes filets */
.tl-chev{
  width:22px; height:22px; border-radius:0; background:var(--px-acc-arrow) center/contain no-repeat; color:transparent; font-size:0;
  box-shadow:none !important; transition:transform .4s var(--ease-out);
}
.tl-row.tl-toggle:hover .tl-chev{ box-shadow:none; }
.tl-item.open .tl-chev{ transform:rotate(90deg); }
.tl-item.tl-x{ border-radius:0; background:none; border-left:none; border-right:none; border-top:none; }

/* =====================================================================
   16. PAGE CONTACT — disposition du modèle (page « contact-us »)
   La carte en pleine largeur juste sous le menu ; en dessous, le titre et
   les coordonnées à gauche, le formulaire à droite sur fond gris.
   Structure réarrangée par premium.js ; contenu inchangé.
   ===================================================================== */
.px-contact-map{ display:block; margin-top:var(--px-nav-h, 96px); padding:0; background:#e5e3df; }
.px-contact-map .map-frame{ width:100%; height:min(66vh, 620px); min-height:340px; margin:0; border:none; border-radius:0 !important; overflow:hidden; }
.px-contact-map .map-frame iframe{ display:block; width:100%; height:100%; border:0; }
@media(max-width:980px){
  .px-contact-map{ margin-top:66px; }
  .px-contact-map .map-frame{ height:52vh; }
}

.contact.px-contact-v2{ background:#fff; padding:110px 0 120px; text-align:left; }
.contact.px-contact-v2 .aurora{ display:none; }
.px-contact-v2 .contact-grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(40px,6vw,110px); align-items:start; margin-top:0; }
.px-contact-head{ margin-bottom:26px; }
.px-contact-v2 .px-contact-head h1{ margin:0 0 18px; text-align:left; font-size:clamp(27px,2.5vw,40px); line-height:1.2; color:var(--px-ink); max-width:none; }
.px-contact-v2 .px-contact-head h1 span{ color:var(--px-green); }
.px-contact-v2 .px-contact-head p{ margin:0; max-width:460px; text-align:left; font-size:16px; line-height:1.75; color:var(--px-dim); }

.px-contact-v2 .contact-info{ display:flex; flex-direction:column; gap:0; }
.px-contact-v2 .contact-item,
.px-contact-v2 .contact-item:hover{
  background:none !important; background-color:transparent !important; border:none !important; border-bottom:1px solid #e3e5ea !important;
  border-radius:0 !important; box-shadow:none !important; transform:none !important; padding:20px 0; text-align:left;
}
.px-contact-v2 .contact-item .label,
.px-contact-v2 .contact-item:hover .label{ font-family:'Inter', sans-serif; font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--px-green); margin-bottom:8px; }
.px-contact-v2 .contact-item .val, .px-contact-v2 .contact-item .val a,
.px-contact-v2 .contact-item:hover .val, .px-contact-v2 .contact-item:hover .val a{ font-size:18px; font-weight:600; color:var(--px-ink); }
.px-contact-v2 .contact-item .val a:hover{ color:var(--px-green); }
.px-contact-v2 .contact-social{ justify-content:flex-start; }
.px-contact-v2 .contact-info > .btn{ align-self:flex-start; margin-top:30px; }

.px-contact-v2 .contact-form{ background:#f6f6f7; border:none; border-radius:0 !important; box-shadow:none; padding:clamp(28px,4vw,58px); text-align:left; }
.px-contact-v2 .contact-form h3{ font-size:24px; line-height:1.3; margin-bottom:10px; color:var(--px-ink); }
.px-contact-v2 .contact-form-note{ color:var(--px-dim); margin-bottom:26px; }
.px-contact-v2 .contact-form label{ font-size:14px; font-weight:700; color:var(--px-ink); }
.px-contact-v2 .contact-form input, .px-contact-v2 .contact-form textarea{
  background:transparent; border:none; border-bottom:1px solid #cfd2da; border-radius:0; padding:12px 0; margin-top:6px;
  font-size:15px; box-shadow:none; transition:border-color .3s ease;
}
.px-contact-v2 .contact-form input:focus, .px-contact-v2 .contact-form textarea:focus{ outline:none; border-bottom-color:var(--px-ink); box-shadow:none; }
.px-contact-v2 .contact-form .btn{ margin-top:14px; }
@media(max-width:900px){
  .contact.px-contact-v2{ padding:64px 0 76px; }
  .px-contact-v2 .contact-grid{ grid-template-columns:minmax(0,1fr); }
}

/* 13 bis. Page Profil — le volet gauche reste figé (comme le modèle) : le portrait, le
   prénom et le bouton restent en place pendant que tout le contenu de la page défile
   dans le volet droit. Le bandeau final et le pied de page reprennent toute la largeur. */
.px-profile{ overflow:visible; }
.px-pf-side{ position:relative; }
@media(min-width:981px){
  .px-profile{ display:grid; grid-template-columns:44.5% minmax(0,1fr); min-height:0; align-items:start; margin-top:var(--px-nav-h, 96px); }
  .px-pf-side{ position:sticky; top:78px; height:calc(100svh - 78px); min-height:520px; z-index:2; }
  .px-pf-media{ position:absolute; inset:0; min-height:0; }
  .px-pf-name{ left:100%; top:50%; }
  .px-pf-main{ min-width:0; --px-pf-left:clamp(110px, 11vw, 220px); }
  .px-pf-body{
    max-width:none; align-self:auto; display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100svh - var(--px-nav-h, 96px)); padding:60px var(--px-gutter, 32px) 70px var(--px-pf-left);
  }
  .px-pf-main .wrap{ padding-left:var(--px-pf-left); padding-right:var(--px-gutter, 32px); }
  .px-pf-main .section{ padding:84px 0; }
  .px-profile-page .px-pf-main #profil{ padding-top:0; padding-bottom:84px; }
  .px-pf-main .section-head{ display:block; margin-bottom:40px; }
  .px-pf-main .section-head h2{ font-size:clamp(28px,2.4vw,40px); }
  .px-pf-main .section-head > p{ max-width:none; margin:20px 0 0; padding:0 0 0 22px; justify-self:start; }
  .px-pf-main .values-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .px-pf-main .px-facts-only .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:980px){
  .px-profile{ margin-top:66px; }
  .px-pf-side{ height:min(78svh, 620px); }
  .px-pf-media{ position:absolute; inset:0; height:auto; }
}

/* 12 bis. Cartes d'étapes — survol : la carte passe en blanc (comme le modèle).
   Texte sombre, filet clair, pastille éclaircie, étiquettes cerclées de sombre
   (la première se remplit en lime) et onglet lime à flèche en haut à droite. */
.px-glass .process-grid .process-step:hover{
  background:#f8f8f8 !important; background-color:#f8f8f8 !important; color:var(--px-ink);
  -webkit-backdrop-filter:none; backdrop-filter:none; transform:none;
}
.px-glass .process-step:hover h3{ color:var(--px-ink); }
.px-glass .process-step:hover p{ color:#8a8c97; border-bottom-color:#e3e5ea; }
.px-glass .process-step:hover .process-media{ transform:none; background:linear-gradient(160deg, #8a8a8c 0%, #3a3a3c 100%); }
.px-glass .process-step:hover .process-ico{ background:none; color:#fff; }
.px-glass .process-step:hover .process-ico svg{ color:#fff; }
.px-glass .process-step .process-num,
.px-glass .process-step .process-tags span{ transition:background-color .3s ease, border-color .3s ease, color .3s ease; }
.px-glass .process-step:hover .process-num{
  background:var(--card-hover, #caf600) !important; border-color:var(--card-hover, #caf600) !important; color:#0a0a0a !important;
}
/* Étiquettes de l'étape (dashboard : « Étiquettes ») */
.px-glass .process-tags{ order:5; display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:6px; }
.px-glass .process-tags span{
  padding:3px 9px; border:1px solid rgba(255,255,255,0.7); border-radius:3px; font-size:13px; font-weight:600; line-height:1.45; color:#fff;
}
.px-glass .process-step:hover .process-tags span{ border-color:var(--px-ink); color:var(--px-ink); }
/* Onglet à flèche en haut à droite, visible au survol */
.px-glass .process-grid .process-step{ position:relative; }
.px-glass .process-grid .process-step::after{
  content:''; position:absolute; top:0; right:0; width:50px; height:50px; opacity:0; transition:opacity .3s ease;
  background:var(--card-hover, #caf600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/16px no-repeat;
}
.px-glass .process-grid .process-step:hover::after{ opacity:1; }

/* Travaux — cartouche et flèches en sombre : en blanc, ils se confondaient avec les
   visuels à fond clair. */
.work-overlay{ background:var(--px-dark, #1b1b1d); border-left-color:var(--btn, #caf600); }
.work-tag{ color:var(--btn, #caf600) !important; }
.work-overlay h3{ color:#fff; }
.work-overlay p{ color:#c4c2bb; }
.work-arrow{ background:var(--px-dark, #1b1b1d); color:#fff; }
.work-arrow-prev{ right:61px; border-right:1px solid rgba(255,255,255,0.14); }

/* =====================================================================
   17. GRIS CLAIR UNIQUE — tous les blocs « gris très clair » du site
   (#f3f4f8, #f5f6fb et la variable --bg-alt) passent en #e3e6ed, pour un
   contraste net avec le blanc. Le pied de page garde sa propre couleur.
   ===================================================================== */
html:root{ --bg-alt:#e3e6ed; --px-soft:#e3e6ed; }
.lp-form-section, .lp-testi-section:not(.pb-bg-white), .sv-section.sv-alt, section.contact:not(.px-contact-v2),
.resa-engagements, .resa-recap-box, .lp-includes, .lp-info, .ba-col-b, .tl-section.tl-alt, .article-cta, .case-quote,
.fmn-content-main, .fmn-content-card, .tiktok-card, .sv-top3, .sv-card, .sv-alt, .sv-wait, .dc-gridsec, .dc-type,
.px-contact-v2 .contact-form{ background-color:#e3e6ed; }
/* Champs de formulaire posés sur ces blocs gris : fond blanc, pour rester lisibles. */
.lp-form input, .lp-form select, .lp-form textarea{ background-color:#fff; }

/* =====================================================================
   18. BOUTONS DE DÉFILEMENT — forme carrée partout
   (diaporama d'accueil, services, travaux, témoignages, formations,
   visionneuse d'images, pages d'atterrissage, calendrier de réservation).
   ===================================================================== */
.px-hero-arrows button, .px-testi-arrows button, .svc-home-arrow, .work-arrow, .testi-home-arrow,
.carousel-arrow, .lp-arrow, .lb-arrow, .resa-cal-nav, .fmn-hero-nav button{ border-radius:0 !important; }
/* Sur fond clair : carré cerclé, qui se remplit au survol. */
.px-testi-arrows{ gap:8px; }
.px-testi-arrows button, .svc-home-arrow{
  width:46px; height:46px; border:1px solid var(--px-ink, #16171f) !important; background:transparent; color:var(--px-ink, #16171f);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.px-testi-arrows button:hover, .svc-home-arrow:hover{
  background:var(--px-ink, #16171f) !important; color:#fff !important; border-color:var(--px-ink, #16171f) !important; transform:none;
}
.svc-home-nav{ gap:8px; }

/* =====================================================================
   19. BOUTONS — flèche diagonale ↗ et son survol (celle des chiffres clés)
   Au survol, la flèche s'envole vers le haut-droit puis revient par le
   bas-gauche. La flèche est ajoutée par premium.js à chaque bouton.
   ===================================================================== */
.px-btn-arrow{
  display:inline-block; flex-shrink:0; width:13px; height:13px; margin-left:10px; vertical-align:-1px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M3 27 27 3M6 3h21v21'/%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 30 30' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M3 27 27 3M6 3h21v21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn .ui-icon ~ .px-btn-arrow{ margin-left:10px; }
@keyframes pxBtnFly{
  0%{ transform:translate(0,0); opacity:1; }
  42%{ transform:translate(12px,-12px); opacity:0; }
  43%{ transform:translate(-12px,12px); opacity:0; }
  100%{ transform:translate(0,0); opacity:1; }
}
.btn:hover .px-btn-arrow, .cta-band-btn:hover .px-btn-arrow,
.px-nav-cta:hover svg, .px-pf-btn:hover svg, .hero .px-arrow-btn:hover svg{
  animation:pxBtnFly .65s cubic-bezier(.65,0,.35,1); transform:none;
}
@media (prefers-reduced-motion: reduce){
  .btn:hover .px-btn-arrow, .cta-band-btn:hover .px-btn-arrow, .px-nav-cta:hover svg, .px-pf-btn:hover svg, .hero .px-arrow-btn:hover svg{ animation:none; }
}

/* 12 ter. Cartes d'étapes en carrousel : trois visibles (deux sur tablette, une sur
   téléphone), les suivantes arrivent en glissant. L'étiquette « Étape 0X » est retirée. */
.px-glass .process-grid{
  display:flex; gap:20px; grid-template-columns:none; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain;
}
.px-glass .process-grid::-webkit-scrollbar{ display:none; }
.px-glass .process-grid .process-step,
.px-glass .process-grid .process-step:hover{
  flex:0 0 calc((100% - 40px) / 3); min-width:0; box-sizing:border-box; scroll-snap-align:start;
  opacity:1 !important; transform:none !important;
}
@media(max-width:1180px){
  .px-glass .process-grid .process-step, .px-glass .process-grid .process-step:hover{ flex-basis:calc((100% - 20px) / 2); }
}
@media(max-width:640px){
  .px-glass .process-grid{ gap:14px; }
  .px-glass .process-grid .process-step, .px-glass .process-grid .process-step:hover{ flex-basis:88%; }
}
.px-glass .process-step .process-num{ display:none !important; }
.px-glass .process-tags{ margin-top:0; }
.px-glass .process-step:hover .process-tags span:first-child{
  background:var(--card-hover, #caf600); border-color:var(--card-hover, #caf600); color:#0a0a0a;
}
/* Flèches du carrousel (carrées) */
.px-glass-nav{ display:flex; justify-content:flex-end; gap:8px; margin-top:28px; }
.px-glass-nav button{
  width:50px; height:50px; border:1px solid rgba(255,255,255,0.55); border-radius:0; background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.px-glass-nav button:hover{ background:var(--btn, #caf600); border-color:var(--btn, #caf600); color:#0a0a0a; }
.px-glass-nav svg{ width:18px; height:18px; }

/* =====================================================================
   20. ALTERNANCE DES FONDS — deux sections qui se suivent n'ont jamais le
   même fond. premium.js pose .px-alt-grey / .px-alt-white sur la section
   qui doit changer de ton. Ci-dessous : les deux tons, puis les blocs
   intérieurs qui doivent s'inverser pour rester détachés de leur section.
   ===================================================================== */
html body section.px-alt-grey{ background:#e3e6ed !important; }
html body section.px-alt-white{ background:#fff !important; }
/* Dans une section passée au gris : les blocs gris deviennent blancs, les logos perdent leur cadre blanc. */
.px-alt-grey .contact-form, .px-alt-grey .ba-col-b, .px-alt-grey .lp-includes, .px-alt-grey .lp-info,
.px-alt-grey .resa-engagements, .px-alt-grey .resa-recap-box, .px-alt-grey .tiktok-card, .px-alt-grey .fmn-content-card,
.px-alt-grey .article-cta, .px-alt-grey .case-quote, .px-alt-grey .sv-card, .px-alt-grey .sv-top3, .px-alt-grey .dc-type,
section.pb-bg-alt .ba-col-b, .sv-section.sv-alt .ba-col-b{ background-color:#fff; }
.px-alt-grey .partner-badge img, .px-alt-grey .partners-track img{ mix-blend-mode:multiply; }
.px-alt-grey .lp-form input, .px-alt-grey .lp-form select, .px-alt-grey .lp-form textarea,
.px-alt-grey .contact-form input, .px-alt-grey .contact-form textarea{ background-color:#fff; }
.px-alt-grey.trust-strip{ border-bottom:none; }
/* Dans une section passée au blanc : les cartes blanches gardent un contour pour rester lisibles. */
.px-alt-white .service-card.px-card::before, .px-alt-white .value-card, .px-alt-white .testi-card,
.px-alt-white .sv-case, .px-alt-white .sv-tier, .px-alt-white .icon-card, .px-alt-white .fmn-course-card,
.px-alt-white .blog-card, .px-alt-white .resa-service-card{ box-shadow:0 0 0 1px #e3e5ea, 0 18px 40px -22px rgba(20,22,30,0.22); }

/* =====================================================================
   21. AUCUN ANGLE ARRONDI — règle du site
   premium.js pose .px-sq sur tout élément arrondi qui n'est pas un vrai
   rond (cartes, vignettes, filtres, étiquettes, boutons, champs), sur
   toutes les pages. Les règles ci-dessous agissent dès le chargement sur
   les familles les plus courantes, pour éviter tout effet de bascule.
   ===================================================================== */
.px-sq{ border-radius:0 !important; }
[class*="card"]:not([class*="avatar"]), [class*="thumb"], [class*="-media"]:not(.process-media), [class*="chip"], [class*="filter"] > *,
.map-frame, .skill-badge, .price-draft, .lightbox img, input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], select, textarea{ border-radius:0 !important; }
.px-glass .process-media{ border-radius:0; }

/* 13 ter. Page Profil — le volet droit occupe toute sa largeur : sur grand écran, la marge
   de droite suivait la grille centrée du site et laissait un grand vide. */
@media(min-width:981px){
  .px-pf-main{ --px-pf-right:clamp(32px, 4vw, 84px); }
  .px-pf-body{ padding-right:var(--px-pf-right); }
  .px-pf-main .wrap{ padding-right:var(--px-pf-right); }
  .px-pf-body h1{ font-size:clamp(28px,2.75vw,54px); max-width:none; }
  .px-pf-lead, .px-pf-text{ max-width:none; }
}

/* Cartes de service : trois de front sur grand écran, deux sur tablette (réglé avec script.js). */
@media(min-width:1181px){
  .svc-home-page > .service-card{ flex:0 0 calc((100% - 2*26px)/3); max-width:calc((100% - 2*26px)/3); }
  .px-card .service-illustration{ aspect-ratio:4 / 3; }
}

/* Page Profil : titre de présentation plus petit (il occupait trop de place sur grand écran). */
@media(min-width:981px){ .px-pf-body h1{ font-size:clamp(26px,2.1vw,40px); line-height:1.25; margin-bottom:26px; } }

/* Page Profil — bloc des faits clés rééquilibré : mêmes marges en haut et en bas,
   cases blanches séparées par un filet, la dernière case s'étire jusqu'au bord
   (pas de case orpheline), logiciels alignés dessous. */
@media(min-width:981px){
  .px-profile-page .px-pf-main #profil{ padding-top:64px; padding-bottom:64px; }
}
.px-facts-only .facts{
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1px; border:1px solid #cfd3dc; background:#cfd3dc;
}
.px-facts-only .facts li{ margin:0; border:none; background:#fff; padding:22px 24px; }
.px-facts-only .facts li:last-child{ grid-column-end:-1; }
.px-pf-main .px-facts-only .facts{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.px-profile-page #profil .skills-row{ margin-top:30px; gap:10px; }
.px-profile-page #profil .skill-badge{ background:#fff; }
/* Cases en rangées souples : la dernière rangée s'étire pour remplir toute la largeur. */
.px-facts-only .facts, .px-pf-main .px-facts-only .facts{ display:flex; flex-wrap:wrap; }
.px-facts-only .facts li{ flex:1 1 190px; }
.px-facts-only .facts li:last-child{ grid-column-end:auto; }

/* Compétences : libellés et pourcentages en noir (le vert clair était peu lisible). */
.skill-row .skill-top, .skill-top .pct{ color:var(--px-ink, #16171f); }
.skill-top .pct{ font-weight:700; }

/* 15 bis. Boutons d'accordéon : carrés, cerclés, flèche ↗ ; ouverts : carré plein, flèche ↘.
   (Sélecteurs renforcés : la page Profil porte ses propres styles, chargés après ce fichier.) */
:root{
  --px-acc-arrow-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E");
}
html body .tl-item .tl-chev,
html body .sv-faq-item .sv-faq-plus,
html body .sv-faq-item:hover .sv-faq-plus{
  width:38px; height:38px; flex-shrink:0; margin-top:0; box-sizing:border-box;
  border:1px solid var(--px-ink, #16171f) !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent var(--px-acc-arrow) center/16px no-repeat !important;
  color:transparent !important; font-size:0 !important; transform:none;
  transition:background-color .3s ease, transform .4s var(--ease-out);
}
html body .tl-row.tl-toggle:hover .tl-chev,
html body .sv-faq-item summary:hover .sv-faq-plus,
html body .tl-item.open .tl-chev,
html body .sv-faq-item[open] .sv-faq-plus{
  background:var(--px-ink, #16171f) var(--px-acc-arrow-w) center/16px no-repeat !important;
}
html body .tl-item.open .tl-chev,
html body .sv-faq-item[open] .sv-faq-plus{ transform:rotate(90deg); }
.sv-faq-item summary{ align-items:center; }

/* Page Profil — témoignages « Collaborateur » et « Coach » après « Expérience Pro » :
   dans le volet droit, plus étroit, la photo passe au-dessus du texte. */
.px-pf-main .px-testi{ grid-template-columns:minmax(0,1fr); gap:26px; }
.px-pf-main .px-testi-who{ width:230px; margin:18px 0 0 62px; }
.px-pf-main .px-testi-text{ min-height:0; }

/* Page Profil — témoignage : sur grand écran, la photo à gauche et le texte à sa droite
   (l'espace à droite de la photo restait vide). En dessous de 1500px, la photo reste au-dessus. */
@media(min-width:1500px){
  .px-pf-main .px-testi{ grid-template-columns:minmax(0,270px) minmax(0,1fr); gap:clamp(28px,3vw,54px); align-items:start; }
  .px-pf-main .px-testi-who{ width:230px; margin:18px 0 0 22px; }
  .px-pf-main .px-testi-mark, .px-pf-main .px-testi-photo{ width:140px; height:140px; }
  .px-pf-main .px-testi-visual{ height:140px; }
  .px-pf-main .px-testi-body{ padding-top:6px; }
}

/* Page Profil — témoignage : texte plus petit (la colonne est étroite). */
.px-pf-main .px-testi-text, .px-pf-main .px-testi-text.is-long{ font-size:16px; line-height:1.7; font-weight:500; }

/* =====================================================================
   9 bis. MENU MOBILE — détails du modèle, avec les couleurs du site
   (panneau anthracite, texte blanc, accent lime) :
   lignes de premier niveau resserrées avec chevron ; sous-menu en lignes
   séparées par un filet ; la ligne survolée ou en cours passe en lime, avec
   une flèche ↗ devant et un filet lime dessous.
   ===================================================================== */
@media(max-width:980px){
  header.nav nav{ padding-top:64px; overflow-y:auto; }
  header.nav nav > a, header.nav nav .nav-dropdown-trigger{
    padding:0 16px 0 14px; line-height:40px; font-size:15px; font-weight:700; letter-spacing:0.3px; text-transform:none;
  }
  header.nav nav .nav-dropdown-caret{ width:6px; height:6px; margin-right:6px; border-width:1.6px; }

  header.nav nav .nav-dropdown-menu{ padding:2px 0 10px; }
  header.nav nav .nav-dropdown-menu-inner{ margin:0 0 0 28px; padding:0; background:none; border:none; box-shadow:none; }
  header.nav nav .nav-dropdown-menu a,
  header.nav nav .nav-dropdown-menu a.px-sq{
    position:relative; display:block; padding:0; line-height:40px; background:none !important;
    border-bottom:1px solid rgba(255,255,255,0.13); transition:padding-left .3s ease, border-color .3s ease;
  }
  header.nav nav .nav-dropdown-menu a:last-child{ border-bottom-color:transparent; }
  header.nav nav .nav-dropdown-item-title{ font-size:15px; font-weight:400; letter-spacing:0.2px; color:#e9e7e0; transition:color .3s ease; }
  header.nav nav .nav-dropdown-menu a::before{
    content:''; position:absolute; left:0; top:50%; width:12px; height:12px; margin-top:-6px; opacity:0;
    background:var(--btn, #caf600);
    -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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:opacity .3s ease;
  }
  header.nav nav .nav-dropdown-menu a:hover,
  header.nav nav .nav-dropdown-menu a:active,
  header.nav nav .nav-dropdown-menu a.active{ padding-left:20px; border-bottom-color:var(--btn, #caf600); }
  header.nav nav .nav-dropdown-menu a:hover::before,
  header.nav nav .nav-dropdown-menu a:active::before,
  header.nav nav .nav-dropdown-menu a.active::before{ opacity:1; }
  header.nav nav .nav-dropdown-menu a:hover .nav-dropdown-item-title,
  header.nav nav .nav-dropdown-menu a.active .nav-dropdown-item-title{ color:var(--btn, #caf600); }
  header.nav nav .nav-dropdown-menu a::after{ display:none !important; }

  header.nav nav .nav-social{ margin:18px 14px 0; }
  .px-nav-close{ top:22px; right:20px; width:40px; height:40px; }
}

/* Diaporama sur téléphone : le texte court garde sa place sans jamais passer sous les flèches. */
@media(max-width:980px){
  .px-hero-foot-row p.lede{ height:auto; min-height:calc(14.5px * 1.65 * 3); }
}
@media(max-width:980px){
  /* Les filets du sous-menu vont jusqu'au bord droit du panneau. */
  header.nav nav .nav-dropdown-menu-inner{ display:block; width:auto; }
  header.nav nav .nav-dropdown-menu{ display:none; width:auto; }                          /* fermé par défaut */
  header.nav nav .nav-dropdown.is-open > .nav-dropdown-menu{ display:block; animation:pxSubIn .35s ease; } /* ouvert au toucher */
  header.nav nav .nav-dropdown-menu a, header.nav nav .nav-dropdown-menu a.px-sq{ width:auto; }
}
@keyframes pxSubIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media(max-width:980px){
  header.nav nav .nav-dropdown-menu a, header.nav nav .nav-dropdown-menu a.px-sq{ width:calc(100% - 16px) !important; box-sizing:border-box; }
}

/* Parcours (Expérience Pro) — survol visible : la ligne se teinte, une barre lime apparaît
   à gauche, le poste passe en vert et le bouton carré se remplit. */
html body .tl-item.tl-x{ transition:background-color .3s ease, box-shadow .3s ease; }
html body .tl-item.tl-x .tl-row{ transition:padding .35s var(--ease-out); }
html body .tl-item.tl-x.has-desc:hover,
html body .tl-item.tl-x.has-desc.open{ background-color:#f1f2f6; box-shadow:inset 4px 0 0 var(--btn, #caf600); }
html body .tl-item.tl-x.has-desc:hover .tl-row,
html body .tl-item.tl-x.has-desc.open .tl-row{ padding-left:18px; padding-right:14px; }
html body .tl-item.tl-x.has-desc:hover .tl-role,
html body .tl-item.tl-x.has-desc.open .tl-role{ color:var(--px-green, #4F9D00); }
html body .tl-item.tl-x.has-desc:hover .tl-role small,
html body .tl-item.tl-x.has-desc:hover .tl-when,
html body .tl-item.tl-x.has-desc.open .tl-role small,
html body .tl-item.tl-x.has-desc.open .tl-when{ color:var(--px-dim, #5c5e6b); }
html body .tl-item.tl-x.has-desc:hover .tl-chev{
  background:var(--px-ink, #16171f) var(--px-acc-arrow-w) center/16px no-repeat !important;
}
html body .tl-item.tl-x.open .tl-panel{ padding-left:18px; }
/* Sur fond gris, la teinte de survol passe en blanc. */
.px-alt-grey .tl-item.tl-x.has-desc:hover, .px-alt-grey .tl-item.tl-x.has-desc.open,
.section.alt:not(.px-alt-white) .tl-item.tl-x.has-desc:hover, .section.alt:not(.px-alt-white) .tl-item.tl-x.has-desc.open{ background-color:#fff; }

/* Parcours — ligne OUVERTE : la zone du titre passe en noir (texte blanc, bouton lime) ;
   le détail se déroule dessous sur fond clair. */
html body .tl-item.tl-x.has-desc.open{ background-color:#f4f5f8; box-shadow:none; }
html body .tl-item.tl-x.has-desc.open .tl-row{
  background:var(--px-ink, #16171f); padding:22px 18px; box-shadow:inset 4px 0 0 var(--btn, #caf600);
}
html body .tl-item.tl-x.has-desc.open .tl-role{ color:#fff; }
html body .tl-item.tl-x.has-desc.open .tl-role small,
html body .tl-item.tl-x.has-desc.open .tl-when{ color:#c4c2bb; }
html body .tl-item.tl-x.has-desc.open .tl-when em{ color:#fff; }
html body .tl-item.tl-x.has-desc.open .tl-chev,
html body .tl-item.tl-x.has-desc.open:hover .tl-chev{
  border-color:var(--btn, #caf600) !important;
  background:var(--btn, #caf600) var(--px-acc-arrow) center/16px no-repeat !important;
}
html body .tl-item.tl-x.open .tl-panel > div{ padding-top:0; }
html body .tl-item.tl-x.open .tl-panel ul{ padding-top:22px; }
.px-alt-grey .tl-item.tl-x.has-desc.open, .section.alt:not(.px-alt-white) .tl-item.tl-x.has-desc.open{ background-color:#fff; }

/* Parcours — au survol, le ruban de gauche est noir (et non lime). */
html body .tl-item.tl-x.has-desc:hover:not(.open){ box-shadow:inset 4px 0 0 var(--px-ink, #16171f); }

/* Page Profil — bloc « phrase + Me contacter » du volet gauche : décalé vers la gauche. */
@media(min-width:981px){
  .px-pf-cta{ left:max(32px, calc(var(--px-gutter, 32px) - 100px)); }
}

/* Menu mobile — sous-menu : texte toujours lisible au survol (lime), filets sur toute la
   largeur du panneau, et plus de retour à la ligne dans les intitulés. */
@media(max-width:980px){
  header.nav nav .nav-dropdown{ align-items:stretch; }
  header.nav nav .nav-dropdown-menu{ width:100% !important; align-self:stretch; box-sizing:border-box; }
  header.nav nav .nav-dropdown-menu-inner{ display:block; width:auto !important; margin:0 16px 0 28px; }
  header.nav nav .nav-dropdown-menu a, header.nav nav .nav-dropdown-menu a.px-sq{ width:100% !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  header.nav nav .nav-dropdown-menu a .nav-dropdown-item-title{ color:#e9e7e0 !important; }
  header.nav nav .nav-dropdown-menu a:hover .nav-dropdown-item-title,
  header.nav nav .nav-dropdown-menu a:focus .nav-dropdown-item-title,
  header.nav nav .nav-dropdown-menu a:active .nav-dropdown-item-title,
  header.nav nav .nav-dropdown-menu a.active .nav-dropdown-item-title{ color:var(--btn, #caf600) !important; }
  header.nav nav .nav-dropdown-menu a:hover, header.nav nav .nav-dropdown-menu a:focus,
  header.nav nav .nav-dropdown-menu a:active, header.nav nav .nav-dropdown-menu a.active{
    border-bottom-color:var(--btn, #caf600) !important; background:none !important;
  }
}

/* 12 quater. Cartes d'étapes — détails relevés sur le modèle (page « advisory ») :
   verre à 40 % avec flou léger ; pastille en dégradé sombre → transparent (elle paraît
   plus claire quand la carte devient blanche) et petite animation de l'icône au survol ;
   étiquettes en ligne, qui passent en lime UNE PAR UNE sous la souris ; onglet à flèche
   qui glisse depuis le coin. */
.px-glass .process-grid .process-step,
.px-glass .process-grid .process-step:hover{ -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:background-color .4s ease !important; padding:50px 50px 46px; }
.px-glass .process-grid .process-step{ background:rgba(255,255,255,0.4) !important; background-color:rgba(255,255,255,0.4) !important; }
.px-glass .process-grid .process-step:hover{ background:#f8f8f8 !important; background-color:#f8f8f8 !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.px-glass .process-media,
.px-glass .process-step:hover .process-media{
  margin-bottom:52px; background:linear-gradient(-28deg, rgb(22,22,22) 0%, rgba(22,22,22,0) 100%); transform:none;
}
.px-glass .process-step:hover .process-ico svg{ animation:pxIcoPop .7s ease; }
@keyframes pxIcoPop{ 0%{ transform:scale(1); } 35%{ transform:scale(.82) rotate(-6deg); } 70%{ transform:scale(1.1) rotate(3deg); } 100%{ transform:scale(1); } }
.px-glass .process-step h3, .px-glass .process-step:hover h3{ margin-bottom:21px; }
.px-glass .process-step p, .px-glass .process-step:hover p{ font-size:15px; line-height:1.7; }
/* Étiquettes : en ligne, chacune réagit à son propre survol */
.px-glass .process-tags{ flex-direction:row; flex-wrap:wrap; gap:6px; }
.px-glass .process-tags span{ font-weight:500; cursor:default; }
.px-glass .process-step:hover .process-tags span:first-child{ background:none; border-color:var(--px-ink); color:var(--px-ink); }
.px-glass .process-step .process-tags span:hover,
.px-glass .process-step:hover .process-tags span:hover{
  background:var(--card-hover, #caf600); border-color:var(--card-hover, #caf600); color:#0a0a0a;
}
/* Onglet à flèche : glisse depuis le coin au survol */
.px-glass .process-grid .process-step::after{ transform:translate(10px,-10px); transition:opacity .3s ease, transform .4s var(--ease-out); }
.px-glass .process-grid .process-step:hover::after{ transform:none; }
@media(max-width:980px){
  .px-glass .process-grid .process-step, .px-glass .process-grid .process-step:hover{ padding:34px 28px 32px; }
  .px-glass .process-media, .px-glass .process-step:hover .process-media{ margin-bottom:38px; }
}
@media (prefers-reduced-motion: reduce){ .px-glass .process-step:hover .process-ico svg{ animation:none; } }

/* Page Profil — « Mes valeurs » : trois cartes verticales côte à côte sur grand écran
   (en dessous de 1500px, la colonne est trop étroite : elles restent l'une sous l'autre). */
@media(min-width:1500px){
  .px-pf-main .values-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
  .px-pf-main .value-card{ padding:34px 22px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .px-pf-main .value-card h3{ margin-top:18px; }
  .px-pf-main .value-card p{ font-size:14px; line-height:1.7; }
}

/* Cartes « Mes valeurs » — survol : fond anthracite #1f1f1f (au lieu du lime), texte clair,
   pastille lime avec icône sombre. */
html body .value-card:hover{
  background:#1f1f1f !important; background-color:#1f1f1f !important; border-color:#1f1f1f !important; color:#fff;
  --ink:#fff; --ink-dim:rgba(255,255,255,0.74); --bg-card:#1f1f1f;
}
html body .value-card:hover h3, html body .value-card:hover h3 *{ color:#fff !important; }
html body .value-card:hover p{ color:rgba(255,255,255,0.74) !important; }
html body .value-card:hover .value-icon{ background:var(--btn, #caf600) !important; color:#0a0a0a !important; border-color:var(--btn, #caf600) !important; }
html body .value-card:hover .value-icon *, html body .value-card:hover .value-icon svg{ color:#0a0a0a !important; }

/* Page Profil — section « Mes réalisations » (après le témoignage) : une carte par rubrique. */
.px-works-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.px-work-card{ display:flex; flex-direction:column; background:#fff; color:var(--px-ink); box-shadow:0 26px 26px -26px rgba(20,22,30,0.22); transition:transform .5s var(--ease-out), box-shadow .4s ease; }
.px-work-card:hover{ transform:translateY(-6px); box-shadow:0 34px 30px -28px rgba(20,22,30,0.34); }
.px-work-img{ position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:#16171f; }
.px-work-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.px-work-card:hover .px-work-img img{ transform:scale(1.07); }
.px-work-img i{
  position:absolute; left:0; bottom:0; width:50px; height:46px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--px-ink); box-shadow:inset 6px 0 0 var(--btn, #caf600); transition:background-color .35s ease, width .45s var(--ease-out);
}
.px-work-img i svg{ width:16px; height:16px; margin-left:6px; }
.px-work-card:hover .px-work-img i{ background:var(--btn, #caf600); width:62px; box-shadow:inset 6px 0 0 var(--px-ink); }
.px-work-body{ display:flex; flex-direction:column; gap:8px; padding:24px 26px 28px; }
.px-work-body strong{ font-size:19px; font-weight:700; line-height:1.35; transition:color .3s ease; }
.px-work-body em{ font-style:normal; font-size:14.5px; line-height:1.65; color:var(--px-dim); }
.px-work-card:hover .px-work-body strong{ color:var(--px-green); }
@media(max-width:640px){ .px-works-grid{ grid-template-columns:minmax(0,1fr); } }
/* La bande des logos, désormais dans le volet droit : même marge que les autres sections. */
.px-pf-main .trust-strip .wrap{ text-align:left; }
.px-pf-main .trust-strip .trust-label::before{ display:none; }

/* « Mes réalisations » — cartes toujours détachées de leur section :
   grises sur une section blanche, blanches sur une section grise. */
.px-work-card{ background:#e3e6ed; box-shadow:none; }
.px-work-card:hover{ box-shadow:0 30px 30px -26px rgba(20,22,30,0.30); }
.px-work-img i{ background:#e3e6ed; }
.px-alt-grey .px-work-card, .section.alt:not(.px-alt-white) .px-work-card{ background:#fff; }
.px-alt-grey .px-work-img i, .section.alt:not(.px-alt-white) .px-work-img i{ background:#fff; }
.px-work-card:hover .px-work-img i{ background:var(--btn, #caf600); }

/* Page Profil — le bandeau « Étape suivante » est lui aussi dans le volet droit (la photo
   reste figée jusqu'au pied de page) : texte et bouton l'un sous l'autre, dans la colonne. */
.px-pf-main .cta-band{ padding:76px 0; }
.px-pf-main .cta-band-inner{ flex-direction:column; align-items:flex-start; flex-wrap:nowrap; gap:28px; }
.px-pf-main .cta-band-text{ flex:0 0 auto; width:100%; }
.px-pf-main .cta-band-slide{ font-size:clamp(24px,2.3vw,38px) !important; }

/* Page Profil — la bande des logos s'arrête au bord droit du prénom vertical :
   les logos ne passent plus derrière les lettres. (Le prénom déborde du volet gauche
   de la moitié de sa largeur, soit la moitié de sa taille de police.) */
@media(min-width:981px){
  .px-pf-main .partners-carousel{ margin-left:calc(min(23vh, 13.5vw) / 2 + 8px); }
}

/* Blog : le carrousel de vidéos TikTok est retiré de la page. */
section#tiktok{ display:none !important; }

/* =====================================================================
   22. BLOG EN CLAIR — liste des articles et page d'un article
   Le blog reprenait un habillage sombre ; il passe sur fond blanc, texte
   sombre, encadrés gris clair, accents verts (le lime reste pour les
   pastilles et les états actifs, où il porte du texte noir).
   ===================================================================== */
.blogx{ background:#fff; color:var(--px-ink, #16171f); }
.blogx-bar{ border-bottom-color:#e3e5ea; }
.blogx-bar-label{ color:var(--px-dim, #5c5e6b); }
.blogx-bar-label a{ color:var(--px-green, #4F9D00); }
.blogx-views{ border-color:#d9dbe2; }
.blogx-views a{ color:var(--px-dim, #5c5e6b); }
.blogx-views a:hover{ color:var(--px-ink, #16171f); }
.blogx-views a.is-on{ background:var(--px-ink, #16171f); color:#fff; }

.blogx-thumb{ background:#e9eaee; }
.blogx-thumb-ph{ background:#16171f; }
.blogx-meta{ color:var(--px-dim, #5c5e6b); }
.blogx-meta svg{ color:var(--px-green, #4F9D00); }
.blogx-title{ color:var(--px-ink, #16171f); }
.blogx-title a{ background-image:linear-gradient(var(--px-green, #4F9D00), var(--px-green, #4F9D00)); }
.blogx-item:hover .blogx-title a{ color:var(--px-green, #4F9D00); }
.blogx-excerpt{ color:var(--px-dim, #5c5e6b); }
.blogx-empty{ color:var(--px-dim, #5c5e6b); }
.blogx-empty a{ color:var(--px-green, #4F9D00); }

.blogx-pages a, .blogx-pages span{ border-color:#d9dbe2; color:var(--px-ink, #16171f); }
.blogx-pages a:hover{ border-color:var(--px-ink, #16171f); color:var(--px-ink, #16171f); }
.blogx-pages .is-on{ background:var(--px-ink, #16171f); border-color:var(--px-ink, #16171f); color:#fff; }

/* Colonne latérale */
.blogx-widget{ background:#f1f2f6; border-color:transparent; }
.blogx-widget h4{ color:var(--px-ink, #16171f); }
.blogx-search input{ background:#fff !important; border-color:#d9dbe2; color:var(--px-ink, #16171f); }
.blogx-search input::placeholder{ color:#9a9cab; }
.blogx-search input:focus{ border-color:var(--px-ink, #16171f); }
.blogx-search button{ color:var(--px-ink, #16171f); }
.blogx-search button:hover{ background:var(--px-ink, #16171f); color:#fff; }
.blogx-cats li + li{ border-top-color:#dfe2e9; }
.blogx-cats a{ color:var(--px-ink, #16171f); }
.blogx-cats a span:last-child{ color:var(--px-dim, #5c5e6b); }
.blogx-cats a:hover, .blogx-cats a.is-on{ color:var(--px-green, #4F9D00); }
.blogx-recent img, .blogx-recent-ph{ background:#16171f; }
.blogx-recent em{ color:var(--px-green, #4F9D00); border-color:#cfd3dc; }
.blogx-recent strong{ color:var(--px-ink, #16171f); }
.blogx-recent a:hover strong{ color:var(--px-green, #4F9D00); }
.blogx-tags a{ background:#fff; border-color:#d9dbe2; color:var(--px-ink, #16171f); }
.blogx-tags a:hover, .blogx-tags a.is-on{ background:var(--px-ink, #16171f); border-color:var(--px-ink, #16171f); color:#fff; }

/* Page d'un article */
.blogx-post .blogx-meta{ border-bottom-color:#e3e5ea; }
.blogx-post .article-lead{ color:var(--px-ink, #16171f); }
.blogx-post .article-body{ color:#3f4150; }
.blogx-post .article-body h2, .blogx-post .article-body h3, .blogx-post .article-body strong{ color:var(--px-ink, #16171f); }
.blogx-post .article-body a{ color:#3d7a00; }
.blogx-post .article-body a:hover{ color:var(--px-ink, #16171f); }
.blogx-post .article-body blockquote{ background:#f1f2f6; color:var(--px-ink, #16171f); border-left-color:var(--btn, #caf600); }
.blogx-post .article-body li::marker{ color:var(--px-green, #4F9D00); }
.blogx-post-foot{ border-top-color:#e3e5ea; }
.blogx-post .article-cta{ background:#f1f2f6 !important; border-color:transparent; }
.blogx-post .article-cta strong{ color:var(--px-ink, #16171f); }
.blogx-post .article-cta p{ color:var(--px-dim, #5c5e6b); }
.blogx-post .article-cta .btn.ghost{ color:var(--px-ink, #16171f); border-color:#c9ccd6; }
.blogx-post .article-cta .btn.ghost:hover{ color:#0a0a0a; border-color:var(--btn, #caf600); }
.blogx-more h2{ color:var(--px-ink, #16171f); }
/* Boutons verts du blog : sur fond clair, ils se remplissent de noir au survol (texte lime). */
.blogx .btn.primary::before, .article-cta .btn.primary::before{ background:#0d0d0e; }
.blogx .btn.primary:hover, .blogx .article-cta .btn.primary:hover{
  color:var(--btn, #caf600); border-color:#0d0d0e; background-color:var(--btn, #caf600); box-shadow:0 12px 28px rgba(0,0,0,0.18);
}
.article-preview-note{ color:#fff; }

/* =====================================================================
   23. HARMONISATION — contrôle d'ensemble
   a) Rythme : les défilements automatiques sont ralentis et décalés entre eux
      (diaporama 7 s, services 8 s, travaux 7,5 s, étapes 7 s, témoignage 9 s,
      phrase du bandeau final 5,2 s) — réglés dans script.js et premium.js ;
      ici, la barre de progression du diaporama suit la nouvelle durée.
   b) Survols : la bascule de couleur des cartes était très rapide (0,28 s) ;
      elle passe à 0,45 s, comme le reste des effets.
   c) Gris clair : un seul gris (#e3e6ed) pour tous les encadrés et teintes de
      survol qui utilisaient des gris voisins.
   ===================================================================== */
.px-hero-bar i.run{ animation-duration:7s !important; }

.service-card, .quicklink-card, .value-card, .webproj-card, .testi-card, .tiktok-card, .icon-card,
.fmn-content-card, .fmn-course-card, .contact-item, .resa-service-card, .lp-pcard, .lp-slide, .sv-case, .sv-tier, .sv-web, .sv-svc,
.sv-plan-col, .ba-col, .resa-time-btn, .sv-kpi, .lp-testi-card{
  transition:background-color .45s ease, border-color .45s ease, color .45s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, opacity .8s cubic-bezier(.2,.7,.2,1) !important;
}
.nav a, .site-footer a, .footer a{ transition:color .3s ease, opacity .3s ease; }

.blogx-widget, .blogx-post .article-body blockquote{ background:#e3e6ed; }
.blogx-post .article-cta{ background:#e3e6ed !important; }
html body .tl-item.tl-x.has-desc:hover:not(.open), html body .tl-item.tl-x.has-desc.open{ background-color:#e3e6ed; }
.price-card::before{ background:linear-gradient(315deg, rgba(202,246,0,0.34) 0%, rgba(202,246,0,0) 30%), #e3e6ed; }
.px-alt-grey .price-card::before, section.pb-bg-alt .price-card::before, .sv-section.sv-alt .price-card::before{
  background:linear-gradient(315deg, rgba(202,246,0,0.34) 0%, rgba(202,246,0,0) 30%), #fff;
}
.px-alt-grey .tl-item.tl-x.has-desc:hover:not(.open), .px-alt-grey .tl-item.tl-x.has-desc.open,
.section.alt:not(.px-alt-white) .tl-item.tl-x.has-desc:hover:not(.open), .section.alt:not(.px-alt-white) .tl-item.tl-x.has-desc.open{ background-color:#fff; }
.px-alt-grey .blogx-widget{ background:#fff; }
/* d) Titres en police de titrage hors des en-têtes de section : même espacement des lettres et des mots. */
.work-overlay h3, .solution-copy h3, .px-pf-body h1, .cta-band-slide{ letter-spacing:0.012em; word-spacing:0.1em; font-variant-ligatures:none; }