.fb-ai-mockup {
	height: 280px !important;
}


:root{--ntm-max:1440px;--ntm-gutter:40px}
.container,header.site-header .site-header__inner,.nf-wrap,.nf-subnav,.ntmf2 .wrap{max-width:var(--ntm-max)!important;padding-left:var(--ntm-gutter)!important;padding-right:var(--ntm-gutter)!important}
@media(max-width:768px){:root{--ntm-gutter:20px}}
/* Garde le bandeau "E-facturation" sur UNE seule ligne (icone + texte + champ) des qu'il y a la place,
   et neutralise le passage en colonne centree que le theme applique sinon des 1024px de large. */
@media (min-width: 601px) {
  .hero__facturation-banner {
    flex-direction: row !important;
    text-align: left !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .hero__facturation-text {
    margin-left: 20px !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .hero__facturation-logos--dictate {
    width: auto !important;
    max-width: 280px !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }
  .hero__dictate {
    width: auto !important;
    min-width: 190px !important;
    padding: 6px 6px 6px 16px !important;
    gap: 8px !important;
  }
  .hero__dictate-text {
    font-size: 0.88rem !important;
  }
  .hero__dictate-mic {
    width: 32px !important;
    height: 32px !important;
  }
  .hero__dictate-mic svg {
    width: 14px !important;
    height: 14px !important;
  }
}
/* Retire la zone email (champ + bouton Envoyer) de la carte CTA bas de page : formulaire non connecte, non fonctionnel. Logos aussi masques ici (deja presents dans la bande plus haut). */
.cta-email__input-wrap,
.cta-email__send-btn {
	  display: none !important;
}

.cta-email__logos-box {
	  display: none !important;
}
}

/* ===== Ajout : polish visuel Simulateur (voir ci-dessous) ===== */

/* ============================================================
   Notim Simulateur — polish visuel (Additional CSS, sans risque)
   Cible les classes du widget .notim-simulateur déjà en place.
   ============================================================ */

/* --- Carte principale : profondeur et respiration --- */
.notim-simulateur .notim-sim-card{
    border-radius:20px;
    box-shadow:0 4px 24px rgba(13,5,66,.06), 0 1px 2px rgba(13,5,66,.04);
    border-color:#ECECF2;
    animation:notimFadeIn .35s ease both;
}
@keyframes notimFadeIn{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
}

/* --- En-tête : eyebrow avec petite pastille --- */
.notim-simulateur .notim-sim-eyebrow{
    display:inline-flex; align-items:center; gap:6px;
}
.notim-simulateur .notim-sim-eyebrow::before{
    content:"";
    width:6px; height:6px; border-radius:50%;
    background:var(--color-accent,#F4541A);
    display:inline-block;
}

/* --- Stepper : pastilles plus rondes, dégradé sur les étapes actives/faites --- */
.notim-simulateur .notim-sim-step-ind span:first-child{
    width:30px; height:30px; font-size:.85rem;
    transition:background .25s ease, transform .25s ease, color .25s ease;
    box-shadow:0 0 0 4px transparent;
}
.notim-simulateur .notim-sim-step-ind.active span:first-child{
    background:linear-gradient(135deg,var(--color-primary,#0D0542),var(--color-blue,#4B73FF));
    transform:scale(1.08);
    box-shadow:0 0 0 4px rgba(75,115,255,.15);
}
.notim-simulateur .notim-sim-step-ind.done span:first-child{
    background:linear-gradient(135deg,var(--color-accent,#F4541A),var(--color-accent-hover,#E04A15));
}
.notim-simulateur .notim-sim-step-line{
    border-radius:2px;
    transition:background .3s ease;
}

/* --- Badge numéroté de section --- */
.notim-simulateur .notim-sim-card-badge{
    background:linear-gradient(135deg,var(--color-primary,#0D0542),var(--color-blue,#4B73FF));
    box-shadow:0 4px 10px rgba(13,5,66,.18);
}

/* --- Champs : focus plus doux, hover discret --- */
.notim-simulateur select,
.notim-simulateur input[type=text],
.notim-simulateur input[type=number]{
    transition:border-color .18s ease, box-shadow .18s ease;
}
.notim-simulateur select:hover,
.notim-simulateur input[type=text]:hover,
.notim-simulateur input[type=number]:hover{
    border-color:#C7C7D6;
}
.notim-simulateur select:focus,
.notim-simulateur input:focus{
    outline:none;
    border-color:var(--color-primary,#0D0542);
    box-shadow:0 0 0 4px rgba(13,5,66,.08);
}

/* --- Boutons : lift au survol --- */
.notim-simulateur .notim-sim-btn-primary{
    box-shadow:0 4px 14px rgba(13,5,66,.18);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.notim-simulateur .notim-sim-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(244,84,26,.28);
}
.notim-simulateur .notim-sim-btn-ghost{
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.notim-simulateur .notim-sim-btn-ghost:hover{
    transform:translateY(-2px);
    background:var(--color-bg-light,#F9FAFB);
}
.notim-simulateur .notim-sim-addlink:hover{
    background:var(--color-bg-light,#F9FAFB);
}

/* --- Slider : piste et curseur plus soignés --- */
.notim-simulateur input[type=range]{
    height:6px; border-radius:6px;
    accent-color:var(--color-primary,#0D0542);
}

/* --- Résultat principal : mise en scène façon "hero" --- */
.notim-simulateur .notim-sim-result-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--color-primary,#0D0542) 0%,#241a6b 55%,var(--color-blue,#4B73FF) 130%);
    border-radius:18px;
    padding:32px 26px;
    box-shadow:0 10px 30px rgba(13,5,66,.25);
}
.notim-simulateur .notim-sim-result-hero::before{
    content:"";
    position:absolute; top:-60px; right:-60px;
    width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle,rgba(244,84,26,.35),transparent 70%);
    pointer-events:none;
}
.notim-simulateur .notim-sim-result-label{
    color:rgba(255,255,255,.72);
}
.notim-simulateur .notim-sim-result-value{
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.notim-simulateur .notim-sim-result-sub{
    color:rgba(255,255,255,.6);
}

/* --- Bandeau marge : icône + accent latéral selon le niveau --- */
.notim-simulateur .notim-sim-margebox{
    position:relative;
    padding-left:26px;
    border-left:4px solid transparent;
}
.notim-simulateur .notim-sim-margebox.bonne{border-left-color:#1A7F42;}
.notim-simulateur .notim-sim-margebox.correcte{border-left-color:#B7791F;}
.notim-simulateur .notim-sim-margebox.faible{border-left-color:#C0392B;}

/* --- Cartes de stats : icônes + effet de survol --- */
.notim-simulateur .notim-sim-stat{
    position:relative;
    padding-left:52px;
    transition:transform .18s ease, box-shadow .18s ease;
}
.notim-simulateur .notim-sim-stat:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(13,5,66,.08);
}
.notim-simulateur .notim-sim-stat::before{
    content:"";
    position:absolute; left:14px; top:14px;
    width:28px; height:28px; border-radius:9px;
    background:var(--color-bg-light,#F9FAFB);
    box-shadow:inset 0 0 0 1px var(--color-border,#E3E3E8);
}
.notim-simulateur .notim-sim-stat:nth-child(1)::before{ background-image:linear-gradient(135deg,#EEF1FF,#E3E8FF); }
.notim-simulateur .notim-sim-stat:nth-child(2)::before{ background-image:linear-gradient(135deg,#FFF1EC,#FFE3D8); }
.notim-simulateur .notim-sim-stat:nth-child(3)::before{ background-image:linear-gradient(135deg,#ECF7EF,#DDF0E2); }

/* --- Barres de répartition : extrémités rondes + transition fluide --- */
.notim-simulateur .notim-sim-bar-track{
    border-radius:20px;
    overflow:hidden;
}
.notim-simulateur .notim-sim-bar-fill{
    border-radius:20px;
    transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.notim-simulateur .notim-sim-bar-row:hover .notim-sim-bar-label{
    color:var(--color-primary,#0D0542);
}

/* --- Tableau de composition : lignes plus lisibles --- */
.notim-simulateur .notim-sim-table tr:hover td{
    background:var(--color-bg-light,#F9FAFB);
}
.notim-simulateur .notim-sim-table td{
    transition:background .15s ease;
}
.notim-simulateur .notim-sim-table tr.notim-sim-total td{
    background:linear-gradient(90deg,rgba(75,115,255,.06),transparent);
    border-radius:8px;
}

/* --- Badge "Analyse complète" --- */
.notim-simulateur .notim-sim-badge-ok{
    box-shadow:0 2px 8px rgba(26,127,66,.15);
}

/* --- Transition douce entre les étapes --- */
.notim-simulateur .notim-sim-card > div{
    animation:notimFadeIn .3s ease both;
}


/* Bande facturation électronique : espacement équilibré haut/bas */
.trust-bar-wrap{padding-top:30px !important;padding-bottom:20px !important;}

/* ===== Page 404 — grand 404 ===== */
.n404__hero{position:relative;isolation:isolate}
.n404__hero::before{content:"";position:absolute;z-index:-1;left:50%;top:-40px;width:min(1000px,100vw);height:460px;transform:translateX(-50%);background:radial-gradient(closest-side at 30% 45%,rgba(63,63,194,.12),transparent),radial-gradient(closest-side at 72% 38%,rgba(244,84,26,.11),transparent);pointer-events:none}
.n404 .n404__eyebrow{display:block;font-size:0;line-height:0;letter-spacing:0;padding:0;background:none;border-radius:0;margin:0 0 8px}
.n404 .n404__eyebrow::before{content:"404";display:block;font-size:clamp(104px,20vw,208px);font-weight:800;line-height:.9;letter-spacing:-.05em;text-transform:none;background:linear-gradient(120deg,#0D0542 8%,#3f3fc2 55%,#F4541A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;user-select:none}
body .n404 h1{font-size:clamp(1.75rem,3.6vw,2.5rem);margin-top:14px}
body main.n404{padding-top:clamp(112px,14vw,150px) !important;padding-bottom:88px !important}
@media (max-width:600px){body main.n404{padding-bottom:64px !important}}


/* nf-fullwidth : page Fonctions (nouveau design) en pleine largeur - annule le conteneur Elementor 1140px + marges */
.elementor-1045 .elementor-element-616fd43{padding-left:0 !important;padding-right:0 !important}
.elementor-1045 .elementor-element-616fd43>.e-con-inner{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important}
.elementor-1045 .elementor-element-3dfeb26{max-width:100% !important;width:100% !important}

/* Masquer le bloc auteur (hero + carte sidebar) sur tous les articles */
.article-hero__author,
.article-author-card {
  display: none !important;
}


/* Notim · bloc "Autres outils gratuits pour artisans" : cartes en grille 2 colonnes (toutes les pages outils) */
.notim-tb-related .ntr-l{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:transparent;border:0;border-radius:0;overflow:visible}
.notim-tb-related .ntr-l a{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"ico title" "ico meta";column-gap:14px;row-gap:2px;align-items:center;padding:16px 44px 16px 16px;background:#fff;border:1px solid #e3e3e8;border-radius:14px;box-shadow:0 1px 2px rgba(13,5,66,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.notim-tb-related .ntr-l a:hover{transform:translateY(-2px);border-color:#f4541a;box-shadow:0 8px 20px rgba(13,5,66,.10)}
.notim-tb-related .ntr-l a+a{border-top:1px solid #e3e3e8}
.notim-tb-related .ntr-ico{grid-area:ico;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#fff3ee}
.notim-tb-related .ntr-ico img{width:22px;height:22px}
.notim-tb-related .ntr-l strong{grid-area:title;font-size:.95rem;font-weight:800;color:#0d0542;line-height:1.25}
.notim-tb-related .ntr-l small{grid-area:meta;font-size:.78rem;font-weight:600;color:#667085}
.notim-tb-related .ntr-go{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f4f4f7;color:#667085;transition:background .18s,color .18s}
.notim-tb-related .ntr-l a:hover .ntr-go{background:#f4541a;color:#fff}
@container (max-width:520px){.notim-tb-related .ntr-l{grid-template-columns:1fr}}


/* === Barre de navigation unifiée (design de l'ancienne page d'accueil) === */
header.site-header{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #E7E7F3;box-shadow:0 3px 12px -3px rgba(13,5,66,.08)}
header.site-header .site-header__inner{max-width:1180px;margin:0 auto;padding:0 24px;height:var(--header-height,70px);gap:0;justify-content:space-between}
header.site-header .site-header__logo img{height:38px;width:auto;max-width:none}
header.site-header .site-header__nav{flex:0 0 auto;justify-content:flex-start}
header.site-header .site-header__menu{gap:36px}
header.site-header .site-header__menu li a{font-family:'Urbanist',sans-serif;font-weight:600;font-size:15.5px;line-height:1.5;color:#0D0542;gap:5px;padding-bottom:0}
header.site-header .site-header__menu li a::after{content:none}
header.site-header .site-header__menu li a:hover,header.site-header .site-header__menu li.current-menu-item a{color:#3F37CD}
header.site-header .site-header__actions{gap:12px}
header.site-header .site-header__actions .btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Urbanist',sans-serif;font-weight:700;font-size:14px;line-height:14px;padding:10px 20px;min-height:0;height:auto;border-radius:999px;box-shadow:none;transform:none;white-space:nowrap}
header.site-header .site-header__actions .btn--outline-header{background:#fff;color:#0D0542;border:1px solid #E7E7F3}
header.site-header .site-header__actions .btn--cta-header{background:#FF541F;color:#fff;border:1px solid #FF541F}
header.site-header .site-header__actions .btn--cta-header:hover{background:#E8430F;border-color:#E8430F}
@media (max-width:980px){header.site-header .site-header__logo img{height:32px}}
/* === fin barre de navigation === */

/* === Articles : mise en page éditoriale === */
.article-content__body{--art-accent:#3f37cd;--art-ink:#0d0542;--art-text:#2b2b3a;--art-soft:#f3f4fc;font-size:18px;color:var(--art-text)}
.article-content__body p{font-weight:400;line-height:1.8;margin:0 0 1.35em;color:var(--art-text);letter-spacing:.005em}
.article-content__body > p:first-of-type{font-size:20px;line-height:1.7;font-weight:500;color:var(--art-ink);padding-left:18px;border-left:4px solid var(--art-accent);margin-bottom:2em}
.article-content__body strong{font-weight:700;color:var(--art-ink)}
.article-content__body a{color:var(--art-accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.article-content__body a:hover{color:var(--art-ink)}
.article-content__body h2{position:relative;font-size:30px;line-height:1.25;font-weight:700;color:var(--art-ink);margin:2.4em 0 .7em;padding-top:1.1em;scroll-margin-top:110px}
.article-content__body h2::before{content:"";position:absolute;top:0;left:0;width:56px;height:4px;border-radius:4px;background:linear-gradient(90deg,#3f37cd,#ff6b3d)}
.article-content__body > h2:first-child,.article-content__body > p:first-of-type + h2{margin-top:1.6em}
.article-content__body h3{font-size:21px;line-height:1.35;font-weight:700;color:var(--art-accent);margin:1.9em 0 .5em;scroll-margin-top:110px}
.article-content__body h4{font-size:18px;font-weight:700;color:var(--art-ink);margin:1.5em 0 .4em}
.article-content__body h3 + p,.article-content__body h2 + p{margin-top:0}
.article-content__body ul,.article-content__body ol{margin:0 0 1.5em;padding-left:1.4em}
.article-content__body li{line-height:1.75;margin-bottom:.55em;padding-left:.3em}
.article-content__body li::marker{color:var(--art-accent);font-weight:700}
.article-content__body blockquote{margin:2em 0;padding:22px 26px;background:var(--art-soft);border-left:4px solid var(--art-accent);border-radius:0 12px 12px 0;font-size:19px;line-height:1.7;color:var(--art-ink)}
.article-content__body blockquote p:last-child{margin-bottom:0}
.article-content__body img{max-width:100%;height:auto;border-radius:12px;margin:1.6em 0}
.article-content__body table{width:100%;border-collapse:collapse;margin:2em 0;font-size:16px}
.article-content__body th{background:var(--art-soft);color:var(--art-ink);text-align:left;padding:12px 14px}
.article-content__body td{padding:12px 14px;border-bottom:1px solid #e4e6f2}
.article-content__body hr{border:0;height:1px;background:#e4e6f2;margin:2.5em 0}
@media (max-width:768px){
.article-content__body{font-size:17px}
.article-content__body > p:first-of-type{font-size:18px;padding-left:14px}
.article-content__body h2{font-size:24px;margin-top:2em}
.article-content__body h3{font-size:19px}
}


/* ===== NOTIM — correctifs d'affichage page d'accueil (26/10/2026) : accordéon témoignages, promesses, menu, carrousel métiers, témoignages du bas ===== */
/* ---- 2) Accordeon temoignages : ouverture fluide + texte lisible ----
   La classe .fx ecrasait la transition : flex-grow n'etait plus anime. */
@property --ntm-k { syntax: "\3C number>"; inherits: false; initial-value: 0; }
html.ntm-fx .ntm-acc .ntm-acc__item.fx {
  transition-property: opacity, transform, filter, flex-grow;
  transition-duration: .6s, .7s, .6s, .8s;
  transition-timing-function: cubic-bezier(.22,1,.36,1), cubic-bezier(.22,1,.36,1), cubic-bezier(.22,1,.36,1), cubic-bezier(.32,.72,0,1);
  transition-delay: var(--fd, 0ms), var(--fd, 0ms), var(--fd, 0ms), 0s;
}
.ntm-acc .ntm-acc__item::before,
.ntm-acc .ntm-acc__item.is-open::before {
  background: linear-gradient(180deg,
    rgba(13,5,66,calc(.45   + (.35 - .45)   * var(--ntm-k))) 0%,
    rgba(13,5,66,calc(.1227 + (.10 - .1227) * var(--ntm-k))) 16%,
    rgba(13,5,66,calc(0     + (.25 - 0)     * var(--ntm-k))) 22%,
    rgba(13,5,66,calc(.0286 + (.45 - .0286) * var(--ntm-k))) 30%,
    rgba(13,5,66,calc(.0643 + (.78 - .0643) * var(--ntm-k))) 40%,
    rgba(13,5,66,calc(.10   + (.88 - .10)   * var(--ntm-k))) 50%,
    rgba(13,5,66,calc(.412  + (.95 - .412)  * var(--ntm-k))) 70%,
    rgba(13,5,66,calc(.88   + (.97 - .88)   * var(--ntm-k))) 100%);
  transition: --ntm-k .8s cubic-bezier(.32,.72,0,1);
}
.ntm-acc .ntm-acc__item.is-open::before { --ntm-k: 1; }
.ntm-acc .ntm-acc__item::after { transition: opacity .8s cubic-bezier(.32,.72,0,1); }
.ntm-acc { container-type: inline-size; }
@media (min-width: 901px) {
  .ntm-acc__more > div { width: calc((100cqw - 42px) * .5455 - 48px); }
  .ntm-acc__name, .ntm-acc__org { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ntm-acc__name { transition: font-size .6s cubic-bezier(.32,.72,0,1); }
}
.ntm-acc__more { transition: grid-template-rows .7s cubic-bezier(.32,.72,0,1), opacity .15s linear; }
.ntm-acc__item.is-open .ntm-acc__more { transition: grid-template-rows .7s cubic-bezier(.32,.72,0,1) .05s, opacity .45s ease .3s; }
.ntm-acc__item.is-open .ntm-acc__top { transition-delay: .3s; }
.ntm-acc__name, .ntm-acc__org, .ntm-acc__quote, .ntm-acc__why li, .ntm-acc__why-t { text-shadow: 0 1px 3px rgba(5,2,32,.55); }
.ntm-acc__quote { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ntm-acc .ntm-acc__item::before, .ntm-acc .ntm-acc__item::after,
  .ntm-acc__more, .ntm-acc__name { transition-duration: .01s !important; transition-delay: 0s !important; }
}


/* ---- 3) Promesses : espacements alignes sur le reste de la page + cartes aerees (v2, 26/10/2026) ---- */
section:has(.promises-row) .section-head h2,
section.ntm-gain .section-head h2 { margin-top: 14px !important; }
section:has(.promises-row) .section-head { margin-bottom: 64px !important; }
html body .promises-row { max-width: 1152px; gap: 24px !important; align-items: stretch; }
html body .promises-row .promise-item {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 32px 30px 34px;
  background: #fff;
  border: 1px solid rgba(13,5,66,.08);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(13,5,66,.05);
}
html body .promises-row .promise-item .icon { width: 52px !important; height: 52px !important; border-radius: 14px !important; }
html body .promises-row .promise-item .icon svg { width: 22px !important; height: 22px !important; }
html body .promises-row .promise-item p { font-size: 15.5px !important; line-height: 1.65 !important; }
html body .promises-row .promise-item p strong { font-size: 19px; margin-bottom: 8px; }
@media (max-width: 900px) {
  html body .promises-row { max-width: 560px; gap: 16px !important; }
  html body .promises-row .promise-item { flex-direction: row !important; gap: 16px !important; padding: 22px 22px 24px; }
  html body .promises-row .promise-item .icon { width: 48px !important; height: 48px !important; }
}


/* ---- 4) Menu principal : lien « Métiers » masqué (page hub pas finalisée, 26/10/2026) ----
   Le lien est ajouté par le thème, pas par Apparence > Menus. Supprimer ce bloc pour le réafficher. */
#menu-item-metiers,
.site-header__menu > li:has(> a[href$="/metiers/"]),
.mobile-nav__menu > li:has(> a[href$="/metiers/"]) { display: none !important; }


/* ===== D) CARROUSEL MÉTIERS : défilement continu, cartes photo =====
   Même effet que le bandeau de témoignages du bas de page : défilement automatique
   et continu, bords estompés, pause au survol. Sans JavaScript, sans doublon de cartes :
   chaque carte est placée à droite puis translatée de -L (L = N x (largeur + écart)),
   avec un décalage d'animation régulier -> boucle sans saut.
   !! Il y a 11 métiers : si leur nombre change, mettre à jour --N et les règles --i. */
@media (prefers-reduced-motion: no-preference) {
  section.hmx { overflow-x: clip; }
  html body section.hmx .hmx-grid {
    --W: 260px; --G: 16px; --N: 11; --H: 253px; --T: 44s;
    --L: calc(var(--N) * (var(--W) + var(--G)));
    display: block !important; position: relative; overflow: hidden !important;
    width: 100vw; max-width: none; height: calc(var(--H) + 56px);
    margin: -8px calc(50% - 50vw) 0 !important; padding: 0 !important;
    scroll-snap-type: none; scroll-behavior: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  }
  html body section.hmx .hmx-grid > li {
    position: absolute; top: 18px; left: calc(var(--L) - var(--W));
    width: var(--W) !important; max-width: none !important; flex: none !important;
    animation: ntmMetiersFlow var(--T) linear infinite;
    animation-delay: calc(var(--T) * (var(--N) - 1 - var(--i)) / var(--N) * -1);
  }
  html body section.hmx .hmx-grid > li:nth-child(1)  { --i: 0; }
  html body section.hmx .hmx-grid > li:nth-child(2)  { --i: 1; }
  html body section.hmx .hmx-grid > li:nth-child(3)  { --i: 2; }
  html body section.hmx .hmx-grid > li:nth-child(4)  { --i: 3; }
  html body section.hmx .hmx-grid > li:nth-child(5)  { --i: 4; }
  html body section.hmx .hmx-grid > li:nth-child(6)  { --i: 5; }
  html body section.hmx .hmx-grid > li:nth-child(7)  { --i: 6; }
  html body section.hmx .hmx-grid > li:nth-child(8)  { --i: 7; }
  html body section.hmx .hmx-grid > li:nth-child(9)  { --i: 8; }
  html body section.hmx .hmx-grid > li:nth-child(10) { --i: 9; }
  html body section.hmx .hmx-grid > li:nth-child(11) { --i: 10; }
  html body section.hmx .hmx-grid:hover > li { animation-play-state: paused; }
  html body section.hmx .ntm-hmx-btn { display: none !important; }
}
@keyframes ntmMetiersFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--L))); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 2600px) {
  html body section.hmx .hmx-grid { --W: 320px; --H: 299px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  html body section.hmx .hmx-grid { --W: 220px; --H: 223px; --T: 38s; }
}
/* Mouvement réduit (réglage système) : pas d'animation, on garde le carrousel manuel
   (cartes entières, flèches conservées). */
@media (prefers-reduced-motion: reduce) {
  section.hmx { --hmx-n: 5; --hmx-gap: 16px; --hmx-pad: 24px; }
  html body section.hmx .hmx-grid {
    gap: var(--hmx-gap) !important;
    padding: 20px var(--hmx-pad) 44px !important;
    margin: -14px calc(var(--hmx-pad) * -1) -26px !important;
    scroll-padding-inline: var(--hmx-pad);
  }
  html body section.hmx .hmx-grid > li {
    flex: 0 0 calc((100% - (var(--hmx-n) - 1) * var(--hmx-gap)) / var(--hmx-n)) !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1179px) { section.hmx { --hmx-n: 4; } }
@media (prefers-reduced-motion: reduce) and (max-width: 959px)  { section.hmx { --hmx-n: 3; } }
@media (prefers-reduced-motion: reduce) and (max-width: 719px)  { section.hmx { --hmx-n: 2; } }
@media (prefers-reduced-motion: reduce) and (max-width: 479px)  { section.hmx { --hmx-n: 1.3; } }


/* ===== E) TITRE + SOUS-TITRE MÉTIERS : plus de mot orphelin =====
   Le titre faisait 682 px dans un conteneur de 680 px ; le sous-titre était bridé à 620 px. */
html body section.hmx .hmx-head { max-width: 900px; }
html body section.hmx .hmx-head h2 { text-wrap: balance; }
html body section.hmx .hmx-head p { max-width: 760px; text-wrap: balance; }


/* ===== F) TÉMOIGNAGES DU BAS : les deux avis de Vincent C. ne se suivent plus =====
   Réordonnancement visuel (propriété order) identique dans les deux moitiés de la
   piste pour que la boucle reste continue. Ordre : Frédéric, Vincent, Geoffroy,
   Contractant, Thibaud, Vincent, Artisan CAPEB, Tom. */
.testi-track .testi-card:nth-child(1)  { order: 1; }
.testi-track .testi-card:nth-child(2)  { order: 3; }
.testi-track .testi-card:nth-child(3)  { order: 4; }
.testi-track .testi-card:nth-child(4)  { order: 7; }
.testi-track .testi-card:nth-child(5)  { order: 5; }
.testi-track .testi-card:nth-child(6)  { order: 8; }
.testi-track .testi-card:nth-child(7)  { order: 2; }
.testi-track .testi-card:nth-child(8)  { order: 6; }
.testi-track .testi-card:nth-child(9)  { order: 9; }
.testi-track .testi-card:nth-child(10) { order: 11; }
.testi-track .testi-card:nth-child(11) { order: 12; }
.testi-track .testi-card:nth-child(12) { order: 15; }
.testi-track .testi-card:nth-child(13) { order: 13; }
.testi-track .testi-card:nth-child(14) { order: 16; }
.testi-track .testi-card:nth-child(15) { order: 10; }
.testi-track .testi-card:nth-child(16) { order: 14; }


/* ===== G) CARTES MÉTIERS : nom + photo uniquement, sans description =====
   Cartes de même hauteur, plus légères ; le texte reste dans le HTML (lecteurs d'écran / référencement). */
html body section.hmx .hmx-sub,
html body section.hmx .hmx-card:hover .hmx-sub,
html body section.hmx .hmx-card:focus-visible .hmx-sub { display: none !important; }
html body section.hmx .hmx-body { padding: 16px 10px 8px !important; }


/* ===== H) FOOTER : colonne « Ressources » sans retour à la ligne + liens hub « Métiers » masqués =====
   - Colonnes redistribuées : « Ressources » est plus large, chaque lien tient sur une ligne
     (même style sobre que les autres colonnes).
   - Mobile : la colonne « Ressources » passe en pleine largeur pour éviter les coupures.
   - Le bouton « Voir tous les métiers » et le lien « Métiers du BTP » du footer sont masqués
     tant que la page hub n'est pas finalisée (supprimer la dernière règle pour les réafficher). */
@media (min-width: 981px) {
  html body footer .grid { grid-template-columns: 1.3fr .9fr .75fr 1.25fr; }
}
@media (max-width: 640px) {
  html body footer .grid > div:nth-child(4) { grid-column: 1 / -1; }
}
html body section.hmx .hmx-all,
html body footer .links a[href$="/metiers/"] { display: none !important; }

/* === Fix mobile 2026-10-27 : étoiles en SVG (le glyphe ★ s'affichait en "?" sur mobile) === */
.rating-pill .stars,.hero-mini-testi .stars,.cta-inline .rating-row .stars,.testi-content .stars,.testi-card .head .stars{--sz:14px;font-size:0 !important;letter-spacing:0 !important;line-height:0 !important;display:inline-block !important;vertical-align:middle;height:var(--sz);width:calc(var(--sz)*5*28/24);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath fill='%23FF541F' d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-1L12 2Z'/%3E%3C/svg%3E") left center/calc(var(--sz)*28/24) var(--sz) repeat-x;}
.rating-pill .stars{--sz:13px}
.hero-mini-testi .stars{--sz:12px;display:block !important}
.cta-inline .rating-row .stars{--sz:14px}
.testi-content .stars{--sz:15px;display:block !important}
.testi-card .head .stars{--sz:12px;display:block !important}
/* === Fix mobile : témoignage écrit collé sous la vidéo du hero === */
@media (max-width:980px){.hero-mini-testi{order:-1 !important;position:relative !important;z-index:2;margin:-26px 14px 8px !important;max-width:none !important;width:auto !important;box-sizing:border-box;box-shadow:0 12px 30px rgba(16,24,64,.12) !important}}