/* Pages solution au nouveau design : compléments de src/home/home.css (mêmes jetons, styles isolés sous .sof-home).
   Les blocs de l'accueil (hero, logos, feat, viz, avis, faq, cta-final) sont repris tels quels. */

/* ---------- hero : texte centré, hauteur ajustée au contenu ---------- */
.sof-home .sol-hero{min-height:auto}
.sof-home .sol-hero .hero-content{padding-top:calc(var(--header-h) + clamp(48px,8vh,104px));padding-bottom:clamp(72px,11vh,128px)}
@media (max-width:999px){
  .sof-home .sol-hero .hero-content{padding-top:calc(var(--header-h) + 18px);padding-bottom:clamp(110px,28vw,170px)}
}
/* hero en deux colonnes : texte à gauche, visuel animé de l'accueil à droite (pas de mur d'interfaces) */
.sof-home .hero-split .hero-content{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5.8fr) minmax(0,6.2fr);gap:clamp(32px,4.5vw,72px);align-items:center;
  padding-bottom:clamp(56px,9vh,104px)}
.sof-home .hero-split .hero-copy{width:auto;align-items:flex-start;text-align:left}
.sof-home .hero-split .crumb{justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap}
.sof-home .hero-split h1{font-size:clamp(2rem,1.1rem + 2.3vw,3.05rem)}
.sof-home .hero-split .actions,.sof-home .hero-split .proof{justify-content:flex-start}
.sof-home .hero-split .hero-viz{max-width:600px;margin:0 auto}
@media (max-width:1099px){
  .sof-home .hero-split .hero-content{grid-template-columns:minmax(0,1fr);max-width:680px;padding-bottom:clamp(40px,8vw,72px)}
  .sof-home .hero-split .hero-copy{align-items:center;text-align:center}
  .sof-home .hero-split .crumb,.sof-home .hero-split .actions,.sof-home .hero-split .proof{justify-content:center}
  /* une colonne : la pastille du fil d'Ariane peut repasser sur deux lignes (téléphone) */
  .sof-home .hero-split .crumb{flex-wrap:wrap;white-space:normal}
  .sof-home .hero-split .hero-viz{max-width:520px}
}

/* fil d'Ariane dans la pastille du hero */
.sof-home .crumb{gap:8px;letter-spacing:.04em;text-transform:none;font-size:13.5px;flex-wrap:wrap;justify-content:center}
.sof-home .crumb a{color:var(--ink-soft);text-decoration:none}
.sof-home .crumb a:hover{color:var(--violet)}
.sof-home .crumb > span[aria-hidden]{color:var(--orange)}
.sof-home .crumb-cur{color:var(--violet);font-weight:600}

/* étiquettes des visuels animés : texte porté par CSS (décor, hors contenu de la page) */
.sof-home .scn-chip-in b[data-t]::before,.sof-home .scn-chip-in small[data-t]::before{content:attr(data-t)}

/* ---------- sections centrées (titre au-dessus, visuel ou cartes dessous) ---------- */
.sof-home .sol-center{position:relative;padding:clamp(48px,7vw,104px) var(--gutter)}
.sof-home .sol-center h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance;max-width:24em}
.sof-home .sol-center h2 .hl{color:var(--violet)}
.sof-home .sol-center .section-head p{margin:0;max-width:62ch;color:var(--ink-soft);font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.65;text-wrap:pretty}
.sof-home .sol-center .section-head p strong{color:var(--ink);font-weight:600}
.sof-home .sol-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}

/* rythme vertical des pages solution : sections plus resserrées que sur l'accueil (même écart partout) */
.sof-solution .feat,.sof-solution .sol-center{padding-top:clamp(40px,5.5vw,80px);padding-bottom:clamp(40px,5.5vw,80px)}

/* ---------- avantages : titre centré, trois cartes côte à côte ---------- */
.sof-home .sol-cards{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);min-width:0}
@media (max-width:860px){ .sof-home .sol-cards{grid-template-columns:minmax(0,1fr);max-width:620px} }
.sof-home .card-h{display:flex;align-items:center;gap:14px}
.sof-home .card-h .ico{flex:none}
.sof-home .card-h .ico img,.sof-home .card-h .ico svg{width:28px;height:28px;display:block}
.sof-home .card .card-h h3{margin:0}
/* titres de carte en h5 sur certaines pages (balise d'origine conservée) : même dessin que les h3 */
.sof-home .card .card-h h5{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.22rem;line-height:1.3;letter-spacing:-0.02em;color:var(--ink)}
.sof-home .card-t{font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:-0.02em;color:var(--ink);line-height:1.3}
.sof-home .card p{font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.sof-home .card .more{margin-top:auto;padding-top:6px}

/* ---------- signatures : carte, visuel animé, carte ---------- */
/* ordre du code : carte, titre, visuel, carte ; la grille place le titre au-dessus */
.sof-home .sign-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) minmax(0,1fr);
  grid-template-areas:"head head head" "c1 viz c2";gap:clamp(20px,3vw,40px);align-items:center}
.sof-home .sign-head{grid-area:head;margin-bottom:clamp(4px,1.5vw,16px)}
.sof-home .sign-c1{grid-area:c1}
.sof-home .sign-c2{grid-area:c2}
.sof-home .sign-grid .viz{grid-area:viz;max-width:500px}
@media (max-width:999px){
  .sof-home .sign-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "viz" "c1" "c2";max-width:620px}
}

/* ---------- alertes : pastilles sous le texte ---------- */
.sof-home .sol-pills{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.sof-home .sol-pills li{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;background:var(--surface);border:1px solid #ECE8FB;border-radius:14px;
  font-weight:600;color:var(--ink);box-shadow:0 14px 28px -20px rgba(48,30,140,.35)}
.sof-home .sol-pills svg{width:36px;height:36px;flex:none}

/* ---------- centralisation : deux blocs sans cadre (titre, texte, interfaces posées sur le fond, comme sur l'accueil) ---------- */
.sof-home .central-cards{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.sof-home .central-card{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.sof-home .central-txt{text-align:left;max-width:52ch}
.sof-home .central-txt h3{margin:0 0 10px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .central-txt p{margin:0;color:var(--ink-soft);line-height:1.6}
.sof-home .central-media{flex:1;display:flex;align-items:center}
.sof-home .central-media .viz{max-width:none}
@media (max-width:860px){ .sof-home .central-cards{grid-template-columns:minmax(0,1fr);max-width:620px} }

/* ---------- planification : visuel large sous les cartes de la fiabilité ---------- */
.sof-home .plan-fiab .section-head p{max-width:80ch}
.sof-home .sol-wide{max-width:1200px;margin:clamp(40px,5vw,72px) auto 0}

/* ---------- inscriptions : visuel large coupé en bas par un fondu (formulaires plus hauts que la scène) ---------- */
.sof-home .ins-sync{max-width:980px}
/* visuel coupé en bas par un fondu : le masque est posé sur un conteneur pleine largeur, plus haut que le
   visuel (marge négative compensée), pour ne pas rogner les ombres des interfaces en bord de boîte */
.sof-home .sol-fade{position:relative;padding:64px var(--gutter) 0;margin:-64px calc(var(--gutter) * -1) 0;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}

/* ---------- émargements : tailles des visuels ---------- */
.sof-home .emg-numerique,.sof-home .emg-conformite{max-width:1000px}
.sof-home .sol-fade-gap{margin-top:clamp(-24px,-1vw,-8px)}
.sof-home .stk-pane .viz.emg-rapport,.sof-home .stk-pane .viz.emg-qr,.sof-home .stk-pane .viz.emg-oublis{max-width:620px}

/* ---------- assistant IA : tailles des visuels ---------- */
.sof-home .ia-emails{max-width:1000px}
.sof-home .stk-pane .viz.ia-pane{max-width:620px}

/* ---------- intégrations : catalogue filtrable, logos, visuels ---------- */
.sof-home .int-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto clamp(28px,3.4vw,40px);max-width:1000px}
.sof-home .int-filters button{padding:9px 18px;border-radius:999px;border:1px solid #E4DFF5;background:var(--surface);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:border-color .25s,background-color .25s,color .25s}
.sof-home .int-filters button:hover{border-color:#CDBFFF}
.sof-home .int-filters button.bg-smartof-purple-600{background:var(--violet);border-color:var(--violet);color:#fff}
.sof-home .int-grid{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);text-align:left}
.sof-home .int-item.hidden{display:none}
.sof-home .int-item > a,.sof-home .int-item > div{display:flex;align-items:center;gap:16px;height:100%;padding:20px;background:var(--surface);border:1px solid #ECE8FB;border-radius:18px;
  color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.sof-home .int-item > a:hover{transform:translateY(-3px);border-color:#D9CEFF;box-shadow:0 22px 40px -30px rgba(48,30,140,.4)}
.sof-home .int-item img{flex:none;width:44px;height:44px;object-fit:contain}
.sof-home .int-name{display:block;font-family:var(--font-display);font-weight:600;color:var(--ink);line-height:1.3}
.sof-home .int-text{display:block;margin-top:3px;font-size:.9rem;line-height:1.45;color:var(--muted)}
.sof-home .int-item > a:hover .int-name{color:var(--violet)}
@media (max-width:1000px){ .sof-home .int-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .sof-home .int-grid{grid-template-columns:minmax(0,1fr)} }
.sof-home .int-icons{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sof-home .int-icons a{display:grid;place-items:center;width:52px;height:52px;background:var(--surface);border:1px solid #ECE8FB;border-radius:14px;transition:transform .25s,border-color .25s,box-shadow .25s}
.sof-home .int-icons a:hover{transform:translateY(-2px);border-color:#CDBFFF;box-shadow:0 14px 26px -18px rgba(48,30,140,.45)}
.sof-home .int-icons img{width:30px;height:30px;object-fit:contain}
.sof-home .central-txt .tag{margin-bottom:12px}
.sof-home .central-txt .int-icons{margin-top:14px}
.sof-home .feat .viz.int-tools,.sof-home .feat .viz.int-compta{max-width:600px}
.sof-home .int-refs{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.sof-home .int-refs li{display:grid;place-items:center;height:clamp(72px,6.5vw,92px);padding:12px 18px;background:var(--surface);border:1px solid #EFEBFA;border-radius:16px;transition:border-color .3s}
.sof-home .int-refs li:hover{border-color:#DCD3FF}
.sof-home .int-refs img{display:block;max-height:40px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.sof-home .int-refs li:hover img{filter:none;opacity:1}
@media (max-width:900px){ .sof-home .int-refs{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:520px){ .sof-home .int-refs{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* hub de l'animation « intégrations » de l'accueil : libellés affichés en CSS (décor) */
.sof-home .eco-pill:empty::before{content:attr(data-def)}
.sof-home .eco-logo [data-t]::before{content:attr(data-t)}

/* ---------- fiches intégration (/solution/integration/{slug}) ---------- */
.sof-home .int-hero .crumb{flex-wrap:wrap;white-space:normal}
.sof-home .int-pair{display:flex;align-items:center;gap:10px}
.sof-home .int-logo{display:grid;place-items:center;width:clamp(64px,6vw,80px);aspect-ratio:1;padding:14px;background:var(--surface);border:1px solid #ECE8FB;border-radius:20px;
  box-shadow:0 22px 40px -26px rgba(48,30,140,.45)}
.sof-home .int-logo img{width:100%;height:100%;object-fit:contain}
.sof-home .int-link{display:flex;align-items:center;gap:6px;color:var(--violet)}
.sof-home .int-link i{display:block;width:clamp(14px,2vw,26px);border-top:2px dashed #C9BCFF}
.sof-home .int-link svg{width:24px;height:24px;flex:none}
.sof-home .int-hero .hero-copy .tag{margin-top:4px}
.sof-home .int-hero h1{font-size:clamp(1.9rem,1.1rem + 2vw,2.8rem);text-wrap:balance}
.sof-home .int-h1-name{white-space:nowrap}
.sof-home .int-hero h1.int-h1-long{font-size:clamp(1.7rem,1rem + 1.6vw,2.3rem)}
@media (max-width:520px){ .sof-home .int-h1-long .int-h1-name{white-space:normal} }
.sof-home .int-facts{width:100%;max-width:440px;margin:0 auto;display:grid;gap:0;padding:clamp(22px,2.6vw,32px);background:var(--surface);border:1px solid #ECE8FB;border-radius:24px;
  box-shadow:0 34px 70px -44px rgba(48,30,140,.5)}
.sof-home .int-fact{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid #EFEBFA}
.sof-home .int-fact:first-child{padding-top:0;border-top:0}
.sof-home .int-fact:last-child{padding-bottom:0}
.sof-home .int-fact-label{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.sof-home .int-fact-tool{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink)}
.sof-home .int-fact-tool img{width:28px;height:28px;object-fit:contain}
.sof-home .int-fact p{margin:0;font-size:.92rem;color:var(--muted)}
.sof-home .int-chip{display:inline-block;padding:5px 12px;border-radius:999px;background:#F1EDFF;color:var(--violet);font-size:.88rem;font-weight:600}
.sof-home .int-site{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--violet);text-decoration:none;word-break:break-all}
.sof-home .int-site:hover{text-decoration:underline}
.sof-home .int-site svg{width:16px;height:16px;flex:none}
.sof-home .int-prose-wrap{max-width:900px;margin:0 auto;padding:clamp(40px,5.5vw,80px) var(--gutter) clamp(24px,3vw,40px);display:grid;gap:clamp(20px,2.4vw,28px)}
.sof-home .int-prose{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,22px);padding:clamp(24px,3vw,40px);background:var(--surface);border:1px solid #ECE8FB;border-radius:24px;text-align:left}
.sof-home .int-prose-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#F1EDFF;color:var(--violet)}
.sof-home .int-prose-ic svg{width:22px;height:22px}
.sof-home .int-prose h2{margin:6px 0 14px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .int-prose-body{color:var(--ink-soft);line-height:1.7;font-size:clamp(1rem,.96rem + .15vw,1.06rem)}
.sof-home .int-prose-body p{margin:0 0 14px}
.sof-home .int-prose-body p:last-child,.sof-home .int-prose-body ul:last-child{margin-bottom:0}
.sof-home .int-prose-body ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.sof-home .int-prose-body li{position:relative;padding-left:30px}
.sof-home .int-prose-body li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;background:#F1EDFF
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-8.5' fill='none' stroke='%237D5FFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.sof-home .int-prose-body strong{color:var(--ink);font-weight:600}
.sof-home .int-prose-body a{color:var(--violet-strong,var(--violet));text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(125,95,255,.45)}
@media (max-width:560px){ .sof-home .int-prose{grid-template-columns:minmax(0,1fr)} .sof-home .int-prose h2{margin-top:0} }
.sof-home .int-list .int-api{max-width:1200px;margin:clamp(28px,3.4vw,44px) auto 0}
.sof-home .int-api-title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .int-api p{margin:6px 0 0;color:var(--ink-soft)}
@media (max-width:760px){ .sof-home .int-api{flex-direction:column;text-align:center} }

/* ---------- facturation : tailles des visuels, logotype, bandeau Pennylane ---------- */
.sof-home .fact-simple{max-width:640px}
.sof-home .fact-logotype{display:block;width:auto;height:clamp(40px,4vw,52px)}
.sof-home .stk-pane .viz.fact-relances,.sof-home .stk-pane .viz.fact-bpf{max-width:620px}
/* financeurs : la composition remplit sa boîte, un peu plus étroite pour la même taille apparente que les autres */
.sof-home .stk-pane .viz.fact-financeurs{max-width:560px}
.sof-home .sol-band{padding:clamp(24px,4vw,56px) var(--gutter)}
.sof-home .sol-band-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,3.4vw,40px) clamp(24px,4vw,48px);
  border-radius:clamp(22px,2.6vw,32px);background:linear-gradient(135deg,#F3EEFF 0%,#FBFAFF 55%,#FFF3EA 100%);border:1px solid #ECE6FF}
.sof-home .sol-band h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .sol-band h2 .hl{color:var(--violet)}
.sof-home .sol-band p{margin:6px 0 0;color:var(--ink-soft);font-size:clamp(1rem,.95rem + .2vw,1.1rem)}
@media (max-width:760px){ .sof-home .sol-band-in{flex-direction:column;text-align:center} }

/* ---------- inscriptions : formulaire, la pièce jointe est glissée dans le champ « Carte d'identité » ---------- */
.sof-home .ins-form{max-width:460px}
.sof-home .ins-drop .drop{position:relative;animation:ins-drop 6.4s cubic-bezier(.55,0,.3,1) infinite;animation-play-state:paused}
.sof-home .ins-drop .hand{position:absolute;left:78%;top:52%;width:15%;height:auto;filter:drop-shadow(0 4px 8px rgba(48,30,140,.25))}
/* cache du champ vide (la pièce jointe n'est pas encore déposée) et contour qui s'allume au dépôt */
.sof-home .ins-form .mx-stage .ins-empty{position:absolute;left:37.06%;top:79.47%;width:48.91%;height:4%;background:#FDFDFD;animation:ins-empty 6.4s ease infinite;animation-play-state:paused}
.sof-home .ins-form .mx-stage .ins-empty::after{content:"";position:absolute;left:10.1%;right:.8%;top:9%;bottom:9%;border:1.5px dashed #C9CED6;border-radius:4px}
.sof-home .ins-form .mx-stage .ins-ok{position:absolute;left:41.6%;top:79.4%;width:44.4%;height:4%;border:2px solid #8E73FF;border-radius:6px;box-shadow:0 0 0 4px rgba(142,115,255,.16);
  opacity:0;animation:ins-ok 6.4s ease infinite;animation-play-state:paused}
.sof-home .viz.in.on .ins-drop .drop,.sof-home .viz.in.on .ins-empty,.sof-home .viz.in.on .ins-ok{animation-play-state:running}
@keyframes ins-drop{0%,14%{transform:none;opacity:1}44%{transform:translate(-38.2%,119.3%) rotate(-8deg) scale(.87);opacity:1}52%{transform:translate(-38.2%,119.3%) rotate(-8deg) scale(.84);opacity:0}86%{transform:none;opacity:0}96%,100%{transform:none;opacity:1}}
@keyframes ins-empty{0%,46%{opacity:1}54%,84%{opacity:0}92%,100%{opacity:1}}
@keyframes ins-ok{0%,48%{opacity:0}54%,80%{opacity:1}88%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .sof-home .ins-drop .drop,.sof-home .ins-empty,.sof-home .ins-ok{animation:none} .sof-home .ins-form .mx-stage .ins-empty{opacity:0} }

/* ---------- vie à l'intérieur des captures (repris du motion produit) : calque d'effets posé sur la capture,
   dans le repère de la capture d'origine (px), mis à l'échelle par src/home/home.js ---------- */
.sof-home .mx-stage .fxs{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;font-family:var(--font-body,inherit)}
.sof-home .fx{position:absolute;box-sizing:border-box;opacity:0}
.sof-home .fx-count{overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.sof-home .fx-count::before{content:attr(data-n)}
.sof-home .fx-count::after{content:attr(data-s);font-size:var(--ss,inherit)}
.sof-home .fx-cursor{left:0;top:0;width:22px;height:30px;transform-origin:2px 2px;z-index:5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.sof-home .fx-cursor svg{display:block}
.sof-home .fx-cursor .ripple{position:absolute;left:2px;top:2px;width:44px;height:44px;border-radius:50%;border:2px solid #7D5FFF;transform:translate(-50%,-50%) scale(.2);opacity:0}
.sof-home .fx-toggle{background:#c9c9d6}
.sof-home .fx-toggle i{position:absolute;top:2px;left:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}

/* ---------- liste + visuel fixe : la liste défile, le visuel reste au centre et suit l'élément actif ---------- */
.sof-home .stk{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);column-gap:clamp(32px,4vw,64px);row-gap:12px;align-items:start}
.sof-home .stk-item{grid-column:1;padding:20px 22px;border:1px solid #ECE8FB;border-radius:18px;background:var(--surface);cursor:pointer;
  transition:border-color .3s,background-color .3s,box-shadow .3s}
.sof-home .stk-item.on{border-color:#CDBFFF;background:#F7F4FF;box-shadow:0 22px 40px -32px rgba(48,30,140,.45)}
.sof-home .stk-item h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1rem + .35vw,1.3rem);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sof-home .stk-item p{margin:8px 0 0;color:var(--ink-soft);line-height:1.6}
.sof-home .stk-pane{grid-column:2;grid-row:1 / span 3;align-self:center;position:sticky;top:calc(50svh - 220px);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.sof-home .stk-pane.on{opacity:1;visibility:visible}
.sof-home .stk-pane .viz{max-width:none}
.sof-home .stk-pane .ins-envois{max-width:540px}
.sof-home .stk-pane .ins-remplissage{max-width:600px}
.sof-home .stk-shot{display:block;width:100%;height:auto;border-radius:20px}
@media (max-width:999px){
  .sof-home .stk{grid-template-columns:minmax(0,1fr);max-width:620px;row-gap:16px}
  .sof-home .stk-item{cursor:auto}
  .sof-home .stk-item.on{border-color:#ECE8FB;background:var(--surface);box-shadow:none}
  .sof-home .stk-pane{grid-column:1;grid-row:auto;position:static;opacity:1;visibility:visible;margin-bottom:24px}
}

/* ---------- texte à gauche, cartes empilées à droite ---------- */
.sof-home .sol-stack{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sof-home .sol-stack .card{padding:20px 22px}

/* ---------- impact : chiffres clés ---------- */
.sof-home .sol-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);min-width:0}
.sof-home .sol-stats li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.2vw,28px);background:var(--surface);border:1px solid #ECE8FB;border-radius:20px;
  box-shadow:0 22px 40px -32px rgba(48,30,140,.35)}
.sof-home .sol-stats b{font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,1.3rem + 1.4vw,2.5rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(90deg,#7D5FFF,#E46FA0 70%,#FF934F);-webkit-background-clip:text;background-clip:text;color:transparent}
.sof-home .sol-stats span{color:var(--ink-soft);line-height:1.5;font-weight:500}
@media (max-width:480px){ .sof-home .sol-stats{grid-template-columns:minmax(0,1fr)} }

/* ---------- témoignages : carrousel pleine largeur ---------- */
.sof-home .sol-reviews .section-head{gap:14px}
.sof-home .sol-reviews-sub{margin:0;max-width:62ch;color:var(--ink-soft);font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.6}
.sof-home .sol-rating{margin:0;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.sof-home .sol-rating .stars{color:var(--star);letter-spacing:1px}
.sof-home .sol-rating span:last-child{color:var(--muted)}
.sof-home .sol-reviews .rev-car{max-width:1200px;margin:0 auto}
.sof-home .sol-reviews .rev-slide{flex-basis:calc((100% - 2 * var(--g)) / 2.6)}
.sof-home .sol-reviews .rev-card blockquote{flex:0 0 auto}
/* avis longs : texte limité à 6 lignes (fondu), la suite est sur la page avis clients (comme la version précédente) */
.sof-home .rev-txt{max-height:calc(1.6em * 6);overflow:hidden;font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.6;color:var(--ink)}
/* .cut posé par src/home/home.js quand le texte dépasse : fondu en bas et lien « Voir plus » */
.sof-home .rev-card.cut .rev-txt{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4em),transparent)}
.sof-home .rev-card:not(.cut) .rev-more{display:none}
.sof-home .rev-txt p{margin:0 0 .6em}
.sof-home .rev-more{align-self:flex-start;margin-top:-6px;font-size:.88rem;font-weight:600;color:var(--violet);text-decoration:none}
.sof-home .rev-more:hover{text-decoration:underline;text-underline-offset:3px}
.sof-home .sol-reviews .rev-card figcaption{margin-top:auto}
.sof-home .rev-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;margin-top:8px}
.sof-home .sol-link{display:flex;justify-content:center;margin-top:clamp(20px,3vw,32px)}
@media (max-width:999px){ .sof-home .sol-reviews .rev-slide{flex-basis:calc((100% - var(--g)) / 1.6)} }
@media (max-width:640px){ .sof-home .sol-reviews .rev-slide{flex-basis:calc(100% - 44px)} }

/* ---------- appel final : étiquette au-dessus du titre ---------- */
.sof-home .cta-final .tag{margin-bottom:-6px}


/* étoiles de la note Google : dessinées en CSS (décor, hors contenu de la page) */
.sof-home .stars:empty::before{content:"★★★★★"}

/* ---------- API : images d'origine (page technique), catalogue, bandeau Pennylane ---------- */
.sof-home .api-img{margin:0}
.sof-home .api-img img{display:block;width:100%;height:auto}
.sof-home .hero-split .api-img{max-width:560px}
.sof-home .feat .api-shot{width:100%;max-width:620px;margin:0 auto}
.sof-home .feat .api-shot img{border-radius:clamp(14px,1.6vw,20px);box-shadow:0 34px 70px -44px rgba(48,30,140,.5)}
.sof-home .api-eco{margin-top:clamp(28px,4vw,52px);max-width:600px}
.sof-home .feat .checks.box svg{width:20px;height:20px;margin-top:2px}
.sof-home .api-int .section-head p + p{margin-top:12px}
.sof-home .api-int .int-grid{margin-top:clamp(28px,3.4vw,44px)}
.sof-home .api-pennylane-logo{flex:none;display:block;width:auto;height:clamp(36px,3.6vw,46px)}
.sof-home .api-pennylane-txt{flex:1;min-width:0}
/* hero API : points lumineux qui parcourent les pointillés de l'illustration, dans les deux sens */
.sof-home .api-flow{position:relative;--px:0;--pq:0}
/* calques de l'illustration : apesanteur (dérive lente, durées décalées) + léger suivi de la souris selon la profondeur */
.sof-home .api-g{display:block;width:100%;height:auto}
.sof-home .api-g:not(.api-g-base){position:absolute;inset:0;translate:calc(var(--px) * var(--dx)) calc(var(--pq) * var(--dy));animation:api-float var(--t) ease-in-out var(--ph) infinite alternate;will-change:transform}
.sof-home .api-g-db{--dx:18px;--dy:13px;--t:6.4s;--ph:-1.2s;--fy:-7px;--fr:.6deg;transform-origin:68% 22%}
.sof-home .api-g-outils{--dx:22px;--dy:15px;--t:5.8s;--ph:-2.2s;--fy:-6px;--fr:-.7deg;transform-origin:24% 77%}
/* le fond (bloc SmartOF, pointillés) et les points lumineux bougent ensemble, moins que les éléments flottants */
.sof-home .api-g-base,.sof-home .api-flow-svg{translate:calc(var(--px) * 6px) calc(var(--pq) * 4px)}
@keyframes api-float{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,var(--fy),0) rotate(var(--fr))}}
.sof-home .api-flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sof-home .api-pulse circle{fill:#9F8BFF}
.sof-home .api-ping{fill:none;stroke:#9F8BFF;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:api-ping 2.4s ease-out infinite}
@keyframes api-ping{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){ .sof-home .api-flow-svg{display:none} .sof-home .api-g{animation:none} }

/* ---------- CRM : tailles des visuels ---------- */
.sof-home .crm-perso{max-width:1000px;margin-top:clamp(28px,4vw,52px)}
.sof-home .stk-pane .viz.crm-echanges{max-width:640px}
.sof-home .stk-pane .viz.crm-relances,.sof-home .stk-pane .viz.crm-perf{max-width:760px}

/* ---------- devis : cartes à titre seul, tailles des visuels ---------- */
.sof-home .devis-points{margin-bottom:clamp(28px,4vw,52px)}
.sof-home .devis-points .card-h h3{font-size:clamp(1.05rem,.98rem + .3vw,1.22rem)}
.sof-home .viz.devis-perf{max-width:1100px}
.sof-home .stk-pane .viz.devis-relances,.sof-home .stk-pane .viz.devis-docs,.sof-home .stk-pane .viz.devis-catalogue{max-width:760px}
/* devis : « Gérer vos devis », grille de cartes alternées (large + étroite, puis étroite + large) ; texte en haut,
   visuel centré dans la zone restante, hauteurs alignées par ligne */
.sof-home .devis-bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.sof-home .devis-bento .central-card{grid-column:span 5;gap:clamp(16px,1.8vw,24px);padding:clamp(22px,2.4vw,32px);background:var(--surface);border:1px solid #ECE8FB;border-radius:24px;
  box-shadow:0 30px 60px -48px rgba(48,30,140,.45);overflow:hidden}
.sof-home .devis-bento .central-card:nth-child(4n+1),.sof-home .devis-bento .central-card:nth-child(4n){grid-column:span 7}
.sof-home .devis-bento .central-txt{max-width:none}
.sof-home .devis-bento .central-media{justify-content:center;padding:clamp(8px,1.2vw,16px) 0 0}
.sof-home .devis-bento .viz.devis-etapes{max-width:330px}
.sof-home .devis-bento .viz.devis-demandes{max-width:440px}
.sof-home .devis-bento .viz.devis-signature,.sof-home .devis-bento .viz.devis-session{max-width:600px}
@media (max-width:860px){
  .sof-home .devis-bento{grid-template-columns:minmax(0,1fr)}
  .sof-home .devis-bento .central-card,.sof-home .devis-bento .central-card:nth-child(4n+1),.sof-home .devis-bento .central-card:nth-child(4n){grid-column:auto}
}
/* devis : fenêtre Indicateurs, les montants apparaissent puis les colonnes montent depuis l'axe (une fois, à l'entrée à l'écran) */
.sof-home .devis-chart{position:relative;animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused}
.sof-home .viz.in.on .devis-chart{animation-play-state:running}
.sof-home .ly .devis-chart img{animation:none;will-change:auto}
.sof-home .devis-chart .devis-bar,.sof-home .devis-chart .devis-num{position:absolute;display:block;max-width:none}
.sof-home .devis-chart .devis-bar{transform-origin:50% 100%}
.js .sof-home .devis-perf .devis-bar{transform:scaleY(0)}
.js .sof-home .devis-perf .devis-num{opacity:0;transform:translateY(45%);filter:blur(3px)}
.js .sof-home .devis-perf.in .devis-bar{animation:devis-grow 1s cubic-bezier(.2,.85,.25,1) calc(.75s + var(--i) * .09s) both}
.js .sof-home .devis-perf.in .devis-num{animation:devis-num .7s cubic-bezier(.2,.8,.2,1) calc(.45s + var(--i) * .16s) both}
@keyframes devis-grow{from{transform:scaleY(0)}70%{transform:scaleY(1.04)}to{transform:scaleY(1)}}
@keyframes devis-num{from{opacity:0;transform:translateY(45%);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){
  .js .sof-home .devis-perf .devis-bar,.js .sof-home .devis-perf .devis-num{transform:none;opacity:1;filter:none;animation:none}
}

/* ---------- intégration LMS : tailles des visuels ---------- */
.sof-home .viz.lms-compat{max-width:1000px;margin-top:clamp(20px,3vw,40px)}
.sof-home .lms-points{margin-bottom:clamp(28px,4vw,52px)}
.sof-home .lms-points .card .more{margin-top:4px}
.sof-home .viz.lms-hybride{max-width:1100px}
.sof-home .stk-pane .viz.lms-sync,.sof-home .stk-pane .viz.lms-scene{max-width:760px}
.sof-home .feat .viz.lms-extranet{max-width:660px}

/* ---------- logiciel Qualiopi (page spécifique : images et vidéo d'origine conservées) ---------- */
.sof-home .hero-split .q-lead-strong{font-weight:600;color:var(--ink)}
.sof-home .hero-split .q-lead-strong + .lead{margin-top:-6px}
/* hero : vidéo d'origine (bords en fondu dans le fond du hero) ; pendant sa scène « Satisfaction »,
   l'animation de l'accueil prend sa place en fondu enchaîné (cf. .q-mix dans src/home/home.js) */
.sof-home .hero-split .q-mix{position:relative;width:100%;max-width:600px;margin:0 auto}
/* fond blanc de la vidéo fondu dans le fond du hero (multiply) : le contenu du hero ne doit pas isoler la vidéo de son fond */
.sof-home .q-hero .hero-content{z-index:auto}
.sof-home .q-mix video{display:block;width:100%;transition:opacity .45s ease;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
  mask-composite:intersect}
.sof-home .q-mix-sv{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.sof-home .q-mix-sv .sv{width:96%}
.sof-home .q-mix.sv-on video{opacity:0}
.sof-home .q-mix.sv-on .q-mix-sv{opacity:1;visibility:visible}
.sof-home .sol-center .section-head .more{margin-top:4px}
/* chiffres clés */
.sof-home .q-stats{list-style:none;margin:clamp(28px,4vw,48px) auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.sof-home .q-stats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:clamp(24px,2.6vw,36px);background:var(--surface);border:1px solid #ECE8FB;border-radius:24px;
  box-shadow:0 30px 60px -48px rgba(48,30,140,.45)}
.sof-home .q-stats img{width:60px;height:60px}
.sof-home .q-stats li{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.sof-home .q-stats li:hover{transform:translateY(-4px);border-color:#CFC3FF;box-shadow:0 30px 56px -36px rgba(48,30,140,.42)}
.sof-home .q-stats li img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sof-home .q-stats li:hover img{transform:translateY(-3px) scale(1.06)}
@media (prefers-reduced-motion:reduce){ .sof-home .q-stats li:hover,.sof-home .q-stats li:hover img{transform:none} }
.sof-home .q-stats h3{margin:6px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .q-stats p{margin:0;color:var(--ink-soft);line-height:1.55}
.sof-home .q-stats b{margin-top:auto;padding-top:14px;border-top:1px solid #EFEBFA;width:60%;font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,1.6rem + 1.8vw,3rem);line-height:1.1;letter-spacing:-.03em;
  background:linear-gradient(90deg,#7D5FFF,#E46FA0 70%,#FF934F);-webkit-background-clip:text;background-clip:text;color:transparent}
.sof-home .q-stats span{font-weight:500;color:var(--ink);line-height:1.35}
.sof-home .q-stats span a{color:var(--violet-strong,var(--violet));text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){ .sof-home .q-stats{grid-template-columns:minmax(0,1fr);max-width:420px} }
/* critères : onglets, carte du critère, infobulles des indicateurs */
.sof-home .q-tablist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(28px,3.4vw,40px) auto}
.sof-home .q-tablist button{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid #E4DFF5;background:var(--surface);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:border-color .25s,background-color .25s,color .25s}
.sof-home .q-tablist button:hover{border-color:#CDBFFF}
.sof-home .q-tablist button.on{background:#F1EDFF;border-color:#CDBFFF;color:var(--violet)}
.sof-home .q-pane{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;text-align:left;
  padding:clamp(8px,1.4vw,20px) 0}
.sof-home .q-pane.hidden{display:none}
.sof-home .q-pane h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .q-indic{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sof-home .q-indic li{position:relative;outline:none}
.sof-home .q-indic-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#F3F1F8;color:var(--ink-soft);font-size:.86rem;font-weight:500;cursor:help;transition:background-color .2s,color .2s}
.sof-home .q-indic li:hover .q-indic-chip,.sof-home .q-indic li:focus .q-indic-chip{background:#ECE7FF;color:var(--violet)}
.sof-home .q-indic-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:min(300px,80vw);padding:10px 12px;border-radius:12px;background:#2B2540;color:#fff;font-size:.84rem;line-height:1.45;
  box-shadow:0 18px 40px -20px rgba(20,10,60,.6);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s,visibility .2s}
.sof-home .q-indic li:hover .q-indic-tip,.sof-home .q-indic li:focus .q-indic-tip{opacity:1;visibility:visible;transform:none}
.sof-home .q-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sof-home .q-checks li{display:flex;align-items:flex-start;gap:10px}
.sof-home .q-checks svg{flex:none;width:24px;height:24px;margin-top:0}
.sof-home .q-checks p{margin:0;color:var(--ink-soft);line-height:1.55}
.sof-home .q-checks strong{color:var(--ink);font-weight:600}
.sof-home .q-pane-txt .more{margin-top:18px}
.sof-home .q-pane-media{display:flex;justify-content:center;align-items:center;padding:clamp(16px,2vw,28px);border-radius:22px;background:linear-gradient(150deg,#F5F2FF,#FFF4EC)}
.sof-home .q-pane-media .viz{max-width:none}
.sof-home .q-pane-media .viz img{border-radius:14px}
@media (max-width:860px){ .sof-home .q-pane{grid-template-columns:minmax(0,1fr)} }
/* bento : même grille alternée que la page Devis ; auditrice (référentiel + personne), images d'origine */
.sof-home .q-bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.sof-home .q-bento .central-card{grid-column:span 5;gap:clamp(16px,1.8vw,24px);padding:clamp(22px,2.4vw,32px);background:var(--surface);border:1px solid #ECE8FB;border-radius:24px;
  box-shadow:0 30px 60px -48px rgba(48,30,140,.45);overflow:hidden}
.sof-home .q-bento .central-card.q-span-12{grid-column:span 12}
.sof-home .q-bento .central-card.q-span-7{grid-column:span 7}
.sof-home .q-bento .central-card.q-span-5{grid-column:span 5}
/* carte large en deux colonnes : texte à gauche, visuel à droite */
.sof-home .q-bento .q-split{flex-direction:row;align-items:center}
.sof-home .q-bento .q-split .central-txt{flex:1;min-width:0}
.sof-home .q-bento .q-split .central-media{flex:1.3;min-width:0;padding:0}
.sof-home .q-bento .central-txt{max-width:none}
.sof-home .q-bento .central-txt a{color:var(--violet-strong,var(--violet));text-decoration:underline;text-underline-offset:3px}
.sof-home .q-bento .central-media{justify-content:center;padding:clamp(8px,1.2vw,16px) 0 0}
.sof-home .q-bento .central-media > .viz{max-width:none}
.sof-home .q-version{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px)}
.sof-home .q-version .viz.q-version-logo{max-width:300px}
/* frise des versions Qualiopi (V7 à V10) : pastilles cochées sur un trait pointillé */
.sof-home .q-timeline{position:relative;list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sof-home .q-timeline::before{content:"";position:absolute;left:0;right:0;top:58px;border-top:3px dashed #D9D2F5}
.sof-home .q-timeline li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sof-home .q-timeline b{height:32px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:32px;color:var(--muted)}
.sof-home .q-timeline li:last-child b{color:var(--ink)}
.sof-home .q-tl-dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#5BC45F;color:#fff;box-shadow:0 0 0 5px rgba(91,196,95,.22)}
.sof-home .q-tl-dot svg{width:22px;height:22px}
.sof-home .q-timeline small{font-size:.8rem;line-height:1.35;color:var(--muted)}
.sof-home .q-auditrice{gap:clamp(16px,2vw,28px);align-items:center}
.sof-home .q-auditrice{justify-content:center}
.sof-home .q-auditrice .q-ref{flex:none;width:min(440px,58%);min-width:0}
.sof-home .q-auditrice .q-ref .qv{max-width:none}
.sof-home .q-person{flex:none;width:clamp(150px,30%,220px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.sof-home .q-person .q-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;box-shadow:0 18px 36px -24px rgba(48,30,140,.5)}
.sof-home .q-person-name{margin-top:6px;font-family:var(--font-display);font-weight:600;color:var(--ink)}
.sof-home .q-person-name a{color:inherit;text-decoration:none}
.sof-home .q-person-name a:hover{color:var(--violet)}
.sof-home .q-person-role{font-size:.88rem;line-height:1.4;color:var(--muted)}
.sof-home .q-person .q-logo{width:120px;margin-top:6px;padding:8px;background:#fff;border:1px solid #ECE8FB;border-radius:10px}
.sof-home .q-bento .viz.q-rgpd{max-width:150px}
.sof-home .q-bento .viz.q-rgpd img{border-radius:50%;box-shadow:0 2px 14px rgba(0,0,0,.2)}
@media (max-width:860px){
  .sof-home .q-bento{grid-template-columns:minmax(0,1fr)}
  .sof-home .q-bento .central-card,.sof-home .q-bento .central-card[class*=q-span]{grid-column:auto}
  .sof-home .q-bento .q-split{flex-direction:column;align-items:stretch}
}
@media (max-width:620px){ .sof-home .q-auditrice{flex-direction:column} .sof-home .q-auditrice .q-ref{width:100%} }
/* comparatif */
.sof-home .q-compare{max-width:1100px;margin:clamp(28px,4vw,48px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);text-align:left}
.sof-home .q-col{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,2.8vw,40px);background:var(--surface);border:1px solid #ECE8FB;border-radius:24px}
.sof-home .q-col.is-smartof{background:linear-gradient(160deg,#F3EEFF,#FBFAFF 60%);border-color:#DCD3FF;box-shadow:0 34px 70px -48px rgba(48,30,140,.5)}
.sof-home .q-col-h{display:flex;align-items:center;gap:14px}
.sof-home .q-col-h img{flex:none;width:44px;height:44px}
.sof-home .q-col h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,1.05rem + .6vw,1.55rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .q-col > p{margin:0;color:var(--ink-soft);line-height:1.6}
.sof-home .q-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sof-home .q-col li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft);line-height:1.55}
.sof-home .q-col li img{flex:none;width:20px;height:20px;margin-top:2px}
.sof-home .q-col li strong{color:var(--ink);font-weight:600}
@media (max-width:860px){ .sof-home .q-compare{grid-template-columns:minmax(0,1fr);max-width:620px} }
/* tout-en-un : captures d'origine */
.sof-home .stk-pane .viz.q-shot{max-width:720px}
.sof-home .q-criteres .section-head p a{color:var(--violet-strong,var(--violet));font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(125,95,255,.45)}
.sof-home .sol-band .btn{flex:none;white-space:nowrap}
/* marges resserrées autour du bandeau « Comment SmartOF vous aide ? » (critères -> bandeau -> bento) */
.sof-home.q-page .q-criteres{padding-bottom:clamp(16px,2.4vw,32px)}
.sof-home.q-page .sol-band{padding-top:clamp(12px,2vw,24px);padding-bottom:clamp(12px,2vw,24px)}
.sof-home.q-page .sol-band + .sol-center{padding-top:clamp(16px,2.4vw,32px)}
/* auditeurs et support : blocs texte + visuel sans cadre ; espacement resserré avant le bento */
.sof-home .q-feat .q-auditrice{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,28px);min-width:0}
.sof-home .q-feat .q-auditrice .q-ref{width:min(420px,62%)}
.sof-home .q-feat .viz.q-support{max-width:420px}
.sof-home.q-page .q-feat + .q-bento-sec{padding-top:clamp(16px,2.4vw,32px)}
/* auditeurs : l'auditrice au centre de la section, entre le texte et l'animation */
.sof-home .q-feat .q-auditrice .q-person{order:-1}
/* auditeurs : trois colonnes (texte | auditrice au centre de la page | animation), photo agrandie */
.sof-home .q-feat .q-auditrice{display:contents}
.sof-home .q-feat:not(.rev) .feat-in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.sof-home .q-feat .q-auditrice .q-person{order:0;width:240px;justify-self:center}
.sof-home .q-feat .q-auditrice .q-ref{order:1;width:100%;max-width:440px;justify-self:end}
.sof-home .q-feat .q-person .q-photo{width:170px;height:170px}
.sof-home .q-feat .q-person-name{font-size:1.15rem}
@media (max-width:999px){
  .sof-home .q-feat:not(.rev) .feat-in{grid-template-columns:minmax(0,1fr)}
  .sof-home .q-feat .q-auditrice .q-ref{justify-self:center}
}

/* ---------- évaluation de la satisfaction : hero (animation de l'accueil), blocs à puces longues, carte Qualiopi ---------- */
.sof-home .sat-hero-viz{width:100%}
.sof-home .sat-feat .checks li{align-items:flex-start;font-weight:400;color:var(--ink-soft);line-height:1.6}
.sof-home .sat-feat .checks li svg{margin-top:3px}
.sof-home .sat-feat .checks strong{color:var(--ink);font-weight:600}
.sof-home .sat-feat .feat-text p a{color:var(--violet);font-weight:500}
.sof-home .viz.sat-conformite{max-width:430px}

/* ---------- guide BPF : hero, chiffres clés, sommaire collant, article long, cadres du formulaire (images d'origine) ---------- */
.sof-home .bpf-meta li svg{width:18px;height:18px;color:var(--violet)}
.sof-home .bpf-meta strong{color:var(--ink);font-weight:600}
.sof-home .bpf-hero-viz{width:100%}
.sof-home .viz.bpf-shot img{border-radius:16px}
.sof-home .bpf-essentiel{padding-top:0!important}
.sof-home .bpf-essentiel .card{gap:6px}
.sof-home .bpf-key{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:-.02em;color:var(--violet)}
.sof-home .bpf-guide{padding:0 var(--gutter) clamp(48px,6vw,96px)}
.sof-home .bpf-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.sof-home .bpf-toc{position:sticky;top:calc(var(--header-h) + 24px)}
.sof-home .bpf-toc-card{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.06)}
.sof-home .bpf-toc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
.sof-home .bpf-toc-btn svg{width:16px;height:16px;flex:none;transition:transform .3s}
.sof-home .bpf-toc-list{position:relative;margin-top:14px;border-left:2px solid var(--line)}
.sof-home .bpf-toc-list.hidden{display:none}
.sof-home .bpf-toc-ind{position:absolute;left:-2px;top:0;width:2px;border-radius:2px;background:var(--violet);transition:top .3s,height .3s}
.sof-home .bpf-toc-list a{display:block;padding:8px 0 8px 16px;font-size:.92rem;line-height:1.4;text-decoration:none;transition:color .2s}
.sof-home .bpf-toc-list a:hover{color:var(--violet)}
.sof-home .bpf-toc-list a.text-smartof-grey-500{color:var(--muted)}
.sof-home .bpf-toc-list a.text-smartof-purple-600{color:var(--violet)}
.sof-home .bpf-article{min-width:0;max-width:780px}
.sof-home .bpf-prose{color:var(--ink-soft);font-size:1.05rem;line-height:1.75}
.sof-home .bpf-prose + .bpf-prose,.sof-home .bpf-cadres + .bpf-prose{margin-top:clamp(40px,5vw,64px)}
.sof-home .bpf-prose h2{scroll-margin-top:calc(var(--header-h) + 32px);margin:clamp(40px,5vw,56px) 0 18px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.sof-home .bpf-prose > h2:first-child{margin-top:0}
.sof-home .bpf-prose h3{margin:32px 0 12px;font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink)}
.sof-home .bpf-prose p{margin:0 0 14px}
.sof-home .bpf-prose strong{color:var(--ink);font-weight:600}
.sof-home .bpf-prose a,.sof-home .bpf-cadre-text a{color:var(--violet);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sof-home .bpf-prose ul,.sof-home .bpf-prose ol,.sof-home .bpf-cadre-text ul{margin:0 0 18px;padding-left:1.3em}
.sof-home .bpf-prose ul,.sof-home .bpf-cadre-text ul{list-style:disc}
.sof-home .bpf-prose ol{list-style:decimal}
.sof-home .bpf-prose li,.sof-home .bpf-cadre-text li{margin:6px 0;padding-left:4px}
.sof-home .bpf-prose ul li::marker,.sof-home .bpf-cadre-text ul li::marker{color:var(--violet)}
.sof-home .bpf-prose ol li::marker{color:var(--violet);font-weight:600}
.sof-home .bpf-prose blockquote{margin:22px 0;padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--violet);border-radius:14px;background:var(--violet-tint);color:var(--ink);font-style:normal}
.sof-home .bpf-cadres{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0}
.sof-home .bpf-cadre{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:clamp(18px,2.4vw,32px);padding-bottom:48px}
.sof-home .bpf-cadre:not(:last-child)::before{content:"";position:absolute;left:23.5px;top:56px;bottom:8px;width:1px;background:var(--line)}
.sof-home .bpf-cadre:last-child{padding-bottom:0}
.sof-home .bpf-cadre-num{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#9F8BFF,var(--violet));box-shadow:0 8px 18px rgba(125,95,255,.28);font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff}
.sof-home .bpf-cadre-body h3{margin:10px 0 12px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.sof-home .bpf-cadre-text{color:var(--ink-soft);font-size:1rem;line-height:1.75}
.sof-home .bpf-cadre-text p{margin:0 0 12px}
.sof-home .bpf-cadre-text strong{color:var(--ink);font-weight:600}
.sof-home .bpf-cadre-body img{display:block;width:100%;height:auto;margin-top:16px;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(48,30,140,.08)}
.sof-home .bpf-check{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 26px}
.sof-home .bpf-check-cell{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-family:var(--font-display);font-weight:600;font-size:.92rem;white-space:nowrap;color:var(--ink)}
.sof-home .bpf-eq{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--violet)}
@media (max-width:999px){
  .sof-home .bpf-layout{grid-template-columns:minmax(0,1fr)}
  .sof-home .bpf-toc{position:static}
}
@media (max-width:560px){
  .sof-home .bpf-cadre{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .sof-home .bpf-cadre-num{width:40px;height:40px;border-radius:12px;font-size:.9rem}
  .sof-home .bpf-cadre:not(:last-child)::before{left:19.5px;top:48px}
}

/* ---------- extranet formateur : visuel de personnalisation un peu moins large ---------- */
.sof-home .sol-wide.ext-perso{max-width:1000px}

/* ---------- créer un compte : landing sans header ni footer, formulaire HubSpot (essai gratuit) ---------- */
.sof-home.cc-root{background:var(--bg)}
.sof-home .cc-page{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);overflow:hidden;background:var(--bg)}
.sof-home .cc-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sof-home .cc-main{position:relative;z-index:1;width:100%;max-width:620px;justify-self:end;padding:clamp(32px,5vw,64px) clamp(20px,4vw,56px) clamp(40px,5vw,72px)}
.sof-home .cc-logo{display:inline-block;margin-bottom:clamp(28px,4vw,48px)}
.sof-home .cc-logo img{display:block;width:170px;height:auto}
.sof-home .cc-main h1{margin:0 0 16px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,1.3rem + 1.8vw,2.6rem);line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.sof-home .cc-main h1 .hl{color:var(--violet)}
.sof-home .cc-lead{margin:0 0 22px;color:var(--ink-soft);font-size:1.08rem;line-height:1.65}
.sof-home .cc-lead strong{color:var(--ink);font-weight:600}
.sof-home .cc-checks{margin-bottom:28px}
.sof-home .cc-checks li{font-weight:400;color:var(--ink-soft)}
.sof-home .cc-checks strong{color:var(--ink);font-weight:600}
.sof-home .cc-form{padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 20px 50px rgba(48,30,140,.08)}
.sof-home .cc-side{position:relative;z-index:1;min-width:0;padding:clamp(48px,12vh,150px) clamp(20px,4vw,56px) clamp(32px,5vw,64px)}
.sof-home .cc-side-in{width:100%;max-width:600px}
.sof-home .cc-side h2{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .cc-count{margin:0 0 24px;color:var(--ink-soft);font-size:1.02rem}
.sof-home .cc-count strong{color:var(--violet);font-family:var(--font-display);font-weight:700}
.sof-home .cc-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sof-home .cc-logos li{display:flex;align-items:center;justify-content:center;height:58px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.75)}
.sof-home .cc-logos img{max-width:100%;max-height:36px;object-fit:contain;filter:grayscale(1);opacity:.75}
@media (max-width:999px){
  .sof-home .cc-page{grid-template-columns:minmax(0,1fr);gap:0}
  .sof-home .cc-main{justify-self:center;max-width:640px}
  .sof-home .cc-side{justify-self:center;width:100%;max-width:640px;padding-top:0}
  .sof-home .cc-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* avis de l'accueil resserrés dans la colonne de droite, sous les logos */
.sof-home .cc-side .reviews{padding:0;margin-top:clamp(32px,4vw,48px)}
.sof-home .cc-side .reviews::before{display:none}
.sof-home .cc-side .reviews .wrap{padding:0;max-width:none}
.sof-home .cc-side .reviews .section-head{align-items:flex-start;text-align:left;gap:10px;margin-bottom:18px}
.sof-home .cc-side .reviews h2{font-size:clamp(1.2rem,1rem + .6vw,1.45rem);max-width:none}
.sof-home .cc-side .rev-wrap{grid-template-columns:minmax(0,1fr);gap:14px}
.sof-home .cc-side .rev-side{margin-bottom:0}
.sof-home .cc-side .rev-score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:16px 22px}
.sof-home .cc-side .rev-score .score{margin:0}
.sof-home .cc-side .rev-score .big{font-size:2.2rem}
.sof-home .cc-side .rev-slide{flex-basis:calc(100% - 48px)}

/* ---------- petits écrans (320 px) : boutons longs et titres en majuscules restent dans l'écran ---------- */
@media (max-width:400px){
  .sof-home .sol-band .btn{white-space:normal;text-align:center;justify-content:center;max-width:100%}
  .sof-home .bpf-cadre-body h3{overflow-wrap:anywhere;hyphens:auto}
}

/* ---------- démo : en-tête court puis module de rendez-vous HubSpot (inchangé) en premier ; logos et avis en dessous ---------- */
.sof-home.demo-page{background:var(--bg)}
.sof-home .demo-hero{position:relative;padding:calc(var(--header-h) + clamp(20px,3vw,40px)) var(--gutter) clamp(32px,4vw,56px);overflow:hidden}
.sof-home .demo-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.sof-home .demo-head{position:relative;z-index:1;max-width:760px;margin:0 auto clamp(18px,2.4vw,28px);text-align:center}
.sof-home .demo-head h1{margin:0 0 10px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,1.2rem + 1.8vw,2.6rem);line-height:1.12;letter-spacing:-.03em;color:var(--ink)}
.sof-home .demo-head h1 .hl{color:var(--violet)}
.sof-home .demo-head p{margin:0;color:var(--ink-soft);font-size:clamp(.98rem,.94rem + .2vw,1.08rem);line-height:1.6}
.sof-home .demo-card{position:relative;z-index:1;max-width:1000px;margin:0 auto}
/* module de rendez-vous HubSpot, même rendu partout (/demo, calculateur) : sans carte autour ; le module centre son calendrier
   dans 852 px, le conteneur prend cette largeur et le calendrier occupe toute l'iframe */
.sof-home .meetings-iframe-container{max-width:852px;margin:0 auto;text-align:center;filter:drop-shadow(0 24px 40px rgba(48,30,140,.18))}
/* place réservée tant que HubSpot n'a pas inséré son iframe (créée au chargement complet de la page, hauteur provisoire 756 px) :
   les blocs du dessous ne sautent plus ; ensuite le conteneur suit la hauteur envoyée par HubSpot */
.sof-home .meetings-iframe-container:empty{height:756px}
/* coins arrondis : l iframe est découpée au ras du calendrier (marges internes de HubSpot : 16 px en haut, 4 px sur les côtés, 29 px en bas) */
.sof-home .meetings-iframe-container iframe{clip-path:inset(17px 5px 30px 5px round 22px)}
.sof-home .demo-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:12px}
.sof-home .demo-checks li{font-weight:500;color:var(--ink-soft)}
.sof-home .demo-proof{padding:clamp(32px,4vw,56px) var(--gutter) 0}
.sof-home .demo-proof-head{text-align:center;margin-bottom:clamp(20px,2.4vw,32px)}
.sof-home .demo-proof h2{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.sof-home .demo-proof h2 .hl{color:var(--violet)}
.sof-home .demo-proof-head p{margin:0;color:var(--muted)}
.sof-home .demo-proof .cc-logos{max-width:1100px;margin:0 auto;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:860px){ .sof-home .demo-proof .cc-logos{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* petits mobiles : le module HubSpot exige 312 px de large, la carte s'efface pour lui laisser toute la largeur */
@media (max-width:400px){
  .sof-home .demo-hero{padding-left:0;padding-right:0}
  .sof-home .demo-head{padding:0 var(--gutter)}
  .sof-home .demo-card{padding:0 0 16px;border:0;border-radius:0;box-shadow:none;background:transparent}
}


/* ---------- À propos (/a-propos) ---------- */
/* hero : texte seul, centré */
.sof-home .ap-hero .hero-copy{max-width:860px;margin:0 auto}

/* Rennes : texte, badges et carte de France sans cadre */
.sof-home .ap-badges{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sof-home .ap-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.sof-home .ap-badge svg{width:16px;height:16px;flex:none;color:var(--violet)}
.sof-home .feat-text>p.ap-adresse{font-size:.92rem;color:var(--muted)}
.sof-home .ap-map{width:100%;max-width:500px;justify-self:center}
.sof-home .ap-map svg{display:block;width:100%;height:auto;overflow:visible}
.sof-home .ap-map .ap-fr{fill:#f4ebff;stroke:#7d5fff;stroke-width:2.2;stroke-linejoin:round}
.sof-home .ap-map .ap-waves circle{fill:none;stroke:#9F8BFF;stroke-width:2.5;stroke-dasharray:3 7;stroke-linecap:round;opacity:0;transform-box:view-box;transform-origin:146.2px 197.6px;transform:scale(.02)}
.sof-home .ap-map.is-visible .ap-waves circle{animation:ap-wave 4.2s var(--d) cubic-bezier(.22,.61,.36,1) infinite}
@keyframes ap-wave{0%{transform:scale(.02);opacity:0}12%{opacity:.85}100%{transform:scale(1);opacity:0}}
@keyframes ap-show{to{opacity:1}}
@keyframes ap-flow{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){.sof-home .ap-map .ap-waves{display:none}}
.sof-solution .ap-rennes + .ap-chiffres{padding-top:clamp(32px,4vw,56px)}
/* halo de la section plus petit et plus bas : il ne remonte plus sous le hero (pas de ligne de séparation) */
.sof-home .ap-rennes::before{width:min(70vw,620px);top:58%}

/* chiffres */
.sof-home .ap-stats{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .ap-num{font-family:var(--font-display);font-weight:600;font-size:clamp(2.4rem,1.8rem + 1.6vw,3.1rem);line-height:1.05;letter-spacing:-.03em;color:var(--violet);font-variant-numeric:tabular-nums}
.sof-home .ap-label{font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1023px){ .sof-home .ap-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px} }
@media (max-width:540px){ .sof-home .ap-stats{grid-template-columns:minmax(0,1fr)} }


/* équipe et garanties : icônes au style des pages solution (carré orange clair, trait orange), carte LinkedIn claire */
.sof-home .card-h .ap-ic svg{width:40px;height:40px}
.sof-home .ap-poles .card h3,.sof-home .ap-garanties .card h3{font-family:var(--font-display);font-weight:600;font-size:1.22rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sof-home .ap-linkedin{position:relative;overflow:hidden;justify-content:center;align-items:flex-start;
  background:radial-gradient(60% 80% at 100% 0%,rgba(125,95,255,.16),transparent 70%),radial-gradient(55% 70% at 0% 100%,rgba(255,170,120,.18),transparent 70%),#fbfaff}
.sof-home .ap-linkedin::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(125,95,255,.2) 1px,transparent 1.2px);background-size:20px 20px;-webkit-mask:linear-gradient(200deg,#000,transparent 60%);mask:linear-gradient(200deg,#000,transparent 60%);pointer-events:none}
.sof-home .ap-linkedin>*{position:relative}
.sof-home .ap-linkedin-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1.1rem + .9vw,1.85rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.sof-home .ap-linkedin .btn{margin-top:4px;padding:12px 22px;line-height:1;display:inline-flex;align-items:center;gap:10px;color:#fff}
.sof-home .ap-linkedin-t .hl{color:var(--violet)}
.sof-home .ap-li-head{display:flex;align-items:center;gap:14px}
.sof-home .ap-li-logo{width:48px;height:48px;flex:none;filter:drop-shadow(0 8px 16px rgba(10,102,194,.25))}

/* sécurité */
.sof-home .ap-qualiopi{max-width:1200px;margin:0 auto clamp(14px,1.6vw,22px);flex-direction:row;align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(22px,3vw,36px)}
.sof-home .ap-qualiopi img{width:clamp(130px,14vw,180px);flex:none;height:auto}
.sof-home .ap-qualiopi h3{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:-.02em;color:var(--ink)}
.sof-home .ap-qualiopi p{margin:0}
@media (max-width:640px){ .sof-home .ap-qualiopi{flex-direction:column;align-items:flex-start} }
.sof-home .ap-dispo{justify-content:center;background:#f7f4ff}
.sof-home .ap-dispo .ap-num{color:#e57a36}

/* ambition : encart clair aux halos de l'accueil (violet et pêche) et trame de points, étiquette orange */
.sof-home .ap-amb{padding:clamp(24px,4vw,56px) var(--gutter)}
/* avis (carrousel de l'accueil) puis appel final : un peu plus d'air avant l'appel */
.sof-home.ap-page .ap-amb + .reviews{padding-top:clamp(32px,4vw,56px)}
.sof-home.ap-page .reviews + .cta-final{margin-top:clamp(24px,4vw,56px)}
.sof-home .ap-amb-in{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(24px,5vw,80px);border-radius:28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;color:var(--ink);border:1px solid var(--line);
  background:radial-gradient(45% 70% at 12% 10%,rgba(125,95,255,.16),transparent 70%),radial-gradient(45% 70% at 92% 95%,rgba(255,170,120,.20),transparent 70%),#fbfaff}
.sof-home .ap-amb-in::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(125,95,255,.22) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask:radial-gradient(70% 80% at 50% 50%,transparent 35%,#000);mask:radial-gradient(70% 80% at 50% 50%,transparent 35%,#000);pointer-events:none}
.sof-home .ap-amb-in>*{position:relative}
.sof-home .ap-amb h2{margin:0;max-width:22em;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
.sof-home .ap-amb h2 .hl{color:var(--violet)}
.sof-home .ap-amb p{margin:0;max-width:44em;font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.65;color:var(--ink-soft)}
.sof-home .ap-amb p strong{color:var(--ink);font-weight:600}
.sof-home .ap-amb-pills{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sof-home .ap-amb-pills li{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:.92rem;color:var(--ink)}

/* ---------- Facturation électronique (/solution/facturation-electronique) ---------- */
/* hero : badges, mention « Solution compatible officielle » sous les boutons */
.sof-home .fe-badges{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sof-home .fe-badges li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.sof-home .fe-badges svg{width:16px;height:16px;flex:none;color:var(--violet)}
.sof-home .fe-compat{display:flex;align-items:center;gap:14px;max-width:560px;margin-top:6px;text-align:left}
.sof-home .fe-compat img{height:44px;width:auto;flex:none}
.sof-home .fe-compat p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.sof-home .fe-compat strong{color:var(--ink)}
@media (max-width:1099px){ .sof-home .fe-badges{justify-content:center} }

/* 3 étapes : visuel en calques sans cadre */
/* moins d'espace entre « 1er septembre 2026 » et les 3 étapes */
.sof-solution .fe-pret{padding-bottom:clamp(8px,1.5vw,20px)}
.sof-solution .fe-pret + .fe-etapes{padding-top:clamp(8px,1.5vw,24px)}
.sof-home .fe-etapes-viz{max-width:600px;justify-self:center;width:100%}

/* frise des dates */
.sof-home .fe-timeline{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);position:relative}
.sof-home .fe-timeline::before{content:"";position:absolute;left:6%;right:6%;top:20px;border-top:1.5px dashed #9F8BFF}
.sof-home .fe-timeline li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.sof-home .fe-dot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--bg,#fbfaff);display:grid;place-items:center}
.sof-home .fe-dot img{width:40px;height:40px;display:block}
.sof-home .fe-timeline .card{width:100%;height:100%}
.sof-home .fe-timeline li.done .card{background:#f7f4ff;border-color:#dcd3ff}
.sof-home .fe-date{font-weight:600;font-size:.9rem;color:var(--violet)}
.sof-home .fe-timeline h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sof-home .fe-timeline p{margin:0;font-size:.95rem}
@media (max-width:1023px){ .sof-home .fe-timeline{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px} .sof-home .fe-timeline::before{display:none} }
@media (max-width:600px){ .sof-home .fe-timeline{grid-template-columns:minmax(0,1fr)} }

/* 5 étapes */
.sof-home .fe-steps{list-style:none;margin:0 auto;padding:0;max-width:900px;display:grid;gap:14px}
.sof-home .fe-steps .card{flex-direction:row;align-items:flex-start;gap:18px}
.sof-home .fe-steps .card.done{background:#f7f4ff;border-color:#dcd3ff}
.sof-home .fe-num{width:40px;height:40px;flex:none}
.sof-home .fe-step-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:4px}
.sof-home .fe-steps h3,.sof-home .fe-of h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sof-home .fe-steps p{margin:0}
.sof-home .fe-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid #dcd3ff;border-radius:999px;background:#fff;font-weight:600;font-size:12.5px;color:var(--violet);white-space:nowrap}
.sof-home .fe-pill svg{width:13px;height:13px}

/* comparatif */
.sof-home .fe-table-wrap{max-width:1100px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sof-home .fe-table{width:100%;min-width:720px;border-collapse:collapse;text-align:left}
.sof-home .fe-table th,.sof-home .fe-table td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem;line-height:1.5}
.sof-home .fe-table tr:last-child td{border-bottom:0}
.sof-home .fe-table th{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
.sof-home .fe-table th.ok{color:var(--violet)}
.sof-home .fe-table th.ko{color:var(--muted)}
.sof-home .fe-table .ok{background:#f7f4ff}
.sof-home .fe-table td.ok{color:var(--ink)}
.sof-home .fe-table td.ko{color:var(--muted)}
.sof-home .fe-table td.lbl{font-weight:600;color:var(--ink);white-space:nowrap}
.sof-home .fe-table span{display:inline-flex;align-items:flex-start;gap:10px}
.sof-home .fe-table span img{flex:none;margin-top:2px}

/* Factur-X, organismes : grille de deux */
.sof-home .sol-cards.fe-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px}
@media (max-width:860px){ .sof-home .sol-cards.fe-two{grid-template-columns:minmax(0,1fr);max-width:620px} }
.sof-home .fe-note,.sof-home .fe-box{display:flex;align-items:flex-start;gap:16px;max-width:960px;margin:clamp(14px,1.6vw,22px) auto 0;padding:20px 24px;border:1px solid #dcd3ff;border-radius:var(--radius);background:#f7f4ff}
.sof-home .fe-note p,.sof-home .fe-box p{margin:0;color:var(--ink-soft);line-height:1.6}
.sof-home .fe-note img,.sof-home .fe-box img{flex:none}
.sof-home .fe-box h3{margin:0 0 4px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.sof-home .fe-box h3 .hl{color:var(--violet)}
.sof-home .fe-box.warn{margin:0 auto clamp(14px,1.6vw,22px);background:#fff8f3;border-color:#ffdfca}

/* risques */
.sof-home .fe-sanctions{max-width:960px}
.sof-home .fe-amount{font-family:var(--font-display);font-weight:600;font-size:2rem;letter-spacing:-.02em;color:var(--ink)}
.sof-home .fe-sanction-t{font-weight:600;color:var(--ink)}
.sof-home .fe-sanctions p{margin:0;font-size:.92rem;color:var(--muted)}
.sof-home .fe-source{max-width:960px;margin:14px auto 0;font-size:.88rem;color:var(--muted);text-align:center}

/* organismes de formation */
.sof-home .fe-case-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------- articles (/article/{slug}, single/single-article.php) : hero texte centré, sommaire collant, article long,
   « En résumé » et « Article à jour » en cartes, call-outs et tableaux du contenu, « À lire aussi » en trois cartes ---------- */
.sof-home .art-hero .hero-content{padding-bottom:clamp(40px,7vh,88px)}
.sof-home .art-hero .hero-copy{width:min(100%,960px)}
.sof-home .art-hero h1{font-size:clamp(1.85rem,1.05rem + 2.3vw,3.05rem);line-height:1.12;max-width:24em;text-wrap:balance}
.sof-home .art-hero .crumb{max-width:100%}
.sof-home .art-meta{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;font-size:14px;color:var(--muted)}
.sof-home .art-meta li{display:inline-flex;align-items:center;gap:10px;text-align:left}
.sof-home .art-meta li > svg{width:20px;height:20px;flex:none;color:var(--violet)}
.sof-home .art-meta .art-meta-v{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.sof-home .art-meta strong{color:var(--ink);font-weight:600}
.sof-home .art-meta .art-upd strong{color:var(--violet)}
.sof-home .art-meta .art-author{font-weight:600;color:var(--ink)}
.sof-home .art-meta .art-author img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(48,30,140,.12)}
.sof-home .art-chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid #dcd3ff;border-radius:999px;background:#f7f4ff;font-weight:600;font-size:13px;line-height:1.2;color:#5a3cdd;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.sof-home a.art-chip:hover{background:var(--violet);border-color:var(--violet);color:#fff}

.sof-home .art-body{padding:0 var(--gutter) clamp(48px,6vw,96px)}
.sof-home .art-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.sof-home .art-layout.no-toc{grid-template-columns:minmax(0,780px);justify-content:center}
.sof-home .art-toc{position:sticky;top:calc(var(--header-h) + 24px)}
.sof-home .art-toc-card{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.06)}
.sof-home .art-toc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);text-align:left}
.sof-home .art-toc-btn svg,.sof-home .art-fold svg{width:16px;height:16px;flex:none;transition:transform .3s}
.sof-home .art-toc-list{position:relative;margin-top:14px;border-left:2px solid var(--line);max-height:calc(100vh - var(--header-h) - 150px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sof-home .art-toc-list.hidden{display:none}
.sof-home .art-toc-ind{position:absolute;left:-2px;top:0;width:2px;border-radius:2px;background:var(--violet);transition:top .3s,height .3s}
.sof-home .art-toc-list a{display:block;padding:7px 0 7px 16px;font-size:.9rem;line-height:1.4;text-decoration:none;transition:color .2s}
.sof-home .art-toc-list a:hover{color:var(--violet)}
.sof-home .art-toc-list a.text-smartof-grey-500{color:var(--muted)}
.sof-home .art-toc-list a.text-smartof-purple-600{color:var(--violet);font-weight:500}
.sof-home .art-article{min-width:0;max-width:780px}
.sof-home .art-cover{display:block;width:100%;height:auto;margin:0 0 28px;border-radius:var(--radius)}

/* « Article à jour » (repli) et « En résumé » : cartes claires, texte sans couleur (la couleur reste sur les icônes) */
.sof-home .art-note{margin:0 0 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sof-home .art-fold{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.sof-home .art-fold-l{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.sof-home .art-fold-l > svg{width:20px;height:20px;flex:none;color:var(--violet)}
.sof-home .art-note .art-fold-l b{font-weight:600;font-size:.95rem}
.sof-home .art-note .art-fold-l span{font-size:.9rem;color:var(--muted)}
.sof-home .art-note-sep{display:inline-block;width:4px;height:4px;margin:0 2px;border-radius:50%;background:#c9bfff;vertical-align:middle}
.sof-home .art-note-txt{padding:0 18px 16px 48px;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.sof-home .art-note-txt p{margin:0}
.sof-home .art-note-txt.hidden,.sof-home .art-tldr-txt.hidden{display:none}
.sof-home .art-tldr{margin:0 0 clamp(32px,4vw,44px);border:1px solid #ffdfca;border-radius:var(--radius);background:linear-gradient(160deg,#fff4ed,#fffaf6 70%)}
.sof-home .art-tldr .art-fold{padding:20px 24px 0}
.sof-home .art-tldr .art-fold[aria-expanded="false"]{padding-bottom:20px}
.sof-home .art-tldr-t{order:-1;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--ink)}
.sof-home .art-tldr-t svg{width:22px;height:22px;flex:none;color:var(--orange)}
.sof-home .art-tldr .art-fold > svg{color:#cc601c}
.sof-home .art-tldr-txt{padding:14px 24px 22px;font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.sof-home .art-tldr-txt p{margin:0 0 10px}
.sof-home .art-tldr-txt ul,.sof-home .art-tldr-txt ol{margin:0 0 10px;padding-left:1.25em}
.sof-home .art-tldr-txt ul{list-style:disc}.sof-home .art-tldr-txt ol{list-style:decimal}
.sof-home .art-tldr-txt li{margin:6px 0;padding-left:4px}
.sof-home .art-tldr-txt li::marker{color:var(--orange)}
.sof-home .art-tldr-txt > :last-child{margin-bottom:0}
.sof-home .art-tldr-txt strong{color:var(--ink);font-weight:600}
.sof-home .art-tldr-txt a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}

/* contenu de l'article (HTML des JSON : titres, listes, tableaux, call-outs, images) */
.sof-home .art-prose{color:var(--ink-soft);font-size:1.05rem;line-height:1.75}
.sof-home .art-prose h2{scroll-margin-top:calc(var(--header-h) + 32px);margin:clamp(40px,5vw,56px) 0 18px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sof-home .art-prose > h2:first-child{margin-top:0}
.sof-home .art-prose h3{scroll-margin-top:calc(var(--header-h) + 32px);margin:32px 0 12px;font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.sof-home .art-prose h4{margin:26px 0 10px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.sof-home .art-prose p{margin:0 0 16px}
.sof-home .art-prose strong,.sof-home .art-prose b{color:var(--ink);font-weight:600}
.sof-home .art-prose a{color:var(--violet);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sof-home .art-prose a:hover{color:var(--violet-strong)}
.sof-home .art-prose ul,.sof-home .art-prose ol{margin:0 0 18px;padding-left:1.3em}
.sof-home .art-prose ul{list-style:disc}.sof-home .art-prose ol{list-style:decimal}
.sof-home .art-prose li{margin:6px 0;padding-left:4px}
.sof-home .art-prose li::marker{color:var(--violet)}
.sof-home .art-prose ol > li::marker{font-weight:600}
.sof-home .art-prose img{display:block;max-width:100%;height:auto;margin:28px auto;border-radius:14px}
.sof-home .art-prose figure{margin:28px 0}
.sof-home .art-prose figure img{margin:0 auto}
.sof-home .art-prose figcaption{margin-top:10px;font-size:.88rem;color:var(--muted);text-align:center}
.sof-home .art-prose iframe{display:block;width:100%;max-width:100%;aspect-ratio:16 / 9;height:auto;margin:28px 0;border:0;border-radius:14px}
/* comparatif Draftable (article V9) : son style intégré l'élargit à 140 % vers la gauche, ramené dans la colonne */
.sof-home .art-prose iframe.draftable-container{left:0;height:800px;aspect-ratio:auto}
.sof-home .art-prose blockquote{margin:22px 0;padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--violet);border-radius:14px;background:#f7f4ff;color:var(--ink)}
.sof-home .art-prose hr{margin:36px 0;border:0;border-top:1px dashed #dcd3ff}
.sof-home .art-prose table{display:block;width:100%;max-width:100%;overflow-x:auto;margin:24px 0 28px;border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;font-size:.94rem;line-height:1.55;background:var(--surface)}
.sof-home .art-prose th,.sof-home .art-prose td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:140px}
.sof-home .art-prose th{background:#f7f4ff;font-weight:600;color:var(--ink)}
.sof-home .art-prose tr:last-child > td{border-bottom:0}
.sof-home .art-prose td p:last-child,.sof-home .art-prose th p:last-child{margin-bottom:0}
/* call-outs ([callout type=…], inc/shortcodes.php) : fond léger selon le type, icône colorée, texte neutre */
.sof-home .art-prose .callout{display:flex;align-items:flex-start;gap:14px;margin:28px 0;padding:18px 20px;border:1px solid #e4ddff;border-radius:14px;background:#f7f4ff;color:var(--violet)}
.sof-home .art-prose .callout > span svg{width:24px;height:24px}
.sof-home .art-prose .callout > div{color:var(--ink-soft);font-size:1rem;line-height:1.7}
.sof-home .art-prose .callout > div a{color:var(--violet)}
.sof-home .art-prose .callout-warning{border-color:#ffdfca;background:#fff4ed;color:#cc601c}
.sof-home .art-prose .callout-success{border-color:#c9ecda;background:#f0faf5;color:var(--green)}
.sof-home .art-prose .callout-danger{border-color:#fecdca;background:#fef3f2;color:#d92d20}

/* « À lire aussi » : trois cartes (icône de la catégorie, étiquette, titre, temps de lecture, lien) */
.sof-home .art-more{padding-top:clamp(24px,3vw,48px)!important}
.sof-home .art-more h2{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem)}
.sof-home .art-cards{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .art-card{display:flex;flex-direction:column;gap:14px;height:100%;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);
  box-shadow:0 10px 30px rgba(48,30,140,.05);transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.sof-home .art-card:hover{border-color:#cfc4ff;box-shadow:0 18px 40px -16px rgba(48,30,140,.22);transform:translateY(-2px)}
.sof-home .art-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sof-home .art-card-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#f7f4ff;border:1px solid #e4ddff}
.sof-home .art-card-ico img{width:28px;height:28px}
.sof-home .art-card-t{font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.sof-home .art-card-r{font-size:.88rem;color:var(--muted)}
.sof-home .art-card-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-weight:600;font-size:.95rem;color:var(--violet)}
.sof-home .art-card-go svg{width:20px;height:20px;transition:transform .2s}
.sof-home .art-card:hover .art-card-go svg{transform:translateX(3px)}

@media (max-width:999px){
  .sof-home .art-layout{grid-template-columns:minmax(0,1fr)}
  .sof-home .art-toc{position:static}
  .sof-home .art-toc-list{max-height:none;overflow:visible}
  .sof-home .art-cards{grid-template-columns:minmax(0,1fr);max-width:620px}
}
@media (max-width:640px){
  /* fil d'Ariane : le titre de l'article passe sur sa propre ligne, coupé par des points de suspension (texte complet conservé) */
  .sof-home .art-hero .crumb{border-radius:16px;row-gap:4px;padding-top:9px;padding-bottom:9px}
  .sof-home .art-hero .crumb > span[aria-hidden]:has(+ .crumb-cur){display:none}
  .sof-home .art-hero .crumb-cur{flex-basis:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:560px){
  .sof-home .art-meta{gap:12px 18px}
  .sof-home .art-tldr .art-fold{padding:18px 18px 0}
  .sof-home .art-tldr-txt{padding:12px 18px 18px}
  .sof-home .art-note-txt{padding:0 18px 16px}
  .sof-home .art-prose{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.sof-home .art-card,.sof-home .art-card-go svg{transition:none}}

/* ---------- liste des articles (/articles, pages/articles/articles.php) : hero centré avec les catégories en pastilles,
   grille de cartes (mêmes cartes que « À lire aussi » des articles) ---------- */
.sof-home .al-hero .hero-content{padding-bottom:clamp(40px,7vh,88px)}
.sof-home .al-hero .hero-copy{width:min(100%,1000px)}
.sof-home .al-cats{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sof-home .al-cats a{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-weight:600;font-size:14px;line-height:1.2;color:var(--ink);text-decoration:none;box-shadow:0 4px 14px rgba(48,30,140,.05);transition:border-color .2s,color .2s,background-color .2s}
.sof-home .al-cats a:hover{border-color:var(--violet);color:var(--violet);background:#f7f4ff}
.sof-home .al-list{position:relative;isolation:isolate;padding:0 var(--gutter) clamp(48px,6vw,96px)}
/* halos mauve, pêche et violet clair (couleurs du fond de l'accueil) répartis librement le long de la liste : deux calques
   aux motifs de hauteurs différentes (3100 et 4700 px) qui se superposent sans retomber sur la même figure avant longtemps.
   Chaque halo s'éteint avant les bords de son motif (pas de coupure nette entre deux répétitions) et les calques s'effacent
   en haut et en bas de la section (pas de bord droit contre le hero ou l'appel final) */
.sof-home .al-list::before,.sof-home .al-list::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 320px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 320px),transparent)}
.sof-home .al-list::before{background-size:100% 3100px;background-image:radial-gradient(720px 520px at 14% 420px,rgba(204,191,255,0.5),rgba(204,191,255,0) 70%),
    radial-gradient(620px 460px at 78% 1150px,rgba(255,206,175,0.45),rgba(255,206,175,0) 70%),
    radial-gradient(520px 380px at 36% 1900px,rgba(176,156,255,0.26),rgba(176,156,255,0) 70%),
    radial-gradient(760px 560px at 96% 2500px,rgba(204,191,255,0.42),rgba(204,191,255,0) 70%),
    radial-gradient(560px 420px at 3% 2650px,rgba(255,206,175,0.4),rgba(255,206,175,0) 70%)}
.sof-home .al-list::after{background-size:100% 4700px;background-image:radial-gradient(600px 440px at 62% 600px,rgba(255,206,175,0.32),rgba(255,206,175,0) 70%),
    radial-gradient(840px 600px at 8% 1600px,rgba(204,191,255,0.4),rgba(204,191,255,0) 70%),
    radial-gradient(520px 400px at 88% 2300px,rgba(176,156,255,0.3),rgba(176,156,255,0) 70%),
    radial-gradient(680px 480px at 55% 3300px,rgba(255,206,175,0.38),rgba(255,206,175,0) 70%),
    radial-gradient(600px 460px at 20% 4050px,rgba(204,191,255,0.36),rgba(204,191,255,0) 70%)}
@media (max-width:640px){
  .sof-home .al-list::before{background-image:radial-gradient(396px 286px at 14% 420px,rgba(204,191,255,0.5),rgba(204,191,255,0) 70%),
    radial-gradient(341px 253px at 78% 1150px,rgba(255,206,175,0.45),rgba(255,206,175,0) 70%),
    radial-gradient(286px 209px at 36% 1900px,rgba(176,156,255,0.26),rgba(176,156,255,0) 70%),
    radial-gradient(418px 308px at 96% 2500px,rgba(204,191,255,0.42),rgba(204,191,255,0) 70%),
    radial-gradient(308px 231px at 3% 2650px,rgba(255,206,175,0.4),rgba(255,206,175,0) 70%)}
  .sof-home .al-list::after{background-image:radial-gradient(330px 242px at 62% 600px,rgba(255,206,175,0.32),rgba(255,206,175,0) 70%),
    radial-gradient(462px 330px at 8% 1600px,rgba(204,191,255,0.4),rgba(204,191,255,0) 70%),
    radial-gradient(286px 220px at 88% 2300px,rgba(176,156,255,0.3),rgba(176,156,255,0) 70%),
    radial-gradient(374px 264px at 55% 3300px,rgba(255,206,175,0.38),rgba(255,206,175,0) 70%),
    radial-gradient(330px 253px at 20% 4050px,rgba(204,191,255,0.36),rgba(204,191,255,0) 70%)}
}
.sof-home .al-list .art-cards{max-width:1200px}
.sof-home .al-empty{max-width:1200px;margin:0 auto;font-size:1.05rem;color:var(--ink-soft)}
.sof-home .art-card-d{display:flex;flex-direction:column;gap:2px;font-size:.88rem;color:var(--muted)}
.sof-home .art-card-d .upd{color:var(--violet)}
@media (min-width:640px) and (max-width:1180px){ .sof-home .al-list .art-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1200px} }

/* ---------- demande de démo avec formulaire HubSpot (components/cta-rdv-demo.php, version nouveau design) ---------- */
.sof-home .rdv-cta .wrap{max-width:860px;margin:0 auto}
.sof-home .rdv-cta h2{font-size:clamp(1.7rem,1.1rem + 1.8vw,2.5rem)}
.sof-home .rdv-cta .checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.sof-home .rdv-cta .checks li{font-weight:500;color:var(--ink-soft)}
.sof-home .rdv-contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sof-home .rdv-contacts a{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s}
.sof-home .rdv-contacts a:hover{border-color:var(--violet);color:var(--violet)}
.sof-home .rdv-contacts svg{width:17px;height:17px;flex:none;color:var(--violet)}
.sof-home .rdv-form{width:100%;max-width:820px;margin-top:6px;padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 20px 50px rgba(48,30,140,.08);text-align:left}
.sof-home .rdv-form .checks{margin-top:14px;gap:8px 22px}
.sof-home .rdv-form .checks li{font-size:.95rem}

/* ---------- référentiel Qualiopi (/ressources/referentiel-qualiopi) : hero en deux colonnes avec l'animation Qualiopi
   de l'accueil, « Pourquoi ce référentiel ? » en deux cartes et encart Excel, filtres et critères dépliables (src/main.js :
   classes bg-smartof-purple-600, hidden et rotate-180), cartes indicateurs, « Qu'est-ce que Qualiopi ? » en deux colonnes ---------- */
.sof-home .rq-hero .lead strong{color:var(--ink);font-weight:600}
.sof-home .rq-hero .hero-viz{width:100%;min-width:0}
/* pourquoi */
.sof-home .rq-why-cards{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .rq-why-cards li{display:flex;gap:16px;align-items:flex-start;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.05)}
.sof-home .rq-why-cards p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.65}
.sof-home .rq-why-cards strong,.sof-home .rq-guide strong{color:var(--ink);font-weight:600}
.sof-home .rq-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:var(--peach);border:1px solid #ffdfca}
.sof-home .rq-ico svg{width:24px;height:24px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sof-home .rq-guide{max-width:960px;margin:clamp(20px,2.4vw,28px) auto 0;display:grid;gap:18px;text-align:center}
.sof-home .rq-guide > p{margin:0 auto;max-width:68ch;color:var(--ink-soft);font-size:1.05rem;line-height:1.65}
.sof-home .rq-excel{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid #e4ddff;border-radius:var(--radius);background:#f7f4ff;text-align:left}
.sof-home .rq-excel p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.55}
.sof-home .rq-excel a{color:var(--violet-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sof-home .rq-excel a:hover{color:var(--violet)}
.sof-home .rq-xl{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid #e4ddff}
.sof-home .rq-xl svg{width:24px;height:24px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){ .sof-home .rq-why-cards{grid-template-columns:minmax(0,1fr)} .sof-home .rq-excel{align-items:flex-start} }
/* filtres et critères (mêmes halos que la liste des articles) */
.sof-home .rq-list{position:relative;isolation:isolate;padding:clamp(16px,2vw,24px) var(--gutter) clamp(48px,6vw,96px)}
.sof-home .rq-list::before,.sof-home .rq-list::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 320px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 320px),transparent)}
.sof-home .rq-list::before{background-size:100% 3100px;background-image:radial-gradient(720px 520px at 14% 420px,rgba(204,191,255,0.5),rgba(204,191,255,0) 70%),
    radial-gradient(620px 460px at 78% 1150px,rgba(255,206,175,0.45),rgba(255,206,175,0) 70%),
    radial-gradient(520px 380px at 36% 1900px,rgba(176,156,255,0.26),rgba(176,156,255,0) 70%),
    radial-gradient(760px 560px at 96% 2500px,rgba(204,191,255,0.42),rgba(204,191,255,0) 70%),
    radial-gradient(560px 420px at 3% 2650px,rgba(255,206,175,0.4),rgba(255,206,175,0) 70%)}
.sof-home .rq-list::after{background-size:100% 4700px;background-image:radial-gradient(600px 440px at 62% 600px,rgba(255,206,175,0.32),rgba(255,206,175,0) 70%),
    radial-gradient(840px 600px at 8% 1600px,rgba(204,191,255,0.4),rgba(204,191,255,0) 70%),
    radial-gradient(520px 400px at 88% 2300px,rgba(176,156,255,0.3),rgba(176,156,255,0) 70%),
    radial-gradient(680px 480px at 55% 3300px,rgba(255,206,175,0.38),rgba(255,206,175,0) 70%),
    radial-gradient(600px 460px at 20% 4050px,rgba(204,191,255,0.36),rgba(204,191,255,0) 70%)}
.sof-home .rq-list-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.sof-home .rq-filters{display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.06)}
.sof-home .rq-search{position:relative;display:block}
.sof-home .rq-search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.sof-home .rq-search input{width:100%;height:48px;padding:0 18px 0 46px;border:1px solid var(--line);border-radius:999px;background:#faf9ff;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .2s,background-color .2s,box-shadow .2s}
.sof-home .rq-search input::placeholder{color:var(--muted)}
.sof-home .rq-search input:focus{outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(125,95,255,.12)}
.sof-home .rq-pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sof-home .rq-pills-l{margin-right:6px;font-weight:600;font-size:.95rem;color:var(--ink)}
.sof-home .rq-pill{flex:1 1 auto;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.sof-home .rq-pill:hover{border-color:#cfc4ff;background:#f7f4ff}
.sof-home .rq-pill.bg-smartof-purple-600{border-color:var(--violet);background:var(--violet);color:#fff}
.sof-home .rq-pill:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.sof-home .rq-count{margin:0;font-size:.9rem;color:var(--muted)}
.sof-home .rq-crit{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px);scroll-margin-top:calc(var(--header-h) + 32px)}
.sof-home .rq-crit.hidden,.sof-home .rq-card.hidden,.sof-home .rq-crit-head.hidden,.sof-home .rq-cards.hidden,.sof-home .rq-crit-txt.hidden{display:none}
.sof-home .rq-crit-head{display:flex;flex-direction:column;gap:14px}
.sof-home .rq-crit-btn{display:flex;align-items:center;gap:16px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.sof-home .rq-num{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;background:#f7f4ff;border:1px solid #e4ddff;font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--violet)}
.sof-home .rq-crit-btn h2{flex:1;margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1rem + 1.2vw,2rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sof-home .rq-chev{flex:none;width:28px;height:28px;padding:4px;border:1px solid var(--line);border-radius:50%;background:#fff;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s,border-color .2s}
.sof-home .rq-crit-btn:hover .rq-chev{border-color:var(--violet)}
.sof-home .rq-chev.rotate-180{transform:rotate(180deg)}
.sof-home .rq-crit-txt{margin:0 0 0 68px;max-width:80ch;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.sof-home .rq-crit-txt strong{color:var(--ink);font-weight:600}
.sof-home .rq-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .rq-card{display:flex;flex-direction:column;gap:12px;height:100%;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);
  box-shadow:0 10px 30px rgba(48,30,140,.05);transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.sof-home .rq-card:hover{border-color:#cfc4ff;box-shadow:0 18px 40px -16px rgba(48,30,140,.22);transform:translateY(-2px)}
.sof-home .rq-tags{display:flex;flex-wrap:wrap;gap:8px}
.sof-home .rq-tag{padding:5px 11px;border:1px solid #dcd3ff;border-radius:999px;background:#f7f4ff;font-weight:600;font-size:.78rem;color:#5a3cdd}
.sof-home .rq-tag-i{border-color:#ffdfca;background:var(--peach);color:#b4531a}
.sof-home .rq-card h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.sof-home .rq-card p{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink-soft)}
.sof-home .rq-go{margin-top:auto;padding-top:4px;color:var(--violet)}
.sof-home .rq-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.sof-home .rq-card:hover .rq-go svg{transform:translateX(3px)}
@media (max-width:999px){ .sof-home .rq-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .sof-home .rq-cards{grid-template-columns:minmax(0,1fr)}
  .sof-home .rq-crit-txt{margin-left:0}
  .sof-home .rq-num{width:44px;height:44px;font-size:1.2rem}
  .sof-home .rq-pill{flex:1 1 calc(50% - 8px)}
  .sof-home .rq-pills-l{flex-basis:100%}
}
/* qu'est-ce que Qualiopi, qui est concerné */
.sof-home .rq-about{padding:clamp(24px,3vw,48px) var(--gutter) clamp(48px,6vw,88px)}
.sof-home .rq-duo{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.sof-home .rq-duo + .rq-duo{margin-top:clamp(56px,7vw,96px)}
.sof-home .rq-duo-l{position:sticky;top:calc(var(--header-h) + 32px);display:flex;flex-direction:column;gap:16px}
.sof-home .rq-duo h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.sof-home .rq-duo h2 .hl{color:var(--violet)}
.sof-home .rq-lead{margin:0;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--ink-soft)}
.sof-home .rq-lead strong,.sof-home .rq-note strong,.sof-home .rq-box strong,.sof-home .rq-retenir strong{color:var(--ink);font-weight:600}
.sof-home .rq-note{margin:0;padding:14px 18px;color:var(--ink-soft);line-height:1.6}
.sof-home .rq-duo-r{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.sof-home .rq-box{padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.05)}
.sof-home .rq-box h3{margin:0 0 16px;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--ink)}
.sof-home .rq-ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sof-home .rq-ticks li{display:flex;align-items:flex-start;gap:12px;color:var(--ink-soft);line-height:1.6}
.sof-home .rq-ticks svg{flex:none;width:22px;height:22px;margin-top:1px}
.sof-home .rq-box-foot{margin:18px 0 0;padding-top:16px;border-top:1px dashed #dcd3ff;color:var(--ink-soft);line-height:1.6}
.sof-home .rq-retenir{margin:0;padding:18px 22px;color:var(--ink-soft);line-height:1.65}
@media (max-width:860px){
  .sof-home .rq-duo{grid-template-columns:minmax(0,1fr)}
  .sof-home .rq-duo-l{position:static}
}

/* ---------- fiches indicateur Qualiopi (/referentiel-qualiopi/{slug}, single/single-indicateur.php) : mêmes blocs que les
   articles (hero centré, sommaire collant, contenu), fil « Guide référentiel Qualiopi » dans le hero, pictogramme du
   critère, indicateur précédent / suivant en haut et en bas, FAQ et appel final de l'accueil ---------- */
.sof-home .ind-crumb .ind-guide{font-weight:600;color:var(--ink)}
.sof-home .ind-crumb .ind-guide::after{content:"";display:inline-block;width:4px;height:4px;margin:0 2px 0 10px;border-radius:50%;background:#c9bfff;vertical-align:middle}
.sof-home .ind-crit{display:flex;align-items:center;justify-content:center;gap:12px;margin:0}
.sof-home .ind-crit-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--peach);border:1px solid #ffdfca}
.sof-home .ind-crit-ico img{width:28px;height:28px;opacity:.85}
.sof-home .ind-intro{max-width:760px;margin:0 auto;color:var(--ink-soft);font-size:clamp(1.02rem,.98rem + .25vw,1.15rem);line-height:1.7;text-wrap:pretty}
.sof-home .ind-intro p{margin:0 0 12px}.sof-home .ind-intro p:last-child{margin-bottom:0}
.sof-home .ind-intro strong{color:var(--ink);font-weight:600}
.sof-home .ind-intro a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sof-home .ind-pn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.sof-home .ind-pn a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.sof-home .ind-pn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sof-home .ind-prev{border:1px solid #dcd3ff;background:#fff;color:#5a3cdd}
.sof-home .ind-prev:hover{border-color:var(--violet);background:#f7f4ff}
.sof-home .ind-next{border:1px solid var(--violet);background:var(--violet);color:#fff}
.sof-home .ind-next:hover{background:var(--violet-strong);border-color:var(--violet-strong)}
.sof-home .ind-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(36px,4vw,52px);padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.06)}
.sof-home .ind-nav-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.sof-home .ind-nav-t{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.sof-home .ind-nav-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.9rem;color:var(--muted)}
.sof-home .ind-nav-crumb a{color:var(--muted);text-decoration:none}
.sof-home .ind-nav-crumb a:hover{color:var(--violet)}
.sof-home .ind-nav-crumb .crumb-cur{font-weight:600;color:var(--violet)}
.sof-home .ind-nav .ind-pn{justify-content:flex-end}
.sof-home .ind-faq{scroll-margin-top:calc(var(--header-h) + 24px)}
@media (max-width:640px){
  .sof-home .ind-crumb .ind-guide{flex-basis:100%;text-align:center}
  .sof-home .ind-crumb .ind-guide::after{display:none}
  .sof-home .ind-nav,.sof-home .ind-nav .ind-pn{justify-content:center;text-align:center}
  .sof-home .ind-nav-l{align-items:center}
  .sof-home .ind-nav-crumb{justify-content:center}
}

/* ---------- cartes orange (« À noter », « À retenir », « En résumé » des articles, alertes [callout type=warning] des
   articles et fiches indicateur, avertissement de /solution/facturation-electronique) : un seul dessin sur tout le site,
   fond pêche, contour pêche fin, trait orange à gauche, coins arrondis aux quatre coins ---------- */
.sof-home .rq-note,.sof-home .rq-retenir,.sof-home .art-tldr,.sof-home .art-prose .callout-warning,.sof-home .fe-box.warn{border:1px solid #ffdfca;border-left:3px solid var(--orange);border-radius:14px;background:var(--peach)}

/* ---------- dernières mises à jour (/dernieres-mises-a-jour) : hero centré de la liste des articles, frise chronologique
   (mois à gauche, point sur un fil pointillé violet, carte à droite ; sur mobile le mois passe au-dessus de la carte) ---------- */
.sof-home .mj-line{list-style:none;margin:0 auto;padding:0;max-width:1000px;position:relative;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.sof-home .mj-line::before{content:"";position:absolute;left:174px;top:12px;bottom:12px;border-left:2px dashed #CFC4FF}
.sof-home .mj-item{position:relative;display:grid;grid-template-columns:150px 48px minmax(0,1fr);align-items:start}
.sof-home .mj-date{padding-top:24px;text-align:right;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);text-transform:capitalize}
.sof-home .mj-dot{justify-self:center;margin-top:28px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--violet);box-shadow:0 0 0 5px rgba(125,95,255,.12)}
.sof-home .mj-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);
  box-shadow:0 10px 30px rgba(48,30,140,.05);transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.sof-home .mj-card:hover{border-color:#cfc4ff;box-shadow:0 18px 40px -16px rgba(48,30,140,.22);transform:translateY(-2px)}
.sof-home .mj-tags{display:flex;flex-wrap:wrap;gap:8px}
.sof-home .mj-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.sof-home .mj-x{font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.sof-home .mj-card:hover .art-card-go svg{transform:translateX(3px)}
@media (max-width:760px){
  .sof-home .mj-line::before{left:6px}
  .sof-home .mj-item{grid-template-columns:14px minmax(0,1fr);column-gap:18px;row-gap:8px}
  .sof-home .mj-date{grid-column:2;grid-row:1;padding-top:0;text-align:left}
  .sof-home .mj-dot{grid-column:1;grid-row:1;margin-top:5px}
  .sof-home .mj-card{grid-column:2;grid-row:2;padding:18px}
}

/* ---------- fiches de mise à jour (/mises-a-jour/{slug}, single/single-mise-a-jour.php) : hero centré des articles
   (étiquettes, titre, mois), contenu en une colonne (styles .art-prose), bande de logos et appel final de l'accueil ---------- */
.sof-home .mjs-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0}
.sof-home .mjs-date{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600;font-size:15px;color:var(--ink);text-transform:capitalize}
.sof-home .mjs-date svg{width:20px;height:20px;color:var(--violet)}

/* ---------- modèles de documents (/ressources/les-modeles-de-document-de-la-formation-professionnelle) : hero en deux
   colonnes (coches, puis documents dessinés : convention Word au premier plan, PDF et Excel derrière, deux pastilles),
   cartes des modèles avec le pictogramme du type de fichier, FAQ et demande de démo ---------- */
.sof-home .md-hero .lead{margin:0}
.sof-home .md-checks{margin-top:4px}
.sof-home .md-checks strong{font-weight:700}
.sof-home .md-hero .hero-viz{width:100%;min-width:0}
.sof-home .md-viz{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1.05}
.sof-home .md-sheet{position:absolute;display:flex;flex-direction:column;gap:9px;padding:22px 22px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 30px 60px -30px rgba(48,30,140,.35),0 4px 14px rgba(48,30,140,.06)}
.sof-home .md-sheet i{display:block;height:8px;border-radius:4px;background:#ECE8FA;width:100%}
.sof-home .md-sheet i.w80{width:80%}.sof-home .md-sheet i.w60{width:60%}.sof-home .md-sheet i.w40{width:40%}
.sof-home .md-s1{left:14%;top:8%;width:62%;height:84%;z-index:3;transform:rotate(-2deg);animation:md-float 8s ease-in-out infinite}
.sof-home .md-s2{left:46%;top:4%;width:48%;height:62%;z-index:2;transform:rotate(6deg);opacity:.95}
.sof-home .md-s3{left:2%;top:30%;width:42%;height:58%;z-index:1;transform:rotate(-9deg);opacity:.9}
@keyframes md-float{50%{transform:rotate(-2deg) translateY(-8px)}}
.sof-home .md-ft{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-bottom:6px;border-radius:12px}
.sof-home .md-ft svg,.sof-home .md-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sof-home .md-ft-word{background:#e8f0fd;color:#2563c9}
.sof-home .md-ft-pdf{background:#fdecea;color:#d0453a}
.sof-home .md-ft-excel{background:#e6f5ec;color:#1f8a4c}
.sof-home .md-h{display:block;width:70%;height:14px;margin-bottom:4px;border-radius:5px;background:#D9D1FF}
.sof-home .md-tbl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
.sof-home .md-tbl i{height:18px;border-radius:4px;background:#F4F1FF;border:1px solid #E8E3FB}
.sof-home .md-sign{margin-top:auto;align-self:flex-end;width:42%}
.sof-home .md-sign svg{display:block;width:100%;fill:none;stroke:#9F8BFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sof-home .md-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:0 18px 40px -16px rgba(48,30,140,.3);font-weight:600;font-size:.9rem;color:var(--ink);white-space:nowrap}
.sof-home .md-chip svg{width:22px;height:22px;flex:none}
.sof-home .md-c1{right:0;top:58%}
.sof-home .md-c2{left:4%;bottom:2%}
.sof-home .md-c2 svg{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){ .sof-home .md-s1{animation:none} }
@media (max-width:640px){ .sof-home .md-sheet{padding:16px 14px 12px;gap:7px} .sof-home .md-ft{width:36px;height:36px} .sof-home .md-chip{font-size:.82rem;padding:8px 11px} }
/* cartes */
.sof-home .md-list{padding-top:clamp(24px,3vw,40px)}
.sof-home .md-cards{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .md-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);
  box-shadow:0 10px 30px rgba(48,30,140,.05);transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.sof-home .md-card:hover{border-color:#cfc4ff;box-shadow:0 18px 40px -16px rgba(48,30,140,.22);transform:translateY(-2px)}
.sof-home .md-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px}
.sof-home .md-t{font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.sof-home .md-d{font-size:.95rem;line-height:1.6;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sof-home .md-card .art-card-go{margin-top:auto}
.sof-home .md-card:hover .art-card-go svg{transform:translateX(3px)}
@media (max-width:1100px){ .sof-home .md-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .sof-home .md-cards{grid-template-columns:minmax(0,1fr)} }

/* ---------- fiches modèle de document (/modeles/{slug}, single/single-modele.php) : hero en deux colonnes (titre, format,
   coches, texte à gauche ; formulaire HubSpot de téléchargement dans une carte à droite), puis sommaire et contenu des
   articles, appel final de l'accueil ---------- */
.sof-home .mdf-hero h1{font-size:clamp(1.9rem,1.1rem + 2vw,2.8rem)}
/* fil d'Ariane : au-dessus des deux colonnes, sur une seule ligne (le titre du modèle est long) ; sur mobile il passe à la ligne */
.sof-home .mdf-hero .hero-content{row-gap:28px}
.sof-home .mdf-hero .mdf-crumb{grid-column:1 / -1;justify-self:start}
@media (max-width:1099px){ .sof-home .mdf-hero .mdf-crumb{justify-self:center;margin-bottom:0} }
@media (max-width:640px){ .sof-home .mdf-hero .mdf-crumb{flex-wrap:wrap;white-space:normal;max-width:100%;row-gap:2px;border-radius:16px} }
.sof-home .mdf-format{align-self:flex-start}
.sof-home .mdf-checks strong{font-weight:700}
.sof-home .mdf-txt{color:var(--ink-soft);font-size:1.02rem;line-height:1.65}
.sof-home .mdf-txt p{margin:0}
.sof-home .mdf-txt a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sof-home .mdf-hero .hero-viz{width:100%;min-width:0;max-width:560px}
.sof-home .mdf-form{padding:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 20px 50px rgba(48,30,140,.1);text-align:left}
.sof-home .mdf-form-t{margin:0 0 14px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.35;color:var(--ink)}
.sof-home .mdf-ok{flex-direction:column;align-items:center;gap:14px;text-align:center}
.sof-home .mdf-ok > svg{width:32px;height:32px}
.sof-home .mdf-ok p{margin:0;color:var(--ink)}
@media (max-width:1099px){ .sof-home .mdf-format{align-self:center} .sof-home .mdf-hero .hero-viz{margin:0 auto} }
/* animation « facturation électronique » insérée dans le contenu de /modeles/facturation-electronique (à la place de
   l'ancienne bannière) : les calques gardent leur propre mise en forme, sans les marges ni arrondis des images du contenu */
.sof-home .art-prose .mdf-viz{width:100%;max-width:620px;margin:clamp(28px,4vw,44px) auto}
.sof-home .art-prose .mdf-viz img{display:block;width:100%;max-width:none;height:auto;margin:0;border-radius:0}

/* ---------- formations (/formations, pages/formations/) : hero centré, trois chiffres clés, cartes des formations (pictogramme,
   texte, modalité et durée en pastilles), certification Qualiopi, avis clients, avantages en deux colonnes,
   bandeau « Comment SmartOF vous aide ? » ---------- */
.sof-home .fo-stats{padding:clamp(8px,2vw,24px) var(--gutter) clamp(40px,5vw,72px)}
.sof-home .fo-stats-in{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .fo-stat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:center;box-shadow:0 10px 30px rgba(48,30,140,.05)}
.sof-home .fo-fig{display:inline-block;padding:8px 16px;border-radius:14px;background:var(--peach);font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,1.4rem + 1.2vw,2.5rem);line-height:1.1;color:#E0671F}
.sof-home .fo-stat h3{margin:6px 0 0;font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink)}
.sof-home .fo-stat p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.sof-home .fo-src{max-width:1200px;margin:16px auto 0;text-align:center;font-size:.88rem;color:var(--muted)}
.sof-home .fo-list{padding:0 var(--gutter) clamp(40px,5vw,72px)}
.sof-home .fo-cards{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .fo-card{display:flex;align-items:stretch;gap:24px;height:100%;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);
  box-shadow:0 10px 30px rgba(48,30,140,.05);transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.sof-home .fo-card:hover{border-color:#cfc4ff;box-shadow:0 18px 40px -16px rgba(48,30,140,.22);transform:translateY(-2px)}
.sof-home .fo-card-txt{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1}
.sof-home .fo-card h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.3;color:var(--ink)}
.sof-home .fo-card p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
/* pastilles et flèche sur une même ligne, en bas de la carte (alignées d'une carte à l'autre) */
.sof-home .fo-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.sof-home .fo-meta span:not(.fo-go){display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #dcd3ff;border-radius:999px;background:#f7f4ff;font-weight:600;font-size:.85rem;color:#5a3cdd}
.sof-home .fo-meta img{width:18px;height:18px}
.sof-home .fo-go{display:inline-flex;margin-left:auto;color:var(--violet)}
.sof-home .fo-go svg{width:20px;height:20px;transition:transform .2s}
.sof-home .fo-card:hover .fo-go svg{transform:translateX(3px)}
/* visuel animé de la formation en réduction, en haut de la carte (à la place de la photo) */
.sof-home .fo-card{flex-direction:column}
.sof-home .fo-media{display:grid;place-items:center;height:290px;margin:-8px -8px 4px;border-radius:14px;background:linear-gradient(160deg,#f6f3ff,#fff4ec);overflow:hidden}
.sof-home .fo-media .fv{width:520px;max-width:none;margin:0;zoom:.6}
.sof-home .fo-media .fv-time{zoom:.52}
@media (max-width:640px){ .sof-home .fo-media{height:250px} .sof-home .fo-media .fv{width:540px;zoom:.5} .sof-home .fo-media .fv-time{zoom:.44} .sof-home .fo-media .fv-panel{transform:rotate(-1.5deg)} }
@media (max-width:999px){ .sof-home .fo-cards{grid-template-columns:minmax(0,1fr);max-width:720px} }
.sof-home .fo-q{padding:0 var(--gutter) clamp(40px,5vw,72px)}
.sof-home.fo-page .fo-q + .reviews{padding-top:clamp(32px,4vw,56px)}
.sof-home .fo-q-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(28px,4vw,48px) 24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);text-align:center;box-shadow:0 10px 30px rgba(48,30,140,.06)}
.sof-home .fo-q-logo{width:min(260px,60%);height:auto}
.sof-home .fo-q-in p{margin:0;max-width:34rem;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--ink)}
.sof-home .fo-q-in strong{font-weight:800}
.sof-home .fo-adv{padding:clamp(48px,6vw,96px) var(--gutter)}
.sof-home .fo-adv-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.sof-home .fo-adv-l{position:sticky;top:calc(var(--header-h) + 32px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sof-home .fo-adv h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.sof-home .fo-adv h2 .hl{color:var(--violet)}
.sof-home .fo-adv-l p{margin:0;font-size:clamp(1.02rem,.98rem + .25vw,1.15rem);line-height:1.65;color:var(--ink-soft)}
.sof-home .fo-adv-l strong{color:var(--ink);font-weight:700}
.sof-home .fo-adv-r{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.sof-home .fo-adv-card{display:flex;gap:18px;align-items:flex-start;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.05)}
.sof-home .fo-adv-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:var(--peach);border:1px solid #ffdfca}
.sof-home .fo-adv-ico img{width:38px;height:38px}
.sof-home .fo-adv-card h5{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.sof-home .fo-adv-card p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:860px){
  .sof-home .fo-stats-in{grid-template-columns:minmax(0,1fr);max-width:560px}
  .sof-home .fo-adv-in{grid-template-columns:minmax(0,1fr)}
  .sof-home .fo-adv-l{position:static}
}

/* ---------- visuels animés du hero des fiches formation (components/formation-viz.php) : cycle de 12 s en CSS seul ---------- */
.sof-home .fv{position:relative;width:100%;max-width:520px;margin:0 auto;padding:18px 0 46px}
.sof-home .fv-panel{position:relative;padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 30px 70px -30px rgba(48,30,140,.35),0 4px 14px rgba(48,30,140,.06);transform:rotate(-1.5deg)}
.sof-home .fv-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 40px -16px rgba(48,30,140,.3)}
.sof-home .fv-chip b{font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.sof-home .fv-chip small{display:block;font-size:.8rem;color:var(--muted);white-space:nowrap}
/* gain de temps */
.sof-home .fv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sof-home .fv-head b{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.sof-home .fv-auto{padding:4px 10px;border-radius:999px;background:#f3f0ff;color:#5a3cdd;font-weight:600;font-size:.75rem}
.sof-home .fv-tasks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.sof-home .fv-tasks li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:.9rem;color:var(--ink)}
.sof-home .fv-tl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sof-home .fv-cb{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #cfc4ff;background:#fff;animation:fv-cb 12s infinite;animation-delay:calc(var(--i) * .9s)}
.sof-home .fv-cb svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:fv-show 12s infinite;animation-delay:calc(var(--i) * .9s)}
.sof-home .fv-tasks em{position:relative;flex:none;width:64px;height:22px;font-style:normal}
.sof-home .fv-tasks em i{position:absolute;inset:0;display:grid;place-items:center;border-radius:999px;font-style:normal;font-weight:600;font-size:.72rem}
.sof-home .fv-wait{background:#f2f2f5;color:#667085;animation:fv-hide 12s infinite;animation-delay:calc(var(--i) * .9s)}
.sof-home .fv-done{background:#e6f6ee;color:#1f7a55;opacity:0;animation:fv-show 12s infinite;animation-delay:calc(var(--i) * .9s)}
@keyframes fv-cb{0%,12%{background:#fff;border-color:#cfc4ff}16%,88%{background:var(--violet);border-color:var(--violet)}94%,100%{background:#fff;border-color:#cfc4ff}}
@keyframes fv-show{0%,12%{opacity:0}16%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes fv-hide{0%,12%{opacity:1}16%,88%{opacity:0}94%,100%{opacity:1}}
.sof-home .fv-gauge{margin-top:16px;padding-top:14px;border-top:1px dashed #dcd3ff}
.sof-home .fv-gauge p{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:.85rem;color:var(--muted)}
.sof-home .fv-gauge b{position:relative;display:inline-block;width:56px;height:20px;text-align:right}
.sof-home .fv-gauge b i{position:absolute;right:0;top:0;font-style:normal;font-weight:700;font-size:.95rem;color:var(--ink)}
.sof-home .fv-t1{animation:fv-hide 12s infinite;animation-delay:3.6s}
.sof-home .fv-t2{color:#E0671F!important;opacity:0;animation:fv-show 12s infinite;animation-delay:3.6s}
.sof-home .fv-bar{display:block;height:10px;border-radius:999px;background:#f3f0ff;overflow:hidden}
.sof-home .fv-bar i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#FF934F,#FFB384);animation:fv-bar 12s infinite}
@keyframes fv-bar{0%,8%{width:100%}46%,88%{width:30%}96%,100%{width:100%}}
/* pourcentage de temps gagné (pastille horloge) : compteur CSS (propriété --fvp animée) qui suit la jauge, 0 % quand elle est pleine, 70 % quand elle est à 30 % */
@property --fvp{syntax:'<integer>';inherits:false;initial-value:0}
.sof-home .fv-clock .fv-pct{display:block;min-width:4.2em;font-weight:700;font-size:1.05rem;color:#1f7a55;font-variant-numeric:tabular-nums;counter-reset:fvp var(--fvp);animation:fv-pct 12s infinite}
.sof-home .fv-pct::after{content:counter(fvp) " %"}
@keyframes fv-pct{0%,8%{--fvp:0}46%,88%{--fvp:70}96%,100%{--fvp:0}}
.sof-home .fv-clock{right:-14px;bottom:4px}
.sof-home .fv-dial{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e6f6ee}
.sof-home .fv-dial svg{width:30px;height:30px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round}
.sof-home .fv-dial .fv-h,.sof-home .fv-dial .fv-m{transform-origin:20px 20px;animation:fv-spin 3s linear infinite}
.sof-home .fv-dial .fv-h{animation-duration:12s}
@keyframes fv-spin{to{transform:rotate(360deg)}}
/* personnalisation de document */
.sof-home .fv-doc-head{display:flex;align-items:center;gap:12px;margin:-22px -22px 16px;padding:16px 22px;border-radius:20px 20px 0 0;background:#f3f0ff;animation:fv-tint 12s infinite}
.sof-home .fv-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff}
.sof-home .fv-logo img{width:22px;height:22px}
.sof-home .fv-doc-head b{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
@keyframes fv-tint{0%,30%{background:#f3f0ff}36%,62%{background:#fff4ed}68%,92%{background:#e8f6ef}100%{background:#f3f0ff}}
.sof-home .fv-doc-body{display:grid;gap:10px}
.sof-home .fv-f{display:flex;align-items:center;gap:12px;margin:0;font-size:.88rem}
.sof-home .fv-f span{flex:none;width:76px;color:var(--muted)}
.sof-home .fv-f em{position:relative;flex:1;height:30px;font-style:normal}
.sof-home .fv-f em i{position:absolute;inset:0;display:flex;align-items:center;padding:0 10px;border-radius:8px;font-style:normal;white-space:nowrap;overflow:hidden}
.sof-home .fv-ph{border:1px dashed #cfc4ff;background:#faf9ff;color:#7D5FFF;font-family:ui-monospace,Menlo,monospace;font-size:.8rem;animation:fv-hide 12s infinite}
.sof-home .fv-val{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;opacity:0;animation:fv-show 12s infinite}
.sof-home .fv-f:nth-child(2) i{animation-delay:.7s}.sof-home .fv-f:nth-child(3) i{animation-delay:1.4s}.sof-home .fv-f:nth-child(4) i{animation-delay:2.1s}
.sof-home .fv-lines{display:grid;gap:8px;margin-top:6px}
.sof-home .fv-lines i{display:block;height:8px;border-radius:4px;background:#ECE8FA}
.sof-home .fv-lines i.w80{width:80%}.sof-home .fv-lines i.w60{width:60%}
.sof-home .fv-pal{right:-14px;top:0}
.sof-home .fv-sw{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.sof-home .fv-sw.s1{background:#7D5FFF}.sof-home .fv-sw.s2{background:#FF934F}.sof-home .fv-sw.s3{background:#2D936C}
.sof-home .fv-ok{right:-14px;bottom:4px}
.sof-home .fv-ok svg{width:22px;height:22px;padding:3px;border-radius:7px;background:var(--violet);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){ .sof-home .fv-panel{transform:none} .sof-home .fv-doc{padding-top:50px} .sof-home .fv-doc .fv-pal{top:0} .sof-home .fv-clock,.sof-home .fv-ok{right:0} .sof-home .fv-pal{right:0} .sof-home .fv-panel{padding:16px} .sof-home .fv-doc-head{margin:-16px -16px 14px;padding:14px 16px} }
@media (prefers-reduced-motion:reduce){
  .sof-home .fv *{animation:none!important}
  .sof-home .fv-cb{background:var(--violet);border-color:var(--violet)} .sof-home .fv-cb svg,.sof-home .fv-done,.sof-home .fv-t2,.sof-home .fv-val{opacity:1} .sof-home .fv-wait,.sof-home .fv-t1,.sof-home .fv-ph{opacity:0} .sof-home .fv-bar i{width:30%} .sof-home .fv-pct{--fvp:70}
}

/* ---------- fiches formation (/formations/{slug}, single/single-formation.php) : hero en deux colonnes (fil d'Ariane au-dessus,
   retour, titre, intro, pastilles ; visuel animé components/formation-viz.php à droite), carte collante (public, formateur,
   pré-requis, boutons) et sections du programme, formations similaires, inscription avec le formulaire HubSpot ---------- */
.sof-home .fs-hero .hero-content{row-gap:28px}
.sof-home .fs-hero .fs-crumb{grid-column:1 / -1;justify-self:start}
.sof-home .fs-hero .hero-viz{width:100%;min-width:0}
.sof-home .fs-back{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #dcd3ff;border-radius:999px;background:#fff;font-weight:600;font-size:.9rem;color:#5a3cdd;text-decoration:none;transition:border-color .2s,background-color .2s}
.sof-home .fs-back:hover{border-color:var(--violet);background:#f7f4ff}
.sof-home .fs-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sof-home .fs-pills{display:flex;flex-wrap:wrap;gap:10px}
.sof-home .fs-pills span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:600;font-size:.95rem;color:var(--ink);box-shadow:0 6px 18px -10px rgba(48,30,140,.25)}
.sof-home .fs-pills img{width:20px;height:20px}
@media (max-width:1099px){ .sof-home .fs-hero .fs-crumb{justify-self:center} .sof-home .fs-pills{justify-content:center} .sof-home .fs-back{align-self:center} }
.sof-home .fs-body{padding:clamp(24px,3vw,48px) var(--gutter) clamp(48px,6vw,96px)}
.sof-home .fs-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.sof-home .fs-side{position:sticky;top:calc(var(--header-h) + 24px)}
.sof-home .fs-card{display:flex;flex-direction:column;gap:18px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.06)}
.sof-home .fs-blk{padding-bottom:18px;border-bottom:1px dashed #dcd3ff}
.sof-home .fs-blk:last-of-type{padding-bottom:0;border-bottom:0}
.sof-home .fs-blk h3{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.sof-home .fs-blk p{margin:0}
.sof-home .fs-blk,.sof-home .fs-rich{color:var(--ink-soft);font-size:1rem;line-height:1.65}
.sof-home .fs-btns{display:grid;gap:10px}
.sof-home .fs-btns .btn{justify-content:center;width:100%}
.sof-home .fs-main{display:flex;flex-direction:column;gap:clamp(36px,4vw,52px);min-width:0}
.sof-home .fs-sec h2{margin:0 0 16px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.45rem,1.15rem + 1vw,1.9rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.sof-home .fs-rich p{margin:0 0 12px}
.sof-home .fs-rich ul,.sof-home .fs-rich ol{margin:0 0 12px;padding-left:1.3em}
.sof-home .fs-rich ul{list-style:disc}.sof-home .fs-rich ol{list-style:decimal}
.sof-home .fs-rich li{margin:6px 0}
.sof-home .fs-rich li::marker{color:var(--violet)}
.sof-home .fs-rich strong{color:var(--ink);font-weight:600}
.sof-home .fs-rich a,.sof-home .fs-steps a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sof-home .fs-rich > :last-child{margin-bottom:0}
.sof-home .fs-mods{display:grid;gap:12px}
.sof-home .fs-mod{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .2s}
.sof-home .fs-mod:hover{border-color:#cfc4ff}
.sof-home .fs-mod .faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 20px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;font-weight:600;font-size:1.05rem;color:var(--ink)}
.sof-home .fs-mod .faq-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#f7f4ff;color:var(--violet);transition:transform .3s}
.sof-home .fs-mod .faq-icon svg{width:18px;height:18px}
.sof-home .fs-mod .faq-icon.rotate-180{transform:rotate(180deg)}
.sof-home .fs-mod .faq-answer{padding:0 20px}
.sof-home .fs-mod .faq-answer.hidden{display:none}
.sof-home .fs-mod .faq-answer.pb-5{padding-bottom:18px}
.sof-home .fs-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sof-home .fs-steps li{padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:14px;background:var(--surface)}
.sof-home .fs-steps p{margin:0;color:var(--ink-soft);line-height:1.6}
.sof-home .fs-sim .fo-cards{max-width:1200px}
.sof-home .fs-contact .cta-sub{max-width:62ch}
@media (max-width:999px){
  .sof-home .fs-layout{grid-template-columns:minmax(0,1fr)}
  .sof-home .fs-side{position:static}
}

/* ---------- Page /avis-clients ---------- */
.sof-home .al-list.av-zone{padding:0}
/* mosaïque des avis (script de pages/avis-clients/sections/03-avis-grid.php) */
.sof-home .av-grid.is-masonry{grid-auto-rows:4px;row-gap:0}
.sof-home .av-grid.is-masonry .av-card{align-self:start}
/* logos en quinconce : une colonne sur deux descend un peu */
.sof-home .av-logos .client-wall_cl-item:nth-child(2n){transform:translateY(26px)}
.sof-home .av-rating{margin-top:6px}
.sof-home .av-hero .lead{max-width:46em}
.sof-home .av-feat{padding:0 var(--gutter) clamp(48px,6vw,96px)}
/* vidéo paysage à toutes les largeurs (la règle 9/16 de la home vise sa vidéo verticale) */
.sof-home .av-video .hv{aspect-ratio:16 / 9}
.sof-home .av-feat-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:center}
.sof-home .av-quote{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(24px,3vw,40px);border:1px solid #ECE8FB;border-radius:22px;background:var(--surface);box-shadow:0 30px 60px -36px rgba(48,30,140,.35)}
.sof-home .av-q-logo{width:48px;height:48px;object-fit:contain}
.sof-home .av-q-stars{font-size:20px}
.sof-home .av-quote h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sof-home .av-quote figcaption{display:flex;align-items:center;gap:14px;width:100%;padding-top:16px;border-top:1px solid #F1EEFB}
.sof-home .av-quote figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.sof-home .av-quote figcaption b,.sof-home .av-card figcaption b{display:block;font-weight:600;color:var(--ink);line-height:1.3}
.sof-home .av-quote figcaption small,.sof-home .av-card figcaption small{display:block;font-size:.9rem;color:var(--muted);line-height:1.35}
.sof-home .av-wall{padding-top:clamp(32px,4vw,56px)}
.sof-home .av-logos{max-width:1224px;margin:clamp(12px,2vw,28px) auto 0;padding:12px 12px 56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.sof-home .av-logo{display:grid;place-items:center;height:clamp(96px,9vw,120px);padding:16px 24px;border:1px solid #ECE8FB;border-radius:18px;background:#fff;box-shadow:0 12px 30px -20px rgba(48,30,140,.3)}
.sof-home .av-logo img{max-width:100%;max-height:64px;object-fit:contain}
.sof-home .av-list{padding:0 var(--gutter) clamp(48px,6vw,96px)}
.sof-home .av-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .av-card{display:flex;flex-direction:column;gap:14px;margin:0;padding:clamp(22px,2.2vw,28px);border:1px solid #ECE8FB;border-radius:22px;background:var(--surface);box-shadow:0 10px 30px rgba(48,30,140,.05);scroll-margin-top:calc(var(--header-h) + 24px)}
.sof-home .av-card:target{border-color:#cfc4ff;box-shadow:0 0 0 3px #ece6ff}
.sof-home .av-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sof-home .av-card-logo{height:40px;width:auto;max-width:60%;object-fit:contain}
.sof-home .av-host{font-size:.85rem;color:var(--muted)}
.sof-home .av-txt p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.sof-home .av-fade{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(to top,var(--surface),rgba(255,255,255,0));pointer-events:none}
.sof-home .av-toggle{align-self:flex-start;margin-top:-6px;padding:0;border:0;background:none;font:inherit;font-size:.9rem;font-weight:600;color:var(--violet);cursor:pointer}
.sof-home .av-toggle:hover{text-decoration:underline}
.sof-home .av-src{display:flex;align-items:center;gap:8px;margin:0;padding-top:12px;border-top:1px solid #F1EEFB;font-size:.85rem;color:var(--muted)}
.sof-home .av-src img{width:16px;height:16px}
@media (max-width:999px){ .sof-home .av-feat-in{grid-template-columns:minmax(0,1fr);max-width:760px} .sof-home .av-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .sof-home .av-grid{grid-template-columns:minmax(0,1fr)} .sof-home .av-logos{grid-template-columns:repeat(2,minmax(0,1fr))} .sof-home .av-logo{padding:12px 14px} }

/* ---------- Page /ressources/faq : bandeau de fond du hero avec le fil d'Ariane, la FAQ remonte dessus ---------- */
.sof-home .fq-hero .hero-content{align-items:stretch;padding-inline:var(--gutter);padding-bottom:clamp(120px,16vw,220px)}
/* fil d'Ariane aligné sur la colonne de gauche de la FAQ (.faq-in, 1180 px) */
.sof-home .fq-hero .crumb{align-self:flex-start;margin:0 auto 0 max(0px,(100% - 1180px) / 2)}
.sof-home.fq-page .faq{margin-top:calc(-1 * clamp(120px,16vw,220px));padding-top:clamp(24px,3vw,40px);z-index:1}
@media (max-width:999px){ .sof-home .fq-hero .hero-content{padding-bottom:120px} .sof-home.fq-page .faq{margin-top:-120px} }
/* titre de la FAQ en h1 (components/sof-faq.php, heading 'h1') : même style que le h2 de l'accueil */
.sof-home .faq h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.2rem + 2vw,2.9rem);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .faq h1 .hl{color:var(--violet)}

/* ---------- Page 404 (404.php) : la prise et la fiche entrent par les côtés en déroulant leur câble et dessinent un
   cœur (animation SMIL dans 404.php), un pointillé descend vers le bouton, qui s'illumine au même rythme (9 s) ---------- */
.sof-home .e404-hero .hero-content{flex-direction:column;align-items:center;gap:0;min-height:min(78vh,760px);justify-content:center;padding-bottom:clamp(72px,10vh,120px)}
.sof-home .e404-viz{display:block;width:min(100%,720px);height:auto;overflow:visible}
.sof-home .e404-num{font-family:var(--font-display);font-weight:800;font-size:290px;letter-spacing:-.02em}
.sof-home .e404-cable{fill:none;stroke:#5A3CB8;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.sof-home .e404-prong{fill:none;stroke:#5A3CB8;stroke-width:14;stroke-linecap:round}
.sof-home .e404-dash{fill:none;stroke:#9F8BFF;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 11}
.sof-home .e404-beat{transform-box:view-box;transform-origin:500px 260px;animation:e404-beat 9s infinite}
@keyframes e404-beat{0%,52%{transform:none}56%{transform:scale(1.04)}60%{transform:none}64%{transform:scale(1.04)}68%,100%{transform:none}}
.sof-home .e404-btn{margin-top:20px;animation:e404-btn 9s infinite}
@keyframes e404-btn{0%,60%{box-shadow:0 14px 30px -14px rgba(125,95,255,.7)}67%{box-shadow:0 0 0 10px rgba(125,95,255,.18),0 14px 30px -14px rgba(125,95,255,.7)}75%,100%{box-shadow:0 14px 30px -14px rgba(125,95,255,.7)}}
@media (prefers-reduced-motion:reduce){ .sof-home .e404-btn,.sof-home .e404-beat{animation:none} }

/* ---------- Page /contact (pages/contact/contact.php) : mise en page des fiches modèle (.mdf-*), e-mail en pastille ---------- */
.sof-home .ct-hero .hero-copy{gap:24px}
.sof-home .ct-mail{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 16px 8px 8px;border:1px solid #dcd3ff;border-radius:999px;background:var(--surface);
  box-shadow:0 8px 20px -12px rgba(48,30,140,.3);font-weight:600;color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s}
.sof-home .ct-mail:hover{border-color:var(--violet);color:var(--violet)}
.sof-home .ct-mail-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f3f0ff}
.sof-home .ct-mail-ico svg{width:19px;height:19px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sof-home .ct-form{min-height:420px}
@media (max-width:1099px){ .sof-home .ct-mail{align-self:center} }


/* ---------- Landing SEA (/lp/logiciel-gestion-of) ---------- */
/* hero : texte à gauche, vignette de la vidéo de présentation à droite (popup au clic) */
.sof-home .lp-hero .lp-video{width:100%;max-width:620px;margin:0 auto}
.sof-home .lp-hero .eyebrow{margin:0 0 4px}
.sof-home .lp-hero h1{font-size:clamp(1.9rem,1.1rem + 1.9vw,2.6rem)}
@media (min-width:1100px){ .sof-home .lp-hero .hero-content{grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr)} }
/* la vignette reste en 16/9 sur téléphone (la vidéo verticale s'ouvre quand même en popup) : le calendrier remonte */
@media (max-width:640px) and (orientation:portrait){
  .sof-home .lp-hero .lp-video{width:100%}
  .sof-home .lp-hero .hv{aspect-ratio:16 / 9;border-radius:16px}
}
/* module de rendez-vous juste sous le hero */
.sof-home .sol-center.lp-rdv{padding:clamp(8px,2vw,24px) var(--gutter) clamp(40px,5vw,72px);scroll-margin-top:var(--header-h)}
.sof-home .lp-rdv .section-head{max-width:760px;margin:0 auto clamp(12px,2vw,20px);text-align:center}
.sof-home .lp-checks{justify-content:center;margin-top:12px;font-weight:500;color:var(--ink-soft)}
.sof-home .lp-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(28px,3vw,40px)}
/* réassurance sous les CTA */
.sof-home .lp-note{margin:-6px 0 0;font-size:14px;color:var(--muted)}
.sof-home .lp-actions .lp-note{margin:0}
/* calendrier + étapes de la démo : deux colonnes sur grand écran, sinon la colonne passe sous le calendrier */
.sof-home .lp-rdv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);max-width:1240px;margin:0 auto}
.sof-home .lp-rdv-side{width:100%;max-width:640px;margin:0 auto;text-align:left}
.sof-home .lp-rdv-side h3{margin:0 0 16px;font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.25;color:var(--ink)}
.sof-home .lp-quote{margin:24px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.sof-home .lp-quote blockquote{margin:6px 0 10px}
.sof-home .lp-quote blockquote p{margin:0;color:var(--ink);line-height:1.55}
.sof-home .lp-quote figcaption{font-size:14px;color:var(--muted)}
.sof-home .lp-quote figcaption strong{color:var(--ink);font-weight:600}
@media (min-width:1240px){
  .sof-home .lp-rdv-grid{grid-template-columns:852px minmax(0,1fr);align-items:start}
  .sof-home .lp-rdv-side{padding-top:24px}
}
/* avantages : pictogrammes plus grands dans le même carré pêche (48 px), écart resserré avec les avis */
.sof-home.lp-sea .sol-adv .card-h .ico svg{width:28px;height:28px}
.sof-home.lp-sea .sol-adv{padding-bottom:clamp(16px,2.5vw,32px)}
.sof-home.lp-sea .sol-adv + .reviews{padding-top:clamp(40px,5vw,64px)}

/* halos lumineux (mêmes teintes que l'accueil : violet et pêche, derrière le contenu) */
.sof-home.lp-sea .lp-rdv::before,.sof-home.lp-sea .lp-rdv::after,.sof-home.lp-sea .sol-adv::before,.sof-home.lp-sea .sol-adv::after,
.sof-home.lp-sea .reviews::after{content:"";position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;pointer-events:none}
/* rendez-vous : violet derrière le calendrier, pêche derrière les étapes de la démo */
.sof-home.lp-sea .lp-rdv::before{width:min(100vw,1200px);left:-10vw;top:52%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(204,191,255,.75),rgba(204,191,255,0))}
.sof-home.lp-sea .lp-rdv::after{width:min(75vw,860px);right:-12vw;top:62%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(255,206,175,.68),rgba(255,206,175,0))}
/* avantages : pêche à gauche, violet à droite */
.sof-home.lp-sea .sol-adv::before{width:min(85vw,980px);left:-14vw;top:60%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(255,206,175,.62),rgba(255,206,175,0))}
.sof-home.lp-sea .sol-adv::after{width:min(90vw,1040px);right:-12vw;top:42%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(204,191,255,.7),rgba(204,191,255,0))}
/* avis : pêche en complément du halo violet de l'accueil */
.sof-home.lp-sea .reviews::after{width:min(75vw,860px);right:-10vw;top:30%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(255,206,175,.55),rgba(255,206,175,0))}
@media (max-width:767px){
  .sof-home.lp-sea .lp-rdv::before{width:150vw;left:-60vw;top:30%}
  .sof-home.lp-sea .lp-rdv::after{width:130vw;right:-60vw;top:80%}
  .sof-home.lp-sea .sol-adv::before{width:130vw;left:-70vw}
  .sof-home.lp-sea .sol-adv::after{width:130vw;right:-70vw}
}

/* barre CTA collante (téléphone et tablette) ; à gauche, la place du bouton des cookies (Axeptio, en shadow DOM, non déplaçable) */
.sof-home .lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)) 84px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -8px 24px -12px rgba(48,30,140,.25);
  transform:translateY(110%);transition:transform .3s ease;pointer-events:none}
.sof-home .lp-sticky.on{transform:none;pointer-events:auto}
.sof-home .lp-sticky .btn{width:100%;justify-content:center}
@media (min-width:1100px){ .sof-home .lp-sticky{display:none} }
/* la barre ne masque jamais le bas de la page (footer compris) */
@media (max-width:1099px){ body:has(.lp-sticky){padding-bottom:calc(68px + env(safe-area-inset-bottom))} }
/* téléphone en paysage : avec l'en-tête fixe, la barre ne laisserait qu'environ 200 px de contenu ; le bouton démo de l'en-tête suffit */
@media (max-width:1099px) and (max-height:500px) and (orientation:landscape){
  .sof-home .lp-sticky{display:none}
  body:has(.lp-sticky){padding-bottom:0}
}
/* écrans bas en paysage : la vignette vidéo tient en entier sous l'en-tête fixe */
@media (orientation:landscape) and (max-height:500px){ .sof-home .lp-hero .lp-video{max-width:min(620px,calc((100dvh - var(--header-h) - 32px) * 16 / 9))} }
@media (max-width:400px){ .sof-home .sol-center.lp-rdv{padding-left:0;padding-right:0} .sof-home .lp-rdv .section-head,.sof-home .lp-rdv-side{padding:0 var(--gutter)} }

/* blocs du déroulé partagés par les landings (pages/lp/partials/blocs.php) */
/* logos compacts sous le hero */
.sof-home .lp-logos{padding:clamp(8px,1.5vw,20px) var(--gutter) clamp(48px,6vw,88px);text-align:center}
.sof-home .lp-logos p{margin:0 0 clamp(18px,2vw,26px);font-size:15px;color:var(--ink-soft)}
.sof-home .lp-logos p strong{color:var(--violet);font-weight:600}
/* colonnes de largeur égale et nombre impair de logos : Pennylane tombe exactement au centre */
.sof-home .lp-logos ul{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px)}
.sof-home .lp-logos li{display:flex;justify-content:center;min-width:0}
.sof-home .lp-logos img{display:block;height:var(--h);width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.6}
@media (max-width:1099px){ .sof-home .lp-logos li:first-child,.sof-home .lp-logos li:last-child{display:none} }
@media (max-width:640px){ .sof-home .lp-logos img{height:calc(var(--h) * .7)} .sof-home .lp-logos ul{gap:20px} .sof-home .lp-logos li:nth-child(2),.sof-home .lp-logos li:nth-child(6){display:none} }
/* constat (avant) + réponse SmartOF (après) */
.sof-home .lp-pain .section-head{margin-bottom:clamp(24px,3vw,40px)}
.sof-home .lp-pain-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.sof-home .lp-pain-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sof-home .lp-pain-list li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid var(--line);color:var(--ink);line-height:1.5}
.sof-home .lp-x{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--peach);color:var(--orange)}
.sof-home .lp-x svg{width:14px;height:14px}
.sof-home .lp-agit{position:relative;padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 30px 60px -40px rgba(48,30,140,.35)}
.sof-home .lp-agit-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sof-home .lp-agit .ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--peach)}
.sof-home .lp-agit .ico svg{width:28px;height:28px}
.sof-home .lp-agit-tag{display:inline-block;padding:6px 13px;border:1.5px solid var(--orange);border-radius:999px;background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sof-home .lp-agit h3{margin:0 0 10px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,1rem + .8vw,1.6rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.sof-home .lp-agit p{margin:0;color:var(--ink-soft);line-height:1.6}
.sof-home .lp-answers{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.sof-home .lp-answers li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);line-height:1.5}
.sof-home .lp-answers svg{flex:none;margin-top:4px}
@media (max-width:860px){ .sof-home .lp-pain-grid{grid-template-columns:minmax(0,1fr);max-width:620px} }
/* 4 cartes de bénéfices */
.sof-home .sol-cards.lp-cards4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1240px}
@media (max-width:1199px){ .sof-home .sol-cards.lp-cards4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px} }
@media (max-width:640px){ .sof-home .sol-cards.lp-cards4{grid-template-columns:minmax(0,1fr)} }
/* garanties */
.sof-home .lp-guar{padding:clamp(24px,3vw,40px) var(--gutter) 0;text-align:center}
.sof-home .lp-guar-t{margin:0 0 18px;font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink)}
.sof-home .lp-guar ul{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sof-home .lp-guar li{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;color:var(--ink-soft);font-size:15px;line-height:1.35}
.sof-home .lp-guar strong{display:block;color:var(--ink);font-weight:600}
.sof-home .lp-guar-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F1EDFF;color:var(--violet)}
.sof-home .lp-guar-ico svg{width:22px;height:22px}
@media (max-width:1023px){ .sof-home .lp-guar ul{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px} }
@media (max-width:540px){ .sof-home .lp-guar ul{grid-template-columns:minmax(0,1fr);max-width:400px} }
/* étapes de la démo dans la colonne du calendrier */
.sof-home .lp-step-n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:12px;border-radius:50%;background:var(--violet);color:#fff;font-family:var(--font-display);font-weight:700;font-size:18px}
.sof-home .lp-side-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sof-home .lp-side-steps li{position:relative;display:flex;gap:14px;align-items:flex-start;color:var(--ink-soft);line-height:1.5}
.sof-home .lp-side-steps li:not(:last-child)::before{content:"";position:absolute;left:16px;top:38px;bottom:-16px;border-left:1.5px dashed #9F8BFF}
.sof-home .lp-side-steps .lp-step-n{flex:none;width:32px;height:32px;margin:0;font-size:15px}
.sof-home .lp-side-steps strong{display:block;color:var(--ink);font-weight:600}
/* vignette vidéo 16/9 orientée Qualiopi (composée en HTML, sur le modèle de l'affiche de la vidéo) */
.sof-home .lp-poster{position:absolute;inset:0;container-type:inline-size;overflow:hidden;
  background:radial-gradient(60% 80% at 0% 0%,rgba(204,191,255,.75),rgba(204,191,255,0) 70%),radial-gradient(55% 75% at 100% 100%,rgba(255,206,175,.6),rgba(255,206,175,0) 70%),#FBFAFF}
.sof-home .lp-poster::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(125,95,255,.18) 1px,transparent 1.3px);background-size:2.2cqw 2.2cqw}
.sof-home .lp-poster-logo{position:absolute;left:5%;top:7%;display:flex;align-items:center;gap:1cqw;font-family:var(--font-display);font-weight:600;font-size:3.6cqw;letter-spacing:-.02em;color:#3D3D3D}
.sof-home .lp-poster-logo img{width:4.4cqw;height:4.4cqw}
.sof-home .lp-poster-txt{position:absolute;left:5%;top:24%;display:flex;flex-direction:column;font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:.98;color:#1F1A3D}
.sof-home .lp-poster-txt .l1{font-size:5.4cqw;font-weight:500}
.sof-home .lp-poster-txt .l2{margin:.6cqw 0 1.2cqw;font-size:8.4cqw;font-weight:700;letter-spacing:-.05em;line-height:1.05;padding-bottom:.4cqw;
  background:linear-gradient(90deg,#7D5FFF 0%,#B45CF0 55%,#FF8A5C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sof-home .lp-poster-txt .l3{font-size:5cqw;font-weight:700}
.sof-home .lp-poster-txt .l4{font-size:5cqw;font-weight:700;color:var(--violet)}
.sof-home .lp-poster-viz{position:absolute;right:1%;top:50%;width:46%;transform:translateY(-50%)}
.sof-home .lp-poster-viz .qv{max-width:none}
.sof-home .lp-hv-q .hv-play{z-index:3}
/* vignette « 70 % » recomposée et animée (mêmes calques flottants que les pages solution) */
.sof-home .lp-poster-70 .lp-poster-txt{top:20%}
.sof-home .lp-poster-70 .lp-poster-txt .l1{font-size:5.8cqw}
.sof-home .lp-poster-70 .lp-poster-txt .l2{margin:0 0 .6cqw;font-size:18cqw;line-height:.95;letter-spacing:-.06em}
.sof-home .lp-poster-70 .lp-poster-txt .l3,.sof-home .lp-poster-70 .lp-poster-txt .l4{font-size:5.2cqw}
.sof-home .lp-poster-70 .lp-poster-viz{right:1%;width:43%}
.sof-home .lp-viz70{display:block;max-width:none}
.sof-home .lp-chip{animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused;filter:drop-shadow(0 10px 18px rgba(48,30,140,.16))}
.sof-home .viz.in.on .lp-chip{animation-play-state:running}
.sof-home .lp-chip{display:flex;align-items:center;gap:2cqw;padding:1.8cqw 2.6cqw;border-radius:1.6cqw;background:#E9F6EF;border:1px solid #CFEBDC}
.sof-home .lp-chip-ring{flex:none;display:grid;place-items:center;width:8cqw;height:8cqw;border-radius:50%;border:1.1cqw solid #2D936C;background:#fff;font-family:var(--font-display);font-weight:600;font-size:2.7cqw;color:#1F6F50}
.sof-home .lp-chip-t{font-family:var(--font-display);font-weight:600;font-size:3.9cqw;white-space:nowrap;line-height:1.15;color:#2D936C}
.sof-home .ly.sm .lp-chip:has(.lp-chip-pill){padding:0;background:none;border:0}
.sof-home .lp-chip-pill{display:inline-flex;align-items:center;gap:1cqw;padding:1.8cqw 3.4cqw;border-radius:999px;background:#2D936C;color:#fff;font-family:var(--font-display);font-weight:600;font-size:3.9cqw;white-space:nowrap}
.sof-home .lp-chip-pill svg{width:3.8cqw;height:3.8cqw}
@media (prefers-reduced-motion:reduce){ .sof-home .lp-chip{animation:none} }